/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&display=swap');



:root{
--body-color: #F8F7F2;
--title-color:#734225;
--text-color:#555;

/*========== Font and typography ==========*/
--body-font: 'Big Shoulders',"Noto Sans TC","Noto Sans SC",Helvetica,Arial,"Microsoft JhengHei", sans-serif;  
--title-font: 'Big Shoulders', sans-serif;
--chinese-font:"Big Shoulders", "Noto Sans TC", sans-serif;
--biggest-font-size: 2.5rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;

/*========== Font weight ==========*/
--font-thin:300;
--font-medium: 400;
--font-semi-bold: 500;
}


/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scrollbar-width: thin;
    /*scroll-behavior: smooth;*/
  }
  
  html {
    /*scroll-behavior: smooth;*/
  }
  
  body {
    margin: 0 auto;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
  }


  h1, h2 {
    font-family: var(--title-font);
    font-weight: var(--font-medium);
    font-style: normal;
    color:var(--title-color);
  }


  h6{
    font-size:var(--smaller-font-size);
    font-weight:var(--font-medium);
  }


  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button{
    cursor:pointer;
    border:0px;
    background-color:transparent;
    font-family: 'Big Shoulders';
    font-size: var(--small-font-size);
  }

  .mobile{
    display:none;
  }

  .zh-sans {
    font-family:var(--chinese-font);
    font-weight:400;
  }

  .cn-sans {
    font-family: 'Big Shoulders',"Noto Sans TC","Noto Sans SC", system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .sc-sans{
    font-family:"Noto Sans SC", sans-serif;
  }

  p{
    letter-spacing: 0.05rem;
    font-weight: var(--font-thin);
    text-align: justify;
  }

  .p-content {
    height:100%;
  }

/* ========= header ============== */

#topbar {
  position:fixed;
  z-index:1000;
  top:0;
  width: 100%;
}

#topbar .nav {
    float: right;
    padding-top: 2rem;
    padding-right: 5%;
    width:20%;
    max-width: 460px;
    min-width:245px;
}

#topbar .nav .nav-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px solid #fff;
    border-radius: 50px;
} 

#topbar .nav .nav-content.actived{
  border:0px;
}

#topbar .nav .nav-content .nav_bg {
    width: 100%;
    position: relative;
    top: 0;
    height: 100%;
    opacity: 0;
    display:flex;
}

#topbar .nav .nav-content .nav_bg.actived{
  opacity:1;
}

.nav-content .nav_bg .navsvg{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* -------- svg nav---------*/
.cls-1, .cls-3 {
  fill: none;
}

.cls-2 {
  clip-path: url(#clip-path);
}

.cls-3 {
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.cls-3.color{
  stroke:#ac302b;
}

.svgnav_line {
  fill:none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.svgnav_line.color{
  stroke:#ac302b;
}

#topbar .nav .music_bg{
    width: 16.4%;
    position: absolute;
    left: 0;
    height: 100%;
    display:none;
    z-index:1;
}

#topbar .nav .music_bg.actived{
  display:block;
}

#topbar .nav .music_bg .icon_btn{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 30%;
    cursor:pointer;
}

#topbar .nav .music_bg .icon_btn.on.noshow{
  display:none;
}

#topbar .nav .music_bg .icon_btn.off{
  display:none;
}

#topbar .nav .music_bg .icon_btn.off.show{
  display:flex;
}

#topbar .nav .music_bg .icon_btn.on.white{
display:none;
}

#topbar .nav .music_bg .icon_btn.off.white{
  display:none;
}

#topbar .nav .languagebar{
  position:absolute;
  display: flex;
      gap: 2rem;
      color:#ac302b;
      border:1px solid #fff;
      padding:2.5% 15%;
      border-radius: 50px;
}

#topbar .nav .languagebar.actived{
  padding:3.5% 18%;
  border:0px solid #fff;
  transition:0.3s ease;
}

#topbar .nav .languagebar li{
  line-height: 1.5;
}

#topbar .nav .languagebar li:first-child {
  font-size:1rem;
}

#topbar .nav .languagebar a {
  /*color:#fff;*/
  color:#AD453E;
  text-shadow: 1px 1px 5px #b2b2b2;
}

#topbar .nav .languagebar.white a{
  color:#fff; 
}

#topbar .nav .languagebar.color a{
  color:#AD453E;
}

#topbar .nav .languagebar a:hover{
  color:#502D18;
}

#topbar .nav .bugermenu {
  width: 16.4%;
  height: 100%;
  position: absolute;
  right: 0;
  padding: 2% 2%;
  padding-left:2.5%;
  display:none;
  cursor: pointer;
}

#topbar .nav .bugermenu.show{
  display:block;
}

#topbar .nav .bugermenu ul{
  width: 100%;
  height: 100%;
  background-color: #AD453E;
  border-radius: 50%;
  display: flex;
    align-items: center;
    padding: 20%;
    flex-direction: column;
    justify-content: center;
}

#topbar .nav .bugermenu ul li.line{
  width:100%;
  height:1px;
  background-color:#fff;
  transition:all 0.5s ease-in-out;
}

#topbar .nav .bugermenu ul li.line.up{
  transform: translateY(-4px);
}

#topbar .nav .bugermenu ul li.line.down{
  transform: translateY(4px);
}

.menu_container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #eee;
    background-image:url('../images/menu_bg.webp');
    background-size:cover;
    padding:7% 5%;
    padding-bottom:5%;
    display:none;
}

.menu_container.show{
  display:block;
}

.menu_container .menu_wp{
  width:100%;
  height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.menu_container .button_wp {
    display: flex;
    width: 100%;
    height: 70%;
}

.menu_container .button_wp .nav_01 {
  width:50%;
  border: 4px solid #fff;
  border-radius: 40px;
  position: relative;
  padding: 1.8rem 2rem;
  background-color: rgba(255, 255, 255, 0);
  transition:all 0.3s ease;
}

.menu_container .button_wp .nav_01:hover{
  background-color: rgba(255, 255, 255, 0.3);
}

.menu_container .button_wp ul.nav_btn{
  width:50%;
  position: relative;
  right: 4px;
}

.menu_container .button_wp ul.nav_btn li{
  border: 4px solid #fff;
    border-radius: 40px;
    width: 100%;
    height: 50%;
    position:relative;
    padding:1.8rem 2rem;
    background-color: rgba(255, 255, 255, 0);
    transition:all 0.3s ease;
}

.menu_container .button_wp ul.nav_btn li:hover{
  background-color: rgba(255, 255, 255, 0.3);
}

.menu_container .button_wp ul.nav_btn li.nav_02{
  top:4px;
}

.menu_container .nav_04 {
  width:100%;
  height:30%;
  border:4px solid #fff;
  border-radius: 40px;
  position: relative;
  padding: 1.8rem 2rem;
  bottom:4px;
  background-color: rgba(255, 255, 255, 0);
  transition:all 0.3s ease;

}

.menu_container .nav_04:hover{
  background-color: rgba(255, 255, 255, 0.3);
}

.menu_container h2{
  font-size: 3.5rem;
  letter-spacing: 0.8rem;
  text-transform: uppercase;
  font-weight: 500;
  color:#fff;
  line-height: 1;
}

.menu_container h2 span{
    font-size: 4.6rem;
    text-transform: lowercase;
    font-weight: 400;
}

.menu_container h3{
  font-size: 2rem;
  color:#fff;
  opacity:0;
}

.menu_container .btn_icon{
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    width: 8%;
    max-width: 80px;
}

.menu_container .nav_04 .btn_icon {
  width:4%;
}

.menu_container .btn_icon img{
  width:100%;
}

.menu_container .link_wp {
  width:100%;
  height:100%;
}

/* ========= landing =============*/
.bg_animation_wp{
    position: fixed;
    width: 100%;
    height: 120vh;
    overflow: hidden;
    z-index: 0;
}

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

.main-wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    top:0;
    z-index:1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
}


.opening-modal {
    position: absolute;
    width: 100%;
    padding: 5% 5%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-image: url(../images/bg_opening_disclaimer.webp);
    background-size: cover;*/
    z-index:5;
    
}

/*
.opening-modal .dis-background{
    width: 100%;
    max-width: 1100px;
    position: absolute;
    height: 50vh;
    background: linear-gradient(107deg, rgba(131, 110, 150, 0.5) 10%, rgba(215, 151, 153, 0.5) 100%);
    border-radius: 28px;
    padding:0px;
    box-sizing: unset;
    
}

.opening-modal .disclaimerbox {
    width: 100%;
    max-width:1100px;
    position: relative;
    height: 50vh;
    background-color: transparent;
    background:linear-gradient(107deg, rgba(131, 110, 150, 0.2) 10%, rgba(215, 151, 153, 0.2) 100%);
    padding: 4% 4%;
    border-radius: 20px;
    padding-bottom:4.5%;
    border:1px solid #fff;
    backdrop-filter: blur(10px);
}*/


.opening-modal .dis-background{
    width: 100%;
    max-width: 1100px;
    position: absolute;
    height: 50vh;
    background-color: rgba(208, 137, 121, 0.6);
    border-radius: 28px;
    padding:15px;
    box-sizing: unset;
}

.opening-modal .disclaimerbox {
    width: 100%;
    max-width:1100px;
    position: relative;
    height: 50vh;
    background-color: #BE6556;
    background:linear-gradient(107deg, rgba(190,101,86,1) 10%, rgba(208,137,121,1) 100%);
    padding: 4% 4%;
    border-radius: 20px;
    padding-bottom:4.5%;
}


.opening-modal .disclaimerbox::after{
  content:"";
}

.opening-modal .disclaimerbox p{
  font-size:0.75rem;
  height:100%;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

.opening-modal .disclaimerbox p.chinese{
  text-align:justify;
  line-height: 1.8;
}

.opening-modal button {
  float: right;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding-top: 1rem;
}

.opening-modal button i{
  font-size: 20px;
  /*color: #fff;*/
  color:#ac302b;
}


.opening-modal button h5 {
  color:#ac302b;
  /*color:#fff;*/
  font-size: 0.875rem;
  text-transform: uppercase;
}

.content_wp {
  position:relative;
  width:45%;
}

.content_wp.noshow{
  display:none;
}

.content_wp .logo {
      display: flex;
      justify-content: center;
      padding-left: 16%;
      padding-right:16%;
      transition: 0.3s easeIn;
      margin-bottom: 15%;
      transform: matrix(1, 0, 0, 1, -10, 0);
}

.content_wp .logo img{
  width:100%;
}

.content_wp h1{
    padding-top: 10%;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 2.3rem;
}

.content_wp h1.chinese{
    font-size: 2.3rem;
    letter-spacing: 0.5rem;
    font-weight: 100;
}

.main-wrapper .caption{
  position: absolute;
  bottom: 4%;
  right: 5%;
}

.main-wrapper .caption h6 {
  color:#A53231;
}

.main-wrapper button.disclaimer__btn{
  position: absolute;
  bottom: 4%;
  left: 5%;
  color:#A53231;
  display:flex;
  align-items: center;
  gap: 5px;
}

.main-wrapper button.disclaimer__btn .dot{
    width: 6px;
    height: 6px;
    background-color: #555;
    border-radius: 50%;
}

.main-wrapper .disclaimerbox_kv{
    display:none;
    position: absolute;
    width: 20%;
    height: 150px;
    background-color: rgba(242, 189, 177, 0.8);
    background-image:linear-gradient(107deg, rgba(131, 110, 150, 0.5) 10%, rgba(215, 151, 153, 0.5) 100%);
    bottom: calc(4% + 20px);
    left: 5%;
    padding:10px 15px;
    border-radius: 30px;
    border: 1px solid #fff;
}

.main-wrapper .disclaimerbox_kv.show{
  display:block;
}

.main-wrapper .disclaimerbox_kv p{
  font-size: var(--smaller-font-size);
  color:#fff;
  letter-spacing:0.08em;
}

.disclaimerbox_kv .close{
  position: absolute;
    right: -25px;
    top: -25px;
    z-index: 15;
    width: 30px;
    height: 30px;
    background-color:#A53231;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid #fff;
    cursor:pointer;
}

.disclaimerbox_kv .close i{
  color:#fff;
}

/* ====== subpages common =======*/
.section-bg {
  position:fixed;
  z-index:0;
  width:100%;
  height:110vh;
  overflow:hidden;
}
.main-wrapper .projectlogo_wp{
    position: absolute;
    top: 2rem;
    left: 5%;
    width: 15%;
    max-width: 210px;
}

.main-wrapper.full {
  flex-direction: column;
  min-height:100vh;
  height:100%;
  padding:0;
  /*overflow-y:scroll;
  scroll-snap-type:y mandatory;*/
}
.main-wrapper.full section {
  width:100%;
  min-height:100vh;
  height:auto;
  position:relative;
  /*scroll-snap-align: center;*/
  padding:5%;
}

/* ====== surrounding ======= */
.section-bg.NB {
  background-image: url('../images/bg_surround.webp');
  background-size: cover;
  background-position: top left;
}

.section-bg.NB.full__container{
  background-image:url('../images/bg_surround_long.jpg');
  width:100%;
  height:100%;
  position:relative;

}

.page_content_wp.soon {
  min-height:100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 1800px;
  padding-left:0;
  padding-right:0;

}

.page_content_wp.soon h1.title{
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5rem;
    color: #fff;
    margin-top: calc(1% + 140px);
    line-height: 1;
    text-shadow: 1px 1px 5px #878787;
}

.page_content_wp.soon h1.title span{
  text-transform: lowercase;
  font-size: 9.3rem;
  font-weight: 400;
}

.page_content_wp.soon h3.soon_txt{
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: 0.5rem;
    margin-bottom: 5%;
    color:#73421F;
}

.page_content_wp.full {
  min-height:80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 1800px;
  padding-left:0;
  padding-right:0;
  margin:0 auto;

}


.page_content_wp.full h1.title{
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5rem;
    color: #fff;
    margin-top: calc(1% + 140px);
    line-height: 1;
    text-shadow: 1px 1px 5px #878787;
}

.page_content_wp.full h1.title span{
  text-transform: lowercase;
  font-size: 9.3rem;
  font-weight: 400;
}

.page_content_wp.full .scroll_btn{
      text-align: center;
      margin-top:10%;
      color:#AD453E;
}

.page_content_wp.full .scroll_btn a{
  color:#AD453E;
}

.page_content_wp.full .scroll_btn h4{
    margin-bottom: 10px;
}

.page_content_wp.full .scroll_btn .icon{
  animation: arrowmovement 3s ease 0s infinite;
}

.page_content_wp.full .scroll_btn i{
  font-size:1.4rem;
}

@keyframes arrowmovement {
0% {
  transform: translateY(-5px);
}
50% {
  transform: translateY(20px);
}
100% {
  transform: translateY(-5px);
}
}



/* Scroll Indicator Dots */
.scroll-indicator {
  position: fixed;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
  padding-left:10px;
  padding-right:9px;
  padding-top:25px;
  padding-bottom:25px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor:pointer;
}

.dot.active {
  background: white;
  transform: scale(1.4);
}

.scroll-indicator a.active .dot{
  background:#fff;
  border:3px solid #ac302b;
}

.indicator_bg{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  top:0;
  left:0;
  z-index:-1;
}

.indicator_bg img{
  width:100%;
  height:100%;
  object-fit:fill;
}

/* --- surrounding section --- */
.main-wrapper.full section.section_panel .text_container h2{
   font-size:2.2rem;
   letter-spacing: 0.15rem;
   font-weight:var(--font-semi-bold);
   line-height:1.5;
}

.main-wrapper.full section.section_panel .text_container p{
   font-size: 1.1rem;
   line-height: 1.8;
}

.main-wrapper.full section.section_panel.map {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top:0;
  padding-bottom:0;
} 

.main-wrapper.full section.section_panel.map .text_container {
  display:flex;
  justify-content: space-between;
  position: absolute;
  top: calc(5% + 4rem);
  z-index: 1;
  width: calc(100% - 10%);
}

.main-wrapper.full section.section_panel.map .text_container h2{
  width:30%;
}

.main-wrapper.full section.section_panel.map .text_container p{
    width: 60%;
    padding: 0 5%;
}

.main-wrapper.full section.section_panel.map .map_container {
  display:flex;
  width:calc(100% - 10%);
  height:calc(100% - 10%);
  position:absolute;
  justify-content: center;
  z-index:0;
  bottom:0;
}

.main-wrapper.full section.section_panel.map .map_container .map_box {
  width:85%;
}

.main-wrapper.full section.section_panel.map .map_container .map_box img{
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
}

.main-wrapper.full section.section_panel.map .map_container .map-legend {
  position:absolute;
  width:15%;
  left:0;
  bottom:calc(5% + 25px);
}

.main-wrapper.full section.section_panel.map .map_container .caption {
  right:0;
  bottom:calc(5% + 25px);
}

.main-wrapper.full section.section_panel.cityhub {
  display:flex;
  align-items:center;
  gap:5rem;
}

.main-wrapper.full section.section_panel.cityhub .image_container{
  width:60%;
}

.main-wrapper.full section.section_panel.cityhub .image_container .cityimg{
  padding:5%;
  transition: all 0.5s ease-In;
}

.main-wrapper.full section.section_panel.cityhub .text_container {
  width:40%;
  padding-right:5%;
  transition: all 0.5s ease-In;
}

.main-wrapper.full section.section_panel.cityhub .text_container p{
  margin-top:2rem;
  margin-bottom:2rem;
}

.main-wrapper.full section.section_panel.lineMap {
  display:flex;
  align-items:center;
  gap:5rem;
}

.main-wrapper.full section.section_panel.lineMap .text_container{
  width:40%;
  padding-left:5%;
  transition: all 0.5s ease-In;
}

.main-wrapper.full section.section_panel.lineMap .text_container p{
  margin-top:2rem;
  margin-bottom:2rem;
}

.main-wrapper.full section.section_panel.lineMap .map_container {
  width:60%;
}

.main-wrapper.full section.section_panel.lineMap .map_container .map_box{
  padding:5%;
}

/* ======== style ======= */
.section-bg.DG {
  background-image: url('../images/bg_design_01.webp');
  background-size: cover;
  background-position: top left;
}

.page_content_wp.soon h1 img{
  position:absolute;
  padding-left:6%;
  padding-top:3%;
}


.page_content_wp.soon.design h1.title{
  margin-top:calc(0% + 130px);
}

.page_content_wp.soon.design.cnZone h1.title {
  margin-top:0;
  padding-top: calc(5% + 120px);
}

.section-bg.DG.full {
  position:relative;
  height:auto;
  background-image: url('../images/bg_design_full.webp');
}

.main-wrapper.DG.full {
  min-height:100vh;
  height:auto;
  padding:5%;
}

.page_content_wp.full.design h1.title{
  margin-top:calc(0% + 130px);
  font-size: 7rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1.5rem;
  color: #fff;
  line-height: 1;
  text-shadow: 1px 1px 5px #878787;
}

.page_content_wp.full.design h1 img{
  position:absolute;
  padding-left:6%;
  padding-top:3%;
}

.page_content_wp.full.design .text_container{
  padding:0 18%;
  font-size:1.1rem;
  line-height:1.8;
  margin-top:8rem;
  margin-bottom:3rem;
}

.page_content_wp.full.design .image_container_top {
  width:100%;
  padding:2rem 4rem;
  position:relative;
}

.page_content_wp.full.design .image_container_top .card-shape{
  width:100%;
  height:100%;
  position:relative;
  background-color:transparent;
  border-top-right-radius:2rem;
  border-bottom-right-radius:2rem;
  border-bottom-left-radius:2rem;
  mask-image:url("../images/path_img01.svg");
  mask-size:100%;
  mask-repeat:no-repeat;
  display:flex;
  overflow:hidden;
}

.page_content_wp.full.design .image_container_top .card-shape a{
  width:100%;
  cursor: pointer;
}

.page_content_wp.full.design .image_container_top .card-shape a::before {
 content:"";
}

.page_content_wp.full.design .image_container_top .card-shape img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.page_content_wp.full.design .image_container_top .photo-caption{
  position:absolute;
  bottom:calc(2% + 2rem);
  right:calc(5% + 2rem);
  color:#fff;
}

.photo-caption h6{
  font-weight:var(--font-thin);
  color:#fff;
}

.photo-thumbnail a{
  width:100%;
}

.photo-thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius:2rem;
}

.page_content_wp.full.design .image_container {
    display: flex;
    padding: 2rem 4rem;
    width: 100%;
    align-items: center;
    gap: 1.5rem;
}

.page_content_wp.full.design .image_container .left_img_wp{
  position:relative;
  width:50%;
}

.card-shape-nomarl {
  height:auto;
  border-radius: 2rem;
  overflow:hidden;
}

.page_content_wp.full.design .image_container .left_img_wp .card-shape-nomarl{
  width:100%;
}

.page_content_wp.full.design .image_container .left_img_wp .photo-caption{
  position:absolute;
  bottom:1rem;
  right:1rem;
}

.page_content_wp.full.design .image_container .right_img_wp {
  width:50%; 
} 

.page_content_wp.full.design .image_container .right_img_wp .top-img{
  width:100%;
  height:auto;
  position:relative;
  top:1rem;
}

.page_content_wp.full.design .image_container .right_img_wp .top-img .card-shape-br{
  width:70%;
  mask-image: url("../images/path_img03.svg");
  mask-size: cover;
  mask-repeat:no-repeat;
  mask-position: bottom right;
  display: flex;
}

.page_content_wp.full.design .image_container .right_img_wp .top-img .photo-caption {
  position:absolute;
  bottom:1rem;
  left:1rem;
}

.page_content_wp.full.design .image_container .right_img_wp .bottom-img {
  width:100%;
  height:auto;
  position:relative;
  bottom:4rem;
}

.page_content_wp.full.design .image_container .right_img_wp .bottom-img .card-shape-nomarl{
    width: calc(50% + 3.5rem);
    margin-left: calc(50% - 3.5rem);
}

.page_content_wp.full.design .image_container .right_img_wp .bottom-img .photo-caption {
  position:absolute;
  bottom:calc(0% + 1rem);
  right:calc(0% + 1rem);
  color:#fff;
}

.page_content_wp.full.design .image_container.full-img-03 {
  gap:0;
  flex-direction:column;
  padding-top:0;
  padding-bottom:0;
}

.page_content_wp.full.design .image_container.full-img-03 .top_img_wp {
  display:flex;
  width:100%;
}

.page_content_wp.full.design .image_container.full-img-03 .top_img_wp .left_img_Box {
  width:30%;
  position:relative;
  top:1.5rem;
  display:flex;
}

.page_content_wp.full.design .image_container.full-img-03 .top_img_wp .left_img_Box .photo-caption{
  position:absolute;
  bottom:1rem;
  right:1rem;
}

.page_content_wp.full.design .image_container.full-img-03 .top_img_wp .right_img_Box {
  width:50%;
  position:relative;
  bottom:7.5rem;
  left:1.5rem;
}

.page_content_wp.full.design .image_container.full-img-03 .top_img_wp .right_img_Box .card-shape-tr{
  width:100%;
  height:100%;
  display:flex;
  mask-image:url("../images/path_img05.svg");
  mask-size:cover;
  mask-position:top right;
}

.page_content_wp.full.design .image_container.full-img-03 .top_img_wp .right_img_Box .photo-caption{
  position:absolute;
  bottom:1rem;
  right:1rem;
}

.page_content_wp.full.design .image_container.full-img-03 .bottom_img_wp {
  width:100%;
  position:relative;
  bottom:6rem;
}

.page_content_wp.full.design .image_container.full-img-03 .bottom_img_wp .card-shape-tl {
  width:60%;
  display:flex;
  flex-direction: column;
  margin-left:6.5rem;
  position:relative;
  mask-image: url("../images/path_img04.svg");
  mask-size: cover;
  mask-position: top left;
  overflow:hidden;
}

.page_content_wp.full.design .image_container.full-img-03 .bottom_img_wp .card-shape-tl .photo-caption {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
}

.page_content_wp.full.design .image_container.full-img-04{
  padding-top:0;
  flex-direction: column;
  width:100%;
  position:relative;
}

.page_content_wp.full.design .image_container.full-img-04 .card-shape-nomarl {
  width:100%;
  display:flex;
}

.page_content_wp.full.design .image_container.full-img-04 .photo-caption {
  position:absolute;
  bottom:calc(2rem + 1rem);
  right:calc(4rem + 1rem);
}

.page_content_wp.full.design .image_container.full-img-05 {
    width: 100%;
    align-items: flex-end;
    gap: 0;
    position: relative;
    padding-top:4rem;
    padding-bottom:0;
}

.page_content_wp.full.design .image_container.full-img-05 .photo-thumbnail {
  position:relative;
  display:flex;
}

.page_content_wp.full.design .image_container.full-img-05 .photo-thumbnail .photo-caption{
  position:absolute;
  bottom:1rem;
  right:1rem;
}

.page_content_wp.full.design .image_container.full-img-05 .card-shape-br {
  width:50%;
  height:100%;
  background-color:transparent;
  mask-image:url(../images/path_img06.svg);
  mask-size:cover;
  mask-position:bottom right;
}

.page_content_wp.full.design .image_container.full-img-05 .card-shape-br .photo-caption{
  left:1rem;
}

.page_content_wp.full.design .image_container.full-img-05 .card-shape-nomarl {
  width:26%;
  top:5.2rem;
  right:3rem;
}

.page_content_wp.full.design .image_container.full-img-05 .card-shape-bl {
  width:30%;
  height:auto;
  background-color:transparent;
  mask-image:url(../images/path_img07.svg);
  mask-size:cover;
  mask-position:bottom left;
  position:absolute;
  right:4rem;
  bottom:15rem;
}

.page_content_wp.full.design .image_container.full-img-06 {
  padding-top:0;
  padding-bottom:3rem;
}

.page_content_wp.full.design .image_container.full-img-06 .card-shape-tr {
  width:53%;
  background-color:transparent;
  mask-image:url(../images/path_img08.svg);
  mask-size:cover;
  mask-position:top right;
  position:relative;
  display:flex;
  top:3rem;
}

.page_content_wp.full.design .image_container.full-img-06 .photo-thumbnail .photo-caption{
  position:absolute;
  bottom:1rem;
  right:1rem;
}

.page_content_wp.full.design .image_container.full-img-06 .card-shape-last {
  width:46%;
  position:relative;
  top:4rem;
  display:flex;
}

.page_content_wp.full.design .image_container.full-img-06 .card-shape-last img{
  border-radius: 0;
  object-position: left;
}

.main-wrapper.DG.full .caption {
  bottom:4rem;
}

.main-wrapper.DG.full button.disclaimer__btn{
  bottom:4rem;
}

.main-wrapper.DG.full .disclaimerbox_kv {
  bottom:calc(4rem + 20px);
}

/* ======== promo ======= */
.section-bg.PL {
  background-image: url('../images/bg_promotion_full.jpg');
  background-size: cover;
  background-position: top left;
}

.page_content_wp.full.promo {
    max-width: 1800px;
    min-height: 100%;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
}

.page_content_wp.full.promo h1.title {
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5rem;
    color: #fff;
    margin-top: calc(1% + 140px);
    line-height: 1;
    text-shadow: 1px 1px 5px #878787;
}

.page_content_wp.full.promo .booklet_wp {
  margin-top:calc(1% + 140px);
  padding-right:5%;
  transition:all 0.5s ease-in;
}

.page_content_wp.full.promo .booklet_wp .booklet_img {
  width:90%;
  max-width:450px;
  margin-bottom:30px;
}

.page_content_wp.full.promo .booklet_wp .booklet_img .book{
  box-shadow: 7px 7px 5px rgba(0, 0, 0, .4);
  cursor:pointer;
  position:relative;
  width:100%;
  display:flex;
}

.page_content_wp.full.promo .booklet_wp .booklet_img .book img{
  width:100%;
  position:relative;
  z-index:2;
  transform: rotateY(0deg);
    transform-origin: left center;
    transition-duration: .5s;
}

.page_content_wp.full.promo .booklet_wp .booklet_img .book:hover img {
  transform: rotateY(15deg);
  box-shadow:7px 7px 5px rgba(0, 0, 0, .4);
}

.page_content_wp.full.promo .booklet_wp .booklet_img .book::after{
  content:"";
  display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #fcfcfc;
}

.page_content_wp.full.promo .booklet_wp button {
    text-transform: uppercase;
    padding: 0.6rem 1.5rem;
    border-radius: 99px;
    font-weight: 500;
    font-size: 1rem;
    color: #AD453E;
    background: linear-gradient(107deg, rgba(245, 237, 246, 0.5) 10%, rgba(242, 203, 193, 1) 50%, rgba(248, 232, 218, 1) 70%, rgba(250, 231, 246, 0.5) 100%);
    border: 2px solid #fff;
}

/* ====== sales ======== */
.section-bg.sales {
  background-image: url('../images/bg_opening_disclaimer.webp');
  background-size: cover;
  background-position: top center;
}

.page_content_wp {
  width:100%;
  max-width:1280px;
  padding-right:5%;
  padding-left:5%;
}

.sales .project_logo{
  width:100%;
  text-align: center;
  margin-bottom:5%;
}

.sales .project_logo img{
  width:25%;
  max-width:225px;
}

.sales_menubar {
  width:100%;
}

.sales_menubar ul {
  display:flex;
  justify-content: center;
  flex-direction: row;
  gap:1.2rem;
  row-gap:1rem;
  flex-wrap: wrap;
}

.sales_menubar ul.default_option.mobile{
  display:none;
}

.sales_menubar ul.ch{
  gap:0.85em;
}

.sales_menubar ul li {
    padding:0.8rem 1.2rem;
    border-radius: 50px;
    border: 2px solid #fff;
    font-weight: 500;
    background: linear-gradient(107deg, rgba(245, 237, 246, 0.5) 10%, rgba(242, 203, 193, 1) 50%, rgba(248, 232, 218, 1) 70%, rgba(250, 231, 246, 0.5) 100%);
    opacity:0.5;
    transition:all 0.3s ease-in;
}

.sales_menubar ul li.actived{
  opacity:1;
}

.sales_menubar ul li a{
  display:block;
  color:#AD453E;
  letter-spacing: 0.08rem;
  font-size:1.2rem;
}

.data_container {
  width:100%;
  max-width:1280px;
  padding:0 5%;
  height:45vh;
  margin-top:2.5rem;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content: center;
}

.data_container .background_sales {
  width:90%;
  height:100%;
  background: linear-gradient(107deg, rgba(131, 110, 150, 0.5) 10%, rgba(215, 151, 153, 0.5) 100%);
  backdrop-filter: blur(5px);
  position:absolute;
  border-radius: 36px;
  z-index:0;
}

.data_container .data_box{
  width:100%;
  border:2px solid #fff;
  position:relative;
  background: linear-gradient(107deg, rgba(245, 88, 245, 0.2) 10%, rgba(215, 151, 153, 0.2) 100%);
  border-radius: 36px;
  padding:2rem;
}

.data_container .data_box .data-content.d-content {
  height:100%;
}

.data_container .data_box .iframebox {
  width:100%;
  height:auto;
  display:none;
}

.data_container .data_box .iframebox.actived{
  display:block;
}

.iframebox .files_frontend {
  padding-top:20px;
  padding-bottom:20px;
}

.iframebox .files_frontend .row{
    display: flex;
    gap: 2rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .05em;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #fff;
    color:#fff;
}

.iframebox .files_frontend .row .group {
    width: 80%;
    display: flex;
    justify-content: space-between;
}

.iframebox .files_frontend .row .column.doc_name{
  width:75%;
}

.iframebox .files_frontend .row .column h3{
  font-size:1rem;
  font-weight:600;
}

.iframebox .files_frontend .row .column a{
  color:#fff;
}

.iframebox .files_frontend .row .column a i{
  font-size:1.2rem;
  font-weight:300;
}

.iframebox .files_frontend .resulttxt{
    text-align: center;
    font-size: 2.5rem;
    color: #ebc8c8;
    letter-spacing: 0.2rem;
    margin-top:5%;
}

/* ========= footer ============== */

#masterfooter{
    width: 100%;
    min-height:15vh;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 1.5rem 5%;
    background: linear-gradient(0deg, rgba(245, 225, 218, 1) 50%, rgba(245, 225, 218, 0) 100%);
    /*background-color: rgba(245, 225, 218, 1);*/
}

#masterfooter .row{
  display:flex;
  align-items: center;
  height: 100%;
  gap: 3rem;
}

#masterfooter .row .left-wrap{
  width:80%;
}

#masterfooter .row .left-wrap .hotlineInfo h3{
    font-size: 1.4rem;
    letter-spacing: 0.05rem;
    margin-bottom: 1rem;
    font-weight: 300;
}

.policy-Btn-container{
  display: flex;
  gap:1rem;
  align-items: center;
}

.policy-Btn-container li h5{
  font-weight:300;
}

.policy-Btn-container.chinese li h5{
  font-weight:400;
}

.policy-Btn-container li.dis_btn{
  cursor: pointer;
}

#masterfooter .row p{
  font-size:0.7rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

#masterfooter .row .right-wrap{
  width:20%;
}

#masterfooter .row .right-wrap .logo-container img{
  width:100%;
}

.pop-footer-dis.noshow{
  display:none;
}

.pop-footer-dis {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 10001;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.pop-footer-dis .dis-background{
    width: 100%;
    position: absolute;
    max-width: 1100px;
    height: 50vh;
    background: linear-gradient(107deg, rgba(131, 110, 150, 0.5) 10%, rgba(215, 151, 153, 0.5) 100%);
    border-radius: 10px;
}

.pop-footer-dis .disclaimerbox {
  width: 100%;
    max-width: 1100px;
    height: 50vh;
    overflow: hidden;
    background-color: rgba(242, 189, 177, 0.3);
    padding: 5% 3%;
    border-radius: 10px;
    position: relative;
}

.pop-footer-dis .disclaimerbox p{
    height: 100%;
    font-size: 0.75rem;
    line-height: 1.5;
}

.pop-footer-dis .disclaimerbox .closeBtn{
    position: absolute;
    top: 5%;
    right: 2rem;
}

@media screen and (min-width:1921px) {
  .page_content_wp {
    max-width:1580px;
  }

  .sales .project_logo img {
    max-width:325px;
  }

  .data_container {
    max-width:1580px;
    
  }
}

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

  /* --- main menu ---*/
  .menu_container h2 {
    font-size: 2.5rem;
    letter-spacing: 0.4rem;
  }

  .menu_container h2 span {
    font-size:3.25rem;
  }

  /* --- sub pages common---- */
  .main-wrapper .projectlogo_wp {
    max-width:160px;
    transition:0.3s ease-in;
  }
  .page_content_wp.soon h1.title {
    font-size:5rem;
    
  }

  .page_content_wp.soon h1.title span {
    font-size:6.7rem;
  }

  .page_content_wp.soon h3.soon_txt {
    font-size:2rem;
    margin-bottom:3%;
  }

  .page_content_wp.soon h1 img {
    width:12%;
  }

  /* --- sales page -----*/
  .sales_menubar ul li {
    padding: 0.5rem 1.1rem;
  }
  .data_container {
    height:40vh;
  }
}

@media screen and (max-width:1280px) {
  .opening-modal .dis-background {
    width:90%;
  }

  #topbar .nav {
    width:30%;
  }

  .opening-modal .disclaimerbox {
    padding-bottom:6.5%;
  }

  /* ==== page common ==== */
  .main-wrapper .projectlogo_wp {
    max-width: 220px;
    width: 20%;
  }
}

@media screen and (max-width:1024px) {
  .opening-modal .dis-background {
    width:90%;
  }

  #topbar .nav {
    width:30%;
  }

  /* ==== page common ==== */
  .main-wrapper .projectlogo_wp {
    max-width: 220px;
    width: 20%;
  }

  /* ===== sales page ==== */
  .sales .project_logo img {
    width:20%;
  }

  /* === master footer ===*/
  #masterfooter .row .left-wrap{
    width:70%;
  }
  #masterfooter .row .right-wrap {
    width:30%;
  }


}

@media screen and (min-width:821px) and (max-width:1023px) and (orientation: landscape){

  #masterfooter .row {
      flex-direction: column-reverse;
      gap:2rem;
   }

   #masterfooter .row .right-wrap{
    width:50%;
   }

   #masterfooter .row .left-wrap{
    width:95%;
   }

   #masterfooter .row .left-wrap .hotlineInfo h3 {
    text-align: center;
   }

}

@media screen and (max-width:820px){
  
   #topbar .nav {
    padding-right:4%;
    width:40%;
   }

   #topbar .nav .nav-content{
    margin:0 auto;
   }

   .bg_animation_wp video {
    object-position: left;
   }

   .main-wrapper {
    height:calc(100vh - 0px);
   }

   .opening-modal .dis-background {
    width:85%;
    height:50vh;
   }

   .opening-modal .disclaimerbox {
    width:95%;
    height:50vh;
   }

   .opening-modal .disclaimerbox p{
    height:93%;
   }

   .content_wp {
    width:90%;
   }

   .content_wp .logo {
    padding-left: 18%;
    padding-right: 18%;
   
    transform: matrix(1, 0, 0, 1, -0, 0);
    transition:0.5s;
   }

   .content_wp h1 {
    font-size:1.8rem;
    font-weight:300;
    margin-top:25%;
   }

   .content_wp h1.chinese {
    font-size:1.8rem;
    font-weight:300;
   }

   .main-wrapper .disclaimerbox_kv{
    width:90%;
    height:100px;
   }

   .menu_container {
      padding: 10% 5%;
      padding-top: calc(10% + 1rem);
   }

   /* ===== sales page ====== */
   
   

    


   /* ==== footer ====== */
   #masterfooter {
    background: linear-gradient(0deg, rgba(245, 225, 218, 1) 50%, rgba(245, 225, 218, 0.2) 100%);
   }
   #masterfooter .row {
      flex-direction: column-reverse;
      gap:2rem;
   }

   #masterfooter .row .right-wrap{
    width:50%;
   }

   #masterfooter .row .left-wrap{
    width:95%;
   }

   #masterfooter .row .left-wrap .hotlineInfo h3 {
    text-align: center;
   }

   .policy-Btn-container {
    flex-flow: wrap;
    justify-content: center;
    gap:0.5rem;
   }

   /* ====== footer --- popup ======*/
   .pop-footer-dis .disclaimerbox{
      width: 90%;
      height: 60vh;
      padding: 35px 30px;
   }

   .pop-footer-dis .dis-background {
      width: 90%;
      height: 60vh;
   }

   .pop-footer-dis .disclaimerbox .closeBtn {
      top: 5px;
      right: 5px;
      width: 25px;
      height: 25px;
      padding: 5px;
   }
}

@media screen and (min-width:768px) and (max-width:1023px) and (orientation: landscape){
  .menu_container.d .menu_wp {
    justify-content: flex-start;
  }
  .menu_container h3 {
    font-size:1.5rem;
  }
  .menu_container h2 {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
  }

  .menu_container h2 span {
    font-size:2rem;
  }

  .menu_container.d .button_wp{
    min-height:220px;
  }

  .menu_container .nav_04 {
    min-height:110px;
  }

  /* ==== sales page ==== */
  .sales_menubar {
    padding:0;
  }
  .sales_menubar ul li {
    padding:5px 8px;
  }
  .sales_menubar ul li a {
    font-size:0.75rem;
  }

  .sales_menubar ul {
    gap:1rem;
  }
}

@media screen and (max-width:767px){ 
  .desktop {
    display:none;
  }

  .mobile {
    display:block;
  }
  .opening-modal .dis-background {
      min-height: calc((100vh - 100px) / 2);
  }
  .opening-modal .disclaimerbox {
      min-height: calc((100vh - 100px) / 2);
  }
  .content_wp .logo {
    padding-left: 12%;
    padding-right: 12%;
   
   }

   /* ====  menu ==== */
    #topbar {
      display:flex;
      justify-content: center;
    }

    #topbar .nav.desktop {
      display:none;
    }

    #topbar .languagebar_home {
      position: absolute;
      width: 50%;
      display: flex;
      z-index: 10001;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(5px);
      padding: 0.8rem 2rem;
      gap: 2rem;
      top: 1rem;
      border-radius: 50px;
      overflow: hidden;
      border: 1px solid #fff;
    }

    #topbar .languagebar_home li a{
      color:#AD453E;
    }

    #topbar .languagebar_home.hide{
      display:none;
    }

     #topbar .nav.mobile {
      display:block;
      padding-top:1rem;
      width: 100%;
      transition: all 0.3s ease-in;
      
    }

   

     #topbar .nav.mobile.resize{
      width: 70%;
      padding-right:5%;
     }

     #topbar .nav.mobile .nav-content .nav_bg.actived {
      opacity:0;
     }

     #topbar .nav.mobile .nav-content .nav_bg.actived.m_show {
        opacity:1;
      }


    #topbar .nav.mobile .nav-content .bugermenu.m {
      width: 16%;
      height: 100%;
      position: absolute;
      right: 0%;
      padding: 2% 2%;
      padding-left: 2%;
      border-radius: 50%;
      border: 1px solid #fff;
      transition:all 0.5s ease-in;
    }

    #topbar .nav.mobile .nav-content .bugermenu.m.actived {
      border: 0px solid #fff;
    }

    #topbar .nav.mobile .nav-content .bugermenu_m.show.actived {
      padding-left: 2.5%;
      border: 0px solid #fff;
      transition:all 0.5s ease-in;
    }

    #topbar .nav.mobile .nav-content .bugermenu.m ul{
      width: 100%;
      height: 100%;
      background-color: #AD453E;
      border-radius: 50%;
      display: flex;
      align-items: center;
      padding: 25%;
      flex-direction: column;
      justify-content: center;
    }

    #topbar .nav.mobile .nav-content .bugermenu.m ul li.line{
      width: 100%;
      height: 1px;
      background-color: #fff;
      transition: all 0.5s ease-in-out;
    }

    #topbar .nav.mobile .nav-content .bugermenu.m ul li.line.up{
      transform: translateY(-5px);
    }

      #topbar .nav.mobile .nav-content .bugermenu.m ul li.line.down{
      transform: translateY(5px);
    }

    #topbar .nav.mobile .languagebar.noshow{
      display:none;
    }

    #topbar .nav.mobile .languagebar.m{
        background-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(5px);
    }

    #topbar .nav.mobile .languagebar.m.actived{
      opacity:0;
    }

    #topbar .nav.mobile .languagebar.m.actived.m_show{
      opacity:1;
      background-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(0px);
    }

    #topbar .nav_m {
      width: 100%;
      height: 75px;
      padding-top: 1rem;
      padding-right: 4%;
      float: right;
      /*max-width: 420px;*/
    }

     #topbar .nav_m.mobile.noshow {
      display:none;
    }

    #topbar .nav_m .buggermenu_M {
      width: 52px;
      height: 52px;
      float: right;
      padding: 8px;
      border: 1px solid #fff;
      border-radius: 50%;
    }

     #topbar .nav_m .buggermenu_M ul{
          width: 100%;
          height: 100%;
          background-color: #AD453E;
          border-radius: 50%;
          display: flex;
          align-items: center;
          padding: 20%;
          flex-direction: column;
          justify-content: center;
     }

     #topbar .nav_m .buggermenu_M ul li.line{
      width: 100%;
      height: 1px;
      background-color: #fff;
      transition: all 0.5s ease-in-out;
     }

     #topbar .nav_m .buggermenu_M ul li.line.up{
      transform: translateY(-5px);
     }

      #topbar .nav_m .buggermenu_M ul li.line.down{
      transform: translateY(5px);
     }

     .nav_lang {
      position: absolute;
      top: 1rem;
      right: 4%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index:2;
     }



      .nav_lang .nav_bg{
        width: 100%;
        position: relative;
        height: 100%;
        float: right;
        max-width:328px;
      } 

      .nav_lang .nav_bg svg.navsvg {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .nav_lang  .music_bg.m{
            position: absolute;
            width: 16%;
            height: 100%;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5%;
      }

      .nav_lang  .music_bg .icon_btn_m.on{
        display:none;
      }

      .nav_lang  .music_bg .icon_btn_m.on.show{
        display:block;
      }

      .nav_lang  .music_bg .icon_btn_m.off.noshow{
        display:none;
      }

      .nav_lang .languagebar.m{
            position: absolute;
          display: flex;
          align-items: center;
          gap: 2rem;
          padding-bottom: 5px;
      }

      .nav_lang .languagebar.m li:first-child{
        font-size:1rem;
      }

      .nav_lang .languagebar.m li a{
        color:#fff;
      }

      .nav_lang .closebtn_m {
        position: absolute;
        width: 52px;
        height: 52px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2%;
        right: 0;
        color: #fff;
      }

      .nav_lang .closebtn_m .icon-wp{
        background-color:#AD453E;
        border-radius: 50%;
        padding: 5px;
        margin-bottom: 4px;
        margin-left: 1px;
      }

      .nav_lang .closebtn_m i{
        font-size:1.5rem;
      }

      .menu_container.d {
        display:none;
      }

      .menu_container.actived{
        display:block;
        padding-bottom: 5%;
        padding-left:4%;
        padding-right:4%;
        z-index:1001;
      }

      .menu_container .menu_wp {
        padding-top:2rem;
      }

      .menu_container .button_wp {
        flex-direction: column;
        overflow-y:auto;
        height:100%;
      }

      .menu_container .button_wp .nav_01_m {
        width: 100%;
        min-height:120px;
        height: 25%;
        border: 4px solid #fff;
        border-radius: 40px;
        position: relative;
        padding: 1.4rem 2rem;
        background-color: rgba(255, 255, 255, 0);
        transition: all 0.3s ease;
      }

      .menu_container .nav_01_m .link_wp{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .menu_container .nav_01_m h2 {
        font-size: 1.4rem;
        letter-spacing: 0.05rem;
      }

      .menu_container .nav_01_m h2 span {
        font-size:1.85rem;
      }

      .menu_container .nav_01_m .btn_icon {
        bottom:unset;
      }
      
      .menu_container .button_wp .nav_01_m.btn_02{
        top:-4px;
      }

       .menu_container .button_wp .nav_01_m.btn_03{
        top:-8px;
      }

      .menu_container .button_wp .nav_01_m.btn_04{
        top:-12px;
      }
     

    /* ==== pages common =====*/
    .disclaimerbox_kv .close{
      right:0;
      top:-35px;
    }

    .main-wrapper .projectlogo_wp {
      width:40%;
      top:1rem;
    }

    .page_content_wp.soon {
      min-height: calc(100% - 80px);
      gap:2rem;
    }

    .page_content_wp.soon h1.title {
      font-size: 3rem;
        letter-spacing: 0.5rem;
        padding:0 5%;
            margin-top: 0;
    padding-top: calc(5% + 120px);
    }

    .page_content_wp.soon h1.title.mobile.ch{
      line-height: 1.5;
    }

    .page_content_wp.soon h1.title span {
      font-size:3.9rem;
    }

    .page_content_wp.soon h3.soon_txt {
      padding-bottom:20%;
    }

   

    /* ==== home page ===== */
    .content_wp {
      padding-bottom: 15%;
    }

    /* ===== surrounding page ==== */
    .section-bg.NB {
       background-image: url(../images/bg_surround_m.webp);
       background-position:top right;
    }

    .page_content_wp.full.surround {
      padding-left:5%;
      padding-right:5%;
    }
    .page_content_wp.full.surround h1.title{
      font-size:3rem;
      letter-spacing: 0.5rem;
    }

    .main-wrapper.full section.section_panel.map {
      flex-direction: column-reverse;
      gap:1rem;
    }

    .main-wrapper.full section.section_panel.map .text_container {
      flex-direction: column;
      position:relative;
      top:0;
    }

    .main-wrapper.full section.section_panel.map .text_container h2{
      width:100%;
      font-size:1.5rem;
      margin-bottom:1rem;
      line-height:1.2;
    }

    .main-wrapper.full section.section_panel.map .text_container p {
      width:100%;
      padding:0;
      font-size:0.925em;

    }

    .main-wrapper.full section.section_panel.map .map_container {
      position:relative;
      height:40vh;
      width:100%;
    }

    .main-wrapper.full section.section_panel.map .map_container .map_box{
      width:100%;
    }

    .main-wrapper.full section.section_panel.map .map_container .map_box img {
      object-position:top;
    }

    .main-wrapper.full section.section_panel.map .map_container .map-legend {
      width:70%;
      left:5%;
    }

    .main-wrapper.full section.section_panel.map .map_container .caption {
      bottom:0;
      width:50%;
    }

    .main-wrapper.full section.section_panel.map .map_container .caption h5{
      font-size: 0.75em;
      font-weight: 400;
      letter-spacing: 0.05rem;
      color: #BE6556;
    }

    /* ===== design page ===== */
    .section-bg.DG {
        background-image: url(../images/bg_design_m.webp);
        background-position:top right;
    }

    .page_content_wp.soon.design h1.title {
      margin-top:0;
    }

    .page_content_wp.soon.design.cnZone h1.title {
      margin-top:0;
    }
    .page_content_wp.soon h1 img{
      padding-left: 0%;
      width: 14%;
      padding-top: 13%;
    }

    .page_content_wp.soon h1.mobile img{
      transform: translateX(-90px);
      padding-top: 25%;
    }

    /* ===== promotion page ===== */
    .section-bg.PL{
      background-image: url(../images/bg_promotion_m.webp);
    }

    .page_content_wp.full.promo {
        flex-direction: column;
        min-height: calc(100% - 80px);
        padding-left: 5%;
        padding-right: 5%;
        justify-content: space-around;
    }

    .page_content_wp.full.promo h1.title {
      font-size:3rem;
      letter-spacing: 0.5rem;
      margin-top: calc(5% + 50px);
    }

    .page_content_wp.full h1.title span {
      font-size:3.9rem;
    }

    .page_content_wp.full.promo .booklet_wp {
      max-height: 60vh;
      overflow: hidden;
      margin-top: 0rem;
    }

     /* ===== sales page ===== */
     .section-bg.sales{
      background-position: 0% 50%;
     }
     .section_title {
      text-align:center;
      color:#fff;
      margin-bottom:1rem;
      margin-top:1rem;
     }
      .section_title h1{
        text-transform: uppercase;
        color:#fff;
        letter-spacing: 0.05rem;
        text-shadow: 1px 2px 5px #acabab;
        
      }

      .sales_menubar {
        width:100%;
        padding:0 5%;
        position:relative;
      }

      .sales_menubar ul.default_option.mobile {
          display:flex;
          justify-content: space-between;
          border-radius: 50px;  
          border: 2px solid #fff;
          font-weight: 500;
          background: linear-gradient(107deg, rgba(245, 237, 246, 0.5) 10%, rgba(242, 203, 193, 1) 50%, rgba(248, 232, 218, 1) 70%, rgba(250, 231, 246, 0.5) 100%);
          align-items: center;
      }

      .sales_menubar ul.default_option li{
        letter-spacing: 0.05em;
        border:0px;
        background: transparent;
        color: #AD453E;
        opacity: 1;
      }

      .sales_menubar ul.default_option .icon-wp{
        padding-right:5%;
      }

      .sales_menubar ul.default_option .icon-wp i{
        font-size:1.5rem;
        color:#fff;
      }

      .sales_menubar ul.submenu{
        position: absolute;
        z-index: 5;
        flex-direction: column;
        width: 90%;
        background-color: #fff;
        gap: 0px;
        border-radius: 20px;
        margin-top: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        box-shadow: 2px 2px 6px #947878;
        display:none;
      }

      .sales_menubar ul.submenu.actived{
        display:flex;
      }

      .sales_menubar ul.submenu li.actived{
        display:none;
      }

      .sales_menubar ul.submenu li {
        opacity:0.5;
        border: 1px solid #fff;
      }

      .sales_menubar ul.submenu li a {
        font-size:0.925rem;
      }

      .data_container {
        height:50vh;
        margin-top: 5%;
        
      }

      .data_container .data_box {
        padding:1rem 1.5rem;
        
      }

    .iframebox .files_frontend .row{
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;

    }

    .iframebox .files_frontend .row .group {
      width:100%;
    }

    #dmc_box .files_frontend .row{
      flex-direction: row;
    }

    #aerial_box .files_frontend .row{
      flex-direction: row;
    }

   #masterfooter .row .right-wrap {
      width:80%;
   }
}

@media screen and (min-width: 600px) and (max-height:500px) and (orientation: landscape) {
    body {
       /* background-color: lightgoldenrodyellow;*/
    }

    .landscapeCover {
      position: fixed;
      z-index: 10005;
      width: 100%;
      height: 100vh;
      background-color: #d2c1c1;
    }



    .menu_container .menu_wp {
          position:relative;
          padding-top: 0;
          margin-top: 2rem;
          height: calc(100% - 20px);
          overflow-y: auto;
    }

    .menu_container .button_wp .nav_01_m{
      min-height: 130px;
    }

    /* ===== home ====== */
    .content_wp {
      width: 45%;
      padding-bottom: 5%;
    }

    /* ====== pages common ==== */
    .main-wrapper {
      min-height: calc(100vh + 10vh);
      height: auto;
    }

    .main-wrapper .projectlogo_wp {
      width:20%;
    }

    .page_content_wp.soon {
        min-height: calc(100vh - 80px);
        height: auto;
        gap: 2rem;
    }

    .page_content_wp.soon h1.title {
        margin-top: 0;
        padding-top: calc(5% + 120px);
    }

    .page_content_wp.soon h3.soon_txt{
      margin-bottom: 10%;
    }

    /* ==== design page ===== */
    .page_content_wp.soon.design h1.title {
      margin-top: 0;
    }

    .page_content_wp.soon h1 img {
          padding-top: 10px;
         width: 10%;
        padding-left: 5%;
    }
}

@media screen and (min-width:280px) and (max-width:599px) and (max-height:550px){
    .main-wrapper .projectlogo_wp {
      width:20%;
    }
}

@media screen and (max-height:500px){
    .page_content_wp.soon h1.mobile img {
      padding-top: 0;
    transform: translateX(0px);
    }
}