*{margin:0;padding:0;font-family: "微软雅黑";}
html{background-color:#2C2C2C;color:#fff;}

/* 自定义滚动条 */  
::-webkit-scrollbar{width:10px;}  
::-webkit-scrollbar-track {background: transparent;}  
::-webkit-scrollbar-thumb {background: #666;border-left:1px solid #444444;border-right:1px solid #444444;}  
::-webkit-scrollbar-thumb:hover {background: #888;}  

/* 头部Banner */
.header{width:100%;height:220px;position:relative;background:#222;text-align:center;padding:30px 0 0 0;box-sizing: border-box;color:#FC8302;background-image: url(../images/banner.png);background-size:cover;background-position: center;}
.header h1{font-size:68px;background: linear-gradient(to bottom, #FC8302, #FFEFDE);-webkit-background-clip: text;color: transparent;}
.header h3{font-size:45px;background: linear-gradient(to bottom, #FC8302, #FFEFDE);-webkit-background-clip: text;color: transparent;}

/* 分类导航 */
.navtabs{width:100%;margin:5px 0 0 0;display:flex;flex-wrap:wrap;justify-content:center;}
.navtabs dl{width:180px;height:120px;padding:8px;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;cursor:pointer;}
.navtabs dl:hover,.navtabsbtn.active{background:#1E1E1E;border-bottom:2px solid #FC8302;}
.navtabs dl dt{width:50px;height:50px;}
.navtabs dl dt img{width:50px;height:50px;}
.navtabs dl dd{width:150px;height:50px;text-align:center;margin-top:5px;}
.navtabs dl dd p{font-size:18px;}
.navtabs dl dd span{font-size:13px;color:#989898;}
.navtabs a{text-decoration: none;color:#fff;}

/* 模板列表 */
.tpllist{display:none;list-style:none;width:100%;padding:0 10px 40px 50px;box-sizing: border-box;float:left;border-bottom:0px solid #444444;border-top:1px solid #444444;}
#home-tpl.tpllist{display:block;}
.tpllist li {width:340px;height:300px;border:1px solid #3B3B3B;border-radius:8px;background-color:#1E1E1E;float:left;margin:20px 20px 0px 0;}
.tpllist li:hover{border:1px solid #5F5F5F;}
.tplcover{width:310px;height:210px;margin:15px;cursor:pointer;background-repeat:no-repeat;background-size:contain;background-position: center;}
.tplinfo{width:100%;height:60px;background:#2C2C2C;border-radius:0 0 8px 8px;}
.tplinfo dt{width:240px;padding:8px 0 0 15px;box-sizing:border-box;float:left}
.tplinfo dt p{font-size:14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.tplinfo dt span{font-size:12px;color:#989898;}
.tplinfo dd{width:100px;padding:17px 15px 0 0;box-sizing: border-box;float:left;}
.tplinfo dd > button{float:right;}
.downbtn{width:70px;height:26px;border-radius:70px;background:#FC8302;color:#fff;font-size:14px;cursor:pointer;outline:none;border:none;}
.downok{width:70px;height:26px;border-radius:70px;background:#454545;color:#fff;font-size:14px;outline:none;border:none;}
.downloadding{width:max-content;height:26px;font-size:14px;color:#FC8302;background-image:url(../images/downloadding.svg);padding:0 0 0 26px;background-repeat:no-repeat;background-size:contain;background-color:transparent;outline:none;border:none;}
.downbtn:hover{opacity:0.85;}
.downbtn:active{opacity:0.95;}

/* 标签和搜索 */
.tplsearch{width:100%;height:max-content;display:flex;justify-content:space-between;align-items:center;margin:10px 0 0 0;padding:0 30px 0 0;box-sizing:border-box;}
.tagbox{width:max-content;font-size:14px;}
.tagbox p{margin:8px 0;}
.tagbox p span{width:70px;display:inline-block;text-align:right;font-weight:bold;color:#C9C9C9;}
.tagbox p b{height:28px;line-height:28px;margin:0 4px;border-radius:4px;cursor:pointer;color:#F0F0F0;padding:3px 8px;font-weight:normal;}
.tagbox p b:hover{background:#FC8302;}
.tagactive{height:28px;line-height:28px;margin:0 4px;border-radius:4px;background:#FC8302;color:#F0F0F0;padding:3px 8px;font-weight:normal;}
.searchbox{width:280px;}
.searchbox input{width:260px;height:32px;background:#383838;border:1px solid #444444;border-radius:32px;padding:0 0 0 20px;box-sizing:border-box;outline:none;color:#fff;}
.downallbtnbox{width:250px;display: flex;flex-direction:column;align-items:end;padding:0 40px 0 0;}
.downallbtn{width:250px;height:36px;margin:4px 0;cursor:pointer;box-sizing:border-box;border-radius:4px;background-repeat:no-repeat;background-size:26px;font-size:14px;}
.bydownallbtn{width:295px;height:36px;margin:4px 0;cursor:pointer;box-sizing:border-box;border-radius:4px;background-repeat:no-repeat;background-size:26px;font-size:14px;}
.ucdownall{background-color:#FC8302;border:1px solid #FC8302;color:#fff;padding:0 0 0 40px;background-position:18px center;background-image: url(../images/downalluc.svg);}
.bddownall{background-color:#ffffff;border:1px solid #ffffff;color:#000;padding:0 0 0 38px;background-position:12px center;background-image: url(../images/downallbaidu.svg);}
.downallbtn:hover{opacity:0.95;}
.downallbtn:active{opacity:0.90;}

/* 分页和页脚 */
.pagination{width:100%;height:50px;font-size:14px;position:fixed;bottom:0;left:0;background:#2C2C2C;display:flex;justify-content:center;align-items: center;border-top:1px solid #444444;}
#page a{ display:block;font-size:14px;color:#fff;text-decoration:none;min-width:20px; min-height:30px; max-width:content;padding:0 5px;line-height:30px; border:#666666 solid 1px; text-align:center; margin:0 5px;}
#page a:hover{ border:#fc8302 solid 1px; color:#fc8302}
#page input[type="number"]{width:50px;height:28px;font-size:14px;background:#383838;border:1px solid #666666;color:#fff;margin:0 5px;text-align:center;outline: none;}
#page input[type="submit"]{width:60px;height:32px;cursor:pointer;margin:0 5px;outline:none;border:none;color:#fff;border-radius:4px;background:#FC8302;}
#page input[type="submit"]:hover{opacity: 0.95;}
#page input[type="submit"]:active{opacity: 0.9;}

.footbox{width:100%;padding:20px 0 50px 0;color:#666;font-size:11px;text-align:center;float:left;}
.footbox p{margin:0 0 10px 0;}

.footinfo{padding:0;padding:0;width:100%;height:max-content;background:#333;color:#B1B1B1;display:flex;justify-content: center;}
.footinfo li{list-style: none;min-width:280px;margin:40px 20px;font-size:14px;}
.footinfo li.qrbox{min-width:160px;text-align: center;}
.footinfo li.small-space{min-width:180px;}
.footinfo li p{line-height: 25px;}
.footinfo li p b{font-size:16px;font-weight: bold;color:#fff;}
.foottitle{margin:0 0 10px 0;}
.footinfo li a{text-decoration:none;color:#B1B1B1;}
.footinfo li a:hover{text-decoration:underline;color:#fff;}
.footinfo li a:active{opacity: 0.9;}

/* 详情弹层 */
.tpldetail,.fodderdetail{width:100%;height:100%;background:rgba(0, 0, 0, 0.6);position: fixed;top:0;left:0;z-index: 999;display:none;}
.overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position: relative;}
.tploverlay,.fdroverlay{width:100%;height:100%;position: absolute;left:0;top:0;z-index: 990;}
.tplpopupmain{width:910px;height:calc(100% - 50px);border:1px solid #666666;background:#F5F5F5;border-radius:8px;box-sizing:border-box;z-index: 999;}
.fodderpopupmain{width:1200px;height:calc(100% - 50px);border:1px solid #666666;background:#F5F5F5;border-radius:8px;box-sizing:border-box;z-index: 999;}
.popuptitle{width:100%;height:50px;line-height:47px;font-size:18px;padding:0 10px 0 20px;background:#2C2C2C;border-radius:7px 7px 0 0;box-sizing: border-box;border-bottom:1px solid #EEEEEE;}
.popuptitle > button.downbtn,.popuptitle > button.downok{margin:0 0 0 20px;}
.closetplbtn,.closefdrbtn{width:40px;height:40px;margin:5px 0 0 0;cursor:pointer;float:right;}

.tpliframe,.fdriframe{width:100%;height:calc(100% - 60px);border:none;border-radius:0 0 8px 8px;}

/* 主题设置 */
.setthemebtn{position:absolute;right:10px;top:10px;z-index:998;width:70px;height:32px;cursor:pointer;padding:0 0 0 22px;border-radius:32px;font-size:14px;border:none;outline:none;box-sizing:border-box;}
.lightbtn{background:#575757;color:#fff;background-image: url(../images/light.svg);background-repeat:no-repeat;background-size:20px;background-position:8px center;}
.darkbtn{display:none;background:rgba(255, 255, 255, 0.5);color:#000;background-image: url(../images/dark.svg);background-repeat:no-repeat;background-size:20px;background-position:8px center;}

/* .fade-out {opacity: 0; transition: opacity 0.5s ease-in-out;}
.fade-in { opacity: 1;  transition: opacity 0.5s ease-in-out;} */