.joe_index{border-radius:var(--radius-wrap);padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}
.joe_index__banner{padding-top:15px;display:flex}
.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}
.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}
.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}
.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}
.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:var(--radius-inner);overflow:hidden}
.joe_index__banner-recommend .item:last-child{margin-bottom:0}
.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%}
.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));color:#fff;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.joe_index__banner-recommend .item .information .type{background-image:linear-gradient(270deg,#986fee,#8695e6,#68b7dd,#18d7d3);background-color:#8695e6;text-align:center;padding:0 8px;border-radius:2px;height:20px;font-size:12px;color:#fff;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px}
.joe_index__banner-recommend .item .information .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.joe_index__hot{padding-top:15px}
.joe_index__hot-list{display:grid;grid-template-columns:repeat(4,1fr);-webkit-column-gap:15px;column-gap:15px}
.joe_index__hot-list .item{overflow:hidden}
.joe_index__hot-list .item .link{display:block}
.joe_index__hot-list .item .link .inner{position:relative}
.joe_index__hot-list .item .link .inner:hover .image{opacity:.85}
.joe_index__hot-list .item .link .inner:hover .title{background:var(--classC)}
.joe_index__hot-list .item .link .inner .image{width:100%;height:120px;-o-object-fit:cover;object-fit:cover;transition:opacity .35s;border-radius:var(--radius-inner) var(--radius-inner) 0 0}
.joe_index__hot-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);transition:background .35s;border-radius:0 0 var(--radius-inner) var(--radius-inner)}
.joe_index__hot-list .item .link .inner .views{display:flex;align-items:center;position:absolute;z-index:1;top:5px;right:5px;background-image:linear-gradient(to right,#fc712a,#f84c39);background-color:#f84c39;color:#fff;font-size:12px;height:18px;padding:0 8px;border-radius:2px;white-space:nowrap}
.joe_index__ad{padding-top:15px}
.joe_index__ad-link{display:block;position:relative}
.joe_index__ad-link .image{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity .35s}
.joe_index__ad-link .image:hover{opacity:.85}
.joe_index__ad-link .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}
.joe_index__title{display:flex;align-items:center;border-bottom:1px solid var(--classC)}
.joe_index__title-title{position:relative;display:flex;align-items:center;color:var(--routine);font-weight:500;height:40px;line-height:40px}
.joe_index__title-title .item{cursor:pointer;margin-right:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color .35s}
.joe_index__title-title .item.active{color:var(--theme)}
.joe_index__title-title .line{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--theme);transition:left .35s,width .35s}
.joe_index__title-notice{display:flex;align-items:center;margin-left:auto;height:40px}
.joe_index__title-notice svg{min-width:20px;min-height:20px;width:20px;height:20px;margin-right:5px}
.joe_index__title-notice a{color:var(--minor);line-height:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .35s}
.joe_index__title-notice a:hover{color:var(--theme)}
.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color:#fff;border-radius:var(--radius-inner)}
.swiper-container .item{display:block;height:335px;border-radius:var(--radius-inner)}
.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity .35s}
.swiper-container .item .thumbnail:hover{opacity:.85}
.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:400}
.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:.5}
.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px}
.swiper-container.swiper-container-vertical .swiper-button-next,.swiper-container.swiper-container-vertical .swiper-button-prev{display:none}
.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{background:rgba(0,0,0,.1);transition:background .35s,right .35s,left .35s;border-radius:2px}
.swiper-container .swiper-button-next:hover,.swiper-container .swiper-button-prev:hover{background:rgba(0,0,0,.25)}
.swiper-container .swiper-button-next::after,.swiper-container .swiper-button-prev::after{font-size:20px}
.swiper-container .swiper-button-next{right:-27px}
.swiper-container .swiper-button-prev{left:-27px}
.swiper-container:hover .swiper-button-next{right:10px}
.swiper-container:hover .swiper-button-prev{left:10px}
/*tab_buttons*/
.tab_buttons { margin-bottom: 10px; width: 100%; overflow: hidden; border-bottom: var(--classC) 1px solid;/* position: relative; */ }
.tab_buttons li { color: var(--main);display: block; font-size: 16px; line-height: 40px; float: left; text-align: center; position: relative; cursor: pointer; padding: 0 20px; }
.newscurrent:after { content: ""; background: var(--main); width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; }
.newsitem { display: none; }
.newsitem:nth-child(1) { display: block; }
/*tab_box*/
a { text-decoration: none; color:var(--main); }
a:hover { color:var(--theme); text-decoration: none; }
.whitebg { background: var(--background); border-radius: 3px; padding: 20px; margin-bottom: 20px; overflow: hidden; }
.tab_box { clear: both; position: relative; }
.newslist { float: right; width: 66% }
.newslist li { overflow: hidden; line-height: 32px; padding: 0 20px 10px 20px; }
.newslist li a { height: 32px; }
.newslist li img { width: 100% }
.newslist li { height: 22px; }
.newslist li:hover { height: 100%; background: var(--classD) }
.newslist li:hover a { color: var(--main); font-weight: bold }
.newslist li:hover i { background: var(--main); }
.newslist li:nth-child(1) { height: 100%; background: var(--classD) }
.newslist li:nth-child(1) a { color: var(--main); font-weight: bold }
.newslist li:nth-child(1) i { background: var(--main); }
.newslist:hover li:nth-child(1) { height: 22px; background: none; }
.newslist:hover li:nth-child(1) a { color: var(--main); font-weight: normal }
.newslist:hover li:nth-child(1) i { background: var(--main); }
.newslist:hover li:nth-child(1):hover { height: 100%; background: var(--classD); }
.newslist:hover li:nth-child(1):hover a { color: var(--main); font-weight: bold }
.newslist:hover li:nth-child(1):hover i { background: var(--main); }
.newslist p {color:var(--main); line-height: 24px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; height: 48px; }
.newspic { float: left; width: 32%; height: 218px; overflow: hidden; position: relative; }
.newspic ul { overflow: hidden; }
.newspic li { height: 100px; position: relative; background: rgba(0,0,0,1); overflow: hidden; margin-bottom: 10px; border-radius: 3px }
.newspic li a { display: block; overflow: hidden }
.newspic img { height: 100%; width: 100%; opacity: .7; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s; }
.newspic span { bottom: 0; position: absolute; bottom: 30%; left: 0; right: 0; color: var(--classA); text-align: center; font-size: 15px; padding: 0 40px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; line-height: 22px; }
.newspic li:hover img { opacity: .9; transform: scale(1.1); }
.newsitem ul li i { display: block; width: 20px; height: 20px; background: var(--main); float: left; margin-top: 6px; margin-right: 20px; position: relative; font-style: normal }
.newsitem ul li i::before { position: absolute; left: 0; top: 0; font-size: 9px; color: var(--classA); line-height: 20px; width: 20px; text-align: center }
.newsitem ul li:first-child i { background: var(--main); }
.newsitem ul li:first-child i::before { content: "1"; }
.newsitem ul li:nth-child(2) i::before { content: "2"; }
.newsitem ul li:nth-child(3) i::before { content: "3"; }
.newsitem ul li:nth-child(4) i::before { content: "4"; }
.newsitem ul li:nth-child(5) i::before { content: "5"; }
 @media only screen and (max-width: 480px) {
.newspic { width: 100%; height: auto }
.newspic li { width: 49%; float: left }
.newspic li:last-child { float: right }
.newspic li a { height: 100% }
.newslist { float: none; width: 100% }
.newspic span { padding: 0 8px; }
.tab_buttons { overflow-x: auto; }
.tab_buttons ul { width: 800px; overflow-x: scroll; }
.newslist li { padding: 0 10px 10px 10px; }
.tab_buttons li { margin-right: 30px; width: auto; }
.newscurrent:after { width: 100%; }
}