@charset "utf-8";
/* Common */
.content{ font-family: var(--font3); margin: 0 auto; }
.section{ padding: 80px 0; }
.section-inner{ width: 1400px; margin: 0 auto; }
.section-inner .tit{ margin-bottom: 20px; color: var(--text-color03); font-size: 40px; font-weight: 700; }
.section-inner p.desc{ margin-bottom: 80px; color: var(--text-color09); font-size: 16px; font-weight: 400; word-break: keep-all; }
.section.sys-outline, .section.sys-result{ background-color: #fbfaff; }
.section.sys-company{ background-color: var(--bg14); }

/* intro */
.section.intro{ padding: 138px 0 150px; }
.section.intro h2{ width: 680px; }
.section.intro > img{ width: calc(100% - 680px); }

/* sys-method & sys-technique Common Slick Slider CSS */
.screen-slick-wrap{ position: relative; padding: 25px 20px; border-radius: 20px; background-color: var(--bg14); }
.screen-slick-wrap .number{ font-size: 16px; line-height: 26px; font-weight: bold; color: #000; }
.screen-slick-wrap .number.on{ color: var(--text-color02); }
.screen-slick-wrap .slick-btn{ z-index: 1; border: 0; cursor: pointer; outline: none; }
.screen-slick-wrap .slick-prev.slick-disabled{ background: url(../img/arrow-prev-1@1x.png) no-repeat 0 0 / cover; }
.screen-slick-wrap .slick-next.slick-disabled{     background: url(../img/icon/btn_view_next.png) no-repeat 0 0 / cover; }
.screen-slick-wrap .slick-prev{ position: absolute; height: 40px; width: 40px; left: 19px; top: 280px; background: url(../img/icon/btn_view_prev_on.png) no-repeat 0 0 / cover; }
.screen-slick-wrap .slick-next{ position: absolute; height: 38px; width: 38px; left: 1342px; top: 281px; background: url(../img/arrow-prev@1x.png) no-repeat 0 0 / cover; }
.screen-inner .cont{ width: 380px; }
.screen-inner .cont strong{ color: var(--text-color03); font-size: 30px; font-weight: 700; line-height: 40px; }
.screen-inner .cont p{ margin-top: 20px; color: var(--text-color09); font-size: 16px; font-weight: 400; line-height: 26px; }

/* sys-result */
.section.sys-result .tab-img-area{ width: 100%; }
.section.sys-result .tab-img-area .tab-area{ flex-direction: column; }
.section.sys-result .tab-img-area .tab-area strong{ color: var(--text-color03); font-size: 24px; font-weight: 700; }
.section.sys-result .tab-img-area .tab-area p{ color: var(--text-color09); font-size: 16px; font-weight: 400; line-height: 26px; }
.section.sys-result .tab-img-area .tab-area > li{ padding-left: 40px; cursor: pointer; }
.section.sys-result .tab-img-area .tab-area > li.active{ padding-left: 37px; border-left: 3px solid var(--text-color02); }
.section.sys-result .tab-img-area .tab-area > li.active strong{ color: var(--text-color02); }
.section.sys-result .tab-img-area .img-area{ position: relative; width: 720px; height: 448px; flex-shrink: 0; }
.section.sys-result .tab-img-area .img-area > img{ opacity: 0; visibility: hidden;; position: absolute; top: 30px; left: 0; transition: all 0.3s; }
.section.sys-result .tab-img-area .img-area > img.active{ opacity: 1; visibility: visible; top: 0; }

/* sys-technique */
.section.sys-technique{}
.section.sys-technique .section-inner p.desc{ margin-bottom: 60px; }

@media screen and (max-width: 1400px){}

/*
*--------------------------------------------*
|                   tablet                   |
*--------------------------------------------*
*/
@media screen and (max-width: 1280px){
    .section .section-inner { width: 100%; padding: 0 40px;}
    /* intro */
    .section.intro{ padding: 40px 0 60px; }
    .section.intro .section-inner{ flex-direction: column; }

    /* sys-method & sys-technique Common Slick Slider CSS */
    .screen-inner{ flex-direction: column; gap: 10px; }
    .screen-inner .cont{ order: 2; width: 572px; }
    .screen-inner img{ order: 1; width: auto; height: 400px; }
    .screen-slick-wrap{ padding-top: 145px; padding-bottom: 160px; }
    .screen-slick-wrap .slick-next{ left: unset; right: 19px; }
    .slick-num-wrap{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); }

    /* sys-result */
    .section.sys-result .tab-img-area{ flex-direction: column; gap: 80px; }
    .section.sys-result .tab-img-area .tab-area{ gap: 40px; width: 100%;}
    .section.sys-result .tab-img-area .tab-area > li,
    .section.sys-result .tab-img-area .tab-area > li.active{ padding-left: unset; border-left: none; cursor: default; }
    .section.sys-result .tab-img-area .tab-area > li:not(.list-rspsv) strong{ display: block; pointer-events: none; cursor: default; padding-left: 12px; border-left: 3px solid var(--text-color02); }
    .section.sys-result .tab-img-area .tab-area strong{ color: var(--text-color02); }

    /* sys-technique */
    .screen-slick-wrap .slick-prev, .screen-slick-wrap .slick-next{ top: 50%; }    
}

/*
*--------------------------------------------*
|                   mobile                   |
*--------------------------------------------*
*/
@media screen and (max-width: 820px){
    .section .section-inner { padding: 0 16px;}
    /* intro */
    .section.intro{ padding: 25px 0 40px; }
    .section.intro .section-inner{ gap: 15px; }
    .section.intro .section-inner > img{ width: 278px; }
    .section.intro .right{ width: 100%; }
    .section.intro h2{ margin-bottom: 20px; width: 100%; font-size: 28px; font-weight: 300; letter-spacing: -0.39px; line-height: 38px; }
    .section.intro p{ margin-bottom: 40px; font-size: 14px; line-height: 24px; }
    .section.intro button{ width: 130px; height: 48px; line-height: 48px; font-size: 14px; }

    /* sys-outline */
    .section.sys-outline > img{ width: 100%; }
    .section.sys-result .tab-img-area .tab-area{ gap: 20px; }
    .section.sys-result .tab-img-area .tab-area > li:not(.list-rspsv) strong{ margin-bottom: 10px; font-size: 20px; line-height: 19px; }
    .section.sys-result .list-rspsv:not(:last-of-type){ margin-bottom: 40px; }
    
    /* sys-method */
    .sys-method .section-inner{ gap: 20px; width: 100%; padding: 0; background-color: #fff; }
    .sys-method .section-inner .tit{ width: 328px; margin: 0 auto 20px; }
    .sys-method .section-inner p.desc{ width: 328px; margin: 0 auto 40px; }
    .sys-method .screen-inner{ margin: 0 auto; padding: 40px 16px; background-color: #fff; }
    .sys-method .screen-inner:first-child{ padding-top: unset; }
    .sys-method .screen-inner:last-child{ padding-bottom: unset; }
    .sys-method .screen-slick-wrap{ padding: 0; background-color: var(--bg14); }
    .sys-method .screen-inner img{ width: 100%; height: unset; }
    .sys-method .screen-inner .cont{ width: 328px; margin: 0 auto; }
    .sys-method .screen-inner .cont strong{ font-size: 20px; line-height: normal; }
    .sys-method .screen-inner .cont p{ margin-top: 10px; font-size: 14px; line-height: 24px; }
    .sys-method .screen-slick-wrap .slick-prev, .screen-slick-wrap .slick-next,
    .sys-method .slick-num-wrap{ display: none; }
    .sys-method .screen-inner:first-child{ margin-bottom: 20px; }
    .sys-method .screen-inner img{ width: 320px; }

    /* sys-technique */
    .sys-technique .screen-slick-wrap{ padding: 0; background-color: #fff; }
    .sys-technique .screen-inner:first-child{ margin-bottom: 40px; }
    .sys-technique .screen-inner .cont{ width: 100%; }
    .section.sys-technique .section-inner p.desc{ margin-bottom: 40px; }
    .sys-technique .screen-inner .cont strong{ padding-left: 12px; border-left: 3px solid var(--stroke02); color: var(--text-color02); font-size: 20px; line-height: 19px; }
    .sys-technique .screen-slick-wrap .slick-prev, .screen-slick-wrap .slick-next,
    .sys-technique .slick-num-wrap{ display: none; }
    .sys-technique .screen-inner img{ width: 100%; height: unset; }
    .sys-technique .screen-inner .cont p{ margin-top: 10px; font-size: 14px; line-height: 24px; }
}