@charset "utf-8";

/*
 * File       : sub-component.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.1
 *
 * Dependency : css/reset.css
 *              css/ke-strap.css
 *
 * SUMMARY:
 * 01) LAYOUT
 * 02) HEADER
 * 03) INTRO
 * 04) COMPONENT
 * 05) RESOURCE
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
.component-container { padding: 160rem 0 200rem; overflow: hidden; }
.component-header + .component-container { padding-top: 62rem; }

.component-section { margin: 160rem 0; }
.component-section:first-child { margin-top: 0; }
.component-section:last-child { margin-bottom: 0; }
.component-section:after { content: ''; display: table; clear: both; }

.component-title { float: left; width: 256rem; padding-right: 44rem; }
.component-title__name { font-size: 18rem; line-height: 1.66; font-weight: 600; }

.component-content { float: right; width: -webkit-calc(100% - 256rem); width: calc(100% - 256rem); }
.component-section .component-content > *:first-child { margin-top: 0; }
.component-section .component-content > *:last-child { margin-bottom: 0; }

/* COLOR PALETTE */
.component-intro__info { background: var(--color-component); }

/* BREADCRUMB */
.component-breadcrumb { margin: -4rem 0 60rem; font-size: 0; }
.component-breadcrumb__btn { display: inline-block; padding: 4rem 10rem 4rem 24rem; position: relative; font-size: 16rem; font-weight: 400; line-height: 1.85; letter-spacing: -0.01em; color: #666; -webkit-transition: color .2s; transition: color .2s; }
.component-breadcrumb__btn > span { display: inline-block; position: relative; }
.component-breadcrumb__btn > span:after { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 1rem; background: #666; -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: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.component-breadcrumb__btn .ke-guide--icon { position: absolute; width: 8rem; left: 4rem; top: 50%; margin-top: -6rem; }
.component-breadcrumb__btn .ke-guide--icon path { stroke: #666; -webkit-transition: stroke .2s; transition: stroke .2s; }

html.desktop .component-breadcrumb__btn:hover { color: #FFB500; }
html.desktop .component-breadcrumb__btn:hover .ke-guide--icon path { stroke: #FFB500; }
html.desktop .component-breadcrumb__btn:hover > span:after { background: #FFB500; -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); }

html.ios .component-breadcrumb__btn .ke-guide--icon { margin-top: -8rem; }



/* **************************************** *
 * HEADER
 * **************************************** */
.component-header { margin-bottom: 100rem; text-align: center; }

.component-header__bi { width: 380rem; height: 43rem; margin: 0 auto 41rem; }
.component-header__bi img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.component-header__typo { font-size: 52rem; line-height: 1.26; font-weight: 600; }

.component-header__action { margin-top: 55rem; font-size: 0; }
.component-header__action .ke-btn__basic { margin-right: 10rem; }
.component-header__action .ke-btn__basic:last-child { margin-right: 0; }



/* **************************************** *
 * INTRO
 * **************************************** */
.component-intro__inner { display: table; table-layout: fixed; width: 100%; min-height: 500rem; position: relative; }
.component-intro__inner > div { display: table-cell; vertical-align: middle; width: 50%; position: relative; }

.component-intro__info { padding: 80rem 128rem 90rem 128rem; border-radius: 20rem 0 0 20rem; overflow: hidden; }
.component-intro__label { display: block; margin-bottom: 9rem; font-size: 16rem; line-height: 1.87; font-weight: 600; letter-spacing: -0.01em; color: #191919; }
.component-intro__title { font-size: 32rem; line-height: 1.43; font-weight: 600; }
.component-intro__desc { margin-top: 17rem; font-size: 16rem; line-height: 1.87; font-weight: 400; letter-spacing: -0.01em; color: rgba(25, 25, 25, .7); }
.component-intro__desc > span { display: block; }
.component-intro__action { margin-top: 35rem; margin-bottom: -10rem; font-size: 0; }
.component-intro__action .ke-btn__icon { margin-right: 8rem; }
.component-intro__action .ke-btn__icon:last-child { margin-right: 0; }

.component-intro__bg { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.component-intro__bg-image { width: 100%; height: 100%; background: no-repeat center center; background-size: cover; border-radius: 0 20rem 20rem 0; }
.component-intro__bg-option { width: 450rem; height: 450rem; position: absolute; right: -35rem; bottom: 0; background: no-repeat center center; background-size: cover; }

/* TYPE : SPLIT */
.component-intro--split .component-intro__inner { display: grid; grid-template-columns: 1fr 1fr; -webkit-column-gap: 10rem; -moz-column-gap: 10rem; column-gap: 10rem; }
.component-intro--split .component-intro__info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: auto; border-radius: 20rem; }
.component-intro__info-inner { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; }
.component-intro--split .component-intro__easel { display: block; width: auto; }
.component-intro--split .component-intro__bg-image { border-radius: 20rem; }

/* THEME : LIGHT */
html.desktop .component-intro--light .ke-btn__point.ke-btn--type-03:hover .ke-btn__point-circle { background: #191919; }
html.desktop .component-intro--light .ke-btn__point.ke-btn--type-03:hover .ke-btn__point-circle .ke-guide--icon path { stroke: #fff; }

/* THEME : DARK */
.component-intro--dark .component-intro__label { color: #fff; }
.component-intro--dark .component-intro__title { color: #fff; }
.component-intro--dark .component-intro__desc { color: #ffffff; color: rgba(255, 255, 255, .7); }



/* **************************************** *
 * COMPONENT
 * **************************************** */
/* MESSAGE */
.component-message { margin: 100rem 0; }
.component-message__title { font-size: 32rem; line-height: 1.43; font-weight: 600; }
.component-message__desc { margin-top: 16rem; font-size: 16rem; line-height: 1.87; font-weight: 400; letter-spacing: -0.01em; color: #666; }
.component-message__desc .component-linespacing { display: block; margin-bottom: -0.93em; }
.component-message__action { margin-top: 39rem; font-size: 0; }
.component-message__action .ke-btn__basic { margin-right: 10rem; }
.component-message__action .ke-btn__basic:last-child { margin-right: 0; }

/* BASIC LIST */
.component-list { display: grid; grid-template-columns: 1fr 1fr; row-gap: 86rem; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; margin: 100rem 0; }
.component-list__icon { width: 60rem; margin-bottom: 33rem; }
.component-list__icon .ke-lazyload { padding-top: 100%; }
.component-list__title { font-size: 24rem; line-height: 1.41; font-weight: 600; }
.component-list__desc { margin-top: 16rem; font-size: 16rem; line-height: 1.87; font-weight: 400; letter-spacing: -0.01em; color: #666; }
.component-list__action { margin-top: 26rem; margin-bottom: -10rem; font-size: 0; }
.component-list__action .ke-btn__point { margin-right: 24rem; }
.component-list__action .ke-btn__point:last-child { margin-right: 0; }

/* THUMBNAIL LIST */
.component-image-list { display: grid; grid-template-columns: 1fr 1fr; row-gap: 105rem; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; margin: 100rem 0; }
.component-image-list__thumb { border-radius: 20rem; overflow: hidden; }
.component-image-list__thumb .ke-lazyload { padding-top: 60.92%; }
.component-image-list__thumb img { border-radius: 20rem; }
.component-image-list__content { margin-top: 31rem; }
.component-image-list__title { font-size: 24rem; line-height: 1.41; font-weight: 600; }
.component-image-list__desc { margin-top: 15rem; font-size: 16rem; line-height: 1.87; font-weight: 400; letter-spacing: -0.01em; color: #666; }
.component-image-list__action { margin-top: 26rem; margin-bottom: -10rem; font-size: 0; }
.component-image-list__action .ke-btn__point { margin-right: 24rem; }
.component-image-list__action .ke-btn__point:last-child { margin-right: 0; }

.component-image-list.component-image-list--four { grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 86rem; }
.component-image-list.component-image-list--four .component-image-list__thumb { border-radius: 10rem; }
.component-image-list.component-image-list--four .component-image-list__thumb .ke-lazyload { padding-top: 100%; }
.component-image-list.component-image-list--four .component-image-list__thumb img { border-radius: 10rem; }
.component-image-list.component-image-list--four .component-image-list__title { font-size: 21rem; line-height: 1.52; }
.component-image-list.component-image-list--four .component-image-list__desc { margin-top: 10rem; }
.component-image-list.component-image-list--four .component-image-list__action { margin-top: 16rem; }
.component-image-list.component-image-list--four .component-image-list__action .ke-btn__point { margin-right: 0; }

/* SLIDE */
.component-slider { margin: 100rem -18rem; position: relative; }
.component-slider .swiper-container { overflow: visible; }
.component-slider__item { display: inline-block; vertical-align: top; max-width: 512rem; width: 50%; padding: 0 18rem; }
.component-slider__image { display: block; position: relative; border-radius: 20rem; overflow: hidden; }
.component-slider__image .ke-lazyload { padding-top: 71.42%; }
.component-slider__image img { border-radius: 20rem; }
.component-slider__image .component-slider__poster { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: no-repeat center center; background-size: cover; }

.component-slider.component-slider--large .component-slider__item { max-width: 1024rem; width: 100%; }
.component-slider.component-slider--large .component-slider__image .ke-lazyload { padding-top: 56.17%; } .component-slider.component-slider--large .ke-popup-video__overlay-icon { width: 72rem; height: 72rem; right: 40rem; bottom: 40rem; }
.component-slider.component-slider--large .ke-popup-video__overlay-icon:after { margin-left: -3rem; border-width: 6rem 9rem; }

.component-slider:nth-child(1):before { content: ''; display: block; width: 18rem; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: #fff; }
.component-slider:nth-child(1) .swiper-container { overflow: hidden; }

.component-slider .swiper-container:not(.swiper-use-buttons) .swiper-buttons { display: none; }

/* DIVIDER */
.component-divider { width: 100%; height: 1rem; margin: 160rem 0; padding: 0; background: #eee; border: none; }

/* POST */
.component-post > li { border-bottom: 1rem solid #eee; }
.component-post > li:last-child { border-bottom: none; }

.component-post__link { display: block; padding: 42rem 0 39rem; position: relative; }
.component-post > li:first-child .component-post__link { padding-top: 0; }

.component-post__meta { margin-bottom: 12rem; font-size: 0; }
.component-post__type { font-size: 13rem; line-height: 1.76; font-weight: 400; letter-spacing: -0.01em; color: #444; -webkit-transition: color .3s; transition: color .3s; }
.component-post__title { padding-bottom: 1rem; font-size: 21rem; line-height: 1.52; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.component-post__title > span { border-bottom: 1px solid transparent; -webkit-transition: border .3s; transition: border .3s; }
.component-post__title br { display: none; }
html.desktop .component-post__link:hover .component-post__title > span { border-bottom-color: #191919; }
.component-post__desc { margin-top: 9rem; font-size: 16rem; font-weight: 400; line-height: 1.87; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }



/* **************************************** *
 * RESOURCE
 * **************************************** */
.component-resource { padding: 80rem 0 75rem; background: #f8f8f8; }
.component-resource__inner:after { content: ''; display: table; clear: both; }

.component-resource__title { float: left; width: 256rem; padding-right: 44rem; font-size: 18rem; line-height: 1.66; font-weight: 600; }

.component-resource__list-wrap { float: right; width: -webkit-calc(100% - 256rem); width: calc(100% - 256rem); }
.component-resource__list { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; }
.component-resource__list em { display: block; margin-bottom: 17rem; font-size: 16rem; line-height: 1.87; font-weight: 600; letter-spacing: -0.01em; }
.component-resource__list a { display: inline-block; padding: 4rem 0; font-size: 15rem; line-height: 1.8; font-weight: 600; letter-spacing: -0.01em; color: #666; -webkit-transition: color .3s; transition: color .3s; }
.component-resource__list a > span { display: inline-block; position: relative; }
.component-resource__list a > span:after { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 0; background: #FFB500; -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: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; }
html.desktop .component-resource__list a:hover { color: #FFB500; }
html.desktop .component-resource__list a:hover > span:after { -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); }