/* common */
.subpage { overflow: hidden; position:relative; }
.subpage > section {padding: 80px 0;}
.subpage > section:nth-of-type(even) {background: #f7f7f7;}
/* font */
.h_28 {font-size: 28px; font-weight:500; color: #000; line-height: 1.3; font-family: 'Pretendard';}
.h_24 {font-size: 24px; font-weight:700; color: #000; line-height: 1.3;font-family: 'Pretendard'; }
.h_22 {font-size: 22px; font-weight:500; color: #000; line-height: 1.3;font-family: 'Pretendard'; }
.p_20 {font-size: 20px; font-weight: 300; color: #000; line-height:38px; font-family: 'Pretendard';}
.p_18 {font-size: 18px; font-weight: 300; color: #000; line-height:1.65;}
.p_16{font-size: 16px; font-weight: 500; color: #fff;}
.p_15{font-size: 15px; font-weight: 500; color: #000;}

/* title */
.c_tit { position:relative; display: inline-block; font-size: 60px; color: #000; white-space: nowrap; font-weight: 800; }
/* .c_tit::after { content:".";  color:#0b3b63; } */
.line_tit { position:relative; padding-left:18px; margin:0 0 35px; font-weight: 700;  text-align: left ;}
.line_tit::before { content:""; position:absolute; left:0; width:4px; top:3px; height: 30px; background:#0b3b63; }
/* flex_tit */
.flex_tit {display: flex; align-items: flex-start; text-align: left ;}
.flex_tit h2 {flex-shrink: 0; min-width: 115px; margin: 0 55px 0 0;}

/* article 공통 */
.art_wrap article { padding:50px 0; border-top: 1px solid #ddd; }
.art_wrap article:first-of-type { padding-top:0; border-top: 0;}
.art_wrap article:last-of-type { padding-bottom:0; }

/* dot_list */
.dot_list {text-align: left;}
.dot_list li {position: relative; padding-left: 12px; }
.dot_list li::before {content: ''; display: block; width: 4px; height: 4px; background-color: #0b3b63; position: absolute; left: 0; top:11px; }

.dot_list li:nth-child(n+2) {margin-top: 5px;}

.table_wrap table { width:100%; border-collapse: collapse; border:1px solid #ddd; border-top: 3px solid #c03356; text-align: center; }
.table_wrap table thead th { background:#223353; padding:16px 10px; font-weight: 600; color:#fff; font-size: 18px; border-left: 1px solid rgba(255,255,255,0.25); }
.table_wrap table tbody tr { border-top: 1px solid #ddd; }
.table_wrap table tbody th { background:#f7f7f7; padding:16px 8px; font-weight: 500; color:#000; font-size: 16px; border-right: 1px solid #ddd; }
.table_wrap table tbody th.subj {font-size: 18px; font-weight: 600; }
.table_wrap table tbody td { background:#fff; padding:16px 30px; font-weight: 300; color:#000; font-size: 16px; border-right: 1px solid #ddd; }
.table_arrow { display: none; }

/*Content CSS*/
/* sec1 */
#sec1 .art_wrap {margin-top: 80px;}
#sec1 .flex_tit .wrap{flex-grow: 1;}
#sec1 .img_list {display: flex; justify-content: space-between; text-align: center; }
#sec1 .img_list li {width: calc(25% - 15px); border:1px solid #ddd; padding: 30px; position: relative; z-index: 1; transition: border-color .3s; }
#sec1 .img_list li::before {content: ''; position: absolute; left: 0; top:0; background-color: #0b3b63; width: 100%; height: 40%; z-index: -2;}
#sec1 .img_list li::after {content: ''; position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: -1; border:3px solid #223353;  opacity: 0; transition: opacity .3s; }
#sec1 .img_list li:hover {border-color: #223353;}
#sec1 .img_list li:hover::after {opacity: 1;}
#sec1 .img_list .txt {margin-top: 25px; }
#sec1 .img_list .img {overflow: hidden; width: 100%; height: 0; padding-bottom: 58%;}
#sec1 .img_list h3 {font-weight: 800; margin-bottom: 5px; }
#sec1 .table_wrap + p {margin-top: 30px; text-align: left;}

#sec1 .cast_list{display: flex; flex-wrap: wrap; margin-top: 70px;}
#sec1 .cast_list li{margin-right: 21px; max-width: calc(33.3% - 14px);}
#sec1 .cast_list li:nth-child(3n), #sec1 .cast_list li:last-child{margin-right: 0;}
#sec1 .cast_list li:nth-child(n+4){margin-top: 60px;}
#sec1 .cast_list li.long{max-width: calc(66.6% - 6.5px); display: flex; }
#sec1 .cast_list li.long .wrap:nth-of-type(1) .img{border-right: 0;}
#sec1 .cast_list li.long .wrap:nth-of-type(2) .img{border-left: 0;}

#sec1 .cast_list li .img{position: relative; border: solid 3px #223353; margin-bottom: 15px;}
#sec1 .cast_list li .step{position: absolute; left: -3px; top: -20px; display: flex; align-items: center; padding: 0 19px; height: 40px; box-shadow: 0px 5px 2.9px 0.1px rgba(0, 0, 0, 0.16); background-color: #223353;border-radius: 40px 40px 40px 0;}
#sec1 .cast_list li .step span{font-size: 23px; font-weight: 700; color: #fff; display: inline-block; margin-right: 7px;}

@media screen and (min-width:768px) {
    #sec1 .img_list .txt.flex {display: flex ; align-items: center; justify-content: center; text-align: left ;}
    #sec1 .img_list .txt.flex h3 {margin: 0 15px 0 0;}
    #sec1 .img_list p {font-size: 16px;}
}


@media screen and (min-width:1421px) {
    .dot_list.p_20 li::before {top:15px;}
}


@media screen and (max-width:1420px) {
    br:not(.mob) {display: none; }

    /* content */
    #sec1 .img_list li {padding:  20px; }

    #sec1 .cast_list li{margin-right: 21px; max-width: calc(33.3% - 14px);}
    #sec1 .cast_list li:nth-child(3n), #sec1 .cast_list li:last-child{margin-right: 0;}
    #sec1 .cast_list li:nth-child(n+4){margin-top: 60px;}
    #sec1 .cast_list li.long .wrap:nth-of-type(1) .img{border-right: 0;}
    #sec1 .cast_list li.long .wrap:nth-of-type(2) .img{border-left: 0;}

    #sec1 .cast_list li .img{position: relative; border: solid 3px #223353; margin-bottom: 15px;}
    #sec1 .cast_list li .step{position: absolute; left: -3px; top: -20px; display: flex; align-items: center; padding: 0 19px; height: 40px; box-shadow: 0px 5px 2.9px 0.1px rgba(0, 0, 0, 0.16); background-color: #223353;border-radius: 40px 40px 40px 0;}
    #sec1 .cast_list li .step span{font-size: 23px; font-weight: 700; color: #fff; display: inline-block; margin-right: 7px;}



}


@media screen and (max-width:1023px) {
    /* common */
    .subpage {text-align: center;}
    .c_tit { font-size: 48px; }
    /* flex_tit */
    .flex_tit {display: block; }
    .flex_tit h2 {margin:0 0 20px;}
    /* font */
    .h_28 {font-size: 22px;}
    .h_24 {font-size: 21px;}
    .h_22 {font-size: 20px;}
    .p_20 {font-size: 18px; line-height: 1.65;}
    .p_18 {font-size: 16px; }
    .p_16{font-size: 15px;}
    .p_15{font-size: 14px;}


    /* line_tit */
    .line_tit::before {height: 25px;}

    /* article 공통 */
    .art_wrap article { padding: 35px 0; }

    /* dots */
    .dot_list li::before {top:9px;}

    .table_wrap table thead th { padding:12px 10px; font-size: 15px; }
    .table_wrap table tbody th { padding:12px 10px; font-size: 14px; }
    .table_wrap table tbody th.subj {font-size: 15px;}
    .table_wrap table tbody td { padding:12px 10px; font-size: 14px; }

    /* content */
    /* sec1 */
    #sec1 .art_wrap {margin-top: 50px; }
    #sec1 .img_list {flex-wrap: wrap; }
    #sec1 .img_list li {width: calc(25% - 6px); padding: 15px;}
    #sec1 .img_list .txt {margin-top: 15px;}

    #sec1 .cast_list{margin-top: 50px;}
    #sec1 .cast_list li{margin-right: 15px; max-width: calc(33.3% - 10px);}
    #sec1 .cast_list li:nth-child(n+4){margin-top: 40px;}
    #sec1 .cast_list li.long{max-width: calc(66.6% - 7.5px);}

    #sec1 .cast_list li .img{margin-bottom: 10px;}
    #sec1 .cast_list li .step{top: -17.5px; padding: 0 15px; height: 35px; border-radius: 35px 35px 35px 0;}
    #sec1 .cast_list li .step span{font-size: 18px; margin-right: 5px;}



}

@media screen and (max-width:767px) {
    /* common */
    .subpage > section {padding: 60px 0;}
    .c_tit { font-size: 32px; }
    .line_tit { padding-left: 13px; margin: 0 0 20px; }
    .line_tit::before { top: 3px; width: 3px; height: 20px; }
    /* font */
    .h_28 {font-size: 20px;}
    .h_24 {font-size: 19px;}
    .h_22 {font-size: 18px;}
    .p_20 {font-size: 16px; }
    .p_18 {font-size: 15px; }
    .p_16{font-size: 13px;}
    .p_15{font-size: 13px;}

    /* article 공통 */
    .art_wrap article { padding: 30px 0; }

    /* dots */
    .dot_list li {padding-left: 10px;}
    .dot_list li::before {top:8px;}

    .table_wrap.res { overflow-x: scroll; }
    .table_wrap.res table { width: 767px; }
    .table_wrap.res table tbody td { padding: 12px 5px; line-height: 23px; }
    .table_arrow { display: block; text-align: right; }
    .table_arrow i { font-size:30px; color:#333; }

    /* content */
    /* sec1 */
    #sec1 .art_wrap {margin-top: 30px; }
    #sec1 .img_list {flex-wrap: wrap; }
    #sec1 .img_list li {width: calc(50% - 5px);padding: 20px;}
    #sec1 .img_list li:nth-child(n+3) {margin-top: 30px;}
    #sec1 .img_list li p {font-size: 13px;}
    #sec1 .img_list .txt {margin-top: 15px;}
    #sec1 .table_wrap + p {margin-top: 20px;}

    #sec1 .cast_list{margin-top: 40px;}
    #sec1 .cast_list li{margin-right: 10px; max-width: calc(50% - 5px);}
    #sec1 .cast_list li:nth-child(3n){margin-right: 10px;}
    #sec1 .cast_list li:nth-child(2n){margin-right: 0}
    #sec1 .cast_list li:nth-child(n+3){margin-top: 30px;}
    #sec1 .cast_list li.long{max-width: 100%;}

    #sec1 .cast_list li .img{margin-bottom: 10px;}
    #sec1 .cast_list li .step{top: -15px; padding: 0 10px; height: 30px; border-radius: 15px 15px 15px 0;}
    #sec1 .cast_list li .step span{font-size: 17px;}



}
@media screen and (max-width:480px) {
    #sec1 .img_list li {padding: 15px;}
}