@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (Chaehee)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1)
 */



/* **************************************** *
 * COMMON
 * **************************************** */
.main-section {overflow-x: hidden;}
.main-section__head--align-center {text-align: center; will-change: transform;}
.main-section__head h2 { font-size: 36rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.main-section__head p { font-size: 16rem; font-weight: 400; line-height: 1.63; color: #666; margin-top: 10rem;}
.main-section__head .jt-btn__basic {margin-top: 28rem;}

.main-section__head-icon-arrow {position: relative;display: inline;font-style: normal;margin-left: 21rem;top: 3rem;}
.main-section__head-icon-arrow:after { content: '\e903'; font-family: 'jt-font'; font-size: 32rem; }
html.desktop .main-section__head a:hover .main-section__head-icon-arrow {-webkit-animation: horizon-bounce 1s 0.1s ease-out infinite normal;animation: horizon-bounce 1s 0.1s ease-out infinite normal;}
@-webkit-keyframes horizon-bounce { 0% { margin-left:21rem } 50% { margin-left:35rem } 100% { margin-left:21rem } }
@keyframes horizon-bounce { 0% { margin-left:21rem } 50% { margin-left:35rem } 100% { margin-left:21rem } }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { width: 100%; height: 100vh; background: #ddd; }
.main-visual__container { width: 100%; height: 100%; }
.main-visual__item {overflow: hidden;}
.main-visual__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; z-index: 1; -webkit-transform: scale(1.05) rotate(0.01deg); -ms-transform: scale(1.05) rotate(0.01deg); transform: scale(1.05) rotate(0.01deg);-webkit-transition: -webkit-transform 3.8s linear;transition: -webkit-transform 3.8s linear;transition: transform 3.8s linear;transition: transform 3.8s linear, -webkit-transform 3.8s linear;}
.main-visual__bg:after {content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;opacity: .2; -webkit-transition: .3s; transition: .3s;}
.main-visual__bg.small {display: none;}
.swiper-slide-active .main-visual__bg {-webkit-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);}
.main-visual__content { display: table; width: 100%; height: 100%; position: relative; z-index: 2; }
.main-visual__content-inner { display: table-cell; vertical-align: middle; text-align: center; color: #fff; }
.main-visual__content-title { font-size: 48rem; font-weight: 500; line-height: 1.38; opacity: 0;}
.main-visual__content-desc { font-size: 18rem; font-weight: 400; line-height: 1.78; margin-top: 34rem; opacity: 0;color:#e4e4e4;}
.main-visual__btn {margin-top: 45rem; opacity: 0;}

/* video type */
.main-visual__item--video .main-visual__bg, .main-visual__item--video.swiper-slide-active .main-visual__bg {-webkit-transform: none;-ms-transform: none;transform: none;}
.main-visual__item--video .main-visual__video-wrap {width: 100%;height: 100%;position: relative;overflow: hidden;}
.main-visual__video video { display: block !important; width: auto !important; height: auto !important; min-width: 100% !important; min-height: 100% !important; position: absolute !important; top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } /* dacast override */
.main-visual__item--video .main-visual__iframe-poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;}



/* **************************************** *
 * CENTER
 * **************************************** */
.main-center { padding-top: 161rem; padding-bottom: 200rem; }
.main-center__list-wrap {margin-top: 75rem; overflow: visible; margin-left: -24rem; margin-right: -24rem;}
.main-center__list { font-size: 0;}
.main-center__item { display: inline-block; vertical-align: top; margin: 0 24rem; width: auto;}
.main-center__link {display: block;}
.main-center__thumb {position: relative;}
.main-center__thumb:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s;}
.main-center__thumb-img img {display: block; width: 100%; height: auto;}
.main-center__thumb-map {position: absolute; top: 50%; left: 50%; width: 102rem; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; font-size: 0; z-index: 1; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s; transition: opacity .3s;}
.main-center__thumb-map > .jt-lazyload {width: 100%; padding-top: 78.5%;}
.main-center__thumb-map > .jt-lazyload .jt-lazyload__color-preview {background: transparent;}
.main-center__thumb-map-title { display: block; font-size: 12rem; font-weight: 600; line-height: 1.34; color: #fff; margin-top: 10rem; }
.main-center__title { display: block; font-size: 20rem; font-weight: 500; color: #333; text-align: right; margin-top: 20rem; }
.main-center__link .main-center__title > span {position:relative; display:inline-block;}
.main-center__link .main-center__title > span:after {width:0; height:1rem; background:#000; content:''; display:block; -webkit-transition: width .3s;transition: width .3s;}
html.desktop .main-center__link:hover .main-center__title > span:after {width:100%;}
.main-center__list-wrap  .swiper-navigation {top:27.5%;}
.main-center__list-wrap:before {width: 10%;height:100%;content:'';display:block;position:absolute;left: -63rem;top: 0;z-index: 10;}
.main-center__list-wrap:after {width: 10%;height:100%;content:'';display:block;position:absolute;right: -63rem;top: 0px;z-index: 10;}
.main-center__list-wrap.prev-disabled:before {display:none;}
.main-center__list-wrap.next-disabled:after {display:none;}
html.desktop .main-center__link:hover .main-center__thumb:after {opacity: .5;}
html.desktop .main-center__link:hover .main-center__thumb-map {opacity: 1; visibility: visible;}

.main-center__item--entrance {width: 396rem;}
.main-center__item--entrance .main-center__thumb-img .jt-lazyload {padding-top: 148.7%;}
.main-center__item--greeting {width: 544rem;}
.main-center__item--greeting .main-center__thumb-img .jt-lazyload {padding-top: 67.7%;}
.main-center__item--testing {width: 396rem;}
.main-center__item--testing .main-center__thumb-img .jt-lazyload {padding-top: 137.8%;}
.main-center__item--beginning {width: 544rem;}
.main-center__item--beginning .main-center__thumb-img .jt-lazyload {padding-top: 67.7%;}
.main-center__item--fermenting {width: 396rem;}
.main-center__item--fermenting .main-center__thumb-img .jt-lazyload {padding-top: 121.2%;}



/* **************************************** *
 * SHOWROOM
 * **************************************** */
.main-showroom {background: #f8f8f8; padding-top: 124rem; padding-bottom: 200rem;}
.main-showroom .wrap {z-index: 2;}
.main-showroom .main-section__head {margin-bottom: 0;}

.main-showroom__illust {margin-top: -128rem;padding-top: 29.5%;position: relative;z-index: 1;}
.main-showroom__illust-pic {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;}
.main-showroom__illust-pic #arrow {opacity:0; -webkit-transition: opacity .3s;transition: opacity .3s;}
.main-showroom__illust-pic.lights-on #arrow {opacity:1; -webkit-transition-delay: .1s; transition-delay: .1s;}
.main-showroom__illust-pic #showroom-win-light > path { opacity: 1; -webkit-transition: 0s; transition: 0s;}
.main-showroom__illust-pic.lights-on #showroom-win-light > path { fill: #FFE55C !important; opacity: .5; -webkit-transition: .8s; transition: .8s;}
.main-showroom__illust-pic svg {width: 100%; height: 100%;}
/* .main-showroom__illust--bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;} */



/* **************************************** *
 * RND
 * **************************************** */
.main-rnd {background-image: url(../images/main/main-rnd-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; text-align: center; padding-top: 265rem; padding-bottom: 349rem;}
.main-rnd .wrap {position: relative; z-index: 1;}
.main-rnd__title { font-size: 36rem; font-weight: 400; line-height: 1.5; color: #fff; }
.main-rnd__typo { font-size: 36rem; font-weight: 400; line-height: 1.45; color: #fff; margin-top: 500rem;}
.main-rnd__map {display: inline-block; vertical-align: top; margin-top: 78rem; width: 447rem; height: 255rem;}
.main-rnd__map svg {width: 100% !important; height: 100% !important;}
.main-rnd__map figure { padding-top: 57.1%; }
.main-rnd__map figure .jt-lazyload__color-preview {background: transparent;}
.main-rnd__map--small {display: none;}

.main-rnd__illust-list {text-align: center; margin-top: 39rem; font-size: 0;}
.main-rnd__illust-list > li {display: inline-block; vertical-align: top; width: 100rem; margin: 0 24rem;}
.main-rnd__illust-list > li > figure {padding-top: 140%;}
.main-rnd__illust-list > li > figure .jt-lazyload__color-preview {background: transparent;}



/* **************************************** *
 * RESEARCH
 * **************************************** */
.main-research {height: 954rem;}
.main-research .main-section__head {display: none;}
.main-research-slider-wrap {width: 100%; height: 100%;}
.main-research-slider__item > div {float: left; height: 100%; position: relative; overflow: hidden;}
.main-research-slider__first {width: 50%;}
.main-research-slider__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; z-index: 1; -webkit-transform: scale(1.03) rotate( 0.01deg); -ms-transform: scale(1.03) rotate( 0.01deg); transform: scale(1.03) rotate( 0.01deg); -webkit-transition: -webkit-transform 2s linear; transition: -webkit-transform 2s linear; transition: transform 2s linear; transition: transform 2s linear, -webkit-transform 2s linear; }
.swiper-slide-active .main-research-slider__bg { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); }

.main-research-slider__last { width: 50%; background: #ede8e2; }
.main-research-slider__content { 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; width: 100%; height: 100%; position: relative; z-index: 2;}
.main-research-slider__content-inner {width: 100%; text-align: center; padding: 0 40rem;}
.main-research-slider__content-pic { display: inline-block; vertical-align: top; width: 140rem; margin-bottom: 32rem;}
.main-research-slider__content-pic figure {padding-top: 85.7%; }
.main-research-slider__content-pic .jt-lazyload__color-preview {background: transparent;}
.main-research-slider__content-title { display: block; font-size: 24rem; font-weight: 600; line-height: 1.08; color: #000; }
.main-research-slider__content-desc { margin-top: 22rem; font-size: 16rem; font-weight: 400; line-height: 1.63; color: #666; }
.main-research-slider__content .jt-btn__basic {margin-top: 38rem; will-change:transform;}

.main-research-slider__index {display: table;width: 50%;height: 100%;position: absolute;top: 0;left: 0;z-index: 10;}
.main-research-slider__index-inner {display: table-cell;vertical-align: middle; padding: 0 88rem; padding-top: 11rem;}

.main-research-slider__title {display: block;margin-bottom: 22rem;font-size: 36rem;font-weight: 600;line-height: 1.25;color: #fff;}

.main-research-slider__pagination .swiper-pagination {display: block;position: relative;text-align: left;}
.main-research-slider__pagination .swiper-pagination-bullet {display: block;width: 100%;height: auto;padding: 8rem 0 7rem;font-size: 16rem;font-weight: 500;line-height: 1.4;color: #fff;background: none;border-radius: 0;opacity: 1;}
.main-research-slider__pagination .swiper-pagination-bullet:after {display: none;}
.main-research-slider__pagination .swiper-pagination-bullet > span {display: inline-block;position: relative;-webkit-transition: padding .3s;transition: padding .3s;}
.main-research-slider__pagination .swiper-pagination-bullet > span:after {display: block;width: 22rem;height: 22rem;margin-top: -13rem;position: absolute;top: 50%;left: -5rem;font-family: 'jt-font';content: '\e91b';font-size: 22rem;line-height: 1;font-weight: normal;text-align: center;color: #fff;opacity: 0;-webkit-transition: opacity .3s, left .2s;transition: opacity .3s, left .2s;}
.main-research-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: none;}
.main-research-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active > span {padding-left: 32rem;}
.main-research-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active > span:after {opacity: 1;left: 0;}

.main-research-slider__pagination .swiper-pagination-bullet > span:before { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: -1rem; background: #fff; opacity: 0; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: opacity .2s, -webkit-transform .3s; transition: opacity .2s, -webkit-transform .3s; transition: transform .3s, opacity .2s; transition: transform .3s, opacity .2s, -webkit-transform .3s; -webkit-transition-delay: .2s, 0s; transition-delay: .2s, 0s; }
html.desktop .main-research-slider__pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover > span:before { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; }
html.mac .use-mouse .main-research-slider__pagination .swiper-pagination-bullet:focus, html.mobile .main-research-slider__pagination .swiper-pagination-bullet:focus {outline:none;}


/* **************************************** *
 * MATERIAL
 * **************************************** */
.main-material {text-align: center; padding-top: 208rem; padding-bottom: 223rem;}
.main-material__typo {font-size: 24rem; font-weight: 500; line-height: 1.08;}
.main-material__list-wrap {max-width: 1481rem; margin-top: 81rem; margin-left: -24rem; margin-right: -24rem;}
.main-material__list {font-size: 0;}
.main-material__item { position: relative; display: inline-block; vertical-align: top; width: 100rem; margin: 0 24rem; }
.main-material__item figure { padding-top: 296%; filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.44882000000000005 0.50064 0.05054 0 0 0.14882 0.80064 0.05054 0 0 0.14882 0.50064 0.35054 0 0 0 0 0 1 0" /></filter></svg>#filter'); -webkit-filter: grayscale(70%); filter: grayscale(70%); -webkit-transition: .3s; transition: .3s;}
/* .main-material__txt { display: block; font-size: 18rem; color: #fff; height: 100%; position: absolute; top: 50%; left: 50%; cursor:default; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, -webkit-filter .3s; transition: opacity .3s, -webkit-filter .3s; transition: opacity .3s, filter .3s; transition: opacity .3s, filter .3s, -webkit-filter .3s; filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="5" /></filter></svg>#filter'); -webkit-filter: blur(5px); filter: blur(5px);} 
.main-material__item--active .main-material__txt {opacity: 1; visibility: visible; filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter'); -webkit-filter: blur(0); filter: blur(0);}*/
.main-material__txt { display: block; font-size: 18rem; color: #fff; height: 100%; position: absolute; top: 50%; left: 50%; cursor:default; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: transform .3s;-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s; will-change:transform; }
.main-material .jt-btn__basic {margin-top: 60rem;}
.main-material__item--active figure {filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /></filter></svg>#filter');-webkit-filter: grayscale(0);filter: grayscale(0);}
.main-material__item--active .main-material__txt {-ms-transform: translate(-50%,-50%) scale(1.1); -webkit-transform: translate(-50%,-50%) scale(1.1); transform: translate(-50%,-50%) scale(1.1); }

/* **************************************** *
 * PRODUCT
 * **************************************** */
.main-product {background: #f8f8f8; padding-top: 213rem; padding-bottom: 200rem;}

.main-product .main-section__head {position: absolute; top: -11rem; left: 88rem;}
.main-product__list {font-size: 0;}
.main-product__list:after {content: ''; display: table; clear: both;}
.main-product__item { display: inline-block; }
.main-product__item img { -webkit-transition: -webkit-transform 2.5s cubic-bezier(0.19,1,0.22,1);transition: -webkit-transform 2.5s cubic-bezier(0.19,1,0.22,1);transition: transform 2.5s cubic-bezier(0.19,1,0.22,1);transition: transform 2.5s cubic-bezier(0.19,1,0.22,1), -webkit-transform 2.5s cubic-bezier(0.19,1,0.22,1);}
.main-product__item--primary {float: left; width: 40%; margin-top: 290rem;}
.main-product__item--primary .main-product__img { padding-top: 106.4%; }
.main-product__item--secondary {float: right; width: 40%;}
.main-product__item--secondary .main-product__img { padding-top: 122.2%; }
html.desktop .main-product__item:hover img {-webkit-transform: scale(1.03) rotate(0.01deg);-ms-transform: scale(1.03) rotate(0.01deg);transform: scale(1.03) rotate(0.01deg);}
.main-product__link { display: block; }
.main-product__content {margin-top: 37rem;}
.main-product__content-title {font-size: 24rem; font-weight: 600; line-height: 1.3; color: #333;}
.main-product__content-desc {font-size: 16rem; font-weight: 400; line-height: 1.625; color: #666; margin-top: 13rem;}
.main-product__content-btn {margin-top:40rem;}