:root {
  --bobo-about-title-size: 36px;
  --bobo-about-text-size: 18px;
  --bobo-about-content-pr: 70px;
  --bobo-about-pic-t-size: 20px;
  --bobo-about-pic-t-p: 30px 38px;
  --bobo-about-vbox-b: -54px;
  --bobo-about-btn-size: 52px;
  --bobo-about-pd: 100px 0;
}

.bobo-about {
  padding: var(--bobo-about-pd);
}

.bobo-about .pic {
  padding: 0;
}

.bobo-about .pic .pic-box {
  position: relative;
}

.bobo-about .pic .poster {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.bobo-about .v-box {
  position: absolute;
  right: 0;
  bottom: var(--bobo-about-vbox-b);
  background: #fff;
  width: 82%;
  padding: var(--bobo-about-pic-t-p);
  box-sizing: border-box;
  box-shadow: 0 2px 20px 0 rgba(227, 230, 230, 0.6)
}

.bobo-about .v-box p {
  color: var(--title-text-color);
  font-size: var(--bobo-about-pic-t-size);
  line-height: 1.8;
}

.bobo-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;
}

.bobo-about .v-box .v h5 {
  font-size: var(--bobo-about-pic-t-size);
}

.bobo-about .v-box .v hr {
  width: 200px;
  height: 4px;
  background: #f4f4f4
}

.bobo-about .v-box .v a {
  width: var(--bobo-about-btn-size);
  position: relative;
  display: block;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.bobo-about .v-box .v a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent 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)
  }
}

.bobo-about .txt{ 
  padding-left: 0;
  padding-right: var(--bobo-about-content-pr);
}

.bobo-about .txt h2 {
  font-size: var(--bobo-about-title-size);
  line-height: 1;
  font-weight: 700;
  margin-bottom: 1em;
}

.bobo-about .txt .rich-text p {
  font-size: var(--bobo-about-text-size);
  line-height: 2;
}

.bobo-about .txt .rich-text strong {
  color: var(--color-primary);
}

@media screen and (max-width: 1500px) {
  :root {
    --bobo-about-title-size: 32px;
    --bobo-about-text-size: 16px;
    --bobo-about-content-pr: 62px;
    --bobo-about-pic-t-size: 18px;
    --bobo-about-pic-t-p: 26px 34px;
    --bobo-about-vbox-b: -48px;
    --bobo-about-btn-size: 48px;
    --bobo-about-pd: 85px 0;
  }

  .bobo-about .v-box .v {
    margin: 18px 0 0;
  }
  .bobo-about .v-box .v hr {
    width: 180px;
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --bobo-about-title-size: 28px;
    --bobo-about-text-size: 14px;
    --bobo-about-content-pr: 54px;
    --bobo-about-pic-t-size: 16px;
    --bobo-about-pic-t-p: 22px 30px;
    --bobo-about-vbox-b: -42px;
    --bobo-about-btn-size: 44px;
    --bobo-about-pd: 70px 0;
  }

  .bobo-about .v-box .v {
    margin: 16px 0 0;
  }
  .bobo-about .v-box .v hr {
    width: 160px;
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --bobo-about-title-size: 24px;
    --bobo-about-text-size: 14px;
    --bobo-about-content-pr: 45px;
    --bobo-about-pic-t-size: 14px;
    --bobo-about-pic-t-p: 16px 24px;
    --bobo-about-vbox-b: -36px;
    --bobo-about-btn-size: 40px;
    --bobo-about-pd: 55px 0;
  }

  .bobo-about .v-box .v {
    margin: 14px 0 0;
  }
  .bobo-about .v-box .v hr {
    width: 140px;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --bobo-about-title-size: 32px;
    --bobo-about-text-size: 16px;
    --bobo-about-content-pr: 0;
    --bobo-about-pic-t-size: 18px;
    --bobo-about-pic-t-p: 25px 30px;
    --bobo-about-vbox-b: -48px;
    --bobo-about-btn-size: 48px;
    --bobo-about-pd: 60px 0;
  }

  .bobo-about .pic .poster {
    margin-top: 20px;
  }

  .bobo-about .txt h2 {
    text-align: center;
  }

  .bobo-about .v-box {
    position: static;
    width: 100%;
  }

  .bobo-about .v-box .v {
    margin: 20px 0 0;
  }
  .bobo-about .v-box .v hr {
    width: 200px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --bobo-about-title-size: 28px;
    --bobo-about-text-size: 16px;
    --bobo-about-content-pr: 0;
    --bobo-about-pic-t-size: 16px;
    --bobo-about-pic-t-p: 20px 28px;
    --bobo-about-btn-size: 44px;
    --bobo-about-pd: 45px 0;
  }

  .bobo-about .v-box .v {
    margin: 18px 0 0;
  }
  .bobo-about .v-box .v hr {
    width: 180px;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --bobo-about-title-size: 24px;
    --bobo-about-text-size: 14px;
    --bobo-about-content-pr: 0;
    --bobo-about-pic-t-size: 14px;
    --bobo-about-pic-t-p: 15px 20px;
    --bobo-about-btn-size: 40px;
    --bobo-about-pd: 30px 0;
  }

  .bobo-about .row {
    padding: 0 15px;
  }

  .bobo-about .v-box .v {
    margin: 12px 0 0;
  }
  .bobo-about .v-box .v hr {
    width: 160px;
  }
}


/*上部分菜单*/

.menu-tab {background: rgba(49,49,49,.4);position: absolute;top: 66px;left: 0;width: 100%;z-index: 10;}
.menu-tab ul {display: flex;align-items: center;justify-content: center;}
.menu-tab ul li {position: relative;text-align: center;padding: 0 55px;box-sizing: border-box;font-size: 18px;color: #fff;font-weight: 500;transition: all .5s ease;overflow: hidden;}
.menu-tab ul li .btns {display: block;color: inherit;line-height: 85px;text-decoration: none;overflow: hidden;height: 85px;}
.menu-tab ul li+li::before {content: '';width: 1px;height: 16px;background: #CBCBCB;position: absolute;top: calc(50% - 8px);left: 0;}
.menu-tab ul li:last-child::after {content: '';width: 0px;height: 16px;background: #CBCBCB;position: absolute;top: calc(50% - 8px);right: 0;}

.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{content:attr(data-text);display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;color: #fff;background: var(--color-primary);animation: animation_btn1 .4s ease-in-out;}
@keyframes animation_btn1{
  0% {width: 100%;height: 100%;transform: translate(0%, 100%);}
  30% {width: 100%;height: 100%;}
  100% {width: 100%;height: 100%;transform: translate(0%, 0%);}
}

@media screen and (max-width: 1550px) {
.menu-tab ul li {padding: 0 45px;font-size: 17px;}
.menu-tab ul li .btns {line-height: 75px;height: 75px;}
}
 
@media screen and (max-width: 1440px) {
}
                                          
@media screen and (max-width: 1367px) {
.menu-tab ul li {padding: 0 35px;font-size: 16px;}
.menu-tab ul li .btns {line-height: 65px;height: 65px;}
}
                                    
@media screen and (max-width: 1280px) {
}
                                
@media screen and (max-width: 992px) {
.menu-tab {display: none;}
.menu-tab ul li {padding: 0 20px;font-size: 15px;width: 33.333%;}
.menu-tab ul li .btns {line-height: 50px;height: 50px;}
}
                                
@media screen and (max-width: 768px) {
.menu-tab ul {flex-wrap: wrap;}
.menu-tab ul li {width: 50%;}
.menu-tab ul li::before {display: none;}
.menu-tab ul li:last-child::after {display: none;}
}

/*about*/

.about {padding: 210px 0 0;background: #080808 url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/c4b33aec2d32e1fb54841b830b85b2f8/introduction.jpg) no-repeat center top;background-size: 101% auto;}
.about .about-company .txt {width: 50%;}
.about .about-company .txt h3 {font-weight: 600;line-height: 1;text-transform: capitalize;margin-bottom: 25px;}
.about .about-company .txt > p {font-size: 18px;line-height: 2;color: #fff;}
.about .about-company .txt dl {margin-top: 60px;width: 68%;}
.about .about-company .txt dl dd {display: flex;align-items: flex-start;}
.about .about-company .txt dl dd + dd {margin-top: 30px;}
.about .about-company .txt dl dd .ico {width: 50px;}
.about .about-company .txt dl dd .t {flex: 1;margin-left: 15px;font-size: 16px;line-height: 24px;color: #DEDEDE;}
.about .about-company .txt dl dd .t h5 {font-size: 24px;line-height: 1;text-transform: capitalize;font-weight: 600;color: #fff;margin-bottom: 15px;}
.about .about-company .list {margin-top: 250px;}
.about .about-company .list ul {display: flex;justify-content: space-between;margin:0 -10px;}
.about .about-company .list ul li {display: flex;align-items: center;width:25%;padding:0 10px;}
.about .about-company .list ul li .ico {width: 75px;height: 75px;border-radius: 7px;display: flex;justify-content: center;align-items: center;background: var(--color-primary);}
.about .about-company .list ul li .ico img {max-width: 70%;}
.about .about-company .list ul li .t {flex: 1;margin-left: 15px;}
.about .about-company .list ul li .t h6 {font-size:clamp(24px, 3.15vw, 60px);color: #fff;font-weight: 700;line-height: 1;position: relative;display: inline-block;}
.about .about-company .list ul li .t p {font-size: 16px;line-height: 1;color: #8A8A8A;margin-top:5px;}
.about .about-company .list ul li .t h6::after {content: attr(date-txt);position: absolute;color: #000;font-size: 40px;right: -40px;top: 6px;}

.about .honor {padding: 120px 0;}
.about .honor .tit {max-width: 1140px;text-align: center;margin: 0 auto;}
.about .honor .tit h3 {font-weight: 600;color: #fff;line-height: 1;}
.about .honor .tit p {font-size: 18px;line-height:1.6;color: #DEDEDE;margin-top: 15px;text-transform: capitalize;}
.about .honor .list{margin-top:60px;}
.about .honor .years{text-align:center;font-size:0;background: url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/ba422ebefe2863aa76881da729ee2a69/biaochi.png) no-repeat center bottom;display: flex;justify-content: center;}
.about .honor .years .yy{cursor:pointer;display:block;width:108px;height:290px;background-size: contain;position: relative;}
.about .honor .years .yy::after {content: '';height: 60px;width: 1px;background: #fff;transition: all .9s ease;position: absolute;bottom: 0;left: 55px;}
.about .honor .years .yy.on::after {height: 100%;background-color: var(--color-primary);}
.about .honor .years .yy.on{width:568px;}
.about .honor .years .yy span{display:block;font-size:24px;font-weight:bold;color:#fff;text-align: center;position: absolute;bottom: -45px;width: 108px;left: 0;}
.about .honor .years .yy .ss{text-align:left;position: absolute;top:10px;left: 70px;width: 560px;transform: translateX(-15px);opacity: 0;visibility: hidden;}
.about .honor .years .yy.on .ss{opacity: 1;transform: translateX(0);visibility: inherit;transition: all .9s ease;}
.about .honor .years .yy .ss h4 {font-size:clamp(22px, 2.5vw, 48px);color: var(--color-primary);font-weight:bold;line-height: 1;}
.about .honor .years .yy .ss h5 {font-size:clamp(16px, 1.6vw, 30px);font-weight: bold;line-height:1.2;color: #fff;}
.about .honor .years .yy .ss p{line-height:30px;font-size:15px;color: #dedede;margin-top: 10px;overflow: hidden;display: -webkit-box; -webkit-line-clamp: 4;-webkit-box-orient: vertical;}

.about-core {position: relative;text-align: center;}
.about-core .tit {max-width: 1140px;margin: 0 auto;text-align: center;position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);}
.about-core .tit h3 {line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;}
.about-core .tit p {font-size: 18px;line-height: 30px;color: rgb(255,255,255,0.8);margin-top: 25px;}




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

.about {padding:190px 0 0;}
.about .about-company .txt h3 {margin-bottom: 20px;}
.about .about-company .txt dl dd .t h5 {font-size: 22px;margin-bottom: 15px;}
.about .about-company .txt > p {font-size: 17px;line-height: 1.8;}
.about .about-company .txt dl {margin-top: 50px;width: 74%;}
.about .about-company .txt dl dd .ico {width: 45px;}

.about .about-company .list {margin-top: 210px;}
.about .about-company .list ul li .t h6::after {font-size: 36px;right: -34px;}
.about .about-company .list ul li .ico {width: 70px;height: 70px;}

.about .honor {padding: 100px 0;}
.about .honor .tit p {font-size:17px;margin-top: 12px;}
.about .honor .list{margin-top: 50px;}
.about .honor .years .yy .ss{width:480px;}
.about .honor .years .yy .ss p{line-height:28px;}
.about .honor .years .yy span {font-size:22px;}

.about-core .tit p{font-size: 17px;line-height: 28px;margin-top: 20px;}

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

.about .about-company .txt{width:60%;}

.about .honor .years .yy .ss{width:430px;}
.about .honor .years .yy .ss p{line-height:26px;}
}
                                          
@media screen and (max-width: 1367px) {

.about {padding:170px 0 0;}
.about .about-company .txt h3 {margin-bottom: 15px;}
.about .about-company .txt dl dd .t h5 {font-size: 20px;margin-bottom: 9px;}
.about .about-company .txt > p {font-size: 16px;line-height: 1.6;}
.about .about-company .txt dl {margin-top: 40px;width: 80%;}
.about .about-company .txt dl dd .ico {width: 40px;}

.about .about-company .list {margin-top: 170px;}
.about .about-company .list ul li .t h6::after {font-size: 32px;right: -28px;}
.about .about-company .list ul li .ico {width: 65px;height: 65px;}

.about .honor {padding: 80px 0;}
.about .honor .tit p {font-size:16px;margin-top: 9px;}
.about .honor .list{margin-top: 40px;}
.about .honor .years .yy span {font-size:20px;}

.about-core .tit p{font-size: 16px;line-height: 26px;margin-top: 15px;}

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

.about .about-company .txt{width:70%;}
.about .about-company .list{margin-top:130px;}

.about .honor .years .yy{width:10%;height:260px;}
.about .honor .years .yy::after{left:10px;}
.about .honor .years .yy.on{width:30%;}
.about .honor .years .yy .ss{width:calc(100% - 30px);left:30px;}

.about-core .tit{padding:0 20px;}

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

.about {padding: 170px 0 0;background-position: center top;}
.about .about-company .txt {width: 100%;text-align: center;}
.about .about-company .txt h3 {margin-bottom: 10px;}
.about .about-company .txt dl {margin-top: 20px;width: 100%;}
.about .about-company .txt dl dd {display: block;}
.about .about-company .txt dl dd .ico {margin: 0 auto;}
.about .about-company .txt dl dd + dd {margin-top: 15px;}
.about .about-company .txt dl dd .t {margin-left: 0;font-size: 15px;line-height: 22px;margin-top: 10px;}
.about .about-company .txt dl dd .t h5 {font-size: 18px;margin-bottom: 5px;}

.about .about-company .list {margin-top: 70px;}
.about .about-company .list ul {flex-wrap: wrap;}
.about .about-company .list ul li {width: 50%;display: block;text-align: center;padding: 10px 0;}
.about .about-company .list ul li .ico {width: 60px;height: 60px;margin:0 auto;}
.about .about-company .list ul li .t {margin-left: 0;margin-top: 10px;}
.about .about-company .list ul li .t h6 {font-size: 36px;}
.about .about-company .list ul li .t p {font-size: 15px;margin-top: 6px;}

.about .honor {padding: 40px 0;}
.about .honor .tit p {line-height:1.5;margin-top: 5px;}
.about .honor .list{overflow:auto;}
.about .honor .years {margin-top: 25px;display: block;position: relative;background:none;}
.about .honor .years::after {content:'';width: 1px;height: 100%;background: #fff;position: absolute;top: 0;left: 5px;} 
.about .honor .years .yy {width: 100%;height: auto;}
.about .honor .years .yy + .yy {margin-top: 25px;}
.about .honor .years .yy.on {width: 100%;}
.about .honor .years .yy span {display: none;}
.about .honor .years .yy .ss {padding-left: 40px;left: auto;top: auto;width: 100%;transform: translateX(0);opacity: 1;visibility: inherit;position: relative;}
.about .honor .years .yy .ss::before {content: '';width: 24px;height: 24px;border-radius: 50%;background: rgba(19,94,169, 0.6);position: absolute;left: -6px;top: 2px;z-index: 9;}
.about .honor .years .yy .ss:after {content: '';width: 12px;height: 12px;border-radius: 50%;background: #fff;position: absolute;left: 0;top: 8px;z-index: 10;}
.about .honor .years .yy::after {display: none;}
.about .honor .years .yy .ss h5 {line-height: 24px;}
.about .honor .years .yy .ss p {line-height: 24px;margin-top: 5px;}
.about-core .tit p, .about-cert .tit p {font-size: 15px;line-height: 24px;margin-top: 10px;}

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

.about-core .tit p{font-size: 14px;line-height: 22px;margin-top: 5px;}

.about .about-company .list {margin-top: 50px;}
.about .about-company .list ul li .t h6 {font-size: 32px;}
.about .about-company .txt > p{font-size:15px;line-height:1.4}

.about .honor .years .yy .ss h5 {line-height: 22px;}

.about .honor .tit p{line-height:1.4;font-size:15px;}

}

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

.about .honor .years .yy .ss h4 {font-size: 24px;}

.about .about-company .list ul li .t h6 {font-size: 28px;}
.about .about-company .txt > p{font-size:14px;}

.about-core .tit {margin-top: 0;}
.about-core .tit p{font-size: 13px;line-height: 20px;}

.about .honor .tit p{font-size:14px;}

}

@media screen and (max-width: 400px) {
.about-core .tit p{font-size: 12px;line-height: 18px;}
}