/* Scss Document */
/*customize*/
@font-face {
  font-family: 'db_comyard_xregular';
  src: url("../font/db_comyard_x_v3.2-webfont.eot");
  src: url("../font/db_comyard_x_v3.2-webfont.eot?#iefix") format("embedded-opentype"), url("../font/db_comyard_x_v3.2-webfont.woff2") format("woff2"), url("../font/db_comyard_x_v3.2-webfont.woff") format("woff"), url("../font/db_comyard_x_v3.2-webfont.ttf") format("truetype"), url("../font/db_comyard_x_v3.2-webfont.svg#db_comyard_xregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'charis_silbold';
  src: url("../font/charissilb-webfont.eot");
  src: url("../font/charissilb-webfont.eot?#iefix") format("embedded-opentype"), url("../font/charissilb-webfont.woff2") format("woff2"), url("../font/charissilb-webfont.woff") format("woff"), url("../font/charissilb-webfont.ttf") format("truetype"), url("../font/charissilb-webfont.svg#charis_silbold") format("svg");
  font-weight: normal;
  font-style: normal; }
* {
  margin: 0;
  padding: 0; }

input[type='text'], input[type='submit'], select, textarea, button {
  -webkit-appearance: none;
  border-radius: 0; }

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

body {
  -webkit-overflow-scrolling: touch;
  font-family: serif, Times New Roman;
  font-size: 20px; }
  body img {
    border: none; }

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #161616; }

footer p {
  text-align: center;
  color: #504f50;
  font-size: 18px;
  line-height: 18px;
  padding: 16px 0 0; }

footer.copy {
  position: static;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #414141; }

footer.copy p {
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 18px;
  padding: 15px 2%; }

.backtop {
  position: fixed;
  right: 20px;
  bottom: -50px;
  z-index: 5;
  background: #c0a975 url(../img/icon.svg) no-repeat 8px -280px;
  width: 40px;
  height: 36px;
  opacity: 0;
  transition: all 0.5s; }
  .backtop span {
    display: block;
    text-indent: -9999px; }

.backtop.active {
  opacity: 0.7;
  bottom: 70px;
  transition: all 2s;
  z-index: 10; }

/*nav global*/
nav > div {
  position: relative;
  width: 1120px;
  margin: 0 auto; }

nav .linenav {
  display: block;
  width: 100px;
  position: absolute;
  left: 50%;
  top: 12px;
  height: 32px;
  transition: all 0.3s;
  border: 1px solid #6b4e0e;
  border-left: none;
  border-right: none; }

.page1 nav .linenav, body nav.hover1 .linenav {
  margin-left: -484px;
  width: 145px; }

.page1 nav a:nth-of-type(1), .page2 nav a:nth-of-type(2), .page3 nav a:nth-of-type(3), .page4 nav a:nth-of-type(4), .page5 nav a:nth-of-type(5), .page6 nav a:nth-of-type(6) {
  color: #6b4e0e !important; }

.page2 nav .linenav, body nav.hover2 .linenav {
  margin-left: -303px;
  width: 142px; }

.page3 nav .linenav, body nav.hover3 .linenav {
  margin-left: -126px;
  width: 132px; }

.page4 nav .linenav, body nav.hover4 .linenav {
  margin-left: 42px;
  width: 187px; }

.page5 nav .linenav, body nav.hover5 .linenav {
  margin-left: 263px;
  width: 139px; }

.page6 nav .linenav, body nav.hover6 .linenav {
  margin-left: 440px;
  width: 44px; }

.canvas-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100vh;
  z-index: 99; }
  .canvas-container iframe {
    position: absolute;
    Left: 0;
    top: 0;
    width: 100%;
    height: 87%;
    border: none;
    background-color: transparent;
    overflow: hidden; }

/*library*/
body .history .left {
  display: none; }

html.ready .history .left {
  display: block; }

@keyframes ArrowMove {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(20px); }
  100% {
    transform: translateY(0); } }
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    transform: scale(0.5);
    opacity: 0; } }
.arrow {
  width: 80px;
  height: 40px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin: 0 0 0 -40px;
  background: url(../img/icon.svg) 0 0 no-repeat;
  display: block;
  animation: ArrowMove 1.5s infinite ease-in-out;
  z-index: 99; }
  .arrow span {
    display: block;
    text-indent: -9999px; }

body section {
  width: 100%;
  overflow: hidden; }

nav {
  position: fixed !important;
  z-index: 8;
  right: 0;
  top: 0;
  z-index: 10;
  text-align: center;
  background: #dfdfd3;
  width: 100%;
  height: 60px;
  opacity: 1;
  transition: opacity 0.5s;
  overflow: hidden; }
  nav div {
    top: -15px; }
    nav div a {
      text-decoration: none;
      text-align: center;
      display: inline-block;
      position: relative;
      font-family: charis_silbold;
      color: #b89c5d;
      font-size: 15px;
      padding: 28px 0 0;
      cursor: pointer;
      height: 60px;
      z-index: 9; }
    nav div a:hover {
      color: #6b4e0e; }
    nav div a:first-of-type {
      width: 179px; }
    nav div a:nth-of-type(2) {
      width: 170px; }
    nav div a:nth-of-type(3) {
      width: 164px; }
    nav div a:nth-of-type(4) {
      width: 217px; }
    nav div a:nth-of-type(5) {
      width: 168px; }
    nav div a:nth-of-type(6) {
      width: 80px; }
  nav span {
    display: none;
    text-indent: -9999px; }
  nav div.mobile {
    display: none; }

nav.invisible {
  opacity: 0;
  transition: opacity 0.5s;
  overflow: hidden; }

.intro {
  background: #dedccf url(../img/bg-intro.png) repeat-x;
  text-align: center;
  width: 100%;
  vertical-align: middle;
  display: block;
  box-sizing: border-box;
  padding: 100px 50px 50px;
  position: relative;
  left: 0;
  top: 0;
  z-index: 9; }
  .intro h1 {
    font-family: charis_silbold;
    font-size: 26px;
    color: #0a2a50;
    font-weight: normal;
    max-width: 970px;
    margin: 0 auto; }
  .intro h1:after {
    content: '';
    display: block;
    width: 600px;
    height: 20px;
    background: url(../img/underline.svg) no-repeat center top;
    margin: 20px auto 25px; }
  .intro p {
    font-size: 16px;
    line-height: 22px;
    max-width: 970px;
    margin: 0 auto;
    display: block;
    padding: 0 0 10px; }

.history {
  background: #b7b9ae;
  width: 100%; }
  .history .intro h1 {
    margin: 0 auto 50px; }
  .history .content {
    width: 100%;
    background: #b89c5d;
    overflow: hidden; }
    .history .content .left {
      width: 50%;
      height: 100vh;
      float: left;
      position: static;
      left: 0;
      bottom: 0;
      overflow: hidden; }
      .history .content .left div {
        background: url(../img/r8.jpg) no-repeat center center;
        background-size: cover;
        transition: all 0.5s;
        width: 100%;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0; }
        .history .content .left div p {
          font-size: 16px;
          color: #fff;
          font-family: charis_silbold;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 10px 20px;
          z-index: 1; }
        .history .content .left div p:after {
          content: '';
          display: block;
          width: 100%;
          background: #000;
          opacity: 0.8;
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          z-index: -1; }
      .history .content .left div:nth-of-type(2) {
        background: url(../img/r6.jpg) no-repeat center center;
        background-size: cover;
        top: 100vh; }
      .history .content .left div:nth-of-type(3) {
        background: url(../img/r5.jpg) no-repeat center center;
        background-size: cover;
        top: 100vh; }
      .history .content .left div:nth-of-type(4) {
        background: url(../img/r4.jpg) no-repeat center center;
        background-size: cover;
        top: 100vh; }
    .history .content .left.r8 {
      position: fixed;
      z-index: 2; }
    .history .content .left.r6 {
      position: fixed;
      z-index: 2; }
      .history .content .left.r6 div:nth-of-type(1) {
        top: -100vh; }
      .history .content .left.r6 div:nth-of-type(2) {
        top: 0; }
      .history .content .left.r6 div:nth-of-type(3) {
        top: 100vh; }
      .history .content .left.r6 div:nth-of-type(4) {
        top: 100vh; }
    .history .content .left.r5 {
      position: fixed;
      z-index: 2; }
      .history .content .left.r5 div:nth-of-type(1) {
        top: -100vh; }
      .history .content .left.r5 div:nth-of-type(2) {
        top: -100vh; }
      .history .content .left.r5 div:nth-of-type(3) {
        top: 0; }
      .history .content .left.r5 div:nth-of-type(4) {
        top: 100vh; }
    .history .content .left.r4 {
      position: fixed;
      z-index: 2; }
      .history .content .left.r4 div:nth-of-type(1) {
        top: -100vh; }
      .history .content .left.r4 div:nth-of-type(2) {
        top: -100vh; }
      .history .content .left.r4 div:nth-of-type(3) {
        top: -100vh; }
      .history .content .left.r4 div:nth-of-type(4) {
        top: 0; }
    .history .content .right {
      width: 50%;
      float: right;
      overflow: hidden;
      background: #b89c5d;
      box-sizing: border-box;
      padding: 100px 115px; }
      .history .content .right article {
        clear: both;
        padding: 0 0 150px;
        overflow: hidden; }
        .history .content .right article h2 {
          color: #0a2a50;
          font-size: 22px;
          font-family: charis_silbold;
          text-align: center;
          line-height: 26px;
          width: 100%;
          font-weight: normal; }
          .history .content .right article h2 span.sub {
            display: block;
            font-size: 21px;
            padding: 10px 0 0; }
        .history .content .right article h2:after {
          content: '';
          display: block;
          width: 100%;
          height: 20px;
          background: url(../img/underline.svg) no-repeat center top;
          margin: 20px auto 25px; }
        .history .content .right article > img {
          display: none; }
        .history .content .right article p {
          font-size: 16px;
          color: #49370d;
          padding: 0 0 20px;
          line-height: 22px; }
        .history .content .right article .figure-left {
          width: 48%;
          margin: 0 2% 0 0;
          float: left; }
          .history .content .right article .figure-left img {
            display: block;
            width: 100%; }
          .history .content .right article .figure-left p {
            color: #49360d;
            font-size: 12px;
            line-height: 16px;
            font-family: arial;
            padding: 10px 0 55px; }
        .history .content .right article .figure-right {
          width: 48%;
          margin: 0 0 0 2%;
          float: left; }
          .history .content .right article .figure-right img {
            display: block;
            width: 100%; }
          .history .content .right article .figure-right p {
            color: #49360d;
            font-size: 12px;
            line-height: 16px;
            font-family: arial;
            padding: 10px 0 55px; }
      .history .content .right article.r6 div img, .history .content .right article.r5 div img, .history .content .right article.r4 div img {
        display: block;
        width: 100%; }
      .history .content .right article.r6 div p, .history .content .right article.r5 div p, .history .content .right article.r4 div p {
        color: #49360d;
        font-size: 18px;
        line-height: 28px;
        padding: 10px 0 55px; }
      .history .content .right article.r6 > div:nth-of-type(1), .history .content .right article.r5 > div:nth-of-type(1), .history .content .right article.r4 > div:nth-of-type(1) {
        float: left;
        width: 48%;
        margin: 0 2% 0 0; }
      .history .content .right article.r6 > div:nth-of-type(2), .history .content .right article.r5 > div:nth-of-type(2), .history .content .right article.r4 > div:nth-of-type(2) {
        float: left;
        width: 48%;
        margin: 0 0 0 2%; }
      .history .content .right article.r6 .figure p, .history .content .right article.r5 .figure p, .history .content .right article.r4 .figure p {
        font-size: 12px;
        line-height: 16px;
        font-family: arial; }
  .history .content.active .right {
    overflow: auto; }

html.modal-active {
  overflow: hidden;
  background: #b89c5d; }

.modal-info {
  position: fixed;
  top: 0;
  height: 100%;
  bottom: -200%;
  transition: all 0.5s;
  width: 100%;
  opacity: 0;
  z-index: -2; }
  .modal-info .share {
    width: 121px;
    margin: 10px auto;
    padding: 0 0 50px; }
    .modal-info .share a {
      float: left;
      width: 35px;
      height: 35px;
      background: url(../img/icon.svg) no-repeat 0 -719px;
      margin: 0 5px 0 0; }
      .modal-info .share a span {
        display: block;
        text-indent: -9999px; }
    .modal-info .share .tw {
      background-position: 0 -654px; }
    .modal-info .share .email {
      background-position: 0 -784px; }
  .modal-info .btn-wrap {
    width: 940px;
    margin: 0 auto; }
    .modal-info .btn-wrap .share {
      text-align: left;
      float: left;
      width: 50%;
      margin: 0; }
    .modal-info .btn-wrap .download-pdf {
      background: url(../img/download-pdf.svg) 0 0 no-repeat;
      width: 112px;
      height: 44px;
      text-indent: -9999px;
      display: inline-block;
      float: right; }
    .modal-info .btn-wrap .download-pdf:hover {
      background: url(../img/download-pdf-hover.svg) 0 0 no-repeat; }

.modal-info.active {
  position: fixed;
  opacity: 1;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #b89c5d;
  z-index: 10;
  transition: all 0.5s;
  box-sizing: border-box;
  overflow: auto; }
  .modal-info.active img {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 940px;
    padding: 100px 0 20px; }

.close-btn.modal {
  position: fixed;
  right: 25px;
  left: auto;
  top: 10px;
  width: 42px;
  height: 39px;
  border: 1px solid #b89c5d;
  display: none;
  cursor: pointer;
  background: #dfdfd3 url(../img/icon.svg) -113px -151px no-repeat;
  margin: 0; }
  .close-btn.modal span {
    text-indent: -9999px;
    display: block; }

.close-btn.modal:hover {
  cursor: pointer; }

.modal.active {
  z-index: 12;
  display: block; }

/*page1 global*/
.cover {
  position: relative;
  width: 100%;
  background: url(../img/bg.png) repeat;
  z-index: 12;
  max-height: 800px;
  overflow: hidden; }
  .cover .canvas-container.mobile {
    display: none; }

body.page1 {
  width: 100%;
  display: block; }

section.page1 .g-funeral {
  background: #b7b9ae url(../img/bg-mockup.png) repeat-x;
  overflow: hidden;
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  z-index: 3; }
  section.page1 .g-funeral .group-load {
    min-height: 550px;
    background: #b7b9ae;
    position: relative; }
  section.page1 .g-funeral .canvas-container.mobile {
    display: none; }
  section.page1 .g-funeral #animation_container {
    position: relative;
    margin: 0 auto;
    width: 100%; }
    section.page1 .g-funeral #animation_container > a {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 75px 0 0 -47px;
      display: block;
      z-index: 13;
      cursor: pointer;
      /*article:after{content:''; display: block;position: absolute; left:0; top:0;margin: -284px 0 0 24px; z-index: -1; background: url(../img/line-mockup.svg) no-repeat;}*/ }
      section.page1 .g-funeral #animation_container > a span {
        width: 10px;
        height: 10px;
        position: relative;
        display: block;
        text-indent: -9999px;
        top: 38px;
        left: 38px;
        background: #dfdfd3;
        border: 2px solid #b89c5d;
        border-radius: 50%;
        display: block;
        cursor: pointer !important; }
      section.page1 .g-funeral #animation_container > a span:after {
        content: '';
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
        display: block;
        background: #dfdfd3;
        border-radius: 50%;
        opacity: 0;
        animation: pulsate 2400ms ease-out infinite;
        z-index: -1;
        cursor: pointer !important; }
      section.page1 .g-funeral #animation_container > a article {
        z-index: 1; }
    section.page1 .g-funeral #animation_container .close-btn {
      position: absolute;
      right: 0;
      left: auto;
      top: 0;
      width: 42px;
      height: 39px;
      border: 1px solid #b89c5d;
      display: none;
      z-index: 12;
      cursor: pointer;
      background: #dfdfd3 url(../img/icon.svg) -113px -151px no-repeat;
      margin: 0; }
      section.page1 .g-funeral #animation_container .close-btn span {
        text-indent: -9999px;
        display: block; }
    section.page1 .g-funeral #animation_container .close-btn:hover {
      cursor: pointer; }
    section.page1 .g-funeral #animation_container .info {
      background: #b89c5d;
      position: absolute;
      width: 78%;
      height: 65%;
      left: 0;
      top: 0;
      margin: 9% 0 0 11% !important;
      z-index: 12;
      box-sizing: border-box;
      padding: 30px;
      transition: all 1s;
      opacity: 0;
      /*p:before {width: 370px; height: 250px; content:''; display: block; background: url(../img/funeral-b.png) no-repeat; margin: 0 auto; background-size: cover;}*/ }
      section.page1 .g-funeral #animation_container .info h2 {
        font-family: charis_silbold;
        color: #0a2a50;
        font-size: 22px;
        line-height: 26px;
        font-weight: normal;
        padding: 0 0 15px; }
      section.page1 .g-funeral #animation_container .info h2:before, section.page1 .g-funeral #animation_container .info h2:after {
        content: '';
        display: inline-block;
        width: 23px;
        height: 32px;
        background: url(../img/icon.svg) no-repeat -1px -194px;
        margin: 0 10px 0 0; }
      section.page1 .g-funeral #animation_container .info h2:after {
        margin: 0 0 0 10px; }
      section.page1 .g-funeral #animation_container .info p {
        color: #fff;
        font-size: 16px;
        width: 67%;
        float: right;
        line-height: 22px; }
      section.page1 .g-funeral #animation_container .info > img {
        width: 30%;
        margin: 10px 3% 0 0;
        float: left; }
    section.page1 .g-funeral #animation_container div[data-index='marker8'] {
      height: 75%;
      margin: 6% 0 0 11% !important; }
    section.page1 .g-funeral #animation_container .info.active {
      transition: all 1s;
      z-index: 15;
      opacity: 1; }
      section.page1 .g-funeral #animation_container .info.active .close-btn {
        display: block; }

/*page2 global*/
@keyframes Cloud {
  from {
    left: -10%; }
  to {
    left: 20%; } }
@keyframes Cloud2 {
  from {
    left: -50%; }
  to {
    left: 100%; } }
#page2 {
  clear: both;
  background: #dfdfd3;
  /*quote page2*/ }
  #page2 .canvas-container {
    padding-bottom: 33%; }
  #page2 .panel {
    padding: 50px 0;
    text-align: center;
    background: #dfdfd3;
    z-index: 3;
    position: relative; }
    #page2 .panel a {
      font-family: charis_silbold;
      font-size: 16px;
      text-decoration: none;
      background: #dfded1 url("../img/icon.svg") no-repeat 0 -388px;
      padding: 13px 0;
      display: inline-block;
      min-width: 346px;
      margin-right: 10px;
      color: #b89c5d;
      font-weight: normal; }
    #page2 .panel a:hover, #page2 .panel a.active {
      background-position: 0 -463px;
      color: #fff; }
  #page2 .tab-detail {
    position: relative;
    background: #dfdfd3;
    z-index: 3; }
    #page2 .tab-detail > div {
      position: relative;
      left: -100%;
      transition: all 1s;
      width: 1920px;
      margin: 0 auto; }
      #page2 .tab-detail > div .note {
        padding: 30px 0;
        width: 100%;
        max-width: 970px;
        margin: 0 auto;
        text-align: center;
        font-family: charis_silbold;
        font-size: 16px;
        color: #6b4e0e; }
        #page2 .tab-detail > div .note img {
          display: inline-block;
          width: 33px;
          vertical-align: middle; }
      #page2 .tab-detail > div img {
        width: 100%;
        display: block; }
      #page2 .tab-detail > div area {
        position: relative;
        z-index: 12; }
      #page2 .tab-detail > div .control {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1; }
      #page2 .tab-detail > div .controls {
        display: none; }
      #page2 .tab-detail > div article {
        z-index: 1; }
      #page2 .tab-detail > div .info {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 1s;
        z-index: -1; }
        #page2 .tab-detail > div .info div {
          padding: 20px 40px;
          background: #b89c5d;
          width: 400px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: 0; }
          #page2 .tab-detail > div .info div img {
            display: none; }
          #page2 .tab-detail > div .info div h2 {
            font-family: charis_silbold;
            font-size: 17px;
            line-height: 26px;
            padding: 0 0 15px;
            color: #0a2a50;
            font-weight: normal; }
          #page2 .tab-detail > div .info div h2:before, #page2 .tab-detail > div .info div h2:after {
            content: '';
            display: inline-block;
            width: 27px;
            height: 23px;
            background: url(../img/icon.svg) no-repeat 0 -203px;
            margin: 0 5px 0 0; }
          #page2 .tab-detail > div .info div h2:after {
            content: '';
            display: inline-block;
            margin: 0 0 0 5px; }
          #page2 .tab-detail > div .info div p {
            color: #fff;
            font-size: 16px;
            line-height: 22px; }
      #page2 .tab-detail > div .info[data-index='marker1'] div {
        top: 50%;
        left: 50%;
        margin: -183px 0 0 63px; }
      #page2 .tab-detail > div .info[data-index='marker2'] div {
        margin: -29px 0 0 -30%;
        width: 62%; }
      #page2 .tab-detail > div .info[data-index='marker3'] div {
        margin: -3px 0 0 -20%;
        width: 45%; }
      #page2 .tab-detail > div .info[data-index='marker4'] div {
        margin: -177px 0 0 -20%;
        width: 45%; }
      #page2 .tab-detail > div .info[data-index='marker5'] div {
        margin: 12px 0 0 -33%;
        width: 45%; }
      #page2 .tab-detail > div .info[data-index='marker6'] div {
        margin: 23px 0 0 -23%;
        width: 49%; }
      #page2 .tab-detail > div .info[data-index='marker7'] div {
        margin: -8% 0 0 -30%;
        width: 45%; }
      #page2 .tab-detail > div .info[data-index='marker8'] div {
        margin: 12px 0 0 -32%;
        width: 45%; }
      #page2 .tab-detail > div .info.active {
        opacity: 1;
        transition: opacity 1s;
        z-index: 14; }
    #page2 .tab-detail .close-btn {
      position: absolute;
      right: 1px;
      left: auto;
      top: 1px;
      width: 42px;
      height: 39px;
      border: 1px solid #b89c5d;
      display: block;
      z-index: 12;
      cursor: pointer;
      background: #dfdfd3 url(../img/icon.svg) -113px -151px no-repeat;
      margin: 0; }
      #page2 .tab-detail .close-btn span {
        text-indent: -9999px;
        display: block;
        border: none;
        background: none; }
      #page2 .tab-detail .close-btn span:after {
        display: none; }
    #page2 .tab-detail .close-btn:hover {
      cursor: pointer; }
    #page2 .tab-detail .location-chart {
      position: absolute;
      width: 100%;
      left: 100%;
      top: 0;
      transition: left 1s; }
      #page2 .tab-detail .location-chart img {
        width: 100%;
        margin: 0 auto;
        display: block; }
      #page2 .tab-detail .location-chart .info[data-index='marker1'] div {
        top: 50%;
        left: 50%;
        width: 500px;
        margin: -178px 0 0 -536px; }
      #page2 .tab-detail .location-chart .info[data-index='marker2'] div {
        margin: -180px 0 0 -18%;
        width: 50%; }
      #page2 .tab-detail .location-chart .info[data-index='marker3'] div {
        margin: -167px 0 0 -1%;
        width: 39%; }
      #page2 .tab-detail .location-chart .info[data-index='marker4'] div {
        margin: 67px 0 0 -1%;
        width: 40%; }
      #page2 .tab-detail .location-chart .info[data-index='marker5'] div {
        margin: -112px 0 0 -360px;
        width: 45%; }
      #page2 .tab-detail .location-chart .info[data-index='marker6'] div {
        margin: -11% 0 0 -33%;
        width: 70%; }
      #page2 .tab-detail .location-chart .info[data-index='marker7'] div {
        margin: -15% 0 0 -30%;
        width: 45%; }
      #page2 .tab-detail .location-chart .info[data-index='marker8'] div {
        margin: -11% 0 0 -32%;
        width: 45%; }
    #page2 .tab-detail a {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -81px 0 0 -27px;
      display: block;
      z-index: 13;
      cursor: pointer; }
      #page2 .tab-detail a span {
        width: 15px;
        height: 15px;
        position: relative;
        display: block;
        text-indent: -9999px;
        top: 38px;
        left: 38px;
        background: #ddddd4;
        border: 2px solid #b89c5d;
        border-radius: 50%;
        display: block;
        cursor: pointer !important; }
      #page2 .tab-detail a span:after {
        content: '';
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
        display: block;
        background: #dfdfd3;
        border-radius: 50%;
        opacity: 0;
        animation: pulsate 2400ms ease-out infinite;
        z-index: -1;
        cursor: pointer !important; }
    #page2 .tab-detail a.marker2 {
      margin: -130px 0 0 -107px; }
    #page2 .tab-detail a.marker6 {
      margin: 38px 0 0 -449px; }
    #page2 .tab-detail a.marker7 {
      margin: -85px 0 0 295px; }
    #page2 .tab-detail a.marker8 {
      margin: 1px 0 0 -546px; }
    #page2 .tab-detail .active {
      left: 0;
      transition: all 1s;
      margin: 0 auto; }
  #page2 .history {
    background: #dfdfd3;
    width: 100%; }
    #page2 .history .intro p:first-of-type {
      padding: 0 0 40px; }
    #page2 .history .content {
      width: 100%;
      background: #b89c5d;
      overflow: hidden; }
      #page2 .history .content .left {
        width: 50%;
        height: 100vh;
        float: left;
        position: relative;
        left: 0;
        bottom: 0;
        overflow: hidden; }
        #page2 .history .content .left div {
          background: url(../img/quote1.png) no-repeat center center; }
        #page2 .history .content .left div p {
          display: none; }
        #page2 .history .content .left div:nth-of-type(2) {
          background: url(../img/quote2.png) no-repeat center center;
          background-size: cover;
          top: 100vh; }
        #page2 .history .content .left div:nth-of-type(3) {
          background: url(../img/quote3.png) no-repeat center center;
          background-size: cover;
          top: 100vh; }
        #page2 .history .content .left div:nth-of-type(4) {
          background: url(../img/quote4.png) no-repeat center center;
          background-size: cover;
          top: 100vh; }
    #page2 .history .left.r8 {
      position: fixed;
      z-index: 2; }
    #page2 .history .left.r6 {
      position: fixed;
      z-index: 2; }
      #page2 .history .left.r6 div:nth-of-type(1) {
        top: -100vh; }
      #page2 .history .left.r6 div:nth-of-type(2) {
        top: 50px; }
      #page2 .history .left.r6 div:nth-of-type(3) {
        top: 100vh; }
      #page2 .history .left.r6 div:nth-of-type(4) {
        top: 100vh; }
    #page2 .history .left.r5 {
      position: fixed;
      z-index: 2; }
      #page2 .history .left.r5 div:nth-of-type(1) {
        top: -100vh; }
      #page2 .history .left.r5 div:nth-of-type(2) {
        top: -100vh; }
      #page2 .history .left.r5 div:nth-of-type(3) {
        top: 50px; }
      #page2 .history .left.r5 div:nth-of-type(4) {
        top: 100vh; }
    #page2 .history .left.r4 {
      position: fixed;
      z-index: 2; }
      #page2 .history .left.r4 div:nth-of-type(1) {
        top: -100vh; }
      #page2 .history .left.r4 div:nth-of-type(2) {
        top: -100vh; }
      #page2 .history .left.r4 div:nth-of-type(3) {
        top: -100vh; }
      #page2 .history .left.r4 div:nth-of-type(4) {
        top: 50px; }
    #page2 .history .right article {
      min-height: 120vh; }
      #page2 .history .right article h2 {
        margin-bottom: 45px; }
      #page2 .history .right article h2:after {
        margin: 25px auto; }
      #page2 .history .right article p {
        padding: 0 0 10px; }
    #page2 .history .content.active .left {
      left: 0;
      bottom: 0;
      z-index: 2;
      background: #fff; }
    #page2 .history .content.active .right {
      overflow: auto; }

@keyframes MoveFigure1 {
  0% {
    margin: 500px 0 0 -304px;
    opacity: 0.7; }
  100% {
    opacity: 1;
    margin: 118px 0 0 -304px; } }
@keyframes MoveFigure2 {
  0% {
    opacity: 0.7;
    margin: 400px 0 0 -116px; }
  100% {
    opacity: 1;
    margin: 183px 0 0 -116px; } }
@keyframes MoveFigure3 {
  0% {
    opacity: 0.7;
    margin: 400px 0 0 26px; }
  100% {
    opacity: 1;
    margin: 134px 0 0 26px; } }
@keyframes MoveFigure4 {
  0% {
    opacity: 0.3;
    margin: 300px 0 0 -80px; }
  100% {
    opacity: 0.7;
    margin: 115px 0 0 -80px; } }
@keyframes MoveFigure5 {
  0% {
    opacity: 0.3;
    margin: 500px 0 0 7px; }
  100% {
    opacity: 0.5;
    margin: 115px 0 0 7px; } }
/*page3 global*/
#page3 {
  width: 100%;
  background: #fff;
  clear: both;
  min-height: 700px;
  /*direction page3*/ }
  #page3 .map-point {
    background: #dedccf url(../img/bg-intro.png) repeat-x;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    display: block;
    box-sizing: border-box;
    padding: 100px 50px 50px;
    position: relative;
    left: 0;
    top: 0;
    z-index: 9; }
    #page3 .map-point img {
      width: 100%;
      max-width: 1391px;
      margin: 0 auto; }
  #page3 ul {
    width: 100%;
    background: #dfdfd3;
    position: relative;
    z-index: 3;
    text-align: center;
    transition: all 0.7s; }
    #page3 ul li {
      display: inline-block;
      padding: 0 10px 6px;
      border-right: 1px solid #6b4e0e;
      margin: 12px 0 10px; }
      #page3 ul li a {
        text-decoration: none;
        color: #6b4e0e;
        font-size: 13px;
        position: relative;
        padding: 0 5px;
        display: inline-block; }
      #page3 ul li a:after {
        content: '';
        display: block;
        width: 0;
        height: 5px;
        background: #87a880;
        position: absolute;
        left: 0;
        bottom: -9px;
        transition: width 0.2s; }
      #page3 ul li a:hover:after, #page3 ul li a.active:after {
        width: 100%;
        transition: width 0.2s; }
    #page3 ul li:nth-of-type(2) a:after, #page3 ul li:nth-of-type(2) a.active:after {
      background: #ad4e58; }
    #page3 ul li:nth-of-type(3) a:after {
      background: #c4a24d; }
    #page3 ul li:nth-of-type(4) a:after {
      background: #b57545; }
    #page3 ul li:nth-of-type(5) a:after {
      background: #7a211b; }
    #page3 ul li:nth-of-type(6) a:after {
      background: #6c8d9e;
      border: none; }
  #page3 ul.sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    transition: all 0.7s; }
    #page3 ul.sticky li {
      margin: 10px 0 10px; }
  #page3 .history {
    background: #b7b9ae;
    width: 100%; }
    #page3 .history .intro p:first-of-type {
      padding: 0 0 40px; }
    #page3 .history .content {
      width: 100%;
      background: #b89c5d;
      overflow: hidden; }
      #page3 .history .content .left {
        width: 50%;
        height: 100vh;
        float: left;
        position: relative;
        left: 0;
        bottom: 0;
        overflow: hidden; }
        #page3 .history .content .left div {
          background: url(../img/procession1.jpg) no-repeat center center; }
        #page3 .history .content .left div p {
          display: none; }
        #page3 .history .content .left div:nth-of-type(2) {
          background: url(../img/procession2.jpg) no-repeat center center;
          background-size: cover;
          top: 100vh; }
        #page3 .history .content .left div:nth-of-type(3) {
          background: url(../img/procession3.jpg) no-repeat center center;
          background-size: cover;
          top: 100vh; }
        #page3 .history .content .left div:nth-of-type(4) {
          background: url(../img/procession4.jpg) no-repeat center center;
          background-size: cover;
          top: 100vh; }
        #page3 .history .content .left div:nth-of-type(5) {
          background: url(../img/procession5.jpg) no-repeat center center;
          background-size: cover;
          top: 100vh; }
        #page3 .history .content .left div:nth-of-type(6) {
          background: url(../img/procession6.jpg) no-repeat center center;
          background-size: cover;
          top: 100vh; }
    #page3 .history .left.r8 {
      position: fixed;
      z-index: 2; }
    #page3 .history .left.r6 {
      position: fixed;
      z-index: 2; }
      #page3 .history .left.r6 div:nth-of-type(1) {
        top: -100vh; }
      #page3 .history .left.r6 div:nth-of-type(2) {
        top: 0; }
      #page3 .history .left.r6 div:nth-of-type(3) {
        top: 100vh; }
      #page3 .history .left.r6 div:nth-of-type(4) {
        top: 100vh; }
      #page3 .history .left.r6 div:nth-of-type(5) {
        top: 100vh; }
      #page3 .history .left.r6 div:nth-of-type(6) {
        top: 100vh; }
    #page3 .history .left.r5 {
      position: fixed;
      z-index: 2; }
      #page3 .history .left.r5 div:nth-of-type(1) {
        top: -100vh; }
      #page3 .history .left.r5 div:nth-of-type(2) {
        top: -100vh; }
      #page3 .history .left.r5 div:nth-of-type(3) {
        top: 0; }
      #page3 .history .left.r5 div:nth-of-type(4) {
        top: 100vh; }
      #page3 .history .left.r5 div:nth-of-type(5) {
        top: 100vh; }
      #page3 .history .left.r5 div:nth-of-type(6) {
        top: 100vh; }
    #page3 .history .left.r4 {
      position: fixed;
      z-index: 2; }
      #page3 .history .left.r4 div:nth-of-type(1) {
        top: -100vh; }
      #page3 .history .left.r4 div:nth-of-type(2) {
        top: -100vh; }
      #page3 .history .left.r4 div:nth-of-type(3) {
        top: -100vh; }
      #page3 .history .left.r4 div:nth-of-type(4) {
        top: 0; }
      #page3 .history .left.r4 div:nth-of-type(5) {
        top: 100vh; }
      #page3 .history .left.r4 div:nth-of-type(6) {
        top: 100vh; }
    #page3 .history .left.r3 {
      position: fixed;
      z-index: 2; }
      #page3 .history .left.r3 div:nth-of-type(1) {
        top: -100vh; }
      #page3 .history .left.r3 div:nth-of-type(2) {
        top: -100vh; }
      #page3 .history .left.r3 div:nth-of-type(3) {
        top: -100vh; }
      #page3 .history .left.r3 div:nth-of-type(4) {
        top: 100vh; }
      #page3 .history .left.r3 div:nth-of-type(5) {
        top: 0; }
      #page3 .history .left.r3 div:nth-of-type(6) {
        top: 100vh; }
    #page3 .history .left.r2 {
      position: fixed;
      z-index: 2; }
      #page3 .history .left.r2 div:nth-of-type(1) {
        top: -100vh; }
      #page3 .history .left.r2 div:nth-of-type(2) {
        top: -100vh; }
      #page3 .history .left.r2 div:nth-of-type(3) {
        top: -100vh; }
      #page3 .history .left.r2 div:nth-of-type(4) {
        top: -100vh; }
      #page3 .history .left.r2 div:nth-of-type(5) {
        top: -100vh; }
      #page3 .history .left.r2 div:nth-of-type(6) {
        top: 0; }
    #page3 .history .right article {
      padding: 0 0 200px; }
      #page3 .history .right article h3 {
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        padding: 0 0 15px; }
      #page3 .history .right article h2 {
        margin-bottom: 45px; }
      #page3 .history .right article h2:after {
        margin: 25px auto; }
      #page3 .history .right article p {
        padding: 0 0 30px; }
      #page3 .history .right article p:last-of-type {
        color: #49370d; }
      #page3 .history .right article .figure img {
        display: block;
        width: 100%;
        padding: 15px 0; }
      #page3 .history .right article .figure-s {
        display: none; }
    #page3 .history .right article#direction1 {
      min-height: 1000px; }
    #page3 .history .content.active .left {
      left: 0;
      bottom: 0;
      z-index: 2;
      background: #fff; }
    #page3 .history .content.active .right {
      overflow: auto; }

/*page4 global*/
#page4 {
  position: relative;
  z-index: 3; }
  #page4 .schedule-contain {
    background: #ad9152 url(../img/bg-rp-page4.jpg) repeat;
    width: 100%;
    overflow: hidden;
    display: block;
    box-sizing: border-box; }
    #page4 .schedule-contain .intro {
      background: none;
      padding: 100px 0 50px; }
    #page4 .schedule-contain .content {
      width: 80%;
      margin: 0 auto 60px;
      overflow: hidden;
      max-width: 970px; }
      #page4 .schedule-contain .content h2 {
        color: #0a2a50;
        font-size: 16px;
        font-family: serif,Times New Roman;
        font-weight: normal;
        padding-bottom: 10px; }
      #page4 .schedule-contain .content ul {
        width: 100%;
        overflow: hidden; }
        #page4 .schedule-contain .content ul li {
          overflow: hidden;
          background: #d9d5c1;
          margin-bottom: 2px;
          padding: 40px 30px; }
          #page4 .schedule-contain .content ul li div {
            overflow: hidden;
            padding-left: 60px; }
            #page4 .schedule-contain .content ul li div p {
              color: #333;
              font-size: 16px;
              line-height: 22px;
              font-weight: normal;
              font-family: serif,Times New Roman;
              overflow: hidden; }
              #page4 .schedule-contain .content ul li div p span:first-child {
                color: #6b4e0e;
                padding-right: 10px;
                width: auto; }
              #page4 .schedule-contain .content ul li div p span {
                float: left;
                width: 80%;
                display: inline-block; }
            #page4 .schedule-contain .content ul li div p:first-of-type {
              padding: 0 0 25px; }
          #page4 .schedule-contain .content ul li div:before {
            content: '';
            display: inline-block;
            width: 23px;
            height: 25px;
            background: url(../img/icon.svg) no-repeat 3px -604px;
            margin: 0px 4px 0 0;
            float: left; }

/*page5 global*/
section.page5 {
  width: 100%;
  clear: both; }

body.page5 #page3 .sticky {
  display: none; }

#page5 {
  background: #dfdfd3;
  position: relative;
  z-index: 4; }
  #page5 .list {
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 0 30px;
    width: 96.5%; }
    #page5 .list article {
      width: 25%;
      display: table-cell;
      background: #efefe9;
      border-bottom: 1px solid #cdc09d;
      position: relative;
      max-width: 480px; }
      #page5 .list article a {
        text-decoration: none;
        width: 94%;
        display: block;
        margin: 0 0 0 3%;
        line-height: 25px; }
        #page5 .list article a img {
          width: 100%;
          display: block;
          border: none; }
        #page5 .list article a h2 {
          font-size: 16px;
          color: #222;
          font-weight: normal;
          min-height: 70px;
          padding: 5px 20px; }
    #page5 .list article:before, #page5 .list article:after {
      content: '';
      display: block;
      width: 3%;
      height: 101%;
      position: absolute;
      left: 0;
      top: 0;
      background: #dfdfd3; }
    #page5 .list article:after {
      right: 0;
      left: auto; }
    #page5 .list article:nth-of-type(4n) {
      margin: 0 0 0 2%; }
    #page5 .list article:nth-of-type(4n+1) {
      clear: both; }
  #page5 .pagination {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    text-align: center;
    padding: 0 0 70px; }
    #page5 .pagination a {
      color: #b89c5d;
      text-decoration: none;
      padding: 0 10px 200px;
      position: relative;
      font-size: 16px; }
    #page5 .pagination .active {
      color: #fff;
      cursor: text; }
    #page5 .pagination .active:after {
      display: block;
      content: '';
      background: #b89c5d;
      border-radius: 20px;
      width: 27px;
      height: 27px;
      position: absolute;
      left: 0;
      top: 0;
      margin: -6px 0 0 0px;
      z-index: -1; }
  #page5 .news-wrap {
    padding: 0 0 30px;
    background: #d3d3c5; }
    #page5 .news-wrap .intro {
      background: #d3d3c5;
      padding: 50px; }
    #page5 .news-wrap .list article:before, #page5 .news-wrap .list article:after {
      background: #d3d3c5; }
    #page5 .news-wrap .list h2 {
      text-align: center;
      padding: 5px 20px;
      min-height: 50px; }

/*special size for intro*/
@media screen and (max-width: 1000px) {
  .cover {
    height: 90vh;
    overflow: hidden;
    max-height: inherit !important; }
    .cover .canvas-container {
      display: none; }
    .cover .canvas-container.mobile {
      display: block;
      width: 100%;
      margin: 0 auto;
      height: 90vh;
      padding: 30px 0 0; }
      .cover .canvas-container.mobile .text {
        width: 73%;
        margin: 0 0 0 -36%;
        display: block;
        position: absolute;
        left: 50%;
        bottom: 130px;
        text-align: center; }
        .cover .canvas-container.mobile .text img {
          width: 100%;
          max-width: 350px;
          display: block;
          margin: 0 auto; }
      .cover .canvas-container.mobile .figure {
        width: 100%;
        height: 50%;
        background: url(../img/intro-s.png) no-repeat center top;
        background-size: cover; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .cover .canvas-container.mobile .text {
    bottom: 230px; } }
/*S + M  <= 660*/
@media screen and (max-width: 1119px) {
  .close-btn.modal {
    right: 20px;
    top: 20px; }

  .page1 nav > div > a:nth-of-type(1):after {
    left: 0; }

  .page2 nav > div > a:nth-of-type(2):after,
  .page3 nav > div > a:nth-of-type(3):after, .page4 nav > div > a:nth-of-type(4):after,
  .page5 nav > div > a:nth-of-type(5):after, .page6 nav > div > a:nth-of-type(6):after {
    left: 0;
    top: -1px;
    height: 62px; }

  .backtop.active {
    right: 25px;
    bottom: 25px; }

  .intro h1:before, .intro h1:after {
    width: 100% !important; }

  /*history S-M global*/
  .history .intro {
    padding: 50px 20px; }
    .history .intro h1 {
      font-size: 26px;
      line-height: 40px;
      margin: 10px 0; }
    .history .intro h1:before {
      padding-bottom: 10px; }
    .history .intro h1:after {
      padding-top: 10px;
      background-position: center bottom; }
  .history .content .left {
    display: none !important; }
  .history .content .right {
    width: 100%;
    padding: 0; }
    .history .content .right article {
      padding: 0; }
      .history .content .right article h2 {
        padding: 40px 20px 0px;
        box-sizing: border-box;
        font-size: 22px;
        line-height: 26px; }
        .history .content .right article h2 span {
          display: block; }
      .history .content .right article p {
        padding: 20px 20px; }
      .history .content .right article > img {
        display: block;
        width: 100%; }
      .history .content .right article div {
        float: none !important;
        width: 80% !important;
        max-width: 284px;
        margin: 0 auto !important; }
        .history .content .right article div p {
          padding: 10px 0 20px; }
      .history .content .right article div:nth-of-type(1) {
        padding: 20px 0 0; }

  /*page1*/
  section.page1 .g-funeral .group-load {
    min-height: 0; }
    section.page1 .g-funeral .group-load #_preload_div_ {
      display: none !important; }
  section.page1 .g-funeral #animation_container {
    display: none; }
  section.page1 .g-funeral .canvas-container.mobile {
    display: block;
    height: auto;
    padding: 0; }
    section.page1 .g-funeral .canvas-container.mobile .figure {
      width: 100%; }
      section.page1 .g-funeral .canvas-container.mobile .figure img {
        display: block;
        width: 100%; }
  section.page1 .g-funeral .intro {
    padding: 50px 4%;
    opacity: 1; }
    section.page1 .g-funeral .intro h1 {
      font-size: 26px;
      line-height: 40px; }
      section.page1 .g-funeral .intro h1 span {
        display: block; }
    section.page1 .g-funeral .intro h1:after {
      width: 100%; }
  section.page1 .g-funeral #animation_container canvas {
    width: 100%; }
  section.page1 .g-funeral #animation_container a {
    display: none; }
  section.page1 .g-funeral article {
    background: #b89c5d;
    position: static;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0 !important;
    z-index: 12;
    padding: 20px 0;
    transition: all 1s;
    opacity: 1; }
    section.page1 .g-funeral article h2 {
      font-family: charis_silbold;
      color: #0a2a50;
      font-size: 22px;
      line-height: 26px;
      text-align: center;
      font-weight: normal;
      padding: 0 30px 10px; }
    section.page1 .g-funeral article h2:before, section.page1 .g-funeral article h2:after {
      content: '';
      display: inline-block;
      width: 23px;
      height: 32px;
      background: url(../img/icon.svg) no-repeat -1px -194px;
      margin: 0 10px 0 0; }
    section.page1 .g-funeral article h2:after {
      margin: 0 0 0 10px; }
    section.page1 .g-funeral article p {
      color: #fff;
      font-size: 22px;
      padding: 10px 30px 0; }
    section.page1 .g-funeral article > img {
      width: 100%;
      float: none; }
    section.page1 .g-funeral article a, section.page1 .g-funeral article span {
      display: none;
      width: 23px;
      height: 32px; }
  section.page1 .g-funeral article:nth-of-type(1) {
    padding-top: 30px; }

  .menu-active nav {
    width: 100%;
    height: 100vh;
    background: #dfdfd3;
    /*> span:hover:after{color:#000; background: #fff url(../img/icon.svg) -117px -154px no-repeat; border: none;opacity: 1;transition: opacity 0.5s; z-index: 1;}*/ }
    .menu-active nav > div {
      display: block;
      position: static;
      width: 94%;
      margin: 75px auto 0;
      overflow: hidden; }
      .menu-active nav > div > a {
        display: block;
        text-align: left;
        font-size: 18px;
        line-height: 22px;
        padding: 20px 0;
        color: #b89c5d;
        width: 80%;
        margin: 0;
        border-bottom: 1px solid #fff;
        height: auto;
        width: 100%;
        position: relative;
        height: 22px; }
      .menu-active nav > div > a:after {
        content: '';
        display: block;
        border-top: 1px solid #6b4e0e;
        border-bottom: 1px solid #6b4e0e;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 61px;
        left: -120%; }
    .menu-active nav > span {
      display: block;
      cursor: pointer;
      width: 42px;
      height: 39px;
      background-position: -113px -151px;
      background-color: #dfdfd3;
      transition: opacity 0.5s;
      z-index: 11; }
    .menu-active nav > span:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 6px 0 6px 0;
      transition: opacity 0.5s;
      z-index: 0;
      opacity: 0; }
    .menu-active nav div.mobile {
      display: none; }
  .menu-active .wrapper {
    position: relative; }
  .menu-active .backtop {
    display: none; }

  nav {
    background: none;
    width: 65px;
    height: 61px;
    right: 0;
    top: 0; }
    nav span.switch {
      display: block; }
    nav > div a, nav div.linenav {
      display: none; }
    nav > div > a:after {
      content: '';
      display: block;
      width: 0;
      height: 1px;
      position: absolute;
      transition: all 1s;
      bottom: 0;
      left: 8%; }
    nav a.active:after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      position: absolute;
      left: 8%;
      bottom: 0;
      width: 100%;
      transition: all 1s;
      background: #000; }
    nav > span {
      display: block;
      cursor: pointer;
      width: 42px;
      height: 39px;
      text-indent: -9999px;
      background: #dfdfd3 url(../img/icon.svg) 3px -104px no-repeat;
      position: relative;
      border: 1px solid #b89c5d;
      margin: 20px 20px 0 0;
      float: right; }
    nav > span:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border: 1px solid #dfdfd3;
      position: absolute;
      left: 0;
      top: 0;
      transition: opacity 0.5s;
      z-index: 0;
      opacity: 0; }

  /*page2*/
  #page2 .intro {
    padding: 50px 4% 0; }
    #page2 .intro h1 {
      font-size: 26px;
      line-height: 40px; }
      #page2 .intro h1 span {
        display: block; }
    #page2 .intro p {
      padding: 0 0 35px; }
  #page2 .panel {
    display: none; }
  #page2 .tab-detail {
    width: 200%; }
    #page2 .tab-detail > div {
      width: 50% !important;
      position: static !important;
      float: left;
      margin: 0 !important; }
      #page2 .tab-detail > div > img {
        padding: 0 0 20px; }
      #page2 .tab-detail > div .control, #page2 .tab-detail > div .canvas, #page2 .tab-detail > div .canvas-container, #page2 .tab-detail > div map, #page2 .tab-detail > div .close-btn {
        display: none; }
      #page2 .tab-detail > div .controls {
        display: block; }
      #page2 .tab-detail > div .info {
        opacity: 1;
        position: static; }
        #page2 .tab-detail > div .info > img {
          display: none; }
        #page2 .tab-detail > div .info div {
          position: static;
          padding: 20px 0 !important;
          margin: 0 !important;
          width: 100% !important;
          box-sizing: border-box; }
          #page2 .tab-detail > div .info div a.mobile360 {
            position: static;
            width: auto;
            height: auto;
            margin: 0; }
            #page2 .tab-detail > div .info div a.mobile360 > img {
              display: block; }
          #page2 .tab-detail > div .info div > img {
            display: block; }
          #page2 .tab-detail > div .info div h2 {
            padding: 0 4% 10px;
            text-align: center; }
          #page2 .tab-detail > div .info div p {
            padding: 10px 4% 0; }
  #page2 .tab-detail {
    left: 0;
    transition: all 0.8s; }
    #page2 .tab-detail > div .note {
      display: none; }
  #page2 .tab-detail.location {
    left: 0 !important;
    transition: all 0.8s; }
  #page2 .history .content .right {
    padding: 0 0 100px; }
    #page2 .history .content .right article p {
      padding: 0 20px; }
    #page2 .history .content .right article p:nth-of-type(1) {
      padding: 20px 20px 0; }

  /*page3 S-M*/
  #page3 .intro {
    padding: 100px 4% 50px; }
  #page3 .map-point, #page3 > ul {
    display: none; }
  #page3 .history .content .right article {
    min-height: inherit;
    padding: 0 0 50px; }
    #page3 .history .content .right article h2 {
      margin-bottom: 20px; }
    #page3 .history .content .right article h3 {
      padding: 2px 20px 10px; }
    #page3 .history .content .right article p {
      padding: 0 20px; }
    #page3 .history .content .right article p.figure {
      display: none; }
    #page3 .history .content .right article p.figure-s {
      display: block;
      padding: 20px 0 15px; }
      #page3 .history .content .right article p.figure-s img {
        width: 100%; }
    #page3 .history .content .right article > img {
      padding: 0 0 15px; }
  #page3 .history .content .right article.r6 h3 {
    padding-top: 30px; }

  /*page4*/
  #page4 .schedule-contain .intro {
    padding: 100px 30px 50px; }
  #page4 .schedule-contain .intro h1:after {
    margin: 40px 0px 0px; }
  #page4 .schedule-contain .content {
    width: 92%; }
    #page4 .schedule-contain .content ul {
      width: 100%;
      overflow: hidden; }
      #page4 .schedule-contain .content ul li {
        overflow: hidden;
        background: #d9d5c1;
        margin-bottom: 2px;
        padding: 40px 30px; }
        #page4 .schedule-contain .content ul li div {
          padding-left: 0; }
          #page4 .schedule-contain .content ul li div p {
            padding: 0 0 5px 0px;
            width: 90%;
            float: left; }
            #page4 .schedule-contain .content ul li div p span:first-child {
              width: auto;
              display: inline-block; }
            #page4 .schedule-contain .content ul li div p span {
              display: inline;
              width: auto;
              float: none; }
          #page4 .schedule-contain .content ul li div p:before {
            margin: 4px 4px -7px 0; }

  /*page5*/
  #page5 .list {
    width: 100%;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box; }
    #page5 .list article {
      display: block;
      float: left;
      width: 50%;
      margin: 0 0 30px !important; }
    #page5 .list article:nth-of-type(2n+1) {
      clear: both; }
  #page5 .pagination .active:after {
    margin: -4px 0 0; }
  #page5 .news-wrap {
    padding: 0 0 30px; }
    #page5 .news-wrap h2 {
      text-align: center; }
      #page5 .news-wrap h2 span {
        display: inline; }

  .modal-info.active .btn-wrap {
    width: 100%; }
    .modal-info.active .btn-wrap .share {
      padding: 0 0 70px 2%;
      margin: 0; }
    .modal-info.active .btn-wrap .download-pdf {
      padding: 0 2% 0 0; } }
/*special size for location*/
@media screen and (max-width: 1919px) {
  .page2 .tab-detail .location {
    width: 100% !important; }
    .page2 .tab-detail .location img {
      width: 100%; } }
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html body#landscape {
    background: url(../img/View-Portrait.png) 0 0 no-repeat;
    display: inline-block;
    width: 100%;
    height: 120%;
    overflow: hidden;
    position: relative;
    background-size: 100%; }

  html body#landscape > div {
    display: none; } }