@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) GLOBAL
 * 2) VISUAL
 * 3) PORTFOLIO
 * 4) SLOGAN
 * 5) PRODUCT
 * 6) PRESS
 * 7) TEAM
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
/* layout */
body.home .main-container {padding-top: 0;padding-bottom: 0;}

/* section */
.main-section {position: relative;}

/* section title */
.main-section__beginning {margin: 320rem 0 149rem;text-align: center;}
.main-section__beginning h2 {font-size: 80rem;font-weight: 700;line-height: 1.1;color: #fff;}
.main-section__beginning p {margin-top: 26rem;font-size: 20rem;font-weight: 300;line-height: 1.6;color: #fff;}

/* dynamic object area */
.main-dynamic {height: 100%;position: relative;}
.main-dynamic__inner {height: 100%;}

/* information riting */
.main-inform {padding: 0 120rem;text-align: center;}
.main-inform__cat {display: block;margin-bottom: 17rem;font-size: 20rem;font-weight: 700;line-height: 1.5;letter-spacing: 0.05em;color: #fff;}
.main-inform__cat sup {display: inline-block;vertical-align: text-top;margin-left: 6rem;margin-top: -2rem;font-size: 10rem;}
.main-inform__title {display: block;font-size: 60rem;font-weight: 700;line-height: 1.1;color: #fff;}
.main-inform__desc {display: block;margin-top: 24rem;font-size: 20rem;font-weight: 300;line-height: 1.6;color: #fff;}
.main-inform__control {margin-top: 100rem;font-size: 0;}
html.mac .main-inform__cat sup {margin-top: 4rem;}
html.ios .main-inform__cat sup {margin-top: 2rem;}



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual {height: 100vh;overflow: hidden;}

#main-visual__gl {width: 53.23%;height: 100%;position: absolute;top: 0;right: 0;z-index: 4;}
html.ie11 #main-visual__gl, html.mobile #main-visual__gl {display: none;}
#main-visual__gl--movie {display: none;width: 50.21%;height: 100%;position: absolute;top: 0;right: 0;z-index: 1;}
html.ie11 #main-visual__gl--movie, html.mobile #main-visual__gl--movie {display: block;}

.main-visual__letter {width: 100%;height: 100%;position: absolute;left: 0;top: 0;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;z-index: 3;}
.main-visual__letter__inner {width: 100%;padding-top: 110rem;}
.main-visual__letter h2 {font-size: 100rem;font-weight: 700;letter-spacing: 0.03em;line-height: 1.1;color: #fff;}
.main-visual__letter p {margin-top: 12rem;font-size: 32rem;font-weight: 700;letter-spacing: 0.05em;line-height: 1.35;color: #fff;}

.main-visual__gradient {width: 650rem;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
.main-visual__gradient > span {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: no-repeat center center;background-size: cover;-webkit-animation: 10s linear infinite;animation: 10s linear infinite;}
.main-visual__gradient > span.main-visual__gradient--light {background-image: url(../images/main/visual-bg-light-v2.png);-webkit-animation-name: opacity-reverse-frames;animation-name: opacity-reverse-frames;}
.main-visual__gradient > span.main-visual__gradient--dark {background-image: url(../images/main/visual-bg-dark-v2.png);-webkit-animation-name: opacity-frames;animation-name: opacity-frames;}

.main-visual__star {position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;z-index: 2;}
.main-visual__star > span {position: absolute;left: 0;bottom: 0;right: 0;top: 0;background: url(../images/main/visual-particle-star.png) no-repeat center center;background-size: 100%;-webkit-animation: 60s marquee-angle-frames linear infinite;animation: 60s marquee-angle-frames linear infinite;will-change: transform;}
.main-visual__star > span:nth-child(2) {width: 100vw;left: 100%;top: 50%;}



/* **************************************** *
 * PORTFOLIO
 * **************************************** */
.main-portfolio .main-inform__title {font-size: 86rem;}
.main-portfolio .main-inform__title > span {padding-right: 77rem;position: relative;}
.main-portfolio .main-inform__title > span:after {display: block;width: 58rem;height: 58rem;position: absolute;right: 2rem;top: 50%;margin-top: -28rem;font-family: 'jt-font';content: '\e90f';font-size: 58rem;line-height: 1;font-weight: normal;font-style: normal;color: #fff;}

.main-portfolio__protocol-cloud {width: 90%;height: 90%;margin: 0 auto;position: relative;overflow: hidden;top: 5%;}
html.kakao .main-portfolio__protocol-cloud, html.naver .main-portfolio__protocol-cloud {background: url(../images/main/protocol-origin.jpg) no-repeat center center;background-size: cover;}
.main-portfolio__globe {width: 70%;height: 70%;margin: 0 auto;position: relative;top: 15%;}
html.kakao .main-portfolio__globe, html.naver .main-portfolio__globe {background: url(../images/main/globe-origin.jpg) no-repeat center center;background-size: cover;}

/* tag cloud */
.protocol-canvas {width: 100%;height: 100%;}
.protocol-canvas-tags {position: absolute;top: 0;left: 0;opacity: 0;}

/* globe */
.jt-globe-container {width: 100%;height: 100%;position: relative;}
.jt-globe, .jt-globe--canvas {width: 100%;height: 100%;}
.jt-globe--canvas {position: relative;z-index: 1;}
.jt-globe--list {list-style: none;position: absolute;left: 0;top: 0;opacity: 0;-webkit-transition: opacity 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition: opacity 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index: 2;}
.jt-globe--list.active {opacity: 1;}
.jt-globe--list > li {width: 16rem;height: 16rem;margin-left: -8rem;margin-top: -8rem;position: absolute;border-radius: 50%;background: url(../images/icon/icon-marker.svg) no-repeat center center;}
.jt-globe--list > li.active {width: 24rem;height: 24rem;margin-left: -12rem;margin-top: -12rem;background: #fff;opacity: 1;}



/* **************************************** *
 * SLOGAN
 * **************************************** */
.main-slogan {margin-top: 200rem;}
.main-slogan__inner {padding: 85rem 0 60rem;}
html.mac .main-slogan__inner {padding-top: 73rem;padding-bottom: 69rem;}
html.ios .main-slogan__inner {padding-top: 73rem;padding-bottom: 69rem;}



/* **************************************** *
 * PRODUCT
 * **************************************** */
.main-product .main-inform__title {font-size: 48rem;}
.main-product .main-inform__desc {margin-top: 40rem;}

.main-product--node .main-inform__cat {letter-spacing: 0.03em;}



/* **************************************** *
 * PRESS
 * **************************************** */
.main-press {padding: 200rem 0;background: #fff;}

.main-press__title {margin-bottom: 105rem;font-size: 0;text-align: center;}
.main-press__title > h2 {font-size: 60rem;line-height: 1.1;font-weight: 700;color: #000;}
.main-press__title b {display: block;margin-bottom: 17rem;}
.main-press__title b > * {display: inline-block;vertical-align: middle;font-size: 0;}
.main-press__title b > span {font-size: 26rem;line-height: 1.5;font-weight: 700;letter-spacing: 0.03em;color: #000;}
.main-press__title b > figure {height: 20rem;margin-bottom: 6rem;}
.main-press__title b > figure img {display: block;width: auto;height: 100%;}
html.ios .main-press__title b > figure {margin-bottom: 0;}

.main-press__sub-title {display: block;margin-bottom: 32rem;font-size: 42rem;font-weight: 700;line-height: 1.1;color: #000;}

.main-press__recommend {margin-bottom: 123rem;}

.main-press__more {margin-top: 90rem;}
.main-press__more .jt-btn--circle {margin: 0 auto;}



/* **************************************** *
 * TEAM
 * **************************************** */
.main-team__who {padding: 201rem 0 151rem;text-align: center;}
.main-team__who h2 {font-size: 100rem;font-weight: 700;line-height: 1.1;letter-spacing: 0.03em;color: #fff;}
.main-team__who span {display: block;margin-bottom: 30rem;font-size: 20rem;font-weight: 700;line-height: 1.5;letter-spacing: 0.05em;color: #fff;}

.main-team__introduce {position: relative;}
.main-team__introduce > .jt-division__item:after {content: '';display: table;clear: both;}

.main-team__data {float: left;width: 66.66%;}
.main-team__data .jt-member-list__item {width: 50%;}
.main-team__data .jt-member-list__item:nth-child(3) {border-top: 4rem solid #fff;}
.main-team__data .main-team__data__more {display: block;padding: 89rem 40rem 73rem;font-size: 32rem;letter-spacing: 0.05em;font-weight: 700;line-height: 1.2;text-align: center;color: #fff;border-top: 4rem solid #fff;}
.main-team__data .main-team__data__more > span {display: inline-block;padding-right: 100rem;position: relative;}
.main-team__data .main-team__data__more > span:after {display: block;width: 58rem;height: 58rem;position: absolute;right: 13rem;top: 50%;margin-top: -33rem;font-family: 'jt-font';content: '\e903';font-size: 58rem;line-height: 1;font-weight: normal;font-style: normal;color: #fff;}
html.mac .main-team__data .main-team__data__more {padding-top: 86rem;padding-bottom: 75rem;}
html.mac .main-team__data .main-team__data__more > span:after {margin-top: -30rem;}
html.ios .main-team__data .main-team__data__more {padding-top: 83rem;padding-bottom: 78rem;}
html.ios .main-team__data .main-team__data__more > span:after {margin-top: -29rem;}

.main-team__aspiration {float: right;width: 33.33%;padding: 80rem 60rem;}
.main-team__aspiration.js-fixed {position: fixed;top: 0;right: 0;}
.main-team__aspiration.js-clear {position: absolute;right: 0;top: inherit;bottom: 0;}
.main-team__aspiration-picture {max-width: 480rem;margin: 0 auto;position: relative;}
.main-team__aspiration-picture .jt-lazyload {padding-top: 116.66%;}

.main-team__aspiration-ask {display: block;margin-top: 37rem;font-size: 36rem;line-height: 1.33;font-weight: 700;text-align: center;color: #fff;}