@charset "utf-8";

/* 내용관리 */
#ctt{padding: 10rem 0;}
.sb_cont{padding: 0 1.5rem; max-width: 160rem; margin: 0 auto; width: 100%;}

.cl_special{}
.cl_tit{text-align: center;}
.cl_tit span{font-size: 2.2rem; line-height: 1.3; color: var(--primary-0460d9); display: block; word-break: keep-all; font-family: "SCDream3";}
.cl_tit p{font-size: 4.5rem; line-height: 1.4; color: var(--black); word-break: keep-all;}
.cl_tit span + p{margin-top: 2rem;}

.spec_list{gap: 3rem; margin-top: 5rem; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;}
.spec_list .spec_item{padding: 5rem 0; width: calc((100% - 6rem) / 3); border-radius: 2rem; box-shadow: 0 0 2.6rem 0 rgba(149,157,165,0.18); background: var(--white);}
.spec_list .spec_item .img{text-align: center;}
.spec_list .spec_item .img img{vertical-align: middle; font-size: 1em;}
.spec_list .spec_item p{margin-top: 2rem; font-size: 2.4rem; line-height: 1.2; color: var(--black); text-align: center; word-break: keep-all;}
.spec_list .spec_item span{margin-top: 2rem; font-size: 1.6rem; line-height: 1.5; font-family: "SCDream3"; color: var(--black400); text-align: center; word-break: keep-all; display: block;}

.cl_tab_wrap{padding-top: 16rem;}
.cl_tab{max-width: 130rem; gap: 0.4rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative;}
.cl_tab:after{content: ""; display: block; width: 500%; height: 1px; background: var(--color-cccccc); position: absolute; bottom: 0; left: -200%;}
.cl_tab a{width: calc((100% - 1.2rem) / 4); height: 7.5rem; font-size: 1.8rem; line-height: 1.5; color: var(--black400); border-bottom: 1px solid var(--color-cccccc); background: var(--white); position: relative; z-index: 1; transition: 0.3s; text-align: center; display: flex; align-items: center; justify-content: center; font-family: "SCDream3";}
.cl_tab a.active{color: var(--primary-0460d9); border-bottom: 3px solid var(--primary-0460d9);}

.cl_tab_con{padding-top: 10rem; margin: 0 auto; max-width: 140rem;}
.txt_point{text-align: center;}
.txt_point p{font-size: 1.8rem; line-height: 1.5; color: var(--black); word-break: keep-all; font-family: "SCDream3";}
.txt_point p b{display: block; word-break: keep-all;}

.txt_tit{margin-top: 5rem; border-radius: 2rem; padding: 1rem 0; background: var(--color-f7f7f7);}
.txt_tit p{font-size: 2.6rem; line-height: 1.3; color: var(--black); text-align: center;}

.cl_tab_box.ty1{gap: 5rem; margin-top: 5rem; display: flex; align-items: center; justify-content: flex-start;}
.cl_tab_box.ty1 .img{width: 50%; border-radius: 2rem; overflow: hidden;}
.cl_tab_box.ty1 .img img{width: 100%; object-fit: contain;}
.cl_tab_box.ty1 .text{width: calc(50% - 5rem);}
.cl_tab_box.ty1 .text ul li{padding-left: 4rem; position: relative;}
.cl_tab_box.ty1 .text ul li:before{width: 3.2rem; height: 3.2rem; background: url(/theme/template/img/icon/tab_point.png) center center no-repeat; background-size: 100% 100%; border-radius: 50%; top: 0; left: 0; content:""; position: absolute;}
.cl_tab_box.ty1 .text ul li:not(:last-of-type){margin-bottom: 4rem;}
.cl_tab_box.ty1 .text ul li p{font-size: 2.2rem; line-height: 1.3; color: var(--black); word-break: keep-all;}
.cl_tab_box.ty1 .text ul li span{margin-top: 1rem; font-size: 1.8rem; line-height: 1.5; font-family: "SCDream3"; color: var(--black400); display: block;}

.cl_tab_box.ty2{margin-top: 5rem; gap: 2rem; margin-bottom: 0; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap;}
.cl_tab_box.ty2 .box{width: calc((100% - 6rem) / 4); border-radius: 2rem; padding: 3rem 0; background: var(--color-f8fafd);}
.cl_tab_box.ty2 .box .num{width: 5rem; height: 5rem; font-size: 2rem; line-height: 1.3; color: var(--white); border-radius: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: var(--primary-0460d9);}
.cl_tab_box.ty2 .box p{margin-top: 2rem; font-size: 2rem; line-height: 1.3; color: var(--black); word-break: keep-all; text-align: center;}
.cl_tab_box.ty2 .box span{margin-top: 1rem; font-size: 1.6rem; line-height: 1.5; color: var(--black); font-family: "SCDream3"; word-break: keep-all; text-align: center; display: block;}

@media (max-width: 1200px) {
    .cl_tit span{font-size: 1.8rem;}
    .cl_tit p{font-size: 2.4rem;}

    .spec_list{gap: 2rem;}
    .spec_list .spec_item{padding: 2.5rem 1rem; width: calc((100% - 2rem) / 2);}
    .spec_list .spec_item p{font-size: 1.6rem;}
    .spec_list .spec_item span{font-size: 1.4rem;}

    .cl_tab_wrap{padding-top: 7rem;}
    .cl_tab{gap: 0.4rem; flex-wrap: wrap;}
    .cl_tab:after{display: none;}
    .cl_tab a{width: calc((100% - 1.2rem) / 4); height: 6rem; font-size: 1.4rem;}
    .cl_tab a.active{border-bottom: 2px solid var(--primary-0460d9);}

    .cl_tab_con{padding-top: 5rem;}
    .txt_point p{font-size: 1.4rem;}

    .txt_tit{margin-top: 4rem;}
    .txt_tit p{font-size: 1.6rem;}

    .cl_tab_box{margin: 2.5rem auto 0;}

    .cl_tab_box.ty1{gap: 4rem; margin-top: 5rem; flex-direction: column; align-items: flex-start;}
    .cl_tab_box.ty1 .img{width: 100%;}
    .cl_tab_box.ty1 .text{width: 100%;}
    .cl_tab_box.ty1 .text ul{display: flex; gap: 2rem; flex-wrap: wrap; justify-content: flex-start;}
    .cl_tab_box.ty1 .text ul li{width: calc((100% - 2rem) / 2); padding: 2rem; border-radius: 2rem; text-align: center; border: 1px solid var(--color-cccccc);}
    .cl_tab_box.ty1 .text ul li:before{width: 3.2rem; height: 3.2rem; position: relative; display: block; margin: 0 auto 2rem;}
    .cl_tab_box.ty1 .text ul li:not(:last-of-type){margin-bottom: 0;}
    .cl_tab_box.ty1 .text ul li p{font-size: 1.6rem;}
    .cl_tab_box.ty1 .text ul li span{margin-top: 1rem; font-size: 1.4rem;}

    .cl_tab_box.ty2{gap: 2rem; flex-direction: row;}
    .cl_tab_box.ty2 .box{width: calc((100% - 2rem) / 2); padding: 2rem 0;}
    .cl_tab_box.ty2 .box .num{width: 4rem; height: 4rem; font-size: 1.4rem;}
    .cl_tab_box.ty2 .box p{margin-top: 1.5rem; font-size: 1.6rem;}
    .cl_tab_box.ty2 .box span{font-size: 1.4rem;}

}

@media (max-width: 1000px) {
    .cl_tab_box.ty1 .text ul li span br{display: none;}
}

@media (max-width: 768px) {
    .spec_list .spec_item{width: 100%;}
    .spec_list .spec_item .img img{width: 6rem;}

    .cl_tab a{width: calc((100% - 0.4rem) / 2);}

    .cl_tab_box.ty1 .text ul li{width: 100%;}
    .cl_tab_box.ty2 .box{width: 100%;}
    .cl_tab_box.ty2 .box span br{display: none;}

}