@charset "UTF-8";

/***
**************************************** 서브페이지 메인 ***********************************************
*/
.cl_subMainVisual{position: relative; width: 100%; height: 500px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.cl_subMainVisual .titleWrap {max-width: 1456px; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: left; padding-inline: 28px; box-sizing: border-box;}
.cl_subMainVisual .titleWrap.textCenter {text-align: center;}
.cl_subMainVisual .titleWrap .mainText{color: #fff; font-size: 45px;font-family: 'SUITR'; line-height: 1.5;}

.cl_subMainVisual .titleWrap .mainText .cPoint {color: #15456d;}


/***
**************************************** 서브페이지 탭 ***********************************************
*/
.cl_tabWrap { padding:80px 0; }
.cl_tabWrap .contentsWrap { display:flex; justify-content:center; gap:30px; }
.cl_tabWrap .tabBtn { color: #000; max-width: 327px; width: 100%; height: 71px; display: flex; align-items: center; justify-content: center; font-size:26px; font-family:'SUITB'; line-height:1; border:2px solid #15456d; padding:10px 16px; border-radius:50px; background:#fff;cursor:pointer; transition:background .2s ease, color .2s ease; }
.cl_tabWrap .tabBtn.is-active { color:#fff; background:#15456d; }

.cl_tabContents .tabPage { display:none; padding-bottom: 150px; box-sizing: border-box;}
.cl_tabContents .tabPage.is-active { display:block; }


/***
**************************************** 서브페이지 인트로 ***********************************************
*/
.cl_introPart {padding: 135px 0;}
.cl_introPart .contentsWrap { display:flex; align-items:center; gap:70px; }
.cl_introPart .contentsWrap:has(.contentsArea) { display:block; }
.cl_introPart .contentsWrap .contentsArea { display:flex; align-items:center; gap:70px; }
.cl_introPart .imgWrap { max-width:598px; width: 100%;}
.cl_introPart .imgWrap img{ width: 100%; display: block;}
.cl_introPart .textWrap .mainText { font-size:44px; font-family:'SUITEB'; line-height: 1; margin-bottom:22px; }
.cl_introPart .textWrap .mainText .small{ font-size:33px; font-family:'NotoSansR'; line-height: 1;}
.cl_introPart .textWrap .subText { font-size:20px; font-family:'SUITR'; line-height:1.7; }
.cl_introPart .textWrap .subText .bold{ font-family:'SUITEB';}
.cl_introPart .textWrap .listArea {margin-top: 20px;}
.cl_introPart .textWrap .listArea .title{color: #15456d; font-size: 20px; font-family:'SUITB'; margin-bottom: 10px;}
.cl_introPart .textWrap .listArea .list {display: flex; flex-direction: column; gap: 10px;}
.cl_introPart .textWrap .listArea .list li{font-size: 20px; font-family:'SUITM';}
.cl_introPart .textWrap .listArea .list li::before {content: ""; display: inline-block; vertical-align: middle; width: 6px; min-width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background-color: #000000;}
.cl_introPart .textWrap .listArea + .subText {margin-top: 20px;}
.cl_introPart .noticeWrap { margin-top:45px; max-width:1460px; margin-inline:auto; padding:0 30px; box-sizing:border-box;}
.cl_introPart .noticeArea { padding-top: 45px; box-sizing: border-box; border-top:1px solid #757575; text-align:center; }
.cl_introPart .noticeArea .title { font-size:25px; font-family:'SUITB'; line-height: 1.45; margin-bottom: 5px;}
.cl_introPart .noticeArea .text { font-size:20px; font-family:'SUITR'; line-height: 1.45;}


/***
**************************************** 서브페이지 타이틀 ***********************************************
*/
/* 선 있는 타이틀*/
.cl_titleLineWrap { margin-bottom: 60px; border-bottom: 1px solid #15456d;}
.cl_titleLineWrap .mainText{ color: #15456d; font-size: 33px; font-family:'SUITEB'; padding-bottom: 20px;}
.cl_titleLineWrap .mainText .small{font-size: 26px; font-family:'SUITR';}


/***
**************************************** 서브페이지 장점 영역 ***********************************************
*/
.cl_benefitPart {padding:50px 0;}
.cl_benefitPart .benefitList { display:flex; flex-wrap: wrap; gap:22px; }
.cl_benefitPart .benefitItem {width: calc(100% /4 - 18px); text-align:center; border:1px solid #b7b7b7; border-radius:14px; padding:45px 10px; box-sizing: border-box; background-color:#f9f9f9;}
.cl_benefitPart .benefitItem .imgArea {width: 93px; height: 93px; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: 25px; border-radius: 50%; background-color: #fff;box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;}
.cl_benefitPart .benefitItem .imgArea img{display: block;}
.cl_benefitPart .benefitItem .title {color: #15456d; font-size:27px; font-family:'PretendardEB';margin-bottom:10px; }
.cl_benefitPart .benefitItem .text {color: #585858; font-size:16px; font-family:'PretendardR'; line-height:1.43; }
.cl_benefitPart .benefitItem .bold { font-family:'PretendardEB' !important;}

.cl_benefitPart .benefitItem.emptyItem {display: flex; align-items: center; justify-content: center; border: 0; padding: 10px 10px; background-color: transparent;}
.cl_benefitPart .benefitItem.emptyItem .textArea{font-size: 18px;}


/***
**************************************** 서브페이지 비교(테이블) 영역 ***********************************************
*/
.cl_vsPart {padding-bottom: 180px;}
.cl_vsPart .tableWrap {padding-inline: 85px; box-sizing: border-box;}
.cl_vsPart .tableWrap table {width: 100%; border-spacing: 1px; border-collapse: separate;background-color: #9a9a9a;}
.cl_vsPart .tableWrap table caption{font-size: 20px;font-family:'SUITSB'; margin-bottom: 10px;}
.cl_vsPart .tableWrap table thead th{color: #fff; font-size: 20px;font-family:'SUITEB'; text-align: center; padding: 18px 10px; box-sizing: border-box; background-color: #15456d;}
.cl_vsPart .tableWrap table thead th:nth-of-type(1) {width: 20%;}
.cl_vsPart .tableWrap table thead th:nth-of-type(2) {width: 30%;}
.cl_vsPart .tableWrap table thead th:nth-of-type(3) {width: 30%;}

.cl_vsPart .tableWrap table tbody td{font-size: 20px; font-family:'SUITR'; text-align: center;padding: 18px 10px; box-sizing: border-box; background-color: #f9f9f9;}
.cl_vsPart .tableWrap table tbody td:nth-of-type(1){font-family:'SUITEB'; background-color: #eaf5ff;}
.cl_vsPart .tableWrap table tbody td .cPoint {color: #15456d;}



/***
**************************************** 서브페이지 절차 영역(step) ***********************************************
*/
.cl_processPart {padding:50px 0 110px 0;}
.cl_processPart .titleWrap {font-size:20px; font-family:'SUITSB'; line-height: 1.4; text-align: center; margin-bottom: 15px;}
.cl_processPart .processList { display:flex; gap:10px; padding:32px 10px; border-radius:11px; background:#f9f9f9; }


/* 이미지로 해야할 경우 */
.cl_processPart .processList .imgArea {width: 100%; margin-inline: auto;}
.cl_processPart .processList .imgArea img{width: 100%; display: block;}


/***
**************************************** 서브페이지 신청 영역 ***********************************************
*/
.cl_appPart {padding-bottom: 150px;}
.cl_appPart .appWrap .icon {width: 18px; margin-right: 10px;}
.cl_appPart .appWrap {display: flex; align-items: start; justify-content: center; gap: 70px; margin-left: 100px;}
.cl_appPart .appWrap .imgArea{max-width: 308px; width: 100%;}
.cl_appPart .appWrap .imgArea img{width: 100%; display: block;}

.cl_appPart .appWrap .textArea .mainText {font-size:18px; font-family:'SUITR';line-height:1.66;margin-bottom:30px;}
.cl_appPart .appWrap .textArea .mainText .bold{font-family:'SUITEB';}
.cl_appPart .appWrap .textArea .tipArea .title{color: #15456d; font-size:18px; font-family:'SUITEB'; line-height:1.66; }
.cl_appPart .appWrap .textArea .tipArea .text{font-size:18px; font-family:'SUITR'; line-height:1.66; }
.cl_appPart .appWrap .textArea .tipArea .text .cPoint{color: #15456d; font-family:'SUITEB';}
.cl_appPart .appWrap .textArea .listArea {margin-top: 60px; display: flex; gap: 25px;}
.cl_appPart .appWrap .textArea .listArea .title{font-size: 22px;font-family: 'SUITR';}
.cl_appPart .appWrap .textArea .listArea .title .cPoint {color: #15456d;font-family: 'SUITEB';}
.cl_appPart .appWrap .textArea .listArea .title.bold {font-family: 'SUITEB';}
.cl_appPart .appWrap .textArea .listArea .titleBg{color: #fff; font-size:24px; font-family:'SUITEB'; display: inline-block; padding: 2px 14px; box-sizing: border-box; background-color: #15456d;}
.cl_appPart .appWrap .textArea .listArea .list {display: flex; flex-direction: column; gap: 10px; margin-top: 20px;}
.cl_appPart .appWrap .textArea .listArea .list li{font-size:20px; font-family:'SUITSB'; }
.cl_appPart .appWrap .textArea .listArea .list li .num {color: #15456d; font-family:'SUITEB';}


.cl_appPart .fitWrap {width: 100%; margin-top: 65px; display: flex; justify-content: center; gap: 100px; border-radius: 28px; padding: 40px 10px; box-sizing: border-box; background-color: #fafafa;}
.cl_appPart .fitWrap .fitArea .fitItem .title{color: #15456d; font-size:22px; font-family:'SUITEB'; line-height:1.66; margin-bottom: 15px;}
.cl_appPart .fitWrap .fitArea .fitItem .list{display: flex; flex-direction: column; gap: 10px;}
.cl_appPart .fitWrap .fitArea .fitItem .list li{font-size:20px; font-family:'SUITR'; }
.cl_appPart .fitWrap .fitArea .fitItem .list li img{margin-right: 10px;}



/***
**************************************** 서브페이지 성공 사례 영역 ***********************************************
*/
.cl_successPart {padding: 115px 0; background: url('/app/layout/web/images/sub/cl_success_bg.png') no-repeat top / cover;}
.cl_successPart .titleWrap {text-align: center; margin-bottom: 40px;}
.cl_successPart .titleWrap .mainTitle{color: #fff; font-size: 15px; font-family: 'SUITEB'; letter-spacing: 8px; margin-bottom: 25px;}
.cl_successPart .titleWrap .mainText{color: #fff; font-size: 50px; font-family: 'SUITEB';}

.cl_successPart .swiperWrap { width: 100%; position: relative; }
.cl_successPart .successSwiper { width: 100%; padding: 0 18px 24px; box-sizing: border-box; }
.cl_successPart .successSwiper .swiper-wrapper { overflow: visible; }
.cl_successPart .successSwiper .swiper-slide { overflow: visible; height: auto; background-color: #fff;}
.cl_successPart .successSwiper .swiper-slide .imgArea {width: 100%; }
.cl_successPart .successSwiper .swiper-slide .imgArea img {width: 100%; display: block; object-fit: cover;}
.cl_successPart .successSwiper .swiper-slide .textArea { font-size: 25px; font-family:'SUITEB'; padding: 20px 15px; box-sizing: border-box;}
.cl_successPart .successSwiper .swiper-progress { max-width: 1067px; margin-inline: auto; margin-top: 100px; }
.cl_successPart .successSwiper .swiper-pagination { position: static; width: 100%; height: 2px; background-color: #626262; }
.cl_successPart .successSwiper .swiper-pagination-progressbar-fill { background-color: #fff; }


/***
**************************************** 하단 서브페이지 공통 ***********************************************
*/
.cl_winBannerPart .imgArea{ width: 100%; margin-inline: auto;}
.cl_winBannerPart .imgArea img{width: 100%; display: block;}
.cl_winBannerPart .imgArea video{width: 100%; display: block;}


.cl_recordBannerPart {padding: 140px 0 150px 0; background: url('/app/layout/web/images/sub/cl_recordBanner_bg.png') no-repeat top / cover;}
.cl_recordBannerPart .titleWrap {text-align: center; margin-bottom: 30px;}
.cl_recordBannerPart .titleWrap .mainText{max-width: 889px; width: 100%; margin-inline: auto; margin-bottom: 50px;}
.cl_recordBannerPart .titleWrap .mainText img{width: 100%; display: block;}
.cl_recordBannerPart .titleWrap .subText {color: #fff; font-size: 22px;font-family: 'SUITL'; line-height: 1.59;}

.cl_recordBannerPart .imgWrap .imgArea {max-width: 1208px; width: 100%; margin-inline: auto;}
.cl_recordBannerPart .imgWrap .imgArea img{ width: 100%; display: block;}


/***
**************************************** 게시판 공통 ***********************************************
*/
.emptyBoard { padding: 150px 0; text-align: center; color: #aaa; font-family: 'SUITER', sans-serif; }
.emptyBoard::before { content: ''; display: block; width: 60px; height: 60px; margin: 0 auto 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='13' y2='17'/%3E%3C/svg%3E") no-repeat center / contain; }
.emptyBoard p { font-size: 17px; color: #999; margin: 0; }
.emptyBoard span { display: block; margin-top: 8px; font-size: 13px; color: #bbb; }


/***
**************************************** 게시판 상세 ***********************************************
*/
.boardViewPart .btnArea { text-align: center; margin-top: 60px; }
.boardViewPart .btnArea .btn { display: inline-block; padding: 14px 50px; border: 1px solid #3a74a4; color: #3a74a4; font-size: 16px; font-family: 'SUITB', sans-serif; border-radius: 50px; text-decoration: none; background: #fff; transition: all 0.3s; }
.boardViewPart .btnArea .btn:hover { background: #3a74a4; color: #fff; }


@media (max-width: 1330px) {
    /***
    **************************************** 서브페이지 메인 ***********************************************
    */
    .cl_subMainVisual {height: 828px;}
    .cl_subMainVisual .titleWrap { top: 50%; text-align: center;}


    /***
    **************************************** 서브페이지 탭 ***********************************************
    */
    .cl_tabWrap {padding: 80px 0 0 0;}
    .cl_tabContents .tabPage > .cl_introPart { padding: 55px 0 135px 0;}

    /***
    **************************************** 서브페이지 인트로 ***********************************************
    */
    .cl_introPart .contentsWrap{flex-direction: column; align-items: center; justify-content: center; gap: 40px;}
    .cl_introPart .contentsWrap .contentsArea {flex-direction: column; gap: 40px;}
    .cl_introPart .contentsWrap .contentsArea .imgWrap{padding-inline: 0;}
    .cl_introPart .contentsWrap .contentsArea .textWrap {max-width: 600px; width: 100%; margin-inline: auto;}
    .cl_introPart .contentsWrap .contentsArea .textWrap .subText {text-align: left;}
    .cl_introPart .textWrap {text-align: center; width: 100%;}


    /***
    **************************************** 서브페이지 장점 영역 ***********************************************
    */
    .cl_benefitPart .benefitList {flex-wrap: wrap;}
    .cl_benefitPart .benefitItem {width: calc(100% /2 - 12px);}


    /***
    **************************************** 서브페이지 비교(테이블) 영역 ***********************************************
    */
    .cl_vsPart .tableWrap {padding-inline: 0;}


    /***
    **************************************** 서브페이지 절차 영역(step) ***********************************************
    */
    .cl_processPart .processList {flex-wrap: wrap; justify-content: center; gap: 30px 15px; padding: 32px 4%;}


    /***
    **************************************** 서브페이지 신청 영역 ***********************************************
    */
    .cl_appPart .appWrap {flex-direction: column; align-items: center; gap: 30px; margin-left: 0;}
    .cl_appPart .appWrap .textArea .mainText {text-align: center;}
    .cl_appPart .appWrap .textArea .tipArea{text-align: center;}
    .cl_appPart .appWrap .textArea .listArea {justify-content: center;}
    .cl_appPart .appWrap .textArea .listArea .list {text-align: left; max-width: 240px; margin-inline: auto;}


    .cl_appPart .fitWrap {flex-direction: column; padding: 0; gap: 30px; background-color: transparent;}
    .cl_appPart .fitWrap .fitArea {max-width: 600px; width: 100%; margin-inline: auto; padding: 40px 70px; box-sizing: border-box; border-radius: 28px; background-color: #fafafa;}


    /***
    **************************************** 서브페이지 성공 사례 영역 ***********************************************
    */
    .cl_successPart {background-image: url('/app/layout/web/images/sub/cl_success_bgM.png');}
    .cl_successPart .successSwiper .swiper-progress {margin-top: 80px;}

    
    /***
    **************************************** 하단 서브페이지 공통 ***********************************************
    */
    .cl_recordBannerPart {padding-bottom: 90px; background-image: url('/app/layout/web/images/sub/cl_recordBanner_bgM.png');}
    .cl_recordBannerPart .titleWrap .mainText {max-width: 591px;}
    .cl_recordBannerPart .imgWrap .imgArea {max-width: 694px;}

}


@media (max-width: 768px) {
    /***
    **************************************** 서브페이지 메인 ***********************************************
    */
    .cl_subMainVisual {height: 414px;}
    .cl_subMainVisual .titleWrap .mainText {font-size: 22px;}


    /***
    **************************************** 서브페이지 탭 ***********************************************
    */
    .cl_tabWrap .contentsWrap { gap:10px;}
    .cl_tabWrap .tabBtn { max-width: 153px; height: 33px; font-size:15px; border:1px solid #15456d; padding:5px 8px; }

    .cl_tabContents .tabPage {padding-bottom: 60px;}
    .cl_tabContents .tabPage > .cl_introPart {padding: 27px 0 65px 0;}


    /***
    **************************************** 서브페이지 인트로 ***********************************************
    */
    .cl_introPart{padding:55px 0;}
    .cl_introPart .contentsWrap {gap: 20px;}
    .cl_introPart .contentsWrap .contentsArea {gap: 20px;}
    .cl_introPart .imgWrap {padding-inline: 11px; box-sizing: border-box;}
    .cl_introPart .textWrap .mainText{font-size:25px; margin-bottom: 11px;}
    .cl_introPart .textWrap .mainText .small {font-size: 16px;}
    .cl_introPart .textWrap .subText{font-size:12px;}
    .cl_introPart .textWrap .listArea {margin-top: 10px;}
    .cl_introPart .textWrap .listArea .title{font-size: 12px; margin-bottom: 5px;}
    .cl_introPart .textWrap .listArea .list {gap: 5px;}
    .cl_introPart .textWrap .listArea .list li{font-size: 12px;}
    .cl_introPart .textWrap .listArea .list li::before {width: 3px; min-width: 3px; height: 3px; margin-right: 5px;}
    .cl_introPart .textWrap .listArea + .subText {margin-top: 10px;}

    .cl_introPart .noticeWrap {margin-top: 22px; padding: 0 18px;}
    .cl_introPart .noticeArea {padding-top: 18px;}
    .cl_introPart .noticeArea .title{font-size:13px;}
    .cl_introPart .noticeArea .text{font-size:11px;}


    /***
    **************************************** 서브페이지 타이틀 ***********************************************
    */
    /* 선 있는 타이틀*/
    .cl_titleLineWrap {margin-bottom:30px;}
    .cl_titleLineWrap  .mainText {font-size: 22px; padding-bottom: 10px;}
    .cl_titleLineWrap .mainText .small{font-size: 15px;}


    /***
    **************************************** 서브페이지 장점 영역 ***********************************************
    */
    .cl_benefitPart{padding:40px 0;}
    .cl_benefitPart .benefitList {gap: 18px;}
    .cl_benefitPart .benefitItem {width: calc(100% / 2 - 9px);border-radius: 7px; padding: 22px 0;}
    .cl_benefitPart .benefitItem .imgArea {width: 46px; height: 46px; margin-bottom: 10px;}
    .cl_benefitPart .benefitItem .imgArea img {width: 50%;}
    .cl_benefitPart .benefitItem .title {font-size: 13px; margin-bottom: 5px;}
    .cl_benefitPart .benefitItem .text {font-size: 8px;}

    .cl_benefitPart .benefitItem.emptyItem {padding: 0;}
    .cl_benefitPart .benefitItem.emptyItem .textArea{font-size: 10px;}


    /***
    **************************************** 서브페이지 비교(테이블) 영역 ***********************************************
    */
    .cl_vsPart {padding-bottom: 80px;}
    .cl_vsPart .cl_titleLineWrap .mainText .text{display: none;}

    .cl_vsPart .tableWrap table caption {font-size: 13px;}
    .cl_vsPart .tableWrap table thead th {font-size: 9px; padding: 5px 5px;}
    .cl_vsPart .tableWrap table tbody td {font-size: 8px; padding: 5px 5px;}
    .cl_vsPart .tableWrap table thead th:nth-of-type(1) {width: 20%;}


    /***
    **************************************** 서브페이지 절차 영역(step) ***********************************************
    */
    .cl_processPart{padding:40px 0;}
    .cl_processPart .titleWrap {font-size: 12px;}
    .cl_processPart .processList { gap: 15px 6px; padding: 27px 6%; border-radius: 5px;}


    /***
    **************************************** 서브페이지 신청 영역 ***********************************************
    */
    .cl_appPart {padding-bottom: 70px;}
    .cl_appPart .appWrap {gap: 15px;}
    .cl_appPart .appWrap .icon {width: 11px; margin-right: 2px;}
    .cl_appPart .appWrap .imgArea {max-width: 248px;}
    .cl_appPart .appWrap .textArea .mainText {font-size: 12px; margin-bottom: 20px;}
    .cl_appPart .appWrap .textArea .tipArea .title {font-size: 12px;}
    .cl_appPart .appWrap .textArea .tipArea .text {font-size: 12px;}
    .cl_appPart .appWrap .textArea .listArea {margin-top: 20px;}
    .cl_appPart .appWrap .textArea .listArea .title {font-size: 15px;}
    .cl_appPart .appWrap .textArea .listArea .titleBg {font-size: 15px;}
    .cl_appPart .appWrap .textArea .listArea .list {max-width: 140px; margin-top: 10px;}
    .cl_appPart .appWrap .textArea .listArea .list li {font-size: 12px;}


    .cl_appPart .fitWrap {gap: 15px;}
    .cl_appPart .fitWrap .fitArea {padding: 20px 35px; border-radius: 14px;}
    .cl_appPart .fitWrap .fitArea .fitItem .title {font-size: 13px; margin-bottom: 10px;}
    .cl_appPart .fitWrap .fitArea .fitItem .list li {font-size: 12px;}
    .cl_appPart .fitWrap .fitArea .fitItem .list li img {width: 11px; margin-right: 6px;}


    /***
    **************************************** 서브페이지 성공 사례 영역 ***********************************************
    */
    .cl_successPart {padding: 60px 0 70px 0;}
    .cl_successPart .titleWrap {margin-bottom: 25px;}
    .cl_successPart .titleWrap .mainTitle {font-size: 8px; letter-spacing: 5px;}
    .cl_successPart .titleWrap .mainText {font-size: 25px;}

    .cl_successPart .successSwiper {padding: 0 0 24px;}
    .cl_successPart .successSwiper .swiper-slide .textArea { font-size: 16px; padding: 15px 8px; box-sizing: border-box;}
    .cl_successPart .successSwiper .swiper-progress {margin-top: 40px;}
    
    
    /***
    **************************************** 하단 서브페이지 공통 ***********************************************
    */
    .cl_recordBannerPart {padding: 120px 0 60px 0;}
    .cl_recordBannerPart .titleWrap .mainText {max-width: 295px; margin-bottom: 15px;}
    .cl_recordBannerPart .titleWrap .subText {font-size: 13px;}

}