@import url("https://fonts.dubuplus.com/css?family=Noto Sans KR");
@font-face {
    font-family: 'SBAggroL';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggroM';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.sub * {font-family:'Noto Sans KR'; }
.sub .intro {margin: 0 0 70px; }
.sub .intro ul {font-size: 0}
.sub .intro ul li {display:inline-block;vertical-align: top; }
.sub .intro ul li:first-child {    width: 50%;    padding-right: 70px;}
.sub .intro ul li:first-child  img {width:100%;}
.sub .intro ul li:first-child p { font-size: 21px;   margin:5px 0 0;  line-height: 1.3;   text-align:center; padding:20px; border:1px solid #ddd; background:#f8f8f8; font-family: 'SBAggroL';}
.sub .intro ul li:first-child p strong {display:block;font-family: 'SBAggroM';font-weight:normal; font-size: 25px; color:#e52937;}

.sub .intro ul li:last-child {   width: 50%;  }
.sub .intro ul li:last-child h3 {   font-family: 'SBAggroL'; font-size:30px;}
.sub .intro dl {margin: 20px 0 0}
.sub .intro p .tit {     margin: 30px 0 10px; display: block; font-family: 'SBAggroL'; color: #fff; background: #1348a9; width: 180px; text-align: Center; border-radius: 20px; padding: 8px 0 5px;    font-weight: normal;}
.sub .intro p {    font-size: 17px;    letter-spacing: -1px;    line-height: 1.6;}
.sub .intro p span { display:block; padding:20px; margin: 10px 0;    line-height: 1.7; font-size: 15px;background:#f7f7f7;}

.sub dl {margin-bottom: 100px;}
.sub dl dt {   font-family: 'SBAggroL'; font-size:32px; color:#000; letter-spacing: -1px; margin-bottom:15px;}
.sub dl dt:before{display:inline-block;content:'';  width:21px; height:22px; margin-right: 10px;background:url(/app/dubu_sourcecode/docs/imgs/1631163467_icon.png);}
.sub dl dt span {display: block;    font-size: 18px;    color: #818181;}
.sub dl dd .table_list table{width:100%;border-collapse:collapse;}
.sub dl dd .table_list table th,
.sub dl dd .table_list table td{padding:20px;border:1px solid #e2e2e2;line-height:1.5em;}

.sub dl dd .table_list table thead th{background:#253394; color: #fff; border: 1px solid #e2e2e2;font-weight: 500;font-size: 20px;}
.sub dl dd .table_list table thead td {text-align:left;}
.sub dl dd .table_list table tbody th {background:#f8f8f8;    letter-spacing: -1px; text-align:center; color:#333; font-weight: 500; font-size:17px;}
.sub dl dd .table_list table td {color: #666; text-align:center; letter-spacing: -1px;font-size: 17px;}
.sub dl dd h4{ font-size: 22px; font-weight: 500; color: #253394;    margin-bottom: 10px;    letter-spacing: -2px;}
.sub dl dd > ul > li span { vertical-align: middle;  font-family: 'SBAggroM'; background:#15157a;line-height: 28px;;border-radius: 50%; text-align:center; font-size: 14px;width:25px; height: 25px; display:inline-block; color:#fff; margin-right: 10px;}
.sub dl dd > ul > li { font-size: 17px;    margin: 10px 0; letter-spacing: -1px; }
.sub dl dd > ul > li > ul {padding: 5px 35px}
.sub dl dd > ul > li > ul > li{font-size: 16px; font-weight: 300;    line-height: 1.8;    color: #333;}

.bg {padding: 30px; background:#f7f7f7; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;}




/* tablet */
@media screen and (min-width:769px) and (max-width:991px){
    .sub .intro ul li:first-child,
    .sub .intro ul li:last-child {width: 100%; }
    .sub .intro ul li:first-child {padding-right:0; margin-bottom: 30px;}
    .sub ul li:last-child {margin: 10px 0 0}
}

/* mobile */
@media screen and (max-width:768px){
    .sub img {width:100%;}
    .sub .intro ul li:first-child,
    .sub .intro ul li:last-child {width: 100%; }
    .sub .intro ul li:first-child {padding-right:0; margin-bottom:30px;}
    .sub .intro p {font-size:15px;}

    .sub dl dt {font-size: 25px;}
    .sub dl dd .table_list table th, 
    .sub dl dd .table_list table td {        padding: 15px;}
    .sub dl dd .table_list table thead th {font-size: 15px;}
    .sub dl dd .table_list table tbody th {font-size: 15px;}
    .sub dl dd .table_list table  td {font-size:14px;}


    .table_list table {
        min-width: 700px;
        /* 임의로 최소 넓이 조절 */
    }

    .table_list {
        width: 100%;
        /* 테블릿, 모바일 컨텐츠 사이즈 맞게 조절 */
        overflow-x: scroll;
    }

    .table_list::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        border: 3px solid #fff;
    }

    .table_list::-webkit-scrollbar-track {
        background: #efefef;
        border-radius: 10px;
    }

    .table_list::-webkit-scrollbar-thumb {
        height: 50px;
        width: 50px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }
    .sub dl dd h4 {    font-size: 18px;}



}