@charset "utf-8";

/*
 * File       : rwd-style.css
 * Author     : STUDIO-JT (Chaehee)
 * Guideline  : JTstyle.2.0
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 
 */



/* **************************************** *
 * 1800px
 * **************************************** */
@media (max-width: 1800px){

    /* ARCHITECTURE */
    .archt-vision__diagram > li { width: 440rem; }
    
}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){ 

    /* ARCHITECTURE */
    .archt-intro { padding-top: 160rem; }
    .archt-intro__section { margin-top: 320rem; }
    .archt-intro__img--primary { width: 40%; }
    .archt-intro__img--secondary { width: 40%; }
    .archt-intro__img--tertiary { width: 40%; }
    .archt-intro__img--quaternary { width: 50%; }
    
    .archt-concept { padding-top: 250rem; }
    .archt-concept h3 { margin-top: 40rem; }
    .archt-concept p { margin-top: 18rem; }
    .archt-concept__wave { margin-top: 90rem; }

    .archt-vision { padding-top: 250rem;}
    .archt-vision__diagram { margin-top: 70rem; }
    .archt-vision__diagram > li { width: 400rem; }
    
    .archt-bottom { padding: 320rem 0 320rem;}

    /* LANDSCAPE */
    .landscape-section--01 .landscape-section__content { padding-top: 160rem; }
    .landscape-section__content-inner { padding-top: 360rem; padding-left: 140rem; padding-bottom: 100rem; }
    
    /* AMENITY */
    .amenity-info-group:first-child { margin-top: 180rem; }
    .amenity-info { margin: 240rem -36rem 0; }
    .amenity-info:nth-child(odd) .amenity-info__txt p { margin-left: 80rem; }

    /* SERVICE */
    .service-list { margin-top: 160rem; border-top-width: 16rem; }
    .service-list__item { border-bottom-width: 16rem; height: 260rem; }
    .service-list__item:after { width: 16rem; margin-left: -8rem; }
    .service-list__img { width: 140rem; }
    .service-list__img svg { max-width: 100%; height: auto; }

}



/* **************************************** *
* 1023px
 * **************************************** */
@media (max-width: 1023px){

    /* ARCHITECTURE */
    .archt-intro { padding-top: 120rem; }
    .archt-intro__section { margin-top: 260rem; }
    .archt-intro__img--primary { width: 40%; }
    .archt-intro__img--secondary { margin-top: 450rem; }
    .archt-intro__img--tertiary { margin-top: 360rem; }
    .archt-intro__img--quaternary { margin-top: 150rem; }
    .archt-intro__content { padding: 0 40rem; }

    .archt-concept { padding-top: 180rem; }
    .archt-concept h3 { margin-top: 32rem; }
    .archt-concept p { margin-top: 16rem; }
    .archt-concept__wave { margin-top: 60rem; }

    .archt-vision { padding-top: 180rem; }
    .archt-vision__diagram { margin-top: 60rem; }
    .archt-vision__diagram > li { width: -webkit-calc(33.33% + 24rem); width: calc(33.33% + 24rem); }
    .archt-vision__diagram > li:first-child { left: -80rem; }
    .archt-vision__diagram > li:last-child { right: -80rem; }

    .archt-bottom { padding: 220rem 0 220rem;}

    /* LANDSCAPE */
    .landscape-section--01 .landscape-section__content { padding-top: 140rem; }
    .landscape-section__content-inner { padding-top: 320rem; padding-left: 90rem; padding-bottom: 80rem; }
    .landscape-section__bg { padding-top: 56.25%; height: auto; background-attachment: unset; }
    
    /* AMENITY */
    .amenity-info-group:first-child { margin-top: 120rem; }
    .amenity-info-group:not(:first-child) { margin-top: 140rem; }
    .amenity-info-group + .jt-marquee-wrap { margin-top: 140rem; }
    .amenity-info { margin: 140rem -20rem 0; }
    .amenity-info > div { margin: 0 20rem;}
    .amenity-info:nth-child(odd) .amenity-info__txt p { margin-left: 20rem; }

    /* SERVICE */
    .service-list { margin-top: 140rem; border-top-width: 12rem; }
    .service-list__item { border-bottom-width: 12rem; width: 50%; padding: 0 6rem; height: 240rem; }
    .service-list__item:after { width: 12rem; right: -6rem; }
    .service-list__item:nth-last-child(3):after { display: block; }
    .service-list__item:nth-child(2n) { padding-left: 6rem; padding-right: 0;}
    .service-list__item:nth-child(2n):after { display: none; }
    .service-list__item:nth-child(2n + 1) { padding-left: 0; padding-right: 6rem; }
    .service-list__item:nth-child(3n):after { height: -webkit-calc(100% + 12rem); height: calc(100% + 12rem); display: block; }
    .service-list__item:nth-child(5):after { display: none; }
    .service-list__item:last-child { width: 100%; }
    .service-list__item:last-child:after { display: none; }
    .service-list__img { width: 120rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* ARCHITECTURE */
    .archt-intro { padding-top: 100rem; }
    .archt-intro__section { margin-top: 200rem; }
    .archt-intro__img--secondary { margin-top: 300rem; }
    .archt-intro__img--tertiary { margin-top: 230rem; }
    .archt-intro__img--quaternary { margin-top: 100rem; }
    .archt-intro__content { padding: 0 32rem; }
    .archt-intro__content h3 { font-size: 28rem;}

    .archt-concept { padding-top: 120rem; }
    .archt-concept p { margin-top: 14rem; }
    .archt-concept__wave { margin-top: 50rem; }

    .archt-vision { padding-top: 120rem;}
    .archt-vision__diagram { margin-top: 50rem; }
    .archt-vision__diagram > li { width: -webkit-calc(33.33% + 8rem); width: calc(33.33% + 8rem); margin: 0 -6rem; }

    .archt-bottom { padding: 160rem 0 160rem;}

    /* LANDSCAPE */
    .landscape-section--01 .landscape-section__content { padding-top: 120rem; }
    .landscape-section__content-inner { padding-top: 280rem; padding-left: 70rem; padding-bottom: 60rem; }

    /* AMENITY */
    .amenity-info-group:first-child { margin-top: 100rem; }
    .amenity-info-group:not(:first-child) { margin-top: 120rem; }
    .amenity-info-group + .jt-marquee-wrap { margin-top: 120rem; }
    .amenity-info { margin: 120rem -10rem 0; }
    .amenity-info > div { margin: 0 10rem;}
    .amenity-info__txt p br { display: none; }
    .amenity-info:nth-child(odd) .amenity-info__txt p { margin-left: 20rem; }
    .amenity-info:nth-child(even) .amenity-info__txt p { margin-right: 20rem; }

    /* SERVICE */
    .service-list { margin-top: 120rem; border-top-width: 10rem; }
    .service-list__item { border-bottom-width: 10rem; height: 220rem; padding: 0 5rem; }
    .service-list__item:after { width: 10rem; right: -5rem; }
    .service-list__item:nth-child(2n) { padding-left: 5rem; }
    .service-list__item:nth-child(2n + 1) { padding-right: 5rem; }
    .service-list__item:nth-child(3n):after { height: -webkit-calc(100% + 10rem); height: calc(100% + 10rem); }
    .service-list__img { width: 100rem; }

}



/* **************************************** *
* 540px
* **************************************** */
@media (max-width: 540px){

    /* ARCHITECTURE */
    .archt-intro { padding-top: 80rem; }
    .archt-intro__section { margin-top: 200rem; }
    .archt-intro__content { padding: 0 24rem; }
    .archt-intro__content h3 { font-size: 22rem; }
    .archt-intro__content br { display: none; }
    .archt-intro__img--primary { width: 60vw; margin-left: -10vw; }
    .archt-intro__img--secondary { width: 60vw; margin-right: -20vw; margin-top: 80rem; }
    .archt-intro__img--tertiary { width: 60vw; margin-left: -10vw; margin-top: 80rem; }
    .archt-intro__img--quaternary { width: 90vw; margin-right: -18vw; margin-top: 80rem; }

    .archt-concept h3 { margin-top: 22rem; }
    .archt-concept p { margin-top: 12rem; }
    .archt-concept p br { display: none; }
    .archt-concept__wave { margin-top: 40rem; }
    .archt-concept__wave-inner { width: 120%; }

    .archt-vision { padding-top: 100rem; }
    .archt-vision__diagram { margin-top: 40rem; }
    .archt-vision__diagram > li { width: 70%; margin: -12rem 0; }
    .archt-vision__diagram > li:first-child { margin-top: 0; left: auto; }
    .archt-vision__diagram > li:last-child { margin-bottom: 0; right: auto; }
    .archt-vision__diagram > li > div span { opacity: 1; }

    .archt-bottom { margin-top: 80rem; padding: 80rem 0 80rem; }
    
    /* LANDSCAPE */
    .landscape-section--01 .landscape-section__content { padding-top: 100rem; }
    .landscape-section__content-inner { padding-top: 200rem; padding-left: 30rem; padding-bottom: 30rem; padding-right: 24rem; }
    .landscape-section__content-inner p br { display: none; }

    .landscape-section--01 .landscape-section__content-inner p { top: -6rem; position: relative; }

    /* AMENITY */
    .amenity-info-group:first-child { margin-top: 80rem; }
    .amenity-info-group:not(:first-child) { margin-top: 100rem; }
    .amenity-info-group + .jt-marquee-wrap { margin-top: 100rem; }
    .amenity-info { margin-left: auto; margin-right: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 80rem; }
    .amenity-info > div { width: 100%; margin: 0; }
    .amenity-info__img { -ms-flex-order: 1; -webkit-order: 1; -webkit-box-ordinal-group: 2; order: 1; }
    .amenity-info__txt { -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2; }
    .amenity-info > div.amenity-info__txt { margin-top: 24rem; }
    .amenity-info:nth-child(odd) .amenity-info__txt p { margin-left: 0; }
    .amenity-info:nth-child(even) .amenity-info__txt p { margin-right: 0; }

    /* SERVICE */
    .service-list { margin-top: 100rem; border-top-width: 8rem; }
    .service-list__item { border-bottom-width: 8rem; width: 100%; padding: 0; height: 180rem;}
    .service-list__item:after { display: none; }
    .service-list__item:nth-child(2n) { padding-left: 0; }
    .service-list__item:nth-child(2n + 1) { padding-right: 0; }
    .service-list__item:nth-child(3n):after { display: none; }
    .service-list__item:nth-last-child(3):after { display: none; }
    .service-list__img { width: 90rem; }

}


/* **************************************** *
 * orientation
 * **************************************** */
@media (max-width: 860px) and (orientation: landscape) {

    body.page-template-style-architecture .jt-en-text--02 { font-size: 56rem; }
    body.page-template-style-architecture .jt-ko-text--04 { font-size: 26rem; }
}