@charset "utf-8";
.docSection {position: relative;overflow: hidden;}
.docSection .formeLogo     {position: absolute;top: 50%;right: 0;transform: translateY(-50%);pointer-events: none;width: auto;height: 90%;}
.docSection .doc-minitit{letter-spacing: 0.5em; font-weight: 500;}
.docSection .doc-profile{display: flex; flex-wrap:wrap; border-left: 2px solid #000;padding-left: 2em; gap: 1em 2em;position: relative;z-index: 2;max-width:70%}
.docSection .doc-profile ul{display: flex; flex-direction: column; gap:1em;}
.docSection .docImg{position: absolute;bottom: 0;right: 0%;height: 90%;max-width: calc(var(--layoutwidth));z-index: 1;}
.docSection .docImg img{height: 100%;width: auto;}

.docSwiper .swiper-slide{aspect-ratio: 13/18; background: var(--light-gray );}   
.docSwiper .pagi{position: relative;background: #e6e6e6;opacity: 1;width:90%}
.docSwiper .swiper-pagination-progressbar-fill{background: var(--pointcolor)}

@media (min-width:1920px) { .docSection .formeLogo{right: calc((100% - 1920px) / 2);}}
@media (min-width:1441px) { .docSection .docImg{right: calc((100% - var(--layoutwidth)) / 2)}}
@media (max-width:768px)  { .docSection .titwrap{max-width:55%}}
@media (max-width:500px)  { 
    .docSection .docImg{right:-10%;height: 75%;max-height: 600px;}
    .docSection .doc-profile{max-width:none}
    
}


/* doctor_point */
.doctorPoint {background-color:#f5f5f5;position: relative;top:0;left:0;}
.doctorPoint .tit{background-image: url(/img/sub/doctor_point_bg.png);background-position: center;background-repeat: no-repeat;background-size: auto;}
.doctorPoint .lineBox {padding: 10px 30px;background: #e7faff;display: inline-block;}
.doctorPoint .flexList > .box{background-color: rgba(255,255,255,0.98);border-radius: 50%;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;}
.doctorPoint .flexList > .box small{font-size: 0.7em;line-height: 1;}
.doctorPoint .doctorBox{position: absolute;bottom:0;left:50%;transform: translateX(-50%);width: 1920px;display: flex;justify-content: space-between;z-index: 0;}
.doctorPoint .cont_box{position: relative;top: 0;left: 0;z-index: 1;}
/* doctor_point.virtue */
.doctorPoint.virtue{background-color: none; background-image: url(/img/sub/digitalImplant/wholeimplant02_bg.png); background-repeat: no-repeat; background-size: cover;}
.doctorPoint.virtue  .flexList > .box{background-color: rgba(83,204,255,.8)}
.doctorPoint.virtue .tit{background-image: none;}
.doctorPoint.virtue  .flexList > .box .line{width: 100%; height: 1px; background: #fff; margin-left: auto; margin-right: auto;}

/* process */
.process .box{position: relative;}
.process .box .txt{position: absolute; width: 45%;background-color: rgba(32,73,189,.8); padding: 25px 0;}
.process .cont_box div>div:nth-child(1) .txt, .process .cont_box div>div:nth-child(2) .txt{bottom: 0;}
.process .cont_box div>div:nth-child(3) .txt, .process .cont_box div>div:nth-child(4) .txt{top: 0;}
.process .box .t_right{right: 0;}
.process .flexList{--x-gap: .2rem; --y-gap: .2rem;}
.process02 .box .txt{width: 65%;}

/* detail*/
.detail .box{position: relative; }
.detail .num{position: absolute; top: 0; left: 0;padding: 5px 10px;}
.detail .Title p{margin-top: -2rem;}

/*success*/
.success{background-image: url(/img/sub/digitalImplant/revision_bg.jpg); background-repeat: no-repeat; background-size: cover;}
.success .txt{float: right; padding-left: 10rem;}

/*finition*/
.finition .box{border: 1px solid #ccc;}
.finition .box .txt{padding-left: 1rem; padding-right: 1rem;}
@media (max-width:1920px){.doctorPoint .doctorBox{width:100%}}
@media (max-width:1440px){.doctorPoint .doctorBox img{width: 400px;}  .success .txt{padding-left: 3rem;}}
@media (max-width:990px){
    .doctorPoint{padding-bottom: 0;}
    .doctorPoint .doctorBox{position:relative;top:0;left:0;bottom:auto;transform: translateX(0);margin-top: 30px;}
    .doctorPoint .doctorBox img{width: auto;max-width: 100%;}
    .doctorPoint .tit{background-size: 100% auto;}
    /* doctor_point.virtue */
    .doctorPoint.virtue{padding-bottom: 100px;}

    /* process */
    .process .box .txt{width: 50%; padding: 15px 0;}
    .process02 .box .txt{width: 75%;}

    /*finition*/
    .finition .width75{width: 100%;}
    .finition .cont_box{width: 70%;}

    /*success*/
    .success .txt{padding-left: 0;}
}

/* subnav */
#subnav .container .depth02{display: flex;text-align: center;width: 100%;gap:1.5rem}
#subnav .container .depth02 li{flex-grow: 1;}
#subnav .container .depth02 li a{transition: .3s all ease;color: #b2b2b2;display: block;padding: 15px;border-radius: 10px;border:1px solid #b2b2b2;}
#subnav .container .depth02 li.subnav a, #subnav .container .depth02 li a:hover{color: #fff;background-color: var(--pointcolor);border-color: var(--pointcolor);}

@media (max-width:990px){
    #subnav .container .depth02 {flex-wrap: wrap;}
    #subnav .container .depth02 li{width:calc(100% / 2 - 1.5rem / 2);}
}


/* ===================================
    board subtop
====================================== */
.board .qnaBG{background:url(/img/sub/qnaBG.jpg)no-repeat center center /cover;}
.board .qnaBG .tit .miniTit{text-decoration:underline;text-underline-position:under;}


/* ===================================
    23.07.06 치아교정 리뉴얼
====================================== */
.sub .counterNumber{counter-reset:number 0;} 
.sub .counterNumber .num-count:before{counter-increment:number 1;content:counter(number,decimal-leading-zero)}
.tit .en.color-white{color:#fff;border-color:#fff;}
.bg-dark-blue{background:#354046;}
.bg-definition{background:#52c1f3;}

.sub.orthodontic.caution .cont_box .flexList[boxCount="1"]{--x-gap:0;--y-gap:3.75rem;}
.sub.orthodontic.caution .cont_box .flexList[boxCount="2"]{--x-gap:8.75rem;--y-gap:0;width:100%;}
@media(max-width:768px){
    .sub.orthodontic.caution .cont_box .flexList .txt{padding:2em 0;}

    .doctorPoint.virtue{padding-bottom: 80px;}
    /* process */
    .process .cont_box div>div:nth-child(3) .txt, .process .cont_box div>div:nth-child(4) .txt{top: auto; bottom: 0;}
    .process .box .t_left{right: 0;}
    .process02 .box .txt{width: 50%;}

    /*finition*/
    .finition .cont_box{width: 90%;}

    /*success*/
    .success{background-position: 30%;}
    .success .txt{float: none; width: 100%;}
}
@media (max-width:500px)  { 

    /*finition*/
    .finition .cont_box{width: 100%;}
}
.sub .symptomList .box{padding:2.1875rem 3rem;display:flex;align-items:flex-start;}
.sub .symptomList .box span{flex-shrink:0;border-bottom:1px solid var(--pointcolor);display:inline-block;margin-right:1.5rem;}

.SquareList li{display: flex;align-items: center;}
.SquareList li+li{margin-top:1em}
.SquareList p{padding:1em 1.5em}
.SquareList .num-count:before{background:#71bbff; color: #fff; font-weight: 700; width:3.5em;display: flex;align-items: center; justify-content: center;flex-shrink: 0;align-self: stretch;}