@charset "utf-8";

/*
 * File       : rwd-main.css
 * Author     : STUDIO-JT
 * Guideline  : JTstyle.2.0
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) 2000px
 * 02) 1800px
 * 03) 1500px
 * 04) 1200px
 * 05) 1023px
 * 06) 860px
 * 07) 540px
 */



 /* **************************************** *
 * 2000px
 * **************************************** */
@media (min-width: 2000px){

    /* MAIN VISUAL */
    .main-visual__slider { max-width: 1920rem; max-height: 1080rem; }

}



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

    /* MAIN VISUAL */
    .main-visual__slider { max-width: calc(100% - 300rem); }

}




/* **************************************** *
 * 1500px
 * **************************************** */
@media (max-width: 1500px){
    /* LAYOUT */
    .main-section { padding:100rem 0; }
    .main-section__title { margin-bottom: 60rem; }
    .main-section__more { margin-top: 60rem; }

    /* MAIN VISUAL */
    .main-visual { margin-top: 105rem; }
    .main-visual .swiper-control { bottom: 34rem; }
    .main-visual__scroll { bottom: 34rem; }
    .main-visual__slider { max-width: calc(100% - 200rem); }

    /* BUSINESS */
    .main-section.main-business { padding-top: 80rem; }

    /* QUOTATION */
    .main-quotation { margin-top: 60rem; padding: 60rem 110rem 56rem; column-gap: 110rem; }
    .main-quotation__proportion-progress--state { top: -13rem; }

    /* BANNER */
    .main-banner .wrap { margin:0; }

    /* PARTNER */
    .main-partner__group:nth-child(2) { margin-top: 24rem; }
    .main-partner__item { margin:0 12rem; }

    /* NEWS */
    .main-news__title { margin-bottom: 36rem; }
    .main-plannews__content { column-gap: 24rem; }

    .main-trends { padding-top: 60rem; margin-top: 60rem; }
    .main-trends__list { column-gap: 24rem; }
    
    /* SUBSCRIPT */
    .main-subscript { margin-top: 80rem; }

    /* SUPPORT */
    .main-support__notice { padding-right: 100rem; }
    .main-support__qna { padding-left: 100rem; }
    
}



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

    /* MAIN VISUAL */
    .main-visual { margin-top: 80rem; }
    .main-visual__slider { max-width: 100%; overflow: hidden; }
    .main-visual__slider .swiper-navigation { display: none; }
    .main-visual__item { border-radius: 0; }

    /* QUOTATION */
    .main-quotation { grid-template-columns: 35% minmax(0, 1fr); padding: 48rem 80rem 44rem; column-gap: 80rem; }
    .main-quotation__proportion-progress { width: calc(100% - 64rem); }
    
    /* BANNER */
    .main-banner__item-desc-logo { width: 76rem; height: 29rem; margin-right: 2rem; }

    /* PORTFOLIO */
    html.ios .main-portfolio .jt-category__item-type { padding-top: 1px; }

    /* NEWS */
    .main-news__title { margin-bottom: 28rem; }

    /* SUPPORT */
    .main-support__notice { padding-right: 60rem; }
    .main-support__qna { padding-left: 60rem; }
    .main-support__date:after { margin-top: -2rem; }
    html.ios .main-support__date:after { margin-top: -3rem; }
    html.ios .main-support__title .jt-guide--icon { margin-top: 0; }

    /* JT SUBSCRIPT */
    .main-subscript__title .jt-guide--icon { width: 215rem; }
    
    /* FAQ */
    .main-faq__content { margin-top: -28rem; }

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){
    /* LAYOUT */
    /* body.home:not(.jt-minimize-layout) #header:not(.minimize) .small-menu-btn__line { background: #fff; }
    html.desktop #header:hover .small-menu-btn__line { background: var(--color-base) !important; } */

    /* MAIN VISUAL */
    .main-visual { margin-top: 70rem; }
    .main-visual__scroll { display: none; }
    .main-visual .swiper-button__wrap { display: none; }
    .main-visual .swiper-control { text-align: center; padding: 0;}
    .main-visual .swiper-control .swiper-control__arrow { display: inline-block; }

    /* QUOTATION */
    .main-quotation__proportion-progress--state { top: -11rem }

    /* NEWS */
    .main-news__title { margin-bottom: 24rem; }
    
    /* SUBSCRIPT */
    .main-support__notice { padding-right: 50rem; }
    .main-support__qna { padding-left: 50rem; }
    html.ios .main-support__title .jt-guide--icon { margin-top: -1rem; }

    /* SUPPORT */
    .main-support a { gap: 36rem; }
}




/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){
    /* LAYOUT */
    .main-section { padding: 90rem 0; }
    .main-section__more { margin-top: 60rem; }

    /* MAIN VISUAL */
    /* .main-visual__picture { padding-top: 84%; } */
    /* .main-visual__bg .jt-fullvid-container { padding-top: 84%; } */
    .main-visual__bg::after { background: rgba(0, 0, 0, 0.5); }
    .main-visual__content { left: 60rem; }
    .main-visual__content-btn-wrap { margin-top: 24rem; }

    /* BUSINESS */
    .main-business__item-title .jt-guide--icon { top: 0; }
    html.ios .main-business__item-title .jt-guide--icon { top: -2rem; }

    /* QUOTATION */
    .main-quotation { grid-template-columns: minmax(0, 1fr);  padding: 60rem 40rem 48rem; height: auto; border-radius: var(--border-radius); }
    .main-quotation__review { margin-top: 48rem; padding-top: 48rem; border-top: 1rem solid var(--color-base-line); }
    .main-quotation__proportion-progress--state { top: -10rem }

    /* BANNER */
    .main-banner__item-bg { left: calc(50% - 170rem); }
    .main-banner__item-desc-logo { width: 75rem; height: 28rem; }
    
    /* PORTFOLIO */
    html.ios .main-portfolio .jt-category__item-type { padding-top: 2px; padding-bottom: 0; }

    /* PARTENR */
    .main-partner__item { margin:0 8rem; }
    .main-partner__item > a { padding: 24rem; }
    .main-partner__item-title { word-wrap: normal; }

    .main-partner__group:nth-child(2) { margin-top: 16rem; }

    /* NEWS */
    .main-plannews__list:nth-child(1) { margin-bottom: 60rem; }
    .main-plannews__content { grid-template-columns: repeat(1, minmax(0, 1fr)); }

    .main-trends { border-top: 0; padding-top: 0; }
    .main-trends__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40rem 16rem; }
    .main-trends .jt-news__item.jt-news--medium .jt-news__item-content { margin-top: 14rem; }
    .main-trends .jt-news__item.jt-news--medium .jt-news__item-title { margin-top: 4rem; }
    .main-trends .jt-news__item.jt-news--medium .jt-news__item-date { margin-top: 8rem; }

    /* SUBSCRIPT */
    .main-subscript { margin:80rem -36rem 0; border-radius: 0; padding:40rem 40rem 32rem; }
    .main-subscript__title .jt-guide--icon { width: 180rem; top: -1rem; }
    .main-subscript__btn { margin-top: 12rem; }

    /* SUPPORT */
    .main-support__notice { padding-right: 36rem; }
    .main-support__qna { padding-left: 36rem; }
    .main-support__content { padding:40rem 0; }
    html.ios .main-support__title .jt-guide--icon { margin-top: -2rem; }
    
}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){
    /* LAYOUT */
    .main-section { padding: 70rem 0; }
    .main-section__title { margin-bottom: 34rem; }
    .main-section__more { margin-top: 38rem; }

    /* MAIN VISUAL */
    .main-visual { margin-top: 68rem; }
    .main-visual__picture { padding-top: 128.2%; }
    .main-visual__content { left: 20rem; padding-right: 20rem; }
    .main-visual__content-title { margin-bottom: 6rem; }
    .main-visual__content-btn-wrap { margin-top: 28rem; }
    .main-visual__content-btn { padding: 10rem 24rem; }
    .main-visual__content-btn .jt-guide--icon { margin-right: 4rem; transform: translateY(1rem); }
    .main-visual .swiper-control { bottom: 18rem; right: 12rem; }
    .main-visual .swiper-control .swiper-control__arrow.swiper-button-prev { margin-right: 25rem; }
    .main-visual__slider .swiper-state { margin-left: 21rem; }
    .main-visual__slider .swiper-control .swiper-pagination .swiper-pagination-current { padding-right: 8rem; }
    .main-visual__slider .swiper-control .swiper-pagination .swiper-pagination-total { padding-left: 8rem; }
    /* .main-visual__slider .jt-fullvid { min-height: 100%; } */
    .main-visual__bg .jt-fullvid-container { aspect-ratio: 39 / 50; padding-top: 0; }
    .main-visual__slider .jt-fullvid__inner { position: relative; width: 100%; height: 100%; --vidRatio: calc(16 / 9); }
    .main-visual__slider .jt-fullvid { position: relative; --vidHeight: 100vh; --vidWidth: calc(var(--vidHeight) * var(--vidRatio)); width: var(--vidWidth); height: var(--vidHeight); top: 50%; left: 50%; transform: translate(-50%,-50%); }

    /* BUSINESS */
    .main-business__list { grid-template-columns: repeat(1, minmax(0, 1fr)); margin:0; }
    .main-business__item { margin-bottom: 40rem; border-right: 0; }
    .main-business__item:last-child { margin-bottom: 0; }
    .main-business__item > a { margin: 0; }
    .main-business__item-title { margin-top: 16rem; }
    .main-business__item-title .jt-guide--icon { margin-left: 6rem; }

    /* QUOTATION */
    .main-quotation { padding: 44rem 28rem 28rem; height: auto; }
    .main-quotation__proportion-item { margin-bottom: 23rem; }
    .main-quotation__proportion-item--matching { margin-bottom: 0; }
    .main-quotation__proportion-title { margin-top: 10rem; }
    .main-quotation__proportion-progress { width: calc(100% - 54rem); }
    .main-quotation__proportion-progress--state { top: -9rem }
    .main-quotation__review { margin-top: 32rem; padding-top: 32rem; }
    .main-quotation__review-list { padding: 0 0 42rem }
    .main-quotation__review-item { text-align: left; }
    .main-quotation__review-content { word-break: break-all; }
    .main-quotation__review .swiper-navigation .swiper-button__wrap { display: none; }

    /* BANNER */
    .main-banner__item { padding: 42rem 0 36rem; }
    .main-banner__item-bg { left: calc(50% - 103rem); width: 245rem; }
    .main-banner__item-btn { margin-top: 12rem; }
    .main-banner__item-desc { padding: 0 20rem; }
    .main-banner__item-desc-logo { width: 74rem; height: 26rem; margin-right: 0; }
    /* .main-banner__item .main-banner--desktop { display: none; }
    .main-banner__item .main-banner--mobile { display: block; } */

    /* PORTFOLIO */
    .main-portfolio .jt-portfolio__item:nth-child(n+7) { display: none; }
    .main-portfolio--show .jt-portfolio__item:nth-child(n+7) { display: block; }
    .main-portfolio--show .main-portfolio__more { display: none; }
    .main-portfolio__more { display: block; background: var(--color-base-bg); position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }

    /* PARTENR */
    /* .main-partner__item { margin:0 5rem; width: 154rem; height: 154rem; } */
    .main-partner__item { margin:0 5rem; width: 185rem; height: 185rem; }
    .main-partner__item > a { padding: 20rem; }
    .main-partner__item-ci { max-width: 120rem; }
    .main-partner__item-title { bottom: 20rem; }
    .main-partner__group:nth-child(2) { margin-top: 10rem; }

    /* SUBSCRIPT */
    .main-subscript { margin:70rem -20rem 0; padding: 30rem 20rem; }
    .main-subscript__title .jt-guide--icon { width: 178rem; top: -2rem; }
    html.ios .main-subscript { padding-bottom: 26rem; }

    /* NEWS */
    .main-plannews__list:nth-child(1) { margin-bottom: 40rem; }

    .main-trends { margin-top: 54rem; }
    .main-trends__list { gap: 32rem 10rem; }
    .main-trends .jt-news__item.jt-news--medium .jt-news__item-title { height: 50rem; }
    .main-trends .jt-news__item-thumb .jt-thumb__icon { right: 10rem; bottom: 10rem; }
    .main-trends .jt-news__item-thumb .jt-thumb__icon--outlink { width: 30rem; height: 30rem; }
    .main-trends .jt-news__item-thumb .jt-thumb__icon--outlink .jt-guide--icon { width: 20rem; height: 20rem; }

    /* FAQ */
    .main-faq__content { margin-top: -26rem; }

    /* SUPPORT */
    .main-support a { gap: 16rem; }
    .main-support__content { padding: 30rem 0; }
    .main-support__desc { padding-right: 0; }
    .main-support__qna { padding-left: 0; margin-top: 24rem; padding-top: 24rem; border-top: 1rem solid var(--color-base-line); border-left: 0; }
    .main-support__title .jt-guide--icon { margin-left: 6rem; margin-top: 0; }
    html.ios .main-support__title .jt-guide--icon { margin-top: -3rem; }
    .main-support__date { position: absolute; right: 0; margin-right: 0; }
    .main-support__date:after {display: none; }
    .main-support__notice { margin-right: 94rem; padding-right: 0; }

}