@charset "utf-8";

/*서브 스타일*/
.kfem-basic-body .container{max-width: 1560px;}
.wrap .sub-content-box {width: 100%;margin: 0 auto;display: flex;justify-content: space-between;padding: 20px 0;}
.page-title {margin-top: calc(var(--header-sns-height) + var(--header-height));}
.page-title .page-title-image {height: 370px;}
.page-title-caption {position: absolute;bottom: 50%;left: 0;width: 100%;transform: translateY(50%);}
.page-title-caption h2 {margin-bottom: 0;font-size: 48px;letter-spacing: -0.025em;font-weight: 600;color: var(--white-color);text-align: center;}
/*.page-title-caption h2::before{content:'';display: block;font-size: 20px;font-weight: 500;letter-spacing: -0.05em;line-height: 1.5;text-align: center;color: var(--white-color);}*/
.page-title-caption h3 {display: block;font-size: 20px;font-weight: 500;letter-spacing: -0.05em;line-height: 1.5;text-align: center;color: var(--white-color);}
.wrap .side-content .header-box {border-radius: 25px 0 0 0;box-shadow: none;padding: 32px 36px;}
.wrap .side-content .header-box > h2::before {content: none;}
.wrap .side-content .header-box > h2::after {content: none;}
.wrap .side-content .menu-list {margin-top: 6px;display: flex;flex-direction: column;row-gap: 6px;}
.wrap .side-content .menu-item > a {width: 100%;padding: 0 20px;color: #525252;font-size: 18px;font-weight: 600;height: 60px;display: flex;align-items: center;justify-content: space-between;transition: 0.2s;position: relative;border: 1px solid #e8e8e8;border-radius: 10px;overflow: hidden;}


.content-box .content-wrapper{padding:50px 0 100px;}
.table-style table{border-top:2px solid #c4d4e4;width: 100%;}
.table-style table :is(th,td){font-family: Noto Sans KR, sans-serif;height: 50px;border-bottom:1px solid #e2e2e2;border-right:1px solid #e2e2e2;padding:10px 12px;font-size: 16px;}
.table-style table :is(th,td).center{text-align: center;}
.table-style table th{background-color: #f8f9fd;text-align: center;vertical-align: middle;font-weight: 700;}
.table-style.auto table th{width: 155px;}
.table-style table td:last-of-type{border-right: 0;}

.table-style table td > ul > li{font-weight: 400;color:#474747;position: relative;padding-left: 15px;}
.table-style table td > ul > li::before {content:'';display:block;border-radius:50%;width:4px;height:4px;background-color:#000000;position: absolute;top:12px;left:3px;}

.content-wrapper .text-box{
    --article-padding:70px;
    --row-40:40px;
    --row-30:30px;
    --h2-size:36px;
    --h2-marker:6px;
    --h3-size:28px;
    --h3-marker:13px;
    --h4-size:28px;
    --h4-marker:25px;
    --p24-size:24px;
    --p20-size:20px;
    --box-padding:30px;
    --li-marker:19px;
    --table-size:20px;
}

.content-wrapper .text-box .table-style table{border-color:#000000;}
.content-wrapper .text-box .table-style table :is(th,td){height: 58px;font-size: var(--table-size);}
.content-wrapper .text-box .table-style table th{background-color: #eff2f4}


.content-wrapper .text-box strong{color:#000000;font-size: inherit;}
.content-wrapper .text-box article{border-bottom:1px dashed #c7c7c7;padding-bottom: var(--article-padding);display: flex;flex-direction:column;row-gap: var(--row-40);}
.content-wrapper .text-box h2{font-size: var(--h2-size);color:#000000;font-weight: 700;display: flex;align-items: center;}
.content-wrapper .text-box h2::before{content:'';background-image: url("../img/icon-h2.png");background-size:cover;font-size:var(--h2-marker);width: 1em;height: auto;aspect-ratio: 3 / 16;display: inline-block;margin-right: 3em;}
.content-wrapper .text-box h3{font-size: var(--h3-size);color:#221e1f;font-weight: 700;display: flex;align-items: center;letter-spacing: -0.05em;line-height: 1.21;margin-left: 4px;}
.content-wrapper .text-box h3::before{content:'';background-image: url("../img/icon-h3.png");background-size:cover;font-size:var(--h3-marker);width: 1em;height: auto;aspect-ratio: 13 / 20;display: inline-block;margin-right: 1.384615384615385em;}
.content-wrapper .text-box h4{font-size: var(--h4-size);color:#221e1f;font-weight: 700;display: flex;align-items: center;letter-spacing: -0.05em;line-height: 1.21;margin-left: 4px;}
.content-wrapper .text-box h4::before{content:'';background-image: url("../img/icon-point.png");background-size:cover;font-size:var(--h4-marker);width: 1em;height: auto;aspect-ratio: 1 / 1;display: inline-block;margin-right:0.32em;}
.content-wrapper .text-box article > p{font-size: var(--p20-size);font-weight: 400;color:#474747;line-height: 1.6;}
.content-wrapper .text-box article > ul{margin-left: 30px;display: flex;flex-direction: column;row-gap: var(--row-30);}
.content-wrapper .text-box article > ul.start{margin-left: 0;}
.content-wrapper .text-box article > ul > li{display: flex;flex-direction: column;row-gap: 10px;position: relative;}
.content-wrapper .text-box article > ul > li > span{font-size: var(--p24-size);line-height: 1.25;color:#000000;font-weight: 600;padding-left: 30px;}
.content-wrapper .text-box article > ul > li::before{content:'';background-image: url("../img/icon-arrow.png");background-size:cover;font-size:var(--li-marker);width: 1em;height: auto;aspect-ratio: 1 / 1;margin-right: 0.4210526315789474em;display: inline-block;position: absolute;left: 0;top:0.3em;}
.content-wrapper .text-box article > ul.arrow li{padding-left: 25px; font-size: var(--p20-size);}
.content-wrapper .text-box article > ul.arrow > li::before{content:'';background-image: url("../img/icon-color-arrow.png");width: 10px;height: 15px;display: inline-block;margin-right: 8px;position: absolute;left: 0;top:0.3em;}
.content-wrapper .text-box article > ul > li > p{font-size: var(--p20-size);color:#474747;line-height: 1.6;}
.content-wrapper .text-box article > ul > li > ol {list-style: none;padding-left: 0; counter-reset: num;display: flex;flex-direction: column;row-gap: var(--row-30);}
.content-wrapper .text-box article > ul > li > ol > li{font-size: var(--p20-size);font-weight: 700;color:#000000;line-height: 1.6;}
.content-wrapper .text-box article > ul > li > ol > li::before {counter-increment: num;content: counter(num)'.';display: inline-block;margin-right: 3px;}
.content-wrapper .text-box article > ul > li > ol > li > ul { margin-top: 15px;}
.content-wrapper .text-box article > ul > li > ol > li > ul > li{font-size: var(--p20-size);font-weight: 400;color:#474747;position: relative;padding-left: 20px;}
.content-wrapper .text-box article > ul > li > ol > li > ul > li::before {content:'';width:4px;height:4px;background-color:#000000;display:block;border-radius:50%;position: absolute;top:13px;left:3px;}
.content-wrapper .text-box article > ul > li > ul {display: flex;flex-direction: column;row-gap: 10px;}
.content-wrapper .text-box article > ul > li > ul > li{font-size: var(--p20-size);font-weight: 400;color:#474747;position: relative;padding-left: 20px;}
.content-wrapper .text-box article > ul > li > ul > li::before {content:'';width:4px;height:4px;background-color:#000000;display:block;border-radius:50%;position: absolute;top:13px;left:3px;}
.content-wrapper .text-box article > ul > li > ol > li > ol {list-style: none;padding-left: 0;margin-top: 20px;margin-left: 18px;display: flex;flex-direction: column;row-gap: 20px;}
.content-wrapper .text-box article > ul > li > ol > li > ol > li{font-size: var(--p20-size);font-weight:400;color:#474747;position: relative;padding-left: 20px;}
.content-wrapper .text-box article > ul > li > ol > li > ol > li > span{font-weight: 700;color:#000000;}
.content-wrapper .text-box article > ul > li > ol > li > ol > li::before{content:'';background-image: url("../img/icon-ol.png");width: 10px;height: 10px;display: inline-block;margin-right: 8px;position: absolute;left: 0;top:11px;}

.content-wrapper .text-box article .box-text {border:1px solid #e2e2e2;border-radius: 10px;padding:var(--box-padding);margin-top: 10px;}
.content-wrapper .text-box article .box-text ul {display: flex;flex-direction: column;}

.content-wrapper .text-box article .box-text ul.space-large {row-gap: 15px}
.content-wrapper .text-box article .box-text ul > li{font-size: var(--p20-size);;font-weight: 400;color:#000000;position: relative;padding-left: 1em;}
.content-wrapper .text-box article .box-text ul > li::before {content:'';width:4px;height:4px;background-color:#000000;display:block;border-radius:50%;position: absolute;top:13px;left:3px;}
.content-wrapper .text-box article .box-text ul > li > ul {margin-top: 5px}
.content-wrapper .text-box article .box-text ul > li > ul > li{font-size: var(--p20-size);;font-weight: 400;color:#000000;position: relative;padding-left: 1em;}
.content-wrapper .text-box article .box-text ul > li > ul > li::before {content:'';width:6px;height:2px;background-color:#000000;position: absolute;top:15px;left:3px;    border-radius: 0;}
.content-wrapper .text-box article .box-text > p{padding-left: 20px;}
.content-wrapper .text-box img{max-width: 100%;display: block;}

.content-wrapper .text-box article:nth-of-type( n  + 2){padding-top: var(--article-padding);}
.content-wrapper .text-box .direct{}
.content-wrapper .text-box .direct ul{display: flex;flex-direction: column;row-gap: 15px;}
.content-wrapper .text-box .direct ul > li{display: flex;font-size: var(--p20-size);line-height: 1.5em;color:#474747;position: relative;padding-left: 15px;}
.content-wrapper .text-box .direct ul > li::before {content:'';display:block;border-radius:50%;width:4px;height:4px;background-color:#000000;position: absolute;top:11px;left:3px;}
.content-wrapper .text-box .direct ul > li span{margin-right: 6px;flex: none;}


@media (max-width:960px) {
    .content-box .content-wrapper {padding: 20px 0 40px;}

    .table-style.auto table :is(th,td) {height: 50px;font-size: 14px;}
    .table-style.auto table th {background-color: #f8f9fd;width: 60px;}
    .table-style table td > ul > li::before {top: 8px;left: 0;}
    .table-style table td > ul > li {padding-left: 12px;}


    .page-title {margin-top: var(--header-height);}
    .page-title .page-title-image {height: 280px;}
    .page-title-caption h2 {font-size: 40px;}
    /*.page-title-caption h2::before {font-size: 16px;}*/
    .page-title-caption h3 {font-size: 16px;}

    .content-wrapper .text-box{
        --article-padding:60px;
        --row-40:30px;
        --row-30:20px;
        --h2-size:32px;
        --h3-size:24px;
        --h4-size:24px;
        --p24-size:20px;
        --p20-size:16px;
        --table-size:13px;
        --box-padding:20px;
    }
    .content-wrapper .text-box .table-style table th{width: auto !important;white-space: nowrap;}
    .content-wrapper .text-box article > ul > li > span {padding-left: 25px;}

    .content-wrapper .text-box article > ul > li > ol > li > ol > li{padding-left: 16px;}
    .content-wrapper .text-box article > ul > li > ol > li > ol > li::before {top: 8px;}
    .content-wrapper .text-box article > ul > li > ol > li > ul > li{padding-left: 16px;}
    .content-wrapper .text-box article > ul > li > ol > li > ul > li::before{top: 10px;}


    .content-wrapper .text-box article > ul > li::before{top:0.2em;}
    .content-wrapper .text-box article > ul > li > ul > li{padding-left: 15px;}
    .content-wrapper .text-box article > ul > li > ul > li::before{top: 11px;left: 3px;}
    .content-wrapper .text-box article .box-text ul > li{padding-left: 15px;}
    .content-wrapper .text-box article .box-text ul > li::before{top: 11px;left: 3px;}
    .content-wrapper .text-box article .box-text ul > li > ul > li::before {top:12px;left:3px;}
}

@media (max-width:480px) {
    .content-wrapper .text-box{
        --article-padding:40px;
        --row-40:20px;
        --row-30:20px;
        --h2-size:24px;
        --h2-marker:4px;
        --h3-size:20px;
        --h3-marker:10px;
        --h4-size:20px;
        --h4-marker:18px;
        --p24-size:18px;
        --p20-size:13px;
        --table-size:10px;
        --box-padding:10px;
        --li-marker:15px;
    }




    .table-style table td > ul > li::before {width: 3px;height: 3px;top: 6px;left: 0;}
    .table-style table td > ul > li {padding-left: 8px;}

    .table-style table :is(th,td){height: 40px; padding:5px 10px;}
    .table-style.auto table :is(th,td) {font-size: 13px;}
    .table-style.auto table th {width: 50px;}

    .page-title .page-title-image {height: 240px;}
    .page-title-caption h2 {font-size: 34px;}
    /*.page-title-caption h2::before {font-size: 14px;}*/
    .page-title-caption h3 {font-size: 14px;}


    .content-wrapper .text-box article > ul > li > span {padding-left: 20px;}

    .content-wrapper .text-box article > ul > li > ol > li > ol > li{padding-left: 18px;}
    .content-wrapper .text-box article > ul > li > ol > li > ol > li::before {top: 6px;}
    .content-wrapper .text-box article > ul > li > ol > li > ul > li{padding-left: 12px;}
    .content-wrapper .text-box article > ul > li > ol > li > ul > li::before{top: 8px;}

    .content-wrapper .text-box .direct ul > li{padding-left: 12px;}
    .content-wrapper .text-box .direct ul > li::before{width: 3px;height: 3px;top: 8px;left: 3px;}
    .content-wrapper .text-box article > ul > li > ul > li{padding-left: 10px;}
    .content-wrapper .text-box article > ul > li > ul > li::before{width: 3px;height: 3px;top: 8px;left: 3px;}
    .content-wrapper .text-box article .box-text ul > li{padding-left: 12px;}
    .content-wrapper .text-box article .box-text ul > li::before{width: 3px;height: 3px;top: 9px;left: 3px;}
    .content-wrapper .text-box article .box-text ul > li > ul > li::before {width:4px;height:2px;top:9px;left:3px;}

    .content-wrapper .text-box h2::before{margin-right: 10px;}
    .content-wrapper .text-box h3::before{margin-right: 10px;}
    .content-wrapper .text-box h4::before{margin-right:10px;}
    .content-wrapper .text-box h4::before {margin-right: 10px;}

    .content-wrapper .text-box article > ul > li > ol > li > ol {margin-top: 10px;margin-left: 0;}
    .content-wrapper .text-box article > ul > li > ol > li > ol > li {padding-left: 0;}
    .content-wrapper .text-box article > ul > li > ol > li > ol > li > span{margin-left: 1em;}
}