:root{--ani:cubic-bezier(.32,.94,.6,1)}

.sub .xgap1 {--x-gap:1rem}
.sub .xgap2 {--x-gap:2rem}
.sub .xgap3 {--x-gap:3rem}
.sub .xgap4 {--x-gap:4rem}
.sub .xgap5 {--x-gap:5rem}

.sub .ygap0 {--y-gap:0rem}
.sub .ygap1 {--y-gap:1rem}
.sub .ygap2 {--y-gap:2rem}
.sub .ygap3 {--y-gap:3rem}
.sub .ygap4 {--y-gap:4rem}
.sub .ygap5 {--y-gap:5rem}

@media(max-width:768px) {
    .sub .main_Tit {font-size: 3rem;}
    .sub.font-20 {font-size: 1.4rem;}
}

.subImg {border-radius: 1.25rem; overflow: hidden;}

.sub .swiper-button-next:after, .sub .swiper-button-prev:after {display: none;}
.sub .swiper-button-next, .sub .swiper-button-prev {height: auto; margin-top: 0; top: 0; width: auto; left: 0; right: 0; position: relative; opacity: 1;}
.sub .swiper-button-prev img {transform: rotate(180deg); filter: invert(1) grayscale(1) brightness(1.5);}

.sub .slideBtn {display: flex; cursor: pointer; position: absolute; bottom:50%; top:auto; align-items: center; justify-content: center; background-color: rgba(9,130,211,.1); width: 5rem; height: 5rem; border-radius: 50%; transition: all 0.3s; cursor: pointer}
.sub .slideBtn.point { background-color: #fff; border: 1px solid var(--pointcolor); }
.sub .slideBtn img {width: .875rem;}
.sub .swiper-button-prev {background-color: rgba(39,39,39,.1);}
.sub .swiper-button-prev img {filter: invert(1) grayscale(1) brightness(3);}

.sub .checkBL {position: relative; padding-left: 2rem;}
.sub .checkBL:after {content:''; width: 1rem; height: .75rem; background-image: url('/img/sub/check.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top:.6rem;}

.sub .zum {position: relative; padding-left: 1rem;}
.sub .zum:after {content:'· '; position: absolute; left: 0; top:0; color:var(--pointcolor)}

.sub .container {padding: 0 1.5rem;}
@media(max-width:1544px) {
    .sub .container {padding: 0;}
}

.sub .tabs .tab { padding: 1rem 0; text-align: center; border: 1px solid var(--pointcolor); border-radius: 2rem; background: transparent; color: #272727; transition: .25s; cursor: pointer; }
.sub .tabs .tab.on { background: var(--pointcolor); color: #fff; }
.sub .tabconts .tabcont { display: none; }
.sub .tabconts .tabcont.on { display: block; }

/* subTop */
.subTop {height:52.3125rem; position:Relative; top:0; left:0; z-index: 3;}
.subTop .subTopImg {position:relative; width:100%; height:100%;}
.subTop .inner {position: absolute; max-width: var(--layoutwidth); width: 90%; top:50%; left: 50%; transform: translate(-50%, -50%);}
.subTop .enTxt {font-family: var(--pointfont); letter-spacing: 0.05rem;}
.subTop .cozyBtn {margin: 4rem auto 0;}
.subTop .cozyBtn.sub { background: var(--sub2color); }
@media (max-width: 768px) {
    .subTop {height: auto;}
    .subTop .subTopImg {height: 90vh;}
    /* .subTop .inner {bottom:13rem} */
}


/* intro */
.sub .intro .flexList {border-radius: 1.25rem; overflow: hidden;}
.sub .intro .Img {background: no-repeat center / cover; align-self: stretch;} 
.sub .intro .Desc {background-color: #eaf6ff; min-height: 25.6875rem; position: relative; overflow: hidden;}
.sub .intro .Desc > div {
    /* max-width: 35rem; width: 90%; */
    padding: 4rem 1rem; position: relative; z-index: 2;
}
.sub .intro .Desc .LogoBg {position: absolute; width: 22.8125rem; z-index: 1; right:-5rem; bottom:-3rem}
.sub .intro2 .flex { background-image: url(../img/sub/Orthodontics/claraAI_intro_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; }
.sub .intro2 .flex .txt { width: 55%; padding: 7.5rem 2rem 7.5rem 6rem; }
.sub .intro2 .flex .img { width: 45%; position: relative; }
.sub .intro2 .flex .img > img { position: absolute; bottom: 0; }
@media (max-width: 990px) {
    .sub .intro .Desc .LogoBg { display: none; }
    .sub .intro2 .flex { background-image: url(../img/sub/Orthodontics/claraAI_intro_bg_m.png); flex-wrap: wrap; }
    .sub .intro2 .flex .txt { width: 100%; padding: 4rem; }
    .sub .intro2 .flex .img { display: none; }
}
@media (max-width: 768px) {
    .sub .intro .Img {min-height: 25.6875rem;}
}



/* definition */
.sub .definition .Line {width: 2rem; height: .1875rem; background-color: var(--pointcolor); margin: 2rem 0;}
.sub .definition .Img {background: no-repeat center / cover; align-self: stretch; border-radius: 1.25rem; overflow: hidden; min-height: 32.375rem;} 
@media (max-width: 768px) {
    .sub .definition .Img {min-height: 25rem; aspect-ratio: 13/9;}
}



/* reason */
.sub .reason .Num {width: 3.5rem; height: 3.5rem; aspect-ratio: 1/1; background-color: var(--pointcolor); color:#fff; font-family: var(--pointfont); letter-spacing: 0.05rem; border-radius: 50%; position: absolute; left: 1.2rem; top:1.2rem;}
.sub .reason .Desc { padding: 1.5rem 1rem; }


/* security */
.sub .security .inner {width: 100%; padding: 5rem 0 8rem; background-color: var(--pointcolor); color:#fff; margin-top: 6rem;}
.sub .security .flexBox {display: flex; gap:2rem;}
.sub .security .securityImg {position: absolute; bottom:1rem; width: 36.5rem;}
@media (max-width: 768px) {
    .sub .security .inner {background-image: linear-gradient(0deg, transparent 80%, #fff 20%); margin-top: 0;}
    .sub .security .Img {order: -1; padding: 0 2rem;}
    .sub .security .securityImg {position: relative; bottom:2rem;}
}
@media (max-width: 500px) {
    .sub .security .securityImg {max-width: 80%; margin: auto;}
}



/* treatment */
.sub .treatment .box {position: relative; padding: 3rem 2.5rem 2rem; border-radius: 1.25rem; border:1px solid rgba(0,0,0,.3)}
.sub .treatment .box .treatmentImg {width: 6.375rem;}
.sub .treatment .check {width: 3.5rem; height: 3.5rem; aspect-ratio: 1/1; background-color: var(--pointcolor); border-radius: 50%; position: absolute; top: -1.75rem; left: 50%; transform: translateX(-50%);}
.sub .treatment .check img {width: 1.25rem;}


/* material */
.sub .material .round {background-color: var(--pointcolor); border-radius: 30px; padding: .8rem 0; max-width: 303px; width: 100%; text-align: center; color:#fff; margin: 2rem auto;}
.sub .material .materialImg {max-width: 13.6875rem; width: 90%;}
@media (max-width: 500px) {
    .sub .material .round {padding: .5rem 0;}
    .sub .material .materialImg {width: 80%;}
}



/* case */
.sub .case .inner {max-width: 75rem;}
.sub .case .box {border-radius: 1.25rem; overflow: hidden;}
.sub .case .Desc {padding: 1rem 3rem; display: flex; align-items: center; justify-content: space-between; gap:2rem; background-color: #f6f6f6;}
.sub .case .Desc.A {background-color: #eaf6ff;}
.sub .case .click {position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); top:0; left: 0;}
.sub .case .Txt {position: absolute; z-index: 3; top:50%; left: 50%; transform: translate(-50%,-50%); text-align: center; color:#fff; width: 90%;}
.sub .case #LoginClick {font-family: var(--pointfont); border-bottom: 1px solid #fff; display: block; width: fit-content; margin: 1rem auto 0; color:#fff; letter-spacing: 0.05rem; padding: .5rem .5rem .2rem;}

.sub .case .swiper-button-next {right: 1.25rem; left: auto; bottom:45%;}
.sub .case .swiper-button-prev {left: 1.25rem; right: auto; bottom:45%;}
@media (max-width: 1400px) {
    .sub .case .swiper-button-next {right: 0;}
    .sub .case .swiper-button-prev {left: 0;}
}
@media (max-width: 1340px) {
    .sub .case .BtnBox {display: flex; align-items: center; gap:5rem; justify-content: center; margin-top: 3rem;}
    .sub .case .swiper-button-next, .sub .case .swiper-button-prev {position: relative;}
}

#loginBox {display: none; border-radius: 2rem; max-width: 700px; width: 90%; background-color: #fff; position: fixed; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; text-align: center; padding:4rem 2rem;}
#loginBox.on {display: block;}
#loginBox .auth-wrap {display:flex; align-items:center; gap:.5rem; justify-content: center;}
#loginBox .LoginClose {position: absolute; top:2rem; right:2rem; width: 1.375rem;}
#authCode {width:14.375rem; height:2.625rem; border:1px solid #ccc; padding:0 10px;}
#genBtn {height:2.625rem; padding:0 18px; background:#bfbfbf; color:#000; border:none; cursor:pointer;transition:.2s;}
#genBtn:disabled {background:#e0e0e0; color:#888; cursor:not-allowed;}

#loginBox .loginSubmit {background-color: #272727; border-radius: .5rem; color:#fff; padding: .8rem 3rem; width: fit-content; margin: 2rem auto 0;}
#loginBox .LoginFlex {display: flex; align-items: center; justify-content: space-between; gap:.5rem;}
#loginBox .LoginFlex .box {display: flex; align-items: center; gap:.5rem;}
#loginBox .LoginFlex .box a {border-bottom:1px solid var(--pointcolor)}

.loginBoxBg {width: 100%; height: 100vh; background-color: rgba(0,0,0,.5); position: fixed; top:0; left: 0; z-index: 99998; display: none; opacity: 0;}
.loginBoxBg.on {display: block; opacity: 1;}



/* promise */
.sub .promise {background-color: #f6f6f6;}
.sub .promise .Img {background: no-repeat center / cover; align-self: stretch; border-radius: 5rem 0 0 0; overflow: hidden;}
.sub .promise .enTxt {font-family: var(--pointfont); color:var(--pointcolor); letter-spacing: 0.05rem;}
.sub .promise .Desc {min-height: 24.375rem; background-color: #fff; padding: 0 3rem;}
.sub .promise .DescBox {max-width: 26.25rem; width: 95%;}

.sub .promise .swiper-pagination-progressbar {position: relative; background-color: #fff; max-width: 1192px; width: 90%; margin-left: auto; margin-right: auto;}
.sub .promise .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}
@media (max-width: 768px) {
    .sub .promise .Img {min-height: 24.375rem;}
}
@media (max-width: 500px) {
    .sub .promise .Desc {padding: 4rem 1.5rem;}
}

/* checkPoint */
.sub .checkPoint .box {background-color: #f6f6f6; border-radius: 1.25rem; padding:3rem;}
.sub .checkPoint .check {width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: var(--pointcolor); margin: auto;}
.sub .checkPoint .check img {width: 1.25rem;}

.sub .checkPoint.gray {background-color: #f6f6f6;}
.sub .checkPoint.gray .box.Wh {background-color: #fff;}


/* customized */
.sub .customized .inner {position: relative; padding-bottom: 100px;}
.sub .customized {background: no-repeat center 80% url('/img/sub/Relaxed/customizedBg.png'); background-size: contain;}
.sub .customized .Img {margin-left: auto; max-width: 54.6875rem; width: 60%;}
.sub .customized .Img img {border-radius: 5rem 0 0 0; overflow: hidden;}

.sub .customized .Desc {background-color: #f6f6f6; padding:6rem 5rem; max-width: 54.875rem; width: 60%; position: absolute; left: 0; bottom:0;}
@media (max-width: 990px) {
    .sub .customized .Img {width: 90%;}
    .sub .customized .Desc {position: relative; width: 90%; margin-top: -2rem;}
}
@media (max-width: 768px) {
    .sub .customized .Desc {padding: 5rem 4rem;}
}
@media (max-width: 500px) {
    .sub .customized .Img {width: 100%;}
    .sub .customized .Desc {padding: 5rem 2rem; width: 100%; margin-top: 0;}
}



/* implant */
.sub .implant .inner {background-color: #eaf6ff; padding: 5rem 0;}
.sub .implant .implantList {display: flex; justify-content: space-between; gap:2rem;}
.sub .implant .implantList li {width: fit-content;}
.sub .implant .box {position: relative; padding-left: 2rem;}
.sub .implant .box:after {content:''; height: 85%; width: .1875rem; background-color: var(--pointcolor); position: absolute; top:0; bottom:0; left: 0; margin: auto;}
.sub .implant .enTxt {font-family: var(--pointfont); color: var(--pointcolor); letter-spacing: 0.05rem;}
@media (max-width: 1200px) {
    .sub .implant .implantList {flex-wrap: wrap;}
    .sub .implant .implantList li {max-width: 50%;}
}
@media (max-width: 990px) {
    .sub .implant .implantList li {width: 47%;}
}
@media (max-width: 500px) {
    .sub .implant .implantList li {width: 100%; max-width: 100%;}
}


/* specialPromise */
.sub .specialPromise .round {width: fit-content; padding: .7rem 1rem; border-radius: 70%; border:1px solid var(--pointcolor); color:var(--pointcolor); font-family: var(--pointfont); letter-spacing: 0.05rem;}
.sub .specialPromise .Desc {display: flex; flex-direction: column; align-self: stretch;}
.sub .specialPromise .DescBox {padding: 1rem 0;}
.sub .specialPromise .Desc.L .DescBox {padding-left: 13%;}
.sub .specialPromise .BgTxt {font-size: 5rem; font-family: var(--pointfont); letter-spacing: 0.05rem; color:#f2f2f2; position: relative; z-index: -1; line-height: 1; margin-left: auto;}
.sub .specialPromise .BgTxt.L {margin-right: auto; margin-left: 0;}
.sub .specialPromise .Img.R img {margin-left: auto;}
@media (max-width: 1460px) {
    .sub .specialPromise .Desc.R .DescBox {padding: 0 2rem;}
    .sub .specialPromise .Desc.L .DescBox {padding: 1rem 2rem;}
}
@media (max-width: 990px) {
    .sub .specialPromise .Img {order:2}
    .sub .specialPromise .Desc {order: 1;}
    .sub .specialPromise .Img.R img {margin-left: 0;}
    .sub .specialPromise .Desc .DescBox {padding: 0 !important;}
    
}



/* philosophy */
.sub .philosophy .inner {max-width: 1920px; width: 100%; height: 29.75rem; position: relative;}
.sub .philosophy .Line {width: 100%; height: 1px; background-color: var(--pointcolor); top:50%; left: 50%; transform: translate(-50%,-50%); position: absolute; z-index: -1;}
.sub .philosophy .Dot {max-width: 29.75rem; width: 100%; aspect-ratio: 1/1; background-color: #fff; border-radius: 50%; border:1px solid var(--pointcolor); position: absolute; top:0;}
.sub .philosophy .Dot.Fill {background-color: #eaf6ff; border-color:#eaf6ff;}
.sub .philosophy .Num {width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: var(--pointcolor); font-family: var(--pointfont); color:#fff; margin: auto;}
.sub .philosophy .enTxt {font-family: var(--pointfont); color:var(--pointcolor); font-weight: 500;}
.sub .philosophy .DotList {text-align: left; width: fit-content; margin-left: auto; margin-right: auto;}

.sub .philosophy .Dot1 {left: 0;}
.sub .philosophy .Dot2 {left: 0; right:0; margin: auto;}
.sub .philosophy .Dot3 {right: 0;}
@media (max-width: 1100px) {
    .sub .philosophy .Dot {max-width: 27rem;}
}
@media (max-width: 990px) {
    .sub .philosophy .inner {height: 100%;}
    .sub .philosophy .max1240 {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
    .sub .philosophy .Dot {position: relative; width: 50%;}
    .sub .philosophy .Dot1 {margin-left: auto;}
    .sub .philosophy .Dot2 {margin-right: auto; margin-left: 0;}
    .sub .philosophy .Dot3 {top: -3.5rem;}
    .sub .philosophy .Line {top: 25%;}
}
@media (max-width: 768px) {
    .sub .philosophy .Line {display: none;}
    .sub .philosophy .Dot {width: 100%; margin: auto; max-width: 29rem;}
    .sub .philosophy .Dot2 {top:-1.75rem;}
}



/* interior */
.sub .interior {background-color: #f6f6f6;}
.sub .interior .interiorImg {border-radius: 5rem 0 0 0; overflow: hidden;}
.sub .interior .Desc {padding: 1rem;}
.sub .interior .Tit {position: relative; padding-left: 2rem;}
.sub .interior .Tit:After {content:''; width: .1875rem; height: 65%; background-color: var(--pointcolor); position: absolute; left: 0; top:7px;}

.sub .interior .box2 {margin-top: 5rem;}
@media (max-width: 768px) {
    .sub .interior img {margin: auto;}
    .sub .interior .box2 {margin-top: 0;}
    .sub .interior .Desc {max-width: 445px; width: 100%; margin: auto;}
}


/* doctorInfo */
.sub .doctorInfo .DescBox {width: fit-content; margin-left: auto; margin-top: 3rem;}
.sub .doctorInfo .DescBox.L {margin-right: auto;}
.sub .doctorInfo .DescList {display: flex; flex-direction: column; gap:.7rem}

.sub .doctorInfo .Line {width: 100%; height: 1px; background-color: rgba(39,39,39,.3); margin: 7rem auto;}
@media (max-width: 768px) {
    .sub .doctorInfo .Img {order:1;}
    .sub .doctorInfo .Desc {order:2;}
    .sub .doctorInfo .DescBox {margin-right: auto; margin-left: auto; max-width: 410px; width: 100%;}
}



/* lecture */
.sub .lecture .Desc {display: flex; padding: 2rem 1rem 0; gap:2rem;}
.sub .lecture .Num {max-width: 3.5rem; width: 100%; height: 3.5rem; border-radius: 50%; background-color: var(--pointcolor); font-family: var(--pointfont); color:#fff;}
@media (max-width: 500px) {
    .sub .lecture .Desc {gap:1rem;}
}



/* education */
.sub .education {background: no-repeat center / cover;}
.sub.lecture .education {background-image: url('/img/sub/Relaxed/educationBg.jpg');}
.sub.guarantee .education {background-image: url('/img/sub/Relaxed/educationBg2.jpg');}
.sub.contribute .education {background-image: url('/img/sub/Relaxed/educationBg3.jpg');}
.sub .education .enTxt {font-family: var(--pointfont); font-size: 1.125rem; letter-spacing: 0.05rem;}
.sub .education span {color:#99d6ff;}
.sub .education .Line {width: 2rem; height: .1875rem; background-color: #fff; margin: 3rem auto;}





/* equipmentList */
.sub .equipmentList {background-color: #f6f6f6;}
.sub .equipmentList .Img {background-color: #fff; border-radius: 1.25rem; max-width: 456px; aspect-ratio: 1/1; width: 100%; overflow: hidden;}
.sub .equipmentList .Tit {padding: 1rem; font-weight: 600;}


/* Awesome Modal CSS */
.awesome-modal {display: none; border-radius: 1.25rem; max-width: 74.5rem; width: 90%; position: fixed; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); overflow: hidden; z-index: 9999;}
.awesome-modal * { backface-visibility: hidden;}

.sub .awesome-modal .modalTit {background-color: var(--pointcolor); padding: 1rem; position: relative;}
.sub .awesome-modal .modalTit img {width: 11.5625rem;}
.sub .awesome-modal .flexList {background-color: #fff;}
.sub .awesome-modal .Img {background-color: #f6f6f6; align-self: stretch;}
.sub .awesome-modal .Desc {padding: 3rem 2rem;}
.sub .awesome-modal .None {color:#b8b8b8; background-color: #f6f6f6; width: fit-content; padding: .3rem;}

.awesome-overlay {display: none; background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9998; overflow: hidden; cursor: default;}
.close-icon {position: absolute; width: 1.7rem; height: 1.7rem; top: 50%; transform: translateY(-50%); right: 2rem; transition: opacity 0.2s ease;}
.close-icon::before, .close-icon::after {content: ""; position: absolute; top: 50%; left: 50%; width: inherit; height: 1px; background-color: #fff;}
.close-icon::before {transform: translate(-50%, -50%) rotate(45deg);}
.close-icon::after {transform: translate(-50%, -50%) rotate(135deg);}

:target { display: block;}
:target ~ .awesome-overlay {display: block;}

#close {position: fixed; top: 50%; transform: translateY(-50%);}

@media (max-width: 768px) {
    .sub .awesome-modal .Img img {width: 25rem;}
    .sub .awesome-modal .Desc {padding: 4rem 2rem; height: 35vh;}
}



/* genuine */
.sub .genuine .flexList {--x-gap:4rem;}
.sub .genuine .box {border-radius: 1.25rem; overflow: hidden;}
.sub .genuine .Desc {background-color: #f6f6f6; padding: 4rem 1rem; display: flex; justify-content: center; align-self: stretch; min-height: 16rem;}
.sub .genuine .Desc > div {max-width: 347px; width: 90%;}
@media (max-width: 1140px) {
    .sub .genuine .flexList {--x-gap:2rem;}
}



/* certiLife */
.sub .certiLife .certiList {display: flex; flex-direction: column; gap:3rem;}
.sub .certiLife .certiList li {display: flex; align-items: center; gap:2rem; border-radius: 1.25rem; border:1px solid rgba(39,39,39,.3); padding: 3rem;}

.sub .certiLife .certiLife_icon {width: 11rem;}

@media (max-width: 768px) {
    .sub .certiLife .certiList li {flex-direction: column; padding: 3rem 2rem;}
}



/* AS */
.sub .AS {background-color: #eaf6ff;}
.sub .AS .AS_List {max-width: 1192px; width: 100%; background-color: #fff; border-radius: 1.25rem; padding:4rem 2rem; margin-left: auto; margin-right: auto;}
.sub .AS .AS_List li {padding: 1.5rem 0; border-bottom: dashed 1px rgba(9,130,211,.3); width: 85%; margin: auto;}
.sub .AS .AS_List li:last-child {border:none;}

.sub .AS .Num {padding-left: 2rem; position: relative; max-width: 580px; width: 100%; margin: auto;}
.sub .AS .Num:after {content:''; position: absolute; left: 0; top:0; color: var(--pointcolor); font-family: var(--pointfont); font-weight: 600;}
.sub .AS .Num1:after {content:'01';}
.sub .AS .Num2:after {content:'02';}
.sub .AS .Num3:after {content:'03';}



/* location */
.sub .location .round {background-color: #eaf6ff; border-radius: 1.75rem; padding: 1rem; margin-top: 3rem;}
.sub .location .checkBL {display: inline-block;}




/* contribution */
.sub .contribution {background: no-repeat center url('/img/sub/Relaxed/contributionBg.jpg'); background-size: cover;}
.sub .contribution .enTxt {font-family: var(--pointfont); color:var(--pointcolor); letter-spacing: 0.05rem;}
.sub .contribution .Desc {background-color: #eaf6ff; padding:3.5rem 3rem; min-height: 17.25rem;}

.sub .contribution .swiper-slide {border-radius: 1.25rem; overflow: hidden;}
.sub .contribution .swiper-slide img {width: 100%;}

.sub .contribution .swiper-pagination {bottom:0; position: relative;}
.sub .contribution .swiper-pagination-progressbar {width: 100%; height: .25rem; background: #fff; position: relative; z-index: 3;}
.sub .contribution .swiper-pagination-progressbar-fill {background: var(--pointcolor);}
@media (max-width: 990px) {
    .sub .contribution .Desc {min-height: 20rem;}
}
@media (max-width: 550px) {
    .sub .contribution .Desc {min-height: 21rem;}
}

/* difference */
.sub .difference .diffTable th, 
.sub .difference .diffTable th { font-weight: 700; }
.sub .difference .diffTable th span { display: inline-block; border-radius: 3rem; width: 90%; padding: 1rem 0; }
.sub .difference .diffTable tr th:nth-child(1) span { background: rgba(39, 39, 39, .1); }
.sub .difference .diffTable tr th:nth-child(2) span { background: var(--light-gray); }
.sub .difference .diffTable tr th:nth-child(3) span { background: #eaf6ff; }
.sub .difference .diffTable td { padding: 1.5rem .25rem; border-bottom: 1px solid rgba(39, 39, 39, .12); }
.sub .difference .diffTable tr td:first-child { color: rgba(39, 39, 39, .5); }
@media (max-width: 990px) {
    .sub .difference .diffTable { width: 100%; overflow: auto; white-space: nowrap;}
}

/* process */
.sub .process .Img .Num { width: 3.5rem; height: 3.5rem; aspect-ratio: 1/1; background-color: var(--pointcolor); color:#fff; font-family: var(--pointfont); letter-spacing: 0.05rem; border-radius: 50%; position: absolute; left: 50%; bottom: -1.75rem; transform: translateX(-50%); z-index: 3; }
.sub .process .Img .Arrow { position: absolute; display: flex; justify-content: center; width: fit-content; padding: 1rem 1.25rem; gap: 5rem; top: 50%; right: -5rem; transform: translateY(-50%); background: #eaf6ff; z-index: -1; }
.sub .process .Img .Arrow.rounded { padding: .5rem; border-radius: 50%; right: -4.5rem; }
.sub .process .form2 .Img img { position: relative; box-shadow: .25rem .5rem 1rem rgba(0,0,0,.4); z-index: 2; }
.sub .process .form2 .Arrow { background: var(--pointcolor); z-index: 1; opacity: .8; }

.sub.claraAI .process { background-image: url(../img/sub/Orthodontics/claraAI_process_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; }

@media (max-width: 1440px){
    .sub .process .Img .Arrow { padding: 1rem 1.5rem; right: -5.5rem; }
}
@media (max-width: 990px) {
    .sub.claraAI .clara_logo { transform: scale(.8); margin-right: 0; }
    .sub .process .processList { justify-content: flex-start; } 
    .sub .process .Img .Arrow { padding: 1rem 2rem; right: -6.5rem; }
    .sub .process .Img .Arrow.rounded { padding: 0; background: #eaf6ff; }
}
@media (max-width: 768px){
    .sub.claraAI .clara_logo { transform: scale(.65); margin-right: 0; }
}

/* period */
.sub .periodList { display: flex; justify-content: space-between; }
.sub .periodList .box { width: 25%; }
.sub .periodList .chart { position: relative; width: 100%; min-height: 90px; margin: 2rem 0; }
.sub .periodList .chart .left { position: absolute; width: 1px; height: 100%; left: 0; top: 50%; transform: translateY(-50%); }
.sub .periodList .chart .left .upper,
.sub .periodList .chart .left .lower { position: absolute; width: 100%; height: 50%; left: 0; }
.sub .periodList .chart .left .upper { top: 0; border-left: 1px dashed #272727; }
.sub .periodList .chart .left .lower { top: 50%; border-left: 1px solid #272727; }
.sub .periodList .chart .left .circle { position: absolute; width: 10px; height: 10px; background: #272727; border-radius: 50%; left: -5px; top: 50%; transform: translateY(-50%); }
.sub .periodList .chart .colorbar { position: absolute; width: 100%; height: 15px; left: 0; top: 15px; z-index: -1; }
.sub .periodList .box:nth-child(1) .chart .colorbar { background: #f6f6f6; }
.sub .periodList .box:nth-child(2) .chart .colorbar { background: var(--pointcolor); }
.sub .periodList .box:nth-child(3) .chart .colorbar { background: #bee2fd; }
.sub .periodList .box:nth-child(4) .chart .colorbar { background: #eaf6ff; }
.sub .periodList .chart .midline { position: absolute; width: 100%; height: 1px; background: #272727; left: 0; top: 50%; transform: translateY(-50%); }
.sub .periodList .chart .right { position: absolute; width: 1px; height: 100%; right: 0; top: 50%; transform: translateY(-50%); }
.sub .periodList .chart .right .upper,
.sub .periodList .chart .right .lower { position: absolute; width: 100%; height: 50%; right: 0; }
.sub .periodList .chart .right .upper { top: 0; border-right: 1px dashed #272727; }
.sub .periodList .chart .right .lower { top: 50%; border-right: 1px solid #272727; }
.sub .periodList .chart .right .circle { position: absolute; width: 10px; height: 10px; background: #272727; border-radius: 50%; right: -5px; top: 50%; transform: translateY(-50%); }
.sub .periodList .borderList { margin-right: 2rem; padding: 1.5rem; border: 1px solid #272727; border-radius: 1rem; }
@media (max-width: 990px) {
    .sub .periodList { flex-wrap: wrap; }
    .sub .periodList .box { width: 100%; display: flex; justify-content: space-between; }
    .sub .periodList .chart { width: 15%; margin: 0; }
    .sub .periodList .chart .left { width: 100%; height: 1px; top: 0; left: 50%; transform: translateX(-50%); }
    .sub .periodList .chart .left .upper,
    .sub .periodList .chart .left .lower { width: 50%; height: 100%; top: 0; }
    .sub .periodList .chart .left .upper { left: 0; border-left: 0; border-top: 1px dashed #272727; }
    .sub .periodList .chart .left .lower { left: 50%; border-left: 0; border-top: 1px solid #272727; }
    .sub .periodList .chart .left .circle { top: -5px; left: 50%; transform: translateX(-50%); }
    .sub .periodList .chart .colorbar { width: 15%; height: 100%; top: 0; right: 15%; left: auto; }
    .sub .periodList .chart .midline { width: 1px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
    .sub .periodList .chart .right { width: 100%; height: 1px; bottom: 0; top: auto; left: 50%; transform: translateX(-50%); }
    .sub .periodList .chart .right .upper,
    .sub .periodList .chart .right .lower { width: 50%; height: 100%; top: 0; }
    .sub .periodList .chart .right .upper { left: 0; border-right: 0; border-bottom: 1px dashed #272727; }
    .sub .periodList .chart .right .lower { left: 50%; border-right: 0; border-bottom: 1px solid #272727; }
    .sub .periodList .chart .right .circle { bottom: -5px; top: auto; left: 50%; transform: translateX(-50%); }
    .sub .periodList .txt { width: 80%; padding-bottom: 2rem; }
    .sub .periodList .box:last-child .txt { padding-bottom: 0; }
}

/* indicator */
.sub .indicator .box { padding: 2rem 1rem; border: 1px solid rgba(39, 39, 39, .3); border-radius: 1rem; }

/* target */
.sub .target .box { text-align: center; padding: 3rem 1.5rem; border: 1px solid rgba(39, 39, 39, .3); border-radius: 1rem; }
.sub .target .box img { margin: auto; }

/* recommend */
.sub .recommend .recommendList li { width: 100%; padding: 1rem 0; background: #f6f6f6; border-radius: 2rem; margin-bottom: 1.5rem; text-align: center; }
.sub .recommend .recommendList li:last-child { margin-bottom: 0; }
.sub .recommend .recommendList li .inner { position: relative; display: inline-block; padding-left: 30px; }
.sub .recommend .recommendList li .inner::before { position: absolute; content: url(../img/sub/check_point.png); left: 0; top: auto; }
@media (max-width: 990px) {
    .sub .recommend .recommendList li { padding: 1rem 2rem; border-radius: 3rem; text-align: left; }
}

/* recommend */
.sub .precautions ul.precaution { margin-top: 4rem; }
.sub .precautions ul.precaution li { margin-bottom: 1rem; padding: .5rem; border-radius: 4rem; }
.sub .precautions ul.precaution li:last-child { margin-bottom: 0; }
.sub .precautions ul.precaution li .num { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; background: var(--pointcolor); border-radius: 50%; aspect-ratio: 1/1; }

ul.check li { position: relative; padding-left: 25px; margin-bottom: 1rem; }
ul.check li::before { position: absolute; content: url(../img/sub/check.png); left: 0; top: auto; }
ul.check li:last-child { margin-bottom: 0; }

/* contact */
.sub #contact .contactList .box { color: #000; padding: 2rem; border-radius: 2rem; box-shadow: 0 0 1.5rem rgba(0,0,0,.1); }
.sub #contact .contactList .box .color-blue { color: #aba1e1; }
.sub #contact .contactList .box .color-yellow { color: #e99f3f; }