@charset "utf-8";

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



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

    /* IDENTITY */
    .identity-vision__item { width: 480rem; margin-right: 200rem; }

    /* STORY */
    body.page-template-brand-story #footer { padding-top: 275rem; }

}



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

    /* IDENTITY */
    .identity-privilege__bg-box { width: 45%; }
    .identity-privilege__content h2 { margin-bottom: 18rem; }

    .identity-value { padding-top: 180rem; }
    .identity-value__illust { width: 150rem; height: 150rem; }

    .identity-vision { margin-top: 200rem; }
    .identity-vision__list { margin-top: 150rem; }
    .identity-vision__item { width: 50%; margin-right: 0; }
    .identity-vision__img { width: 420rem; }

    .identity-brand { margin-top: 210rem; padding-bottom: 500rem; }
    .identity-brand__img-wrap { width: 500rem; }
    .identity-brand h2 { margin-top: 40rem; }
    .identity-brand p { margin-top: 18rem; }

    /* LOGO */
    .logo-bi { padding-bottom: 180rem; }
    .logo-bi__section > h2 { margin-top: 36rem;}
    .logo-bi__section > p { margin-top: 18rem; }
    .logo-bi__logotype { margin-top: 140rem; }
    .logo-bi__symbol h2 { margin-top: 80rem; }
    .logo-bi__color { margin-top: 140rem; }
    .logo-bi__color-pantone { margin-top: 18rem; }

    .logo-slogan .jt-marquee-wrap { margin-bottom: 150rem; }
    .logo-slogan h3 { margin-top: 20rem; }
    .logo-slogan p { margin-top: 37rem; }
    .logo-slogan__box { margin-top: 90rem; }

    /* STORY */
    body.page-template-brand-story #footer { padding-top: 251rem; }

    .story-section__line { width: 16rem; margin-left: -8rem; }
    .story-section-06 .story-section__line { width: 16rem; margin-left: -8rem; }
}



/* **************************************** *
* 1023px
* **************************************** */
@media (max-width: 1023px){
    
    /* IDENTITY */
    .identity-privilege__box { width: 75%; margin-top: 42rem; }
    .identity-privilege__bg-box { width: 45%; margin-top: -180rem; }
    .identity-privilege__content { top: 240rem; padding: 0 40rem; }
    .identity-privilege__content h2 { margin-bottom: 16rem; }
    
    .identity-value { padding-top: 160rem;}
    .identity-value__list { margin: 120rem 40rem 0; }
    .identity-value__illust { width: 120rem; height: 120rem; }
    .identity-value__desc { margin-top: 18rem; }
    .identity-value__item b { margin-top: 55rem; }
    .identity-value__item p { margin-top: 10rem; }
    
    .identity-vision { margin-top: 180rem; }
    .identity-vision__list { margin-top: 130rem; }
    .identity-vision__item h2 { margin-top: 60rem; }
    .identity-vision__item p { margin-top: 12rem; }
    .identity-vision__img { width: 300rem; }

    .identity-brand { margin-top: 200rem; padding-bottom: 360rem; }
    .identity-brand__img-wrap { width: 450rem; }
    .identity-brand h2 { margin-top: 36rem; }
    .identity-brand p { margin-top: 16rem; }

    /* LOGO */
    .logo-bi { padding-top: 120rem; padding-bottom: 120rem; }
    .logo-bi__section > h2 { margin-top: 32rem;}
    .logo-bi__section > p { margin-top: 16rem; }
    .logo-bi__symbol h2 { margin-top: 60rem; }
    .logo-bi__symbol-img-wrap { width: 30%; }
    .logo-bi__logotype { margin-top: 100rem; }
    .logo-bi__logotype-view { height: 400rem; }
    .logo-bi__logotype-img-wrap { width: 500rem; }
    .logo-bi__color { margin-top: 100rem; }
    .logo-bi__color-view { height: 400rem; padding: 45rem; }
    .logo-bi__color-pantone { margin-top: 16rem; }
    .logo-bi__color-code { bottom: 40rem; left: 45rem; }

    .logo-slogan .jt-marquee-wrap { margin-bottom: 120rem; }
    .logo-slogan h3 { margin-top: 16rem; }
    .logo-slogan p { margin-top: 30rem; }
    .logo-slogan__box { width: 75%; margin-top: 70rem; }
    .logo-slogan__bg-box { width: 60%; margin-top: -300rem; }

    /* STORY */
    body.page-template-brand-story #footer { padding-top: 190rem; }

    .story-section__line { width: 12rem; margin-left: -6rem; }
    .story-section-06 .story-section__line { width: 12rem; margin-left: -6rem; }

    /* PLAY */
    .play-vid-container h2 {margin-top: 36rem;}
    .play-vid-container p {margin-top: 18rem;}
}



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

    /* IDENTITY */
    .identity-privilege__box { margin-top: 32rem; }
    .identity-privilege__bg-box { width: 50%; }
    .identity-privilege__content { top: 160rem; }
    .identity-privilege__content h2 { margin-bottom: 14rem; }
    .identity-privilege__content p br { display: none; }

    .identity-value { padding-top: 100rem; }
    .identity-value__list { margin: 100rem 32rem 0; }
    .identity-value__desc { margin-top: 16rem; }
    .identity-value__item { width: 50%; margin-bottom: 80rem; }
    .identity-value__item:nth-last-child(-n+2) { margin-bottom: 0; }
    .identity-value__item b { margin-top: 45rem; }
    .identity-value__item p { margin-top: 9rem; }

    .identity-vision { margin-top: 150rem; }
    .identity-vision__list { margin-top: 100rem; }
    .identity-vision__item { width: -webkit-calc(50% - 18rem); width: calc(50% - 18rem); margin-right: 36rem; }
    .identity-vision__item h2 { margin-top: 50rem; }
    .identity-vision__item p { margin-top: 10rem; } 
    .identity-vision__item p br { display: none; }
    .identity-vision__img { width: 220rem; }

    .identity-brand { margin-top: 180rem; padding-bottom: 280rem; }
    .identity-brand__img-wrap { width: 400rem; }
    .identity-brand p { margin-top: 14rem; }

    /* LOGO */
    .logo-bi { padding-top: 100rem; padding-bottom: 100rem; }
    .logo-bi__section > h2 { margin-top: 28rem;}
    .logo-bi__section > p { margin-top: 14rem; }
    .logo-bi__symbol h2 { margin-top: 40rem; }
    .logo-bi__symbol-img-wrap { width: 35%; }
    .logo-bi__logotype { margin-top: 80rem; }
    .logo-bi__logotype-view { height: 360rem; }
    .logo-bi__logotype-img-wrap { width: 400rem; }
    .logo-bi__color { margin-top: 80rem; }
    .logo-bi__color-view { height: 360rem; padding: 40rem; }
    .logo-bi__color-pantone { margin-top: 14rem; }
    .logo-bi__color-code { bottom: 35rem; left: 40rem; }
    .logo-bi__download-btn-wrap { margin-top: 80rem; }
    .logo-bi__download-btn { width: 300rem; padding: 22rem 27rem 18rem; -webkit-box-shadow: inset 0 0 0 3rem #fff; box-shadow: inset 0 0 0 3rem #fff; }
    .logo-bi__download-btn .jt-guide--icon { width: 14rem; top: 22rem; right: 27rem; }
    html.ios .logo-bi__download-btn { padding-top: 21rem; padding-bottom: 19rem;}
    html.ios .logo-bi__download-btn .jt-guide--icon { top: 20rem; }

    .logo-slogan .jt-marquee-wrap { margin-bottom: 100rem; }
    .logo-slogan h3 { margin-top: 12rem; }
    .logo-slogan p { margin-top: 26rem; }
    .logo-slogan__box { margin-top: 60rem; }
    .logo-slogan__bg-box { width: 50%; }

    /* STORY */
    body.page-template-brand-story #footer { padding-top: 114rem; }

    .story-section__line { width: 10rem; margin-left: -5rem; }
    .story-section__group .story-section__content-inner { padding-top: 1.77em; }
    .story-section__group .story-section__content-inner p { min-height: 3.54em; }
    .story-section-06 .story-section__line { width: 10rem; margin-left: -5rem; }
    
    /* PLAY */
    .play-vid-container h2 {margin-top: 30rem;}
    .play-vid-container p {margin-top: 16rem;}    
}



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

    /* IDENTITY */
    .identity-privilege__box { width: -webkit-calc(100% - 48rem); width: calc(100% - 48rem); 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: 60rem; }
    .identity-privilege__img { -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2;}
    .identity-privilege__content { position: relative; top: 0; left: 0; padding: 0; margin-bottom: 40rem; overflow: hidden; -ms-flex-order: 1; -webkit-order: 1; -webkit-box-ordinal-group: 2; order: 1; }
    .identity-privilege__content h2 { margin-bottom: 12rem; }
    .identity-privilege__bg-box { margin-top: -70rem; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; }

    .identity-value { padding-top: 50rem; }
    .identity-value__list { margin: 80rem 24rem 0; }
    .identity-value__illust { width: 90rem; height: 90rem; }
    .identity-value__desc { margin-top: 14rem; }
    .identity-value__item { width: -webkit-calc(50% - 10rem); width: calc(50% - 10rem); margin-right: 20rem; margin-bottom: 60rem; }
    .identity-value__item:nth-child(2n) { margin-right: 0; }
    .identity-value__item:nth-last-child(-n+2) { margin-bottom: 0; }
    .identity-value__item b { margin-top: 35rem;}
    .identity-value__item p { margin-top: 8rem; }
    
    .identity-vision { margin-top: 100rem; }
    .identity-vision__list { margin-top: 80rem; }
    .identity-vision__item { width: 100%; margin-right: 0; margin-bottom: 60rem; }
    .identity-vision__item:last-child { margin-bottom: 0; }
    .identity-vision__item h2 { margin-top: 35rem; }
    .identity-vision__item p { margin-top: 8rem; }
    .identity-vision__img { width: 60%; }

    .identity-brand { margin-top: 140rem; padding-bottom: 140rem; }
    .identity-brand__img-wrap { width: 250rem; }
    .identity-brand h2 { margin-top: 22rem; }
    .identity-brand p { margin-top: 12rem; }

    /* LOGO */
    .logo-bi { padding-top: 80rem; padding-bottom: 80rem; }
    .logo-bi__section > h2 { margin-top: 26rem;}
    .logo-bi__section > p { margin-top: 12rem; }
    .logo-bi__section > p br { display: none; }
    .logo-bi__symbol h2 { margin-top: 26rem; }
    .logo-bi__symbol-img-wrap { width: 40%; }
    .logo-bi__logotype { margin-top: 60rem; }
    .logo-bi__logotype-view { height: 240rem; }
    .logo-bi__logotype-img-wrap { width: 220rem; }
    .logo-bi__logotype-img-wrap:after { width: 100%; left: 0; }
    .logo-bi__color { margin-top: 60rem; }
    .logo-bi__color-view { height: 240rem; padding: 30rem; }
    .logo-bi__color-pantone { margin-top: 12rem; }
    .logo-bi__color-code { bottom: 25rem; left: 30rem; }
    .logo-bi__download-btn-wrap { margin-top: 60rem; }
    .logo-bi__download-btn { width: 260rem; padding: 20rem 25rem 16rem; -webkit-box-shadow: inset 0 0 0 2rem #fff; box-shadow: inset 0 0 0 2rem #fff; }    
    .logo-bi__download-btn .jt-guide--icon { width: 12rem; top: 20rem; right: 25rem; }
    html.ios .logo-bi__download-btn { padding: 19rem 25rem 17rem; }
    html.ios .logo-bi__download-btn .jt-guide--icon { top: 19rem; }

    .logo-slogan .jt-marquee-wrap { margin-bottom: 80rem; }
    .logo-slogan h3 { margin-top: 10rem; }
    .logo-slogan p { margin-top: 22rem; }
    .logo-slogan p br { display: none; }
    .logo-slogan__box { width: -webkit-calc(100% - 48rem); width: calc(100% - 48rem); margin-top: 40rem; }
    .logo-slogan__bg-box { margin-top: -70rem; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; }

    /* STORY */
    body.page-template-brand-story .global-container > #footer { display: none; }
    body.page-template-brand-story #footer { height: 100%; padding-top: 76rem; position: relative; -webkit-transform: none; -ms-transform: none; transform: none; }
    body.page-template-brand-story .footer__inner { height: 100%; }
    body.page-template-brand-story .footer__symbol { top: inherit; bottom: -70rem; }
    body.page-template-brand-story .footer-menu-nav { margin-bottom: 0; position: relative; top: -webkit-calc(50% - 62rem); top: calc(50% - 62rem); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
    body.page-template-brand-story .footer__menu-wrap { position: absolute; bottom: 13rem; }
    body.page-template-brand-story .copyright { position: absolute; bottom: 0; }

    .story-section__group { display: block; }
    .story-section__line{ width: 100%; height: 8rem; margin-top: -4rem; margin-left: 0; left: 0; top: -webkit-calc(50% + 38rem); top: calc(50% + 38rem); }
    .story-section__group > .story-section__content { width: 100%; height: -webkit-calc(50% - 38rem); height: calc(50% - 38rem); position: absolute; left: 0; }
    .story-section__group > .story-section__content:first-child { top: 76rem; }
    .story-section__group > .story-section__content:nth-child(2) { bottom: 0; }
    .story-section__group .story-section__content-inner { padding-left: 32rem; padding-right: 32rem; padding-top: 0; }
    .story-section__group .story-section__content-inner p { min-height: unset; }
    .story-section-06 .story-section__line { width: 8rem; margin-left: -4rem; }

    /* PLAY */
    .play-vid-container h2 {margin-top: 25rem;}
    .play-vid-container p {margin-top: 10rem;}

}



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

    .story-section .jt-en-text--04 { font-size: 32rem; }
    .story-section .jt-ko-text--04 { font-size: 24rem; }
}