html,body,div,p,ul,li,a,span,img,h1,h2,i,input,textarea {
  margin: 0;
  padding: 0;
}

input, textarea {
  border-radius: 0;
  -webkit-appearance: none;
}

body {
  /* display: none; */
  opacity: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: "Myriad Pro";
  background: #fff;
}

ul, li {
  list-style: none;
}

a {
  color: #555;
  text-decoration: none;
  outline: none;
}

/* latin-ext */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
  /* latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.body-md{
  font-family: Roboto, "Helvetica Neue", sans-serif;
}
.body-ios{
  font-family: -apple-system, "Helvetica Neue", "Roboto", sans-serif;
}
.body-pc{
  font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.font12 {
  font-size: 12px;
}

.font15 {
  font-size: 15px;
}

.font16 {
  font-size: 16px;
}

.font18 {
  font-size: 18px;
}

.font20 {
  font-size: 20px;
}

.font22 {
  font-size: 22px;
}

.font24 {
  font-size: 24px;
}

.font35 {
  font-size: 35px;
}

/*320px 360px 375px 420px 768px 1024px*/
@media screen and (max-width: 320px) {
    html {
        font-size: 10px !important;
    }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 12px !important;
    }
}

@media screen and (min-width: 360px) and (max-width: 440px) {
    html {
        font-size: 13px !important;
    }
}

@media screen and (min-width: 441px) and (max-width: 490px) {
    html {
        font-size: 19.66px !important;
    }
}

@media screen and (min-width: 490px) and (max-width: 530px) {
    html {
        font-size: 22px !important;
    }
}

@media screen and (min-width: 531px) and (max-width: 580px) {
    html {
        font-size: 24px !important;
    }
}

@media screen and (min-width: 581px) and (max-width: 750px) {
    html {
        font-size: 26px !important;
    }
}

@media screen and (min-width: 751px) {
    html {
        font-size: 13px !important;
    }
}

/* navbar begin */
.navbar-box {
  height: 7.5%;
}

.navbar-box .title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-box .title a {
  width: 27%;
}

.navbar-box .title a img {
  width: 100%;
  vertical-align: middle;
}

.navbar-box .navbar ,
.navbar-box .navbar-active {
  position: fixed;
  width: 100%;
  /* navbar100，overlay200 */
  z-index: 100;
}

.navbar-box .navbar {
  height: 7.5%;
  background: #fff;
}

.navbar-box .navbar .title {
  height: 100%;
  border-bottom: 1px solid #FFFFFF;
}

.navbar-box .navbar-active {
  display: none;
  height: 100%;
  color: #fff;
  background: #E83828;
}

.navbar-box .navbar-active ul li a {
  display: inline-block;
  width: 100%;
  color: #fff;
}

.navbar-box .navbar-active .title {
  position: relative;
  height: 7.5%;
  border-bottom: 1px solid #FFFFFF;
}

.navbar-box .navbar-active .navbar-swiper ul li {
  margin: 0 10.7%;
  line-height: 54px;
  border-bottom: 1px solid #FFFFFF;
}

.navbar-box .navbar-active .navbar-swiper ul .arrow-box {
  display: flex;
  align-items: center;
}

.navbar-box .navbar-active .navbar-swiper ul .arrow-box img {
  width: 11px;
  height: 16px;
}

.navbar-box .navbar-active .navbar-swiper ul .arrow-left {
  justify-content: space-between;
}

.navbar-box .navbar-active .navbar-swiper ul .arrow-right {
  margin: 0;
  padding: 0 5.2%;
  color: #E83828;
  background: #fff;
}

.navbar-box .navbar-active .navbar-swiper ul .arrow-right img{
  margin-right: 10.5px;
}

.navbar-box .navbar-active .phone {
  position: absolute;
  left: 10.7%;
  bottom: 4%;
}

/* 点击按钮 */
.navbar-box .nav-btn {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 5%;
  height: 100%;
  transform: translateY(-50%);
}

.navbar-box .nav-btn span{
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
	background: #E83828;
}

.navbar-box .nav-btn-active span {
	background: #fff;
}

/* 默认状态 */
.navbar-box .nav-btn span:nth-child(1) {
	transform: translateY(6px) rotate(0deg);
}

.navbar-box .nav-btn span:nth-child(2) {
	opacity: 1;
}
 
.navbar-box .nav-btn span:nth-child(3) {
	transform: translateY(-6px) rotate(0deg);
}

/* 从叉变横线 */
.navbar-box .nav-btn-default span:nth-child(1) {
  animation: clickfirst 0.5s both;
}

.navbar-box .nav-btn-default span:nth-child(2) {
  animation: clicksecond 0.5s both;
}
 
.navbar-box .nav-btn-default span:nth-child(3){
  animation: clickthird 0.5s both;
}
 
/*第一条线旋转动画*/
@keyframes clickfirst {
  0% {
    transform: translateY(0) rotate(45deg);
  }
 
  100% {
	  transform: translateY(6px) rotate(0deg);
  }
}

/*第二条线淡入淡出动画动画*/
@keyframes clicksecond {
	0% {
		opacity: 0;
  }
  
	100% {
		opacity: 1;
	}
}
 
/*第三条线旋转动画*/
@keyframes clickthird {
  0% {
    transform: translateY(0) rotate(-45deg);
  }

  100% {
	  transform: translateY(-6px) rotate(0deg);
  }
}

/* 横线变成叉 */
.navbar-box .nav-btn-active span:nth-child(1) {
	animation: outfirst 0.5s both;
}

.navbar-box .nav-btn-active span:nth-child(2) {
	animation: outsecond 0.5s both;
}

.navbar-box .nav-btn-active span:nth-child(3) {
	animation: outthird 0.5s both;
}

@keyframes outfirst {
  0% {
    transform: translateY(-6px) rotate(0deg);
  }
 
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}

@keyframes outsecond {
  0% {
	  opacity: 1;
  }
 
  100% {
    opacity: 0;
  }
}
 
@keyframes outthird {
	0% {
		transform: translateY(6px) rotate(0deg);
	}
 
	100% {
		transform: translateY(0) rotate(45deg);
	}
}
/* navbar end */

/* container-item begin */
.container .container-item {
  padding: 6.8%;
}

.container .common-header+.container-item {
  padding-top: 15%;
}
/* container-item end */

/* common header begin */
.container .common-header {
  position: relative;
  /* margin-bottom: 15%; */
}

.container .common-header img {
  width: 100%;
  vertical-align: top;
}

.container .common-header .saying {
  position: absolute;
  top: 38%;
  width: 100%;
  padding: 0 6%;
  box-sizing: border-box;
}

.container .common-header .saying .black {
  margin: 10px 0 10px 7px;
  color: #fff;
  font-size: 24px;
}

.container .common-header .saying .shadow {
  text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
}

.container .common-header .saying .red {
  display: inline-block;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  font-size: 35px;
  text-align: center;
  line-height: 50px;
  background: #E83828;
}

@media screen and (max-width: 360px) {
  .container .common-header .saying .black{
    font-size: 21px;
  }
  .container .common-header .saying .red {
    font-size: 31px;
  }
}

@media screen and (max-width: 320px) {
  .container .common-header .saying .black{
    font-size: 19px;
  }
  .container .common-header .saying .red {
    font-size: 29px;
  }
}

.container .common-header .concat-box {
  position: absolute;
  bottom: -23px;
  left: 6.7%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8.8rem;
  height: 3.6rem;
  color: #E83828;
  font-size: 14px;
  background: #fff;
  box-shadow:0px 5px 8px 0px rgba(0,0,0,0.1);
}

.container .common-header .concat-box img {
  display: inline-block;
  width: 13%;
  margin-right: 7px;
}
/* common header end */

/* card begin */
.container .card-bg {
  background:linear-gradient(180deg,rgba(251,251,251,1) 0%,rgba(243,243,243,1) 100%);
}

.container .card-title {
  display: inline-block;
  margin-bottom: 30px;
  padding: 4%;
  color: #fff;
  font-size: 22px;
  background: #E83828;
}

.container .card-title-bottom12 {
  margin-bottom: 12px;
}

.container .card-subtitle {
  margin-bottom: 5px;
  color: #000000;
  font-size: 24px;
  font-weight: bold;
}

@media screen and (max-width: 360px) {
  .container .card-title {
    font-size: 18px;
  }

  .container .card-subtitle {
    font-size: 18px;
  }
}

.container .card-list {
  max-height: 470px;
  margin-top: 10%;
  overflow-y: auto;
}

.container .card-list li {
  display: flex;
  margin-bottom: 15px;
  padding: 9%;
  background: #fff;
}

.container .card-list li .img {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 23%;
}

.container .card-list li .img img {
  width: 100%;
  max-width: 60px;
}

.container .card-list li .desc {
  margin-left: 10px;
}

.container .card-list li .desc .title {
  margin-bottom: 7px;
  font-size: 22px;
  font-weight: bold;
}

.container .card-list li .desc .subtitle {
  color: #4A4A4A; 
}
/* card end */

/* 客户评价 reviews begin */
.reviews-swiper {
  margin-top: 10%;
  overflow: hidden;
}

.reviews-swiper .swiper-slide .swiper-slide-item {
  margin-bottom: 19%;
}

.reviews-swiper .swiper-slide .swiper-slide-item .appraisal {
  position: relative;
  color: #4A4A4A;
  font-size: 18px;
}

.reviews-swiper .swiper-slide .swiper-slide-item .appraisal p {
  padding: 6%;
}

.reviews-swiper .swiper-slide .swiper-slide-item .appraisal .quot {
  position: absolute;
  width: 15px;
}

.reviews-swiper .swiper-slide .swiper-slide-item .appraisal .quot-left {
  top: 0;
  left: 0;
}

.reviews-swiper .swiper-slide .swiper-slide-item .appraisal .quot-right {
  bottom: 0;
  right: 0;
}

.reviews-swiper .swiper-slide .swiper-slide-item .company-box {
  display: flex;
  align-items: center;
  margin: 6% 6% 0;
  color: #000000;
} 

.reviews-swiper .swiper-slide .swiper-slide-item .company-box img {
  display: inline-block;
  width: 14%;
  margin-right: 10px;
} 

.reviews-swiper .swiper-slide .swiper-slide-item .company-box .name {
  font-size: 18px;
} 

.reviews-swiper .swiper-slide .swiper-slide-item .company-box .company {
  font-size: 14px;
} 

.reviews-swiper .swiper-pagination,
.reviews-swiper .case-swiper-pagination {
  margin: 15% 0 11%;
}
/* 客户评价 reviews end */

/* 分页器 begin */
.swiper-pagination,
.case-swiper-pagination {
  text-align: center;
}

.swiper-pagination .pagination,
.case-swiper-pagination .pagination {
  position: absolute;
  z-index: 20;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.swiper-pagination .swiper-pagination-switch,
.case-swiper-pagination .swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 5px;
  background: #CCCCCC;
  border-radius: 50%;
  opacity: 0.8;
}

.swiper-pagination .swiper-active-switch,
.case-swiper-pagination .swiper-active-switch {
  background: #E83828;
}
/* 分页器 end */

/* footer begin */
.footer {
  padding: 11.2% 7% 8.4%;
  background: #000;
}

.footer .white{
  color: #fff;
}

.footer .gray {
  color: rgba(255, 255, 255, 0.5);
}

.footer .logo {
  margin-bottom: 11.4%;
}

.footer .logo img{
  width: 53%;
  vertical-align: top;
}

.footer .hotline p{
  margin: 5px 0;
}

.footer .teamwork {
  margin: 10% 0;
}

.footer .teamwork .white{
  display: inline-block;
  margin-left: 2.6%;
  margin-bottom: 3%;
}

.footer .teamwork .white{
  display: inline-block;
  margin-left: 2.6%;
  margin-bottom: 3%;
  text-decoration: underline;
}

.footer .nav-list .first {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.footer .nav-list .first p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.footer .nav-list li a {
  display: inline-block;
  width: 100%;
}

.footer .nav-list .first img {
  width: 10px;
}

.footer .nav-list .first .rotate-arrow {
  animation: rotateArrow .2s forwards;
}

.footer .nav-list .first .rotate-arrow-reverse {
  animation: rotateArrowReverse .2s forwards;
}

@keyframes rotateArrow {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes rotateArrowReverse {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(90deg);
  }
}

.footer .nav-list .second {
  display: none;
  margin-bottom: 15px;
  line-height: 40px;
}

.footer .nav-list .second sup {
  font-size: 10px;
  -webkit-transform-origin-x: 0;
  transform: scale(.6);
  -webkit-transform: scale(.6);
  -moz-transform: scale(.6);
  -ms-transform: scale(.6);
  -o-transform: scale(.6);
}

.footer .attention {
  display: flex;
  margin-top: 5%;
  margin-bottom: 21%;
}

.footer .attention .title {
  margin-bottom: 10px;
}

.footer .attention .cagetest {
  width: 50%;
  margin-right: 9%;
}

.footer .attention .cagetest .img {
  display: flex;
  align-items: center;
}

.footer .attention .cagetest .img a {
  display: inline-block;
  width: 26%;
  margin-right: 10%;
}

.footer .attention .cagetest .img .zhihu {
  width: 25%;
}

.footer .attention .cagetest .img a img {
  width: 100%;
}

.footer .attention .public img {
  width: 51%;
}

.footer .copy-right .white {
  margin-bottom: 5.3%;
}

.footer .copy-right .gray,
.footer .copy-right .num {
  margin-top: 3px;
}

.footer .copy-right .num {
  display: flex;
  align-items: center;
}

.footer .copy-right .num img {
  display: inline-block;
  width: 17px;
  margin-left: 5px;
  vertical-align: middle;
}
/* footer end */

/* overlay begin */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  padding: 8.4% 11%;
  background: #fff;
  box-sizing: border-box;
  overflow: auto;
  /* navbar100，overlay200 */
  z-index: 200; 
}

.overlay .close {
  position: fixed;
  top: 19px;
  right: 19px;
}

.overlay .label-t {
  display: inline-block;
  margin-bottom: 6.5%;
  padding: 3.6%;
  color: #fff;
  font-size: 22px;
  background: #E83828;
}

.overlay .input-area p {
  margin: 4.3% 0;
  color: #8B8B8B;
  font-size:14px;
}

.overlay .input-area input,
.overlay .input-area textarea,
.overlay .input-area .service-select .t,
.overlay .input-area .service-select .select-box {
  width: 100%;
  padding: 4.3%;
  font-size: 16px;
  background: none;  
  border: 1px solid rgba(220,220,220,1);
  box-sizing: border-box;
  outline: none;  
}

.overlay .input-area input:focus,
.overlay .input-area textarea:focus {
  border:  1px solid rgba(220,220,220,1);
}

.overlay input.mistake {
  color: #E83828;
  border: 1px solid #E83828;
}

.overlay .input-area input {
  height: 2.9rem;
}

.overlay .input-area textarea {
  height: 11rem;
  margin-bottom: 8.6%;
}

.overlay .input-area .service-select {
  position: relative;
}

.overlay .input-area .service-select .t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #9FA3A7;
}

.overlay .input-area .service-select .t .active {
  color: #000;
}

.overlay .input-area .service-select .t .rotate1 {
  transform: rotate(180deg);
}

.overlay .input-area .service-select .select-box {
  position: absolute;
  display: none;
  line-height: 2rem;
  background: #fff;
  z-index: 100;
}

.overlay .button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  color: #fff;
  font-size: 16px;
  background:rgba(232,56,40,1);
  box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}

.overlay .no-active {
  color: rgba(220, 220, 220, .5);
}
/* overlay end */

/* float-icon begin */
.float-icon {
  position: fixed;
  right: 5%;
  bottom: 15%;
  width: 65px;
  color: #E83828;
  font-size: 12px;
  text-align: center;
}

.float-icon  .hx-customer-service {
  bottom: 0;
}

.float-icon .back-top {
  top: 0;
  display: none;
}

.float-icon a {
  position: absolute;
  display: block;
  margin-bottom: 10%;
  padding: 10%;
  background: #fff;
  box-shadow:0px 5px 8px 0px rgba(0,0,0,0.1);
}

.float-icon a img {
  width: 50%;
}

.float-icon a p {
  transform: scale(0.8);
}

/* float-icon end */