@charset "UTF-8";
html {
  width: 100%;
  font-size: 625%;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: .16rem;
  width: 100%;
  transition: all .3s;
  overflow: hidden;
}

ul {
  list-style: none;
}

.container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

a {
  color: #000;
  text-decoration: none;
}

img {
  max-width: 100%;
  width: 100%;
}

#home .head, #joinAdvantage .head, #charm .head, #thear .head, #contact .head, #product .head, #product-detail .head, #news .head, #newdetail .head {
  background: #FFFFFF;
  box-shadow: 0rem 0.03rem 0.17rem rgba(0, 0, 0, 0.3);
  padding: 0 .3rem;
  position: relative;
}

#home .head .head-one, #joinAdvantage .head .head-one, #charm .head .head-one, #thear .head .head-one, #contact .head .head-one, #product .head .head-one, #product-detail .head .head-one, #news .head .head-one, #newdetail .head .head-one {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#home .head .head-one .h-o-left, #joinAdvantage .head .head-one .h-o-left, #charm .head .head-one .h-o-left, #thear .head .head-one .h-o-left, #contact .head .head-one .h-o-left, #product .head .head-one .h-o-left, #product-detail .head .head-one .h-o-left, #news .head .head-one .h-o-left, #newdetail .head .head-one .h-o-left {
  font-size: .12rem;
  font-weight: 400;
  color: #999999;
}

#home .head .head-one .h-o-right, #joinAdvantage .head .head-one .h-o-right, #charm .head .head-one .h-o-right, #thear .head .head-one .h-o-right, #contact .head .head-one .h-o-right, #product .head .head-one .h-o-right, #product-detail .head .head-one .h-o-right, #news .head .head-one .h-o-right, #newdetail .head .head-one .h-o-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#home .head .head-one .h-o-right .pull-left .iconfont, #joinAdvantage .head .head-one .h-o-right .pull-left .iconfont, #charm .head .head-one .h-o-right .pull-left .iconfont, #thear .head .head-one .h-o-right .pull-left .iconfont, #contact .head .head-one .h-o-right .pull-left .iconfont, #product .head .head-one .h-o-right .pull-left .iconfont, #product-detail .head .head-one .h-o-right .pull-left .iconfont, #news .head .head-one .h-o-right .pull-left .iconfont, #newdetail .head .head-one .h-o-right .pull-left .iconfont {
  font-size: .2rem;
  color: #1F696A;
}

#home .head .head-one .h-o-right .pull-right, #joinAdvantage .head .head-one .h-o-right .pull-right, #charm .head .head-one .h-o-right .pull-right, #thear .head .head-one .h-o-right .pull-right, #contact .head .head-one .h-o-right .pull-right, #product .head .head-one .h-o-right .pull-right, #product-detail .head .head-one .h-o-right .pull-right, #news .head .head-one .h-o-right .pull-right, #newdetail .head .head-one .h-o-right .pull-right {
  margin-left: .1rem;
}

#home .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #joinAdvantage .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #charm .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #thear .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #contact .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #product .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #product-detail .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #news .head .head-one .h-o-right .pull-right > div:nth-of-type(1), #newdetail .head .head-one .h-o-right .pull-right > div:nth-of-type(1) {
  font-size: .12rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

#home .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #joinAdvantage .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #charm .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #thear .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #contact .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #product .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #product-detail .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #news .head .head-one .h-o-right .pull-right > div:nth-of-type(2), #newdetail .head .head-one .h-o-right .pull-right > div:nth-of-type(2) {
  font-size: .20rem;
  font-family: DIN;
  font-weight: bold;
  color: #1F696A;
}

#home .head .head-two, #joinAdvantage .head .head-two, #charm .head .head-two, #thear .head .head-two, #contact .head .head-two, #product .head .head-two, #product-detail .head .head-two, #news .head .head-two, #newdetail .head .head-two {
  padding-bottom: .11rem;
}

#home .head .head-two > div, #joinAdvantage .head .head-two > div, #charm .head .head-two > div, #thear .head .head-two > div, #contact .head .head-two > div, #product .head .head-two > div, #product-detail .head .head-two > div, #news .head .head-two > div, #newdetail .head .head-two > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 36%;
}

#home .head .head-two > div .onemenu, #joinAdvantage .head .head-two > div .onemenu, #charm .head .head-two > div .onemenu, #thear .head .head-two > div .onemenu, #contact .head .head-two > div .onemenu, #product .head .head-two > div .onemenu, #product-detail .head .head-two > div .onemenu, #news .head .head-two > div .onemenu, #newdetail .head .head-two > div .onemenu {
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
  position: relative;
  width: 100%;
  text-align: center;
}

#home .head .head-two > div .onemenu a, #joinAdvantage .head .head-two > div .onemenu a, #charm .head .head-two > div .onemenu a, #thear .head .head-two > div .onemenu a, #contact .head .head-two > div .onemenu a, #product .head .head-two > div .onemenu a, #product-detail .head .head-two > div .onemenu a, #news .head .head-two > div .onemenu a, #newdetail .head .head-two > div .onemenu a {
  margin: .15rem 0;
  display: block;
}

#home .head .head-two > div .onemenu .twomenu, #joinAdvantage .head .head-two > div .onemenu .twomenu, #charm .head .head-two > div .onemenu .twomenu, #thear .head .head-two > div .onemenu .twomenu, #contact .head .head-two > div .onemenu .twomenu, #product .head .head-two > div .onemenu .twomenu, #product-detail .head .head-two > div .onemenu .twomenu, #news .head .head-two > div .onemenu .twomenu, #newdetail .head .head-two > div .onemenu .twomenu {
  position: absolute;
  font-size: .14rem;
  top: 100%;
  padding-top: .16rem;
  width: 100%;
  background: #fff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 20px);
  -webkit-transition: 0.25s ease-out 0s;
  -o-transition: 0.25s ease-out 0s;
  -moz-transition: 0.25s ease-out 0s;
  transition: 0.25s ease-out 0s;
}

#home .head .head-two > div .onemenu:hover .twomenu, #joinAdvantage .head .head-two > div .onemenu:hover .twomenu, #charm .head .head-two > div .onemenu:hover .twomenu, #thear .head .head-two > div .onemenu:hover .twomenu, #contact .head .head-two > div .onemenu:hover .twomenu, #product .head .head-two > div .onemenu:hover .twomenu, #product-detail .head .head-two > div .onemenu:hover .twomenu, #news .head .head-two > div .onemenu:hover .twomenu, #newdetail .head .head-two > div .onemenu:hover .twomenu {
  display: block;
  opacity: 1;
  -webkit-transform: translate(0, 0px);
  -moz-transform: translate(0, 0px);
  -ms-transform: translate(0, 0px);
  -o-transform: translate(0, 0px);
  transform: translate(0, 0px);
  visibility: visible;
}

#home .head .head-two > div > .current, #joinAdvantage .head .head-two > div > .current, #charm .head .head-two > div > .current, #thear .head .head-two > div > .current, #contact .head .head-two > div > .current, #product .head .head-two > div > .current, #product-detail .head .head-two > div > .current, #news .head .head-two > div > .current, #newdetail .head .head-two > div > .current {
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 600;
}

#home .head .head-two > div > .current > a::after, #joinAdvantage .head .head-two > div > .current > a::after, #charm .head .head-two > div > .current > a::after, #thear .head .head-two > div > .current > a::after, #contact .head .head-two > div > .current > a::after, #product .head .head-two > div > .current > a::after, #product-detail .head .head-two > div > .current > a::after, #news .head .head-two > div > .current > a::after, #newdetail .head .head-two > div > .current > a::after {
  content: '';
  height: .04rem;
  width: 50%;
  position: absolute;
  bottom: -.1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1F696A;
}

#home .head .head-two > div > .current > a, #joinAdvantage .head .head-two > div > .current > a, #charm .head .head-two > div > .current > a, #thear .head .head-two > div > .current > a, #contact .head .head-two > div > .current > a, #product .head .head-two > div > .current > a, #product-detail .head .head-two > div > .current > a, #news .head .head-two > div > .current > a, #newdetail .head .head-two > div > .current > a {
  position: relative;
  color: #1F696A !important;
}

#home .head .head-two::after, #joinAdvantage .head .head-two::after, #charm .head .head-two::after, #thear .head .head-two::after, #contact .head .head-two::after, #product .head .head-two::after, #product-detail .head .head-two::after, #news .head .head-two::after, #newdetail .head .head-two::after {
  content: '';
  display: block;
  clear: both;
}

#home .logo, #joinAdvantage .logo, #charm .logo, #thear .logo, #contact .logo, #product .logo, #product-detail .logo, #news .logo, #newdetail .logo {
  position: absolute;
  top: -.33rem;
  left: 50%;
  transform: translateX(-50%);
  width: 12%;
}

#home .logo img, #joinAdvantage .logo img, #charm .logo img, #thear .logo img, #contact .logo img, #product .logo img, #product-detail .logo img, #news .logo img, #newdetail .logo img {
  width: 100%;
  max-width: 100%;
}

#home .contact, #joinAdvantage .contact, #charm .contact, #thear .contact, #contact .contact, #product .contact, #product-detail .contact, #news .contact, #newdetail .contact {
  background: url("../img/bottombg.png") no-repeat;
  background-size: 100% 125%;
  padding: .52rem 0 2rem;
  background-position-y: center;
  position: relative;
  z-index: 1;
}

#home .contact .contit, #joinAdvantage .contact .contit, #charm .contact .contit, #thear .contact .contit, #contact .contact .contit, #product .contact .contit, #product-detail .contact .contit, #news .contact .contit, #newdetail .contact .contit {
  position: relative;
  z-index: 2;
  height: 1rem;
  display: flex;
  align-items: center;
}

#home .contact .contit div, #joinAdvantage .contact .contit div, #charm .contact .contit div, #thear .contact .contit div, #contact .contact .contit div, #product .contact .contit div, #product-detail .contact .contit div, #news .contact .contit div, #newdetail .contact .contit div {
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #F9D771;
}

#home .contact .contit:before, #joinAdvantage .contact .contit:before, #charm .contact .contit:before, #thear .contact .contit:before, #contact .contact .contit:before, #product .contact .contit:before, #product-detail .contact .contit:before, #news .contact .contit:before, #newdetail .contact .contit:before {
  content: 'CONTACT US';
  position: absolute;
  left: 0;
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 600;
  z-index: -1;
  color: #347778;
}

#home .contact .infobox div, #joinAdvantage .contact .infobox div, #charm .contact .infobox div, #thear .contact .infobox div, #contact .contact .infobox div, #product .contact .infobox div, #product-detail .contact .infobox div, #news .contact .infobox div, #newdetail .contact .infobox div {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  margin: .31rem 0;
}

#home .contact .infobox div > span:nth-of-type(2), #joinAdvantage .contact .infobox div > span:nth-of-type(2), #charm .contact .infobox div > span:nth-of-type(2), #thear .contact .infobox div > span:nth-of-type(2), #contact .contact .infobox div > span:nth-of-type(2), #product .contact .infobox div > span:nth-of-type(2), #product-detail .contact .infobox div > span:nth-of-type(2), #news .contact .infobox div > span:nth-of-type(2), #newdetail .contact .infobox div > span:nth-of-type(2) {
  margin: 0 .11rem;
}

#home .contact .form-control, #joinAdvantage .contact .form-control, #charm .contact .form-control, #thear .contact .form-control, #contact .contact .form-control, #product .contact .form-control, #product-detail .contact .form-control, #news .contact .form-control, #newdetail .contact .form-control {
  border: 1px solid #638687;
  background: transparent;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #86AAAB;
  margin: .2rem auto;
}

#home .contact .subbtn button, #joinAdvantage .contact .subbtn button, #charm .contact .subbtn button, #thear .contact .subbtn button, #contact .contact .subbtn button, #product .contact .subbtn button, #product-detail .contact .subbtn button, #news .contact .subbtn button, #newdetail .contact .subbtn button {
  background: #F9F9F9;
  padding: .12rem .36rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #1F696A;
}

#home .map, #joinAdvantage .map, #charm .map, #thear .map, #contact .map, #product .map, #product-detail .map, #news .map, #newdetail .map {
  margin-top: -5%;
}

#home .foot, #joinAdvantage .foot, #charm .foot, #thear .foot, #contact .foot, #product .foot, #product-detail .foot, #news .foot, #newdetail .foot {
  background: #1B1E23;
  padding: .5rem 0;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
}

#home .bgtit, #joinAdvantage .bgtit, #charm .bgtit, #thear .bgtit, #contact .bgtit, #product .bgtit, #product-detail .bgtit, #news .bgtit, #newdetail .bgtit {
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-top: .84rem;
  height: 1rem;
}

#home .bgtit::before, #joinAdvantage .bgtit::before, #charm .bgtit::before, #thear .bgtit::before, #contact .bgtit::before, #product .bgtit::before, #product-detail .bgtit::before, #news .bgtit::before, #newdetail .bgtit::before {
  content: "JOIN ADVANTAGE";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 600;
  z-index: -1;
  color: #F2F3F5;
}

#home .subtit, #joinAdvantage .subtit, #charm .subtit, #thear .subtit, #contact .subtit, #product .subtit, #product-detail .subtit, #news .subtit, #newdetail .subtit {
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
  text-align: center;
}

#joinAdvantage .header, #charm .header, #thear .header, #contact .header, #product .header, #product-detail .header, #news .header, #newdetail .header {
  position: relative;
  width: 100%;
  height: 100%;
}

#joinAdvantage .banner, #charm .banner, #thear .banner, #contact .banner, #product .banner, #product-detail .banner, #news .banner, #newdetail .banner {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

#joinAdvantage .banner img, #charm .banner img, #thear .banner img, #contact .banner img, #product .banner img, #product-detail .banner img, #news .banner img, #newdetail .banner img {
  max-width: 100%;
  max-height: 100%;
}

#joinAdvantage .tit, #charm .tit, #thear .tit, #contact .tit, #product .tit, #product-detail .tit, #news .tit, #newdetail .tit {
  margin-top: 1.45rem;
  margin-bottom: 1.2rem;
  padding-left: .5rem;
}

#joinAdvantage .tit .name, #charm .tit .name, #thear .tit .name, #contact .tit .name, #product .tit .name, #product-detail .tit .name, #news .tit .name, #newdetail .tit .name {
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  border-bottom: 1px solid #1F696A;
}

#joinAdvantage .tit .subtit, #charm .tit .subtit, #thear .tit .subtit, #contact .tit .subtit, #product .tit .subtit, #product-detail .tit .subtit, #news .tit .subtit, #newdetail .tit .subtit {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #1F696A;
}

#home .header {
  position: relative;
  height: 9.6rem;
}

#home .banner {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

#home .banner .swiper-slide {
  width: 100%;
}

#home .banner .swiper-container {
  width: 100%;
  overflow: hidden;
}

#home .banner img {
  max-width: 100%;
  max-height: 100%;
}

#home .joinAdvantage {
  position: relative;
}

#home .joinAdvantage .greenbox {
  position: absolute;
  left: 0;
  bottom: 0;
  top: -.05rem;
  width: 11.18rem;
  z-index: -1;
  background: #1F696A;
  margin-top: -1.5rem;
}

#home .joinAdvantage .greenbox h2 {
  margin-top: .4rem;
  font-size: 0.63rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #347778;
}

#home .joinAdvantage .card {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  color: #fff;
  height: 100%;
}

#home .joinAdvantage .card h2 {
  color: #fff;
  margin-right: 1.18rem;
  margin-top: 0;
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
}

#home .joinAdvantage .card .carditem {
  color: #000;
  width: 2.94rem;
  height: 1.83rem;
  background: #FFFFFF;
  box-shadow: 0rem 0.03rem 0.06rem rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 .51rem 0 .3rem;
  margin-right: .2rem;
  margin-bottom: .5rem;
}

#home .joinAdvantage .card .carditem .tit {
  margin-bottom: .24rem;
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #010101;
  position: relative;
}

#home .joinAdvantage .card .carditem .tit::after {
  content: "";
  background: #1F696A;
  position: absolute;
  width: .43rem;
  height: .02rem;
  bottom: -.18rem;
  left: 50%;
  transform: translateX(-50%);
}

#home .joinAdvantage .card .carditem .desc {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  text-align: center;
  color: #666666;
}

#home .recommend {
  background: url("../img/maskbg.png") no-repeat;
  background-size: cover;
  padding: .6rem 0;
  display: flex;
  justify-content: space-between;
}

#home .recommend > div {
  display: flex;
  justify-content: center;
  padding-right: 0;
}

#home .recommend > div .reco-left:nth-of-type(2) {
  margin-left: .8rem;
}

#home .recommend .pull-left {
  display: flex;
}

#home .recommend .pull-left .icon {
  width: 1.1rem;
  margin-right: .1rem;
}

#home .recommend .pull-left .desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .1rem 0;
}

#home .recommend .pull-left .tit {
  font-size: 0.27rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}

#home .recommend .pull-left .gray {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #CCCCCC;
}

#home .recommend .pull-left .Appraise {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#home .recommend .pull-left .Appraise .star {
  color: #FFC300;
  margin: 0 .08rem;
}

#home .recommend .pull-left .Appraise .star .iconfont {
  font-size: .16rem;
}

#home .recommend .pull-right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.1rem;
}

#home .recommend .pull-right .showbtn {
  width: 1.4rem;
  height: .4rem;
  border-radius: 0.2rem;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home .recommend .pull-right .showbtn a {
  color: #fff;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
}

#home .support {
  background: url("../img/bg.png") no-repeat;
  background-size: 100%;
  position: relative;
}

#home .support .suppbox {
  margin-bottom: 2.07rem;
  display: flex;
  margin-top: .88rem;
  justify-content: center;
}

#home .support .suppbox .suppitem {
  position: relative;
  transition: all .3s;
  width: 2.4rem;
  height: 3.76rem;
  margin-left: -.03rem;
}

#home .support .suppbox .suppitem .top {
  position: absolute;
  top: -10%;
  bottom: 85%;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/top.png") no-repeat;
  background-size: 100% 100%;
  width: 36%;
  padding: 0.23rem .27rem .38rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.36rem;
  font-family: DIN;
  font-weight: bold;
  color: #FFFFFF;
}

#home .support .suppbox .suppitem .bottom {
  background: url("../img/bottom.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#home .support .suppbox .suppitem .bottom .suptit {
  margin-bottom: .48rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}

#home .support .suppbox .suppitem .bottom .supdesc {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}

#home .support .suppbox .suppitem .bottom .supdesc span {
  font-size: 0.16rem;
  display: block;
  text-align: center;
  margin: .15rem 0;
}

#home .support .suppbox .suppitem:hover .top {
  background: url("../img/top_current.png") no-repeat;
  background-size: 100% 100%;
}

#home .support .suppbox .suppitem:hover .bottom {
  background: url("../img/bottom_current.png") no-repeat;
  background-size: 100% 100%;
}

#home .support .line {
  background: url("../img/linebg.png") no-repeat;
  background-size: cover;
  height: 1.12rem;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
}

#home .support .line .nowbtn {
  background: #F9D771;
  border-radius: 0.2rem;
  padding: .07rem .34rem;
}

#home .support .line .nowbtn a {
  color: #fff;
}

#home .support .line .fw {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.34rem;
}

#home .support .line .fw .fw-left .iconfont {
  color: #F9D771;
  font-size: .3rem;
}

#home .support .line .fw .fw-right {
  margin-left: .21rem;
}

#home .support .line .fw .fw-right > div:nth-of-type(1) {
  font-size: 0.17rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #CECECE;
}

#home .support .line .fw .fw-right > div:nth-of-type(2) {
  font-size: 0.31rem;
  font-family: DIN;
  font-weight: bold;
  color: #F9D771;
}

#home .join {
  background: url("../img/bg02.png") no-repeat;
  height: 9rem;
  background-size: contain;
  position: relative;
}

#home .join .slidebox {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
}

#home .join .slidebox .slideitem:nth-of-type(odd) .text {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#home .join .slidebox .slideitem:nth-of-type(even) .text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#home .join .slidebox .slideitem .line {
  width: 100%;
  height: .02rem;
  background: #CCCCCC;
  position: relative;
  margin: .28rem 0 .3rem;
}

#home .join .slidebox .slideitem .line::after {
  content: '.';
  width: 0.25rem;
  height: 0.25rem;
  background: #999999;
  border-radius: 50%;
  position: absolute;
  opacity: .3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#home .join .slidebox .slideitem .line::before {
  content: '.';
  width: 0.15rem;
  height: 0.15rem;
  background: #999999;
  border-radius: 50%;
  position: absolute;
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#home .join .slidebox .slideitem .text {
  height: 2.2rem;
  font-size: 0.22rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
}

#home .join .slidebox .slideitem .img {
  width: 2.6rem;
  height: 2.2rem;
  margin-left: .3rem;
}

#home .join .slidebox .slideitem .img img {
  width: 100%;
  height: 100%;
}

#home .join .slidebtn {
  position: absolute;
  bottom: 0;
  margin-top: .61rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#home .join .slidebtn > button {
  padding: .16rem .31rem;
  background: #000000;
  color: #fff;
  outline: 0;
  border: 0;
}

#home .join .slidebtn > .current {
  background: #1F696A;
}

#home .xm .xmitem:nth-of-type(odd) {
  margin-right: 1.89rem;
}

#home .xm .xmitem {
  background: #FFFFFF;
  box-shadow: 0rem 0.03rem 0.1rem rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 .2rem;
  margin-bottom: .69rem;
  position: relative;
  margin-top: .3rem;
}

#home .xm .xmitem .xmitem-left {
  margin-top: .6rem;
  margin-bottom: .4rem;
  width: max-content;
  justify-self: flex-start;
}

#home .xm .xmitem .xmitem-left .xmtit {
  font-size: 0.34rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
  margin-bottom: .3rem;
}

#home .xm .xmitem .xmitem-left .xmdesc {
  display: flex;
  flex-wrap: wrap;
  width: 85%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

#home .xm .xmitem .xmitem-left .xmdesc span {
  width: 50%;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

#home .xm .xmitem .xmitem-right {
  position: absolute;
  left: 90%;
  width: 2.7rem;
}

#home .xm .xmitem .showdetail {
  position: absolute;
  padding: .1rem .32rem;
  background: #1F696A;
  top: 95%;
}

#home .xm .xmitem .showdetail a {
  color: #fff;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
}

#home .thear {
  margin-top: .8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#home .thear .thearitem {
  /* width: 100%; */
      width: 384px;
    height: 228px;
}

#home .thear .thearitem h2 {
  text-align: center;
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  margin-top: 0;
}

#home .thear .thearitem .subtit {
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
  margin-top: .04rem;
}

#home .map {
  margin-top: -5%;
}

#home .foot {
  background: #1B1E23;
  height: .86rem;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}

#home .bgtit {
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-top: .84rem;
  height: 1rem;
}

#home .bgtit::before {
  content: "JOIN ADVANTAGE";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 600;
  z-index: -1;
  color: #F2F3F5;
}

#home .subtit {
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
  text-align: center;
}

#joinAdvantage .changebtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .4rem;
  margin-bottom: .4rem;
}

#joinAdvantage .changebtns div.current {
  background: #1F696A;
  color: #fff;
}

#joinAdvantage .changebtns div {
  border-radius: .24rem;
  padding: .1rem .5rem;
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  border: .01rem solid #1F696A;
  box-shadow: 0rem 0.03rem 0.06rem rgba(0, 0, 0, 0.16);
}

#joinAdvantage .changebtns div:hover {
  background: #1F696A;
  color: #fff;
}

#joinAdvantage .showbox > .current {
  display: flex;
}

#joinAdvantage .showbox > div:nth-of-type(3).current {
  display: block;
}

#joinAdvantage .showbox > div {
  display: none;
}

#joinAdvantage .advantagebox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#joinAdvantage .advantagebox .advantageitem {
  background: #FFFFFF;
  box-shadow: 0rem 0.03rem 0.06rem rgba(0, 0, 0, 0.16);
  padding: .17rem .3rem .15rem;
  width: 48%;
  margin-bottom: .23rem;
}

#joinAdvantage .advantagebox .advantit {
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #010101;
  position: relative;
}

#joinAdvantage .advantagebox .advantit::after {
  content: '';
  background: #1F696A;
  height: .02rem;
  width: .43rem;
  position: absolute;
  bottom: -.12rem;
  left: 0;
}

#joinAdvantage .advantagebox .advansubtit {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-top: .24rem;
}

#joinAdvantage .supportbox {
  flex-wrap: wrap;
  transition: all .3s;
  justify-content: space-between;
}

#joinAdvantage .supportbox .supportitem {
  background: url("../img/left.png") no-repeat;
  background-size: contain;
  width: 48%;
  display: flex;
  align-items: center;
  height: 2.4rem;
  margin-bottom: .3rem;
}

#joinAdvantage .supportbox .supportitem:hover {
  background: url("../img/left_current.png") no-repeat;
  background-size: contain;
}

#joinAdvantage .supportbox .supportitem:hover .left {
  background: url("../img/top_current.png") no-repeat;
  background-size: contain;
}

#joinAdvantage .supportbox .left {
  background: url("../img/top.png") no-repeat;
  background-size: contain;
  width: .94rem;
  height: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.36rem;
  font-family: DIN;
  font-weight: bold;
  color: #FFFFFF;
  margin: 0 .5rem 0 .6rem;
}

#joinAdvantage .supportbox .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#joinAdvantage .supportbox .right .suptit {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}

#joinAdvantage .supportbox .right .supdesc {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}

#joinAdvantage .supportbox .right .supdesc span {
  display: block;
  text-align: left;
  margin: .15rem 0;
}

#joinAdvantage .processbox {
  background: url("../img/bg02.png") no-repeat;
  height: 7rem;
  background-size: contain;
  position: relative;
}

#joinAdvantage .processbox .slidebox {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
}

#joinAdvantage .processbox .slidebox .slideitem:nth-of-type(odd) .text {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#joinAdvantage .processbox .slidebox .slideitem:nth-of-type(even) .text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#joinAdvantage .processbox .slidebox .slideitem .line {
  width: 100%;
  height: .02rem;
  background: #CCCCCC;
  position: relative;
  margin: .28rem 0 .3rem;
}

#joinAdvantage .processbox .slidebox .slideitem .line::after {
  content: '.';
  width: 0.25rem;
  height: 0.25rem;
  background: #999999;
  border-radius: 50%;
  position: absolute;
  opacity: .3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#joinAdvantage .processbox .slidebox .slideitem .line::before {
  content: '.';
  width: 0.15rem;
  height: 0.15rem;
  background: #999999;
  border-radius: 50%;
  position: absolute;
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#joinAdvantage .processbox .slidebox .slideitem .text {
  height: 2.2rem;
  font-size: 0.22rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
}

#joinAdvantage .processbox .slidebox .slideitem .img {
  width: 2.6rem;
  height: 2.2rem;
  margin-left: .3rem;
}

#joinAdvantage .processbox .slidebtn {
  position: absolute;
  bottom: 0;
  margin-top: .61rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#joinAdvantage .processbox .slidebtn > button {
  padding: .16rem .31rem;
  background: #000000;
  color: #fff;
  outline: 0;
  border: 0;
}

#joinAdvantage .processbox .slidebtn > .current {
  background: #1F696A;
}

#joinAdvantage .contact {
  margin-top: .8rem;
}

#charm .changebtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .4rem;
  margin-bottom: .4rem;
}

#charm .changebtns div.current {
  background: #1F696A;
  color: #fff;
}

#charm .changebtns div {
  border-radius: .24rem;
  padding: .1rem .5rem;
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  border: .01rem solid #1F696A;
  box-shadow: 0rem 0.03rem 0.06rem rgba(0, 0, 0, 0.16);
}

#charm .changebtns div:hover {
  background: #1F696A;
  color: #fff;
}

#charm .showbox > .current {
  display: block;
}

#charm .showbox > div:nth-of-type(3).current {
  display: block;
}

#charm .showbox > div {
  display: none;
}

#charm .showbox .companybox > div {
  margin-bottom: .94rem;
}

#charm .showbox .companybox > div::after {
  content: '';
  display: block;
  clear: both;
}

#charm .showbox .companybox > div .right {
  position: relative;
}

#charm .showbox .companybox > div .right::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -.55rem;
  left: -.6rem;
  width: 1.13rem;
  height: 1.13rem;
  z-index: -1;
  background: url("../img/cir.png") no-repeat;
  background-size: contain;
}

#charm .showbox .companybox > div .entercon .right::after {
  right: -.6rem;
  left: auto;
}

#charm .comtit {
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  position: relative;
  margin: .23rem 0;
}

#charm .comtit::before {
  content: 'JOIN ADVANTAGE';
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #F2F3F5;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

#charm .comcon {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#charm .comcon > div {
  width: 48%;
}

#charm .comcon .pull-left {
  order: 1;
}

#charm .comcon .pull-right {
  order: 2;
}

#charm .comcon .left {
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

#charm .entertit {
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  position: relative;
  margin: .23rem 0;
  text-align: center;
}

#charm .entertit::before {
  content: 'JOIN ADVANTAGE';
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 600;
  width: 80%;
  color: #F2F3F5;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

#charm .entercon {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#charm .entercon .pull-left {
  order: 1;
}

#charm .entercon .pull-right {
  order: 2;
}

#charm .entercon > div {
  width: 46%;
}

#charm .entercon .left {
  font-size: 0.17rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
}

#charm .brandbox .branditem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.36rem auto;
}

#charm .brandbox .branditem .pull-left {
  order: 1;
}

#charm .brandbox .branditem .pull-right {
  order: 2;
}

#charm .brandbox .branditem > div {
  width: 48%;
}

#charm .coursebox {
  position: relative;
}

#charm .coursebox > .line {
  width: .02rem;
  height: 100%;
  background: #CCCCCC;
  position: absolute;
  margin: 0 .2rem 0;
  left: 1.7rem;
}

#charm .courseitem {
  display: flex;
  margin: .2rem 0;
}

#charm .courseitem .left {
  background: url("../img/air2.png") no-repeat;
  background-size: contain;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
  width: 1.2rem;
  height: .48rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#charm .courseitem .left::after {
  content: '';
  width: 0.25rem;
  height: 0.25rem;
  background: #999999;
  border-radius: 50%;
  position: absolute;
  opacity: .3;
  top: .15rem;
  right: -54%;
}

#charm .courseitem .left::before {
  content: '';
  width: 0.15rem;
  height: 0.15rem;
  background: #999999;
  border-radius: 50%;
  position: absolute;
  opacity: 1;
  top: .2rem;
  right: -50%;
}

#charm .courseitem .right {
  width: 70%;
  margin-top: .15rem;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
  margin-left: 1rem;
}

#charm .courseitem.current .left {
  background: url("../img/air1.png") no-repeat;
  background-size: contain;
  color: #fff;
}

#charm .courseitem.current .left::after {
  content: '';
  background: #1F696A;
}

#charm .courseitem.current .left::before {
  content: '';
  background: #1F696A;
}

#thear {
  margin-bottom: 1rem;
}

#thear .video {
  margin-top: .6rem;
  margin-bottom: .66rem;
}

#thear .thear {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#thear .thear .thearitem {
  width: 32%;
  margin: 0 .05rem .24rem;
}

#contact .contactcard {
  position: relative;
  z-index: 1;
}

#contact .contactcard > div {
  justify-content: space-between;
  margin-top: .5rem;
  display: flex;
  background: #FFFFFF;
  box-shadow: 0rem 0.03rem 0.1rem rgba(0, 0, 0, 0.1);
  padding: .4rem 1.36rem .67rem .65rem;
}

#contact .contactcard > div .right {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
}

#contact .contactcard > div .right .tip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .3rem;
}

#contact .contactcard > div .right span {
  color: #19D100;
  font-size: .28rem;
  margin-right: .03rem;
}

#contact .contactcard > div .right img {
  width: auto;
  max-width: 100%;
}

#contact .contactcard > div .contit {
  font-size: 0.34rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
  margin-bottom: .27rem;
}

#contact .contactcard > div .concon {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #1F696A;
}

#contact .contactcard > div .concon div {
  margin-top: .25rem;
}

#contact .contactcard > div .concon div span:nth-of-type(2) {
  margin: 0 .1rem 0 .11rem;
}

#contact .contactcard > div .concon div span:nth-of-type(3) {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
}

#product .xm .xmitem:nth-of-type(odd) {
  margin-right: 1.89rem;
}

#product .xm .xmbtit {
  font-size: 0.29rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
  margin-top: .55rem;
  margin-bottom: .47rem;
  text-align: center;
}

#product .xm .xmitem {
  background: #FFFFFF;
  box-shadow: 0rem 0.03rem 0.1rem rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 .2rem;
  margin-bottom: .69rem;
  position: relative;
  margin-top: .3rem;
  position: relative;
}

#product .xm .xmitem .xmitem-left {
  margin-top: .6rem;
  margin-bottom: .4rem;
  width: max-content;
  justify-self: flex-start;
}

#product .xm .xmitem .xmitem-left .xmtit {
  font-size: 0.34rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
  margin-bottom: .3rem;
}

#product .xm .xmitem .xmitem-left .xmdesc {
  display: flex;
  flex-wrap: wrap;
  width: 85%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

#product .xm .xmitem .xmitem-left .xmdesc span {
  width: 50%;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

#product .xm .xmitem .xmitem-right {
  position: absolute;
  left: 90%;
  width: 2.7rem;
}

#product .xm .xmitem .showdetail {
  position: absolute;
  padding: .1rem .32rem;
  background: #1F696A;
  top: 95%;
}

#product .xm .xmitem .showdetail a {
  color: #fff;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
}

#product .gd {
  margin-top: 1.08rem;
  margin-bottom: 1.06rem;
}

#product .gd > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#product .gd > div .gdtit {
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1F696A;
}

#product .gd > div .gdcon {
  margin-top: .44rem;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

#product .recommend {
  background: url("../img/maskbg.png") no-repeat;
  background-size: cover;
  padding: .6rem 0;
  height: 3.3rem;
}

#product .recommend .pull-left {
  display: flex;
}

#product .recommend .pull-left .icon {
  margin-right: .1rem;
  width: 1.1rem;
}

#product .recommend .pull-left .desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .1rem 0;
}

#product .recommend .pull-left .apptit {
  font-size: 0.27rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}

#product .recommend .pull-left .gray {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #CCCCCC;
}

#product .recommend .pull-left .Appraise {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#product .recommend .pull-left .Appraise .star {
  color: #FFC300;
  margin: 0 .08rem;
}

#product .recommend .pull-right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.1rem;
}

#product .recommend .pull-right .showbtn {
  width: 1.4rem;
  height: .4rem;
  border-radius: 0.2rem;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#product .recommend .pull-right .showbtn a {
  color: #fff;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
}

#product .recommend .img {
  width: 80%;
  margin: 0 auto;
  font-size: 0.22rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #666666;
  text-align: center;
}

#product .recommend .red {
  color: #F20000;
}

#product .recommend .green {
  color: #1F696A;
}

#product .contact {
  margin-top: 1rem;
}

#product-detail .bread {
  margin-top: .2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

#product-detail .bread span:nth-of-type(2) {
  margin: 0 .09rem;
}

#product-detail .bread .current {
  color: #1F696A;
}

#product-detail .tab > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#product-detail .tab > div .tabtit {
  font-size: 0.34rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
}

#product-detail .tab > div .tabdesc {
  margin-top: .3rem;
  font-size: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#product-detail .tab > div .tabdesc span {
  width: 50%;
  margin-top: .1rem;
}

#product-detail .zs .zstit {
  font-size: 0.4rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
  text-align: center;
  margin: .62rem 0 .4rem;
}

#product-detail .zs .mar {
  margin: .7rem 0;
}

#product-detail .zs .bor {
  border: .01rem dashed #ccc;
}

#product-detail .zs .al {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;
  height: 16rem;
}

#product-detail .zs .al div {
  margin-bottom: .2rem;
}

#news .newsbox {
  display: flex;
  justify-content: space-between;
  margin-top: .4rem;
  flex-wrap: wrap;
}

#news .newsbox > div {
  width: 45%;
  margin-top: .71rem;
  transition: color 3s;
  -moz-transition: color 3s;
  /* Firefox 4 */
  -webkit-transition: color 3s;
  /* Safari 和 Chrome */
  -o-transition: color 3s;
  /* Opera */
}

#news .newsbox > div .newtit {
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 600;
  margin: .2rem 0;
  color: #282828;
  transition: color .3s;
  -moz-transition: color .3s;
  /* Firefox 4 */
  -webkit-transition: color .3s;
  /* Safari 和 Chrome */
  -o-transition: color .3s;
  /* Opera */
}

#news .newsbox > div .newdesc {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  opacity: .8;
}

#news .newsbox > div .newbottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#news .newsbox > div .newbottom .newleft {
  font-size: 0.4rem;
  font-family: DIN;
  font-weight: bold;
  color: #DDDDDD;
  transition: all .3s;
  -moz-transition: all .3s;
  /* Firefox 4 */
  -webkit-transition: all .3s;
  /* Safari 和 Chrome */
  -o-transition: all .3s;
  /* Opera */
}

#news .newsbox > div .newbottom .newright {
  display: none;
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #1F696A;
}

#news .newsbox > div .newbottom .newright a {
  color: #1F696A;
}

#news .newsbox > div:hover a {
  text-decoration: none;
}

#news .newsbox > div:hover .newtit {
  color: #1F696A;
}

#news .newsbox > div:hover .newleft {
  color: #1F696A;
}

#news .newsbox > div:hover .newright {
  display: block;
}

#news .paging {
  margin-top: .71rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

#news .paging > span {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  opacity: 0.8;
  margin: 0 .2rem;
}

#news .paging > div span {
  padding: .08rem .1rem;
  background: #999999;
  border-radius: 0.04rem;
  color: #fff;
}

#news .paging > div .current {
  background: #1F696A;
}

#newdetail .bread {
  margin-top: .2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

#newdetail .bread span:nth-of-type(2) {
  margin: 0 .09rem;
}

#newdetail .bread .current {
  color: #1F696A;
}

#newdetail .newdetailtit {
  font-size: 0.3rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
  margin: .4rem 0 .1rem;
  text-align: center;
}

#newdetail .time {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  opacity: 0.8;
  text-align: center;
}

#newdetail p {
  margin-top: .4rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #282828;
  opacity: 0.8;
}

#newdetail img {
  width: 100%;
}

#newdetail .detail {
  border-bottom: .02rem dotted  #1F696A;
  margin-bottom: .42rem;
}

#newdetail .more {
  margin-bottom: 1rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #282828;
}

#newdetail .more a {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 600;
}

#newdetail .more a:hover {
  color: #1F696A;
}

@media screen and (max-width: 992px) {
  #home .head, #joinAdvantage .head, #charm .head, #thear .head, #contact .head, #product .head, #product-detail .head, #news .head, #newdetail .head {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  #home .head .head-one, #joinAdvantage .head .head-one, #charm .head .head-one, #thear .head .head-one, #contact .head .head-one, #product .head .head-one, #product-detail .head .head-one, #news .head .head-one, #newdetail .head .head-one {
    display: none;
  }
  #home .head .head-two, #joinAdvantage .head .head-two, #charm .head .head-two, #thear .head .head-two, #contact .head .head-two, #product .head .head-two, #product-detail .head .head-two, #news .head .head-two, #newdetail .head .head-two {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #home .head .head-two > div, #joinAdvantage .head .head-two > div, #charm .head .head-two > div, #thear .head .head-two > div, #contact .head .head-two > div, #product .head .head-two > div, #product-detail .head .head-two > div, #news .head .head-two > div, #newdetail .head .head-two > div {
    width: 100%;
    flex-direction: column;
  }
  #home .head .head-two > div .onemenu .twomenu, #joinAdvantage .head .head-two > div .onemenu .twomenu, #charm .head .head-two > div .onemenu .twomenu, #thear .head .head-two > div .onemenu .twomenu, #contact .head .head-two > div .onemenu .twomenu, #product .head .head-two > div .onemenu .twomenu, #product-detail .head .head-two > div .onemenu .twomenu, #news .head .head-two > div .onemenu .twomenu, #newdetail .head .head-two > div .onemenu .twomenu {
    top: 0;
    padding-top: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    position: relative;
    display: block;
    opacity: 1;
    visibility: visible;
  }
  #home .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #joinAdvantage .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #charm .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #thear .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #contact .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #product .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #product-detail .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #news .head .head-two > div .onemenu:not(.nohover):hover .twomenu, #newdetail .head .head-two > div .onemenu:not(.nohover):hover .twomenu {
    display: block;
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px);
    visibility: visible;
  }
  #home .head .head-two > div div, #joinAdvantage .head .head-two > div div, #charm .head .head-two > div div, #thear .head .head-two > div div, #contact .head .head-two > div div, #product .head .head-two > div div, #product-detail .head .head-two > div div, #news .head .head-two > div div, #newdetail .head .head-two > div div {
    text-align: center;
  }
  #home .head .head-two > div div a, #joinAdvantage .head .head-two > div div a, #charm .head .head-two > div div a, #thear .head .head-two > div div a, #contact .head .head-two > div div a, #product .head .head-two > div div a, #product-detail .head .head-two > div div a, #news .head .head-two > div div a, #newdetail .head .head-two > div div a {
    margin: .5rem auto .3rem;
  }
  #home .head .head-two .guan, #joinAdvantage .head .head-two .guan, #charm .head .head-two .guan, #thear .head .head-two .guan, #contact .head .head-two .guan, #product .head .head-two .guan, #product-detail .head .head-two .guan, #news .head .head-two .guan, #newdetail .head .head-two .guan {
    position: absolute;
    right: .12rem;
    top: .1rem;
    font-size: .5rem;
    cursor: pointer;
  }
  #home .header .logo, #joinAdvantage .header .logo, #charm .header .logo, #thear .header .logo, #contact .header .logo, #product .header .logo, #product-detail .header .logo, #news .header .logo, #newdetail .header .logo {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 15%;
    z-index: 9;
  }
  #home .header .startbg, #joinAdvantage .header .startbg, #charm .header .startbg, #thear .header .startbg, #contact .header .startbg, #product .header .startbg, #product-detail .header .startbg, #news .header .startbg, #newdetail .header .startbg {
    position: fixed;
    background: #fff;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: 95%;
    top: 0;
  }
  #home .header .startbg .start, #joinAdvantage .header .startbg .start, #charm .header .startbg .start, #thear .header .startbg .start, #contact .header .startbg .start, #product .header .startbg .start, #product-detail .header .startbg .start, #news .header .startbg .start, #newdetail .header .startbg .start {
    position: absolute;
    right: .05rem;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    z-index: 11;
  }
  #home .joinAdvantage .greenbox {
    display: none;
  }
  #home .joinAdvantage .card {
    justify-content: space-between;
    height: auto;
  }
  #home .joinAdvantage .card h2 {
    display: none;
  }
  #home .joinAdvantage .card .carditem {
    width: 48%;
    padding: .54rem .5rem .5rem .45rem;
    height: auto;
  }
  #home .joinAdvantage .card .carditem .homeicon {
    width: 50%;
    margin: 0 auto .8rem;
  }
  #home .joinAdvantage .card .carditem .desc {
    color: #a5a5a5;
  }
  #joinAdvantage .advantagebox .advantageitem {
    width: 80%;
    text-align: center;
    margin: .44rem auto;
  }
  #joinAdvantage .advantagebox .advantageitem .advantit::after {
    left: 50%;
    transform: translateX(-50%);
  }
  #joinAdvantage .supportbox .supportitem {
    width: 80%;
    text-align: center;
    margin: .44rem auto;
  }
  #charm .coursebox .line {
    display: none;
  }
  #charm .courseitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #charm .courseitem .left {
    flex: 1;
    background-size: 100% 100%;
  }
  #charm .courseitem .right {
    width: 80%;
  }
  #charm .courseitem .left::after {
    opacity: 0;
  }
  #charm .courseitem .left::before {
    opacity: 0;
  }
  #charm .courseitem.current .left {
    flex: 1;
    background-size: 100% 100%;
  }
}

@media screen and (max-width: 768px) {
  #home .header .head-two .onemenu a, #joinAdvantage .header .head-two .onemenu a, #charm .header .head-two .onemenu a, #thear .header .head-two .onemenu a, #contact .header .head-two .onemenu a, #product .header .head-two .onemenu a, #product-detail .header .head-two .onemenu a, #news .header .head-two .onemenu a, #newdetail .header .head-two .onemenu a {
    font-size: .3rem;
  }
  #home .header .head-two .onemenu .twomenu, #joinAdvantage .header .head-two .onemenu .twomenu, #charm .header .head-two .onemenu .twomenu, #thear .header .head-two .onemenu .twomenu, #contact .header .head-two .onemenu .twomenu, #product .header .head-two .onemenu .twomenu, #product-detail .header .head-two .onemenu .twomenu, #news .header .head-two .onemenu .twomenu, #newdetail .header .head-two .onemenu .twomenu {
    font-size: .2rem;
  }
  #home .header .logo, #joinAdvantage .header .logo, #charm .header .logo, #thear .header .logo, #contact .header .logo, #product .header .logo, #product-detail .header .logo, #news .header .logo, #newdetail .header .logo {
    width: 21%;
  }
  #home .header .start .iconfont, #joinAdvantage .header .start .iconfont, #charm .header .start .iconfont, #thear .header .start .iconfont, #contact .header .start .iconfont, #product .header .start .iconfont, #product-detail .header .start .iconfont, #news .header .start .iconfont, #newdetail .header .start .iconfont {
    font-size: .4rem;
  }
  #home .contact > div, #joinAdvantage .contact > div, #charm .contact > div, #thear .contact > div, #contact .contact > div, #product .contact > div, #product-detail .contact > div, #news .contact > div, #newdetail .contact > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #joinAdvantage .header .banner img, #charm .header .banner img, #thear .header .banner img, #contact .header .banner img, #product .header .banner img, #product-detail .header .banner img, #news .header .banner img, #newdetail .header .banner img {
    height: -webkit-fill-available;
  }
  #joinAdvantage .contact > div, #charm .contact > div, #thear .contact > div, #contact .contact > div, #product .contact > div, #product-detail .contact > div, #news .contact > div, #newdetail .contact > div {
    display: flex;
    align-items: center;
  }
  #joinAdvantage .bgtit, #charm .bgtit, #thear .bgtit, #contact .bgtit, #product .bgtit, #product-detail .bgtit, #news .bgtit, #newdetail .bgtit {
    font-size: 0.8rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #1F696A;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-top: .84rem;
    height: 1.6rem;
  }
  #joinAdvantage .bgtit::before, #charm .bgtit::before, #thear .bgtit::before, #contact .bgtit::before, #product .bgtit::before, #product-detail .bgtit::before, #news .bgtit::before, #newdetail .bgtit::before {
    content: "JOIN ADVANTAGE";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
    font-size: 0.73rem;
    font-family: PingFang SC;
    font-weight: 600;
    z-index: -1;
    color: #F2F3F5;
  }
  #joinAdvantage .subtit, #charm .subtit, #thear .subtit, #contact .subtit, #product .subtit, #product-detail .subtit, #news .subtit, #newdetail .subtit {
    font-size: 0.3rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #282828;
    text-align: center;
  }
  #home .header {
    height: 4rem;
  }
  #home .joinAdvantage .card .carditem {
    margin-right: 0;
  }
  #home .recommend > div {
    flex-direction: column;
  }
  #home .recommend > div .reco-left:nth-of-type(2) {
    margin-left: 0;
  }
  #home .support .suppbox {
    padding: 0;
    flex-wrap: wrap;
  }
  #home .support .suppbox .suppitem {
    width: 33%;
    height: auto;
  }
  #home .support .suppbox .suppitem .bottom {
    padding: 1.1rem .4rem .9rem;
  }
  #home .support .line {
    display: none;
  }
  #home .xm .xmitem .xmitem-right {
    width: 2rem;
  }
  #home .thear .thearitem {
    /* width: 100% !important; */
  }
  #home .thear .thearitem img {
    width: 100%;
  }
  #charm .companybox > div {
    width: 80%;
    margin: .94rem auto;
  }
  #charm .companybox > div .comcon {
    flex-direction: column;
  }
  #charm .companybox > div .comcon > div:nth-of-type(1) {
    margin-bottom: .2rem;
  }
  #charm .companybox > div .comcon > div {
    width: 100%;
  }
  #charm .companybox > div .comcon .right::after {
    content: '';
    background: 0;
  }
  #charm .enterbox {
    width: 80%;
    margin: .94rem auto;
  }
  #charm .enterbox .entercon {
    display: flex;
    flex-direction: column;
  }
  #charm .enterbox .entercon > div:nth-of-type(2) {
    margin-bottom: .2rem;
  }
  #charm .enterbox .entercon > div {
    width: 100%;
  }
  #charm .enterbox .entercon .right::after {
    content: '';
    background: 0 !important;
  }
  #charm .brandbox .branditem {
    width: 80%;
    margin: .94rem auto;
    flex-direction: column;
  }
  #charm .brandbox .branditem > div {
    width: 100%;
  }
  #charm .brandbox .branditem .pull-right {
    margin-top: .2rem;
  }
  #charm .courseitem {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #charm .courseitem .left {
    flex: 1;
  }
  #charm .courseitem .right {
    width: 60%;
  }
  #thear .thear .thearitem {
    width: 48%;
  }
  #news .newsbox .newitem {
    width: 100%;
    text-align: center;
  }
  #news .paging {
    justify-content: center;
  }
  #contact .contactcard > div {
    display: block;
  }
  #contact .contactcard > div .left, #contact .contactcard > div .right {
    text-align: center;
  }
  #contact .contactcard > div .right {
    margin-top: 1rem;
  }
  #product .xm .xmitem .xmitem-right {
    width: 2rem;
  }
  #product .recommend > div {
    padding: 0;
  }
  #product .recommend .pull-left .desc {
    width: max-content;
  }
  #product .recommend .pull-left .apptit {
    font-size: 0.2rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
  }
  #product .recommend .pull-left .gray {
    font-size: 0.1rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #CCCCCC;
  }
  #product .recommend .pull-left .Appraise {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #product .recommend .pull-left .Appraise .star {
    color: #FFC300;
    margin: 0 .08rem;
  }
  #product .recommend .pull-left .Appraise .star .iconfont {
    font-size: .1rem;
  }
  #product .recommend .pull-right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.1rem;
  }
  #product .recommend .pull-right .showbtn {
    width: 1.4rem;
    height: .4rem;
    border-radius: 0.2rem;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #product .recommend .pull-right .showbtn a {
    color: #fff;
    font-size: 0.15rem;
    font-family: PingFang SC;
    font-weight: 400;
  }
  #product .gd > div {
    flex-direction: column;
  }
  #product .gd > div > div {
    width: 100%;
    margin: .2rem 0;
  }
  #product-detail .tab {
    margin-top: .2rem;
  }
  #product-detail .tab .left {
    flex: 1;
  }
  #product-detail .tab .right {
    width: 50%;
  }
  #product-detail .zs .al {
    height: auto;
  }
}