@charset "utf-8";
/* ===================================
    interior
====================================== */
.sub.interior .swiper-button-prev,
.sub.interior .swiper-button-next{border-radius:0;border:none;width:1.5rem;height:2.5rem;}
.sub.interior .swiper-button-prev,
.sub.interior .swiper-button-next{background:url(/img/sub/forme/interior_slidebtn.png)no-repeat center center /cover;}
.sub.interior .swiper-button-prev:after,
.sub.interior .swiper-button-next:after{content:'';}
.sub.interior .swiper-pagination-bullet{border:1px solid #fff;background:none;opacity:1;width:12px;height:12px;margin:0 6px;}
.sub.interior .swiper-pagination-bullet-active{background:#fff;}

.sub.interior .equipments .flexList[boxCount="5"]{--y-gap:60px;}
@media(max-width:768px){
    .sub.interior .swiper-slide{position:relative;padding-top:60%;}
    .sub.interior .swiper-slide img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none; width: 140%;}
    .sub.interior .swiper-pagination-bullet{width:8px;height:8px;}
}
@media(max-width:500px){
    .sub.interior .equipments .flexList img{margin:0 auto;}
}


/* ===================================
    info
====================================== */
.sub.info .mapwrap .map{width:100% !important;}
.sub.info .mapwrap .wrap_map{width:100% !important;}
.sub.info .mapwrap .wrap_map .map{height:inherit;}
.sub.info .mapwrap .hide{display:none;}
@media(max-width:768px){
    .sub.info .mapwrap .wrap_map{height:inherit !important;}
    .sub.info .mapwrap .map{height:300px !important;}
}

.sub.info .mark{box-shadow:inset 0 -2em 0 #fff0bb;}
.sub.info .boxShadow{box-shadow:0 0 20px 0 rgba(0,0,0,0.1);}
.sub.info .info_time{margin-top:-4.68rem;}
.sub.info .info_time .box{padding:0 5%;}
.sub.info .info_time .box:first-child{border-right:1px solid #e1e1e1;}
.sub.info .info_time .listwrap{width:100%;margin-top:3.75rem;}
.sub.info .info_time .listwrap:first-child{margin-top:0;}
.sub.info .info_time .listwrap .lsitTitle{width:100%;}
.sub.info .info_time .listwrap li{display:flex;align-items:center;margin-top:1.875rem;}
.sub.info .info_time .listwrap li.items-start{align-items:flex-start;}
.sub.info .info_time .listwrap li:first-child{margin-top:0;}
.sub.info .info_time .listwrap li .date{width:20%;flex-shrink:0;}
.sub.info .info_time .listwrap li .time{width:80%;padding-left:5%;}
.sub.info .info_time .listwrap li .color-gray{color:#a6a6a6;}
.sub.info .info_time .linkswrap{width:100%;display:flex;}
.sub.info .info_time .linkswrap .link{display:block;padding:10px;width:100%;max-width:195px;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;}
.sub.info .info_time .linkswrap .link:first-child{margin-right:20px;}
.sub.info .info_time .linkswrap .link.naver{background:#2db400;color:#fff;}
.sub.info .info_time .linkswrap .link.kakao{background:#f9e000;color:#000;}
.sub.info .info_time .linkswrap .link:hover{background:var(--pointcolor);color:#fff;}

@media(max-width:768px){
    .sub.info .info_time .box{padding:5% 0;}
    .sub.info .info_time .box:first-child{border-right:none;border-bottom: 1px solid #e1e1e1;}
}
@media(max-width:500px){
    .sub.info .info_time .linkswrap{display:block;}
    .sub.info .info_time .linkswrap .link:first-child{margin-right:0;margin-bottom:15px;}
}


/* ===================================
    clinic
====================================== */
.sub.clinic .forMEstory .cir{position:relative;display:flex;justify-content:center;align-items:center;border:1px solid #b1b1b1;width:18.375rem;height:18.375rem;margin:auto;border-radius:50%;}
.sub.clinic .forMEstory .cir b{position:absolute;top:50%;left:0;transform:translate(-50%, -50%);font-weight:bold;display:inline-block;padding:1.5rem 0;background:#fff;color:#efefef;}


.sub.clinic .specificity .cont_box .section-right{position:relative;}
.sub.clinic .specificity .cont_box .section-right:after{content:'';display:block;position:absolute;top:20%;left:0;margin:auto;width:calc(100% - ((100% - var(--layoutwidth)) / 2));height:100%;background:url(/img/sub/forme/specificityBg.png)no-repeat bottom right, var(--light-gray);}
.sub.clinic .specificity .flexList[layoutStyle="fullbox"]>.box.Img{width: 52.5%;}
.sub.clinic .specificity .flexList[layoutStyle="fullbox"]>.box.Desc{width: 47.5%;padding-left:6.25rem;padding-top:10%;position:relative;}
.sub.clinic .specificity .swiper-btn-wrap{position:absolute;top:-5%;right:0;margin:auto;z-index:5;transform:translateY(-100%);}
@media(max-width:1440px){
    .sub.clinic .specificity .cont_box .section-right:after{width:100%;}
}
@media(max-width:990px){
    .sub.clinic .specificity .cont_box .section-right{padding-right:0;}
    .sub.clinic .specificity .cont_box .section-right:after{top:0;}
    .sub.clinic .specificity .flexList[layoutStyle="fullbox"]>.box.Img{width: 100%;}
    .sub.clinic .specificity .flexList[layoutStyle="fullbox"]>.box.Desc{width: 100%;padding:4rem 5rem;height:34.5rem;}
    .sub.clinic .specificity .swiper-btn-wrap{position:relative;top:auto;right:auto;transform:translateY(0%);margin-top:6.250rem;}
}
@media(max-width:500px){
    .sub.clinic .specificity .cont_box .section-right:after{background:url(/img/sub/forme/specificityBg.png)no-repeat bottom right /contain, var(--light-gray);}
}


/* ===================================
    치아교정 - 스페셜
====================================== */
.intro2{position: relative; background-image: url(/img/sub/orthodontic/orthodonticSpecial/intro_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover ;}
.intro2 .container{justify-content: end;}
.intro2 .imgBox{position: absolute; width: 50%; height: 100%; bottom: 0; left: 0; margin-left : calc((100% - var(--layoutwidth)) / 2);}
.intro2 .imgBox img{height: 100%; order: 1;}
.intro2 .txtbox{z-index: 10; order: 2;}
.intro2 .boxtxt{padding: 1.4rem 5rem 1.4rem 1.4rem; margin-left: -1.4rem; display: inline-block;}

@media(max-width:1440px){
    .intro2 .imgBox{margin-left : 10%;}
}
@media(max-width:1024px){
    .intro2 .imgBox{margin-left : 5%;}
}
@media(max-width:768px){
    .intro2{padding-bottom: 0;}
    .intro2 .container{flex-wrap: wrap; justify-content: center;}
    .intro2 .imgBox{margin-left : -2rem; order: 2; position: relative; width: 50vw;}
    .intro2 .imgBox img{width: 100%; height: auto;}
    .intro2 .txtbox{width: 100%; order: 1;}
}
@media(max-width:500px){
    .intro2 .imgBox{width: 60vw;}
    .intro2 .boxtxt{padding: 1.4rem;}
}


.ban{position: relative; background-image: url(/img/sub/orthodontic/orthodonticSpecial/pride_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 60rem;}
.titline{border-bottom: 1px solid #fff; display: inline-block;}
.ban .bgBox{display: inline-block; padding: 0.8rem 4rem;}

@media(max-width:768px){
    .ban{padding: 80px 0; height: auto;}
}
@media(max-width:500px){
    .ban .bgBox{padding: 0.8rem; width: 100%;}
}


/* intro */
.sub.orthodonticSpecial .intro .Desc {height: 32rem;}
.sub.orthodonticSpecial .smTit{border-bottom: 2px solid var(--pointcolor);}

@media(max-width:990px){
    .sub.orthodonticSpecial .swiper-btn-wrap{margin-top: 4rem;}
}


/* process */
.titline2{border-bottom: 1px solid var(--pointcolor); display: inline-block;}
.process .cont_box{position: relative;}
.process .Desc{background-color: #f5f5f5; height: 37rem; padding: 10rem 5rem; width: calc(100% - 37rem);}
.process .Desc .processSwiper{} 
.process .imgBox{width: 37rem; height: 37rem;}
.process .imgBox img{width:100%;}
.process .swiper-button-prev{left: -5rem;}
.process .swiper-button-next{right: -5rem;}

@media(max-width:1600px){
    .process .swiper-button-prev{left: -1rem;}
    .process .swiper-button-next{right: -1rem;}
}
@media(max-width:1440px){
    .process .swiper-button-prev{left: -4rem;}
    .process .swiper-button-next{right: -4rem;}
}
@media(max-width:990px){
    .process .Desc{padding: 9rem 5rem;}
    .process .swiper-button-prev{left: -2rem;}
    .process .swiper-button-next{right: -2rem;}
}
@media(max-width:900px){
    .process .Desc{padding: 8rem 5rem;}
}
@media(max-width:768px){
    .process .cont_box{flex-wrap: wrap;}
    .process .Desc{width: 100%; height: 26rem;padding: 5rem 5rem;}
    .process .imgBox{width: 100%; height: auto;}
    .process .swiper-button-prev{margin-top: 0; top: 11rem; transform: none;}
    .process .swiper-button-next{margin-top: 0; top: 11rem; transform: none;}
}
@media(max-width:500px){
    .process .Desc{height: 30rem; padding: 4rem;}
    .process .swiper-button-prev{top: 13rem; left: -1rem;}
    .process .swiper-button-next{top: 13rem; right: -1rem;}
}



/* ===================================
    치아교정 - 성장기 교정
====================================== */
.circle{width: 54.68rem;}
.blueBox{padding: 2rem; width: 70rem; margin: 3rem auto 0;}
.mark2{position: relative; z-index: 2;}
.mark2:before{position: absolute; content: ""; width: 100%; height: 40%; background-color: rgba(1,60,240,0.4); left: 0; bottom: 0; z-index: -1;}

.sub.growthOrthodontics .ban{position: relative; background-image: url(/img/sub/orthodontic/growthOrthodontics/ban_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 60rem;}
.ban .txtBox img{filter: brightness(10);}


/* reason */
.reason{}
.reason .box{box-shadow: 0px 8px 24px rgba(217,217,217,0.7); width: 31%; padding: 6rem 1rem 4rem; border-top: 10px solid rgba(1,60,240,.5); position: relative;}
.reason .box img{width: 6.62rem;}
.reason .box h4{position: relative; display: inline-block;}
.reason .box h4:after{position: absolute; content: ""; width: 106%; height: 40%; top: 50%; transform: translateY(-50%); left: -3%; background-color: rgba(1,60,240,0.1);}
.reason .box .num{position: absolute; top: -2.4rem; left: 50%; transform: translateX(-50%); width: 4.3rem; height: 4.3rem; border-radius: 50%; background-color: var(--pointcolor);}

.orthodontic.growthOrthodontics .reason .box h4:after{background-color:#fcff00;z-index:-1;}


@media(max-width:990px){
    .circle{width: 70%;}
    .blueBox{width: 100%;}
}
@media(max-width:768px){
    .circle{width: 80%;}
    .reason .box{width: 80%; margin: 0 auto 3rem;}
    .reason .box:last-child{margin-bottom: 0;}
}
@media(max-width:500px){
    .circle{width: 100%;}
    .reason .box{width: 90%;}
}


/* recommend */
.mark3{position: relative; display: inline-block;}
.mark3:after{position: absolute; content: ""; width: 106%; height: 30%; bottom: 3%; left: -3%; background-color: rgba(1,60,240,0.2);}


/* specialStep */
.specialStep{background-color: #f5f5f5;}
.specialStep .box{width: 23%; background-color: #fff; box-shadow: 0px 8px 24px rgba(217,217,217,0.7);}
.specialStep .box .txtBox{width: 100%; padding: 4rem 1rem;}
.specialStep .box .txtBox p:nth-child(1){border-bottom: 1px solid var(--pointcolor); display: inline-block;}

@media(max-width:990px){
    .specialStep .cont_box{flex-wrap: wrap; padding: 0 5%;}
    .specialStep .box{width: 47%;}
    .specialStep .box:nth-child(1){margin-bottom: 5rem;}
    .specialStep .box:nth-child(2){margin-bottom: 5rem;}
}
@media(max-width:768px){
    .specialStep .box{width: 47%;}
    .specialStep .box:nth-child(1){margin-bottom: 4rem;}
    .specialStep .box:nth-child(2){margin-bottom: 4rem;}
}
@media(max-width:500px){
    .specialStep .cont_box{padding: 0%;}
    .specialStep .box{width: 47%;}
    .specialStep .box:nth-child(1){margin-bottom: 4rem;}
    .specialStep .box:nth-child(2){margin-bottom: 4rem;}
}


/* ===================================
    subtap
====================================== */
.subTab{height: 29.25rem; background-image: url(/img/sub/subTab_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
.subTab .tabMenu{justify-content: center;}
.subTab .tabMenu a{padding: 1rem; background-color: #fff; width: 14rem; border-radius: 0.6rem; display: block;  border: 1px solid #c9c9c9; --x-gap: 1.750rem; }
.subTab .tabMenu a.on{background-color: var(--pointcolor); color: #fff; border: 1px solid var(--pointcolor);}

@media(max-width:768px){
    .subTab .tabMenu{flex-wrap: wrap;}
    .subTab .tabMenu a{width: 40%;}
}
@media(max-width:500px){
    .subTab .tabMenu a{width: 45%;}
}


/* ===================================
    치아교정 장치별
====================================== */
.meaning{}
.meaning .tit img{width: 2.2rem; margin-bottom: 0.8rem;}
.meaning .imgBox img{width: 27.8rem;}

.byCase .meaning .mark{box-shadow:inset 0 -1.2em 0 rgba(0,0,0,0.5);}
@media(max-width:990px){
    .meaning .container{flex-wrap: wrap;}
    .meaning .box:nth-child(1){width: 100%;}
    .meaning .imgBox{margin-top: 5rem;}
}
@media(max-width:500px){
    .meaning .imgBox img{width: 80%;}
}
@media(max-width:400px){
    .meaning .imgBox img{width: 100%;}
}

.advantage{}
.advantage .box{padding-left: 1.5rem; position: relative;}
.advantage .box .inner{border-left: 10px solid #52c1f3; padding: 1.8rem 3rem;}
.advantage .icon{width: 6.8rem;}
.advantage .num{background-color: #52c1f3; border-radius: 50%; width: 3.75rem; height: 3.75rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}