@charset "UTF-8";

.path {}
.path p {font-size: 18px;line-height: 1;color: #858585;text-transform: capitalize;}


.news-read {background-image:url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/b8dbe0592f25e3ab0fadc87e3f1fc511/news_detail_bg.jpg) ;background-size:100% auto;position: relative;padding: 0 0 90px;}
.news-read .news-left {padding: 40px 0 0;margin-right: 470px;border-right: 1px solid #414141;padding-right: 95px;min-height: 1600px;}

.news-read .news-right {width: 400px;float: right;margin-top: 90px;}
.news-read .news-right h3 {font-size: 30px;line-height: 1;font-weight: 600;color: #fff;}
.news-read .news-right > div + div {margin-top: 35px;}
.news-read .left-form form{margin-top: 20px;width: 100%;position: relative;}
.news-read .left-form form .post-text{height:62px;line-height:62px;overflow:hidden;color:#c1c1c1;padding:0 100px 0 25px;font-size:17px;background:#282828;border-radius: 38px;width: 100%;}
.news-read .left-form form .post-btn {background: transparent;border-radius: 27px;width: 95px;color: #fff;text-align: center;height: 48px;display: block;cursor: pointer;font-weight: 600;font-size: 17px;position: absolute;top: 7px;right: 7px;overflow: hidden;box-sizing: border-box;border: 1px solid #fff;transition: all .5s ease;}


.news-read .left-form form .post-btn:hover {border-color: var(--color-primary);background: transparent;}
.news-read .left-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;}

.news-read .news-excellent .list {margin-top: 50px;position: relative;}
.news-read .news-excellent .swiper-pagination-bullets{width:100%;text-align: right;top: -75px;right: 0;bottom: auto;}
.news-read .news-excellent .swiper-pagination-bullet {width:10px;height:10px;margin:0 3px;background:#C5C5C5;border-radius:50%;opacity:1;box-sizing:border-box;}
.news-read .news-excellent .swiper-pagination-bullet-active{background:var(--color-primary);}
.news-read .news-excellent .tit {display: flex;align-items: center;justify-content: space-between;}
.news-read .news-excellent .tit h6 {font-size: 16px;line-height: 1;color: #fff;}
.news-read .news-excellent .tit span {font-size: 16px;line-height: 1;color: #8A8A8B;}
.news-read .news-excellent .pic {margin-top: 20px;overflow: hidden;}
.news-read .news-excellent .pic img {width: 100%;}
.news-read .news-excellent .txt {margin-top: 25px;}
.news-read .news-excellent .txt h5 {font-size: 24px;line-height: 1.5;color: #fff;font-weight: 500;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news-read .news-excellent .txt p {font-size: 16px;line-height: 30px;color: #8A8A8A;margin-top: 15px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

.news-read .news-latest .box {margin-top: 50px;position: relative;}
.news-read .news-latest .box .tit {display: flex;align-items: center;justify-content: space-between;}
.news-read .news-latest .box .tit h6 {font-size: 16px;line-height: 1;color: #fff;}
.news-read .news-latest .box .tit span {font-size: 16px;line-height: 1;color: #8A8A8B;}
.news-read .news-latest .box .pic {margin-top: 20px;overflow: hidden;}
.news-read .news-latest .box .pic img {width: 100%;}
.news-read .news-latest .box .txt {margin-top: 25px;}
.news-read .news-latest .box .txt h5 {font-size: 24px;line-height: 1.5;color: #fff;font-weight: 500;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news-read .news-latest .box .txt p {font-size: 16px;line-height: 30px;color: #8A8A8A;margin-top: 15px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}


.newsnr {margin-top: 60px;}
.newsnr h1,.newsnr h2 {font-size: 60px;line-height: 72px;color: #fff;font-weight: 600;text-transform: capitalize;}

.artInfo {margin-top: 30px;display: flex;justify-content: space-between;align-items: center;}
.artInfo .t {display: flex;}
.artInfo .t span {font-size: 18px;line-height: 1;color: #d1d1d1;font-weight: 300;}
.artInfo .t span + span {margin-left: 50px;}

.artInfo .share a{display:inline-block;color:#A2A2A2;width:34px;height:34px;line-height:34px;text-align:center;transition: all .5s ease;}
.artInfo .share a+a{margin-left:20px;}
.artInfo .share a i{font-size:24px;color:inherit;}
.artInfo .share a:hover{color:#fff;color:var(--color-primary);}

.myart {font-size: 18px;color: #8A8A8A;margin-top: 80px;}
.myart p {line-height: 2;}
.myart p + p {margin-top: 35px;}
.myart p img {overflow: hidden;border-radius: 20px;}

.end {margin-top: 65px;display: flex;align-items: center;}
.end hr {flex: 1;height: 1px;background: #5D5D5D;}
.end h5 {font-size: 18px;line-height: 1;color: #fff;font-weight: 600;padding: 0 8px;}

.pnbar {margin-top: 65px;display: flex;justify-content: center;gap: 20px;}
.pnbar p {width: 50px;height: 50px;line-height: 48px;border: 1px solid rgba(255,255,255,.62);text-align: center;border-radius: 50%;position: relative;overflow: hidden;transition: all .5s ease;}
.pnbar p a {display: block;line-height: 48px;}
.pnbar p i {font-size: 20px;color: #fff;}

.pnbar p.no-link{border: 1px solid rgba(255,255,255,.2);}
.pnbar p.no-link a{pointer-events:none;cursor:not-allowed;}
.pnbar p.no-link i {color:rgba(255,255,255,.2);}

.pnbar p:not(.no-link):hover {border-color: var(--color-primary);}
.pnbar p.prev a:hover::before{content:"\e64f";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: 50%;animation: animation_btn .5s ease-in-out;font-family: "qico" !important;font-size: 20px;color: #fff;}
.pnbar p.next a:hover::before{content:"\e650";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: 50%;animation: animation_btn .5s ease-in-out;font-family: "qico" !important;font-size: 20px;color: #fff;}


@media screen and (max-width: 1550px) {
.news-read .news-right {width: 340px;margin-top: 70px;}
.news-read .news-right h3 {font-size: 27px;}
.news-read .news-right > div + div {margin-top: 30px;}
.news-read .news-excellent .txt {margin-top: 20px;}
.news-read .news-excellent .txt h5 {font-size: 22px;}
.news-read .news-excellent .txt p {line-height: 28px;margin-top: 13px;}
.news-read .news-latest .box {margin-top: 40px;}
.news-read .news-latest .box .txt h5 {font-size: 22px;}
.news-read .news-latest .box .txt p {line-height: 28px;margin-top: 13px;}
.news-read .left-form form .post-text {height: 56px;line-height: 56px;font-size: 16px;}
.news-read .left-form form .post-btn {font-size: 16px;top: 6px;right: 6px;height: 44px;}
    
.news-read .news-left {padding: 30px 0 0;margin-right: 380px;padding-right: 65px;}
.newsnr {margin-top: 50px;}
.newsnr h1, .newsnr h2 {font-size: 55px;line-height: 66px;}
.artInfo .t span {font-size: 17px;}
.artInfo .t span + span {margin-left: 30px;}
.artInfo .share a {width: 30px;height: 30px;line-height: 30px;}
.artInfo .share a i {font-size: 22px;}
.artInfo .share a + a {margin-left: 15px;}

.myart {font-size: 17px;margin-top: 60px;}
.myart p + p {margin-top: 25px;}
.news-read .news-excellent .list {margin-top: 40px;}

.end {margin-top: 50px;}
.end h5 {font-size: 17px;}

.pnbar {margin-top: 50px;gap: 15px;}
.pnbar p {width: 46px;height: 46px;line-height: 44px;}
.pnbar p a {line-height: 44px;}
}
 
@media screen and (max-width: 1440px) {
.newsnr h1, .newsnr h2 {font-size: 50px;line-height: 60px;}
}
                                          
@media screen and (max-width: 1367px) {
.news-read .news-right {width: 280px;margin-top: 50px;}
.news-read .news-right h3 {font-size: 24px;}
.news-read .news-right > div + div {margin-top: 25px;}
.news-read .news-excellent .list {margin-top: 30px;}
.news-read .news-excellent .txt {margin-top: 15px;}
.news-read .news-excellent .txt h5 {font-size: 20px;}
.news-read .news-excellent .txt p {line-height: 26px;margin-top: 11px;}
.news-read .news-latest .box {margin-top: 30px;}
.news-read .news-latest .box .txt h5 {font-size: 20px;}
.news-read .news-latest .box .txt p {line-height: 26px;margin-top: 11px;}
.news-read .left-form form .post-text {height: 50px;line-height: 50px;font-size: 15px;}
.news-read .left-form form .post-btn {font-size: 15px;top: 5px;right: 5px;height: 40px;}

.news-read .news-left {padding: 30px 0 0;margin-right: 310px;padding-right: 55px;}
.newsnr {margin-top: 40px;}
.newsnr h1, .newsnr h2 {font-size: 45px;line-height: 54px;}
.artInfo .t span {font-size: 16px;}
.artInfo .t span + span {margin-left: 20px;}
.artInfo .share a {width: 26px;height: 26px;line-height: 26px;}
.artInfo .share a i {font-size: 20px;}
.artInfo .share a + a {margin-left: 10px;}

.myart {font-size: 16px;margin-top: 40px;}
.myart p + p {margin-top: 15px;}

.end {margin-top: 35px;}
.end h5 {font-size: 16px;}

.pnbar {margin-top: 35px;gap: 10px;}
.pnbar p {width: 42px;height: 42px;line-height: 40px;}
.pnbar p a {line-height: 40px;}
}
                                    
@media screen and (max-width: 1280px) {
.newsnr h1, .newsnr h2 {font-size: 40px;line-height: 48px;}
}
                                
@media screen and (max-width: 992px) {
.path p {font-size: 16px;}

.news-read {padding: 30px 0;}
.news-read .news-right {float: none;width: 100%;margin-top: 0;}
.news-excellent,.news-latest {display: none;}
.news-read .news-right h3 {font-size: 20px;}
.news-read .left-form form {margin-top: 10px;}

.news-read .news-left {padding: 20px 0 0;margin-right: 0;border: none;min-height: auto;}
.newsnr {margin-top: 20px;}
.newsnr h1, .newsnr h2 {font-size: 36px;line-height: 42px;}

.artInfo {margin-top: 20px;}

.myart {margin-top: 20px;}
.myart p {line-height: 1.8;}
.myart p + p {margin-top: 10px;}

.end {margin-top: 20px;}

.pnbar {margin-top: 20px;gap: 5px;}
.pnbar p {width: 38px;height: 38px;line-height: 36px;}
.pnbar p a {line-height: 36px;}
.pnbar p i {font-size: 18px;}


}
                                
@media screen and (max-width: 768px) {
.newsnr h1, .newsnr h2 {font-size: 32px;line-height: 40px;}

.artInfo {display: block;}
.artInfo .t span {font-size: 14px;}
.artInfo .share {margin-top: 10px;}
}

@media screen and (max-width: 480px) {
.newsnr h1, .newsnr h2 {font-size: 28px;line-height: 36px;}

.artInfo .t {display: block;}
.artInfo .t span {display: block;}
.artInfo .t span + span {margin-top: 10px;margin-left: 0;}
}

@media screen and (max-width: 400px) {
.newsnr h1, .newsnr h2 {font-size: 24px;line-height: 30px;}
}