@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500&family=Noto+Serif+TC:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300&family=Noto+Sans+TC:wght@100;300&display=swap');

/*=============== BASE ===============*/

html {
    /*scroll-behavior: smooth;*/
}

body {
    margin: 0 0 0 0;
    font-family: "Gotham","Noto Sans TC","Noto Sans SC",Helvetica,Arial,'Microsoft JhengHei',sans-serif;
    font-size: .938rem;
    background-color: #fff;
    color: #000;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  h1, h2, h3 {
    color: #8D5B2F;
    font-weight: 500;
    font-family: "Gotham" ,sans-serif ;
  }

  h5 {
    font-size:0.813rem;
  }

  h6 {
    font-size:0.65rem;
  }

  ul {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input {
    border: none;
    font-family: "Gotham",Helvetica,Arial,'Microsoft JhengHei',sans-serif;
    font-size: .938rem;
  }

  button {
    cursor: pointer;
  }

  input {
    outline: none;
  }

  .en-serif {
    font-family: 'kepler-std-extended-display', serif;
    font-weight: 600;

  }

  .zh { font-family: 'Noto Serif TC',serif; }
  .cn { font-family: 'Noto Serif SC',serif; }

  .zh-sans {font-family:'Noto Sans TC', sans-serif;}
  .cn-sans {font-family:'Noto Sans SC', sans-serif;}

  .footer-zh{
    font-family:'Noto Sans TC', sans-serif;
  }

  .footer-cn{
    font-family:'Noto Sans SC', sans-serif;
  }

  /* ================= header ==================== */
  header {
    width: 100%;
    position: fixed;
    z-index: 1001;
  }

  .nav{
    width: 100%;
    height: 40px;
    padding:0 40px;

  }

  .nav.actived{
    background-color:#f5f4f2;
  }

  .nav-content {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top:5px;
  }

  .nav-content.nav-zh{
    font-family: 'Noto Sans TC', sans-serif;
  }

  .nav .logo{
    width:15%;
    max-width:240px;
    margin:0 auto;
    display:none;
  }

  .btn-container {
    width:30%;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }

  .btn-container li{
    margin-left:25px;
    letter-spacing: 0.2em;
    font-size:0.88rem;
    cursor:pointer;
  }

  .btn-container li a{
    color:#00514B;
  }

  .media-Btn{
      position:relative;
      width:55px;
      text-align:center;
      display:none;
  }
  .media-Btn.actived{
    display:inline-block;
  }

  .media-Btn:hover a{
    color:#8d5b2f;
  }

  .media-Btn::after {
    content:"";
    position:absolute;
    width:100%;
    height:2px;
    bottom:-3px;
    left:0;
    background-color:#00514b;
  }

  .media-Btn:hover::after {
      background-color:#8d5b2f;
  }

  .register-Btn{
    letter-spacing: 0.2em;
    font-size:0.88rem;
    cursor:pointer;
  }

  .register-Btn .Btn{
    width:102px;
    float:right;
    color:#00514B;
    position:relative;
    text-align:center;
    display:none;
  }

  .register-Btn .Btn.actived{
    display:inline-block;
  }

  .register-Btn .Btn a{
    /*color:#00514B;*/
    color:#686145;
  }

  .register-Btn .Btn::after{
    content:"";
    position:absolute;
    width:100%;
    height:2px;
    bottom:-3px;
    left:0;
    background-color:#686145;
  }

  .register-Btn .Btn:hover a{
    color:#8D5B2F;
  }

  .register-Btn .Btn:hover::after{
    background-color:#8D5B2F;
  }

  .register-Btn .Btn.en{
    width:110px;
    letter-spacing: 0;
    font-family:'Gotham',sans-sans-serif;
    font-size:0.88rem;
    text-transform:uppercase;
  }

  .media-Btn.en{
    width:70px;
    letter-spacing: 0;
    font-family:'Gotham',sans-sans-serif;
    font-size:0.88rem;
    text-transform:uppercase;
  }

  .salesInfo-Btn {
    letter-spacing: 0.2em;
    font-size: 0.88rem;
    cursor:pointer;

  }


  .salesInfo-Btn .Btn {
    width: 70px;
    float: right;
    color:#686145;
    position: relative;
    text-align: center;
    display:none;
  }

  .salesInfo-Btn .Btn.actived{
    display:block;
  }

  .salesInfo-Btn .Btn.en{
    width:160px;
    letter-spacing: 0;
    font-family:'Gotham', sans-serif;
    font-size: 0.88rem;
    text-transform: uppercase;
  }

  .salesInfo-Btn .Btn::after {
    content:"";
    position:absolute;
    width:100%;
    height:2px;
    bottom:-3px;
    left:0;
    background-color:#686145;
  }

  .salesInfo-Btn .Btn:hover{
    color:#8D5B2F;
  }

  .salesInfo-Btn .Btn:hover::after{
    background-color:#8D5B2F;
  }

  .languagebar {
      width:30%;
      height:30px;
      display:flex;
      align-items: center;
      font-size: 1rem;
      text-transform: uppercase;
  }

  .languagebar li{
    width:15%;
  }

  .languagebar .separate-line{
    width:1px;
    height:25px;
    background-color:transparent;
    margin-right:10px;
  }

  .languagebar .separate-line.actived{
    background-color: #00514B;
  }

  .languagebar li:nth-child(4){
    width:4%;
  }

  .languagebar .langBtn {
    width:55px;
    display:flex;
    cursor:pointer;
  }

  .languagebar .lang-wp {
    position:absolute;
    top:50px;
    width:50px;
    background-color:#00514B;
    display:none;
  }

  .languagebar .lang-wp.actived{
    display:block;
  }
  .languagebar .lang-wp li {
    width:100%;
    text-align: center;
    margin:10px 0;
    font-size:0.9rem;
    font-family:"Gotham";
  }
  .languagebar .lang-wp li a {
    color:#fff;
  }

  .languagebar li a{
    color:#777;
  }

  .languagebar .lang-wp li a:hover{
    color:#C19372;
  }

  .langSelect-wp {
    display:flex;
    align-items:center;
    justify-content: center;
    width:50px;
  }

  .current-lang {
    font-size:1.0rem;
    width:18px;
    color:#fff;
    margin-right:5px;
  }

  .current-lang.actived{
    color: #686868;
  }

  .current-lang.en{
    font-size:1rem;
    width:22px;
  }

  .langSelect-wp .arrow-down{
    width:14px;
    height:7px;
    background-image:url(../imgs/icon_arrow_down_white.svg);
    background-position:center;
    background-size:cover;
  }

  .langSelect-wp .arrow-down.actived {
    background-image:url(../imgs/icon_arrow_down_green.svg);
  }

  .langSelect-wp:hover .current-lang{
    color:#C19372;
  }

  .langSelect-wp:hover .current-lang.actived{
    color:#8D5B2F;
  }

  .langSelect-wp:hover .arrow-down{
    background-image:url(../imgs/icon_arrow_down_lightbrown.svg);
  }

  .langSelect-wp:hover .arrow-down.actived{
    background-image:url(../imgs/icon_arrow_down_brown.svg);
  }

  .menu__container {
    width:100%;
    margin-top:20px;
    display:none;
  }

    .menu__container .main__menu{
      width:50%;
      max-width:400px;
      margin:0 auto;
    }

    .main__menu ul{
      display:flex;
      justify-content:space-around;
    }

    .main__menu ul li {
      position:relative;
    }

    .main__menu ul li a{
      color:#00514B;
    }

      .main__menu ul li a:hover{
        color:#8d5b2f;
      }

    .main__menu ul li::after{
      content:"";
      position:absolute;
      width:0%;
      height:2px;
      bottom:-3px;
      left:0;
      background-color:#8d5b2f;
      transition:all 0.5s ease;
    }

    .main__menu .close_nav{
      /*display:none;*/
    }

    .langBar {
      display:none;
    }

  .music-Btn {
    display: flex;
    align-items: center;
    padding-top: 5px;
  }

  .muiscicon {
    width:30px;
    height:35px;
    cursor:pointer;
  }


  #sound-on {
    display:none;
  }

  #sound-off {
    display:none;
  }

  .burgermenu {
    width:20%;
    margin-top:5px;
    padding-left:10px;
    display:none;
  }

  .burgermenu .line{
    width:40px;
    height:1px;
    background-color:#00514b;
    margin:8px 0;
  }
  .landscapeCover{
    display:none;
  }
  /* ================ opening main section ================== */
  .main-wrapper{
      width:100%;
      min-height:100vh;
      overflow-x: hidden;
  }

  .opening-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    /*background-image:url(../imgs/openingdis_bg.jpg);*/
    background-position:center center;
    background-size:cover;
    z-index: 1000;
    padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .opening-modal .dis-background {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color: rgba(0,81,75, 0.8);
    z-index:0;
  }

  .disclaimerbox {
    position:absolute;
    width: 80%;
    max-width: 1080px;
    background-color: #fff;
    padding: 45px;
  }

  .close {
    position: absolute;
    text-align: right;
    right:20px;
    top:20px;
  }

  .close button {
    width: 30px;
    height: 30px;
    background: transparent;
    padding: 3px;
    margin-bottom:10px;
  }

  .p-content {
    padding: 10px 10px;
    max-height: 300px;
    font-size: 0.813rem;
    line-height: 1.8;
    text-align: justify;
  }

  /* ------ animation opening ------- */
  .opening-ain {
    position: relative;
    overflow: hidden;
    height: 100vh;
  }

  .opening-ain .v-container {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
  }

  .opening-ain .v-container.m{
    display:none;
  }

  .opening-ain video{
    position: relative;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
  }



  #openAinmate02 {
    display:none;
  }

  #openAinmate02m {
    display:none;
  }

  .desktop_bg{
    background-image:url("../imgs/tesear_bg.jpg");
    background-position:top center;
    background-size:cover;
    width:100%;
    height:100vh;
    display:none;
  }

  .mobile_bg{
    background-image:url("../imgs/teaser_img_m2.jpg");
    background-position:center;
    background-size:cover;
    width:100%;
    height:100vh;
  }

  .opening-txt-container{
      width:100%;
      min-height:100vh;
      position:relative;
      top:0;
      left:0;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      z-index:2;
  }

  .opening-txt-container .info-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    top: 0;
    background-color:#f5f4f2;
    height: 220px;
  }

  .info-wrap .project-logo {
    width: 25%;
    max-width:250px;
    margin: 0 auto;
    text-align: center;
    display:none;
    position:absolute;
    top:45px;
  }

  .info-wrap .textinfo{
    width: 50%;
    max-width: 820px;
    margin: auto;
    text-align:center;
    display:none;
    position:absolute;
    bottom:5%;

  }

  .info-wrap .textinfo.en{
    width:80%;
    max-width: 1000px;
  }

  .info-wrap .textinfo img{
    width:100%;
  }

  .info-wrap .textinfo img.m{
    display:none;
  }

  .info-wrap h2{
    text-align: center;
    margin-top: 22%;
    font-size: 1.5rem;
    color: #00514B;
    letter-spacing: 0.2em;
    display:none;
  }

  .info-wrap h2.en{
    letter-spacing:0.03em;
  }

  .home__img.desktop{
    display:block;
  }

  .home__img {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #f5f4f2;
  }

  .home__img img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .icon-down {
    position: absolute;
    width: 60px;
    height:25px;
    bottom: 5%;
    display:none;
    cursor:pointer;
    background-image: url(../imgs/icon_arrow_big_down_green.png);
    background-position:center;
    background-size:cover;
  }

  .icon-down:hover {
    background-image: url(../imgs/icon_arrow_big_down_brown.png);
  }

  .icon-up {
    position: absolute;
    width: 60px;
    height:25px;
    bottom: 8%;
    display:none;
    cursor:pointer;
    background-image: url(../imgs/icon_arrow_big_up_green.png);
    background-position:center;
    background-size:cover;
  }


  .video-dis {
    position: absolute;
    width:100%;
    height:38px;
    bottom: 2%;
    left: 0px;
    padding:20px 3%;
    font-size: 0.65rem;
    transition:all 0.5s ease-in;
  }

  .video-dis.actived {
    background-color:rgba(255,255,255, 0.8);
    height:120px;
    bottom:0%;
  }

  .video-dis.en.actived{
    height:140px;
  }

  .video-dis-btn {
    display:flex;
    align-items: center;
    cursor:pointer;
  }

  .video-dis-btn .iconinfo {
    width:25px;
    margin-right:10px;
    padding-left:10px;
    padding-top:5px;
  }

  .video-dis-btn h6{
    color:#fff;
    letter-spacing: 0.1em;
  }

  .video-dis-btn h6.en{
    letter-spacing:0.02em;
  }

  .video-dis-btn h6:hover{
    color:#707070;
  }

  .video-dis-btn h6.actived{
    color:#000;
  }

  .video-dis .p-content{
    font-size:0.65rem;
    height:80px;
    display:none;
    opacity:0;
    transition:all 2s ease-in;
  }

  .video-dis .p-content.actived{
    display:block;
    visibility:visible;
    opacity:1;
  }

  .disclaimerBtn{
    display:flex;
    align-items:center;
    position:absolute;
    bottom:5%;
    left:3%;
    padding-left:10px;
    cursor:pointer;
  }
  .disclaimerBtn.hidden{
    display:none;
  }

  .disclaimerBtn img{
    width:15px;
    margin-right:10px;
  }
  .disclaimerBtn h6{
    color:#fff;
  }
  .dis_data {
    position:absolute;
    width:90%;
    height:120px;
    padding:10px 20px;
    background-color:rgba(255, 255, 255, 0.8);
    display:none;
    align-items: center;
    bottom:8%;
  }

  .dis_data.actived{
    display:flex;
  }

  .dis_data .p-content{
    height:110px;
    font-size:0.68rem;
  }

  .booking-btn {
    position:fixed;
    right:-240px;
    bottom:3%;
    z-index:10;
    transition-duration: .8s;
  }

  .booking-btn.hide{
    display:none;
  }

  .booking-btn:hover{
    right:0px;
    transition:all 0.8s ease-in;
  }

  .booking-container{
    position:relative;
    cursor:pointer;
    overflow:hidden;
    margin-bottom:10px;
    border-top-left-radius:10px;
    right:0;
    box-shadow:-2px 2px 5px rgba(0,0,0, 0.3);
    transition-duration: .8s;
    display:flex;
    align-content:stretch;
  }

  .btn-left {
    width:40px;
    position:relative;
    background-color:#00514B;
    background-color:#686145;
    color:#fff;
    min-height:45px;
    height:200px;
    display:flex;
    align-items:center;
  }

  .btn-left .vertical-text{
    padding-top:40px;
    transform-origin:center center;
    transform:translate(-50%, 0) rotate(-90deg);
    word-break:keep-all;
    white-space: nowrap;
  }

  .btn-left .vertical-text.en{
    font-size:0.875rem;
  }

  .btn-right{
    width:240px;
    min-height:45px;
    background-color:#fff;
    color:#707070;
    display:flex;
    align-items: center;
    justify-content: center;
  }

  .btn-right .txt-wp{
    text-align:center;
    font-size:1rem;
  }

  .txt-wp .mtricon{
    width:16px;
    vertical-align: middle;
    margin-top:2px;
    margin-right:2px;
    margin-bottom: 4px;
  }

  .txt-wp span{
    color:#00514B;
  }

  .txt-wp a {
    color:#00514B;
    text-decoration: underline;
  }

  /* =================== sales information =================== */
  .salesinfo-container {
    width: 35%;
    max-width:500px;
    min-height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0,81,75, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1005;
    visibility:hidden;
    opacity:0;
    transition: all 0.5s ease-in;
  }

  .salesinfo-container.actived {
    visibility:visible;
    opacity:1;
  }

  .salesmenu{
    display: block;
    width: 100%;
    position: relative;
    min-height: 100vh;
  }

  .salesmenu .close{
    top: 30px;
    right: 30px;
  }

  .menu-container {
    position: absolute;
    width: 60%;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .menu-container.en{
    width:70%;
  }

  .menu-container ul {
    font-size: 1.4rem;
    text-align: left;
  }

  .menu-container ul li{
    margin:30px 0;
    letter-spacing: 0.2em;
    font-weight: 300;

  }

  .menu-container ul.nav-en li {
    margin:35px 0;
    font-size:1.2rem;
    letter-spacing: 0.02em;
    text-transform:uppercase;
  }

  .menu-container ul li a{
    color: #fff;
  }

  .menu-container ul li a:hover{
    color: #c19372;
  }

  .salesinfo-wrap {
    position: fixed;
    width: 100%;
    min-height: 100vh;
    top:0;
    background-color: rgba(0,81,75,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    z-index:1006;
    opacity:0;
    transition: all 0.5s ease-in;
  }

  .salesinfo-wrap.actived{
    visibility: visible;
    opacity:1;
  }

  .info-container {
    width: 80%;
    max-width:1080px;
    min-height: 500px;
    background-color: #fff;
    position:relative;
    border-radius: 0px;
  }

  .info-container .close {
    position:absolute;
    top: 22px;
    right: 22px;
  }

  .salesInfo_data_container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-top: 5%;
  }

  .salesInfo_contents .title h1{
    display: block;
    font-size: 1.8rem;
    color: #00514B;
    font-weight:300;
    text-align: center;
  }

  .title.zh h1 {
    font-family: 'Noto Serif TC',serif;
    letter-spacing: 0.1em;
    font-weight:500;
  }

  .title.cn h1 {
    font-family: 'Noto Serif SC',serif;
    letter-spacing: 0.1em;
    font-weight:500;
  }

  .title.en h1 {
    font-family: 'kepler-std-extended-display', serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .datawp-content{
    max-height:320px;
  }

  .iframebox {
    display:none;
    height:50vh;
    max-height:320px;
  }

  .iframebox.actived{
    display:block;
  }

  .iframebox iframe{
    border:none;
  }

  .data-content{
    padding: 5%;
    color: #fff;
    font-weight:300;
  }

  .data-content .datarow {
    display: flex;
    margin-bottom: 10px;
    font-size: 1rem;
  }

  .datarow .filetitle {
    padding-left:5%;
  }

  .datarow .filetitle a{
    color:#fff;
  }

  .datarow .filetitle a:hover{
    color:#C7B9AB;
  }

/* =================== gallery ================== */
  .main-wp.gallery{
  width:100%;
  min-height:100vh;

}

.gallery .page-nav{
  margin-top:160px;
  width:100%;
  height:60px;
  position:fixed;
  display:flex;
  background-color:#fff;
  align-content:center;
  justify-content:center;
  z-index:1000;
}

.page-nav ul{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: center;
  position:relative;
}
.page-nav ul li{
  padding:0 2%;
  cursor:pointer;
  color:#00514B;
  font-size:0.9rem;

}

.page-nav ul li a{
  color:#00514B;
}

.page-nav ul li.actived a{
  color:#8D5B2F;
}


.page-nav ul::before{
  content:"";
  position:absolute;
  width:420px;
  height:1px;
  background-color:#00514B;
  top:10px;
  display:none;
}

.section-background {
  width:100%;
  min-height:100vh;
  position:absolute;
  bottom:0;
  z-index:-1;
  background-image:url("../imgs/openingdis_bg.jpg");
  background-position:bottom center;
  background-size:cover;
  opacity:0.5;
}

.gallery .section{
  width:100%;
  min-height:calc(100vh - 220px);
  padding-top:250px;
  position:unset;
}

.section.photo{
  background-image:url("../imgs/bg_blur.jpg");
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:contain;
}

#photos {
  display:none;
}



#videos {
  display:none;
}

#leaflet {
  display:none;
}
  .photos-wp {
    width:100%;
    height:auto;

  }

  .allimg-container {
    width:100%;
    max-width:1440px;
    padding:0 5%;
    margin:0 auto;
    padding-bottom:6%;
  }

  .allimg-box {
    width:100%;
    margin:0 auto;
    column-count:3;
    gap:15px;
    overflow-x: hidden;
  }

  .img__thumbnail {
    position:relative;
    margin-bottom: 10px;
    cursor:pointer;
  }

  .pic__image {
    width:100%;
  }
  .pic_disclaimer{
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    padding:10px;
    background-color:transparent;
    transition: all 0.5s ease;
  }

  .pic_disclaimer.actived {
    height:110px;
    background-color:rgba(255,255,255, 0.8);
  }

  .pic_btn {
    display:flex;
    align-items:center;
  }

  .i-icon{
    width:18px;
    margin-right:10px;
  }

  .pic_btn h6{
    color:#fff;
  }

  .pic_btn .img__name.actived{
    color:#707070;
  }

  .img_disclaimer.p-content {
    height:70px;
    font-size:0.6rem;
    visibility:hideen;
    opacity:0;
    transition:all 0.5s ease;
  }

  .img_disclaimer.p-content.actived{
    visibility:visible;
    opacity:1;
  }

  .lightbox-container{
    display:none;
    position:fixed;
    z-index:10000;
    padding:0;
    left:0;
    top:0;
    width:100%;
    height:100vh;
    overflow:hidden;
    background-color:rgba(0, 0, 0, 0.95);
  }

  .close-container {
    position:absolute;
    right:20px;
    top:20px;
    cursor:pointer;
  }

  .large_image_container{
    display:flex;
    align-content:center;
    justify-content: center;
    width:100%;
    height:88vh;
  }

  .large_data {
    width:90%;
    margin:auto;
    max-width:1100px;
    display:none;
    text-align: center;
  }

  .large__image{
    /*width:100%;*/
  }

  .prev, .next {
    cursor:pointer;
    position:absolute;
    top:45%;
    transform: translateY(-50%);
    width:auto;
    padding:16px;
    margin-top:0px;
    color:#fff;
    font-weight:bold;
    font-size:20px;
    transition:all 0.6s ease;
    border-radius:0  3px 3px 0;
    user-select:none;
    -webkit-user-select:none;
  }

  .prev {
    left:0;
  }

  .next {
    right:0;
  }

  .img-content{
    width:100%;
    max-width:1550px;
    height:110px;
    margin:0 auto;
  }

  .indicator-container {
    position:relative;
    width:1540px;
    bottom:10px;
  }

  .dot_img {
    width:100px;
    height:98px;
    margin-right:10px;
    float:left;
  }

  .dotImage {
    opacity:0.6;
  }

  .active, .dotImage:hover{
    opacity:1;
  }

  .dotImage{
    width:100%;
    height:100%;
    object-fit: cover;
  }

  .video-container {
    width:100%;
    height:calc(100vh - 320px);
    display:flex;
    align-items:center;
  }



  .video-card {
    position:relative;
    width:100%;
    padding:0 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .video-card .player-wp {
    width:50%;
    display:flex;
    align-items:center;
    justify-content: center;
  }

  .v-playbtn{
    width:50px;
    position:absolute;
    cursor:pointer;
  }

  .videotitle {
    padding-top:10px;
  }

  .videotitle h4{
    font-weight:400;
  }

  .pop-box {
    position:fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 81, 75, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease-in-out;
    z-index: 1005;
  }

  .video.actived {
    visibility: visible;
    opacity: 1;
  }

  .video-close{
    position:absolute;
    top:2%;
    right:2%;
    cursor:pointer;
  }

  .youtube-wp{
    width:50%;
    max-width:900px;
    height:60%;
    display:flex;
    align-items: center;
    justify-content: center;
  }

  .book-container{
    width:100%;
    min-height:calc(100vh - 320px);
    display:flex;
    align-items:center;
  }

  .books-box {
    display:flex;
    width:100%;
    max-width:1000px;
    padding:0 5%;
    padding-bottom:5%;
    margin:0 auto;
    justify-content: center;
  }
  .books-box img.cover {
    width:100%;
    max-width:360px;
    vertical-align: middle;
    display:inline-block;
    border-style:solid;
    border-width:1px;
    border-color:#d9d9d9;
  }
  .books-box h5{
    color:#000;
    font-weight:400;
    font-size:0.9rem;
  }
  .book-wp {
    width:50%;
    padding:0 5%;
  }
  .name-down{
    display:flex;
    justify-content: space-between;
    margin-top:1rem;
  }

  .download {
    display:flex;
    align-items:center;
  }

  .download .icon-wp{
    width:20px;
    height:20px;
    margin-right:10px;
  }
  /* =================== Vr Page ================== */

  .main-wrapper.vr{
    min-height: 100vh;
    height:auto;
  }

  .page-nav.vr{
    padding-top:175px;
  }

  .addbg {
    width:100%;
    height:auto;
    background-image:url("../imgs/bg_blur2.jpg");
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:cover;
  }

  .vr__container{
    width:100%;
    max-width:1400px;
    padding:0 10%;
    margin-right:auto;
    margin-left:auto;
    padding-top:50px;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:1.5rem;
    padding-bottom:4rem;
  }



  .vr-card{
    padding:1rem;
  }
  .vr_data{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .vr_btn{
    position:absolute;
    width:60px;
    cursor:pointer;
  }

  .vr-card .vr_title{
    margin-top:0.5rem;
    margin-bottom: 2.8rem;
  }

  .vr__disclaimer.actived{
    visibility: visible;
    opacity: 1;
  }

  .vr__disclaimer .disclaimerbox{
    display:none;
  }

  .close_vr_disclaimer{
    position:absolute;
    top:2%;
    right:2%;
    cursor:pointer;
  }

  .viewbtn {
    width:160px;
    text-align:center;
    background-color:#00514B;
    margin:0 auto;
    padding:0.8rem 1.5rem;
  }

  .viewbtn a{
    color:#fff;
  }

  /* =================== Pop Modal ================== */
  .pop-footer-dis {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 81, 75, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease-in-out;
    z-index: 1005;
  }

  .pop-footer-dis.actived {
    visibility: visible;
    opacity: 1;
  }

  /* ==================== footer ===================== */
  footer {
    width: 100%;
    padding:20px 30px;
    background-color: #f5f4f2;
    background-image:url('../imgs/footer_bg.png');
    background-size:cover;
    background-position:bottom center;
  }

  .phase_wp {
    display:flex;
    gap:1rem;
  }

  .phase_btn {
    width:210px;
    margin-bottom: 15px;
  }

  .phase_btn .btn_txt{
    padding:10px;
    background-color:rgba(0, 81, 75, 0.4);
    background-color:#337E68;
    font-size:0.938rem;
    color:#fff;
    text-align: center;
    border-radius: 50px;
  }

  .notedis{
    font-size:0.6rem;
    color:#82726E;
    margin-bottom:2.5rem;
    width:98%;
  }

  footer .row {
    display: flex;
    justify-content: space-between;
  }

  footer .left-wrap{
    width:50%;
    color:#534529;
  }

  footer .right-wrap{
    width:45%;
    display: flex;
    align-items: center;
  }

  .left-wrap .footer-zh .salesoffice{
    font-size:0.95rem;
    color: #000;
    margin-bottom: 5px;
    font-family: 'Noto Sans TC';

  }

  .left-wrap .en .salesoffice {
    font-size:0.95rem;
    color: #000;
    margin-bottom: 5px;
  }

  ul.policy-Btn-container{
    display: flex;
    margin-top:0px;
  }

  ul.policy-Btn-container li{
    margin-right:5px;
    height:36px;
    line-height:16px;
    display:flex;
    align-items:center;
  }

  .policy-Btn-container li a{
    color:#000;
  }

  .policy-Btn-container .footerdisbtn {
    cursor:pointer;
    color:#00514B;
  }

  .policy-Btn-container li.policy a{
    color:#00514B;
  }

  .hotlineInfo h5{
    font-weight:300;
  }

  h5.updateTime{
    display:flex;
    align-items:center;
    color:#000;
  }

  h5 iframe#dateInfo{
    width:135px;
    height:36px;
    border:none;
  }

  footer .right-wrap .group1 {
      width:24%;
  }

  footer .group1 h6{
    margin-left:5%;
    color:#534529;
  }

  footer .group2 h6{
    margin-left:5%;
    color:#534529;
  }

  footer .right-wrap .group2 {
    width:80%;
  }

  footer .right-wrap .logo-container {
    display: flex;
    align-items: center;
    margin-top:15px;
  }

  .logo-container li{
    margin-left:5%;
    width:100%;
  }

  .logo-container li img{
    width:80%;
  }

  .group1 .logo-container li img{
    width:85%;
  }

  footer .right-wrap h5{
    margin-left:5%;
  }

  /* ======= Media queries ====== */
  @media screen and (max-width: 1024px) {
    /* ===== header ====*/
    .languagebar {
      width:65%;
    }


    .languagebar li {
        width:8%;
    }

    .nav .logo{
      width:25%;
      margin-top:20px;
    }

    .btn-container{
      width:45%;
    }

    /* ===== footer ====== */
    footer .row {
      /*flex-flow:column;*/
    }

    footer .left-wrap {
      width:100%;
    }

    footer .right-wrap {
      width:85%;
      margin-top:20px;
    }

    footer .group1 h6{
      margin-left:0;
    }
    footer .group1 .logo-container li{
      margin-left:0;
    }
  }

  /* ------================= Media Set ================= ---------------------*/

  @media only screen and (max-width:767px){

    
    .info-wrap .textinfo img.d{
      display:none;
    }

    .info-wrap .textinfo img.m{
      display:block;
    }

    .opening-ain .v-container.d {
      display:none;
    }

    .opening-ain .v-container.m {
      display:block;
    }

    .opening-modal {
      z-index:1000;
    }

    
      header .nav {
        padding:0 5%;
        height:50px;
        background-color:transparent;
      }

      header .nav.actived{
        background-color: #fff;
      }

      .nav-content {
        padding-top:10px;
      }

      .nav .logo{
        width:45%;
        margin-top:1.5rem;
      }

      .burgermenu.actived{
        display:block;
      }

      .burgermenu {
        margin-top:0;
      }

      .languagebar {
        width:30%;
      }

      .languagebar li.music-Btn {
        min-width:30px;
        padding-top:0px;
      }

      .languagebar li.music-Btn.en{
        padding-top:0;
      }

      .menu__container{
        width:100%;
        height:100vh;
        position:absolute;
        margin:0;
        top:0;
        left:0;
        background-color:rgba(0, 81, 75, 0.95);
        display:inline-block;
        visibility:hidden;
        opacity:0;
        transition: all 0.5s ease-in;
      }

      .menu__container.actived{
        visibility:visible;
        opacity:1;

      }

      .menu__container .main__menu{
        width:60%;
        margin-top:45%;
      }

      .main__menu h5{
        font-size:1.3rem;
        color:#fff;
        margin-bottom:15px;
      }

      .main__menu ul{
        flex-direction:column;
        justify-content: center;
        line-height:50px;
        padding-left: 8px;
      }

      .main__menu ul li{
        font-size:1.2rem;
        letter-spacing:0.2em;
        font-weight:300;
      }

      .main__menu ul li.en{
        font-size:1.2rem;
        letter-spacing:0.02em;
        font-weight:300;
        text-transform: uppercase;
      }

      .main__menu ul li a {
        color:#fff;
      }

      .media-Btn.actived.mobile{
        display:none;
      }


      .langBar {
        margin-top:1.5rem;
        display:inline-block;
      }

      .main__menu .lang-wp {
        flex-direction:row;
        justify-content: flex-start;
        align-items:center;

      }

      .main__menu .lang-wp li{
        margin-right:15px;
        text-transform:uppercase;
      }

      .main__menu .close_nav{
        position:absolute;
        top:20px;
        right:20px;
        width:30px;
        padding:3px;
      }

      .muiscicon{
        height:30px;
      }

      .current-lang {
        font-size:0.88rem;
      }

      .current-lang.en{
        font-size:0.88rem;
      }

      .lang-wp .separate-line{
        width:1px;
        height:25px;
        background-color:#fff;
        margin-right:10px;
      }

      #sound-on_m{
        display:none;
      }

      #sound-off_m {
        display:block;
      }

      .home #sound-on_m{
        display:block;
      }

      .home #sound-off_m{
        display:none;
      }

      .disclaimerBtn{
        left:3%;
        padding-left:10px;
      }

      .disclaimerBtn.en{
        left:3%;
      }

      .video-dis {
        left:0;
        bottom:3.5%;
      }

      .video-dis.actived{
        bottom:0;
        height:140px;
      }

      .video-dis-btn h6{
        color:#fff;
      }

      .video-dis-btn h6.en{
        width:80%;
      }

      .btn-container{
        width:68%;
      }
      .btn-container.en{
        width:80%;
      }
      .dis_data.en{
        bottom:10%;
      }

      .register-Btn .Btn.en{
        width:90px;
        letter-spacing: 0;
        font-family:'Gotham',sans-sans-serif;
        font-size:0.75rem;
        text-transform:uppercase;
      }

      .salesInfo-Btn.en {
        margin-left:10px;
        letter-spacing: 0.1em;
      }

      .salesInfo-Btn{
        width:100%;
        letter-spacing: 0.02em;
      }

      .salesInfo-Btn .Btn::after {
        bottom:-3px;
      }

      .salesInfo-Btn .Btn.en{
        font-size:0.75rem;
        letter-spacing:0.02em;
        width:140px;
      }

      .disclaimerbox{
        width:90%;
        padding:40px 15px;
        padding-top:45px;
        padding-bottom:35px;
      }

      .disclaimerbox .close{
        right:15px;
        top:15px;
        z-index:10;
      }

      .home__img.desktop{
        display:none;
      }

      .home__img.mobile {
        display:block;
        height:calc(100vh - 220px);
        background-image:url('../imgs/bg_photo_VG1_m.jpg');
        background-size:cover;
      }

      .home__img.mobile.en{
        height:calc(100vh - 260px);
      }

      .gallery .page-nav{
        margin-top:150px;
      }

      .allimg-box{
        column-count:1;
      }

      .video-close{
        top:20px;
        right:20px;
      }

      .section.photo{
        background-image: url("../imgs/opening_bg_m_blur.jpg");
        background-repeat:repeat-y;
        background-size:auto;
      }

      .addbg{
        background-image: url("../imgs/bg_blur2_m.jpg");
        background-repeat:repeat-y;
        background-size:contain;
      }

      #videos.section{
        padding-top:250px;
        min-height:100vh;
        background-image:url("../imgs/openingdis_bg_blur.jpg");
        background-position:bottom center;
        background-size:cover;

      }

      .video-container {
        height:calc(100vh - 420px);
        position:absolute;
        z-index:5;
      }

      .video-card .player-wp{
        width:90%;
      }

      #leaflet.section{
        padding-top:200px;
        min-height:100vh;
        background-image:url("../imgs/openingdis_bg_blur.jpg");
        background-position:bottom center;
        background-size:cover;
      }

      .book-container{
        min-height:calc(100vh - 250px);
      }

      .book-wp{
        width:85%;
      }

      .vr__container{
        padding-top:25px;
        grid-template-columns:repeat(1, 1fr);
        grid-gap:0.5rem;
        padding-bottom:1rem;
      }

      .vr-card .vr_title{
        margin-bottom:0;
      }

      .close_vr_disclaimer{
        top:20px;
        right:20px;
      }

      .large_image_container{
        height:100vh;
      }

      .indicator-container{
        display:none;
      }

      .prev, .next {
        top:50%;
      }

      .p-content {
        max-height: 380px;
        letter-spacing: -0.04em;
      }

      .btn-left .vertical-text.en{
        font-size:0.875rem;
      }

      .txt-wp .mtricon{
        vertical-align:text-bottom;
        margin-bottom:4px;
      }


      .salesinfo-container {
        width:100%;
      }

      .salesmenu .close{
        top:20px;
        right:20px;
      }

      .menu-container {
        top:45%;
      }

      .menu-container ul{
        font-size:1.2rem;
      }

      .menu-container ul li {
        margin:20px 0;
      }

      .menu-container ul.nav-en li {
        font-size:1.0rem;
        margin:25px 0;
      }

      .info-container{
        width:85%;
        display:flex;
        align-items: center;
        min-height:1px;
        height:60%;
        max-height:420px;
      }

      .info-container .close{
        top:15px;
        right:15px;
      }

      .salesInfo_data_container{
        margin-top:50px;
      }

      .salesInfo_contents .title h1{
        font-size: 1.3rem;

      }

      .salesInfo_contents .title.en h1{
        font-size: 1.3rem;
        padding:0 5%;

      }


      .iframebox {
        max-height:300px;
      }

      .opening-txt-container .info-wrap{
        width:100%;
        display:flex;
        flex-flow:column;
        align-items: center;

      }

      .opening-txt-container .info-wrap.en{
        height:260px;
      }

      .info-wrap .project-logo {
        width:42%;
        max-width:180px;
        position:absolute;
        top:70px;
        transition:all 0.8s ease-in;
      }

      .info-wrap .textinfo{
        display:none;
        width:80%;
        position:absolute;
        top:unset;
        bottom:6%;
        transition:all 0.8s ease-in;
      }

      .info-wrap .textinfo.en{
        width:70%;
        top:unset;
        bottom:5%;
      }

      .info-wrap h2{
        font-size:1.1rem;
        position:absolute;
        margin:0;
        bottom:35%;
        transition:all 0.8s ease-in;
      }

      .icon-down, .icon-up {
        width:50px;
        height:21px;
        bottom:22%;
        transition:all 0.8s ease-in;
      }

      footer{
        padding:20px 3%;
        background-image:url('../imgs/footer_bg_m.png');
      }

      footer .row {
        flex-flow:column;
      }

      .phase_btn .btn_txt {
        font-size:0.73rem;
        padding:8px;
      }

      .hotlineInfo h5 {
        line-height: 1.8;
      }

      ul.policy-Btn-container {
        display:inline-block;
      }

      ul.policy-Btn-container li{
        height:26px;
        float:left;
      }

      footer .right-wrap {
        width:100%;
      }

      footer .right-wrap .group1{
        min-width:90px;
        width:25%;
      }

      footer h6{
        font-size:0.6rem;
      }

      .logo-container li img {
        width:100%;
      }

      .group1 .logo-container li img {
        width:88%;
      }


  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation :  portrait) {
    .opening-txt-container .info-wrap {
      width:100%;
    }

    

    .opening-txt-container .info-wrap.en{
      height:260px;
    }

    .info-wrap .textinfo {
      width:50%;
      margin-top: 12%;
    }

    .info-wrap h2 {
      margin-top: 40%;
    }

    .info-wrap .textinfo img.d{
      display:none;
    }

    .info-wrap .textinfo img.m {
      display:block;
    }

    .info-wrap .textinfo.en {
      width:40%;
    }

    .home__img.desktop{
      display:none;
    }

    .home__img.mobile {
      display:block;
      height: calc(100vh - 220px);
      background-image: url(../imgs/bg_photo_VG1_m.jpg);
      background-position:top center;
      background-size: cover;
    }

    .home__img.mobile.en{
      height:calc(100vh - 220px);
    }

    footer .row {
      flex-flow:column;
    }
  }

  @media screen and (min-width: 768px) {
    .nav-close {
      display:none;
    }

    .burgermenu {
      display:none;
    }
  }

    @media screen and (min-width: 768px) and (max-width:1023px) and (orientation :  landscape){
        .disclaimerbox{
          padding:35px;
        }
        .p-content {
          max-height:200px;
        }
        footer .row{
          flex-flow:column;
        }
    }

      @media screen and (max-width: 767px)and (orientation :  landscape){
        .landscapeCover{
          position:fixed;
          width:100%;
          height:100%;
          z-index:10000;
          background-color:rgba(0,81,75,1);
          display:block;
        }

        .rotate-wp {
          display:flex;
          flex-flow:column;
          justify-content: center;
          align-items: center;
          width:100%;
          height:100%;
        }
        .rotate-wp img{
          width:60px;
        }

        .rotate-wp h5{
          margin-top:10px;
          color:#fff;
          font-weight:300;
        }
      }