@charset "utf-8";

/*
 * File       : sub-brand.css
 * Author     : STUDIO-JT (Chaehee)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) LAYOUT
 * 2) IDENTITY
 */

 

/* **************************************** *
 * IDENTITY
 * **************************************** */
body.page-template-brand-identity .main-container { padding-top: 0; }

.identity-privilege__box { position: relative; display: block; margin: auto; width: 1176rem; margin-top: 62rem; z-index: 1; }
.identity-privilege__img { padding-top: 113.1%; }
.identity-privilege__content { position: absolute; top: 327rem; left: 0; width: 100%; text-align: center; }
.identity-privilege__content h2 { margin-bottom: 20rem; }
.identity-privilege__bg-box { position: relative; display: block; width: 806rem; margin-top: -372rem; }
.identity-privilege__bg-img { padding-top: 87.59%; }

.identity-vision { position: relative; margin-top: 299rem; }
.identity-vision__list { margin-top: 158rem; font-size: 0; text-align: center; }
.identity-vision__item { display: inline-block; vertical-align: top; width: 494rem; margin-right: 240rem; text-align: center; }
.identity-vision__item:last-child { margin-right: 0; }
.identity-vision__item h2 { margin-top: 78rem; }
.identity-vision__item p { margin-top: 18rem; }

.identity-vision__img { margin: 0 auto; }
.identity-vision__img svg { width: 100%; height: auto; }
.identity-vision__item:first-child .identity-vision__img { -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: Rotation; animation-name: Rotation; }

.identity-brand { position: relative; margin-top: 220rem; padding-bottom: 582rem; text-align: center; }
.identity-brand > .wrap { position: relative; z-index: 1; }
.identity-brand__img-wrap { width: 550rem; margin: 0 auto; }
.identity-brand__img { padding-top: 13.09%; }
.identity-brand h2 { margin-top: 50rem; }
.identity-brand p { margin-top: 20rem; }
.identity-brand__bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../images/sub/brand/identity-brand-bg.jpg) no-repeat bottom center; background-size: 100% auto; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1), -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1);}
.identity-brand__bg.animate { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.identity-value { padding-top: 200rem; text-align: center; }
.identity-value__desc { margin-top: 21rem; }
.identity-value__list { margin-top: 160rem; margin-left: 52rem; margin-right: 52rem; font-size: 0; }
.identity-value__item { display: inline-block; vertical-align: top; width: 25%; }
.identity-value__item b { display: block; margin-top: 67rem; }
.identity-value__item p { margin-top: 12rem; }
.identity-value__illust { width: 156rem; height: 156rem; margin: 0 auto; }
.identity-value__illust svg { width: 100%; height: auto; overflow: visible; }
.identity-value__item--moment .identity-value__illust { -webkit-filter: blur(20rem); filter: blur(20rem); }
html.safari .identity-value__item--moment .identity-value__illust { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
html.ios .identity-value__item--moment .identity-value__illust { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }



/* **************************************** *
 * LOGO
 * **************************************** */
body.page-template-brand-logo .main-container { padding-top: 0; }

.logo-bi { padding-top: 160rem; padding-bottom: 203rem; }
.logo-bi__section > h2 { margin-top: 41rem; }
.logo-bi__section > p { margin-top: 20rem; }

.logo-bi__symbol-img-wrap { width: 332rem; margin: 0 auto; }
.logo-bi__symbol-img svg { width: 100%; height: auto; }
.logo-bi__symbol h2 { margin-top: 111rem; }

.logo-bi__logotype { margin-top: 160rem; }
.logo-bi__logotype-view { position: relative; width: 100%; height: 450rem; background: rgba(232,233,235,.1); overflow: hidden; }
.logo-bi__logotype-img-wrap { position: absolute; top: 50%; left: 50%; width: 675rem; margin: 0 auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.logo-bi__logotype-img-wrap:before { content: ''; display: block; width: 100vw; height: 100%; border-top: 1rem dashed #fff; border-bottom: 1rem dashed #fff; opacity: .3; position: absolute; top: -1rem; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.logo-bi__logotype-img-wrap:after { content: ''; display: block; width: -webkit-calc(100% + 70rem); width: calc(100% + 70rem); height: 100vh; border-left: 1rem dashed #fff; border-right: 1rem dashed #fff; opacity: .3; position: absolute; top: 50%; left: -36rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.logo-bi__logotype-img { padding-top: 12.9%; }

.logo-bi__color { margin-top: 160rem; }
.logo-bi__color-view { position: relative; width: 100%; height: 450rem; background: #09193E; padding: 51rem 50rem; }
.logo-bi__color-pantone { margin-top: 20rem; }
.logo-bi__color-code { position: absolute; bottom: 50rem; left: 50rem;}

.logo-bi__download-btn-wrap { text-align: center; margin-top: 99rem; }
.logo-bi__download-btn { position: relative; display: inline-block; vertical-align: top; width: 340rem; padding: 26rem 36rem 20rem 36rem; -webkit-box-shadow: inset 0 0 0 4rem #fff; box-shadow: inset 0 0 0 4rem #fff; text-align: left; -webkit-transition: background .3s, color .3s; transition: background .3s, color .3s; }
.logo-bi__download-btn .jt-guide--icon {position: absolute;top: 23rem;right: 34rem; width: 16rem; }
.logo-bi__download-btn .jt-guide--icon svg path { stroke: #fff; }
html.desktop .logo-bi__download-btn:hover { background: #fff; color: #000; }
html.desktop .logo-bi__download-btn:hover svg path { stroke: #000; }

.logo-slogan { text-align: center;}
.logo-slogan .jt-marquee-wrap { margin-bottom: 165rem; }
.logo-slogan__box { position: relative; display: block; margin: auto; width: 1176rem; margin-top: 99rem; z-index: 1; }
.logo-slogan__img { padding-top: 111.3%; }
.logo-slogan__bg-box { position: relative; display: block; width: 806rem; margin-top: -372rem; }
.logo-slogan__bg-img { padding-top: 87.59%; }
.logo-slogan h3 { margin-top: 22rem; }
.logo-slogan p { margin-top: 39rem; }



/* **************************************** *
 * STORY
 * **************************************** */
body.page-template-brand-story { overflow-y: scroll; }
html.mobile body.page-template-brand-story { overflow: hidden; }

body.page-template-brand-story .main-container { padding-top: 0; }
body.page-template-brand-story #footer { padding-top: 300rem; position: fixed; bottom: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); z-index: 3; }
body.page-template-brand-story .footer__symbol { top: 0; }

/* FULLPAGE */
.story-fullpage { position: fixed; width: 100%; height: 100%; }
.story-fullpage .article-visual { height: 100%; }
.story-fullpage-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(2, 10, 10, 0.6); opacity: 0; visibility: hidden; z-index: 2; -webkit-transition: opacity .6s; transition: opacity .6s; }
body.story-fullpage--show-footer .story-fullpage-overlay { opacity: 1; visibility: visible; }
.story-section { position: relative; overflow: hidden; width: 100%; height: 100%; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.story-section__parallax { width: 100%; height: 100%; position: relative; }
.story-section:nth-child(2) {background: #020A0A;}
.story-section:nth-child(3) .story-section__bg:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; }
.story-section:nth-child(5) .story-section__bg:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.2); z-index: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; }
.story-section__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; }
.story-section__group { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; z-index: 2; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; }
.story-section__line { display: block; width: 20rem; height: 100%; position: absolute; top: 0; left: 50%; background: #fff; margin-left: -10rem; font-style: normal; }
.story-section__group > .story-section__content { width: 50%; }
.story-section__group .story-section__content-inner { padding: 0 20rem; }
.story-section__group .story-section__content-inner p { margin-top: 10rem; }
.story-section__content { position: relative; display: table; height: 100%; width: 100%; z-index: 2; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; }
.story-section__content-inner { display: table-cell; vertical-align: middle; text-align: center; }
.story-section .jt-fullvid__poster .swiper-lazy { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.story-section-06 .story-section__line { display: block; width: 20rem; height: 38%; position: absolute; top: 0; left: 50%; background: #fff; margin-left: -10rem; }



/* **************************************** *
 * PLAY
 * **************************************** */
.play-vid-container + .play-vid-container { margin-top: 120rem; }
.play-vid-container h2 { margin-top: 40rem; line-height: 1.42; }
.play-vid-container h2 a { display: inline-block; vertical-align: top; position: relative; text-decoration: 1rem underline rgba(255,255,255,0.5); text-underline-offset: 10rem; transition: .3s; }
.play-vid-container h2 a:hover { text-decoration: 1rem underline rgba(255,255,255,1); }
.play-vid-container p { margin-top: 20rem; }
.play-vid-container .jt-embed-video__inner { padding-top: 56.25%;}
html.safari .play-vid-container h2 a { text-decoration: underline; }

.play-vid-img-wrap { position: relative; }
.play-vid-img { padding-top: 56.04%; }

html.ios .jt-embed-video__inner iframe {display: block;}
html.desktop.safari .jt-embed-video__inner iframe {display: block;}



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@-webkit-keyframes Rotation { 
  
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes Rotation {

    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}