:root{--ani:cubic-bezier(.32,.94,.6,1)}
#map .tel_tit img, .mb_tel img{width: auto !important;}
/* sub Top */
.subTop {height:57.5rem; position:Relative; top:0; left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.05); transition:transform 2s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}
.subTop .inner {position: relative; max-width: 1440px; width: 90%; top:24rem; margin: auto; letter-spacing: -3px;}

.sub.digitalImplant .inner, .sub.orthodontic .inner {color:#fff;}
.sub.growthOrthodontics .inner{color: #000; top:20rem;}
.sub.growthOrthodontics .inner img{width: 27.5rem;}
.sub.byCase .inner{color: #000;}

@media(max-width:500px) {
    .subTop .inner {top:32rem;}
    .sub.growthOrthodontics .inner{color: #000; top:18rem;}
    .subTop .inner {top:41rem;}

}


/* .subTit */
.sub .subTit {display: flex; align-items: center; text-transform: uppercase;}
.sub .subTit img {width: 3.563rem;}
.sub .smTit {color: var(--pointcolor);border-bottom: 2px solid var(--pointcolor);display: inline-block;padding-right: 5px; font-weight: 500;}

/* subTit2 */
.sub .subTit2 {}
.sub .subTit2 b{font-weight: 700;}
.sub .subTit2 img {width: 3.563rem;}
.sub .smTit2 {color: var(--pointcolor);border-bottom: 2px solid var(--pointcolor);display: inline-block;padding-right: 5px; font-weight: 500;}

@media(max-width:768px) {
    .sub .subTit .font-80 {font-size: 3.5rem;}
    .sub .subTit img {width: 3rem;}

    .sub .subTit2 .font-80 {font-size: 3.5rem;}
    .sub .subTit2 img {width: 3rem;}
}
@media(max-width:500px) {
    .sub .subTit {align-items: flex-end; text-align: center;}
    .sub .subTit.flex-column {align-items: center; text-align: center;}
    .sub .subTit .font-80 {font-size: 3rem;}
    .sub .subTit img {width: 2.3rem; margin-bottom: .8rem;}

    .sub .subTit2 .font-80 {font-size: 3rem;}
    .sub .subTit2 img {width: 2.3rem;}
}






.sub .check {width: 2.063rem; margin-right: 2rem;}
.sub .box_check {width: 1.438rem;}

.sub .scrollBox {overflow-x: scroll;}
.sub .scrollBox::-webkit-scrollbar{display:none;}


/* .intro */
.sub .intro .Desc {background-color: #f5f5f5; height: 34.5rem; padding: 4rem 5rem;}
.sub .intro .flexList {--y-gap: 0;}


/* before */
.sub .before .flexList {--x-gap: 3rem; position: relative;}
.sub .before .subArrow {position: absolute; top:0; bottom:0; right:0; left:0; margin: auto; width: fit-content; height: fit-content;}
.sub .before .subArrow img {width:0.938rem}
@media(max-width:500px) {
    .sub .before .subArrow {transform: rotate(90deg);}
}


/* equipment */
.sub .equipment {position: relative;}
.sub .equipment:after {content:''; position: absolute; width: 47.438rem; height: 50.688rem; background-color: #f5f5f5; bottom:15rem; right: 50%; z-index: -1;}
.sub .equipment .flexList .box.Desc {width: 35%; padding: 0 2rem;}
.sub .equipment .flexList .box.Img {width: 65%;}
.sub .equipment .equipmentSwiper .swiper-slide {opacity: .5;}
.sub .equipment .equipmentSwiper .swiper-slide-active {opacity: 1;}
@media(max-width:768px) {
    .sub .equipment:after {content:''; position: absolute; width: 100%; height: 50.688rem; background-color: #f5f5f5; bottom:auto; top:3rem; right:auto; left:0; z-index: -1;}
    .sub .equipment .flexList .box.Desc {width: 100%;}
    .sub .equipment .flexList .box.Img {width: 100%; margin-top: 3rem;}
    .sub .equipment .swiper-btn-wrap {justify-content: center;}
}



/* recommend */
.sub .recommend {background: no-repeat center url('/img/sub/prosthesis/recommendBG.jpg'); background-size: cover;}
.sub .recommend .box {background-color: #fff; padding: 1.5rem 2rem; height: 5.938rem; display: flex; align-items: center;}



/* progress */
.sub .progress .img {position: relative;}
.sub .progress .num {position: absolute; top:0; left: 0; width: 3.75rem; height: 3.75rem; background-color:var(--pointcolor); display: flex; align-items: center; justify-content: center; color:#fff; font-weight:500;}
.sub .progress .Line {width: 100%; height: 1px; background-color: #000; margin: .5rem 0 1rem;}



/* comparison */
.sub .comparison table {max-width: 1218px; width: 100%; padding: 0 1.75rem; margin: auto;}
.sub .comparison table th {padding-bottom:2rem;}
.sub .comparison table td {padding: 1.5rem;}
.sub .comparison .border-tb {border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
.sub .comparison .roundBox {width: 13.125rem; display: inline-block; padding:.5rem 1rem; font-weight: 500; color:#fff; background-color: var(--pointcolor); border-radius: 10px;}
@media(max-width:500px) {
    .sub .comparison table {min-width: 600px;}
}


/* special */
.sub .special>.container{max-width:1720px;}
.sub .special .Title p {margin-top: -2rem;}
.sub .special .flexList {--y-gap:0;}

.sub .special .specialSwiper .Text {position: absolute; z-index: 5; color:#fff; width: fit-content; height: fit-content; top:0; bottom:0; right:0; left:0; margin: auto; font-weight: 200;}

.sub .special .specialDescSwiper .swiper-slide {background-color:var(--pointcolor); height: auto; padding: 5.625rem 2.5rem;}
.sub .special .specialDescSwiper .swiper-slide img {width: 21.875rem;filter:drop-shadow(.875rem .375rem 0px #0192ff);}
.sub .special .specialDescSwiper .Logo_WH {position: absolute; z-index: 5; right: 0; left:0; bottom:5.625rem; margin: auto; width: 22.875rem;}

.sub .special .swiper-btn-wrap {position: absolute; top:0; bottom:0; left:0; right:0; margin: auto; width:fit-content; height: fit-content;}

.sub .special .gradientBanner{background:linear-gradient(90deg, #0056a8  40%, #009be5 80%);}

.sub .special .swiper-button-prev,
.sub .special .swiper-button-next{border-color:#fff;}
.sub .special .swiper-btn:after,
.sub .special .swiper-btn:before{background-color:#fff;}
.sub .special .swiper-btn .bar{background-color:#fff;}

@media(max-width:768px) {
    .sub .special .swiper-btn-wrap {position:relative; margin-top: 2rem;}
}