@media (min-width:992px){
.transparent header::before {opacity: 0;}
.transparent footer::before { opacity: 1; }
.transparent .footer-right:before {opacity: 0;}
}
@media (max-width:1793px){
    .footer-main {
        min-height: 129px;
    }
    .sunset-text { width: 545px; margin-right: auto; position: absolute; top: 140px; left: 180px; text-align: center; }
    .sunset-text h2{ font-size: 62px; letter-spacing: 55px; line-height: 50px; padding: 0 0 52px; }
    .sunset-text .ceremony { letter-spacing: 27px; padding-top: 48px; padding-bottom: 0; }

    body.en .input-submit.desktop-view input[type="submit"] { padding: 6px 57px; }
}
@media (max-width:1550px){
    .pool-img-1 {max-width: 574px;}
    .pool-img-2 {max-width: 454px;}
    footer .footer-left {padding: 0 80px 0 20px;}
    footer .footer-right {max-width: 324px;}

    .sunset-text h2 { font-size: 48px; letter-spacing: 43px; line-height: 50px; padding: 0 0 52px; }
    .sunset-text .ceremony { letter-spacing: 27px; padding-top: 39px; padding-bottom: 0; }
    .sunset-text p { width: 400px; margin: 0 auto; font-size: 21px; line-height: 27px;}
    .sunset-text { width: 545px; margin-right: auto; position: absolute; top: 140px; left: 110px; text-align: center; }
    
}
@media (max-width:1660px){ 
footer#footer {
    background-position: calc(100% - -240px) center;
}
footer .footer-left {padding: 0 70px 0 20px;}

/*--- english page ---*/
body.en .menu-navigation ul li a { font-size: 15px;}
body.en .menu-navigation ul li { margin-right: 7px; margin-left: 7px; }
}

@media (max-width:1450px){ 
    .image-and-text-content {max-width: 37.3%;}
    .image-and-text-img {max-width: 60.2%;}
    .image-and-text-desc {padding-left: 25px; padding-right: 25px;}
    .image-and-text-bg { margin-left: -15px; width: calc(100% + 15px); }

    .pool-images {padding-top:90px;}
    .pool-inner-right {max-width:calc(77% - 10px);}
    .pool-inner-left {max-width: 21%;}
    .pool-img-2 {max-width: 42%;}
    .pool-img-1 {max-width: 53%;}
    .pool-img-inner { margin-right: -15vw; width: calc(100% + 15px); }
    .pool-wrapper-bottom {padding-top:100px;}

    .pool-inner-right-bottom {max-width:calc(77% - 10px);}
    .pool-inner-right-bottom .pool-img-1 {max-width:100%;}
    .pool-inner-left {max-width: 21%; padding-right: 15px;}
    .pool-images .pool-inner-right::before {bottom: -50%;}
    .pool-water { padding-top: 110px; padding-bottom: 0;}
    .pool-wrapper-bottom .pool-img-inner {margin-left: -15px;width: calc(100% + 50vw - 173px);}
    .rainbow-club-before::before {right: -15px;}
    .rainbow-club-desc {padding-top: 128px;}
    .club-coffee-bg {padding-top: 87px;padding-bottom: 60px;}
    .rainbow-club-before::before {bottom: 124px;}
    .purple-box .image-and-text-inner:not(.row-reverse):before {bottom: -84px;}
    .purple-box .image-and-text-inner.row-reverse:before {left: -32px;}

    /* place  code */

    .video-section::after { right: 0; margin: 0; width: 15%; height: 70vw;}
    .video-section::before { right: 10%;}
    .area-cards-section .area-card-box { padding: 0;}
    .area-cards-section .card-iconset .icon-box { padding: 0 12px;}
    .area-cards-section .card-iconset .icon-box span { font-size: 17px; padding: 0px 12px 0 0;}

     /* place code */

     .the-place .image-and-text-content { max-width: 33.2%; width: 100%; text-align: center; }
    .the-place .image-and-text-img { max-width: 59.2%; width: 100%;}
    /*.image-and-text-bg { margin-left: -50vw; width: calc(100% + 50vw - 624px); }*/
    .home-description { padding: 108px 0 112px; text-align: center; }
    footer .footer-left { flex: 1; padding: 0 15px 0 10px; }
    .footer-left .select-box { padding: 7px 143px 0 0; text-align: justify; margin-top: 2px; }
    footer .footer-right { max-width: 340px; width: 100%; padding: 0 10px; }

    .concept-mn .image-and-text-img { /*max-width: 660px;*/ }
    .concept-image-and-text .image-and-text-inner {padding-right: 40px;}
   .concept-mn .image-and-text-bg { width: calc(100% + 22px); margin-left: -22px;}
   .footer-main {min-height: 142px;}
   .the-place .image-and-text-content h2 {font-size: 60px;}
   
   footer .footer-left .footer-box .from-section span {max-width: 135px;min-width: 135px;}
   footer#footer {background-position: calc(100% - -287px) center;}

   .live-section .live-inner {max-width: 730px;}
   .live-section {height: calc(100vh - 150px);}

   /*-- english page design ----*/
   body.en .the-place .image-and-text-content {
    max-width: 33.2%;
}
body.en .input-submit.desktop-view input[type="submit"] { padding: 6px 44px; }
    
}
@media (max-width:1386px){
footer#footer {background-position: calc(100% - -312px) center;}
footer .footer-right {max-width: 225px;}

.sunset-text { width: 450px; margin-right: auto; position: absolute; top: 110px; left: 100px; text-align: center; }
.sunset-text h2 { font-size: 45px; letter-spacing: 35px; line-height: 44px; padding: 1px 0 35px; }
.sunset-text .ceremony { letter-spacing: 19px; padding-top: 35px; padding-bottom: 0; }
.sunset-text p { width: 400px; margin: 0 auto; font-size: 20px; line-height: 23px; }

/* english page --*/
body.en .map-section .line-text {
    font-size: 20px;
}
body.en .input-submit.desktop-view input[type="submit"] { padding: 6px 34px; }
}
@media (max-width:1279px){ 
    h1,.h1 {font-size:55px;}
    h2,.h2 {font-size:55px;}
    h3,.h3 {font-size:46px;} 
    h4,.h4 {font-size:34px;}
    h5,.h5 {font-size: 32px;}
    h6,.h6 {font-size: 24px;}
    body {font-size: 20px;line-height: 25px;}
    .menu-navigation ul li a {line-height: 30px;}
    .banner-sc { padding-top: 150px; padding-bottom: 100px; }
    .title h1 {margin-bottom: 35px;}
    .people-banner-wrap {padding-top:40px;}
    .profession {padding-top: 100px;}
    .people-main {padding-bottom: 120px;}
    .apartment-btn {padding-top:30px;}

    .image-and-text-desc {padding-top: 70px;}
    .image-and-text { padding-top: 100px; padding-bottom: 100px;}
    .main-description {padding-bottom: 70px;}
    .pool-text { padding-top: 100%; }

    .rainbow-club-desc {padding-top:90px;padding-bottom:80px;}
    .footer-box .input-submit input[type="submit"] {padding: 6px 20px;}

    .live-section .live-inner {max-width: 630px;}
    .live-section {height: calc(100vh - 130px);}
    .footer-main {min-height: 143px;}

    /*-- english page --*/
    body.en .menu-navigation ul li { margin-right: 5px; margin-left: 5px; }
    body.en .menu-navigation ul li a { font-size: 14px; }
}



@media (max-width:1240px){ 
    .menu-navigation ul li {margin-right: 9px; margin-left: 9px;}
    .menu-navigation ul li a {font-size: 18px;}
    .the-place .image-and-text-content h2 {font-size: 50px;}
}
@media (max-width: 1199px) { 
    body {font-size: 20px;}
    .banner-sc {padding-top: 135px;padding-bottom: 70px;}
    .title p {margin: 0 0 15px 0;}
    .profession {padding-top: 70px;}
    .profession-wrap {padding-top:70px;}
    .people-main {padding-bottom: 80px;}
    .image-and-text-desc {padding-top: 50px;}
    .image-and-text { padding-top: 80px; padding-bottom: 80px;}
    .pool-images { padding-top:70px; }
    .rainbow-club-before::before {bottom: 115px;}
    .purple-box .image-and-text-inner:not(.row-reverse):before {bottom: -54px; height: 115px;}
    .purple-box .image-and-text-inner.row-reverse:before {bottom: -54px;height: 115px;}
    .rainbow-club-before::before {padding: 44px 0;}


    .map-section .image-and-text-img { max-width: 50%;}
    .map-section .row-reverse .image-and-text-bg{ margin: 0;}
    .map-section .map-link{ bottom: 50px;}
    .map-section .container { padding: 0;}
    .area-cards-section .area-card { width: 50%;}


    .the-place .image-and-text-img { max-width: 59.7%; width: 100%; }
    /*.image-and-text-bg { margin-left: -50vw; width: calc(100% + 50vw - 497px); }*/
    .image-and-text.the-place .apartment-btn { padding-top: 31px; }
    .input-submit input[type="submit"] { padding: 5px 16px; font-size: 15px; }
    .input-box { font-size: 11px; }
    .footer-right .footer-box p { font-size: 12px; margin: 0; }
    footer .footer-left { flex: 1; padding: 0 15px 0 15px; }
    footer .footer-left .footer-box .from-section .input-tag input:placeholder{font-size: 15px; color: #000; }
    footer .footer-left .footer-box .from-section span{ max-width: 15%;}

    .concept-mn .image-and-text-img {/*max-width: 648px;*/ }
    .concept-image-and-text .image-and-text-content {/*max-width: 310px; */}
    .concept-mn .image-and-text-bg {/*width: calc(100% + 50vw - 497px);*/ }
    .orange-box::before{padding: 140px 0;} 

    .footer-main {min-height: 130px;}
    .the-place .image-and-text-content h2 {font-size: 45px;}
    footer#footer {background-position: calc(100% - -274px) center;}

    .sunset-text h2 { font-size: 34px; letter-spacing: 26px; line-height: 44px; padding: 0 0 22px; }
    .sunset-text p { width: 340px; margin: 0 auto; font-size: 16px; line-height: 23px; }
    .sunset-text { width: 320px; margin-right: auto; position: absolute; top: 89px; left: 90px; text-align: center; }
    .sunset-text .ceremony { letter-spacing: 14px; padding-top: 15px; padding-bottom: 0; }

    /*--- english page ---*/
    body.en .logo img { width: 134px; }
    body.en .menu-navigation ul li a { font-size: 14px; padding: 0 3px; }
    body.en .menu-navigation ul li { margin-right: 5px; margin-left: 5px; }

 }
 @media (max-width: 1150px) { 
 footer .footer-right {max-width: 168px;}
 .footer-left .select-box .input-box {max-width: 28%;}
 .select-box-right {max-width: 37.33% !important;}
 /* english */
 body.en .footer-left .select-box { padding: 7px 0 0 0; }
 }
 @media (max-width: 1080px) { 
    .footer-main {
        min-height: 156px;
    }
    /*-- english page --*/
    body.en .menu-navigation ul li { margin-right: 3px; margin-left: 3px; }
    .menu-navigation ul li a { font-size: 17px; }
    body.en .menu-navigation ul li a { font-size: 13px; padding: 0 3px; }
 }
@media (max-width:991px){
    h1,.h1 {font-size:42px;}
    h2,.h2 {font-size:42px;}
    h3,.h3 {font-size:35px;} 
    h4,.h4 {font-size:30px;}
    h5,.h5 {font-size: 28px;}
    h6,.h6 {font-size: 24px;}
    header {position: fixed; z-index: 999; background-color: #fff;}
    .container {padding-left: 32px;padding-right:32px;}
    .menu-toggle {display: flex;}
    .menu-navigation { margin: 0; padding:79px 0 30px 0; flex: 1; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: fixed; top: 0; right:0; width: 100%; background-color: #fff; height: 100%; overflow: auto; z-index: 9; transition: all 0.5s; transform: translateX(100%); }
    .is-open .menu-navigation { transform: none; }
    body.en .menu-navigation{ transform: translateX(-100%); left: 0; right: auto; }
    body.en.is-open .menu-navigation { transform: translateX(0%); }
    .menu-navigation ul {display: flex;flex-direction: column;}
    .menu-navigation ul li { margin-right: 0; margin-left: 0; padding: 0 46px; }
    .menu-navigation ul li a { font-size: 20px; padding: 9px 8px; display: block; }
    .menu-navigation ul li a::after {bottom: 0px;}
    .logo { position: relative; z-index: 99;margin: 10px auto; padding: 0;}
    header:before {display: none;}
    .menu-toggle.active span:nth-child(1) { transform: rotate(45deg); top: 8px; width: 65%; position: relative; }
    .menu-toggle.active span:nth-child(2) { opacity: 0; width: 100%; }
    .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); top: -8px; width: 65%; position: relative; background-color: #000;}
    body {font-size: 20px;line-height: 30px;}
    .banner-sc {padding-top: 135px;padding-bottom:50px;}
    .profession {padding-top: 50px;}
    .profession-wrap {padding-top:50px;}
    .people-main {padding-bottom: 50px;}
    .profession-img.aspect-container { padding-top: 56.25%; }
    .profession-wrap-2 {margin-right: -30px;}
    .image-and-text { padding-top: 60px; padding-bottom: 60px;}
    .apartment-btn a { padding: 9px 40px; }
    .title { padding: 0 32px; }

    .image-and-text-inner {flex-direction: column-reverse;}
    .image-and-text-img {max-width:100%;} 
    .image-and-text-content {padding: 56px 0 0 0; max-width: 100%; }
    .image-and-text-bg {margin-left: -32px; margin-right: -32px; width: calc(100% + 64px);}
    .image-and-text-desc {padding-top: 0;max-width: 100%; padding: 0;}
    .main-description {padding-bottom: 50px;}

    .pool-img {margin:50px auto 0;}
    .aspect-inner {object-fit: cover;}
    .pool-img.aspect-container {padding-top: 56.25%;}

    .pool-inner-right {max-width: calc(74% - 10px);}
    .pool-img-inner {margin-right: -32vw;width: calc(100% + 32px);}
    .pool-inner-left { max-width: 25%; padding-right: 15px; }
    .pool-inner-right-bottom {max-width: calc(74% - 10px);}
    .pool-images .pool-inner-right::before {bottom: -30%;left: 184px;}
    .pool-wrapper-bottom {padding-top: 80px;}
    .pool-wrapper-bottom .pool-img-inner {margin-left: -32px;width: calc(100% + 32px);}
    .pool-water {padding-top: 70px;padding-bottom:0;}

    .row-reverse .image-and-text-bg { margin-right: -32px; margin-left: -32px; } 
    .rainbow-pool .image-and-text-content h2 {margin-bottom: 40px;}
    .rainbow-club-before::before {bottom: 58px; left: -170px; padding: 35px 0;}
    .purple-box .image-and-text-inner:not(.row-reverse):before {display: none;}
    .purple-box .image-and-text-inner.row-reverse:before {display: none;}
    .contact-btn {display: block;position: absolute;left: 4px;top: 4px; z-index: 99;} 

    /*-- english page --*/
    body.en .contact-btn{ right: 4px; left: auto;    right: 4px; left: auto; width: 41px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background: rgba(244, 186, 193, 1); }


    .map-section .image-and-text-img { max-width: 100%;}
    .map-section .line-card { justify-content: end;}
    .map-section .line-text{ font-size: inherit;}

    .banner-inner { width: 704px; }
    .the-place .image-and-text-content { max-width: 100%; width: 100%; text-align: center; }
    .the-place .image-and-text-img {max-width: 100%; width: 100%;}
    .the-place .image-and-text-bg {margin-left: -32px; margin-right: -32px; width: calc(100% + 64px);}
    .live-section .live-inner { background: #FFFFFF; max-width: 674px; width: 100%; margin: 0 auto; text-align: center; padding: 150px 0; }
    footer .footer-right { max-width: 100%; width: 100%; padding: 8px 10px; }
    .footer-right .footer-logo { max-width: 161px; width: 100%; margin-right: auto; padding: 0 0 8px; }
    footer .footer-left .footer-box .from-section .input-tag { max-width: 50%; width: 100%; padding: 8px 8px; }
    footer{ flex-wrap: wrap; }
    .from-section { flex-wrap: wrap; }
    footer .footer-left .footer-box .from-section span { max-width: 100%; font-size: 25px; padding: 7px 0; }
    footer .footer-left .footer-box .from-section .input-submit { max-width: 100%; width: 100%;  padding: 0 9px; margin-top: 7px;} 
    footer .footer-left .footer-box .from-section .input-submit input[type="submit"] { padding: 5px 16px; font-size: 15px; width: 100%; } 
    .input-box { padding: 12px 0 0; font-size: 17px; }  
    footer .footer-right{ padding:20px 0 0; text-align: center; }
    .footer-right .footer-logo{ margin: 0 auto;} 
    .home-video .container { max-width: 100%; padding: 0 8px; }


    .concept-image-and-text .image-and-text-bg{padding-top: 24px;}
    .orange-box::before{bottom: 50%;}
    .concept-mn .image-and-text-content{    padding: 0 0 0 0;}
    .concept-image-and-text .image-and-text-inner {padding-right: 8px;}
    .concept-image-and-text .image-and-text-content img {width: 100%;}
    .concept-image-and-text .image-and-text-content { /*max-width: 207px;*/ max-width: 68%; }
    .concept-mn .image-and-text-bg { width: calc(100% + 48px); margin-left: -32px; margin-right: -16px; }
    .concept-mn .image-and-text-img {max-width: 100%;}
    .concept-mn .image-and-text-inner{flex-direction: column;}
    .orange-box::before { padding: 70px 0; }
    .concept-pool-children-mn{padding-top: 47px;}
    .orange-box::before { padding: 120px 0; }
    .orange-box::before { padding: 37px 0; right: -10px; left: -32px; }
    .concept-mn .concept-pool-children-mn .image-and-text-bg { width: calc(100% + 64px); margin-right: -32px; margin-left: -32px; padding-top: 72.25%; position: relative; }
    .concept-mn .concept-pool-children-mn .image-and-text-bg img { position: absolute; top: 0; bottom: 0; height: 100%; width: 100%; object-fit: cover; right: 0; left: 0; }
    .yoga-sc .people-banner { position: relative; padding-top: 75.25%; }
    .yoga-sc .people-banner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .counter-inner p {margin-bottom: 40px;font-size: 26px;}
    .main-counter-box{max-width: 100%}
    .main-counter{padding-top: 80px; padding-bottom: 80px;}
    .complex-map{padding-bottom: 100px;}
    .sticky footer {position: relative;}
    .thankyou {padding:70px 0 70px;}
    .thankyou .thankyou-box h2 {padding: 0 0 30px 0;}
    .thankyou .thankyou-box p {padding: 0 0 0;}
    .apartment-btn {padding-top: 10px;}

    .the-place .image-and-text-content h2 {font-size: 38px;}
    html {overflow-x: hidden;}
    .video-box {position: relative; padding-top: 72.25%; margin: 0 -24px;}
    .footer-right:before {left: 0;top: 0;right: 0;bottom: -8px;} 

    footer {transform: none !important; position: relative;}
    .home-page header {top: 0;}
    .header-sc {line-height: 0;}

    .banner-inner-overlay {transform: scale(1) !important;}

    .live-section {height: calc(100vh - 503px);}
    .logo img {width: 117px;} 

    .rainbow-pool .pool-wrapper .pool-inner-left {margin-right: -10px;}
    .menu-navigation {display: block; justify-content: center;}
    .menu-navigation ul li a:before {display: none;}

    .footer-left .select-box {flex-direction: column;padding: 7px 10px 0 0;}
    footer .footer-left .footer-box .from-section span {text-align: center;}

    .footer-left .select-box .input-box {max-width: 100%;} 
    footer {padding: 2px 0 8px;}
    footer .footer-left .footer-box .from-section span {text-align: center; padding: 10px 0; max-width: calc(100% + 30px);margin: 0 -15px; width: calc(100% + 30px);background: #7cc1e4;}
        footer .footer-left .footer-box {position: static;}
        .select-box-right { max-width: 100% !important; position: absolute; bottom: 20px; left: 0; text-align: center; justify-content: center; }
        footer {padding-bottom: 50px;}  

        .sunset-text { width: 300px;     top: 85px; left: 70px;}
        .sunset-text p { width: 251px; margin: 0 auto; font-size: 16px; line-height: 17px; }
        .sunset-text .ceremony { letter-spacing: 9px; padding-top: 6px; padding-bottom: 0; }
        .sunset-text h2 { font-size: 29px; letter-spacing: 20px; line-height: 44px; padding: 0px 0 12px; }

        /* english page */
        body.en .the-place .image-and-text-content { max-width: 100%; margin: 0 auto; }
        body.en footer .footer-left { padding: 0 0 0 0; }
        body.en .footer-left .select-box { padding: 7px 0 0 15px; }
        body.en .footer-left .select-box .input-box { max-width: 100%; }
        body.en .footer-left .select-box > * { margin: 0 22px 0 0; }
        body.en .select-box-right { max-width: 100% !important; }
        /* body.en a.Language { display: flex !important; align-items: center; justify-content: flex-start!important; /* text-align: inherit; */ 
        a.Language { display: flex !important; justify-content: flex-start!important; align-items: center; }
        body.en .menu-toggle{ right: auto; left: 15px; }
        body.en .banner-inner-overlay { transform: scale(1.1) !important; }
        body.en .the-place .image-and-text-bg { margin-left: -32px; margin-right: -32px; width: calc(100% + 64px); }
    
    
}

@media (max-width:767px){
    .pool-img {width: calc(100% + 32px); margin-left: -16px; margin-right: -16px;}
    .pool-img.aspect-container {padding-top: 72.25%;}
    .pool-wrapper {flex-direction: column-reverse;}
    .pool-text {padding-top:0;}
    .pool-inner-left { max-width: 220px; padding-right: 0; padding-left: 0; padding-top: 0; margin: 0 auto; text-align: center; }
    .pool-inner-right {max-width:100%;}
    .pool-inner-right {flex-direction: column;}
    .pool-img-2 {max-width: 60%; margin-left: 0; margin-right: auto;}
    .pool-img-1 {margin-bottom: 40px; max-width: 53%; margin-right: 0; margin-left: auto;max-width: 56%;}
    .pool-images .pool-inner-right::before {bottom: -33%;left: 56px;top: 25%;}
    .pool-wrapper-bottom .pool-text {padding-top: 0;}
    .pool-wrapper-bottom {padding-top: 68px;}
    .pool-wrapper-bottom  .pool-inner-left {margin-right: 0; margin-left: auto; max-width: 240px;}
    .pool-inner-right-bottom {margin-top: 50px; max-width: 100%; padding-right: 30px;}
    .pool-water {padding-bottom: 0;}
    .pool-water .people-banner {height: calc(100vh - 100px);}
    .rainbow-club-before::before {left: -16px;}
    .rainbow-club {padding-top: 60px;}
    .rainbow-club-desc {padding-top: 60px;padding-bottom: 60px;}
    .club-map.aspect-container {padding-top: 56.25%;}
    .dayinlife.aspect-container {padding-top: 56.25%;}

    .club-coffee-bg {padding-top:20px;padding-bottom:20px;}


    span.image-tag { transform: scale(0.8);}
    span.image-tag.tag-1 { top: 35.5%; right: 2%;}
    span.image-tag.tag-2 { left: 40%; top: 59%;}
    span.image-tag.tag-3 { left: 15.5%; bottom: 2.7%;}
    span.image-tag.tag-4 {left: 2%;bottom: 28%;}

    .video-section {padding-top: 70px; padding-bottom: 70px;}
    .video-section .text-block {padding: 0 20px;}
    .video-section::before{display: none;}
    .video-section::after{display: none;}
    .video-section .place-video-wrapper::before{content: "";position: absolute;right: 5%; height: 80%; left: -32px; bottom: -50px;background: #F4BBC2;}
    .video-section .place-video-wrapper::after{content: "";position: absolute;right: -32px;width: 30%;height: 63vw;top: 45px;background: #6F770D;}
    .video-section .place-video-wrapper{ position: relative;}
    .video-section .place-video,.video-section .text-block { position: relative; z-index: 1;}
    .video-section .place-video { padding-bottom: 85px;}
    .video-box .play-icon { height: 30px; width: 30px;}

    .map-section {padding-top: 70px; padding-bottom: 70px;}
    .map-section span.line { width: 112px;}
    .map-section .line-box:hover span.line{width:144px;}
    
    .area-cards-section {padding-top: 70px; padding-bottom: 70px;}
    .area-cards-section .area-card { width: 100%;}
    .area-cards-section .container{padding: 0 8px;}
    .area-cards-section .area-card { padding: 4px 8px;}
    .area-cards-section .card-iconset .icon-box { flex-direction: column; align-items: center; padding: 0 20px; min-width: 33%;}
    .area-cards-section .card-iconset .icon-box span { padding: 0; padding-top: 10px;}
    .area-cards-section .card-iconset {padding: 0 20px;}
    .area-cards-section .area-heading h2 { text-align: center; }


    .banner-inner { width: 296px; max-width: 100%;}
    .banner-inner .banner-logo-img { max-width: 202px;}
    .main-banner{ background-image: url('../image/home-banner-mobile.jpg');}
    .home-video { padding: 58px 0; position: relative; }
    .image-and-text-bg { margin-left: 0; width: 100%; }
    .the-place .image-and-text-content { max-width: 100%; width: 100%; text-align: center; padding: 56px 0 0; }
    footer .footer-left .footer-box .from-section span{ text-align: center; padding: 8px 0; position: relative; }
    footer .footer-left::before{ content: ''; position: absolute; height: 50px; width: 100%; left: 0; top: 1px; background-color:#7CC1E4;}
    footer{ /*background-image: url('../image/footer-bg-mobile.jpg');     background-position: center; background-size: cover;*/ }
    footer .footer-left .footer-box .from-section .input-tag { max-width: 100%;}
    .live-section{ background-image: url('../image/home-banner-mobile.jpg'); }
    .live-section{ padding: 127px 0 112px; height: auto;}
    .input-submit.desktop-view{ display: none;}
    footer .footer-left { flex: 1; padding: 0 24px; }
    .input-submit.mobile-view{ padding: 30px 0 0; display: block; width: 100%; max-width: 100%; }
    footer .footer-left .footer-box .from-section .input-tag{  padding: 15px 0 2px;}
    footer .footer-left .footer-box .from-section .input-tag input{ padding: 14px 8px; font-size: 16px; }
    .input-submit input[type="submit"] { padding: 10px 16px; font-size: 15px; width: 100%; }
    .input-box label { position: relative; display: block; font-size: 14px; line-height: 15px;  font-family: var(--rag-font-bold); padding: 0 30px 3px 0; margin: 0 0 0 0;}
    footer .footer-right { padding: 50px 0 0;text-align: center;margin: 23px 0 0 0; }
    .footer-left .select-box { padding: 10px 0 14px 20px; text-align: justify; margin-top: 10px; }
    .footer-left .select-box::before { content: ''; position: absolute; left: 0; height: 100%; background: #FF6E13; right: -24px; top: 0; display: none;}
    .home-description .home-description-wrapper { max-width: 100%; width: 100%; text-align: center; margin: 0 auto; }
    .the-place .image-and-text-content p { max-width: 100%; width: 100%; margin: 0 auto; }

    .concept-image-and-text .image-and-text-bg { padding-top: 24px; }
    .concept-mn .image-and-text-img { max-width: 100%; }
    .concept-mn .image-and-text-bg {     width: calc(100% + 50vw - 228px);}
    .concept-image-and-text { padding-top: 47px;padding-bottom: 47px;}
    .rainbow-color-col{max-width: 50%;    padding-bottom: 63px;}
    .rainbow-colors-wrapper { padding-top: 82px; }
    .rainbow-color-place { font-size: 28px;}
    .common-space-btn{padding-top: 20px;}
    .common-space-btn .button { padding: 21px 34px;}
    .rainbow-has-colors {padding-top: 69px;}
    .concept-pool-side-sc{padding-top: 47px;padding-bottom: 69px;}
    .people-banner-wrap { padding-top: 16px; }
    .main-description-concept{font-size: 20px;}
    .concept-mn .banner-sc { padding-top: 88px; padding-bottom: 77px; }
    .concept-mn .image-and-text-bg { width: calc(100% + 48px); margin-right: -16px; margin-left: -32px; }
    .rainbow-color-title{text-align: center;}
    .counter-inner p { font-size: 22px;margin-bottom: 40px;}
    .rainbow-color-col{max-width: 100%;}
    .rainbow-color-title{text-align: center;}

    .parallax {background-attachment: inherit;background-position: center !important;}
    .home-img-content {height: 50vh;}
    .parallax2 {background-attachment: inherit;background-position: center !important;}
    
    .area-cards-section .area-card:nth-child(1) {order: 3;}
    .area-cards-section .area-card:nth-child(2) {order: 2;}
    .area-cards-section .area-card:nth-child(3) {order: 1;}
    .area-cards-section .area-card:nth-child(4) {order: 6;}
    .area-cards-section .area-card:nth-child(5) {order: 5;}
    .area-cards-section .area-card:nth-child(6) {order: 4;}

    .apartment-page .pool-images {padding-top: 10px;}
    .rainbow-pool .pool-wrapper-bottom .pool-img-inner img {width: 140%; max-width: 140%;}
    footer {border-top: 0;} 
    .live-section {border-bottom: 2px solid #fff;}
    .rainbow-color-title h2 {font-size: 36px;}
    .apartment-page.rainbow-pool .pool-images {padding-top: 50px;}
    .apartment-page.rainbow-pool .pool-wrapper .pool-inner-left {padding-bottom: 25px;}
    footer#footer {background-position: center -23px;}
    footer .footer-right {padding:20px 0 0;text-align: center;margin:20px 0 0 0;}  

    .rainbow-pool .pool-wrapper .pool-img-2 {max-width: 59.2%; margin-right: auto; margin-left: 0;}
    .rainbow-pool .pool-wrapper .pool-img-1 {max-width: 57.2%;}
    .rainbow-pool .pool-wrapper .pool-img-inner {margin-right: -32px;width: calc(100% + 32px);}
    .rainbow-pool .pool-wrapper .pool-inner-left {margin-right: auto;}
    .footer-icon {right: auto;left: 8px;}

    .rainbow-club-desc p:last-child { margin-bottom: 0; padding: 0 30px; }

    section.pool-sunset { position: relative;  width: 100%; /* margin: 0 auto; */ }
    .sunset-text { width: 100%; top: 0; left: 0; position: relative; }
    .sunset-text h2 { font-size: 26px; letter-spacing: 11px; line-height: 28px; padding: 0px 0 12px; }
    .sunset-text p { width: 100%; margin: 0 auto; font-size: 14px; line-height: 17px; }
    .sunset-text .ceremony { letter-spacing: 6px; padding-top: 6px; padding-bottom: 16px; }
    .pool-sunset-banner { position: relative; width: 100%; margin: 0 auto; padding: 0 23px 23px; display: inline-flex; flex-direction: column-reverse; }

        /*-- english page --*/
    body.en .area-cards-section .card-iconset .icon-box{ padding: 0 14px; }
    body.en .area-cards-section .card-iconset .icon-box span { padding: 0 0 0 10px; }
    ul.sub-manu { display: none; } 
    body.en .live-section{ margin-top: 24px; }
    body.en footer .footer-left .footer-box .from-section span { padding: 10px 8px 0; margin-bottom: 33px; }
    body.en footer .footer-left .footer-box .from-section .input-tag { padding: 15px 30px 2px; }
    body.en .input-submit.mobile-view { padding: 30px 30px 0;}
    body.en .input-submit.mobile-view input[type=submit]{ font-size: 22px; }
    body.en .footer-right .footer-logo {  margin-right: auto; padding-bottom: 27px; }
    body.en.transparent footer .footer-left .footer-box .from-section .input-tag input { background-color: #fff; border-color: #fff; box-shadow: none; }
    
 }
@media (max-width:587px){
    .video-section .place-video-wrapper::before{right: 10px;}
    section.pool-sunset{margin: 314px 0 0;  }
    /*-- english page --*/
    body.en .map-section .line-text { font-size: 17px; }
    ul.sub-manu.open-sub-manu { display: block; position: absolute; width: 75%; }

    body.en .footer-icon { display: none; }
    body.en .select-box-right p{  display: flex; flex-direction: column-reverse; width: 80%; margin: 0 auto; }
    body.en .select-box-right p a{ padding: 8px 0 0; }
    body.en span.image-tag.tag-5:after, span.image-tag.tag-5:after {  left: 0; right: 0; bottom: auto; top: -6px; transform: rotate(-180deg); }
    body.en span.image-tag.tag-5 { left: 87.5%; bottom: 0; }
    body.en span.image-tag{ line-height: 26px; }
    body.en .menu-navigation ul li a { font-size: 18px; padding: 2px 3px; }
    body.en .live-section .live-inner{ padding: 207px 0;}
    body.en .live-section { padding: 42px 0 42px; height: auto; }

} 

@media (max-width:360px){
    .rainbow-color-col{max-width: 100%;}
    .concept-mn .title { padding: 0 17px; }
    .pool-wrapper-bottom .pool-inner-left .pool-text { font-size: 16px; max-width: 185px; } 
    footer#footer {
    background-position: center -5px;   
}
body.en .map-section .line-text { font-size: 14px; }
body.en .live-section { padding: 77px 0 62px; height: auto; }
section.pool-sunset { margin: 254px 0 0; }
.input-box label {font-size: 13px;line-height: 14px;letter-spacing: -0.2px;}
footer .footer-left .footer-box .from-section .input-tag {padding: 13px 0 2px;}

}
@media (min-width:992px) { 
    
}