@charset "utf-8";

/*
 * File       : rwd-component.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) 1680px
 * 02) 1480px
 * 03) 1023px
 * 04) 860px
 * 05) 540px
 */



/* **************************************** *
 * 1680px
 * **************************************** */
@media (max-width: 1680px){

    /* INTRO */
    .component-intro__info { padding-left: 108rem; padding-right: 108rem; }
    .component-intro__title br { display: none; }
    .component-intro__desc br { display: none; }

    /* COMPONENT */
    .component-list__desc br { display: none; }

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    /* LAYOUT */
    .component-container { padding: 140rem 0 160rem; }
    .component-header + .component-container { padding-top: 42rem; }
    .component-section { margin: 140rem 0; }

    /* HEADER */
    .component-header { margin-bottom: 80rem; }
    .component-header__typo { font-size: 47rem; }
    .component-header__bi { margin-bottom: 38rem; }
    .component-header__action { margin-top: 50rem; }

    /* INTRO */
    .component-intro__inner { min-height: 470rem; }
    .component-intro__info { padding: 70rem 100rem 80rem 100rem; }
    .component-intro__bg-option { width: 425rem; height: 425rem; }

    /* COMPONENT */
    .component-message { margin: 80rem 0; }

    .component-list { margin: 80rem 0; row-gap: 80rem; -webkit-column-gap: 30rem; -moz-column-gap: 30rem; column-gap: 30rem; }

    .component-image-list { margin: 80rem 0; row-gap: 80rem; -webkit-column-gap: 30rem; -moz-column-gap: 30rem; column-gap: 30rem; }
    .component-image-list.component-image-list--four { row-gap: 80rem; }

    .component-slider { margin: 80rem -15rem; }
    .component-slider__item { width: 493rem; padding: 0 15rem; }
    .component-slider:nth-child(1):before { width: 15rem; }
    .component-slider.component-slider--large .component-slider__item { width: 987rem; }

    .component-divider { margin: 140rem 0; }

    /* RESOURCE */
    .component-resource__list { -webkit-column-gap: 30rem; -moz-column-gap: 30rem; column-gap: 30rem; }

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    /* LAYOUT */
    .component-container { padding-bottom: 150rem; }

    .component-breadcrumb { margin-top: -24rem; }

    /* HEADER */
    .component-header__bi { margin-bottom: 28rem; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
    .component-header__typo { font-size: 42rem; }
    .component-header__action { margin-top: 44rem; }

    /* INTRO */
    .component-intro__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; min-height: inherit; }
    .component-intro__inner > div { display: block; width: 100%; }

    .component-intro__easel { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; padding-top: 50%; }
    .component-intro__bg-image { border-radius: 20rem 20rem 0 0; }
    .component-intro__bg-option { width: 450rem; height: 450rem; right: -20rem; }
    
    .component-intro__info { padding: 70rem 60rem 80rem; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; border-radius: 0 0 20rem 20rem; }
    .component-intro__title { font-size: 30rem; }
    .component-intro__desc br { display: block; }

    .component-intro--split .component-intro__inner { grid-template-columns: 1fr; row-gap: 10rem; }

    /* COMPONENT */
    .component-title { float: none; width: 100%; padding-right: 0; margin-bottom: 50rem; }
    .component-title__name br { display: none; }
    .component-content { float: none; width: 100%; }

    .component-message__title { font-size: 30rem; }
    .component-message__action { margin-top: 35rem; }

    .component-list__icon { margin-bottom: 30rem; }
    .component-list__title { font-size: 22rem; }
    .component-list__title br { display: none; }

    .component-image-list__title { font-size: 22rem; }
    .component-image-list__title br,
    .component-image-list__desc br { display: none; }
    .component-image-list.component-image-list--four .component-image-list__content { margin-top: 26rem; }
    .component-image-list.component-image-list--four .component-image-list__title { font-size: 19rem; }

    .component-slider__item { width: 426rem; }
    .component-slider:nth-child(1) .swiper-container { overflow: visible; }
    .component-slider:nth-child(1):before { display: none; }
    .component-slider.component-slider--large .component-slider__item { width: 868rem; }
    .component-slider.component-slider--large .ke-popup-video__overlay-icon { width: 68rem; height: 68rem; right: 30rem; bottom: 30rem; }
    .component-slider.component-slider--large .ke-popup-video__overlay-icon:after { border-width: 5rem 8rem; }

    .component-post__link { padding: 38rem 0 35rem; }
    .component-post__meta { margin-bottom: 10rem; }
    .component-post__title { font-size: 19rem; }

    /* RESOURCE */
    .component-resource__title { float: none; width: 100%; padding-right: 0; margin-bottom: 40rem; }
    .component-resource__list-wrap { float: none; width: 100%; }
    .component-resource__list em { margin-bottom: 14rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* LAYOUT */
    .component-container { padding: 120rem 0 130rem; }
    .component-header + .component-container { padding-top: 22rem; }
    .component-section { margin: 120rem 0; }

    /* HEADER */
    .component-header { margin-bottom: 74rem; }
    .component-header__bi { margin-top: -3rem; margin-bottom: 30rem; -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); }
    .component-header__typo { font-size: 38rem; font-weight: bold; letter-spacing: -0.025em; }

    /* INTRO */
    .component-intro__easel { padding-top: 66.66%; }
    .component-intro__bg-image { border-radius: 12rem 12rem 0 0; }
    .component-intro__bg-option { width: 430rem; height: 430rem; right: -18rem; }

    .component-intro__info { padding: 60rem 42rem 66rem; border-radius: 0 0 12rem 12rem; }
    .component-intro__title { font-size: 28rem; font-weight: bold; letter-spacing: -0.025em; }
    .component-intro__desc { letter-spacing: -0.025em; }
    .component-intro__desc br { display: none; }
    .component-intro__action { margin-top: 32rem; }

    .component-intro--split .component-intro__info { border-radius: 12rem; }
    .component-intro--split .component-intro__bg-image { border-radius: 12rem; }
    .component-intro--split .component-intro__easel { padding-top: 67.11%; }

    /* COMPONENT */
    .component-title__name { font-weight: bold; letter-spacing: -0.025em; }

    .component-message { margin: 65rem 0; }
    .component-message__title { font-size: 28rem; font-weight: bold; letter-spacing: -0.025em; }
    .component-message__desc { margin-top: 14rem; letter-spacing: -0.025em; }
    .component-message__action { margin-top: 32rem; }
    
    .component-list { margin: 65rem 0; row-gap: 65rem; -webkit-column-gap: 20rem; -moz-column-gap: 20rem; column-gap: 20rem; }
    .component-list__icon { margin-bottom: 28rem; }
    .component-list__title { font-weight: bold; letter-spacing: -0.025em; }
    .component-list__desc { margin-top: 14rem; letter-spacing: -0.025em; }
    .component-list__action { margin-top: 22rem; }
    .component-list__action .ke-btn__point { margin-right: 20rem; }

    .component-image-list { margin: 65rem 0; row-gap: 65rem; -webkit-column-gap: 20rem; -moz-column-gap: 20rem; column-gap: 20rem; }
    .component-image-list__thumb,
    .component-image-list__thumb img { border-radius: 12rem; }
    .component-image-list__content { margin-top: 28rem; }
    .component-image-list__title { font-weight: bold; letter-spacing: -0.025em; }
    .component-image-list__desc { margin-top: 13rem; letter-spacing: -0.025em; }
    .component-image-list__action { margin-top: 24rem; }
    .component-image-list__action .ke-btn__point { margin-right: 20rem; }
    .component-image-list.component-image-list--four { row-gap: 65rem; -webkit-column-gap: 16rem; -moz-column-gap: 16rem; column-gap: 16rem; }
    .component-image-list.component-image-list--four .component-image-list__content { margin-top: 22rem; }
    .component-image-list.component-image-list--four .component-image-list__desc { margin-top: 9rem; }
    .component-image-list.component-image-list--four .component-image-list__action { margin-top: 14rem; }
    .component-image-list.component-image-list--four .component-image-list__thumb,
    .component-image-list.component-image-list--four .component-image-list__thumb img { border-radius: 8rem; }
    
    .component-slider { margin: 65rem -8rem; }
    .component-slider__item { width: 360rem; padding: 0 8rem; }
    .component-slider__image,
    .component-slider__image img { border-radius: 12rem; }
    .component-slider.component-slider--large .component-slider__item { width: 720rem; }
    
    .component-divider { margin: 120rem 0; }

    .component-post__title { font-weight: bold; letter-spacing: -0.025em; }
    .component-post__desc { letter-spacing: -0.025em; }

    /* RESOURCE */
    .component-resource { padding-top: 70rem; padding-bottom: 65rem; }
    .component-resource__title { font-weight: bold; letter-spacing: -0.025em; }
    .component-resource__list { -webkit-column-gap: 20rem; -moz-column-gap: 20rem; column-gap: 20rem; }
    .component-resource__list em { font-weight: bold; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* LAYOUT */
    .component-container { padding: 90rem 0 110rem; }
    .component-header + .component-container { padding-top: 0; }

    .component-section { margin: 90rem 0; }

    .component-breadcrumb { margin-bottom: 40rem; }
    .component-breadcrumb__btn { font-size: 14rem; }

    /* HEADER */
    .component-header { margin-bottom: 61rem; }
    .component-header__bi { width: 307rem; height: 35rem; margin-top: 0; margin-bottom: 26rem; -webkit-transform: none; -ms-transform: none; transform: none; }
    .component-header__typo { font-size: 30rem; line-height: 1.3; }
    .component-header__typo br { display: none; }
    .component-header__action { margin-top: 30rem; }
    .component-header__action .ke-btn__basic { min-width: 70%; }
    .component-header__action .ke-btn__basic { margin-right: 0; margin-bottom: 10rem; }

    /* INTRO */
    .component-intro__bg-option { width: 200rem; height: 200rem; right: -12rem; }

    .component-intro__info { padding: 48rem 24rem; }
    .component-intro__label { margin-bottom: 11rem; line-height: 1.75; }
    .component-intro__title { font-size: 24rem; }
    .component-intro__desc { margin-top: 16rem; line-height: 1.75; }
    .component-intro__action { margin-top: 22rem; margin-bottom: -8rem; }

    /* COMPONENT */
    .component-title { margin-bottom: 40rem; }

    .component-message { margin: 60rem 0; }
    .component-message__title { font-size: 24rem; }
    .component-message__desc { line-height: 1.75; }
    .component-message__desc .component-linespacing { margin-bottom: 14rem; }
    .component-message__title br,
    .component-message__desc br { display: none; }
    .component-message__action { margin-top: 30rem; }
    .component-message__action .ke-btn__basic { min-width: -webkit-calc(50% - 5rem); min-width: calc(50% - 5rem); }

    .component-list { margin: 60rem 0; grid-template-columns: 1fr; row-gap: 60rem; }
    .component-list__icon { margin-bottom: 26rem; }
    .component-list__title { font-size: 21rem; }
    .component-list__desc { line-height: 1.75; }
    .component-list__action { margin-top: 20rem; margin-bottom: -8rem; }

    .component-image-list { margin: 60rem 0; grid-template-columns: 1fr; row-gap: 60rem; }
    .component-image-list__content { margin-top: 24rem; }
    .component-image-list__title { font-size: 21rem; }
    .component-image-list__desc { margin-top: 10rem; line-height: 1.75; }
    .component-image-list__action { margin-top: 20rem; margin-bottom: -8rem; }
    .component-image-list.component-image-list--four { grid-template-columns: 1fr; row-gap: 60rem; }
    .component-image-list.component-image-list--four .component-image-list__thumb { max-width: 220rem; }
    .component-image-list.component-image-list--four .component-image-list__action br { display: none; }
    .component-image-list.component-image-list--four .component-image-list__action .ke-btn__point { margin-right: 20rem; }

    .component-slider { margin: 60rem -6rem; }
    .component-slider__item { width: 313rem; padding: 0 6rem; }
    .component-slider__item:only-child { width: 100%; }
    .component-slider.component-slider--large .component-slider__item { width: 313rem; }
    .component-slider.component-slider--large .ke-popup-video__overlay-icon { width: 38rem; height: 38rem; right: 16rem; bottom: 16rem; }
    .component-slider.component-slider--large .ke-popup-video__overlay-icon:after { margin-left: -1rem; border-width: 3rem 5rem; }
    .component-slider.component-slider--large .component-slider__item:only-child { width: 100%; }

    .component-divider { margin: 90rem 0; }

    .component-post__link { padding: 32rem 0 28rem; }
    .component-post__title { font-size: 18rem; }
    .component-post__desc { margin-top: 8rem; line-height: 1.75; }

    /* RESOURCE */
    .component-resource { padding: 50rem 0 52rem; }
    .component-resource__list { grid-template-columns: 1fr 1fr; -webkit-column-gap: 12rem; -moz-column-gap: 12rem; column-gap: 12rem; row-gap: 35rem; }
    .component-resource__list em { line-height: 1.75; }
    .component-resource__list a { line-height: 1.6; }

}