@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% - 9rem) / 4); 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;}
.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;}

.cl_tab_box{margin: 5rem auto 0; max-width: 124rem;}
.box_inner{margin-bottom: 3rem; display: flex; align-items: center; justify-content: flex-start;}
.box_inner:last-of-type{margin-bottom: 0;}
.box_inner .img{width: 30%; border-radius: 2rem; overflow: hidden;}
.box_inner .img img{width: 100%; object-fit: contain;}
.box_inner .text{padding-left: 5%; width: 70%;}
.box_inner .text p{font-size: 2.2rem; line-height: 1.3; color: var(--black); word-break: keep-all;}
.box_inner .text span{margin-top: 1rem; font-size: 1.8rem; line-height: 1.5; font-family: "SCDream3"; color: var(--black400); word-break: keep-all; display: block;}

.box_inner.ty2{gap: 2rem; margin-bottom: 0; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap;}
.box_inner.ty2 .box{width: calc((100% - 6rem) / 4); border-radius: 2rem; padding: 3rem 0; background: var(--color-f8fafd);}
.box_inner.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);}
.box_inner.ty2 .box p{margin-top: 2rem; font-size: 2rem; line-height: 1.3; color: var(--black); word-break: keep-all; text-align: center;}

.box_inner.ty3{gap: 2rem; margin-bottom: 0; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap;}
.box_inner.ty3 .box{width: calc((100% - 6rem) / 4); text-align: center;}
.box_inner.ty3 .box img{width: auto; object-fit: contain; margin: 0 auto;}

@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;}

    .cl_tab_box{margin: 2.5rem auto 0;}
    .box_inner{margin-bottom: 3rem; align-items: flex-start; flex-direction: column;}
    .box_inner .img{width: 100%;}
    .box_inner .text{margin-top: 3rem; padding-left: 0; width: 100%;}
    .box_inner .text p{font-size: 1.8rem;}
    .box_inner .text span{margin-top: 1rem; font-size: 1.4rem;}

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

    .box_inner.ty3{gap: 2rem; flex-direction: row;}
    .box_inner.ty3 .box{width: calc((100% - 4rem) / 3);}

}

@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);}

    .box_inner.ty2 .box{width: 100%;}
    .box_inner.ty3 .box{width: calc((100% - 2rem) / 2);}

}