@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (Chaehee)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) MAIN VISUAL
 * 2) MAIN Last
 */

 

/* **************************************** *
 * MAIN VISUAL
 * **************************************** */
.main-typo-container { position: relative; text-align: center; width: 100%; height: 270rem; overflow: hidden; }
.main-typo { position: absolute; top: 0; left: 0; height: 100%; white-space: nowrap; }
.main-typo__inner { position: absolute; top: -5rem; left: 0; width: 100%; height: calc(100% + 10rem); padding-top: 133rem; padding-bottom: 64rem; background: #fff; overflow-x: hidden; overflow-y: hidden; transform: rotate(0deg); transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; }
.main-typo__inner span { display: block; width: calc(100vw - 17px); }
.main-typo__inner.back { background: var(--color-primary); }

.main-typo-origin { position: absolute; top: 0; left: 0; width: 100%; height: 100%; white-space: nowrap; display: none; }
.main-typo-origin__inner { position: absolute; top: -5rem; left: 0; width: 100%; height: calc(100% + 10rem); padding-top: 133rem; padding-bottom: 64rem; background: #fff; overflow-x: hidden; overflow-y: hidden; transform: rotate(0deg); transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; }



/* **************************************** *
 * MAIN VISUAL
 * **************************************** */
.main-visual { /* height: 685rem; */ position: relative; padding-top: 36%; background: #f5f5f5; }
.main-visual__container { position: absolute; top: 0; left: 0; }

.main-visual__container,
.main-visual__wrapper,
.main-visual__slide,
.main-visual__slide-bg { width: 100%; height: 100%; }
.main-visual__slide-bg:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.2); }
.main-visual__slide-link { display: block; width: 100%; height: 100%; }

.main-visual__slide-content { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.main-visual__slide-content-inner { padding-top: 73rem; display: block; width: 100%; height: 100%; }
.main-visual__slide-content-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #fff; max-width: 720rem; }
.main-visual__slide-content-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #fff; max-width: 720rem; margin-top: 18rem; }
.main-visual__slide-content-desc + .main-visual__slide-btn { margin-top: 24rem; }
.main-visual__slide-btn { display: inline-block; margin-top: 23rem; }
.main-visual__slide-btn .jt-guide--icon { width: 46rem; }
.main-visual__slide-btn .jt-guide--icon svg path { fill: #fff; }

.main-visual__slide-bg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: no-repeat center center; background-size: cover; overflow: hidden; }

.main-visual__item--video .main-visual__slide-content-inner h2,
.main-visual__item--video .main-visual__slide-content-inner p { color: #fff; }
.main-visual__item--video .main-visual__item-bg:after { content: ''; background: var(--color-primary); background: rgba(0, 0, 0, .65); top: 0; bottom: 0; left: 0; right: 0; display: none; position: absolute; }

.main-visual__video-btn-wrap { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; }
.main-visual__video-btn { display: inline-block; width: 64rem; height: 64rem; margin-top: 12rem; position: relative; text-align: center; background: #ffffff; background: rgba(255, 255, 255, .1); border: 2rem solid #fff; border-radius: 50%; -webkit-transition: background-color .3s; transition: background-color .3s; }
.main-visual__video-btn:after { content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: 3rem; height: 0rem; width: 0rem; position: relative; -webkit-transition: border-color .3s; transition: border-color .3s; border-left: 14rem solid #fff; border-top: 10rem solid transparent; border-bottom: 10rem solid transparent; display: block; }
html.desktop .main-visual__video-popup:hover .main-visual__video-btn { background: #fff; }
html.desktop .main-visual__video-popup:hover .main-visual__video-btn:after { border-left-color: var(--color-primary); }

.main-visual .swiper-navigation { position: absolute; width: 100%; max-width: 1800rem; bottom: 27rem; left: 50%; transform: translateX(-50%); z-index: 1; }
.main-visual .swiper-navigation button { position: relative; top: auto; transform: none; }
.main-visual .swiper-button-prev { float: left; }
.main-visual .swiper-button-next { float: right; }
.main-visual .swiper-control { position: absolute; left: 50%; bottom: 38rem; text-align: center; width: 50%; transform: translateX(-50%); z-index: 100; font-size: 0; }

.main-visual__container--single .swiper-navigation,
.main-visual__container--single .swiper-control { display: none; }
.main-visual__container--single .jt-autoplay-inview .jt-background-video__vod video { width: auto; height: auto; }



/* **************************************** *
 * MAIN LAST
 * **************************************** */
.main-last { padding-top: 146rem; padding-bottom: 200rem; }
.main-last-list { margin-top: 68rem; margin-bottom: -195rem; font-size: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; -webkit-column-gap: 30rem; -moz-column-gap: 30rem; column-gap: 30rem; }
.main-last-list__item { border-top: 2rem solid var(--color-primary); padding-top: 23rem; margin: 0 0 195rem; }
.main-last-list__item:nth-child(5n):not(:nth-child(10n)) { grid-column: span 2; }
.main-last-list__item:nth-child(10n - 1) { grid-column: span 2; }
.main-last-list__meta a { position: relative; }
.main-last-list__meta a:after { content: ''; display: block; width: 100%; height: 1rem; background: var(--color-primary); position: absolute; bottom: -1rem; left: 0; transition: transform 1s cubic-bezier(0.19,1,0.22,1); transform: scaleX(0); transform-origin: center right; }
.main-last-list__meta a:hover:after { transform: scaleX(1); transform-origin: center left; }
.main-last-list__meta + .main-last-list__thumb { margin-top: 21rem; }
.main-last-list__thumb { position: relative; display: block; width: 100%; }
.main-last-list__thumb img { width: 100%; }
.main-last-list__thumb img[data-unveil] { transform: scale(1) rotate(0deg); transition: opacity .3s, transform .3s ease-in-out; }
.main-last-list__thumb-icon {position: absolute; bottom: 40rem; right: 40rem; width: 37rem; height: 37rem; z-index: 1; }
.main-last-list__thumb-icon .jt-guide--icon svg path { fill: #fff; }
.main-last-list__thumb .jt-autoplay--loaded .jt-background-video__vod { background: var(--color-primary); }
html.desktop a.main-last-list__thumb:hover img { transform: scale(1.05) rotate(0.1deg); }
.main-last-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 14rem; }
.main-last-list__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 2rem; }
.main-last-list__tag { margin-top: 5rem; font-size: 0; }
.main-last-list__tag span { display: inline-block; vertical-align: top; color: #888; margin-right: 10rem; }
.main-last-list__tag span:last-child { margin-right: 0; }

.main-last-list__item--txt { position: relative; overflow: hidden; border-top: 0; padding: 0; height: 483rem; background: #191919; color: #fff; }
.main-last-list__item--txt > * { position: relative; }
.main-last-list__item--txt a { color: inherit; }
.main-last-list__item--txt a:after { background: #fff; }
.main-last-list__item--txt .main-last-list__link { display: block; width: 100%; height: 100%; padding: 90rem 50rem 61rem; }
.main-last-list__item--txt .main-last-list__meta { position: absolute; top: 61rem; left: 49rem; z-index: 1; }
.main-last-list__item--txt .main-last-list__title { margin-top: 0; }
.main-last-list__item--txt .main-last-list__desc { margin-top: 8rem; }
.main-last-list__item--txt .main-last-list__meta a:hover { border-color: #fff; }
.main-last-list__item--txt .main-last-list__tag { position: absolute; bottom: 45rem; left: 50rem; margin-top: 0; }
.main-last-list__item--txt:nth-child(5n):not(:nth-child(10n)),
.main-last-list__item--txt:nth-child(10n - 1) { height: 678rem; }

.main-last-list__item--vid .main-last-list__thumb { padding-top: 56.25%; background: #f4f4f4; }
.main-last-list__item--ad .main-last-list__thumb-figure { padding-top: 63.28%; }