@charset "utf-8";
@font-face {
  font-family: 'teko';
  src: url('../assets/fonts/Teko-Bold-5.ttf');
}

.applicates{ padding: 1.16rem 0 0.54rem; background: #F9F9F9;}
.applicate__tt{ display: block; line-height: 1; color: #000000; font-size: 0.4rem; font-weight: 500; text-align: center;}
.applicates__list{ margin-top: 0.72rem;}
.applicates__list li{ margin-bottom: 0.6rem; display: flex; justify-content: space-between; align-items: flex-start; padding: 0.75rem 0.66rem 0.56rem; background: #fff; border-radius: 0.1rem;}
.applicates__pcba{ width: 0; flex: 1; padding-right: 0.3rem;}
.applicates__numble{ position: relative; margin-bottom: 0.74rem; padding-top: 0.42rem; z-index: 3;}
.applicates__numble strong{ display: block; line-height: 1; color: #000000; font-size: 0.3rem; font-weight: 500;}
.applicates__numble b{ position: absolute; left: 0; top: 0; z-index: -1; line-height: 1; color: #EBEBEB; font-size: 0.96rem; font-family: "teko"; font-weight: lighter;}
.applicates__row{ margin-top: 0.75rem; display: flex; flex-wrap: wrap;}
.applicates__item{ display: flex; align-items: flex-start; margin-bottom: 0.75rem; width: 50%;}
.applicates__item:last-child{ width: 100%;}
.applicates__item b{ display: block; width: 0.67rem; line-height: 1;}
.applicates__item b img{ display: inline-block; max-width: 0.4rem; height: auto;}
.applicates__fix{ flex: 1; width: 0;}
.applicates__fix strong{ display: block; color: #333; font-size: 0.24rem; line-height: 0.4rem; letter-spacing: 1px; font-weight: 600;}
.applicate__text{ margin-top: 0.22rem; }
.applicate__text p{ position: relative; padding-left: 0.3rem; margin-bottom: 0.1rem; color: #666; font-size: 0.16rem; line-height: 2;}
.applicate__text p:before{ position: absolute; left: 0; top: 0.1rem; content: ""; width: 0.12rem; height: 0.12rem; border-radius: 50%; border: 2px solid #00A5B1;}
.applicates__imgs{ padding-top: 0.1rem; width: 4rem;}
.applicates__imgs p{ margin-bottom: 0.2rem; overflow: hidden; border-radius: 0.1rem;}
.applicates__imgs p img{ display: block; width: 100%; height: auto; border-radius: 0.1rem; transition: 0.65s;}
.applicates__imgs p img:hover{ transform: scale(1.06);}
.security__imgs{ border-radius: 0.1rem; overflow: hidden;}
.security__imgs img{ display: block; width: 100%; height: auto;}
.security__info{ padding-top: 0.9rem; text-align: center; line-height: 2; color: #333333; font-size: 0.2rem; }
.security__info b{ color: #00A5B1; font-weight: normal;}

.dentistry{ padding: 1.42rem 0 0.43rem; display: flex; justify-content: space-between; align-items: flex-start;}
.dentistry .field__info{ padding-top: 1.38rem;}
.field__info{ width: 29.058%;}
.field__info strong{ display: block; margin-bottom: 1rem; line-height: 1.1; color: #000000; font-size: 0.4rem; font-weight: 500;}
.field__text{ color: #333333; font-size: 0.18rem; line-height: 2.2;}
.field__text b{ color: #00A5B1; font-weight: normal;}
.dentistry__tab{ margin-left: -0.3rem; display: flex; align-items: flex-start; justify-content: space-between; width: 0; flex: 1;}
.dentistry__imgs{ width: 79%; padding-top: 0.13rem;}
.dentistry__imgs--item{ display: none;}
.dentistry__imgs--item:first-child{ display: block;}
.dentistry__imgs--item figure{ display: flex; justify-content: center; align-items: center; line-height: 1; height: 6.4rem;}
.dentistry__imgs--item figure img{ display: block; max-width: 100%; max-height: 100%;}
.dentistry__wrs{ padding: 0.72rem 0; position: relative; width: 1rem;}
.dentistry__swiper{ height: 4.95rem; width: 100%; overflow: hidden;}
.dentistry-slide{ position: relative; height: 25%; cursor: pointer;}
.dentistry-slide figure{ position: relative; text-align: center; display: block; width: 100%; margin: 0; height: 100%; background: radial-gradient(50% 50% at 50% 50%, #FFF 9.38%, #E6E8EC 100%); border-radius: 0.1rem;}
.dentistry-slide figure img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 80%; max-height:80%;}
.dentistry__btn{ position: absolute; width: 0.38rem; height: 0.38rem; text-align: center; line-height: 0.38rem; border-radius: 50%; box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.25); cursor: pointer; color: #23232B; font-size: 12px; font-weight: bold; transition: 0.4s;}
.dentistry__btn:hover{ background: #00A5B1; color: #fff;}
.dentistry__btn.prev{ left: 50%; margin-left: -0.19rem; top: 0; transform: rotate(90deg);}
.dentistry__btn.next{ left: 50%; margin-left: -0.19rem; bottom: 0; transform: rotate(90deg);}
.dentistry__texts{ text-align: center; width: 100%; position: absolute; display: flex; align-items: center; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; border-radius: 0.1rem; background: rgba(0, 165, 177, 0.83); opacity: 0; visibility: hidden; transition: 0.4s;}
.dentistry-slide.swiper-slide-active .dentistry__texts{ opacity: 1; visibility: visible;}
.dentistry__tes{ width: 100%;}
.dentistry__tes strong{ display: block; margin-bottom: 8px; line-height: 1.1; color: #fff; font-size: 0.18rem;}
.dentistry__tes small{ display: block; line-height: 1; color: #fff; font-size: 0.13rem;}
.c-arm{ padding: 1.15rem 0 0.85rem; background: #F9F9F9;}
.field__info1{ margin: auto; width: 7.3rem; text-align: center;}
.c-arm--swiper{ margin: auto; margin-top: 0.72rem; max-width: 100%; width: 1000px;}
.c-arm__imgs{ margin-bottom: 0.78rem; overflow: hidden;}
.c-arm-slide figure{ display: block; height: 3.82rem; text-align: center;}
.c-arm-slide figure img{ max-height: 100%; max-width: 100%; width: auto; height: auto;}
.c-arm--list{ display: flex; border-top: 2px solid #D9D9D9;}
.c-arm--list li{ position: relative; flex: 1; position: relative; padding-top: 0.16rem; cursor: pointer; text-align: center; color: #333333; font-size: 16px; line-height: 1.5;}
.c-arm--list li:before{ position: absolute; left: 0; top: -2px; content: ""; width: 100%; height: 2px; background: #00A5B1; transform: scaleX(0); transition: 0.5s; visibility: hidden;}
.c-arm--list li.active:before,.c-arm--list li:hover:before{ transform: scaleX(1); visibility: visible;}
.treatment{ padding-top: 1.19rem;}
.treatment__list{ margin-top: 0.6rem; display: flex; padding: 0.56rem 7.5% 0.62rem; background-position: center; background-size: cover; border-radius: 0.1rem; background-repeat: no-repeat;}
.treatment__list li{ flex: 1; text-align: center;}
.treatment__top{ margin-bottom: 0.3rem;}
.treatment__top p{ margin-bottom: 0.28rem; color: #333333; font-size: 16px; line-height: 1.1;}
.treatment__top img{ display: inline-block; width: 1.18rem; height: auto;}
.treatment__imgs img{ display: inline-block; width: 1.79rem; max-width: 100%; height: auto;}
.treatment__imgs p{ margin-top: 0.46rem; color: #333333; font-size: 16px; line-height: 1.1;}
.banner .bg video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

@media screen and (max-width:1024px) {
  .dentistry{ padding: 0.9rem 0 0.4rem; display: block;}
  .dentistry .field__info{ width: auto; padding-top: 0;}
  .field__info strong{ margin-bottom: 0.5rem;}
  .dentistry__tab{ margin-left: 0; width: 100%;}
}
@media screen and (max-width:750px) {
  .applicates{ padding: 1rem 0;}
  .applicates__list li{ padding: 0.6rem 0.4rem; display: block;}
  .applicates__pcba{ padding-right: 0; width: auto;}
  .applicates__numble strong{ font-size: 20px;}
  .applicates__item{ width: 100%;}
  .applicates__fix strong{ font-size: 18px;}
  .applicate__text p{ font-size: 14px;}
  .applicate__text p:before{ width: 8px; height: 8px; top: 10px;}
  .applicates__imgs{ width: auto; display: flex;}
  .applicates__imgs p{ flex: 1; margin-bottom: 0; margin-right: 0.2rem;}
  .applicates__imgs p:last-child{ margin-right: 0;}
  .security__info{ font-size: 14px;}
  .field__text{ font-size: 14px;}
  .dentistry__tab{ display: block;}
  .dentistry__imgs{ padding-top: 0; width: 100%;}
  .dentistry__wrs{ box-sizing: border-box; width: 100%; padding: 0 0.8rem;}
  .dentistry-slide figure{ height: 1.8rem;}
  .dentistry__btn.prev{ left: 0; margin-left: 0; top: 50%; margin-top: -15px;  width: 30px; height: 30px; line-height: 30px; transform: rotate(0);}
  .dentistry__btn.next{ left: auto; right: 0; margin-left: 0; top: 50%; margin-top: -15px;  width: 30px; height: 30px; line-height: 30px; transform: rotate(0);}
  .dentistry__swiper{ height: auto;}
  .dentistry{ padding-bottom: 0.8rem;}
  .dentistry__tes strong{ font-size: 16px;}
  .dentistry__tes small{ font-size: 12px;}
  .c-arm{ padding: 0.78rem 0;}
  .c-arm--list{ display: inline-flex;}
  .c-arm--list li{ flex: none; width: 2.2rem; font-size: 14px;}
  .treatment__hide{ margin-right: -5%; overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch;}
  .treatment__list{ padding: 0.55rem 0;}
  .treatment__top p,.treatment__imgs p{ font-size: 14px;}
}