.faq {padding: 80px 0;background: #0E0E0E url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/d1a33698effdc1060e7bd1827e0c61d8/FAQ_bg.jpg) no-repeat;background-size: 100% auto;}
.faq .faq-tit {text-align: center;}
.faq .faq-tit h3 {font-size:clamp(24px, 3.15vw, 60px);line-height: 1;font-weight: 600;text-transform: capitalize;}
.faq .faq-tit p {margin-top:25px;font-size:20px;color:#8A8A8A;font-weight:300;line-height:1.8;}
.faq .faq-tit .faq-form form{margin: 35px auto 0;max-width: 820px;position: relative;}
.faq .faq-tit .faq-form form .post-text{height:75px;line-height:75px;overflow:hidden;color:#c1c1c1;padding:0 165px 0 45px;font-size:18px;background:#282828;border-radius: 38px;width: 100%;}
.faq .faq-tit .faq-form form .post-btn {background: transparent;border-radius: 27px;width: 150px;color: #fff;text-align: center;height: 53px;display: block;cursor: pointer;font-weight: 600;font-size: 18px;position: absolute;top: 11px;right: 11px;overflow: hidden;box-sizing: border-box;border: 1px solid #fff;transition: all .5s ease;}

.faq .faq-tit .faq-form form .post-btn:hover {border-color: #fff;background: transparent;border: 1px solid var(--color-primary);}
.faq .faq-tit .faq-form form .post-btn:hover::after {content: 'Search';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: 32px;animation: animation_btn .5s ease-in-out;font-size: inherit;}


.faq-list {margin-top: 130px;position: relative;}
.faq-list .faq-left {position: sticky;float: left;width: 320px;left: 0;top: 67px;}
.faq-list .faq-left .faq-menu ul li {overflow: hidden;}
.faq-list .faq-left .faq-menu ul li + li {margin-top: 24px;}
.faq-list .faq-left .faq-menu ul li a {font-size: 24px;color: #A3A3A3;display: block;line-height: 1.5;position: relative;}
.faq-list .faq-left .faq-menu ul li a::after {content: '';display: block;width: 23px;height: 3px;background: var(--color-primary);position: absolute;left: 0;top: 17px;transform: translateX(-30px);opacity: 0;}

.faq-list .faq-left .faq-menu ul li a:hover,.faq-list .faq-left .faq-menu ul li.active a {color: var(--color-primary);transition: all .8s ease;padding-left: 36px;}
.faq-list .faq-left .faq-menu ul li a:hover::after,.faq-list .faq-left .faq-menu ul li.active a::after {transition: transform .8s ease,opacity .4s ease;opacity: 1;transform: translateX(0);}

.faq-list .faq-right {margin-left: 360px;}

.faq-list .faq-right .s-tit{display:flex;justify-content:space-between;align-items:center;}
.faq-list .faq-right .s-tit h3 {font-size:clamp(22px, 2.5vw, 48px);line-height: 1;text-transform: capitalize;color: #fff;}
.faq-list .faq-right .s-tit > a {position:relative;display:inline-block;background:rgba(0,0,0,0);border:1px solid #fff;color:#fff;border-radius:24px;padding:8px 24px;font-size:16px;font-weight:500;text-decoration:none;overflow:hidden;}
.faq-list .faq-right .s-tit > a:hover::before {content:"View All";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 .3s ease-in-out;}
.faq-list .faq-right .s-tit > a.leaving::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);border-radius:20px;animation:animation_btn_leave .3s ease-in-out;}
.faq-list .faq-right .s-tit > a:hover {border:1px solid var(--color-primary);color:rgba(0,0,0,0);transition:all .3s;}




.faq .list ul li{border-bottom:1px solid #434343;padding:20px 0;position:relative;}
.faq .list ul li::after{content: '';display: none;height: 100%;width: 4px;position: absolute;top: 0;left: 0;}
.faq .list ul li .tit{cursor:pointer;position:relative;display:flex;justify-content:flex-start;padding:10px 0;}
.faq .list ul li .tit .date-month{font-size:20px;color:#fff;display:block;text-align:center;font-weight: 600;}
.faq .list ul li .tit h4{flex:1;font-size:20px;color:#fff;font-weight:500;margin:0 50px 0 5px;}
.faq .list ul li .tit::after{position:absolute;right:0;top:3px;content:"+";font-size:28px;height:44px;color:#fff;transition: all .5s ease;width: 44px;line-height: 42px;background: #050505;border-radius: 50%;border: 1px solid #2F2F2F;text-align:center;}

.faq .list ul li .con{padding:10px 0 0;display:none;}
.faq .list ul li .con .date-day{float:left;line-height:2;font-size:18px;color:#8A8A8A;display:block;text-align:center;}
.faq .list ul li .con .t{margin:0 0 0 36px;font-size:18px;line-height:2;font-weight:300;color:#8A8A8A;}
.faq .list ul li .con .t p {font-size:18px;line-height:2;color: inherit;}

.faq .list ul li .tit.active::after{content:"-";background-image: linear-gradient(to bottom, #3A3A3A, #1D1D1D);}
.faq .list ul li:hover::after{display: block;}

.faq-more {margin-top:55px;border-radius:180px;position:relative;overflow:hidden;width:100%;}
.faq-more img {width:100%;}
.faq-more .txt {position: absolute;text-align:center;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:0 15px;}
.faq-more .txt h3 {font-size:clamp(20px, 2.5vw, 48px);line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;}
.faq-more .txt p {font-size: 18px;line-height: 1;color: #8A8A8A;margin-top: 25px;}
.faq-more .txt a {display: block;width: 240px;line-height: 62px;box-sizing: border-box;border-radius: 32px;border: 1px solid #fff;margin: 30px auto 0;font-size: 18px;color: #fff;position: relative;overflow: hidden;transition: all .5s ease;}

.faq-more .txt a:hover {border-color: var(--color-primary);}
.faq-more .txt a:hover::before {content: 'Contact Us';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: 32px;animation: animation_btn .5s ease-in-out;font-size: 18px;}



@media screen and (max-width:1441px) {
.faq{padding:70px 0;}
.faq-list .faq-left .faq-menu ul li a{font-size:22px;}

.faq .faq-tit p{font-size:18px;}

.faq-list{margin-top:110px;}
.faq .list ul li .tit h4{font-size:18px;}

.faq-more .txt p {font-size:17px;}
.faq-more .txt a {width:220px;line-height:58px;font-size:17px;}
}


@media screen and (max-width:1281px){
.faq{padding:60px 0;}

.faq .faq-tit .faq-form form .post-text{height:65px;line-height:65px;padding:0 165px 0 25px;}
.faq .faq-tit .faq-form form .post-btn{width:140px;height:45px;font-size:18px;top:10px;right:10px;}

.faq .faq-tit p{font-size:17px;margin-top:20px;}

.faq-list{margin-top:90px;}
.faq-list .faq-left .faq-menu ul li a{font-size:20px;}

.faq .list ul li .tit .date-month{font-size:18px;}
.faq .list ul li .tit h4{font-size:17px;}
.faq .list ul li .tit::after{font-size:26px;height:40px;width:40px;line-height:38px;}

.faq .list ul li .con .t{font-size:17px;}
.faq .list ul li .con .date-day{line-height:1.6;font-size:17px;}
.faq .list ul li .con .t{line-height:1.6;}

.faq-list .faq-left{width:280px;}
.faq-list .faq-right{margin-left:320px;}

.faq-more .txt p{margin-top:20px;}
.faq-more .txt a{width:200px;line-height:50px;font-size:16px;margin:20px auto 0;}

}

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

}

@media screen and (max-width:992px){
.faq{padding:50px 0;}

.faq-list{margin-top:50px;}

.faq-list .faq-left{width:100%;float:none;position:static;}
.faq-list .faq-left .faq-menu ul{display:flex;justify-content:center;flex-wrap:wrap;}
.faq-list .faq-left .faq-menu ul li + li{margin:0 0 0 20px;}
.faq-list .faq-left .faq-menu ul li a{font-size:19px;}
.faq-list .faq-left .faq-menu ul li a:hover, .faq-list .faq-left .faq-menu ul li.active a{padding-left:0;}
.faq-list .faq-left .faq-menu ul li a::after{display:none;}

.faq-list .faq-right{margin:40px 0 0;}

.faq-list .faq-left .faq-menu ul li a {color: #fff;}

}

@media screen and (max-width:768px){
.faq{padding:30px 0;}
.faq .faq-tit p{font-size:16px;margin-top:15px;line-height:1.5;}
.faq .faq-tit .faq-form form{margin:25px auto 0;}
.faq .faq-tit .faq-form form .post-btn{width:120px;height:40px;font-size:16px;top:8px;right:8px;}
.faq .faq-tit .faq-form form .post-text{height:56px;line-height:56px;padding:0 165px 0 20px;font-size:16px;}

.faq-list .faq-left .faq-menu ul li a{font-size:18px;}

.faq .list ul li{padding:10px 0;}
.faq .list ul li .tit{padding:8px 0;}
.faq .list ul li .tit .date-month{font-size:16px;font-weight:400;}
.faq .list ul li .tit h4{font-size:16px;margin:0 45px 0 5px;}
.faq .list ul li .tit::after{font-size:22px;height:34px;width:34px;line-height:32px;}

.faq .list ul li .con .date-day{line-height:1.5;font-size:16px;}
.faq .list ul li .con .t{font-size:16px;line-height:1.5;}

.faq-more{margin-top:30px;border-radius:80px;}
.faq-more img{min-height:200px;object-fit:cover;}
.faq-more .txt p{margin-top:15px;font-size:16px;}
.faq-more .txt a{width:170px;line-height:40px;font-size:15px;margin:15px auto 0;}

}

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

}

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

}

@media screen and (max-width:480px) {
.faq .faq-tit p{font-size:15px;margin-top:10px;}
.faq .faq-tit .faq-form form .post-text{height:50px;line-height:50px;padding:0 115px 0 15px;font-size:15px;}
.faq .faq-tit .faq-form form .post-btn{width:100px;height:34px;font-size:15px;font-weight:400;}

.faq-list .faq-left .faq-menu ul li a{font-size:16px;}

.faq .list ul li .tit .date-month{font-size:15px;}
.faq .list ul li .tit h4{font-size:15px;}
.faq .list ul li .tit::after{font-size:18px;height:28px;width:28px;line-height:26px;}

.faq .list ul li .con .date-day{font-size:15px;}
.faq .list ul li .con .t{font-size:15px;}



}	

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

}