*, *::before, *::after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
html {width: 100%;height:100%;font-size: 12px;}
body {background: #222;font-size:1.2rem;line-height: 1.42857143;color: #fff;padding: 0;margin: 0;width: 100%;height:100%;
    font-family: microsoft yahei ui, Roboto, Noto, Helvetica, Arial, sans-serif;}
body{text-size-adjust: none !important;}
ul,li,h1,h2,h3,h4,h5,h6,p,form,i,b {list-style: none;padding: 0;margin: 0;font-style: normal;font-weight: normal;}
input, button, select {outline: none;border: none;}
a {text-decoration: none;-webkit-transition: color .3s;-moz-transition: color .3s;-o-transition: color .3s;transition: color .3s;color:#fff;}
a:hover{color:#f66;}
::-moz-selection {background: #f66;color: #fff;}
::selection {background: #f66;color: #fff;}
::-webkit-scrollbar {width:.3rem;height:.3rem;background: #333;}
::-webkit-scrollbar-track {background: #333;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);}
::-webkit-scrollbar-thumb {background: #333;border-radius:.2rem;}
[data-icon] svg{width: 1.4rem;height: 1.4rem;margin-right:0.4rem;vertical-align:text-top;fill: currentColor;overflow: hidden;}


/**header**/
.header {position: fixed;top: 0;left: 0;z-index: 9;width: 100%;height:4.5rem;background: #222;box-shadow: 0 0 1.5rem #000;
    -webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;transition: all .3s;}
.header .header-body{position: relative;width: 95%;margin: auto;display: flex;justify-content: space-between;}
.header .header-left{display: inline-flex;}
.header .left-btn{width:4.5rem;height:4.5rem;cursor: pointer;position: relative;display:none;}
.header .lines{position: absolute;top: 50%;left: 25%;}
.header .lines>div{position:absolute;background:#fff;width:2rem;height:0.2rem;
	-webkit-transition:0.5s cubic-bezier(0.68,-0.55,0.27,1.55);transition:0.5s cubic-bezier(0.68,-0.55,0.27,1.55);}
.header .lines .line-1 {top:-0.8rem;}
.header .lines .line-2 {top:-0.2rem;}
.header .lines .line-3 {top:0.37rem;}
.header .left-btn:hover >.lines div{background:#f66;}
.header .left-btn.active .line-1{top:-2px;-webkit-transform:rotate(135deg);transform:rotate(135deg);}
.header .left-btn.active .line-2{opacity:0;}
.header .left-btn.active .line-3{top:-2px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
.header .left-logo{margin-right: 2rem;}
.header .logo {width:15rem;display: flex;align-items: center;height: 100%;}
.header .logo img {width:auto;height: 4.5rem;}
.header .left-menu{display: flex;}
.header .menu_li{margin-right:1rem;}
.header .menu_tit{line-height:4.5rem;display: block;padding:0 1rem;}
.header .menu_tit:hover{background:#333;color: #f66;}
.header .menu_tit svg{margin-left: 0.4rem;}
.header .menu_li:hover>ul{display:block;}
.header .menu_li>ul{position: absolute;top:4.5rem;background:#222;display:none;width: 10rem;}
.header .menu_li>ul>li{border-top:1px solid #555;}
.header .menu_li>ul>li a{display: block;text-align: center;height: 3.5rem;line-height: 3.5rem;line-height: 3.5rem;}
.header .menu_li>ul>li a:hover{background:#333;color: #f66}
.header .header-right{display: flex;align-items: center;}
.header .right-btn{position: absolute;top: 0;right: 0;width:4.5rem;height:4.5rem;cursor: pointer;display: none;
    -webkit-transform: scale(.8);-moz-transform: scale(.8);-o-transform: scale(.8);transform: scale(.8);
    -webkit-transition: transform .3s;-moz-transition: transform .3s;-o-transition: transform .3s;transition: transform .3s;}
.header .right-btn.active {-webkit-transform: rotateZ(90deg) scale(.8);-moz-transform: rotateZ(90deg) scale(.8);-o-transform: rotateZ(90deg) scale(.8);transform: rotateZ(90deg) scale(.8);}
.header .right-btn .line2{position: absolute;left: 0;right: 0;margin: 2rem auto;width: 2rem;height:0.2rem;background: #fff;}
.header .right-btn .line1{position: absolute;top: 1.2rem;right: 1.2rem;width: 1.3rem;height: 0.2rem;background: #fff;}
.header .right-btn .line3{position: absolute;left: 1.2rem;bottom: 1.5rem;width: 1.3rem;height: 0.2rem;background: #fff;}
.header .right-btn:hover > span{background:#f66;}
.header .right-menu {display: flex;}
.header .right-menu li {position: relative}
.header .right-menu.show li {-webkit-transform: translateX(-105%);-moz-transform: translateX(-105%);
    -o-transform: translateX(-105%);transform: translateX(-105%);}
.header .right-menu.show li:nth-child(even){transition-duration: .4s;}
.header .right-menu li::after {content: "";position: absolute;width: 0;height:0.2rem;left:50%;bottom:0;background: #f66;border-radius: 0.3rem;
    -webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;transition: all .3s;}
.header .right-menu li.active::after,.header .right-menu li:hover::after {width: 100%;margin-left: -50%;}
.header .right-menu li a {display: flex;align-items: center;padding:0 1rem;line-height: 4.5rem;
    -webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;transition: all .3s;}


/**main-model**/
.main-body{width: 95%;margin:6rem auto 1rem auto;}
.main-mod{margin:.5rem;}
.main-mod .mod-title{display: flex;justify-content: space-between;align-items: center;height:4rem;color: #fff;}
.main-mod .mod-title h2{display: flex;align-items: center;font-size: inherit;font-weight: 900;}
.main-mod .mod-title .more a{display: flex;align-items: center;}
.main-mod .botton-more{text-align: center;background-color: #333;border-radius: 0.5rem;}
.main-mod .botton-more a{display: inline-block;width: 100%;padding: 1rem 0;}

/**nav-link**/
.act-wrap a{margin-right: 1rem;border-radius: 0.5rem;background-color: #333;overflow: hidden;display: inline-flex;align-items: center;}
.act-wrap img{width:4rem;height:4rem;border-radius: 0.5rem;object-fit: cover;}
.act-wrap span{padding:0 0.5rem;}

/**card-list**/
.card-list{display:flex;flex-wrap: wrap;margin: 0 -0.5rem;}
.card-list .ele-card{padding-left: 0.5rem;padding-right: 0.5rem;margin-bottom: 1rem;flex:0 0 25%;min-width: 0;}
.card-list .ele-card.act{flex:0 0 12.5%;}
.card-list .ele-wrap{position: relative;background-color: #333;display: flex;flex-direction:column;border-radius:0.5rem;overflow: hidden;
    transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);
    -webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
.card-list .ele-wrap:hover{transform:translateY(-0.5rem);-webkit-transform:translateY(-0.5rem);-moz-transform:translateY(-0.5rem);
    box-shadow:0 2rem 3.5rem -2rem #000;-webkit-box-shadow:0 2rem 3.5rem -2rem #000;-moz-box-shadow:0 2rem 3.5rem -2rem #000}
.card-list .ele-info{overflow:hidden;-ms-flex: 1 1 auto; flex: 1 1 auto;padding: 0.5rem;}
.card-list .ele-img{width:100%; height:18rem;position: relative;}
.card-list .ele-img >div{width:100%;height:100%;}
.card-list .ele-img .img{width:100%;height:100%;object-fit: cover;}
.card-list .ele-img .preview-wrap-img{position: absolute;bottom: 0;left: 0;display:none;width:50%;height: auto;overflow: hidden;}
.card-list .ele-img .preview-wrap-img img{display: block;}
.card-list .ele-title ,.card-list .ele-summary{width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all; }
.card-list .ele-title{font-weight: 700; color: #fff;height:3rem;line-height: 3rem;}
.card-list .ele-summary{color:#888;font-size:1.3rem;}
.card-list .ele-ok{color: #fff;display: flex;margin:0.4rem 0;justify-content: space-between;}
.card-list .ele-ok>div{display: flex;}
.card-list .ele-ok span{margin-right: 1.5rem;display: flex;}

.card-list .ele-card.act .ele-img{height:8rem;}

/**video**/
.mod-video .dplayer-fix{display: none;filter: alpha(opacity: 80);opacity: 0.8;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;}
.mod-video .dplayer-msg{display: none;position: absolute;top: 20rem;width: 20rem;text-align: center;border: 3px solid rgb(255, 255, 255);left: 50%;
     margin-left: -10rem;padding: 1rem;border-radius: .5rem;background-color: rgb(0, 0, 0);}
.mod-video .dplayer-msg a{color: #fff;}
.mod-video .video-line{display:flex;justify-content:space-between;margin:1rem 0;}
.mod-video .video-line-sel{display: flex;align-items:center;}
.mod-video .video-line-sel a{margin:0 0.5rem;}
.mod-video .video-line-msg a{margin:0 0 0 0.5rem;}
.mod-video .linesel{color:#f66;}
.mod-video .video-page{margin-top: 1rem;}
.mod-video .video-page a{padding: 0.2rem 1rem;background-color: #333;border-radius: 0.5rem;display: inline-block;margin-right: 1rem;margin-bottom: 1rem;}
.mod-video .videosel{color:#f66;}
.mod-video .error-msg{text-align: center;line-height: 3rem;color: #f66;margin: 0.5rem 0;}
.mod-video .error-msg a{color:#f66;}
.mod-video h1{line-height: 3rem;font-weight: normal;font-size: inherit;width: 100%;
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis; word-break: break-all;}
.mod-video .item-desc{font-size: 1.3rem;height:3rem;position: relative;width:100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;padding: 0.5rem 0;margin-bottom: 1rem;}
.mod-video .item-desc .html{color: #999;line-height:2rem;}
.mod-video .item-desc.show{height:auto;white-space:normal;}
.mod-video .item-desc .desc-btn{position: absolute;top: 0;right: 0;background-color: #333;padding:0.2rem 1rem; border-radius:0.3rem;width: 4rem;display: flex;justify-content: center;}
.mod-video .desc-btn svg{margin:0;}
.mod-video .desc-btn:hover{background-color: #444;}
.mod-video .desc-btn.active{position: initial;margin:0.3rem auto;}
.mod-video .item-info{display:flex;justify-content: space-between;margin-top: 1rem;}
.mod-video .item-info>div{margin-bottom: 1rem;}
.mod-video .item-info .inf label{margin-right:0.8rem;display: inline-flex;align-items: center;}
.mod-video .item-info svg{}
.mod-video .item-info .opt a{margin-right:0.8rem;display: inline-flex;align-items: center;}
.mod-video .item-info .opt a:last-child{margin-right:0;}
.mod-video .opt span{padding-right:0.5rem;}
.mod-video .opt b{padding:0 0.5rem;}
.mod-video .cate-tag{display: flex;}
.cate-tag-box{display: flex;flex-wrap: wrap;}
.cate-tag-box>a{padding: 0.2rem 0.5rem;background-color: #333;border-radius: 0.5rem;display: inline-block;margin-right: 1rem;margin-bottom:1rem;}
/**login-msg**/
.login-view{}
.login-view .login-flx{background-color:rgba(0,0,0,0.9);position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.login-view .login-msg{position: fixed;top:40%;width:20rem;text-align: center;border: 2px solid #fff;left: 50%;margin-left:-10rem;padding:1.2rem;border-radius:0.5rem;background-color:rgba(0,0,0,1);}
.login-view .login-msg a{font-size:2rem;color: #fff;}
.login-view .login-msg a span{color: #fff;font-size:1.2rem;}

/**author**/
.mod-author{padding-top: 1.5rem;}
.mod-author .author{display: flex;margin-bottom: 1rem;border-radius:0.5rem;justify-content: space-between;background-color: #333;padding: 0.5rem;}
.mod-author .author-info{display: flex;align-items: center;}
.mod-author .author-info img{object-fit: cover;width: 3rem;height: 3rem;border-radius: 50%;}
.mod-author .a-info{margin-left: 1rem;max-width:20rem;overflow: hidden;}
.mod-author .a-info-name{font-size: 1.3rem;font-weight: 900;}
.mod-author .a-info-inf a{color: #999;display: inline-flex;margin-right: 0.8rem;align-items: center;}  
.mod-author .a-info-inf a:hover{color:#f66;}
.mod-author .author-opt{display: flex;justify-content: center;align-items: center}
.mod-author .author-opt a{padding:0.5rem 1rem;display: flex;background-color: #3c3c3c;border-radius: 0.5rem;align-items: center;}
.mod-author .author-opt a:hover{background-color: #444;}
.mod-author .author-opt a svg{}


/**comment**/
.mod-comment{}
.mod-comment .comment-form textarea{margin-bottom: 1rem;border-radius:0.5rem;padding:0.5rem;width:100%;height:8rem;border: 0;color: #fff;background-color: #333;}
.mod-comment .btn-submit{padding:0.5rem 1rem;text-align: center;cursor: pointer; border-radius:0.3rem;display:inline-flex;background-color: #333;align-items: center;}
.mod-comment .comment-wrap{margin-top:2rem;}
.mod-comment .comment-ele{display: flex;margin: 1rem 0;}
.mod-comment .ele-left{width:6rem;text-align: center;display: flex;flex-direction: column;align-items: center;}
.mod-comment .ele-left .ele_author{width: 100%;overflow: hidden;line-height: 2rem;white-space: nowrap; word-break: break-all;}
.mod-comment .ele-left img{width: 3rem;height: 3rem;border-radius: 0.3rem;}
.mod-comment .ele-right{width: 100%;position: relative;margin-left: 1.5rem;padding:0.4rem 1rem;line-height:2rem;border-radius: 0.3rem;border: 1px #555 solid;}
.mod-comment .ele-right::before{content: '';display: inline-block;border-top: 0.9rem solid transparent;border-bottom: 0.9rem solid transparent;border-right: 0.9rem solid #555;position: absolute;top:1.2rem;left: -0.9rem;}
.mod-comment .ele-time{display: flex;justify-content: space-between;}
.mod-comment .ele-time>div{display: flex;align-items: center;}
.mod-comment .comm-main{padding: 0.5rem 0;}
.mod-comment .comm-main p{line-height: 2rem;}
.mod-comment .cmt-good svg{cursor: pointer;}
.mod-comment .cmt-good svg:hover{color:#f66;}
.mod-comment .comn-reply{text-align: right;}

/**link**/
.mod-link{}
.mod-link .link-wrap{display: flex;}
.mod-link .link-ele{margin-right: 1rem;}

/**footer**/
.footer{border-top: 1px solid #000;margin: 2rem 0;}
.footer .footer-body{width: 95%;margin: 1rem auto;text-align: center;}
.footer .footer-body p{padding: 0.5rem;margin: 1rem 0;}
.footer .footer-body ul{width: 100%;display: flex;justify-content: space-between;padding:0.5rem;}
.footer .footer-body ul>li{display: flex;flex-direction: column;}
.footer .footer-body ul>li a{line-height: 2;}

/* 404 page */
.mod-error{}
.mod-error .error-wrap{display: flex;flex-direction: column;align-items: center;}
.mod-error .error-number{font-size: 5rem;}
.mod-error .handle-way-list{color: #555;margin: 2rem 0;}
.mod-error .handle-way-list li{line-height:2;}
.mod-error .handle-way-list a{color:#f66;}
/**search**/
.word-search{display: flex;justify-content: center;margin: 1rem 0 2rem 0;}
.word-search .wrap{display: flex;}
.word-search input{width: 20rem;height: 3rem;padding: 0 1rem;line-height: 3rem;}
.word-search button{height:3rem;width: 5rem;background: #f66;color: #fff;border: 0;cursor: pointer;font-weight: 900;font-size: 1.5rem;}

/**about**/
.mod-about .index-list{display: flex;flex-wrap: wrap;}
.mod-about .index-list li{margin: 0 1rem 1rem 0;}
.mod-about .index-list li a{padding: 0.5rem 1rem;border-radius: 0.3rem;background-color: #333;}
.mod-about .index-list li a:hover{background-color: #444;}

/**collect**/
.mod-collect{}
.mod-collect .sort-wrap{display: flex;justify-content: space-between;margin: 1rem 0;flex-wrap: wrap;}
.mod-collect .sort-btns{display: flex;margin-bottom: 1rem;}
.mod-collect .sort-btns li{margin-right: 1rem;}
.mod-collect .sort-btns li a{padding: 0.5rem 1rem;border-radius: 0.5rem;background-color: #333;}
.mod-collect .sort-btns li a:hover{background-color: #444;}
.mod-collect .sort-btns li a.current{background-color: #444;color:#f66;}
.mod-collect .sort-score{}
.mod-collect .sort-score span{}
.mod-collect .sort-score label{}
.mod-collect .sort-score input{}
.mod-collect .page-has{}
.mod-collect .page-not{text-align: center;margin: 1rem 0;}
.mod-collect .pager-wrap{display: flex;justify-content: center;margin: 1rem 0;}
.mod-collect .pager-wrap a{padding: 0.5rem 1rem;border-radius: 0.5rem;background-color: #333;}
.mod-collect .pager-wrap a:hover{background-color: #444;}
.mod-collect .pager-wrap a.current{color: #f66;}

.header-body{width:95%;max-width:1440px;}
.main-body{width:95%;max-width:1440px;}
.footer-body{width:95%;max-width: 1440px;}

@media (max-width:1280px) {
body{font-size:1.4rem;}
[data-icon] svg{width: 1.5rem;height: 1.5rem;margin-right:0.5rem;}
.header-body{width:97%;}
.main-body{width:97%;}
.footer-body{width:97%;}

.header .right-btn{display: block;}
.header .right-menu {flex-direction: column;position: fixed;top:4.5rem;right: 0;float: none;margin-left: 0;visibility: hidden;
text-align: right;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.header .right-menu.show{visibility: visible;}
.header .right-menu li {right:-105%;-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.header .right-menu li::after {display: none;}
.header .right-menu li a {padding:0.8rem;margin:0.3rem 0;background: #222;border-radius:2rem 0 0 2rem;line-height:normal;}
.header .right-menu li a:hover, .header .right-menu li a.active{color: #f66; background: #333;}

.card-list .ele-card{flex: 0 0 33.33%;}
.card-list .ele-card.act{flex: 0 0 16.66%;}
}
@media (max-width:1024px) {
html{font-size:14px;}
body{font-size:1.6rem;}
[data-icon] svg{width:1.6rem;height:1.6rem;margin-right:0.6rem;}
.header-body{width:100%;}
.main-body{width:100%;}
.footer-body{width:100%;}

.header .left-btn{display:block;}
.header .left-menu{display:block;position: fixed;top:-100%;left:0;background-color:#3a3a3a;width: 10rem;height: 100%;
    overflow-y: scroll;padding-bottom: 4.5rem;opacity: 0;transition: opacity .5s ease;}
.header .left-menu.show{opacity:1;top: 4.5rem;}
.header .menu_li{margin-right: auto;border-top: 1px solid #555;}
.header .menu_tit{line-height:normal;padding: 0.8rem;}
.header .menu_tit svg{display:none;}
.header .menu_li>ul{display:block;position: relative;top:0;background:#2a2a2a;width:100%;}

.mod-video .item-info{flex-direction: column;justify-content: normal;}
.card-list .ele-card{flex: 0 0 50%;}
.card-list .ele-card.act{flex: 0 0 25%;}
}