@charset "utf-8";

.about {padding:100px 0}
.about .box {display:flex;align-items:flex-start;}
.about .pic {width:50%;position:relative}
.about .v-box {position:absolute;right:0;bottom:-90px;background:#fff;width:82%;padding:30px 38px;box-sizing:border-box;box-shadow:0 2px 20px 0 rgba(227,230,230,0.6)}
.about .v-box p {color:#212121;font-size:20px;line-height:1.8}
.about .v-box .v {margin:20px 0 0;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center}
.about .v-box .v h5 {font-size:20px;color:#666}
.about .v-box .v hr {width:200px;height:4px;background:#f4f4f4}
.about .v-box .v a {width:52px;position:relative;display:block;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s}
.about .v-box .v a::after {content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:1px solid rgb(255 205 22 / 25%);animation:scale2 2s linear infinite}
@keyframes scale2 {from {-webkit-transform:scale(1);transform:scale(1)}
50% {-webkit-transform:scale(1.4);transform:scale(1.4)}
to {-webkit-transform:scale(1);transform:scale(1)}
}
.about .txt {flex:1;margin-right:70px}
.about .txt h1 {font-size:36px;color:#333;line-height:1;font-weight:700}
.about .txt .t {margin:40px 0 0;font-size:18px;color:#666;line-height:2}
.about .txt .t strong {color:var(--text-color-active);font-size: 22px;}
.about .txt .t p~p {/* margin-bottom: 25px; */}

.about .txt .t p {margin-bottom: 0px;}
.about ul {margin:100px 0 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.about ul li {width:calc(25% - 35px);position:relative;padding:30px 25px;border-bottom:2px solid #e6e6e6;height:168px;}
.about ul li::after {content:"";width:0;height:2px;background:var(--bg-color);position:absolute;left:0;bottom:-2px;transition:all 0.3s cubic-bezier(0.55,0.23,0.62,1) 0s;-webkit-transition:all 0.3s cubic-bezier(0.55,0.23,0.62,1) 0s}
.about ul li h5 {color:var(--text-color-active);font-size:44px;line-height:1;display:inline-block;position:relative;font-weight:700}
.about ul li h5::after {content:attr(date-txt);position:absolute;right:-25px;top:0;color:#212121;font-size:46px;font-weight:400}
.about ul li:nth-child(3) h5::after {right:-50px;font-size:22px;top:2px}
.about ul li p {font-size:20px;color:#666;line-height:1.5;margin:13px 0 0}
.about ul li:hover::after {width:100%}

.about2 {padding:100px 0;background:#f8c025;margin-bottom: 90px;}
.about2 .wp {display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.about2 .tit {width:237px;}
.about2 .tit img{}
.about2 .list {flex:1;margin-left:70px}
.about2 .list h3{font-size:20px;line-height:1.5;color:#333;/* font-weight:700; */letter-spacing:1px;}

.about2 .list .his{
  font-size: 20px;
  line-height:1.5;
  color:#333;
  /* font-weight:700; */
  letter-spacing:1px;
}
.about3 {padding: 0px 0 30px;}
.about3 .ul1 {}
.about3 .ul1 li {position:relative;display:-webkit-flex;display:flex}
.about3 .ul1 li + li {margin-top:120px}
.about3 .ul1 li .pic {width:512px}
.about3 .ul1 li .txt {-webkit-flex:1;flex:1;margin:0 0 0 75px;border-bottom:1px solid #ffc72c;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;}
.about3 .ul1 li .txt h5 {font-size:36px;font-weight:700;line-height:1;color:#333;text-transform: capitalize;}
.about3 .ul1 li .txt .t {margin:35px 0 35px;font-size:17px;color:#777;line-height:1.8;/* text-transform:capitalize; */}
.about3 .ul1 li .txt .t p~p {margin-top:15px}
/*
.about3 .ul1 li:nth-child(2n + 1) {flex-direction:row-reverse;-webkit-flex-direction:row-reverse}
.about3 .ul1 li:nth-child(2n + 1) .txt {margin:0 75px 0 0}*/

.about3 .ul2 {
    margin-top: 20px;
}
.about3 .ul2 li {position:relative;display:-webkit-flex;display: inline-flex;}
.about3 .ul2 li + li {/* margin-top:120px; */}
.about3 .ul2 li .pic {width: 30px;margin: auto;}
.about3 .ul2 li .txt {-webkit-flex:1;flex:1;margin: 0 0 0 25px;/* border-bottom:1px solid #ffc72c; *//* display:-webkit-flex; */display:flex;/* -webkit-flex-direction:column; *//* flex-direction:column; *//* -webkit-justify-content:center; *//* justify-content:center; *//* display: inline-block; *//* width: 1340px; */}
.about3 .ul2 li .txt h5 {font-size: 24px;font-weight: 500;line-height:1;color: var(--color-primary);text-transform: capitalize;display: inline-flex;margin: auto;width: 86px;}
.about3 .ul2 li .txt .t {margin: 15px 0;font-size: 18px;color:#777;line-height:1.8;/* text-transform:capitalize; */display: inline-block;padding-left: 100px;/* margin-left: 100px; */}
.about3 .ul2 li .txt .t p~p {margin-top:15px}
.about3 .ul2 li:nth-child(2n + 1) {}
.about3 h3{
  color:#333;
  /* text-transform: capitalize; */
  font-size: 26px;
  margin-top: 50px;
}


.index-tit {text-align:center;}
.index-tit h3{font-size:36px;line-height:1;color:#333;font-weight:bold;}
.index-tit p {margin:35px 0 0;font-size: 17px;line-height:1.8;color: #777;}



.quality {padding: 30px 0 60px;/* background:#f8f8f8; */}
.quality .list {margin: 60px 0 0;position:relative}
.quality .swiper-slide {position:relative;padding: 0px 60px;/* margin-right: 0px !important; *//* width: 22% !important; */}
.quality .swiper-slide:nth-child(1){
  
}
.quality .swiper-slide img {display:block}
.quality .swiper-slide h6 {position:absolute;left:0;right:0;bottom:0;background:linear-gradient(rgba(0,0,0,0.00001),rgba(0,0,0,0.6));font-size:24px;color:#fff;line-height:1;font-weight:700;padding:30px 15px;text-align:center}
.quality .swiper-slide .t {position:absolute;left:0;right:0;bottom:0;top:0;padding:0 35px;text-align:center;background:rgb(255,199,44,0.85);display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition:opacity 0.2s,-webkit-transform 0.35s;transition:opacity 0.2s,transform 0.35s;-webkit-transform:scale(0);transform:scale(0)}
.quality .swiper-slide .t h5 {font-size:24px;color:#fff;line-height:1;font-weight:700}
.quality .swiper-slide .t p {font-size:18px;color:#fff;line-height:2;margin:50px 0 0}
.quality .swiper-slide:hover .t {opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.quality .swiper-slide:hover h6 {opacity:0}
.quality .swiper-button-prev,.quality .swiper-button-next {width:48px;height:48px;overflow:hidden;border-radius: 30px;background:var(--btn-bg);margin-top:-24px;text-align:center;color: #fff;}
.quality .swiper-button-prev i,.quality .swiper-button-next i {color:inherit;font-size:24px;line-height:48px}
.quality .swiper-button-prev,.quality .swiper-container-rtl .swiper-button-next {/* left:-97px; */right:auto}
.quality .swiper-button-next,.quality .swiper-container-rtl .swiper-button-prev {/* right:-97px; */left:auto}
.quality .swiper-button-prev::after,.quality .swiper-button-next::after {display:none;}
.quality .swiper-button-prev:hover,.quality .swiper-button-next:hover {background-color:var(--btn-bg-hover);}
.quality .swiper-pagination {position:static;width:100%;margin-top:30px;display:none}
.quality .swiper-pagination-bullet {height:10px;width:10px;margin:0 10px;background:#ccc;border-radius:0;opacity:1;box-sizing:border-box}
.quality .swiper-pagination-bullet-active {background:#e2ca4d;}


.cert-list {padding:90px 0;background:#fff}
.cert-list .list {margin:45px 0 0;position:relative}
.cert-list .swiper {padding:15px 0}
.cert-list .swiper-slide {width:525px;padding:15px;background:#fff;box-sizing:border-box;box-shadow:0 0 10px rgba(4,0,0,0.24)}
.cert-list .swiper-slide img {display:block}
.cert-list .swiper-button-prev,.cert-list .swiper-button-next {width:48px;height:48px;overflow:hidden;border-radius:0;background:var(--btn-bg);margin-top:-24px;text-align:center;color:#fff}
.cert-list .swiper-button-prev i,.cert-list .swiper-button-next i {color:inherit;font-size:24px;line-height:48px}
.cert-list .swiper-button-prev,.cert-list .swiper-container-rtl .swiper-button-next {left:-97px;right:auto}
.cert-list .swiper-button-next,.cert-list .swiper-container-rtl .swiper-button-prev {right:-97px;left:auto}
.cert-list .swiper-button-prev::after,.cert-list .swiper-button-next::after {display:none;}
.cert-list .swiper-button-prev:hover,.cert-list .swiper-button-next:hover {background-color:var(--btn-bg-hover);}
.cert-list .swiper-pagination {position:static;width:100%;margin-top:30px;display:none}
.cert-list .swiper-pagination-bullet {height:10px;width:10px;margin:0 10px;background:#ccc;border-radius:0;opacity:1;box-sizing:border-box}
.cert-list .swiper-pagination-bullet-active {background:#e4a82b}


@media screen and (max-width:1550px) {
.about ul li h5 {font-size:40px}

}

@media screen and (max-width:1441px) {

.about,.about2,.about3,.quality,.cert-list{padding:70px 0}
.about2 .list h3{font-size: 20px;}
.about ul li h5 {font-size:38px}
.about ul{
  margin-top:0px
}
.quality .swiper-button-prev,.quality .swiper-button-next {width:40px;height:40px;margin-top:-20px}
.quality .swiper-button-prev i,.quality .swiper-button-next i {font-size:21px;line-height:40px}
.quality .swiper-button-prev,.quality .swiper-container-rtl .swiper-button-next {left:-55px}
.quality .swiper-button-next,.quality .swiper-container-rtl .swiper-button-prev {right:-55px}
.cert-list .swiper-button-prev,.cert-list .swiper-button-next {width:40px;height:40px;margin-top:-20px}
.cert-list .swiper-button-prev i,.cert-list .swiper-button-next i {font-size:21px;line-height:40px}
.cert-list .swiper-button-prev,.cert-list .swiper-container-rtl .swiper-button-next {left:-55px}
.cert-list .swiper-button-next,.cert-list .swiper-container-rtl .swiper-button-prev {right:-55px}

.cert-list .swiper-slide{width:465px;}

}

@media screen and (max-width:1367px) {

.about2 .list h3{font-size: 20px;}
.about ul li h5 {font-size:36px}

.cert-list .swiper-slide{width:450px;}

}

@media screen and (max-width:1280px) {
.about .txt h1,.about3 ul li .txt h5,.index-tit h3{font-size:34px}
.about2 .list h3{font-size: 20px;}

.about,.about2,.about3,.quality,.cert-list{padding:60px 0}

.about .txt .t {margin:30px 0 0;font-size:17px;line-height:1.7}
.about .txt .t p~p {margin-top:18px}
.about .v-box {width:70%;padding:30px;box-shadow:0 2px 15px 0 rgba(227,230,230,0.6)}
.about .v-box p {font-size:17px;line-height:1.5}
.about .v-box .v hr {width:130px}
.about .v-box .v h5 {font-size:18px}
.about ul {/* margin:70px 0 0; */}
.about ul li {width:calc(25% - 36px);padding:30px 20px}
.about ul li h5 {font-size:34px}
.about ul li p {font-size:18px}
.about2 .list {margin-left:50px}

.quality .swiper-slide h6 {font-size:20px;padding:20px 15px}
.quality .swiper-slide .t p {font-size:17px;line-height:1.7;margin:30px 0 0}
.quality .swiper-button-prev,.quality .swiper-container-rtl .swiper-button-next {left:0}
.quality .swiper-button-next,.quality .swiper-container-rtl .swiper-button-prev {right:0}
.cert-list .swiper-button-prev,.cert-list .swiper-container-rtl .swiper-button-next {left:0}
.cert-list .swiper-button-next,.cert-list .swiper-container-rtl .swiper-button-prev {right:0}

.cert-list .swiper-slide{width:425px;}

}


@media screen and (max-width:992px) {
.about .txt h1,.about3 ul li .txt h5,.index-tit h3{font-size:30px}
.about2 .list h3{font-size:28px;}

.about,.about2,.about3,.quality,.cert-list{padding:40px 0}


.about .box {-webkit-flex-direction:column;flex-direction:column}
.about .pic {margin:20px 0 0;width:100%}
.about .v-box {position:static;width:100%;padding:25px 20px}
.about .v-box p {font-size:17px;line-height:1.4}
.about .v-box .v {margin:20px 0 0}
.about .v-box .v h5 {font-size:18px}
.about .v-box .v hr {width:200px}
.about .v-box .v a {width:48px}
.about .txt {width:100%;margin:0}
.about .txt h1 {text-align:center}
.about .txt .t {margin:20px 0 0;font-size:16px;line-height:1.4}
.about .txt .t p~p {margin-top:10px}
.about ul {margin:20px 0 0}
.about ul li {width:calc(50% - 20px);padding:25px 15px}
.about ul li p {font-size:17px;line-height:1.3;margin:10px 0 0}
.about ul li h5 {font-size:32px}

.about2 .wp {display:block;}
.about2 .tit{width:220px;margin:0 auto;}
.about2 .list {margin:25px 0 0;text-align:center}


.about3 ul {}
.about3 ul li {-webkit-flex-direction:column;flex-direction:column}
.about3 ul li + li {margin-top:20px}
.about3 ul li .pic {width:auto;max-width:500px;margin:0 auto}
.about3 ul li .txt {-webkit-flex:1;flex:1;margin:20px 0 0;padding-left:0;border:none}
.about3 ul li .txt h5 {text-align:center}
.about3 ul li .txt .t {margin:20px 0 0;font-size:16px;line-height:1.4}
.about3 ul li .txt .t p~p {margin-top:10px}
.about3 ul li:nth-child(2n + 1) {-webkit-flex-direction:column;flex-direction:column}
.about3 ul li:nth-child(2n + 1) .txt {margin:20px 0 0}


.quality .list {margin:30px 0 0}
.quality .swiper-slide h6 {font-size:20px;padding:15px 10px}
.quality .swiper-slide .t {display:none}
.quality .swiper-slide:hover h6 {opacity:1}
.quality .swiper-button-prev,.quality .swiper-button-next {display:none}
.quality .swiper-pagination {display:block}


.cert-list .list {margin:25px -10px 0}
.cert-list .swiper {padding:10px}
.cert-list .swiper-slide{padding:10px;box-shadow:0 0 6px rgba(4,0,0,0.24)}
.cert-list .swiper-button-prev,.cert-list .swiper-button-next {display:none}
.cert-list .swiper-pagination {display:block}
}

@media screen and (max-width:768px) {

.about,.about2,.about3,.quality,.cert-list{padding:30px 0}
.about .txt h1,.about3 ul li .txt h5,.index-tit h3{font-size:28px}
.about2 .list h3{font-size:26px;}

.about ul li h5{font-size:30px;}


}


@media screen and (max-width:576px) {
.about .txt h1,.about3 ul li .txt h5,.index-tit h3{font-size:26px}
.about2 .list h3{font-size:24px;}
}

@media screen and (max-width:480px) {
.about .txt h1,.about3 ul li .txt h5,.index-tit h3{font-size:24px}
.about2 .list h3{font-size:22px;}
.about .v-box .v hr {width:150px}

.about2 .tit{width:160px;}

}

@media screen and (max-width:420px) {
.about2 .list h3{font-size:20px;line-height:1.3;}

}

//histroy
.history{
  
}
.history{
  padding: 80px 0;
}

.history h3 {
  font-size: 36px;
  color: #000;
  font-weight: 700;
  text-align: center;
  font-size: 36px;
  color: #333;
  line-height: 1;
  font-weight: 700;
}
.history .wp>p {
  text-align:center;
  font-size: 20px;
  line-height: 3;
}
.history .list {
  position: relative;
  margin-top: 65px;
  height: 240px;
  box-sizing: border-box
}

.history .list::after {
  content: '';
  position: absolute;
  left: 0;
  top: 119px;
  width: 100%;
  height: 2px;
  background: rgb(146 146 146 / 30%)
}

.history .swiper-slide {
  height: 240px;
  box-sizing: border-box
}

.history .swiper-slide .inner {
  opacity: 1;
  width: 240px;
  height: 240px;
  border: 1px solid transparent;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center
}

.history .swiper-slide .inner em {
  width: 113px;
  height: 113px;
  background: var(--color-primary);
  font-size: 24px;
  color: #000;
  line-height: 113px;
  text-align: center;
  display: block;
  border-radius: 50%;
  transition: all .3s ease 0s
}

.history .swiper-slide p {
  display: none;
  margin: 40px 0 0;
  text-align: center;
  font-size: 18px;
  line-height: 30px;
  color: #666;
}

.history .swiper-slide-active .inner {
  border: 1px solid var(--color-primary);
  border-radius: 50%
}

.history .swiper-slide-active .inner em {
  width: 184px;
  height: 184px;
  line-height: 184px;
  font-weight: 700;
  font-size: 48px;
  color: #fff;
}

.history .text {
  margin: 45px auto 0;
  max-width: 700px;
  text-align: center
}

.history .text p {
  font-size: 20px;
  line-height: 35px;
  color: #666;
}

.story {
  padding: 50px 0;
  background: #262c32
}