@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; flex-wrap:wrap; }

.cl_tabWrap .tabBtn { 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 .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 .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_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) 0px 7px 29px 0px;}
.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;}


/***
**************************************** 서브페이지 절차 영역(step) ***********************************************
*/
.cl_processPart {padding:50px 0 110px 0;}
.cl_processPart .processList { display:flex; align-items:center; gap:10px; padding:32px 100px; border-radius:11px; background:#f9f9f9; }
.cl_processPart .processItem { width:18%; text-align:center; }
.cl_processPart .processItem .num {font-size:18px; font-family:'SUITEB'; color:#15456d; width:38px; height:38px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #194970; background:#fff; }
.cl_processPart .processItem .num.active { color:#fff; background:#15456d; border-color:#15456d; }
.cl_processPart .processItem .title { font-size:24px; font-family:'SUITEB'; line-height:1.45;}
.cl_processPart .arrow { width: 14px;}
.cl_processPart .arrow img{ width: 100%; display: block;}




/***
**************************************** 하단 서브페이지 공통 ***********************************************
*/
.cl_winBannerPart {padding-bottom: 110px; background: url('/app/layout/web/images/sub/winBanner_1_bg.png') no-repeat top / cover;}
.cl_winBannerPart .imgWrap .imgArea{max-width: 832px; width: 100%; margin-inline: auto;}
.cl_winBannerPart .imgWrap .imgArea img{width: 100%; display: block;}
.cl_winBannerPart .textWrap{color: #fff; font-size: 25px; font-family: 'SUITR';line-height: 1.6; text-align: center;}
.cl_winBannerPart .textWrap .cPoint{color: #fff5d4; font-family: 'SUITEB';}



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


    /***
    **************************************** 서브페이지 인트로 ***********************************************
    */
    .cl_introPart .contentsWrap{flex-direction: column; align-items: center; justify-content: center; gap: 40px;}
    .cl_introPart .textWrap {text-align: center; width: 100%;}



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


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




    /***
    **************************************** 하단 서브페이지 공통 ***********************************************
    */
    .cl_winBannerPart {padding-bottom: 90px; background-image: url('/app/layout/web/images/sub/winBanner_1_bgM.png');}
    .cl_winBannerPart .imgWrap {margin-bottom: 40px;}
    .cl_winBannerPart .imgWrap .imgArea{max-width: 738px; margin-inline: auto;}

}




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


    /***
    **************************************** 서브페이지 인트로 ***********************************************
    */
    .cl_introPart{padding:55px 0;}
    .cl_introPart .contentsWrap {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 .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:40px;}
    .cl_titleLineWrap  .mainText {font-size: 22px; padding-bottom: 10px;}


    /***
    **************************************** 서브페이지 장점 영역 ***********************************************
    */
    .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;}


    /***
    **************************************** 서브페이지 절차 영역(step) ***********************************************
    */
    .cl_processPart{padding:40px 0;}
    .cl_processPart .processList { gap: 15px 15px; padding: 27px 4%; border-radius: 5px;}
    .cl_processPart .processItem{width: 25%;}
    .cl_processPart .processItem .num{width: 19px; height: 19px; font-size: 9px; border-width: 1px; margin-bottom: 5px;}
    .cl_processPart .processItem .title {font-size: 12px;}
    .cl_processPart .arrow { width: 7px;}


    /***
    **************************************** 하단 서브페이지 공통 ***********************************************
    */
    .cl_winBannerPart {padding-bottom: 45px;}
    .cl_winBannerPart .imgWrap {margin-bottom: 20px;}
    .cl_winBannerPart .imgWrap .imgArea{max-width: 961px; margin-inline: auto;}
    .cl_winBannerPart .textWrap{font-size: 14px;}

}