@charset "utf-8";

/*서브 스타일*/
.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:18px;
    --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:0px dashed #c7c7c7;padding-bottom: var(--article-padding);display: flex;flex-direction:column;row-gap:24px; }
.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: 600;display: flex;align-items: center;letter-spacing: -0.05em;line-height: 1.21;margin-left: 4px; margin-top:15px;}
.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; margin-bottom:20px;}
.content-wrapper .text-box article > ul{margin-left: 0px;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; padding-bottom:20px;}
.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; line-height:1.8;}
.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 0px;}

    .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;}

    .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;}


    .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;}
}