@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) BARBA + TRANSITION
 * 03) INTRO
 * 04) HEADER
 * 05) FOOTER
 * 06) CONTAINER
 * 07) PAGE
 * 08) PRIVACY
 * 09) 404
 * 10) BROWSER SUPPORT
 * 11) SCROLL
 * 12) KEYFRAMES
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
html {font-size: 6.25%;}
html.safari.desktop {font-size: 0.05254860746190226vw;}

body {overflow-x: hidden;font-family: 'itc-avant-garde-gothic-pro', sans-serif;font-size: 16rem;word-break: keep-all;background: #000;}
a {color: #fff;text-decoration: none;}
[data-font="secondary"] {font-family: 'Montserrat', sans-serif;}

/* global */
.global-container {margin-bottom: 70vh;position: relative;background: #000;z-index: 2;}

.global-pagination {width: 100%;height: 70vh;position: fixed;bottom: 0;left: 0;z-index: 1;background: #fff;overflow: hidden;}
.global-pagination__data {display: table;width: 100%;height: 100%;position: relative;}
.global-pagination__data-inner {display: table-cell;vertical-align: middle;}
.global-pagination__data a {display: block;padding-bottom: 28rem;padding-right: 240rem;position: relative;}
.global-pagination__data span {display: block;margin-bottom: 28rem;font-size: 20rem;font-weight: 700;letter-spacing: 0.05em;line-height: 1.2;color: #000;}
.global-pagination__data p {font-size: 60rem;font-weight: 500;line-height: 1.34;color: #000;}
.global-pagination__data .jt-btn--circle {position: absolute;right: 0;top: 50%;margin-top: -94rem;}

/* WRAP */
.wrap {max-width: 1542rem;margin: 0 auto;position: relative;}
.wrap-narrow {max-width: 1200rem;margin: 0 auto;position: relative}



/* **************************************** *
 * BARBA + TRANSITION
 * **************************************** */
/* fix scroll */
#barba-wrapper {position: relative;overflow: hidden;}
.barba-container {display: block;}
.barba-container + .barba-container {display: none;}



/* **************************************** *
 * INTRO
 * **************************************** */
body.jt-intro--paly {position: fixed;overflow-y: scroll;}

#intro-container {display: none;position: fixed;top: 0;bottom: 0;right: 0;left: 0;background: #000;overflow: hidden;z-index: 9999;}
#intro-overlay {display: block;position: fixed;top: 0;bottom: 0;right: 0;left: 0;background: #000;overflow: hidden;z-index: 9999;}

.intro-transmit {width: 289rem;height: 260rem;position: absolute;top: 50%;left: 50%;margin-top: -130rem;margin-left: -144rem;overflow: hidden;}
.intro-transmit > div {position: absolute;background: no-repeat center center;background-size: cover;}
.intro-transmit > div.intro-transmit--front {width: 120rem;height: 139rem;left: 0;bottom: 0;background-image: url(../images/layout/intro-box.svg);z-index: 3;}
.intro-transmit > div.intro-transmit--back-hole {width: 120rem;height: 139rem;right: 0;top: 0;background-image: url(../images/layout/intro-box-hole.svg);z-index: 3;}
.intro-transmit > div.intro-transmit--back-door {width: 120rem;height: 139rem;right: 0;top: 0;background-image: url(../images/layout/intro-box-door.svg);z-index: 1;}
.intro-transmit > div.intro-transmit--ball {width: 39rem;height: 26rem;z-index: 2;opacity: 0;}
.intro-transmit > div.intro-transmit--ball-first {left: 50rem;top: 151rem;background-image: url(../images/layout/intro-ball-first.svg);}
.intro-transmit > div.intro-transmit--ball-second {left: 221rem;top: 58rem;background-image: url(../images/layout/intro-ball-second.svg);}

.intro-progress-wrap {display: block;width: 200rem;height: 18rem;position: absolute;left: 50%;bottom: 80rem;margin-left: -100rem;overflow: hidden;background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,1)),color-stop(6%, rgba(255,255,255,1)),color-stop(14%, rgba(255,247,46,1)),color-stop(22%, rgba(239,81,73,1)),color-stop(42%, rgba(0,0,0,1)),color-stop(57%, rgba(15,29,57,1)),to(rgba(62,120,238,1)));background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 6%,rgba(255,247,46,1) 14%,rgba(239,81,73,1) 22%,rgba(0,0,0,1) 42%,rgba(15,29,57,1) 57%,rgba(62,120,238,1) 100%);background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 6%,rgba(255,247,46,1) 14%,rgba(239,81,73,1) 22%,rgba(0,0,0,1) 42%,rgba(15,29,57,1) 57%,rgba(62,120,238,1) 100%);border: 4rem solid #fff;border-radius: 4rem;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.intro-progress {display: block;width: 100%;height: 100%;position: absolute;right: 0;background: #000;}



/* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%;height: 144rem;position: fixed;top: 0;left: 0;border-bottom: 4rem solid transparent;z-index: 500;-webkit-transition: height .3s, background .3s, border .3s;transition: height .3s, background .3s, border .3s;}
.header__inner {height: 100%;position: relative;}

/* LOGO */
#logo {width: 116rem;height: 33rem;position: absolute;left: 100rem;top: 60rem;-webkit-transition: all .3s;transition: all .3s;}
#logo a {display: block;width: 100%;height: 100%;}
#logo a svg, #logo a img {display: block;width: 100%;height: 100%;}

/* MENU */
.menu-container {display: block;position: absolute;top: 45rem;right: 72rem;font-size: 0;line-height: 1;-webkit-transition: top .3s;transition: top .3s;}
#menu {display: block;}
#menu:after {content: '';display: table;clear: both;}
#menu a {display: block;position: relative;line-height: 1.4;}

/* 1depth */
#menu > li {display: inline-block;vertical-align: top;position: relative;}
#menu > li > a {padding: 16rem 30rem;position: relative;font-size: 18rem;font-weight: 700;color: #fff;}

/* 2depth */
#menu ul.sub-menu {opacity: 0;visibility: hidden;-webkit-transition: opacity .3s cubic-bezier(.05, .9, .32, .96);transition: opacity .3s cubic-bezier(.05, .9, .32, .96);}
#menu > li:hover > ul {opacity: 1;visibility: visible;}
#menu > li > ul {width: 220rem;position: absolute;left: 50%;margin-left: -110rem;top: 100%;background: #000;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#menu > li > ul > li {display: block;}
#menu > li > ul > li + li {margin-top: -2rem;}
#menu > li > ul > li > a {padding: 21rem 17rem 17rem;font-size: 14rem;line-height: 1.66;font-weight: 700;letter-spacing: 0.05em;color: #fff;text-transform: uppercase;background: #000;border: 2px solid #fff;-webkit-transition: background .3s, color .3s;transition: background .3s, color .3s;}
#menu > li > ul > li > a:after {content: '';width: 0;height: 0;position: absolute;right: 0;top: 0;border: 10rem solid;border-color: #fff #fff transparent transparent;opacity: 0;}
#menu > li > ul > li.active > a:after {opacity: 1;}
html.desktop #menu > li > ul > li > a:hover {color: #000;background: #fff;}

html.ios #menu > li > a {padding-top: 14rem;padding-bottom: 18rem;}
html.ios #menu > li > ul > li > a {padding-top: 20rem;padding-bottom: 20rem;}

/* header ball */
#menu-ball {display: block;width: 6rem;height: 6rem;position: absolute;top: -3rem;left: 50%;margin-left: -3rem;}
#menu-ball > span {display: block;width: 100%;height: 100%;position: relative;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #fff;border-radius: 50%;}

/* mobile */
#small-menu-btn, #small-menu-container {display: none;}

/* minimize */
.minimize#header {height: 96rem;background: #000;border-bottom-color: #fff;}
.minimize #logo {width: 106rem;height: 30rem;top: 31rem;}
.minimize .menu-container {top: 22rem;}



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {width: 100%;padding: 260rem 55rem 118rem;position: relative;background: #000;}
.footer__draw-line {width: 100%;height: 4rem;position: absolute;top: 0;left: 0;background: #fff;}
.footer__inner {position: relative;}

.footer__contact {text-align: center;}
.footer__contact a {display: inline-block;font-size: 44rem;line-height: 1.2;font-weight: 700;color: #fff;}

.footer__sns-wrap {margin-top: 126rem;}
.footer__sns {font-size: 0;line-height: 1;text-align: center;}
.footer__sns > li {display: inline-block;width: 182rem;height: 182rem;margin: 0 20rem;}
.footer__sns > li:first-child {margin-left: 0;}
.footer__sns > li:last-child {margin-right: 0;}
.footer__sns > li > a {display: block;width: 100%;height: 100%;position: relative;font-size: 26rem;font-weight: normal;text-align: center;line-height: 182rem;text-indent: 1rem;color: #000;}
.footer__sns > li > a:after {display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;font-family: 'jt-font';z-index: 2;}
.footer__sns > li > a > i {display: block;width: 100%;height: 100%;position: absolute;left: 0;z-index: 1;background: url(../images/icon/icon-gear.svg) no-repeat center center;background-size: cover;-webkit-animation: spin-frames 10s linear infinite;animation: spin-frames 10s linear infinite;-webkit-animation-play-state: paused;animation-play-state: paused;}
.footer__sns > li.medium > a:after {font-size: 28rem;content: '\e906';}
.footer__sns > li.youtube > a:after {content: '\e905';}
.footer__sns > li.twitter > a:after {content: '\e919';}
.footer__sns > li.facebook > a:after {font-size: 28rem;content: '\e916';}
.footer__sns > li.github > a:after {font-size: 34rem;content: '\e90e';}
html.desktop .footer__sns > li > a:hover > i {-webkit-animation-play-state: running;animation-play-state: running;}

.footer__bottom {padding-top: 184rem;position: relative;}

.footer__addr {position: absolute;left: 0;bottom: -9rem;z-index: 1;}
.footer__addr p {font-size: 16rem;font-weight: 700;line-height: 1.63;letter-spacing: 0.05em;color: #fff;}

.footer__menu-wrap {position: absolute;right: 0;bottom: 0;z-index: 2;}
.footer__menu > li {display: block;width: 271rem;}
.footer__menu > li > a {display: block;padding: 20rem 0 17rem;position: relative;font-size: 20rem;font-weight: 700;letter-spacing: 0.05em;line-height: 1.35;color: #fff;}
.footer__menu > li > a:after {content: '';width: 100%;height: 2rem;position: absolute;left: 0;bottom: 0;background: #c4c4c4;}
html.mac .footer__menu > li > a, html.ios .footer__menu > li > a {padding-bottom: 20rem;}

.copyright {font-size: 0;line-height: 1;text-align: center;}
.copyright figure {display: inline-block;height: 27rem;}
.copyright figure a {display: block;}
.copyright figure img {display: block;width: auto;height: 100%;}



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container {padding-top: 326rem;padding-bottom: 260rem;}



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article-header {padding-bottom: 118rem;text-align: center;}
.article-title {font-size: 100rem;font-weight: 700;line-height: 1.1;letter-spacing: 0.03em;color: #fff;}
.article-desc {display: block;margin-top: 61rem;font-size: 42rem;font-weight: 500;line-height: 1.66;color: #fff;}
.article-desc a {display: inline-block;color: #fff;}
.article-desc a > span {display: inline-block;position: relative;}
.article-desc a > span:before, .article-desc a > span:after {content: '';display: block;height: 3rem;position: absolute;bottom: 10rem;background: #fff;-webkit-transition: width .4s cubic-bezier(0.22, 0.61, 0.36, 1);transition: width .4s cubic-bezier(0.22, 0.61, 0.36, 1);}
.article-desc a > span:before {width: 100%;right: 0;-webkit-transition-delay: .2s;transition-delay: .2s;}
.article-desc a > span:after {width: 0;left: 0;-webkit-transition-delay: 0s;transition-delay: 0s;}
html.desktop .article-desc a:hover > span:before {width: 0;-webkit-transition-delay: 0s;transition-delay: 0s;}
html.desktop .article-desc a:hover > span:after {width: 100%;-webkit-transition-delay: .2s;transition-delay: .2s;}
.article-sup {display: block;margin-bottom: 12rem;font-size: 32rem;font-weight: 700;letter-spacing: 0.05em;line-height: 1.35;color: #fff;}

/* PAGE BODY */
.article-body {position: relative;min-height: 360rem;}

/* PAGE VISUAL */
.article-visual {width: 100%;height: 100vh;max-height: 954rem;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;position: relative;}
.article-visual__inner {width: 100%;padding-top: 138rem;position: relative;}

.article-visual__gradient {width: 818rem;height: 1829rem;position: absolute;right: 0;top: 0;background: url(../images/layout/article-gradient-dark.png) no-repeat center center;background-size: cover;}



/* **************************************** *
 * PRIVACY
 * **************************************** */
.privacy-intro {margin-bottom: 100rem;}

.privacy-effective {margin-bottom: 20rem;font-size: 18rem;font-weight: 300;line-height: 1.77;color: #fff;}

.privacy-data {margin-bottom: 80rem;}
.privacy-data:last-child {margin-bottom: 0;}
.privacy-data > *:last-child {margin-bottom: 0;}

.privacy-data h3 {margin-bottom: 22rem;font-size: 24rem;font-weight: 700;line-height: 1.5;letter-spacing: 0.3rem;color: #fff;}
.privacy-data p {margin-bottom: 22rem;font-size: 18rem;font-weight: 300;line-height: 2;color: #fff;}
.privacy-data b {font-size: 18rem;font-weight: 700;line-height: 2;color: #fff;}
.privacy-data > b {display: block;margin-bottom: 5rem;}
.privacy-data em {font-style: italic;text-decoration: underline;}
.privacy-data a {color: #fff;border-bottom: 1rem solid rgba(255, 255, 255, .5);word-break: break-all;}
.privacy-data table {width: 100%;margin-top: 32rem;margin-bottom: 22rem;border-top: 1rem solid rgba(255, 255, 255, .5);}
.privacy-data table th, .privacy-data table td {width: 33.33%;padding: 28rem 32rem 24rem;vertical-align: middle;font-size: 18rem;font-weight: 300;line-height: 2;color: #fff;border-bottom: 1rem solid rgba(255, 255, 255, .5);border-right: 1rem solid rgba(255, 255, 255, .5);}
.privacy-data table th:first-child, .privacy-data table td:first-child {border-left: 1rem solid rgba(255, 255, 255, .5);}
.privacy-data table th {background: #ffffff;background: rgba(255, 255, 255, .2);}
.privacy-data li {margin-bottom: 10rem;padding-left: 16rem;position: relative;font-size: 18rem;font-weight: 300;line-height: 2;color: #fff;}
.privacy-data li:last-child {margin-bottom: 0;}
.privacy-data ul {margin-bottom: 22rem;}
.privacy-data ul:last-child {margin-bottom: 0;}
.privacy-data ul > li:before {content: '';display: block;width: 4rem;height: 4rem;position: absolute;left: 0;top: 13rem;background: #fff;}
.privacy-data ul > li > ul {margin-top: 10rem;}
.privacy-data ul > li > ul > li:before {content: '-';width: auto;height: auto;top: 0;background: transparent;}
html.mac .privacy-data ul > li:before {top: 17rem;}
html.mac .privacy-data ul > li > ul > li:before {top: 0;}
html.ios .privacy-data ul > li:before {top: 15rem;}
html.ios .privacy-data ul > li > ul > li:before {top: 0;}



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .main-container {padding-top: 0;padding-bottom: 0;}

.error-404 {padding: 337rem 0 282rem;position: relative;text-align: center;}
.error-404 h1 {font-size: 60rem;font-weight: 700;line-height: 1.2;color: #fff;}
.error-404 h1 br {display: none;}
.error-404 p {margin: 23rem 0 100rem;font-size: 18rem;font-weight: 300;line-height: 1.77;color: #fff;}
.error-404__control {font-size: 0;}

.error-404__pic {width: 534rem;height: 531rem;position: absolute;left: 0;bottom: 0;overflow: hidden;}
.error-404__pic > figure {position: absolute;}
.error-404__pic > figure img {display: block;width: 100%;height: auto;}
.error-404__pic > figure.error-404__pic--chopsticks-node {width: 386rem;top: 0;right: 0;z-index: 2;}
.error-404__pic > figure.error-404__pic--chopsticks-left {width: 1018rem;top: 0;right: 265rem;z-index: 1;}
.error-404__pic > figure.error-404__pic--chopsticks-right {width: 1018rem;top: 335rem;right: 60rem;z-index: 3;}



/* **************************************** *
 * BROWSER SUPPORT
 * **************************************** */
.browser-support-popup {display: none;position: fixed;top: 40rem;left: 0;right: 0;width: 100%;max-width: 1000rem;margin: auto;padding: 45rem 60rem 42rem;background-color: #000;border: 4rem solid #fff;z-index: 999;}
.browser-support-popup .browser-support-content {padding-left: 80rem;position: relative;}
.browser-support-popup .browser-support-content:before {display: block;width: 50rem;height: 50rem;position: absolute;left: 0rem;top: 2rem;font-family: 'jt-font';content: '\e950';font-size: 40rem;text-indent: 1rem;text-align: center;line-height: 50rem;color: #000;background: #fff;border-radius: 50%;}
.browser-support-popup .browser-support-content p {font-size: 18rem;font-weight: 500;letter-spacing: 0.05em;line-height: 1.65;color: #fff;}
.browser-support-popup .browser-support-close {width: 35rem;height: 35rem;margin: 0;padding: 0;position: absolute;top: 22rem;right: 22rem;background: transparent;border: none;cursor: pointer;}
.browser-support-popup .browser-support-close:after {width: 100%;height: 100%;position: relative;font-family: 'jt-font';content: '\e946';font-size: 23rem;font-weight: normal;line-height: 35rem;text-align: center;color: #fff;}



/* **************************************** *
 * SCROLL
 * **************************************** */
.scroll-down {display: block;width: 60rem;height: 72rem;position: absolute;bottom: 30rem;right: 75rem;z-index: 2;}
.scroll-down__arrow {display: block;width: 100%;position: relative;}
.scroll-down__arrow:after {display: block;margin-top: 6rem;font-family: 'jt-font';content: '\e921';font-size: 20rem;font-style: normal;font-weight: normal;text-align: center;line-height: 1;color: #fff;}



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@-webkit-keyframes marquee-frames {
    from {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
@keyframes marquee-frames {
    from {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-webkit-keyframes marquee-angle-frames {
	from {
        -webkit-transform: translate(0%,0%);
                transform: translate(0%,0%);
    }
	to {
        -webkit-transform: translate(-100%,-50%);
                transform: translate(-100%,-50%);
    }
}
@keyframes marquee-angle-frames {
	from {
        -webkit-transform: translate(0%,0%);
                transform: translate(0%,0%);
    }
	to {
        -webkit-transform: translate(-100%,-50%);
                transform: translate(-100%,-50%);
    }
}

@-webkit-keyframes spin-frames {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes spin-frames {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@-webkit-keyframes opacity-frames {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes opacity-frames {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes opacity-reverse-frames {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes opacity-reverse-frames {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes marquee-button-frames {
    from {
        -webkit-transform: translateX(-17%);
        transform: translateX(-17%)
    }
    to {
        -webkit-transform: translateX(-117%);
        transform: translateX(-117%)
    }
}
@keyframes marquee-button-frames {
    from {
        -webkit-transform: translateX(-17%);
        transform: translateX(-17%)
    }
    to {
        -webkit-transform: translateX(-117%);
        transform: translateX(-117%)
    }
}

@-webkit-keyframes marquee-button-mid-frames {
    from {
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%)
    }
    to {
        -webkit-transform: translateX(-120%);
        transform: translateX(-120%)
    }
}
@keyframes marquee-button-mid-frames {
    from {
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%)
    }
    to {
        -webkit-transform: translateX(-120%);
        transform: translateX(-120%)
    }
}