@charset "utf-8";

/*
 * File       : rwd-layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 2000px
 * 02) 1800px
 * 03) 1480px
 * 04) 1023px
 * 05) 860px
 * 06) 540px
 */



/* **************************************** *
 * 2000px
 * **************************************** */
@media (min-width: 2000px){

    html { font-size: 0.05254860746190225vw; }

} /* 2000px */



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

    .wrap { max-width: inherit; margin: 0 160rem; }

    /* HEADER */
    #logo { width: 216rem; height: 41rem; top: 41rem; }

    /* FOOTER */
    #footer { padding-top: 495rem; }
    .footer__symbol { width: 280rem; }

    .copyright { font-size: 28rem; }

    /* SCROLL */
    .go-top { width: 78rem; }

} /* 1800px */



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

    html { font-size: 0.06756756756756757vw; }

    /* LAYOUT */
    .global-sound { padding: 8rem 0; top: 38rem; }
    .global-sound__equalizer { width: 36rem; }

    /* HEADER */
    #header { height: 110rem; }

    #logo { width: 192rem; height: 36rem; top: 37rem; }

    .menu-container { right: 106rem; }
    #menu > li > a { padding: 12rem 28rem; font-size: 19rem; }
    .sub-menu__outer { width: 190rem; margin-left: -95rem; }
    #menu > li > .sub-menu__outer > ul > li > a { padding: 12rem 25rem; font-size: 17rem; }
    #menu > li > .sub-menu__outer > ul > li:first-child > a { padding-top: 26rem; }
    #menu > li > .sub-menu__outer > ul > li:last-child > a { padding-bottom: 24rem; }

    .menu-container__ball { top: 4rem; }

    .minimize .menu-container { top: 23rem; }
    .minimize .global-sound { top: 30rem; }

    /* FOOTER */
    #footer { padding-top: 440rem; }
    .footer__symbol { width: 260rem; top: 188rem; }

    .footer__menu-wrap { bottom: -3rem; }
    .footer__menu > li > a { padding: 0 12rem; }
    .footer__menu > li > a > span { padding: 5rem 0; }

    .footer__certificate { width: 120rem; left: 165rem; bottom: -3rem; }

    .copyright { font-size: 25rem; }

    /* SCROLL */
    .go-top { width: 70rem; bottom: 2rem; }
    .go-down { width: 58rem; right: 38rem; }

    /* CONTAINER */
    .main-container { padding-top: 200rem; }

    /* PAGE */
    .article-visual__title {padding-bottom: 40rem;}

    /* PRIVACY */
    .article--privacy .article-header { padding-bottom: 50rem; }
    .privacy-select { top: -110rem; }
    .privacy-modal__close { width: 40rem; height: 40rem; top: 60rem; right: 60rem; }
    .privacy-modal__close svg { line-height: 40rem; }
    
    body.privacy-popup-open .mfp-wrap .main-container { padding-top: 200rem; padding-bottom: 180rem; }

    /* 404 */
    .error-404 { padding: 320rem 0 125rem; }
    .error-404__inner h1 { font-size: 72rem; }
    .error-404__inner p { font-size: 17rem; padding: 28rem 0 60rem}

    /* MOTION LINES */
    .sub-lines { height: 160rem; margin-top: 200rem; margin-bottom: 60rem; }
    .sub-lines > span { width: 30rem; }

    .sub-vertical-line { width: 16rem; }

} /* 1480px */



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

    html { font-size: 0.09775171065493645vw; }
    
    /* LAYOUT */
    .wrap { margin: 0 40rem; }
    .wrap-middle { max-width: inherit; margin: 0 40rem;}

    .global-sound { padding: 6rem 0; top: 25rem; right: 105rem; font-size: 0; }

    .global-sound__equalizer { display: inline-block; vertical-align: middle; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

    .global-sound__label { display: inline-block; vertical-align: middle; width: 89rem; height: 14rem; margin-left: 8rem; margin-bottom: 3rem; position: relative; }
    .global-sound__label > span { display: block; position: absolute; font-size: 15rem; line-height: 1; font-weight: 400; color: #fff; -webkit-transition: opacity .3s; transition: opacity .3s; }
    .global-sound__label > span > i { font-style: normal; }
    .global-sound.global-sound--play .global-sound__label > span.global-sound__label--on { opacity: 0; }
    .global-sound.global-sound--pause .global-sound__label > span.global-sound__label--off { opacity: 0; }

    .global-sound__info-message { display: none; }

    /* HEADER */
    #header { height: 80rem; }
    
    #logo { width: 173rem; height: 33rem; top: 23rem; left: 40rem; }
    
    .menu-container { display: none; }
    
    #small-menu-btn { display: block; width: 34rem; height: 34rem; position: absolute; top: 23rem; right: 40rem; z-index: 550; cursor: pointer; }
    .small-menu-btn__line { display: block; width: 100%; height: 3rem; position: absolute; left: 0; background: #fff; }
    .small-menu-btn__line--01 { top: 10rem; }
    .small-menu-btn__line--02 { bottom: 10rem; }

    #small-menu-container { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 650; background: #020A0A; overflow: hidden; }
    .small-menu-container__inner { width: 100%; height: 100%; padding: 87rem 50rem 32rem; position: relative; z-index: 2; overflow-y: scroll; }
    .small-menu-nav { display: block; max-width: 325rem; }
    #small-menu { position: relative; }
    #small-menu li { display: block; position: relative; }
    #small-menu a { display: block; position: relative; line-height: 1.77; font-weight: 400; letter-spacing: 0.05em; color: #fff; text-transform: uppercase; }
    #small-menu > li > a { padding: 17rem 0 11rem; font-size: 22rem; }
    #small-menu > li > a > span { position: relative ;}
    #small-menu > li > a > span:before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; top: 4rem; right: -11rem; background: #fff; opacity: 0; }
    #small-menu > li > ul { display: none; margin-bottom: 16rem; border: 2rem solid #fff; }
    #small-menu > li > ul > li > a { padding: 9rem 28rem; font-size: 18rem; }
    #small-menu > li > ul > li:first-child > a { padding-top: 24rem; }
    #small-menu > li > ul > li:last-child > a { padding-bottom: 24rem; }
    #small-menu > li > ul > li > a > span { position: relative; }
    #small-menu > li > ul > li > a > span:before { content: ''; display: block; width: 100%; height: 2rem; position: absolute; left: 0; bottom: -6rem; background: #fff; opacity: 0; }
    #small-menu > li.current-menu-ancestor > a > span:before, 
    #small-menu > li.current-menu-item > a > span:before {opacity: 1;}
    #small-menu > li > ul > li.current-menu-item > a > span:before { opacity: 1; }
    html.ios #small-menu > li > a > span:before { top: 10rem; }

    .minimize#header { height: 80rem; }
    .minimize #logo { width: 173rem; height: 33rem; top: 23rem; }
    .minimize .global-sound { top: 25rem; }

    body.open-menu-fixed { width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
    body.open-menu #header { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
    body.open-menu--minimize #header { background: #020A0A !important; border-bottom-color: #fff;}
    body.open-menu #small-menu-btn { z-index: 651; }
    
    /* FOOTER */
    #footer { padding: 360rem 40rem 40rem; }
    .footer__symbol { width: 192rem; top: 170rem; }
    
    .footer__menu-wrap { position: relative; display: inline-block; vertical-align: top; bottom: auto; margin-bottom: 18rem; }
    .footer__menu > li > a { padding: 0 10rem; font-size: 15rem; }

    .footer__certificate { position: relative; display: inline-block; vertical-align: top; left: auto; bottom: 2rem; margin-left: 23rem; width: 110rem; }
    
    .copyright { font-size: 22rem; }
    
    /* SCROLL */
    .go-top { width: 56rem; right: -9rem; bottom: 3rem; }
    .go-down { width: 48rem; right: 33rem; bottom: 33rem; }
    
    /* CONTAINER */
    .main-container { padding-top: 160rem; }
    
    /* PAGE */
    .article-header { padding-bottom: 56rem; }
    .article-visual__title {padding-bottom: 36rem;}

    /* PRIVACY */
    .article--privacy .article-header { padding-bottom: 40rem; }
    .privacy-select { top: -95rem; }
    .privacy-modal__close { width: 34rem; height: 34rem; top: 40rem; right: 40rem;}
    .privacy-modal__close svg { line-height: 34rem; }

    body.privacy-popup-open .mfp-wrap .main-container { padding-top: 160rem; padding-bottom: 150rem; }

    /* 404 */
    .error-404 { padding: 300rem 0 95rem; }
    .error-404__inner { padding: 0 40rem; }
    .error-404__inner h1 { font-size: 60rem; }
    .error-404__inner p { font-size: 15rem; padding: 24rem 0 56rem; }

    /* MOTION LINES */
    .sub-lines { height: 120rem; margin-top: 160rem; margin-bottom: 50rem; }
    .sub-lines > span { width: 25rem; }

    .sub-vertical-line { width: 12rem; }

} /* 1023px */



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

    html { font-size: 0.13020833333333335vw; }

    /* LAYOUT */
    body { font-family: sans-serif; }
    [lang="en"] { font-family: 'AnekLatin', sans-serif; }

    .wrap, .wrap-middle { margin: 0 32rem; }
    .wrap-narrow { max-width: inherit; margin: 0 32rem; }

    .global-sound { right: 87rem; }
    .global-sound__info-message { right: -56rem; }
    .global-sound__info-message span br { display: none; }

    /* HEADER */
    #logo { left: 32rem; }
    #small-menu-btn { right: 32rem; }

    /* FOOTER */
    #footer { padding: 260rem 32rem 36rem; }
    .footer__symbol { width: 170rem; top: 146rem; }

    .footer__menu-wrap { margin-bottom: 14rem; }
    .footer__menu > li > a { padding: 5rem 10rem; font-size: 14rem; }
    
    .footer__certificate { bottom: -2rem; margin-left: 19rem; width: 105rem; }

    .copyright { font-size: 18rem; text-align: left; }

    /* SCROLL */
    .go-top { width: 48rem; right: -8rem; }
    .go-down { width: 40rem; right: 25rem; bottom: 32rem; }

    /* CONTAINER */
    .main-container { padding-top: 150rem; }

    /* PAGE */
    .article-header { padding-bottom: 40rem;}
    .article-visual__title {padding-bottom: 32rem;}

    .article-visual__bg--large { display: none; }
    .article-visual__bg--small { display: block; }
    .article-visual:after { background: rgba(2,10,10,0.2); }

    /* PRIVACY */
    html.iframe body.page-template-privacy .main-container { padding-bottom: 120rem; }

    .article--privacy .article-header { padding-bottom: 30rem; }
    .privacy-select { top: -82rem; }
    .privacy-modal__close { top: 32rem; right: 32rem;}

    body.privacy-popup-open .mfp-wrap .main-container { padding-top: 130rem; padding-bottom: 120rem; }

    /* 404 */
    .error-404 { padding: 280rem 0 90rem; }
    .error-404__inner { padding: 0 32rem; }
    .error-404__inner h1 { font-size: 50rem; }
    .error-404__inner p { font-size: 14rem; padding: 22rem 0 50rem; }

    /* MOTION LINES */
    .sub-lines { height: 90rem; margin-top: 120rem; margin-bottom: 40rem; }
    .sub-lines > span { width: 18rem; }

    .sub-vertical-line { width: 10rem; }

} /* 860px */



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

    html { font-size: 0.26666666666666665vw; }

    /* LAYOUT */
    .wrap, .wrap-middle, .wrap-narrow { margin: 0 24rem; }

    br.smbr { display: block; }

    .global-sound { padding: 4rem 0; right: 56rem; top: 24rem; }

    .global-sound__equalizer { -webkit-transform: scale(0.65); -ms-transform: scale(0.65); transform: scale(0.65); }
    .global-sound__label { width: 76rem; height: 10rem; margin-left: 3rem; margin-bottom: 3rem; }
    .global-sound__label > span { font-size: 12rem; }

    .global-sound__info-message { right: -32rem; }

    /* HEADER */
    #header { height: 76rem; }

    #logo { width: 133rem; height: 26rem; left: 24rem; top: 25rem; }

    #small-menu-btn { width: 32rem; height: 32rem; top: 22rem; right: 24rem; }
    .small-menu-btn__line--01 { top: 9rem; }
    .small-menu-btn__line--02 { bottom: 9rem; }

    .small-menu-container__inner {padding-left: 24rem;padding-right: 24rem;}
    .small-menu-nav {max-width: inherit;}
    #small-menu > li > a { padding: 10rem 0 8rem; }
    #small-menu > li > ul > li > a { padding: 8rem 24rem; }
    #small-menu > li > ul > li:first-child > a { padding-top: 22rem; }
    #small-menu > li > ul > li:last-child > a { padding-bottom: 22rem; }
    #small-menu > li > ul > li > a > span:before { content: ''; display: block; width: 100%; height: 2rem; position: absolute; left: 0; bottom: -4rem; background: #fff; opacity: 0; }

    .minimize#header { height: 76rem; }
    .minimize #logo { width: 133rem; height: 26rem; top: 25rem; }
    .minimize .global-sound { top: 24rem; }

    /* FOOTER */
    #footer { padding: 95rem 24rem 30rem; }
    .footer__symbol { width: 130rem; top: inherit; bottom: -70rem; }

    .footer-menu-nav { display: block; margin-bottom: 148rem; }
    #footer-menu > li { font-size: 0; text-align: center; }
    #footer-menu > li > a { display: inline-block; padding: 5rem 0; font-size: 22rem; line-height: 1.77; font-weight: 400; letter-spacing: 0.05em; color: #fff; }
    #footer-menu > li > a > span { position: relative ;}
    #footer-menu > li > a > span:before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; top: 5rem; right: -11rem; background: #fff; opacity: 0; }
    #footer-menu > li.current-page-ancestor > a > span:before,
    #footer-menu > li.current-menu-item > a > span:before { opacity: 1; }
    html.ios #footer-menu > li > a > span:before { top: 10rem; }

    .footer__menu-wrap { margin-bottom: 12rem; }
    .footer__menu > li > a { padding: 3rem 10rem; }
    .footer__menu > li > a > span { padding: 3rem 0; }
    .footer__menu > li > a > span:after { height: 2rem; }

    .footer__certificate { bottom: -1rem; margin-left: 15rem; width: 95rem; }

    .copyright { font-size: 11rem; text-align: left; }

    /* SCROLL */
    .go-top { display: none; }
    .go-down { width: 40rem; right: 18rem; bottom: 30rem; }

    /* CONTAINER */
    .main-container { padding-top: 130rem; }

    /* PAGE */
    .article-header { padding-bottom: 30rem; }
    .article-visual__title {padding-bottom: 28rem;}

    /* PRIVACY */
    .article--privacy .article-header { padding-bottom: 30rem; }
    .privacy-modal__close { width: 30rem; height: 30rem; top: 24rem; right: 24rem;}
    .privacy-modal__close svg { line-height: 30rem; }
    .privacy-select { position: relative; top: auto; right: auto; margin-bottom: 30rem; margin-bottom: 25rem; }

    body.privacy-popup-open .mfp-wrap .main-container { padding-top: 100rem; padding-bottom: 90rem; }

    /* 404 */
    .error-404 { padding: 260rem 0 85rem; }    
    .error-404__inner { padding: 0 24rem; }
    .error-404__inner h1 { font-size: 36rem; }
    .error-404__inner p { font-size: 13rem; padding: 18rem 0 44rem; }

    /* MOTION LINES */
    .sub-lines { height: 60rem; margin-top: 80rem; margin-bottom: 30rem; }
    .sub-lines > span { width: 10rem; }
    
    .sub-vertical-line { width: 8rem; }

} /* 540px */



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

    .article-visual .jt-en-text--02 { font-size: 48rem; }
    .article-visual__title { padding-bottom: 0; }
}