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


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

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

html {
    scroll-behavior: smooth;
}

body {
    width:100%;
    margin:0 auto;
    padding:0;
    font-family: "Poppins", "Noto Sans TC",'Noto Sans SC', Helvetica, Arial,'Microsoft JhengHei', sans-serif;
    font-weight: 300;
    font-style: normal;
   /* filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);*/
   /* Chrome, Safari */
   /*-webkit-filter: grayscale(1);*/
   /* Firefox */
   /* filter: grayscale(1);*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1, h2 {
    font-family: "amandine", sans-serif;
    font-weight: 400;
    font-style: normal;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    letter-spacing:0.05em;
}

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

button {
    background-color:transparent;
    display:flex;
    align-items: center;
    border:0;
    cursor:pointer;
}

p {
    font-size: 1em;
    text-align: justify;
}

p.en {
    text-align: left;
}

.desktop {
    display:block;
}
.mobile {
    display:none;
}
.tablet {
    display:none;
}

.zh-sans {
    font-family: "Noto Sans TC", sans-serif;
    font-weight:300;
}

.cn-sans {
    font-family: "Noto Sans SC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

sup {
    font-size:0.625rem;
}

p sup{
    font-size:0.625rem;
}

h5, h6 {
    font-weight: 400;
}

h6 sup{
   font-size:0.5rem;
}
/* ===== commen ======= */
.imgshadow {
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}

.landscapeCover {
    display:none;
}

/* header */ 

header {
    position: fixed;
    width: 100%;
    z-index:10000;
    background:linear-gradient(180deg, rgba(43, 61, 67, 0.8) 10%, transparent);
    transition:0.5s all;
}

header.noshow{
    display:none;
}

header.active{
    /*background:linear-gradient(180deg, rgba(33, 47, 52, 1) 10%, transparent);*/
    background: linear-gradient(180deg, rgba(43, 61, 67, 0.95) 10%, rgba(43, 61, 67, 0.8) 50%);
    box-shadow: 2px 1px 8px #000;
}


.nav{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 4%;
}

header.active .nav{
    backdrop-filter: blur(3px);
}

.nav-content{
    margin-top:2rem;
    display:inline-flex;
    gap:1.5em;
    justify-content: center;
}

.nav-content .salesbtn_wp{
    font-size:0.875em;
    width:28px;
    display: block;
}

.nav-content .salesbtn_wp li a{
    color:#fff;
}

.nav-content .salesbtn_wp li img{
    width:28px;
}



.logo_wp{
    padding-top:1.5rem;
    padding-bottom:1rem;
    transition:1.2s ease-in-out;
    
}

.active .logo_wp{
    padding-top:0.7rem;
    padding-bottom:0.5rem;
    
}

.logo_wp img{
    width:15%;
    transition:1.2s ease-in-out;
}

.active .logo_wp img{
    width:10%;
}

.burgerMenu {
     cursor: pointer;
}

.burgerMenu .line{
    width:28px;
    height:2px;
    background-color:#fff;
    margin-bottom:6px;
    cursor: pointer;
}

.menu_panel {
    position: fixed;
    width: 25%;
    height: 100%;
    top: 0;
    right: -30%;
    z-index: 1000;
    transition: all 0.8s ease-In-Out;
}

.menu_panel.active {
    right: 0; 
}

.blur-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(59, 89, 100, 0.8);
    z-index: 1;
}

.menu_box {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5em;
}

.navbtn {
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin-bottom: 6em;
    transition:0.5s ease-in;
}

.navbtn li{
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.navbtn li h2{
    font-size:1.4em;
    color:rgba(255, 255, 255, 0.5);
    transition:0.3s ease-in-out;
    letter-spacing: 0.05em;
}


.navbtn.en li h2{
    font-size:1.3em;
    letter-spacing: 0.1em;
    transform: translateX(0px);
}

.navbtn li h2:hover {
    color:#abb6ba;
    transform: translateX(10px);
}

.navbtn li h2.zh-sans {
    letter-spacing: 0.1em;
    transition:all 0.3s ease-in;
}

.navbtn li a h2 {
    color:rgba(255, 255, 255, 1);
}

.language_bar{
    display: flex;
    position: absolute;
    width: calc(100% - 10em);
    bottom: 5em;
    gap: 2.5em;
}

.language_bar::before{
    content:'';
    width:100%;
    height:2px;
    background-color:#fff;
    position:absolute;
}

.language_bar li{
    padding:5px 0;
}

.language_bar li a{
    color:#fff;
    font-size: 1.0rem;
    font-family: 'Noto Sans TC';
}

.language_bar li a:hover{
    color:#abb6ba;
}

.close-btn {
    position:absolute;
    z-index:5;
    top:2em;
    right:2em;
    cursor: pointer;
    width:24px;
}

/* ===== main wrapper ===== */

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



.opening-modal {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:10001;
}

.disclaimerbox {
    width: 100%;
    max-width: 1000px;
    background-color: #182C33;
    height: 60vh;
    padding:5rem 4rem;
    padding-top:9rem;
}

.disclaimerbox .projectlogo {
    position: absolute;
    width: calc(100% - 8rem);
    text-align: center;
    top: 2rem;
}

.disclaimerbox .projectlogo img{
    width:25%;
    max-width:150px;
}

.disclaimerbox p{
    width:100%;
    height:80%;
    font-size:0.825rem;
    line-height:1.8;
    color:#fff;
}

.disclaimerbox p.zh-sans{
    font-family: "Noto Sans TC", sans-serif;
    font-weight:300;
}

.disclaimerbox h2{
    color:#CEAF70;
    margin-bottom: 1rem;
    font-weight:300;
}

.disclaimerbox .close {
    margin-top:2rem;
    float:right;
}

.disclaimerbox .close button span{
    text-transform: uppercase;
    color: #CEAF70;
    padding-left: 5px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
   
}

/* ===== Animation ======== */
.opening-ain {
    position:fixed;
    width:100%;
    height:100vh;
    top:0;
    left:0;
    z-index:5;
}
.v-container{
    width:100%;
    height:100vh;
    overflow:hidden;
}

.v-container .animation_wp{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}

.v-container .animation_wp video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-container {
    position:absolute;
    width:100%;
    bottom:12%;
    
}

.text-container.noshow{
    display:none;
}

.text-container h3{
    text-align: center;
    color:#b5e9dc;
    font-size:1.8rem;
    font-weight:normal;
    letter-spacing:0.1em;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
  font-weight: 300;

}

.text-container h3.tc{
    font-family: "Noto Sans TC", sans-serif;
}

.indcator {
    position:absolute;
    bottom: 0;
    left: 50%;
    /*transform: translateX(-50%);*/
    color: #fff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    z-index:1;
    opacity:1;
    transition:0.5s ease-in-out;
}

.indcator.noshow {
    opacity:0;
}

.indcator h5 {
    text-transform: uppercase;
    margin-bottom: 1.5em;
    color:#fff;
    transform: translateX(-50%);
    text-shadow:1px 1px 5px #000;
}

.indcator .downline {
    width:2px;
    height:65px;
    background-color:rgba(255, 255, 255, 0.1);
    overflow:hidden;
}

.lines {
    height:65px;
    background-color:#fff;
    animation: scroll 2.4s infinite cubic-bezier(0.54, 0, 0, 0.99);
}

@keyframes scroll {
    0% {
        transform: translate3d(0, -100%, 0);
    }
    85% {
        transform: translate3d(0, 98%, 0);
    }
    100% {
        transform: translate3d(0, 100%, 0);
    }
}

.disclaimer_btn {
    position:absolute;
    left:4%;
    bottom:30px;
    display:flex;
    align-items: center;
    
}

.disclaimer_btn .dot{
    width:6px;
    height:6px;
    border-radius: 50%;
    background-color: #fff;
    margin-right:5px;
    cursor:pointer;
}

.disclaimer_btn h6{
    color:#fff;
    font-weight:400;
    cursor:pointer;
}

.pop {
    position: absolute;
    bottom: 5em;
    width: 300px;
    left: 3%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity:1;
    transition:0.5s ease-in-out;
   
} 

.pop.noshow{
    opacity:0;
}

.pop p {
    color:#fff;
    font-size:0.675em;
    padding:10px;
    text-align:justify;
    height:150px;
}

#landing_anima p.p-content-dis img{
    width:10px;
}
/* ====== home - section ======= */
.home_app{
   background-color:#fff;
}
.land_wrapper.noshow {
    opacity:0;
    transition:0.5s ease-in;
}

.land_wrapper {
    opacity:1;
}

.homelanding {
    position:relative;
    width:100%;
    height:100vh;
}

.homeland {
    width:100%;
    height:100vh;
}

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


.section_wp {
    /*display:none;*/
    position:relative;
}
section {
    position:relative;
    width:100%;
    min-height:100vh;
    color:#fff;
    background-color: #354e55;
}

section.location{
    background: linear-gradient(0deg, rgb(24 44 51) 50%, rgb(75 102 109) 100%);
    min-height:1vh;
    padding-top:120px;
    padding-bottom: 250px;
    padding-left:5%;
    padding-right:5%;
}

section.location.en {
    background: linear-gradient(0deg, rgb(19 29 33) 50%, rgb(47 66 73) 100%);
}

section.location.tc {
    background: linear-gradient(0deg, rgb(20 37 43) 50%, rgb(29 52 60) 100%);
}

section.club {
    background: linear-gradient(-150deg, rgb(24 44 51) 60%, rgb(64 89 95) 110%);
    min-height:1vh;
    padding-bottom:168px;
    padding-left:5%;
    padding-right:5%;
}

section.club.en{
    background: linear-gradient(-150deg, rgb(19 29 33) 60%, rgb(47 66 73) 110%);
}

section.club.tc {
    background: linear-gradient(-155deg, rgb(20 37 43) 60%, rgb(64 89 95) 110%);
} 

section.design {
    background: linear-gradient(-45deg, rgb(24 44 51) 55%, rgb(64 89 95) 110%);
    min-height:1vh;
}

section.design.en{
    background: linear-gradient(-45deg, rgb(19 29 33) 55%, rgb(47 66 73) 110%);
}

section.design.tc{
    background: linear-gradient(-38deg, rgb(20 37 43) 56%, rgb(64 89 95) 111%);
}

.section_content {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.location .section_content {
    min-height:1vh;
}

.design .section_content {
    padding-top:calc((100vh - 800px)/2);
    padding-bottom:calc((100vh - 800px)/2);
    gap:6.2em;
    min-height:1vh;
    padding-top:0;
    padding-bottom:100px;
    padding-left:5%;
    padding-right:5%;
}
.img__container{
    max-width: 650px;
    width:100%;

}

.img__container.location {
    max-width:945px;
    max-height:570px;
    position:relative;
    z-index:1;
}

.img__container.location img{
    width:100%;
    height:100%;
    object-fit: contain;
}

.img__container.location img.nightimg{
    position:relative;
}

.img__container.location .img_caption{
    position: absolute;
    bottom: 8%;
    right: 5%;
  
}


.img__container.location .img_caption span{
    font-size: 0.67em;
}

.img__container.location .label{
    position:relative;
    width:100%;
    opacity:1;
    transition:0.5s;
}

.img__container.location .label.noshow{
    opacity:0;
}

.img__container.clubhouse{
    max-width:600px;
}

.bg__img.frame{
    position:absolute;
    top:-5.5em;
    left:-6em;
    z-index:0;
    transition:0.5s ease-in;
}

.left_container, .right_container {
    position:relative;
    z-index:1;
}

.design .right_container{
    margin-top:6%;
}

.design .right_container .img__container{
    width:70%;
    margin-top:2.5em;
}

.img__container img{
    width:100%;
}

.text__container {
    width:100%;
    max-width:430px;
    margin-bottom:5%;
    transition:0.5s ease-in;

}

.text__container.location {
    max-width:360px;
    margin-bottom:25%;
}

.text__container.design {
    margin-bottom:25%;
    margin-left:20px;
}

.club .section_content{
    gap:6.2em;
    min-height:1vh;
}

.club .text__container{
    margin-left:0;
    margin-bottom:25%;
}

.text__container .title h1{
    font-size:2.8rem;
    letter-spacing: 0.15em;
}

.title h1.en{
    letter-spacing: 0.05em;
    line-height: 1.2;
    font-weight: 300;
}

.text__container .title.home h1 {
  color:#fff;
  font-weight: 400;
  font-size:2.6em;
  letter-spacing: 0.2em;
}

.text__container .title.home h1.en{
    letter-spacing: 0.05em;
    font-weight: 300;
    line-height: 1.2;
}


.text__container .text_box{
    margin-top:1.5em;
    margin-bottom:3em;
    line-height: 1.8;
    font-size: 1rem;
    letter-spacing: 0.1rem;
}

.text__container .text_box p.en{
    font-size: 0.825rem;
    letter-spacing: 0.02rem;
}

.text__container .button {
    display: flex;
    align-items: center;
}

a .button{
    color:#fff;
}

.button .btn_icon {
    width: 40px;
    height: 40px;
    border: 1px solid #CEAF70;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button h4{
    margin-left: 15px;
    font-size: 1rem;
    letter-spacing: 0.12em;
    color:#CEAF70;
}

.button h4.en{
    font-size: 0.875em;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

.color_box {
    position:absolute;
    width:40%;
    height:70%;
    background-color:#3B5964;
    z-index:0;
}

.color_box.location {
    bottom:0;
    left:50%;
}

.color_box.design {
    bottom:0;
    left:0;
}

.disclaimer_btn.page {
    position:absolute;

}

.dis_pop_box {
    position: absolute;
    z-index: 5;
    bottom:5%;
    left: 0%;
    width: 100%;
    max-height: 100px;
    overflow: hidden;
    background-color: rgba(12, 33, 42, 1);
    padding-left: 5%;
    padding-right:5%;
    padding-top:20px;
    padding-bottom:20px;
}

.dis_pop_box.page{
    bottom:0;
    height:100%;
}

.dis_pop_box.noshow{
    opacity:0;
    display:none;
}

.dis_pop_box p{
    font-size: 0.67rem;
    color: #fff;
    height:100%;
    word-break: break-all;
}

.dis_pop_box p.en{
    word-break:break-word;
}

.genel_closebtn{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.genel_closebtn i{
    font-size:1.2rem;
    color:#fff;
}

.img__container .img_caption{
    position: absolute;
    bottom: 12%;
    right: 5%;
  
}

.img__container.clubhouse .img_caption {
    bottom:8%;
}

.img__container .img_caption.design_s{
    bottom:12%;
    right:7%;
}

.img__container .img_caption.design_l{
    bottom:8%;
}

.img__container .img_caption span{
    font-size: 0.67em;
}

.banner_txt.en{
    width:auto;
    max-width:40%;
}

/* ====== location - section ======= */
.img_caption h6 {
    font-weight: 400;
    text-shadow: 1px 2px 3px #000;
}
.location section {
   /* background-color:#46535b;*/
   background-color:rgba(20, 37, 43, 1);
}
.location .banner_txt {
    top:18%;
    left:unset;
    right:4%;
    width:28%;
    max-width:580px;
    transition:all 0.5s ease-in;
}


.location .banner_txt.en{
    width:auto;
    max-width:40%;
}

.banner_txt h2.en{
    letter-spacing: 0.05em;
    text-shadow:2px 2px 8px #333;
    font-size:2.8rem;
}

.location .banner_txt h2.en{
    width:100%;
    line-height:1.2;
}

.topbanner .dis_pop_box.page.banner{
    background-color: rgba(12, 33, 42, 0.95); 
}

.location .section_content {
    gap:6.2em;
}

.location .info_content .title h1{
    font-size:2.6rem;
    letter-spacing: 0.1em;
    font-weight:400;
    color:#CEAF70;
}

.location .info_content .title h1.en{
    letter-spacing: 0.05em;
}

.location .info_content p.en{
    font-size:0.875em;
    letter-spacing: 0.02em;
}

.location .info_content{
    flex-direction: column;
    width: unset;
    align-items: flex-start;
    gap: 1.5em;
    max-width: unset;
    color:#fff;
}

.location .info_content .title{
    width:100%;
}

.location .info_content.surounding .title {
    padding-bottom:1.5rem;
}

section.transport_map {
    /*background-color:#47535a;*/
    background-color:rgba(20, 37, 43, 1);
}

.transport_map .section_content{
    width:100%;
    padding:5%;
    height:100vh;
    padding-right:0;
    padding-top:0;
    padding-bottom:0;
    gap:0;
}

.info_content.transport{
    flex-direction: column;
    width: unset;
    align-items: flex-start;
    gap: 1.5em;
    max-width: unset;
    position:relative;
    z-index:1;
}

#transportline_btn h4{
    color:#716763;
    letter-spacing: 0.05em;
}

.transport_map .img_wp{
    position:relative;
    width: 60%;
    max-width: unset;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.transport_map .img_wp .dot_animation {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
}

.transport_map .img_wp .transport_map{
    position:relative;
    width:100%;
    height:100%;
    z-index:0;
}

.transport_map .img_wp .transport_map img{
    width:100%;
    height:100%;
    object-fit: contain;
}

.transport_map .img_wp .transport_legend{
    position: absolute;
    right: 0;
    bottom:calc(3% + 30px);
    width: 30%;
    padding: 10px;
    padding-bottom:1px;
    background-color: rgba(5, 5, 5, 0.2);
    border-radius: 8px;
}


.transport_map .img_wp .caption{
    position: absolute;
    right: 0;
    bottom: 30px;
}

.location .info_content p{
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.05em;
    max-width: 530px;
}

.color_box.transport{
    background-color: #CBCBCB;
    z-index: 0;
    right: 0;
    height: 100%;
}

.location .popup {
    position:fixed;
    background-color: rgba(59, 89, 100, 0.8);
    width:100%;
    height:100%;
    z-index:10000;
    display:flex;
    justify-content: center;
    align-items: center;
    top:0;
}

.location .popup.noshow{
    display:none;
}

.location .popup .popup_container {
    width:60%;
    max-width:1200px;
    background-color:#ECEBE4;
    display:flex;
    justify-content: center;
    align-items: center;
    gap:0.5em;
    position:relative;
    padding:5em;
}

.location .popup .popup_container p{
    font-size: 2em;
    font-weight: 300;
    min-width: 350px;
}

.location .popup .popup_container .img_wp.legend{
    width:24%;
    margin-top:1em;
}

.closeBtn_timeline {
    position:absolute;
    right:-30px;
    top:-30px;
    padding:5px;
    width:28px;
}

.info_content.map p{
        margin-bottom:1rem;
}

.transport_map .img_big {
    width:100%;
}

.transport_map .button{
    display:flex;
    align-items: center;
    cursor:pointer;
}

.transport_map .button .btn_icon{
    border-color: #716763;
}

.img_big img{
    width:100%;
    max-width:650px;
}

.transport .img_small {
    position:relative;
}

.transport .img_small .img_caption {
    position:absolute;
    bottom:4%;
    right:15px;
}

.transport .img_small .img_caption h6{
    font-weight:400;
    text-shadow: 1px 2px 3px #000;
}

.dis_pop_box.page.transport {
    background-color: rgba(12, 33, 42, 1);
}


/*===== location map ======*/
.location_map .section_content{
    flex-direction: row-reverse;
    padding:5%;
    height: 100vh;
    padding-top:0%;
    padding-bottom:0%;
    padding-left:0;
    gap:0;
}

.location_map .section_content .info_content.map{
    width:40%;
    padding-left:2rem;
}

.location_map .section_content .info_content.map .list_for_d {
    width:100%;
    max-width:500px;
    height:50vh;
}

.location_map .section_content .info_content.map .list_for_d .map_list_info{
    margin-bottom:1.5rem;
}

.map_list_info ul.list_btn_wp{
    display:flex;
    gap:2.5rem;
}

.list_btn_wp li{
    width:50px;
    height:50px;
    border-radius: 50%;
    background-color: #cbcbcb;
    display:flex;
    align-items:center;
    justify-content: center;
    padding:10px;
    border:3px solid #fff;
    cursor: pointer;
}

.list_btn_wp li.mapbtn:hover{
    background-color:#394459;
}

.list_btn_wp li.mapbtn.actived {
    background-color:#394459;
}

.list_btn_wp li.mapbtn.school.actived {
    background-color:#9585ac;
}

.list_btn_wp li.mapbtn.culture.actived {
    background-color:#3B74A4;
}

.list_btn_wp li.mapbtn.fun.actived {
    background-color:#C18C92;
}

.list_btn_wp li.mapbtn.park.actived {
    background-color:#4E6C29;
}

.list_btn_wp li.mapbtn.business.actived {
    background-color:#AB876F;
}

.list_btn_wp li.mapbtn.food.actived {
    background-color:#da9a34;
}


.list_map {
    position:relative;
    width:100%;
    min-height:48vh;
}

.list_map .list_wp {
    position:absolute;
    display:none;
    width: 100%;
    max-width: 500px;
    height:100%;
}

.list_map .list_wp.actived{
    display:block;
}

.list_map .list_wp .list_container{
    height:100%;
}

.list_container .p-content.schoollist{
    height:100%;
}

.list_map .list_wp img{
    width:100%;
}

.list_map .list_wp h3{
    letter-spacing: 0.1rem;
    font-size: 1rem;
}

.list_map .list_wp .dividing_line{
    width:100%;
    height:1px;
    background-color: #fff;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.list_map .list_wp ul{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
}

.list_map .list_wp ul li{
    display: flex;
    align-items: center;
    gap: 10px;
}

.list_map .list_wp ul li .num {
    width: 21px;
    height: 21px;
    text-align: center;
    font-size: 0.625rem;
    padding: 5px 0;
    line-height: 1.01;
    border-radius: 50%;
    border: 0.5px solid #fff;
}

.list_map .list_wp ul li h5{
    font-weight: 300;
    width:calc(100% - 21px);
}

.list_map .list_wp ul.en li h5 {
    font-size:0.75rem;
    width: calc(100% - 22px);
}

.list_map .list_wp p{
    font-size:0.85rem;
}

.schoolGP .num{
    background-color: #9988B0;
}

.culturelGP .num{
    background-color: #3B74A4;
}

.funGP .num{
    background-color:#C18C92;
}

.parkGP .num{
    background-color:#4E6C29;
}

.businessGP .num{
    background-color:#AB876F;
}



.f-panzoom {
    width:60%;
    height:100%;
    background-color: #14252b;
}

.f-panzoom__content.map{
    width:100%;
    height:100%;
}

.mapContainer {
    width:100%;
    height:100%;
    overflow:hidden;
    position: relative;
}

.img_wp.mapContainer {
   /* background-color:#46535b;*/
    background-color:rgb(20, 37, 43);
}

.tool_btn {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    left: 7%;
    bottom:calc(30px + 2rem);
    gap: 10px;
    align-items: center;
    cursor: default;
}

.zoomBtn {
    padding: 8px;
    color: #fff;
    font-size: 20px;
    border-radius: 5px;
    background-color: #3B5964;
    box-shadow: 1px 1px 6px #333;
}

.compass {
    width:50px;
    height:50px;
}

.compass img{
    width:100%;
}

.zoomBtn.InfoBtn img{
    width:20px;
    height:20px;
}

.f-panzoom .legend {
    position: absolute;
    width: 230px;
    padding: 10px;
    background-color: rgba(225, 225, 225, 0.8);
    bottom: calc(30px + 2rem);
    left:calc(8% + 50px);
    border-radius: 5px;
    padding-top:15px;
    padding-right:15px;
    cursor: default;
}

.f-panzoom .legend.en {
    width: 28%;
    max-width: 300px;
    padding: 15px 10px;
}

.f-panzoom .legend_closebtn{
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 5px 5px;
    background-color:#182C33;
    border-radius: 999px;
    display: flex;
    cursor:pointer;
}

.f-panzoom h6{
    position: absolute;
    bottom: 3%;
    right:2rem;
}

.map_wp {
    width:100%;
    position:relative;
    height:100%;
    /*transform:scale(1);*/
    /*cursor: move;*/
    cursor:grab;
    user-select: none;
}

.map_wp .map_bg{
    position:relative;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
}

.map_wp .map_bg.circle{
     position:absolute;
}

.map_wp .map_bg.project{
     position:absolute;
}

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

.map_wp .maplist{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:none;
    user-select: none;
    z-index:1;
}

.map_wp .maplist.actived{
    display:inline;
}

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

.dis_pop_box.page.map {
    background-color: rgba(12, 33, 42, 1);
}

section.living .section_content {
    padding:5%;
    align-items: center;
    min-height:100vh;
    gap:2rem;
    background: linear-gradient(160deg, rgb(20 37 43) 50%, rgb(64 89 95) 100%);
}

.living .section_content .info_content.living {
    margin-bottom:0rem;
    width:40%;
    align-items: flex-end;
}



.living .section_content .info_content.living .img_big{
    margin-top:1rem;
    position:relative;
}

.living .section_content .info_content.living .img_big img{
    max-width:750px;
    height:100%;
    object-fit: cover;
}

.living .info_content.living .img_big.ss_img{
    max-height:158px;
}

.living .info_content.living .img_big.ss_img .img_caption {
    position: absolute;
    right: 10px;
    bottom: 4%;
}

.living .info_content.living .img_big.bb_img .img_caption {
    position: absolute;
    right: 25px;
    bottom: 12%;
}

.living .section_content .img_wp{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 45%;
    max-width: 550px;
    margin-top:0%;
    transition:0.3s ease-in-out;
}

.living .section_content .info_content.living p{
    width: 100%;
    padding-right: 15%;
    max-width: 100%;
}

.living .section_content .info_content.living .img_wp{
    flex-direction: row-reverse;
    width: 100%;
    gap: 1rem;
}

.living .section_content .img_wp .img_small {
    width:100%;
    position:relative;
}

.living .section_content .img_wp .img_small.top .img_caption{
    position: absolute;
    right: 8%;
    bottom: 8%;
}

.living .section_content .img_wp .img_small.bottom {
    width:70%;
    padding-left:5px;
}

.living .section_content .img_wp .img_small.bottom .img_caption{
    position: absolute;
    right: 4%;
    bottom: 5%;
}

.living .section_content .img_wp .img_small img {
    width:100%;
}

section.surounding {
    background: linear-gradient(20deg, rgb(20 37 43) 50%, rgb(64 89 95) 100%);
}

.surounding .section_content{
    flex-direction: row-reverse;
    padding: 5%;
    align-items: center;
    min-height:100vh;
}

.surounding .section_content .info_content.surounding .img_big{
    margin-top:1rem;
    position:relative;
}

.surounding .section_content .info_content.surounding .img_big img{
    max-width:800px;
}

.surounding .section_content .info_content.surounding .img_big .img_caption{
    position: absolute;
    right: 10px;
    bottom: 4%;
}

.surounding .section_content .img_wp{
    margin-bottom:10%;
    width:30%;
    transition:0.3s ease;
}

.surounding .section_content .img_wp .img_small.left {
   position:relative;
}

.surounding .section_content .img_wp .img_small.left .img_caption{
    position: absolute;
    right: 8%;
    bottom: 12%;
}

section.school {
    background: linear-gradient(-170deg, rgb(20 37 43) 30%, rgb(29 52 60) 100%);
}

.school .section_content {
    min-height:100vh;
    padding:5%;
}

.schoollist_wp {
    display: flex;
    font-size: 1em;
    margin-top:2rem;
}

.list_group.one{
    padding-right:20px;
}

.list_group.two{
    padding-left:20px;
    padding-right:20px;
    border-left:1px solid #716763;
    border-right:1px solid #716763;
}

.list_group.three{
    padding-left:20px;
}

.list_group h4{
    margin-bottom:15px;
    color:#CEAF70;
    font-weight: 500;
}

.list_group h4.en{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.list_group ul{
    margin-bottom:2em;
    max-width:250px;
}

.list_group ul.en{
    max-width:220px;
}

.list_group ul li {
    margin-bottom:10px;
    font-size:0.875em;
}

.list_group ul.en li{
    font-family: "Poppins", sans-serif;
    font-size:0.75rem;
}

.school .img_wp .img_big {
    padding-left:15%;
    position:relative;
    padding-top:3%;
}

.school .img_wp .img_big .img_caption{
    position: absolute;
    right: 10px;
    bottom: 5%;
}


.school .img_wp .img_small {
    margin-top:1.5em;
    width:70%;
    position:relative;
    max-width: 480px;
}

.school .img_wp .img_small .img_caption{
    position: absolute;
    right: 10%;
    bottom: 15%;
}

/* ====== club - section ======= */
.topbanner {
    width:100%;
    height:100vh;
    overflow:hidden;
    position:relative;
}

.background {
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
}

.background img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner_txt{
    position: absolute;
    top: 20%;
    left: 4%;
     width:28%;
    max-width:580px;
    transition:all 0.5s ease-in;
}

.banner_txt h2{
    font-size: 2.6rem;
    letter-spacing: 0.2em;
    color: #fff;
    font-weight:500;
}

.topbanner .clubname{
    position: absolute;
    right: 4%;
    bottom: 14%;
    display: flex;
    flex-direction: column;
}

.topbanner .clubname .top_txt{
    transform: translateX(-80px);
}

.topbanner .clubname .bottom_txt {
        padding-top: 0.5rem;
}

.banner_caption {
    position: absolute;
    right: 4%;
    bottom: 3%;
    color: #fff;
}

.banner_caption h6{
    font-weight:400;
}

.club .disclaimer_btn h6{
    padding-right: 15px;
}

.club .disclaimer_btn span{
    color: #fff;
    font-size: 0.67em;
}

.dis_pop_box.club.page {
    background-color: rgba(12, 33, 42, 1);
}

.dis_pop_box.plan.page {
     background-color: rgba(12, 33, 42, 1);
}

section.clubfloorplan{
    background-color: #DBDBDB;
    display: flex;
    justify-content: center;
    /*background: linear-gradient(140deg, rgba(189, 194, 196, 1) 40%, rgb(221, 221, 221, 1) 100%);*/
    background: linear-gradient(140deg, rgb(20 37 43) 20%, rgb(29 52 60) 100%);
}

.clubfloorplan .section_content{
    flex-direction: column;
    padding:6% 5%;
    gap:1rem;
    padding-bottom:2%;
}

.clubfloorplan .title.club {
    width:100%;
    max-width:1400px;
}

.clubfloorplan .title.club h1 {
    font-size:2.5rem;
    letter-spacing: 0.05em;
    color:#CEAF70;
    font-weight:400;
}

.clubfloorplan .title.club h1 span{
    font-family: "amandine", sans-serif;
}

.clubfloorplan .title.club h1 sup{
    font-size:0.75rem;
    vertical-align: text-top;
}

.clubfloorplan .plan_wp {
    width:100%;
    max-width:1400px;
    padding:0 6%;
}

.info_content {
    display: flex;
    width: 100%;
    max-width: 1400px;
    justify-content: flex-start;
    align-items: center;
    color: #555;
}

.info_content.clubhouse{
    align-items: flex-start;
    justify-content: center;
}


.title h1{
    font-size:3rem;
}

.clubfloorplan .title h1 {
    text-align: center;
}

.clubfloorplan .title h1.en{
    font-size: 2.5rem;
    font-family: "amandine", sans-serif;
}
.info_content.clubhouse p{
    color:#fff;
}
.pointer.color{
    fill:#C1AB9A;
}

.btn_list {
    width:70%;
    margin-left:65px;
}

.btn_list ul{
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
}

.btn_list ul li{
    display: flex;
    align-items: center;
    margin-right: 4rem;
    width: 160px;
    margin-top: 15px;
    font-weight: 500;
    cursor:pointer;
    color:#fff;
}

.btn_list ul li .num{
    width: 32px;
    height: 32px;
    border: 0px solid #fff;
    background-color: #fff;
    border-radius: 50%;
    justify-content: center;
    display: flex;
    align-items: center;
    color:#68534f;
    position: relative;
}

.btn_list ul li:hover .num {
    background-color: #C1AB9A;
}

.btn_list ul li .bgicon{
    position:absolute;
    width:100%;
    height:100%;
}

.btn_list ul li .bgicon img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.btn_list ul li span{
    margin-left:20px;
}

.pop_wp {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10001;
    background-color:rgba(43, 61, 67, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
}

.pop_wp.noshow{
    display:none;
}

.photo_container {
    position:relative;
    width: 100%;
    max-width:1200px; 
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color:#fff;
}

.pop_wp .closeBtn_club{
    position: absolute;
    top: -35px;
    right: -35px;
}

.photo_container .img_container {
    width: 100%;
    max-width: 1200px;
    background-color: #917661;
    height:65vh;
    position:relative;
}

.photo_container .img_container img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
}

.photo_container .text_container {
    width:100%;
    padding: 3.5% 5%;
    background-color: #917661;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text_container h3.name{
    font-size: 1.35rem;
    padding-right: 20px;
}

.text_container h3 sup{
    font-size: 0.75rem;
    font-weight: 300;
}

.text_container p{
    width: 65%;
    font-size: 0.875rem;
    border-left: 1px solid #AC8B7F;
    padding-left: 20px;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.pop_wp .photo_container .img_container .img_caption{
    position: absolute;
    bottom: 15px;
    right: 10px;
}

.pop_wp .disclaimer_btn.img{
    left:4%;
    bottom:30px;
}

.pop_wp .dis_pop_box.plan.img {
    width: 100%;
    background-color: rgb(12 33 42);
    height:100%;
    left: 0;
    bottom: 0;
}

/* ====== design page  ======= */

.projectdesign .banner_txt {
    width:33%;
    max-width:700px;
}
.projectdesign .banner_txt h2 {
    text-shadow: 2px 2px 5px #333;
} 

.projectdesign .banner_txt h2.en{
    line-height:1.5;
} 

.projectdesign .disclaimer_btn span{
    color:#fff;
    font-size:0.67rem;
    padding-left:10px;
}

.designphotos {
    display: flex;
    justify-content: center;
   /* padding: 0 5%;*/
    background-color: #CBCBCB;
    /*background: linear-gradient(160deg, rgba(189, 194, 196, 1) 40%, rgba(221, 221, 221, 1) 100%);*/
    background: linear-gradient(160deg, rgb(20 37 43) 50%, rgb(55 77 82) 110%);
    overflow:hidden;
}

.designphotos .section_content{
    position: relative;
    width: 100%;
    max-width: 1400px;
    /*padding: 6.5% 0%;*/
    gap:6.2em;
}

.design_info_content {
    position: relative;
    width: 30%;
    left: 0%;
}

.design_info_content .title {
    margin-top:2em;
}
.design_info_content .title h1{
    color:#CEAF70;
    font-size:2.5rem;
    letter-spacing: 0.05em;
    font-weight:400;
}

.design_info_content p{
    color:#fff;
    margin-top: 1.5em;
    font-size: 1rem;
    line-height:1.8;
}

.design_info_content p.en{
    font-size:0.925rem;
}

.design_info_content .img_small{
    margin-top:3rem;
    position:relative;
}

.design_info_content .img_small img{
    width:100%;
}

.design_info_content .img_small .imgEffect{
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);

}

.design_info_content .img_small .img_caption {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-shadow: 1px 1px 5px #000;
}

.designphotos .section_content .img_wp{
   width:70%;
   margin-top:5.5rem;
   position:relative;
}

.designphotos .section_content .img_wp .img_big img{
    width:100%;
    max-width:unset;
}

.designphotos .section_content .img_wp .img_title {
    position:absolute;
    bottom:10px;
    right:1rem;
}

.dis_pop_box.page.design{
    bottom:0;
    height:100%;
}



.designphotos .section_content .img_wp .img_title h5{
    text-align: right;
    color:#fff;
    font-size: 0.75rem;
    font-weight: 300;
    font-family: 'Noto Sans TC';
}

section.designhome {
    background: linear-gradient(20deg, rgb(20 37 43) 50%, rgb(55 77 82) 110%);
    display:flex;
    justify-content: center;
}

.designhome .section_content{
    flex-direction:column;
    width:100%;
    max-width:1400px;
    padding-top:6%;
    padding-bottom:3%;
    gap:2rem;
}

.designhome .section_content .top_container {
    display:flex;
    gap:2rem;
    align-items:center;
}

.designhome .section_content .top_container .left__container {
    position:relative;
    transform: translateY(-30px);
}

.designhome .section_content .top_container .left__container h6{
    bottom:15px;
    right:10px;
    position:absolute;
}

.designhome .section_content .top_container .right__container .section_txtcontent {
    padding-left:21%;
}

.designhome .section_content .top_container .right__container .section_txtcontent .title h1 {
    color: #CEAF70;
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    font-weight: 400;
}

.designhome .section_content .top_container .right__container .section_txtcontent .title h1 sup{
    vertical-align: top;
    letter-spacing: 0;
}

.designhome .section_content .top_container .right__container .section_txtcontent p{
    margin-top: 1.5em;
    font-size: 1rem;
    line-height: 1.8;
}

.designhome .section_content .top_container .right__container .section_txtcontent p.en{
    font-size:0.925rem;
}

.designhome .section_content .top_container .right__container .img_small{
    width: 75%;
    margin-top: 2rem;
    transform: translateY(30px);
    position:relative;
}

.designhome .section_content .top_container .right__container .img_small h6{
    position: absolute;
    bottom: 40px;
    right: 40px;
    text-shadow: 1px 1px 5px #000;
}

.designhome .section_content .bottom_container {
    width: 100%;
    max-width: 1400px;
    margin-top:1rem;
}

.designhome .section_content .bottom_container ul{
    display:flex;
    width: 100%;
    justify-content: space-evenly;

}

.designhome .section_content .bottom_container ul.en_txt{
    gap:2.5rem;
   
}

.designhome .section_content .bottom_container ul li.line{
   border-left:1px dashed #CEAF70;
}

.designhome .section_content .bottom_container ul li.line.tablet{
    display:block;
}

.designhome .section_content .bottom_container ul.group{
    display:inline-block;
    font-size:1rem;
    letter-spacing: 0.1rem;
}

.designhome .section_content .bottom_container ul.group.en {
    letter-spacing: 0.05em;
}

.designhome .section_content .bottom_container ul.group li{
    display: flex;
    align-items: center;
    gap: 10px;
    margin:1rem 0;
}

.designhome .section_content .bottom_container ul.group.en li{
    align-items: baseline;
    margin:0.5rem 0;
}


.designhome .section_content .bottom_container ul.group .icon{
    display:flex;
}

.designhome .section_content .bottom_container ul.group li.lastpart {
    align-items: flex-start;
}

.designhome .section_content .bottom_container ul.group li.lastpart .icon{
    padding-top:3px;
}

.designhome .section_content .bottom_container .title_img {
    margin-bottom: 1rem;
    height:50px;
    overflow:hidden;
}

.designhome .section_content .bottom_container .title_img sup{
    vertical-align: top;
    padding-left: 5px;
    color:#CEAF70;
}


section.designplans {
    background-color: #CBCBCB;
    /*background: linear-gradient(20deg, rgba(189, 194, 196, 1) 40%, rgba(221, 221, 221, 1) 100%);*/
    background: linear-gradient(160deg, rgb(20, 37, 43) 50%, rgb(64 89 95) 100%);
    display:flex;
    justify-content: center;
}

section.designplans .container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top:4%;
    gap:2rem;
    
}

section.designplans .container .top_container {
    display:flex;
    justify-content:space-between;
    align-items: center;
}

section.designplans .container .top_container h1{
    font-size:2.5rem;
    color:#CEAF70;
    letter-spacing: 0.08em;
    font-weight:400;
}

section.designplans .container .top_container p{
    width:55%;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

section.designplans .container .top_container p.en{
    line-height:1.5;
    font-size:0.925rem;
}

section.designplans .container .top_container .floorbtn_container h4{
    font-weight:300;
    margin-bottom:10px;
    letter-spacing: 0.5rem;
}

section.designplans .container .top_container .floorbtn_container h4.en{
    letter-spacing: 0.05rem;
}

section.designplans .container .top_container .floorbtn_container ul{
    display:flex;
    gap:10px;
}

section.designplans .container .top_container .floorbtn_container ul li{
    display:flex;
    width:38px;
    height:38px;
    justify-content: center;
    align-items: center;
    border:1px solid #CEAF70;
    border-radius: 6px;
    font-size:0.75rem;
    cursor:pointer;
    color:#CEAF70;
}

section.designplans .container .top_container .floorbtn_container ul li.active{
    background-color:#537563;
    border:0px;
    transition:all 0.3s ease-in-out;
}

section.designplans .container .plans_container {
    width:100%;
    display:flex;
    padding:1rem;
    background:linear-gradient(135deg, rgba(47, 66, 73, 1)50%, rgba(20, 37, 43, 0.2) 100%);
    border-radius: 10px;
    gap:2rem;
    justify-content: space-between;
    align-items: end;
    position:relative;
    min-height:60vh;
    height:75%;
    overflow:hidden;

}

section.designplans .container .plans_container.inactived {
    display:none;
}

section.designplans .container .plans_container h1 {
    position:absolute;
    font-size:5rem;
    color:#C1AB9A;
    top:2rem;
    left:3%;
    line-height: 1;

}

section.designplans .container .plans_container h1 span{
    font-size:1.25rem;
    letter-spacing: 0.2rem;
}

section.designplans .container .plans_container h1 span sup{
    font-family: "poppins", sans-serif;
}

section.designplans .container .plans_container h1.en span {
    letter-spacing: 0.02rem;
}

section.designplans .container .plans_container .left_container {
    width:22%;
    margin-left:1%;
}

section.designplans .container .plans_container .left_container h5{
    padding-bottom:1rem;
}

section.designplans .container .plans_container .left_container .notesbtn{
   position:relative;
   left:unset;
   bottom:unset;
   margin-top:1.5rem;
   display:flex;
   align-items: center;
   cursor:pointer;
}

.notesbtn .dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 5px;
    cursor: pointer;
}

section.designplans .container .plans_container .left_container .floorplan_info {
    padding:1.5rem 6%;
    background-color:rgba(64, 89, 95, 0.5);
    position:relative;
}

section.designplans .container .plans_container .left_container .floorplan_info h4{
    font-weight:400;
}

section.designplans .container .plans_container .left_container .floorplan_info .unit_size {
    margin-top:1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

section.designplans .container .plans_container .left_container .floorplan_info .p-content {
    width:100%;
    height:250px;
}

.floorplan_info .p-content .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color:rgba(39, 56, 63, 0.75);
}

section.designplans .container .plans_container .left_container .floorplan_info .unit_size .data_group .flatNum{
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #537563;
    border-radius: 50%;
}

section.designplans .container .plans_container .left_container .floorplan_info .unit_size .data_group .flatNum h4{
    color:#C1AB9A;
}

section.designplans .container .plans_container .left_container .floorplan_info .unit_size .data_group ul{
    margin-top:5px;
    border-left:1px solid #C1AB9A;
    padding-left:5px;
}

section.designplans .container .plans_container .left_container .floorplan_info .unit_size .data_group ul li {
    color:#C1AB9A;
}

section.designplans .container .plans_container .left_container .floorplan_info .unit_size .data_group ul li:first-child {
    margin-bottom:5px;
    font-size:0.875em;
}

section.designplans .container .plans_container .left_container .floorplan_info .unit_size .data_group ul li h6{
    font-weight:300;
    letter-spacing: 0.05em;
}

.plans_container .left_container .floorplan_info::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color:#C1AB9A;
    top: -10px;
    left: 0;
}

.plans_container .left_container .floorplan_info::after {
    content:"";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #C1AB9A;
    bottom: -10px;
    left: 0;
}

section.designplans .container .plans_container .right_container{
    width:70%;
    height:100%;
    padding:0 1rem;
    overflow:hidden;
}

section.designplans .container .plans_container .right_container .plans_box{
    width:100%;
    height:100%;
}

section.designplans .container .plans_container .right_container .plans_box img{
    width:100%;
    height:100%;
}

section.designplans .container .plans_container .right_container .button{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    cursor:pointer;
    position:absolute;
    bottom:1px;
    right:0px;
}

section.designplans .container .plans_container .right_container .plan_container_active {
    width:100%;
    height:100%;
}

section.designplans .container .plans_container .right_container .plan_container_active.inactived{
    display:none;
}


.designplans .pop__container {
    display:none;
    position: fixed;
    top:300px;
    background-color: rgba(20, 37, 47, 0);
}

.designplans .pop__container.actived {
    display: flex;
    position: fixed;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 37, 47, 0.95);
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition:all 0.5s ease-in;
}

.designplans .pop__container .plan_disclaimer_box {
    width: 100%;
    max-width: 1000px;
    height: 50vh;
    background-color: #182C33;
    padding: 20px 5%;
    font-size: 0.75rem;
    line-height: 1.8;
    display: flex;
    align-items: center;
    position:relative;
}

.designplans .pop__container .plan_disclaimer_box.noshow{
    display:none;
}

.designplans .pop__container .plan_disclaimer_box .p-content-dis {
    height:80%;
}

.designplans .pop__container .plan_disclaimer_box .p-content-dis img{
    vertical-align: middle;
    padding:0 5px;
}

.designplans .pop__container .plan_disclaimer_box .p-content-dis a{
    color:#fff;
    text-decoration: underline;
    cursor:pointer;
}

.designplans .pop__container .plan_disclaimer_box.notebox {
    display:none;
}

.designplans .pop__container .plan_disclaimer_box.notebox.show{
    display:flex;
}

.designplans .pop__container .plan_disclaimer_box .pop_closebtn {
    position: absolute;
    top: 1rem;
    right: 1.8rem;
    font-size:1.2rem;
    cursor:pointer;
}

/* ====== media page ======= */

.media .topbanner {
    /*background-color: #454C58;*/
    background: linear-gradient(30deg, rgb(20 37 43) 10%, rgb(64 89 95) 100%);
}

.topbanner .film_wp {
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:5%;
    padding-top:2%;
    gap:1em;
}

.film_wp .title h1{
    font-weight:100;
    color:#CEAF70;
    font-size:2.5rem;
    letter-spacing: 0.05em;
    font-weight: 400;
}

.film_wp .title h1.zh-sans{
    font-weight: 400;
    letter-spacing: 0.2em;
} 
/*
.film_wp img{
    max-width:1100px;
}*/

.video_container {
    width:100%;
    max-width:1180px;
    max-height:664px;
    overflow:hidden;
    padding:0%;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:1%;
}



.video_container .playBtn{
    position:absolute;
    margin: auto;
    z-index:2;
    cursor:pointer;
}

.media .video_popup {
    position:absolute;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    top: 0;
    padding: 5% 15%;
    overflow: hidden;
    background-color: #182C33;
    display:none;
}

.media .video_popup video{
    width:100%;
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.media .video_popup .close_btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width:23px;
    height:23px;
    cursor: pointer;
}

section.gallery{
    padding: 3% 0;
    background-color: #DBDBDB;
    background: linear-gradient(150deg, rgba(20, 37, 43, 1) 10%, rgba(64, 89, 95, 1) 100%);
}

.gallery .section_content{
    flex-direction: column;
    min-height:calc(100%);
    margin-top:3%;
}

.gallery h1.section__title {
    font-size:2.5rem;
    margin-bottom:2.5%;
    margin-top:1em;
    color:#CEAF70;
    font-weight:400;
}

.gallery .gallery-wp {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:20px;
}


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

.img_wrapper .caption {
    position:absolute;
}

.img_wrapper .caption h6{
    color:#C1AB9A;
}

    .gallery-wp .swiper-button-next::after, 
    .gallery-wp .swiper-button-prev::after {
      content:"";
    }

.color_box.gallery{
    background-color: #CBCBCB;
    bottom: 0;
    right: 0;
    width: 45%;
    height: 60%;
}

.enlarge_btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 48px;
    cursor: pointer;
}

.gallerypop {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 10000;
    background-color: rgba(43, 61, 67, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
}

.gallerypop .img_wp{
    width: auto;
    max-width: 1600px;
    height: 80vh;
    overflow: hidden;
    position:relative;
}

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

.gallerypop .img_wp h6{
    position:absolute;
    right:4%;
    bottom:20px;
    text-shadow:1px 1px 5px #000;
}

.closeBtn_gallery {
    position: absolute;
    top: 2em;
    right: 2em;
    z-index:5;
}

.closeBtn_gallery button{
    width: 28px;
    padding: 15%;
}

.gallerypop.noshow {
    display:none;
}

.dis_pop_box.page.gallery {
    bottom:0;
}

/* ====== sales infomation ======= */
.main-wrapper.sales{
    background-color: #dbdbdb;
    background: linear-gradient(30deg, rgb(20 37 43) 10%, rgb(64 89 95) 100%);
}
.sales .sales_container {
    position: relative;
    width: 100%;
    padding: 5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index:0;
    
}

.sales h2 {
    font-size: 2.5em;
    color: #CEAF70;
    letter-spacing: 0.05em;
    margin-bottom: 2.5rem;
    margin-top:1.5rem;
    text-transform: uppercase;
}

.sales ul.sales_menu{
    position:relative;
    width: 100%;
    max-width: 1060px;
    display: flex;
    justify-content: space-around;
    font-size: 1em;
    text-transform: capitalize;
    padding-bottom: 8px;
    padding-left:5px;
    padding-right:5px;
    border-bottom: 1px solid #555;
    gap:1%;
}

.sales ul.sales_menu.en{
    font-size:0.875rem;
}

.sales_menu::after{
    content:'';
    position:absolute;
    width:100%;
    height:3px;
    background-color:#716763;
    bottom:-6px;
    left:0;
}

.sales_menu li a{
    color:#CEAF70;
    letter-spacing: 0.02em;
}


.sales_menu li a:hover{
    color:#C1AB9A;
}

.sales_menu li.actived a {
    color:#e5bd9e;
}

.sales .data_container {
    width:100%;
    max-width: 1060px;
    height:50vh;
    margin-top:1rem;
}

.sales .data-content{
    display:inline-block;
    width:100%;
}

.sales .iframebox{
    display:none;
    width:100%;
}

.sales .iframebox.actived{
    display:block;
}

.sales .iframebox .files_frontend {
    width:100%;
    text-align:center;
    padding:5px 0;
}

.sales .iframebox .files_frontend .nofile{
    margin-top:0em;
    color:rgba(255, 255, 255, 0.2);
    font-size:1.5rem;
    letter-spacing: 0.1em;
    padding:5rem 20px;
    background-color:rgba(20, 37, 43, 0.2);
}

.sales .iframebox .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px;
    border-bottom: 1px dashed #716763;
    gap:0.5em;
}

.sales .iframebox .row:hover{
    background-color:rgba(20, 37, 43, 0.8);
}

.sales .iframebox .row .showtime{
    color:#fff;
    width:100px;
    font-size:0.875em;
}

.sales .iframebox .row .column:nth-child(2){
    width:calc(100% - 100px - 10%);
}

.sales .iframebox .row .column.name{
    width:90%;
}

.sales .iframebox .row .column.link{
    width:unset;
}

.sales .iframebox .row .column a{
    display:flex;
    gap:0.5rem;
}

.iframebox .row .column p{
    color:#fff;
    text-align: left;
}

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

.iframebox .row .column a{
    color:#716763;
    text-transform: uppercase;
    font-size: 0.875em;
}

.iframebox .row .column a .icon {
    font-size:1.2rem;
    color:#C1AB9A;
}

/* ====== copyright =====*/ 
.main-wrapper.page {
    background-color: #CBCBCB;
}

.page .page_container {
    position: relative;
    width: 100%;
    padding: 5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page .page_container h2{
    font-size: 2.2em;
    color: #716763;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.text_contents_wp {
    width: 100%;
    max-width: 960px;
    padding: 1.5rem;
    font-size: 1em;
    line-height: 1.5;
    color:#555;
}

.text_contents_wp p{
    margin-bottom:1rem;
}

.text_contents_wp p a{
    color:#C1AB9A;
}

.text_contents_wp ul.txt_ul_Num{
    list-style: auto;
    padding-left: 20px;
}

.text_contents_wp ul li{
    margin-bottom:0.5rem;
}

.text_contents_wp .txt_ul {
    padding:5px 15px;
}


/* ====== footer ======= */
footer {
    background-color:#fff;
    padding-top:0em;
    padding-bottom:0em;
}
.footer_noshow{
    display:none;
}

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

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

.pop-footer-dis .disclaimerbox{
    position:relative;
    padding:5.5rem 4.5rem;
}

.pop-footer-dis .disclaimerbox .closeBtn {
    position:absolute;
    top:-30px;
    right:-30px;
    width:20px;
}
.pop-footer-dis .disclaimerbox p{
    height:100%;
}

.text_contents_wp.p-content {
    height: calc(100% - 5rem);
    color: #fff;
    font-size: 0.825rem;
    padding:0;
    text-align: justify;
}

#masterfooter .row{
    padding: 0 5%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column-reverse;
    gap: 1.5rem;
}


.left-wrap {
    width:70%;
    color:#777;
    text-align: center;
}

.hotlineInfo h5{
    font-size:0.89rem;
    line-height:1.8;
    margin-bottom:1rem;
    font-weight:300;
}

.hotlineInfo p{
    font-size:0.78rem;
    line-height:1.5;
    margin-bottom: 1.5rem;
    letter-spacing:0.05em;
    text-align: center;
}

.hotlineInfo .footer_btn_wp{
    display:flex;
    justify-content: center;
    align-items:center;
    margin-bottom: 1rem;
}

.hotlineInfo .footer_btn_wp li{
    font-size:0.89em;
    padding:5px 5px;
}

.footer_btn {
    cursor:pointer;
}

.footer_btn a{
    color:#777;
}

.policy-Btn-container{
    display:flex;
    flex-direction: column;
}

.policy-Btn-container li{
    display:flex;
    padding-right:20px;
    justify-content: center;
}

.policy-Btn-container li h5{
    margin-bottom:0;
}

.right-wrap .logo-container li{
    width:100%;
    max-width:500px;
}
/* ====== Responsive ======= */
@media only screen and (max-width: 1600px) { 
    .menu_panel {
        width:30%;
        right:-35%;
    }

    /* ==== location ===== */
    .transport_map .section_content {
        padding-right:5%;
    }

    .location .info_content .title h1 {
        font-size:2.2rem;
    }

    .location .info_content p {
        font-size:0.825rem;
    }

    .location .info_content p.en {
        font-size:0.825rem;
    }

    .map_list_info ul.list_btn_wp{
        gap:2rem;
    }

    .transport_map .img_wp .transport_legend {
        width:35%;
    }

    .list_map {
        min-height:45vh;
    }

    .surounding .section_content .img_wp {
        width:40%;
    }

    /* ==== club ==== */
    .clubfloorplan .section_content {
        padding-bottom:6%;
    }
    .clubfloorplan .title.club h1 {
        font-size:2.2rem;
        margin-top:1rem;
    }

    .pop_wp .closeBtn_club {
        width:20px;
        height:20px;
        right:-30px;
        top:-30px;
    }

    /* ==== design ==== */
    .designphotos .section_content {
        padding-left:3%;
        padding-right:3%;
    }

    .design_info_content .title h1 {
        font-size:2.2rem;
    }

    .design_info_content p {
        font-size:0.825rem;
    }

    .design_info_content p.en {
        font-size:0.825rem;
    }

    .designhome .section_content {
        padding-left:3%;
        padding-right:3%;
    }
    .designhome .section_content .top_container .right__container .section_txtcontent .title h1 {
        font-size:2.2em;
    }
    .designhome .section_content .top_container .right__container .section_txtcontent p {
        font-size:0.825rem;
    }
    .designhome .section_content .top_container .right__container .section_txtcontent p.en{
        font-size:0.825rem;
    }

    .designhome .section_content .top_container .left__container{
        width:95%;
    }

    .designhome .section_content .bottom_container ul.group {
        font-size:0.9rem;
    }
    section.designplans .container {
        padding-left:3%;
        padding-right:3%;
    }

    section.designplans .container .plans_container {
        height:68%;
    }

    section.designplans .container .top_container h1 {
        font-size:2.2rem;
    }

    section.designplans .container .top_container p {
        font-size:0.825rem;
    }

    section.designplans .container .top_container p.en {
        font-size:0.825rem;
    }

    section.designplans .container .plans_container h1 {
        font-size:3.5rem;
    }

    section.designplans .container .plans_container .left_container .floorplan_info .p-content {
        height:180px;
    }

    /* ==== gallery ==== */

    .video_container {
        padding-left:5%;
        padding-right:5%;
    }

    .gallerypop .img_wp {
        max-width:1200px;
    }
}

@media only screen and (min-width:821px) and (max-width: 1024px) and (orientation: portrait) { 
    .landscapeCover {
        position: fixed;
    z-index: 10002;
    width: 100%;
    height: 100dvh;
    display:block;
    background-color: #182C33;
    }

    .landscapeCover .rotate-wp{
        width:100%;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .landscapeCover .rotate-wp img{
        width:10%;
    }

    .landscapeCover .rotate-wp h5{
        font-size: 1rem;
        margin: 15px 0;
        color: #fff;
    }
}
   

@media only screen and (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) {
    .menu_panel {
        width:40%;
        right:-45%;
    }

    .navbtn {
        gap:2rem;
    }

    .disclaimerbox {
        width:90%;
        padding-top:8rem;
    }

    /***===== landing page =======***/

    .location .section_content{
        gap:2rem;
    }

    section.location{
        padding-left:5%;
        padding-right:5%;
        
    }

    .container_location .left__container{
        width:70%;
    }

    .text__container .title.home h1 {
        font-size:2.2rem;
    }

    .club .section_content{
            padding-left: 5%;
            padding-right: 5%;
            gap: 2rem;
    }

    .club .text__container{
        margin-bottom:5%;
    }

    .club .section_content .right_container {
        width:50%;
    }

    .design .section_content{
        padding-left: 5%;
        padding-right: 5%;
        gap: 2rem;
    }

    .img__container .img_caption.design_s {
        width: 80%;
        line-height: 1.2;
    }

      /***===== location page =======***/

    .main-wrapper.location .info_content .title h1{
        font-size:2rem;
    }

     .main-wrapper.location .info_content p{
        font-size:0.75rem;
     }

   
     .transport_map .section_content {
        padding-left:3%;
        padding-right:3%;
     }

     .transport_map .section_content .img_wp{
        width:75%;
     }

     .transport_map .section_content .img_wp .transport_legend{
        width:55%;
     }

     .map_list_info ul.list_btn_wp {
        gap:1.5rem;
     }

     .list_btn_wp li {
        width:40px;
        height:40px;
        border:2px solid #fff;
     }

     
     .list_map .list_wp ul {
        grid-template-columns: repeat(1, 1fr);
     }

     .list_container .p-content.schoollist {
       height: calc(100% - 40px - 24px - 32px);
     }

     .living .info_content.living .img_big.ss_img {
        max-height:128px;
     }

     .surounding .section_content {
        padding:3%;
     }

     .surounding .section_content .img_wp {
        width:55%;
     }


     /***===== club page =======***/
     .main-wrapper.club .clubfloorplan .section_content {
        gap:1rem;
     }
     .clubfloorplan .title h1.en {
        font-size:2rem;
     }
     .club .topbanner .banner_txt h2.en {
        line-height:1.2;
     }

      .main-wrapper.club .clubfloorplan .section_content .info_content .btn_list{
        width:80%;
      }
      .main-wrapper.club .clubfloorplan .section_content .info_content .btn_list ul li {
        margin-right:3rem;
      }

       .pop_wp.clubpop .photo_container {
        padding-left:5%;
        padding-right:5%;
       }

      .pop_wp.clubpop .photo_container .closeBtn_club {
        top:-35px;
        right:30px;
        width:20px;
        height:20px;
      }
     /***===== design page =======***/
     .projectdesign .banner_txt.en {
        width:40%;
     }
     .projectdesign .banner_txt h2.en {
        line-height:1.2;
     }

     .design_info_content .title h1 {
        font-size:2rem;
     }

     .main-wrapper.projectdesign .section_content p{
        font-size:0.75rem;
     }

     .main-wrapper.projectdesign .designphotos .section_content {
        padding-left:5%;
        padding-right:3%;
        gap:2rem;
     }

      .main-wrapper.projectdesign .designphotos .section_content .design_info_content {
        width:40%;
      }

      .designhome .section_content {
        padding-left:5%;
        padding-right:5%;
      }

     
    .designhome .section_content .top_container .right__container .section_txtcontent .title h1 {
        font-size:2rem;
    }

    .designhome .section_content .top_container .right__container .section_txtcontent p {
        font-size:0.75rem;
    }

    .designhome .section_content .top_container .right__container .section_txtcontent p.en{
        font-size:0.75rem;
    }

    .designhome .section_content .bottom_container ul.en_txt{
       
    }

    .designhome .section_content .bottom_container ul.group {
        font-size:0.825rem;
    }

    section.designplans .container .top_container h1{
        font-size:2rem;
    }

    section.designplans .container .top_container p{
        font-size:0.75rem;
    }

     section.designplans .container .top_container p.en{
        font-size:0.75rem;
    }

    section.designplans .container {
        padding-left:3%;
        padding-right:3%;
    }

    section.designplans .container .plans_container{
        height:70%;
    }

    section.designplans .container .plans_container .left_container{
        width:24%;
    }
    section.designplans .container .plans_container .left_container .floorplan_info .p-content{
        height:200px;
    }
    section.designplans .container .plans_container h1{
        font-size:3rem;
    }
    /* ==== gallery ==== */
    .film_wp .title h1 {
        font-size:2rem;
    }
    .gallery h1.section__title{
        font-size:2rem;
    }
    .gallerypop .img_wp {
        max-width:1000px;
    }

}


@media only screen and (min-width: 601px) and (max-width:820px) and (orientation: portrait) {
    .desktop {
        display:none;
    }
    .mobile {
        display:block;
    }

    .main-wrapper {
        background-color: #14252b;
    }

    .logo_wp img{
        width:25%;
    }
    .active .logo_wp img{
        width:18%;
    }

    .menu_panel {
        width:80%;
        right:-85%;
    }

    .navbtn.en li h2 {
        font-size:1.5em;
    }

    .language_bar {
        gap:5em;
    }

    .section_content{
        flex-direction: column;
    }

    /***===== landing page =======***/
    .disclaimerbox {
        width: 80%;
        height: 80vh;
    }

    .animation_wp video.desktop{
        display:none;
    }

    .animation_wp video.mobile{
        display:none;
    }

    .animation_wp video.tablet{
        display:block;
    }

    .homeland.tablet {
    display:block;
    }

    .homeland.mobile{
        display:none;
    }

    .text__container .title.home h1{
        font-size:2.2rem;
    }

    .location .section_content.container_location{
        flex-direction: column;
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .text__container.location {
        margin-bottom: 0;
        max-width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }

    section.club {
            padding-top: 2rem;
    }

    .club .section_content{
        flex-direction: column-reverse;
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .club .section_content .text__container{
            margin-bottom: 0;
            margin-left:0;
            max-width: 100%;
            padding-right: 5%;
            padding-left: 5%;
            padding-top:2%;
    }

    .img__container.clubhouse{
        max-width: 500px;
        margin-left: 100px;
        margin-right: 0;
    }

    section.design {
        padding-top: 4rem;
    }

    .design .section_content{
        flex-direction: column;
        padding-left: 5rem;
        padding-right: 5rem;
        padding-top: 2rem;
        padding-bottom: 50px;
        gap: 2rem;
    }

    .design .img__container{
        max-width: 520px;
        margin-right: 100px;
    }

    .design .right_container {
        margin-top:0;
    }

    .text__container.design {
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 15%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .design .right_container .img__container{
        width: 60%;
        margin-top: 2.5em;
        margin-right: 0;
        margin-left: 40%;
    }

    /***===== location page =======***/
    .location .banner_txt{
        width:57%;
    }
    .location .banner_txt.en{
        max-width:60%;
    }

    .location .banner_txt.en h2{
        line-height:1.5;
    }

    .location .topbanner .enlarge_Btn{
        top:unset;
        position: absolute;
        right: 4%;
        bottom: 5vh;
        background-color: #3B5964;
        display: flex;
        padding: 5px;
        border-radius: 4px;
    }
    .location .topbanner .img_enlarge_wp {
        position:fixed;
        z-index:10001;
        top:0;
        left:0;
        width:100%;
        height:100%;
        display:none;
    }

     .location .topbanner .img_enlarge_wp .f-panzoom.zoombanner{
        width:100%;
     }

     .location .topbanner .img_enlarge_wp .f-panzoom.zoombanner img{
        width:100%;
        height:100%;
        object-fit: cover;
     }

     .location .topbanner .img_enlarge_wp .f-panzoom.zoombanner .control_wp {
        position:absolute;
        bottom:10px;
        display: flex;
        gap:10px;
     }

     .control_wp .zoomBtn.Z-OUT{
        transform:rotateZ(90deg);
     }

     .transport_map .section_content {
        height:auto;
        padding:5rem 0rem;
     }

     .info_content.transport {
        width:100%;
        padding-left:calc(5rem + 5%);
        padding-right:calc(5rem + 5%);
     }

     .location .info_content .title h1 {
        font-size:2.2rem;
     }

     .location .info_content p {
        max-width:100%;
     }

     .transport .img_small {
        width:100%;
     }

     .transport .img_small img{
        width:100%;
     }

     .transport_map .img_wp {
        width:100%;
     }

     .transport_map .img_wp .transport_legend {
        right:5%;
        bottom:calc(30px + 0%);
     }

     .transport_map .img_wp .caption {
        bottom:0;
        right:5%;
     }

     .location_map .section_content{
        flex-direction: column;
        padding: 5rem 0;
        gap: 2rem;
        height: auto;
     }

     .location_map .section_content .info_content.map {
        width: 100%;
        padding-left: calc(5rem + 5%);
        padding-right: calc(5rem + 5%);
     }

     .f-panzoom {
        width: 100%;
        position: relative;
        height: 65vh;
     }

     .f-panzoom .map_bg.tc img.mobile{
        display:none;
     }
     .f-panzoom .map_bg.tc img.desktop{
        display:block;
     }

     .f-panzoom .legend.en {
        width:38%;
        max-width:500px;
     }

     .list_for_m {
        width: 100%;
        padding-left: calc(5rem + 5%);
        padding-right: calc(5rem + 5%);
     }

     .map_list_info ul.list_btn_wp {
        justify-content:space-between;
     }

     .list_map {
        min-height:35vh;
     }

     .list_map .list_wp {
        max-width:100%;
        margin-top:2rem;
     }

     .list_map .list_wp ul {
        grid-template-columns: auto;
        height:27vh;
     }

     .list_map .list_wp ul li{
        margin-bottom:10px;
     }

     .list_map .list_wp ul.en li h5{
        font-size:0.875em;
     }

     

     section.living .section_content {
        flex-direction: column-reverse;
        padding: 5rem;
     }

     .living .section_content .info_content.living{
        width:100%;
        padding:0 5%;
     }

     .living .section_content .info_content.living p{
        padding:0;
     }

     .living .section_content .info_content.living .img_wp {
        max-width:100%;
        margin-top:1rem;
     }

     .living .section_content .info_content.living .img_big.bb_img {
        margin-top:0;
     }

     .living .section_content .img_wp {
        width:100%;
        max-width:100%;
     }

     .living .section_content .img_wp .img_small.top{
        width:90%;
        margin-left:15%;
     }

     .living .info_content.living .img_big.bb_img .img_caption{
        right:12%;
     }

     .surounding .section_content {
        flex-direction: column;
        padding:5rem;
        gap:2rem;
     }

     .surounding .section_content .info_content.surounding {
        width:100%;
        flex-direction: column-reverse;
     }

      .surounding .section_content .info_content.surounding .info_text_wp{
        padding:0 5%;
      }

      .surounding .section_content .img_wp{
        width:100%;
        margin:0;
      }

     .surounding .section_content .img_wp .img_small.left img{
        width:100%;
     }

     .school .section_content {
        padding:5rem;
     }

     .school .section_content .img_wp{
        width:100%;
     }

    /***===== club page =======***/
    .banner_txt {
        width:60%
    }
    .banner_txt.en{
        max-width:80%;
    }

    .clubfloorplan .section_content {
        flex-direction:column;
        gap:2.5rem;
        padding-left:3rem;
        padding-right:3rem;
    }

    .clubfloorplan .title.club h1{
        font-size:2.2rem;
        text-align: left;
        max-width:80%;
        margin-left:7%;
    }

    .clubfloorplan .plan_wp {
        padding:0;
    }

    .btn_list {
        margin-left:7%;
        width:90%;
    }

    .btn_list ul li{
        margin-right:2rem;
    }

    .photo_container .img_container {
        height:40vh;
    }

    .pop_wp .closeBtn_club {
        top:0;
        right:0;
        z-index:2;
        background-color:#d09c7e;
        padding:8px;
        width:35px;
    }

    /***===== design page =======***/
     .projectdesign .banner_txt{
        width:63%;
    }
    .projectdesign .banner_txt.en{
        width:100%;
    }

    .designphotos .section_content {
        padding:5rem;
        gap:4em;
    }

    .design_info_content {
        width:100%;
    }

    .design_info_content .title h1 {
        font-size:2.2rem;
    }

    .designphotos .section_content .img_wp{
        width:100%;
        margin-top:0rem;
    }

    .designphotos .section_content .img_wp .img_for_d_m{
        position:relative;
        width:100%;
        margin-bottom:3rem;
    }

    .designphotos .section_content .img_wp .img_for_mobile{
        position:relative;
    }

    .designphotos .section_content .img_wp .img_for_mobile img{
        width:100%;
    }
    .designphotos .section_content .img_wp .img_for_mobile .img_caption{
        position:absolute;
        bottom:15px;
        right:10px;
    }

    .designhome .section_content {
        padding:5rem;
    }

    .designhome .section_content .top_container .right__container .img_small{
        width:100%;
    }

    .designhome .section_content .top_container .right__container .img_small h6{
        bottom:55px;
        right:55px;
    }

    .designhome .section_content .top_container .right__container .section_txtcontent {
        padding:0
    }

    .designhome .section_content .top_container .right__container .section_txtcontent .title h1{
        font-size:2.2rem;
    }

    .designhome .section_content .bottom_container ul {
        display:grid;
        grid-template-columns: 1fr 1px 1fr;
        gap:5rem;
    }

    .designhome .section_content .bottom_container ul.en_txt {
        display:grid;
        grid-template-columns: 1fr 1px 1fr;
    }

    .designhome .section_content .bottom_container ul li.line.tablet {
        display:none;
    }

    section.designplans .container {
        padding:5rem;
    }

    section.designplans .container .top_container{
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    section.designplans .container .top_container p{
        width:100%;
    }

    section.designplans .container .top_container .floorbtn_container ul{
        gap:15px;
    }

    .designplans .pop__container .plan_disclaimer_box {
        width:80%;
    }

    section.designplans .container .plans_container{
        flex-direction: column-reverse;
        padding-top: 6rem;
    }

    section.designplans .container .plans_container h1{
        font-size:3rem;
    }

    .enlarge_Btn {
        position:absolute;
        top:1rem;
        width:30px;
        height:30px;
    }

     .enlarge_Btn img{
        width:100%;
     }

    section.designplans .container .plans_container .left_container{
        width:100%;
    }

    section.designplans .container .plans_container .right_container {
        width:100%;
    }

    .button h4{
        font-size:0.875rem;
    }

    .button .btn_icon{
        width:30px;
        height:30px
    }
    
    /***===== media page =======***/
    section.gallery {
        display: flex;
        align-items: center;
    }
    .gallery .section_content {
        margin-top:0;
    }
    .gallery .gallery-wp{
        width:70%;
    }

    .gallerypop .img_wp {
        height:auto;
      }

    /***===== sales page =======***/
    .sales ul.sales_menu.desktop{
        display:none;
    }

    .dropmenu.mobile {
        position: relative;
        width: 90%;
        border-top: 0px solid #716763;
        border-bottom: 1px solid #716763;
    }

     .dropmenu::after {
        content:'';
        position:absolute;
        width:100%;
        height: 3px;
        background-color: #716763;
        bottom: -8px;
    }

    .default_option {
        display:flex;
        justify-content: space-between;
        padding:8px 0;
    }

    .default_option h4{
        text-transform: capitalize;
        color:#CEAF70;
        /*color:#C1AB9A;*/
        font-size: 1.25em;
    }

    .default_option .icon i{
        font-size:30px;
        color:#CEAF70;
    } 

    .sales_sub_menu {
        position:absolute;
        width:100%;
        display:none;
        background-color:#ABB6BA;
        z-index:1;
    }

    .sales_sub_menu.actived {
        display:block;
    }

    .sales_sub_menu li{
        padding:10px 15px;
        text-transform: capitalize;
    }

    .sales_sub_menu li.actived{
        display:none;
    }

    .sales_sub_menu li a{
        display:block;
        color:#454C58;
        width:100%;
    }

     .sales .data_container {
        width:90%;
    }

    .sales .iframebox .row {
        padding:15px 5px;
    }

    .sales .iframebox .row .column:first-child {
        width:90%;
    }


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

/* ====== Mobile ========*/

@media screen and (max-width:480px){
    .desktop {
        display:none;
    }
    .mobile {
        display:block;
    }
    .opening-modal{
        height:100%;
    }
    .disclaimerbox{
        width:90%;
        height:80vh;
        padding:2rem;
        padding-top:6.5rem;
    }

    .disclaimerbox .projectlogo {
        width: calc(100% - 4rem);
    }

    .disclaimerbox .projectlogo img {
        width:40%;
    }

    .pop-footer-dis .disclaimerbox{
        width: 85%;
        padding: 3.5rem 8%;
    }

    .disclaimerbox h2{
        font-size:1.1rem;
        letter-spacing: 0.02em;
    }

    .disclaimerbox p{
        font-size:0.725rem;
        height:75%;
    }

    .disclaimerbox .close {
        margin-top:1.5rem;
    }

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

    /* ==== header ==== */
    .nav {
        padding:0 5%;
    }
    .logo_wp img {
        width:75%;
    }

    .active .logo_wp {
        padding-bottom:0.5rem;
    }

    .active .logo_wp img{
        width:55%;
    }

    .languagebar li {
        padding: 0 10px;
    }
    .logo_wp {
        width:45%;
    }

    .nav-content {
        width:55%;
        margin-top:2.5em;
        justify-content: flex-end;
        transition:all 0.5s ease-in;
    }

    .active  .nav-content {
        margin-top:1.6em;
    }

    .nav-content .salesbtn_wp {
        font-size:0.875em;
        gap:0.8em;
        justify-content: space-between;
    }

    .menu_panel {
        width:80%;
        right:-80%;
    }

    .menu_box{
        padding:1em 2em;
    }

    .navbtn {
        gap:1.5em;
    }

    .navbtn li h2 {
        font-size:1.4rem;
    }

    .language_bar {
        width:calc(100% - 4em);
        bottom:3.5em;
    }

    /* ==== menu ==== */
    .navbtn li h2.zh-sans {
        letter-spacing: 0.2em;
    }

    /* ==== landing ==== */
    .v-container {
        position:absolute;
        width:100%;
        height:100vh;
        
    }

    .text-container {
        bottom:13%;
    }

    .text-container h3 {
        font-size:1.2rem;
    }

    .indcator .downline {
        height:90px;
    }

    .pop {
        width:calc(100% - 6%);
        bottom:3em;
    }

    /* ========= page common ========= */
    .disclaimer_btn {
        bottom:5vh;
    }

    .banner_caption {
        bottom:5vh;
    }

    .banner_caption h6.en{
        max-width:110px;
    }

    .dis_pop_box {
        background-color: rgba(12, 33, 42, 1);
        padding-left:8%;
        padding-right:8%;
    }

    .dis_pop_box.page {
        width:100%;
        bottom: 0;
        padding-left:8%;
        padding-right:8%;
        max-height:150px;
    }

    .topbanner {
        height: calc(100vh - 0px);
        position:relative;
    }

    .topbanner .background {
        height:100vh;
        position:relative;
    }

     .topbanner .background img {
        object-position: center;
    }

    .banner_txt h2 {
        font-size:1.8rem;
    }

     .topbanner .banner_txt{
         width:62%;
     }

     .topbanner .banner_txt.en{
        width: 80%;
        max-width: 80%;
        left: 10%;
     }

    .location .banner_txt {
        width:62%;
    }

    .location .banner_txt.en{
        max-width:80%;
    }

     .banner_txt h2.en{
        font-size:2rem;
        line-height: 1.2;
    }

    .location .banner_txt h2.en{
        font-size:2rem;
       
    }

   .projectdesign .banner_txt h2.en{
        line-height: 1.2;
   }

    .projectdesign .banner_txt {
        width:69%;
    }


    /* ===== home page ===== */
    .section_content {
        flex-direction: column;
    }

    .img__container.location .img_caption {
        bottom:11%;
    }

    .club .section_content {
        flex-direction: column-reverse;
        padding-left:5%;
        padding-right:5%;
        gap:4.2rem;
    }

    .img__container.clubhouse {
        padding-right: 0.55vw;
        width:85%;
        margin-left:15%;
    }

    .club .text__container {
        padding-left:0%;
        padding-right:0%;
        margin-bottom:10%;
    }

    section.club {
        padding-bottom:60px;
    }

    .design .section_content {
        gap:2.2em;
        padding-left:5%;
        padding-right:5%;
        padding-bottom:80px;
    }

    .left_container.design {
        padding-right:2vw;
    }

     .left_container.design .img__container{
        width:85%;
     }

    .text__container.design {
        margin-left:0;
        padding-left:5%;
        padding-right:5%;
    }

    .design .right_container {
        margin-top:0%;
    }

    .design .right_container .img__container{
        width:70%;
        margin-top:5%;
        margin-left:25%;
    }

    .img__container .img_caption.design_s.en{
        width: 200px;
        line-height: 1.2;
    }

    section.location.tc {
        background:linear-gradient(0deg, rgb(20 37 43) 50%, rgb(29 52 60) 100%);
    }

    section.location {
        padding-left:5%;
        padding-right:5%;
        padding-top:60px;
        padding-bottom:80px;
    }

     .location .section_content {
        gap:4.2em;
    }

    .text__container.location {
        padding-left:5%;
        padding-right:5%;
        margin-bottom:10%;
    }

    .text__container .title.home h1{
        font-size:2em;
    }

    .text__container .text_box {
        font-size:0.875rem;
    }

    /* ====== location ====== */
    .main-wrapper.location{
        overflow:hidden;
    }

    .location .topbanner .enlarge_Btn {
        position: absolute;
        right: 4%;
        bottom: 8vh;
        background-color: #3B5964;
        display: flex;
        padding: 5px;
        border-radius: 4px;
    }

    .location .topbanner .img_enlarge_wp {
        position:fixed;
        z-index:10001;
        top:0;
        left:0;
        width:100%;
        height:100dvh;
        display:none;
    }

     .location .topbanner .img_enlarge_wp .f-panzoom.zoombanner{
        width:100%;
     }

     .location .topbanner .img_enlarge_wp .f-panzoom.zoombanner .img_container {
        width:100%;
        height:100%;
     }

     .location .topbanner .img_enlarge_wp .f-panzoom.zoombanner .img_container img{
        width:100%;
        height:100%;
        object-fit:cover;
     }

     .location .topbanner .img_enlarge_wp .control_wp {
        position:absolute;
        bottom:10px;
        display:flex;
        gap:10px;
     }

     .location .topbanner .img_enlarge_wp .control_wp .Z-OUT {
        transform: rotate(90deg);
     }

     .location .topbanner .img_enlarge_wp .control_wp i{
        color:#CEAF70;
     }

    .location section {
        padding-top:60px;
    }
    .location .info_content .title h1 {
        font-size:1.65rem;
        padding:0 5%;
    }

    .location .info_content p {
        font-size:0.875rem;
        padding:0 5%;
    }
    .location .info_content p.en{
        font-size:0.825rem;
    }
    section.transport_map {
        padding-top:60px;
        padding-bottom:100px;
    }

    .transport_map .section_content {
        padding: 0;
        min-height: 100vh;
        height: auto;
        gap:1.5em;
    }

     .transport_map .section_content .info_content.transport {
        padding:0 5%;
     }

    .transport_map .img_wp {
        width: 100%;
        padding-bottom: 1vh;
    }

    .transport_map .img_wp .transport_legend {
        width: 60%;
        bottom: -12%;
        right:5%;
    }

    section.transport_map .img_wp .caption {
        right:5%;
    }

    section.location_map {
        padding-bottom:80px;
    }

    .location_map .section_content {
        flex-direction: column;
        padding:0;
        gap:1.2rem;
        min-height:100vh;
        height:auto;
    }

    .location_map .section_content .info_content.map {
        width:100%;
        padding:0 5%;
    }

     .location_map .f-panzoom {
        width:100%;
        height:610px;
    }

      .location_map .f-panzoom .f-panzoom__wrapper.map {
        width:100%;
        height:100%;
      }

     .f-panzoom__wrapper.map .map_wp .map_bg img {
        width:100%;
        height:100%;
        object-fit:cover;
      }

     .f-panzoom__wrapper.map .map_wp .maplist img {
        object-fit:cover;
      }

    .location_map .f-panzoom .tool_btn {
        left:5%;
        bottom:3%;
    }

    .f-panzoom .legend.noshow{
        display:none;
    }

    .f-panzoom .legend {
        bottom:3%;
    }

    .f-panzoom .legend.en {
        width:70%;
    }

    .f-panzoom h6 {
        bottom:0;
    }

    .compass {
        width:40px;
        height:40px;
    }

    .location_map .list_for_m {
        width:100%;
        padding:0 5%;
    }

     .location_map .list_for_m .map_list_info {
        margin-bottom:1rem;
     }

     .location_map .list_for_m .map_list_info ul.list_btn_wp {
        gap:0.5em;
        justify-content: space-between;
     }

    .location_map .list_for_m .map_list_info .list_btn_wp li {
        width:40px;
        height:40px;
        padding:8px;
     }

      .location_map .list_for_m .list_map {
        min-height:30vh;
        height:auto;
      }

     .location_map .list_for_m .list_map .list_wp ul {
        grid-template-columns: repeat(1, 1fr);
     }

     .location_map .list_for_m .list_map .list_wp ul.p-content {
        height:20vh;
     }

     .location_map .list_for_m .list_map .list_wp ul li{
        padding:5px 5px;
     }

    section.living .section_content {
        flex-direction: column-reverse;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 80px;
    }

    .living .section_content .info_content.living {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .living .section_content .info_content.living p {
        padding-right:5%;
    }

    .living .section_content .info_content.living .img_wp {
        gap:0;
    }

    .living .section_content .info_content.living .img_big.bb_img{
        margin-top:0;
    }

    .living .info_content.living .img_big.ss_img {
        width:100%;
        max-height:120px;
    }

    .living .section_content .info_content.living .img_big.ss_img img {
        height: 100%;
        object-fit: cover;
    }

    .living .section_content .img_wp.right-block {
        width: 100%;
        padding-right: 3%;
        padding-left: 3%;
    }

    .living .section_content .img_wp.right-block .img_small.top {
        width:86%;
        margin-left:14%;
    }

    .living .section_content .img_wp.right-block .img_small.bottom{
        width: 80%;
        padding-left: 2%;
        margin-left:2%;
    }



    .location section.surrounding{
        padding-bottom:6%;
    }

    .surounding .section_content {
        flex-direction: column;
        padding:0 5%;
        gap:2.2rem;
        justify-content: center;
        padding-bottom:80px;
    }

    section.surounding .section_content .info_content.surounding{
        flex-direction: column-reverse;
    }

    .surounding .section_content .img_wp {
        margin-bottom:0;
        width:100%;
    }

    .location .info_content.surrounding {
        padding-bottom:4vh;
    }

    .location section.school {
        padding-bottom: 5vh;
    }

    .location .school .section_content {
        padding-top:0;
        padding-bottom:80px;
        gap:2.2em;
    }

    .school .schoollist_wp {
        flex-direction: column;
        padding-left: 5%;
    }

    .schoollist_wp .list_group ul.en{
            max-width: 280px;
    }

    .school .img_wp .img_small{
        width: 93%;
        margin-top: 2rem;
    }

    .list_group h4 {
        position:relative;
    }

    .list_group.one h4{
        position:relative;
    }

    .list_group h4::after {
        content:"";
        position:absolute;
        width:100%;
        height:1px;
        bottom:-5px;
        background-color:#AB876F;
        left:0;

    }

    .list_group.two {
        padding-left:0;
        border:0;
    }

    .list_group.three {
        padding-left:0;
    }

     /* ===== club ===== */
    section.clubfloorplan {
       padding-top:80px;
       padding-bottom: calc(5vh + 25px);
    }

     section.clubfloorplan .section_content {
        flex-direction: column;
        padding: 8% 5%;
        gap:2.2rem;
     }
    
     .clubfloorplan .section_content .plan_wp {
        padding:0;
        transform: scale(1.1);
     }

    .clubfloorplan .title.club {
        padding-left:5%;
        padding-right:5%;
    }

    .clubfloorplan .title.club.en{
        padding-right:0;
    }

    .clubfloorplan .title.club h1 {
        font-size: 1.65rem;
        text-align: left;
        letter-spacing: 0.1em;
    }

    .btn_list {
        width:100%;
        margin:0;
        padding:0 5%;
    }

    .btn_list ul {
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .btn_list ul li{
        margin-right: 0;
        width:140px;
    }

    .btn_list ul li span{
        margin-left:10px;
    }

    .btn_list ul li .num{
        transform: scale(0.8);
    }

    .clubpop .photo_container .img_container{
        height:35vh;
    }

     .clubpop.pop_wp .closeBtn_club {
        right:0;
        z-index:1;
        top:0;
        background-color: #CEAF70;
        width:25px;
        padding:5px;
    }
    .clubpop .photo_container .text_container {
        padding:5% 8%;
        flex-direction: column;
        align-items: flex-start;
    }

    .clubpop .text_container p {
        width:100%;
        padding-left:0;
        border:0;
        padding-bottom:5%;
        letter-spacing: 0.02rem;
    }

    /* ===== design ======*/
    .main-wrapper.projectdesign{
        overflow:hidden;
    }

     .main-wrapper.projectdesign .designphotos{
        padding-top:60px;
        padding-bottom:80px;
     }

     .designphotos .section_content {
        gap:2.2rem;
     }

     .designphotos .section_content .design_info_content {
        width:100%;
        padding-left:5%;
        padding-right:5%;
     }

     .design_info_content .title {
        margin-top:0;
     }

     .design_info_content .title h1 {
        font-size:1.65rem;
        padding:0 5%;
     }

     .design_info_content p {
        font-size:0.875rem;
        padding:0 5%;
        letter-spacing: 0.05rem;
     }

     .design_info_content p.en{
        font-size:0.825rem;
     }

     .designphotos .section_content .img_wp{
        width:100%;
        margin-top:0;
     }

     .designphotos .section_content .img_wp .img_for_d_m {
        position:relative;
        padding:3%;
     }

     .designphotos .section_content .img_wp .img_for_d_m .img_title {
        right:5%;
        bottom:5%;
     }

     .designphotos .section_content .img_wp .img_for_mobile {
        position:relative;
        padding:5%;
     }

     .designphotos .section_content .img_wp .img_for_mobile img{
        width:100%;
        height:100%;
     }

     .designphotos .section_content .img_wp .img_for_mobile .img_caption{
        position:absolute;
        bottom:10%;
        right:8%;
     }

     .designhome .section_content {
        padding-left:5%;
        padding-right:5%;
        padding-bottom:80px;
     }

     .designhome .section_content .top_container .right__container .section_txtcontent {
        padding:0 5%;
     }

     .designhome .section_content .top_container .right__container .section_txtcontent .title h1 {
        font-size:1.65rem;
     }

     .designhome .section_content .top_container .right__container .section_txtcontent p {
        font-size:0.875rem;
     }

     .designhome .section_content .top_container .right__container .section_txtcontent p.en{
        font-size:0.825rem;
     }

     .designhome .section_content .top_container .right__container .img_small {
        width:100%;
     }

     .designhome .section_content .bottom_container {
        padding:5% 10%;
     }

     .designhome .section_content .bottom_container ul {
        flex-direction: column;
        gap: 10px;
     }

     .designhome .section_content .bottom_container ul.group li {
        letter-spacing: 0.1rem;
        font-size:0.875rem;
     }
     .designhome .section_content .bottom_container .title_img{
        margin-top:1rem;
     }

     .designhome .section_content .bottom_container ul li.line {
        border-bottom: 1px dashed #CEAF70;
     }

     section.designplans{
        padding:5%;
        padding-bottom:80px;
        transition:all 0.3s ease-in;
     }

     section.designplans.mobileHeight {
        height:100vh;
        overflow:hidden;
     }

     section.designplans .container {
        justify-content: flex-start;
     }

     section.designplans .container .top_container {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: 1rem;
     }

   section.designplans .container .top_container h1{
        width: 100%;
        padding: 0 5%;
        font-size: 1.65rem;
   }

   section.designplans .container .top_container p{
        width: 100%;
        padding: 0 5%;
        font-size: 0.875em;
        letter-spacing: 0.06rem;
   }

   section.designplans .container .top_container p.en{
        font-size:0.825rem;
   }

   section.designplans .container .top_container .floorbtn_container {
        padding-left:5%;
   }

   section.designplans .container .plans_container {
        flex-direction: column-reverse;
   }

   section.designplans .container .plans_container h1 {
        font-size:3.2rem;
        top:1rem;
        left:5%;
   }

   section.designplans .container .plans_container .enlarge_Btn.mobile {
        position:absolute;
        top:0.5rem;
        right:0.5rem;
        display:inline;
        width:30px;
        height:30px;
        
   }

   section.designplans .container .plans_container .enlarge_Btn.mobile img{
    width:100%;
   }

   section.designplans .container .plans_container .right_container {
        width:100%;
        padding:0;
        margin-top:5rem;
        height:38vh;
   }

    section.designplans .container .plans_container .right_container .plan_container_active .button .btn_icon {
        width:30px;
        height:30px;
   }

   section.designplans .container .plans_container .right_container .plan_container_active .button h4{
        font-size:0.875rem;
   }

   section.designplans .container .plans_container .left_container {
    width:100%;
   }

   .designplans .pop__container .plan_disclaimer_box {
    width:90%;
    height:80vh;
   }

   .designplans .pop__container .plan_disclaimer_box .pop_closebtn {
    font-size:1.5rem;
    color:#CEAF70;
    top:2%;
    right:5%;
   }

     

    /* ===== media ===== */
    .film_wp .title h1{
        font-size: 1.65rem;
        margin-bottom: 3rem;
    }

    .gallery h1.section__title {
        margin-bottom: 3rem;
        font-size:1.65rem;
    }

     .gallery .gallery-wp .img_wrapper .caption {
        width:100%;
        text-align: center;
    }

     .gallery-wp .swiper-button-prev {
         background-color: rgba(255, 255, 255, 0.2);
        top: calc(50% - 20px);
        left: 0;
        padding: 5px;
     }

    .gallery-wp .swiper-button-next {
        
    background-color: rgba(255, 255, 255, 0.2);
    top: calc(50% - 20px);
    right: 0;
    padding: 5px;
    }

    .gallerypop .img_wp {
        height:40vh;
    }

    .closeBtn_gallery {
        top:1rem;
        right:1rem;
    }

    /* ===== sales ===== */
    .sales ul.sales_menu.desktop{
        display:none;
    }

    .sales .sales_container {
        padding-left: 5%;
        padding-right: 5%;
    }

    .sales h2 {
        font-size: 2em;
        width: 100%;
        padding: 0 5%;
        line-height:1.5;
    }

    .dropmenu.mobile {
        position: relative;
        width: 90%;
        border-top: 0px solid #716763;
        border-bottom: 1px solid #716763;
    }

    .dropmenu::after {
        content:'';
        position:absolute;
        width:100%;
        height: 3px;
        background-color: #716763;
        bottom: -8px;
    }

    .default_option {
        display:flex;
        justify-content: space-between;
        padding:8px 0;
    }

    .default_option h4{
        text-transform: capitalize;
        color:#CEAF70;
        /*color:#C1AB9A;*/
    }

    .default_option .icon i{
        font-size:20px;
        color:#CEAF70;
    } 

    .sales_sub_menu {
        position:absolute;
        width:100%;
        display:none;
        background-color:#ABB6BA;
        z-index:1;
    }

    .sales_sub_menu.actived {
        display:block;
    }

    .sales_sub_menu li{
        padding:10px 15px;
        text-transform: capitalize;
    }

    .sales_sub_menu li.actived{
        display:none;
    }

    .sales_sub_menu li a{
        display:block;
        color:#454C58;
        width:100%;
    }

    

    .sales .data_container {
        width:90%;
    }

    .sales .iframebox .row {
        padding:15px 5px;
    }

    .sales .iframebox .row .column:first-child {
        width:90%;
    }

    /* === pages ==== */
    .page .page_container {
        padding-right:5%;
        padding-left:5%;
        padding-top:6rem;
    }

    .page .page_container h2{
        font-size:1.8em;
        width: 100%;
        padding: 0 5%;
        line-height: 1.2;
    }

    .text_contents_wp {
        font-size:0.875em;
    }

    /* ==== footer ==== */
    .logo-container {
        display:flex;
        justify-content: center;
    }

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

    .left-wrap {
        width:100%;
    }
   
    .hotlineInfo .footer_btn_wp {
        flex-flow:wrap;
    }

}