.news-list {padding: 90px 0 40px;background: url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/6f4f3deaf6b431afbaeb5d9fa145712d/%E6%9C%AA%E6%A0%87%E9%A2%98-1.jpg) no-repeat;background-size: 100% auto;background-position: center top;
}
.news-list h3 {font-size:clamp(24px, 3.15vw, 60px);line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;text-align: center;display: block;}
.news-list .news-inquiry {max-width: 800px;margin: 35px auto 0;}
.news-list .news-inquiry form {width: 100%;position: relative;}
.news-list .news-inquiry 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%;}
.news-list .news-inquiry form .post-btn {background: var(--color-primary);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;}
.news-list .tit p {font-size: 14px;line-height: 18px;color: #8A8A8A;text-align: center;margin-top: 25px;}
.news-list .tit p a {font-size: 15px;line-height: 18px;color: #fff;display: inline-block;transition: all .3s ease;}
.news-list .tit p a + a {margin-left: 15px;}
.news-list .tit p a:hover {color: var(--color-primary);}

.news-list .news-inquiry 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;}
.news-list .news-inquiry form  .post-btn:hover {border-color: #fff;background: transparent;border: 1px solid var(--color-primary);}
.news-list .news-inquiry 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;}


.news-tab {padding-top: 100px;}
.news-tab ul {display: flex;justify-content: center;flex-wrap: wrap;gap: 13px;}
.news-tab ul li a {display:block;overflow: hidden;border-radius: 6px;border: 1px solid #5B5B5B;transition: all .5s ease;line-height: 40px;padding:0 16px;font-size: 18px;color: #fff;font-weight: 500;position: relative;}
.news-tab ul li a:hover,.news-tab ul li.active a {border-color: var(--color-primary);}
.news-tab ul li a:hover::after,.news-tab ul li.active a::after {content:attr(data-text);display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;font-size: 18px;padding:0 16px;color: #fff;font-weight: 500;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%);}
}

.news-list .list ul {display: flex;flex-wrap: wrap;margin: 62px -13px 0;}
.news-list .list ul li {padding: 13px;width: 25%;}
.news-list .list ul li .box {border-radius: 10px;overflow: hidden;transition: all .5s ease;}
.news-list .list ul li .box .pic {border-radius: 6px;overflow: hidden;transition: all .3s ease;}
.news-list .list ul li .box .pic img {width: 100%;}
.news-list .list ul li .box .txt {padding: 15px 15px 40px;}
.news-list .list ul li .box .txt h6 {font-size: 16px;color: #fff;line-height: 1;position: relative;display: inline-block;transition: all .3s ease;}
.news-list .list ul li .box .txt h6 a {display: block;line-height: 22px;border-radius: 4px;position: absolute;padding: 0 10px;white-space: nowrap;left: calc(100% + 15px);top: calc(50% - 11px);color: #fff;font-size: 12px;}

.news-list .list ul li.item-50 .box .txt h6 a{background: #797979;}
.news-list .list ul li.item-51 .box .txt h6 a{background: var(--color-primary);}
.news-list .list ul li.item-52 .box .txt h6 a{background: #fff;color: #0B0B0B;}

.news-list .list ul li .box .txt h5 {font-size:24px;line-height: 1.5;color: #fff;text-transform: capitalize;margin-top: 10px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news-list .list ul li .box .txt h5 a {display: block;transition: all .3s ease;}
.news-list .list ul li .box .txt p {font-size: 16px;line-height: 30px;color: #8A8A8A;font-weight: 300;margin-top: 15px;transition: all .3s ease;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}


.news-list .list ul li .box:hover {background: #202020;}
.news-list .list ul li .box:hover .pic {border-radius: 0;}
.news-list .list ul li .box:hover .txt h6 {color: #fff;}
.news-list .list ul li .box:hover .txt h5 a {color: var(--color-primary);}
.news-list .list ul li .box:hover .txt p {color: #fff;}

/*----page----*/
#pagesize{margin:50px 0 0;text-align:center;}
#pagesize ul{font-size:0;}
#pagesize ul li{display:inline-block;vertical-align:top;}
#pagesize ul li a{margin:0 19px !important;display:inline-block !important;background:transparent !important;font-size:20px !important;width: 34px !important;height: 34px !important;line-height: 34px !important;border-radius: 2px !important;font-weight: 600 !important;color: #fff !important;border: 1px solid transparent !important;padding:0 !important;}
#pagesize ul li:first-child,#pagesize ul li:last-child {display:none !important;}
#pagesize ul li a:hover{background:var(--color-primary) !important;color: #fff !important;box-shadow: none !important;}
#pagesize ul li span{line-height:16px;padding:8px 13px;margin:0 2px;display:inline-block;font-size:20px;}
#pagesize ul li a.active{border:var(--color-primary) 1px solid;background:var(--color-primary) !important;color:#fff !important;}

.news-industry {padding: 90px 0 70px;background-color: #0E0E0E;}
.news-industry h3 {line-height: 1;color: #fff;font-weight: 500;text-transform: capitalize;}
.news-industry .list {margin-top: 40px;position: relative;}
.news-industry .list .box {padding: 45px 0;display: flex;align-items: center;}
.news-industry .list .box + .box {border-top: 1px solid #323232;}
.news-industry .list .box .pic {width: 27%;overflow: hidden;border-radius: 10px;}
.news-industry .list .box .pic img {width: 100%;}
.news-industry .list .box .txt {flex: 1;margin-left: 110px;}
.news-industry .list .box .txt h5 {font-size: 30px;line-height: 1;color: #fff;font-weight: 500;text-transform: capitalize;}
.news-industry .list .box .txt p {font-size: 16px;line-height: 30px;color: #8A8A8A;margin-top: 20px;}
.news-industry .list .box .txt a.more {padding: 0 35px;line-height: 38px;border-radius: 20px;overflow: hidden;position: relative;font-size: 16px;color: #fff;transition: all .5s ease;display: inline-block;margin-top: 30px;background: #212121;}

.news-industry .list .box .txt a.more:hover {border-color: var(--color-primary);}
.news-industry .list .box .txt a.more:hover::before {content: 'Explore More';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;font-size: 16px;}

.news-industry .list .swiper-pagination-bullets{position:static;width:100%;margin-top:70px;}
.news-industry .list .swiper-pagination-bullet {width:12px;height:12px;margin:0 10px !important;background:#C5C5C5;border-radius:50%;opacity:1;box-sizing:border-box;}
.news-industry .list .swiper-pagination-bullet-active{background:var(--color-primary);}


@media screen and (max-width: 1550px) {
.news-list {padding: 70px 0 55px;}
.news-list .news-inquiry {margin: 30px auto 0;}
.news-list .news-inquiry form .post-text {height: 65px;line-height: 65px;padding: 0 155px 0 35px;font-size: 17px;}
.news-list .news-inquiry form .post-btn {width: 140px;height: 47px;font-size: 17px;top: 9px;right: 9px;}
.news-list .tit p {margin-top: 20px;}

.news-tab {padding-top: 75px;}
.news-tab ul li a {line-height: 38px;padding: 0 14px;font-size: 17px;}
.news-tab ul li a:hover::after, .news-tab ul li.active a::after{font-size: 17px;padding:0 14px;}

.news-list .list ul {margin: 49px -11px 0;}
.news-list .list ul li {padding: 11px;}
.news-list .list ul li .box .txt {padding: 11px 11px 30px;}
.news-list .list ul li .box .txt h5 {font-size:22px;margin-top: 8px;}
.news-list .list ul li .box .txt p {line-height: 28px;margin-top: 13px;}

.news-industry {padding: 70px 0 55px;}
.news-industry .list {margin-top: 30px;}
.news-industry .list .box {padding: 35px 0;}
.news-industry .list .box .txt {margin-left: 70px;}
.news-industry .list .box .txt h5 {font-size: 24px;}
.news-industry .list .box .txt p {line-height: 28px;margin-top: 17px;}
.news-industry .list .box .txt a.more {padding: 0 30px;margin-top: 25px;}
.news-industry .list .swiper-pagination-bullets {margin-top: 50px;}
}
 
@media screen and (max-width: 1440px) {
.news-list .list ul li .box .txt h6{font-size:15px;}
.news-list .list ul li .box .txt h5 {font-size:20px;}
}
                                          
@media screen and (max-width: 1367px) {
.news-list {padding: 50px 0 40px;}
.news-list .news-inquiry {margin: 25px auto 0;}
.news-list .news-inquiry form .post-text {height: 55px;line-height: 55px;padding: 0 145px 0 25px;font-size: 16px;}
.news-list .news-inquiry form .post-btn {width: 130px;height: 39px;font-size: 16px;top: 8px;right: 8px;}
.news-list .tit p {margin-top: 15px;}

.news-tab {padding-top: 50px;}
.news-tab ul li a {line-height: 36px;padding: 0 12px;font-size: 16px;}
.news-tab ul li a:hover::after, .news-tab ul li.active a::after{font-size: 16px;padding:0 12px;}

.news-list .list ul {margin: 41px -9px 0;}
.news-list .list ul li {padding: 9px;}
.news-list .list ul li .box .txt {padding: 13px 13px 35px;}
.news-list .list ul li .box .txt h5 {font-size: 18px;margin-top: 6px;}
.news-list .list ul li .box .txt p {line-height: 26px;margin-top: 11px;}

.news-industry {padding: 50px 0 40px;}
.news-industry .list {margin-top: 20px;}
.news-industry .list .box {padding: 25px 0;}
.news-industry .list .box .txt {margin-left: 50px;}
.news-industry .list .box .txt h5 {font-size: 22px;}
.news-industry .list .box .txt p {line-height: 26px;margin-top: 14px;}
.news-industry .list .box .txt a.more {padding: 0 25px;margin-top: 20px;}
.news-industry .list .swiper-pagination-bullets {margin-top: 30px;}
}
                                    
@media screen and (max-width: 1280px) {
.news-list .list ul li .box .txt h6{font-size:14px;}
.news-list .list ul li .box .txt p{font-size:15px;line-height:24px;}
.news-list .list ul li .box .txt h6 a{display:none;}
.news-industry .list .box .txt h5{font-size:20px;}
.news-industry .list .box .txt p{font-size:15px;line-height:24px;}
}

@media screen and (max-width:1171px) {
.news-list .list ul li{width:33.333333%;}
}

@media screen and (max-width: 992px) {
.news-list .list ul {margin: 33px -7px 0;}
.news-list .list ul li {padding: 7px;}
.news-list .list ul li .box .txt h6 a {padding: 0 5px;left: calc(100% + 8px);font-size: 10px;}
.news-list .list ul li .box .txt h5{font-size:17px;}

.news-industry {padding: 30px 0;}
.news-industry h3 {text-align: center;}
.news-industry .list {margin-top: 15px;}
.news-industry .list .box {display: block;padding: 20px 0;}
.news-industry .list .box .pic {width: 70%;margin: 0 auto;}
.news-industry .list .box .txt {margin-left: 0;text-align: center;margin-top: 20px;}
.news-industry .list .box .txt h5 {font-size:18px;}
}
                                
@media screen and (max-width: 768px) {

.news-tab ul li a{font-size:15px;}
.news-tab ul li a:hover::after, .news-tab ul li.active a::after{font-size:15px;}

.news-list .list ul {margin: 25px -5px 0;}
.news-list .list ul li {padding: 5px;width: 50%;}
.news-list .list ul li .box .txt h5{font-size:16px;}

.news-industry .list .box .txt h5 {font-size:17px;}
.news-industry .list .swiper-pagination-bullets {margin-top: 20px;}
}

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

.news-list .news-inquiry form .post-text{height:50px;line-height:50px;padding:0 105px 0 15px;font-size:14px;}
.news-list .news-inquiry form .post-btn{width:90px;height:34px;font-size:14px;}

.news-tab ul li a{line-height:32px;font-size:14px;}
.news-tab ul li a:hover::after, .news-tab ul li.active a::after{font-size:14px;}

.news-list .list ul li {width: 100%;}

.news-industry .list .box .pic {width: 100%;}
.news-industry .list .box .txt h5 {font-size:16px;}
.news-industry .list .box .txt p{font-size:14px;line-height:22px;}
}

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

}