@charset "utf-8";


.about {padding: 60px 0 80px;}
.about .box {display: flex;align-items: center;}
.about .box .txt {flex: 1;margin-right: 60px;}
.about .box .txt h3 {color: #000;font-size: clamp(20px, 2.5vw, 48px);font-weight: 700;line-height: 1;text-transform: uppercase;margin-bottom: 25px;}
.about .box .txt {color: #4A4A4A;font-size: 18px;line-height: 26px;}
.about .box .txt dl {margin: 40px -25px 0;display: flex;flex-wrap: wrap;}
.about .box .txt dl dd {width: 33.333%;padding: 0 25px;box-sizing: border-box;}
.about .box .txt dl dd .t {border-bottom: 2px solid #B1B2B4;padding-bottom: 20px;}
.about .box .txt dl dd .t h6 {color: #6E4627;font-size: clamp(20px, 2.3vw,40px);font-weight: 900;line-height: 1;position: relative;display: inline-block;}
.about .box .txt dl dd .t h6::after {content: attr(date-txt);position: absolute;color: #6E4627;font-size: clamp(20px, 2.3vw,40px);font-weight: 900;line-height: 1;left: 101%;top: 10px;text-transform: capitalize;}
.about .box .txt dl dd .t h5{color: #A3A3A3;font-size: 16px;line-height: 1;margin-top: 10px;}

.about .box .pic {width: 41.7%;overflow: hidden;}
.about .box .pic img {width: 100%;}

.about .list {margin-top: 70px;display: none;}
.about .list .years{text-align:center;font-size:0;background: url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/templates/429062/3226/2f3933ee-7dc9-476c-96d1-913cb241f86d-biaochi.png) no-repeat center bottom;display: flex;justify-content: center;}
.about .list .years .yy{cursor:pointer;position: relative;display:block;width:108px;height:310px;background-size: contain;position: relative;}
.about .list .years .yy::after {content: '';height: 60px;width: 1px;background: #0A0A0A;transition: all .9s ease;position: absolute;bottom: 0;left: 55px;}
.about .list .years .yy.on::after {height: 100%;background-color: var(--color-primary);}
.about .list .years .yy.on{width:540px;}
.about .list .years .yy span{display:block;color: #0D0D0D;font-size: 24px;font-weight: 700;line-height: 1;text-align: center;position: absolute;bottom: -45px;width: 108px;left: 0;}
.about .list .years .yy.on span {color: var(--color-primary);}
.about .list .years .yy .ss{text-align:left;position: absolute;top: 0;left: 110px;width: 450px;transform: translateX(-15px);opacity: 0;visibility: hidden;}
.about .list .years .yy.on .ss{opacity: 1;transform: translateX(0);visibility: inherit;transition: all .9s ease;}
.about .list .years .yy .ss h4 {color: #0D0D0D;font-size: 30px;font-weight: 700;line-height: 1;}
.about .list .years .yy .ss p{color: #676767;font-size: 18px;line-height: 30px;margin-top: 10px;}
.about .list .years .yy .pic{position: absolute;top: 0;left: -250px;width: 280px;transform: translateX(30px);opacity: 0;visibility: hidden;}
.about .list .years .yy.on .pic{opacity: 1;transform: translateX(0);visibility: inherit;transition: all 1.5s ease;}

.about .list .years .yy .ss h5 {font-size: 30px;font-weight: bold;line-height: 36px;color: #fff;}


.about-vision {padding: 100px 0;background: #F5F5F5;}
.about-vision .container {display: flex;justify-content: space-between;}
.about-vision .box {width: calc(50% - 18px);background: #fff;padding: 75px 45px;text-align: center;}
.about-vision .box h3 {color: #000;font-size: clamp(20px, 2.5vw, 48px);font-weight: 700;line-height: 1;text-transform: uppercase;}
.about-vision .box {color: #4A4A4A;font-size: 18px;line-height: 30px;margin-top: 30px;}

.about-service {padding: 100px 0;}
.about-service h3 {color: #000;font-size: clamp(20px, 2.5vw, 48px);font-weight: 700;line-height: 1;text-transform: uppercase;}
.about-service h4 {color: #6E4627;font-size: 24px;font-weight: 700;line-height: 1;margin-top: 0px;}
.about-service .t {margin-top: 25px;color: #4A4A4A;font-size: 18px;}
.about-service .t p{line-height: 30px;}
.about-service .t h5 {color: #000;font-size: 20px;font-weight: 700;line-height: 30px;}
.about-service .t dl dd {line-height: 30px;padding-left: 25px;position: relative;}
.about-service .t dl dd::after {content: ''; width: 5px;height: 5px;border-radius: 50%;background: #464646;position: absolute;left: 5px;top: 13px;}
.about-service .list {margin-top: 60px;position: relative;}
.about-service .list .swiper-button-prev,.about-service .list .swiper-button-next{width:36px;height:36px;line-height:36px;top:calc(50% - 18px);overflow:hidden;margin-top:0;text-align:center;color:#000;}
.about-service .list .swiper-button-next::after,.about-service .list .swiper-button-prev::after {display:none;}
.about-service .list .swiper-button-prev i,.about-service .list .swiper-button-next i{color:inherit;font-size:36px;display:inline-block;}
.about-service .list .swiper-button-prev,.about-service .list .swiper-container-rtl .swiper-button-next{left:-40px;}
.about-service .list .swiper-button-next,.about-service .list .swiper-container-rtl .swiper-button-prev{right:-40px;}
.about-service .list .swiper-button-prev:hover,.about-service .list .swiper-button-next:hover{color:var(--color-primary);}

.about-service .list .swiper-pagination-bullets{position:static;font-size:0;margin-top:30px;display:none;}
.about-service .list .swiper-pagination-bullets .swiper-pagination-bullet{width:12px;height:12px;margin:0 5px;text-align:center;opacity:1;background:#fff;border: 1px solid var(--color-primary);}
.about-service .list .swiper-pagination-bullets .swiper-pagination-bullet-active{background: var(--color-primary);}

.about-production {padding: 100px 0;background: #F4F6F3;}
.about-production h3 {color: #000;font-size: clamp(20px, 2.5vw, 48px);font-weight: 700;line-height: 1;text-transform: uppercase;}
.about-production .box {margin-top: 30px;display: flex;align-items: center;}
.about-production .box:nth-child(2n+1) {flex-direction: row-reverse;}
.about-production .box .pic {width: 47%;overflow: hidden;}
.about-production .box .txt {flex: 1;margin: 0 0 0 30px;}
.about-production .box:nth-child(2n+1) .txt {margin: 0 30px 0 0;}
.about-production .box .txt span {display: inline-block;width: 56px;height: 56px;background: var(--color-primary);line-height: 56px;text-align: center;color: #FFF;font-size: 20px;font-weight: 700;}
.about-production .box .txt h5 {margin: 15px 0;color: #000;font-size: 24px;font-weight: 700;line-height: 1;}
.about-production .box .txt {color: rgba(74, 74, 74, 0.64);font-size: 18px;line-height: 30px;}
.about-production .box .txt dl dd {color: rgba(74, 74, 74, 0.64);font-size: 18px;line-height: 30px;padding-left: 25px;position: relative;}
.about-production .box .txt dl dd::after {content: ''; width: 5px;height: 5px;border-radius: 50%;background: #464646;position: absolute;left: 5px;top: 13px;}

.company {padding: 90px 0;}
.company h3 {color: #000;font-size: clamp(20px, 2.5vw, 48px);font-weight: 700;line-height: 1;text-transform: uppercase;}
.company .text1 {display: flex;}
.company .text1 .txt {flex: 1;margin-right: 50px;}
.company .text1 .txt .t {margin-top: 35px;}
.company .text1 .txt .t {color: #4A4A4A;font-size: 18px;line-height: 30px;}
.company .text1 .txt .t p + p {margin-top: 25px;}
.company .text1 .pic {width: 46%;overflow: hidden;}
.company .text2 {margin-top: 30px;}
.company .text2 h4 {color: #6E4627;font-size: 24px;font-weight: 700;line-height: 36px;margin-top: 25px;}
.company .text2 .t {color: #4A4A4A;font-size: 18px;line-height: 30px;margin-top: 25px;}
.company .text2 .t p {line-height: 30px;}
.company .text2 .pic {margin-top: 25px;text-align: center;}
.company .text2 .pic img {max-width: 100%;}

@media screen and (max-width: 1550px) {
.about .box .txt h3 {margin-bottom: 20px;}
.about .box .txt {font-size: 17px;line-height: 24px;}
.about .box .txt {margin-right: 40px;}
.about .box .txt dl {margin: 35px -20px 0;}
.about .box .txt dl dd {padding: 0 20px;}
.about .box .txt dl dd .t h6,.about .box .txt dl dd .t h6::after {font-size: 50px;}
.about .box .txt dl dd .t h6::after {top: 7px;}
.about .box .txt dl dd .t h5 {font-size: 15px;margin-top: 8px;}
.about .box .txt dl dd .t {padding-bottom: 15px;}

.about-vision {padding: 80px 0;}
.about-vision .box {padding: 65px 40px;}
.about-vision .box {font-size: 17px;line-height: 28px;margin-top: 25px;}

.about-service {padding: 80px 0;}
.about-service h4 {font-size: 22px;}
.about-service .t {margin-top: 20px;font-size: 17px;}
.about-service .list {margin-top: 50px;}
.about-service .t p {line-height: 28px;}

.about-production {padding: 80px 0;}
.about-production .box .txt h5 {font-size: 22px;}
.about-production .box .txt {font-size: 17px;line-height: 28px;}

.company {padding: 70px 0;}
.company .text1 .txt .t {margin-top: 30px;}
.company .text1 .txt .t {font-size: 17px;line-height: 28px;}
.company .text2 h4 {font-size: 22px;line-height: 1.5;}

.company .text2 .t {font-size: 17px;line-height: 28px;}
}
 
@media screen and (max-width: 1440px) {
.about .box .txt dl dd .t h6,.about .box .txt dl dd .t h6::after {font-size: 46px;}
}
                                          
@media screen and (max-width: 1367px) {
.about .box .txt h3 {margin-bottom: 15px;}
.about .box .txt {font-size: 16px;line-height: 22px;}
.about .box .txt {margin-right: 30px;}
.about .box .txt dl {margin: 30px -15px 0;}
.about .box .txt dl dd {padding: 0 15px;}
.about .box .txt dl dd .t h6,.about .box .txt dl dd .t h6::after {font-size: 42px;}
.about .box .txt dl dd .t h5 {font-size: 14px;margin-top: 6px;}
.about .box .txt dl dd .t {padding-bottom: 10px;}

.about-vision {padding: 60px 0;}
.about-vision .box {padding: 55px 35px;}
.about-vision .box {font-size: 16px;line-height: 26px;margin-top: 20px;}

.about-service {padding: 60px 0;}
.about-service h4 {font-size: 20px;}
.about-service .t {margin-top: 15px;font-size: 16px;}
.about-service .list {margin-top: 40px;}
.about-service .t p {line-height: 26px;}

.about-production {padding: 60px 0;}
.about-production .box .txt h5 {font-size: 20px;}
.about-production .box .txt {font-size: 16px;line-height: 26px;}

.company {padding: 50px 0;}
.company .text1 .txt .t {margin-top: 25px;}
.company .text1 .txt .t {font-size: 16px;line-height: 26px;}
.company .text2 h4 {font-size: 20px;}

.company .text2 .t {font-size: 16px;line-height: 26px;}
}
                                    
@media screen and (max-width: 1280px) {
.about .box .txt dl dd .t h6,.about .box .txt dl dd .t h6::after {font-size: 38px;}
}
                                
@media screen and (max-width: 992px) {
.about {padding: 30px 0;}
.about .box {flex-direction: column-reverse;}
.about .box .txt {margin-right: 0;}
.about .box .txt h3 {margin-bottom: 10px;}
.about .box .txt dl {margin: 15px -10px 0;justify-content: center;}
.about .box .txt dl dd {padding: 10px;width: 50%;}
.about .box .txt dl dd .t h6,.about .box .txt dl dd .t h6::after {font-size: 32px;}
.about .box .txt dl dd .t h6::after {top: 5px;}
.about .box .txt dl dd .t h5 {font-size: 14px;margin-top: 5px;}
.about .box .pic {width: 100%;margin-bottom: 20px;}

.about-vision {padding: 30px 0;}
.about-vision .container {display: block;}
.about-vision .box {padding: 35px 25px;width: 100%;}
.about-vision .box + .box {margin-top:15px;}
.about-vision .box {font-size: 15px;line-height: 22px;margin-top: 15px;}

.about-service {padding: 30px 0;}
.about-service h4 {font-size: 18px;}
.about-service .t {margin-top: 10px;font-size: 15px;}
.about-service .list {margin-top: 20px;}
.about-service .list .swiper-button-prev, .about-service .list .swiper-button-next {display: none;}
.about-service .list .swiper-pagination-bullets { display: block;}
.about-service .list .swiper-pagination-bullets .swiper-pagination-bullet{width:8px;height:8px;}
.about-service .t p {line-height: 24px;}

.about-production {padding: 30px 0;}
.about-production .box {margin-top: 20px;display: block;}
.about-production .box .txt h5 {font-size: 18px;margin: 7px 0;}
.about-production .box .txt {font-size: 15px;line-height: 24px;}
.about-production .box .pic {width: 100%;}
.about-production .box .txt {margin: 20px 0 0;}
.about-production .box:nth-child(2n+1) .txt { margin: 20px 0 0;}
.about-production .box .txt span {width: 44px;height: 44px;line-height: 44px;font-size: 18px;}

.company {padding: 30px 0;}
.company .text1 .txt .t {margin-top: 15px;}
.company .text1 .txt .t {font-size: 15px;line-height: 24px;}
.company .text2 h4 {font-size: 18px;margin-top: 15px;}
.company .text1 {display: block;}
.company .text1 .txt {margin-right: 0;}
.company .text1 .pic {width: 100%;margin-top: 20px;}

.company .text2 .t {font-size: 15px;line-height: 24px;margin-top: 15px;}
}
                                
@media screen and (max-width: 768px) {
.about .box .txt {font-size: 15px;line-height: 20px;}
.about .box .txt dl dd .t h6,.about .box .txt dl dd .t h6::after {font-size: 28px;}
.about-service .t p {line-height: 24px;}
}

@media screen and (max-width: 480px) {
.about .box .txt dl dd .t h6,.about .box .txt dl dd .t h6::after {font-size: 24px;}
}

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