@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * DEMO LAYOUT
 * VISUAL
 * SWIPER SCROLLBAR SLIDER
 */

 

/* **************************************** *
 * DEMO LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 92rem; }

/* LAYOUT */
.main-section { margin: 180rem 0; }
.main-section:last-child { margin-bottom: 0; }

.main-section__head { margin-bottom: 40rem; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { width: 100%; height: calc(100vh - 92rem); background: var(--color-black); }

.main-visual__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
.main-visual__bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .2); }
.main-visual__picture { position: relative; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; }

.main-visual__content { width: 100%; position: absolute; top: 50%; left: 0; translate: 0 -50%; }
.main-visual__title { display: block; color: var(--color-white); }
.main-visual__desc { margin-top: 20rem; color: var(--color-white); }

/* Fix JS loading time */
.main-visual .swiper-navigation, .main-visual .swiper-control { opacity: 0; }



/* **************************************** *
 * SWIPER SCROLLBAR SLIDER
 * **************************************** */
/* Full width slider support */
.main-scrollbar .main-section__body { overflow: hidden; }
.main-scrollbar .swiper { overflow: visible; }
.main-scrollbar .swiper-scrollbar.swiper-scrollbar-horizontal { width: calc(100% - 24rem); left: 12rem; }

.main-scrollbar-slider { margin: 0 -12rem; }
.main-scrollbar-slider__item { width: 384rem; margin: 0 12rem; padding: 28rem 32rem; background: var(--color-gray-100); border-radius: 8rem; }
.main-scrollbar-slider__item .jt-lazyload { padding-top: 104.65%; }
.main-scrollbar-slider__item p { margin-top: 12rem; }