@charset "UTF-8";


.service {background: #101010 url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/829e7ac7953c3053360ee9040b5176fe/servicebg1.jpg') no-repeat center top;background-size: 100% auto;}

.service-list {padding: 60px 0;}
.service-list .tit{text-align:center;}
.service-list .tit h3{font-size:clamp(22px, 2.5vw, 48px);line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;}
.service-list .list {position: relative;margin-top: 60px;}
.service-list .list .pic {position: relative;overflow: hidden;cursor: pointer;}
.service-list .list .pic::after {content: '';position: absolute;left: 0;width: 100%;bottom: 0;height: 36%;background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 90%);background-image: -moz-linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 90%);background-image: -o-linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 90%);background-image: linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 90%);z-index: 9;}
.service-list .list .pic .txt {position: absolute;left: 0;width: 100%;bottom: 60px;padding: 0 20px;transition: all .7s ease;z-index: 10;transform: translateY(50px);}
.service-list .list .pic .txt h5 {font-size: 24px;line-height: 1;color: #fff;font-weight: 600;}
.service-list .list .pic .txt h5 a {color: inherit;}
.service-list .list .pic .txt p {font-size: 16px;line-height: 1.5;color: #B6B6B6;margin-top: 10px;}
.service-list .list .pic .txt a.more {position: relative;overflow: hidden;display: inline-block;line-height: 33px;padding:0 60px;border-radius: 18px;border: 1px solid #fff;background: transparent;margin-top: 15px;font-size: 16px;color: #fff;opacity: 0;transition: opacity 1.2s ease,border .7s ease;visibility: hidden;}

.service-list .list .pic:hover .txt {transform: translateY(0);}
.service-list .list .pic:hover .txt a.more {opacity: 1;visibility: initial;}
.service-list .list .pic .txt a.more:hover {border:1px solid var(--color-primary);}
.service-list .list .pic .txt a.more:hover::before {content: 'More Case';display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;color: #fff;background: var(--color-primary);border-radius: 20px;animation: animation_btn .5s ease-in-out;padding:0 60px;font-size: 16px;}

.service-list .list .swiper-button-prev,.service-list .list .swiper-button-next{overflow:hidden;background:none;margin-top:0;color:#fff;width: 48px;height: 48px;border-radius: 50%;line-height: 46px;background: rgba(255,255,255,.32);transition: all .4s ease 0s;border: 1px solid #fff;box-sizing: border-box;}
.service-list .list .swiper-button-prev,.service-list .list .swiper-container-rtl .swiper-button-next{left:-90px;right:auto;}
.service-list .list .swiper-button-next,.service-list .list .swiper-container-rtl .swiper-button-prev{right:-90px;left:auto;}
.service-list .list .swiper-button-next::after,.service-list .list .swiper-button-prev::after {display:none;}
.service-list .list .swiper-button-prev i,.service-list .list .swiper-button-next i{color:inherit;font-size:16px;display:inline-block;}
.service-list .list .swiper-button-next::before{content: '\e650';}
.service-list .list .swiper-button-prev::before{content: '\e64f';}
.service-list .list .swiper-button-next::before,.service-list .list .swiper-button-prev::before {font-family: "qico" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;background: var(--color-primary);position: absolute;top: 100%;left: 0;width: 100%;height: 100%;border-radius: 50%;color: #fff;display: flex;justify-content: center;align-items: center;transition: top .6s ease-in-out;z-index: 2;pointer-events: none;}
.service-list .list .swiper-button-next:hover::before,.service-list .list .swiper-button-prev:hover::before{top: 0;}
.service-list .list .swiper-button-next:hover,.service-list .list .swiper-button-prev:hover{border-color: var(--color-primary);}

.service-list .list .swiper-pagination-bullets{position:static;width:100%;margin-top:30px;display: none;}
.service-list .list .swiper-pagination-bullet {width:10px;height:10px;margin:0 4px;background:#C5C5C5;border-radius:50%;opacity:1;box-sizing:border-box;}
.service-list .list .swiper-pagination-bullet-active{background:var(--color-primary);}


.service-quality {padding: 60px 0 0;}
.service-quality .container {display: flex;align-items: flex-start;}
.service-quality .container .pic {width: 41.3%;}
.service-quality .container .pic h3 {font-size:clamp(22px, 2.5vw, 48px);line-height: 1.25;color: #fff;font-weight: 600;text-transform: capitalize;}
.service-quality .container .pic .img {overflow: hidden;border-radius: 20px;margin-top: 35px;}

.service-quality .container .txt {flex: 1;margin-left: 130px;}
.service-quality .container .txt ul li{border-bottom:1px solid #434343;padding:25px 0;position: relative;}
.service-quality .container .txt ul li:first-child {border-top: 1px solid #434343;}
.service-quality .container .txt ul li::after{content: '';display: none;height: 100%;width: 4px;position: absolute;top: 0;left: 0;}
.service-quality .container .txt ul li .tit{cursor:pointer;position:relative;display:-webkit-flex;display:flex;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;align-items:center;}
.service-quality .container .txt ul li .tit h4{-webkit-flex:1;flex:1;font-size:30px;color:#fff;font-weight:700;margin:0 0 0 5px;line-height: 60px;}
.service-quality .container .txt ul li .tit::after{position:absolute;right:0;top:8px;content:"+";font-size:36px;height:44px;color:#fff;transition: all .5s ease;width: 44px;line-height: 42px;text-align: center;}

.service-quality .container .txt ul li .con{padding:10px 0 0;display:none;}
.service-quality .container .txt ul li .con .t{font-size:18px;line-height:2;font-weight:300;color:#8A8A8A;padding-left: 50px;position: relative;}
.service-quality .container .txt ul li .con .t + .t {margin-top: 20px;}
.service-quality .container .txt ul li .con .date-day{width:42px;line-height:42px;height:42px;font-size:20px;color:#DADADA;display:block;text-align:center;position: absolute;border-radius: 50%;background: #484849;left: 0;top: 2px;}
.service-quality .container .txt ul li .con .t p {font-size:16px;line-height:30px;color: inherit;}

.service-quality .container  ul li .tit.active::after{content:"-";}
.service-quality .container  ul li:hover::after{display: block;}


.service-solution {margin-top: 75px;}
.service-solution h3 {font-size:clamp(22px, 2.5vw, 48px);line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;}
.service-solution .list {margin-top: 50px;}
.service-solution .list .box {display: flex;justify-content: space-between;align-items: center;background: #0D0D0D;}
.service-solution .list .box:hover {background: #181818;transition: all .5s ease;}
.service-solution .list .box .txt {flex: 1;padding-left: 110px;padding-right: 80px;}
.service-solution .list .box .txt h5 {font-size: 30px;font-weight: 500;color: #fff;line-height: 1;}
.service-solution .list .box .txt .t {margin-top: 20px;font-size: 18px;color: #8A8A8A;}
.service-solution .list .box .txt .t p {line-height: 2;}

.service-solution .list .box .pic {width: 39.5%;overflow: hidden;}
.service-solution .list .box .pic img {width: 100%;}


.after-sale {padding: 90px 0 70px;background: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/f5f4b0546e48bb0c6cef78fef6cfb865/servicebg.jpg') no-repeat;background-size: cover;}
.after-sale .tit{text-align:center;}
.after-sale .tit h3 {font-size:clamp(22px, 2.5vw, 48px);line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;}
.after-sale ul {margin: 390px -20px 0;display: flex;flex-wrap: wrap;justify-content: center;}
.after-sale ul li {width: 33.333%;padding: 0 20px;box-sizing: border-box;}
.after-sale ul li .box {position: relative;border-radius: 22px;padding: 45px 20px 35px;}
.after-sale ul li .box span {font-size: 28px;font-weight: 700;width: 70px;text-align: center;line-height: 70px;border-radius: 50%;background: var(--color-primary);color: #fff;position: absolute;left: 20px;top: -35px;}
.after-sale ul li .box h5 {font-size: 24px;font-weight: 600;color: #fff;line-height: 1;}
.after-sale ul li .box .t {font-size: 17px;line-height: 30px;color: #fff;margin-top: 10px;height: 90px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.after-sale ul li .box .t p {line-height: 30px;}
.after-sale ul li:nth-child(1) .box {background: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/5c8b7a97ce179fe03d8e3c7039b26e65/bg1.jpg');background-size: cover;}
.after-sale ul li:nth-child(2) .box {background: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/53f51b8ba639c9486c4a46268e7b148c/bg2.jpg');background-size: cover;}
.after-sale ul li:nth-child(3) .box {background: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/50fcd195877f4e4b131b3059ff38c1aa/bg3.jpg');background-size: cover;}

.team {padding: 120px 0 100px;background: #020202 url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/ec7eee268be2c9c7f4022415fcd70000/servicebg2.jpg') no-repeat center top;background-size: 100% auto;}
.team .tit{text-align:center;}
.team .tit h3 {font-size:clamp(22px, 2.5vw, 48px);line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;}
.team ul {margin: 50px -10px 0;display: flex;flex-wrap: wrap;}
.team ul li {width: 25%;padding: 0 10px;box-sizing: border-box;}
.team ul li .pic {overflow: hidden;border-radius: 20px;}
.team ul li .pic img {width: 100%;}
.team ul li p {margin-top: 25px;font-size: 18px;line-height: 1;color: #8A8A8A;text-align: center;}


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

.service-list {padding: 50px 0;}
.service-list .list {margin-top: 50px;}
.service-list .list .pic .txt {bottom: 50px;padding: 0 15px;}
.service-list .list .pic .txt h5 {font-size: 20px;}
.service-list .list .pic .txt p {font-size: 15px;margin-top: 8px;}
.service-list .list .pic .txt a.more {padding: 0 50px;}
.service-list .list .pic .txt a.more:hover::before{padding:0 50px;}
.service-list .list .swiper-button-next, .service-list .list .swiper-container-rtl .swiper-button-prev {right: -60px;}
.service-list .list .swiper-button-prev, .service-list .list .swiper-container-rtl .swiper-button-next {left: -60px;}

.service-quality {padding: 50px 0 0;}
.service-quality .container .txt {margin-left: 70px;}
.service-quality .container .txt ul li {padding: 20px 0;}
.service-quality .container .txt ul li .tit h4 {font-size: 24px;line-height: 50px;}
.service-quality .container .txt ul li .tit::after {top: 5px;font-size: 34px;height: 40px;width: 40px;line-height: 38px;}
.service-quality .container .txt ul li .con .t p {font-size: 15px;line-height: 28px;}
.service-quality .container .txt ul li .con .t + .t {margin-top: 17px;}
.service-quality .container .txt ul li .con .date-day {width: 39px;line-height: 39px;height: 39px;font-size: 19px;top: 6px;}

.service-solution .list .box .txt {padding-left: 90px;padding-right: 60px;}
.service-solution .list .box .txt h5 {font-size: 24px;}
.service-solution .list .box .txt .t {margin-top: 17px;font-size: 17px;}
.service-solution .list .box .txt .t p {line-height: 1.9;}

.after-sale ul {margin: 270px -15px 0;}
.after-sale ul li {padding: 0 15px;}
.after-sale ul li .box h5 {font-size: 20px;}
.after-sale ul li .box .t {font-size: 16px;}
.after-sale ul li .box {padding: 40px 17px 30px;}
.after-sale ul li .box span {font-size: 26px;width: 60px;line-height: 60px;left: 17px;top: -30px;}

.team {padding: 90px 0 70px;}
.team ul {margin: 70px -10px 0;}
.team ul li p {margin-top: 20px;font-size: 17px;}
}
 
@media screen and (max-width: 1440px) {
.service-list .list .pic .txt a.more {padding: 0 45px;}
.service-list .list .pic .txt a.more:hover::before{padding:0 45px;}
}
                                          
@media screen and (max-width: 1367px) {

.service-list {padding: 40px 0;}
.service-list .list {margin-top: 40px;}
.service-list .list .pic .txt {bottom: 40px;padding: 0 10px;}
.service-list .list .pic .txt h5 {font-size: 18px;}
.service-list .list .pic .txt p {font-size: 14px;margin-top: 6px;}
.service-list .list .pic .txt a.more {padding:0 40px;}
.service-list .list .pic .txt a.more:hover::before{padding:0 40px;}

.service-list .list .swiper-button-next, .service-list .list .swiper-container-rtl .swiper-button-prev {right: -50px;}
.service-list .list .swiper-button-prev, .service-list .list .swiper-container-rtl .swiper-button-next {left: -50px;}

.service-quality {padding: 40px 0 0;}
.service-quality .container .txt {margin-left: 50px;}
.service-quality .container .txt ul li {padding: 15px 0;}
.service-quality .container .txt ul li .tit h4 {font-size: 22px;line-height: 40px;}
.service-quality .container .txt ul li .tit::after {top: 2px;font-size: 32px;height: 36px;width: 36px;line-height: 34px;}
.service-quality .container .txt ul li .con .t p {font-size: 14px;line-height: 26px;}
.service-quality .container .txt ul li .con .t + .t {margin-top: 14px;}
.service-quality .container .txt ul li .con .date-day {width: 36px;line-height: 36px;height: 36px;font-size: 18px;top: 4px;}

.service-solution .list .box .txt {padding-left: 60px;padding-right: 40px;}
.service-solution .list .box .txt h5 {font-size: 22px;}
.service-solution .list .box .txt .t {margin-top: 14px;font-size: 16px;}
.service-solution .list .box .txt .t p {line-height: 1.8;}

.after-sale ul {margin: 210px -10px 0;}
.after-sale ul li .box h5 {font-size: 18px;}
.after-sale ul li .box .t {font-size: 15px;}
.after-sale ul li .box {padding: 35px 14px 25px;}
.after-sale ul li .box span {font-size: 24px;width: 50px;line-height: 50px;left: 14px;top: -25px;}

.team {padding: 60px 0 40px;}
.team ul {margin: 50px -10px 0;}
.team ul li p {margin-top: 15px;font-size: 16px;}
}
                                    
@media screen and (max-width: 1280px) {
.service-quality .container .txt ul li .tit h4{font-size:20px;}

.service-list .list .pic .txt a.more {padding:0 30px;font-size:15px;}
.service-list .list .pic .txt a.more:hover::before{padding:0 30px;font-size:15px;}

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

.service-list {padding: 30px 0;}
.service-list .list .pic::after {height: 100%;background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 100%);background-image: -moz-linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 100%);background-image: -o-linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 100%);background-image: linear-gradient(bottom, rgba(0,0,0, .7) 0%, rgba(0,0,0, 0) 100%);}
.service-list .list .pic .txt a.more {padding: 0 20px;line-height:30px;}
.service-list .list .pic .txt a.more:hover::before{padding:0 20px;}

.service-list .list .swiper-button-prev, .service-list .list .swiper-button-next {display: none;}
.service-list .list .pic .txt {transform: translateY(0);}
.service-list .list .pic .txt a.more {opacity: 1;visibility: initial;}
.service-list .list .pic .txt p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}

.service-list .list .swiper-pagination-bullets {display: block;}

.service-quality {padding: 20px 0 0;}
.service-quality .container {display: block;}
.service-quality .container .pic {width: 100%;text-align: center;}
/*
:not(.rich-text) img {width: 100%;}
*/
.service-quality .container .txt {margin-left: 0;margin-top: 20px;}
.service-quality .container .txt ul li {padding: 10px 0;}
.service-quality .container .txt ul li .tit h4 {font-size:18px;line-height: 32px;}
.service-quality .container .txt ul li .tit::after {top: 0;font-size: 30px;height: 32px;width: 32px;line-height: 32px;}

.service-solution {margin-top: 30px;}
.service-solution .list {margin-top: 30px;}
.service-solution .list .box {display: block;}
.service-solution .list .box .txt {padding: 20px 25px;}

.service-solution .list .box .txt h5 {font-size: 18px;}
.service-solution .list .box .pic {width: 100%;}

.after-sale {padding: 30px 0;}
.after-sale ul {margin: 40px -10px 0;}
.after-sale ul li {padding: 20px 10px;width: 50%;}

.team {padding: 30px 0;}
.team ul {margin: 30px -10px 0;}
.team ul li {width: 50%;padding: 10px;}
}
                                
@media screen and (max-width: 768px) {
.service-quality .container .txt ul li .tit h4 {font-size:17px;}

.service-solution .list .box .txt .t{font-size:15px;}
.service-solution .list .box .txt .t p{line-height:1.5;}

.service-list .list .pic .txt{bottom:20px;}
.service-list .list .pic .txt h5{font-size:17px;}

}

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

.after-sale ul li {padding: 20px 10px;width: 100%;}

.service-quality .container .txt ul li .tit h4 {font-size:16px;}

.service-list .list .pic .txt a.more{padding:0 15px;font-size:14px;line-height:28px;}
.service-list .list .pic .txt a.more:hover::before{padding:0 15px;font-size:14px;}

.service-list .list .pic .txt h5{font-size:16px;}

}

@media screen and (max-width: 420px) {
.service-quality .container .txt ul li .tit h4{font-size:15px;}

}