.main{padding:26px 0;}
.news-more,.news-list li,.tag{background: url('../images/sprite.png') no-repeat;}
.head-wrap{height: 380px; margin-bottom: 30px;}
.banner{width: 722px; height: 380px; position: relative; float: left;}
.slide{width: 722px; height: 380px; overflow: hidden; position: relative;}
.slide .item{width: 100%;height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background-repeat: no-repeat; background-size: cover; -webkit-transition: opacity .2s linear;-ms-transition: opacity .2s linear;-moz-transition: opacity .2s linear;transition: opacity .2s linear;}
.slide .item a{display: block; width: 100%;height: 100%;}
.slide .active{opacity: 1; z-index: 1;}
.circle{position: absolute;bottom: 0;left: 0;width: 100%;height: 56px;background: rgba(0, 0, 0, .8);z-index: 2;}
.circle li{float: left;width: 25%;height: 46px; line-height: 46px;border-bottom: 3px solid transparent; color: #888; text-align: center; cursor: pointer;overflow: hidden;}
.circle li.cur{border-color: #fde701; color: #fff;}
.news{background: #303030; padding: 25px 35px 0; width: 468px; height: 355px; float: right; position: relative;}
.news-more{position: absolute; right: 0; top: 0; display: block; width: 32px; height: 32px; background-color: #1a1a1a; background-position: -202px 0;}
.news-more:hover{background-color: #282828;}
.news-hot{font-size: 22px; color: #ffe401; display: block; font-weight: 700; line-height: 40px; margin-bottom: 20px; white-space: nowrap; text-overflow: ellipsis;overflow: hidden;}
.news-rec{background: #3e3e3e;line-height: 26px;height: 26px;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;}
.news-rec i{float: left; font-size: 12px; width: 42px; background: #fe4527; text-align: center; color: #fff; margin-right: 12px; position: relative;}
.news-rec i::after{content: ''; position: absolute; right: -4px; top: 50%; margin-top: -4px;width: 0;height: 0;border-top:4px solid transparent;border-left: 4px solid #fe4527;border-bottom:4px solid transparent;}
.news-rec a{display: inline-block; color: #fff;}
.news-list{height: 230px; position: relative; overflow: hidden; margin-top: 12px;}
.news-list li{height: 32px;line-height: 32px;border-bottom: 1px dashed #404344; padding-left: 20px; background-position: -239px 11px;}
.news-list li a{width: 400px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #c3c3c3;float: left;font-size: 14px;}
.news-list li a:hover{color: #fff;}
.news-list li span{float: right;font-size: 14px;color: #727272;}
.title{font-size: 18px; color: #333; height: 18px; line-height: 1; padding-left: 10px; border-left: 3px solid #fde701; margin-bottom: 20px;}
.hot{height: 400px; overflow: hidden;}
.hot ul{margin-left: -20px;}
.hot li{float: left; margin-left: 20px; width: 300px; height: 400px; overflow: hidden;border-radius: 4px; position: relative;cursor: pointer;}
.hot-info{width: 100%;height: 112px;background: url('../images/hot_bg.png') no-repeat 100%;position: absolute;bottom: 0;left: 0;padding: 40px 12px 0 12px;color: #999;font-size: 14px;box-sizing: border-box;}
.hot-tit{font-size:18px;color: #fff;line-height: 36px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.tm{position: absolute;top:-100%;left: 0;width: 100%;height: 100%;z-index: 10;background: rgba(0,0,0,0.7);text-align: center;cursor: pointer;font-size:14px;color:#fff;-webkit-transition: top .3s;-moz-transition: top .3s;-o-transition: top .3s;transition: top .3s;}
.hot li:hover .tm,.rec li:hover .tm,.all li:hover .tm{top: 0;}
.hot-name{padding-top:90px; font-size: 18px;}
.code-img{width: 120px; height: 120px; border-radius: 6px; margin: 10px auto 5px; overflow: hidden;background:#fff;}
.start-link{display: inline-block;width: 120px; line-height: 36px;background:#fde701;border-radius:19px;color: #333;margin-top: 10px;}
.start-link:hover{background: #f4cf00;}
.content{margin-top: 35px; height: 590px;}
.server{float: left; width: 420px;}
.server-wrap{background: #fff;border-radius: 4px; height: 525px; padding: 0 20px; text-align: center;}
.server-menu{height: 44px; border-bottom: 2px solid #eee;}
.server-menu li{width: 126px; height: 44px; line-height: 44px; float: left; font-size: 16px; cursor: pointer;}
.server-menu li.cur{border-bottom: 2px solid #fe5600; color: #fe5600;}
.server-item,.server-list{display: none; height: 440px;}
.server-item .show{display: block; overflow: hidden;}
.server-list li{border-bottom: 1px solid #eee; height: 43px; overflow: hidden; margin-left: 13px;}
.server-list .gn,.server-list .gs,.server-list .gt{float: left; line-height: 42px; white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}
.server-list .gn{font-weight: bold; text-align: left; width: 135px; margin-right: 10px;}
.server-list .gt{color: #888;width: 90px; float: right;}
.server-list li a:hover .gs{color: #fe5600;}
.server-mun{margin-top:10px;line-height: 1;}
.server-mun span{display: inline-block;width: 30px;height: 4px;background: #e9e9e9;margin: 0 2px;border-radius:2px;cursor: pointer;}
.server-mun span.cur{background: #fde701;}

.rec{float: right; width: 840px;}
.rec .title{margin-left: 27px;}
.rec li{float: left;margin: 0 0 20px 20px;height: 252px;width: 400px;border-radius: 4px;overflow: hidden; cursor: pointer;position: relative;}
.tag{position: absolute;left: 0;top: 0;z-index: 11;display: block;}
.rec li .tag{width: 56px;height: 56px;}
.rec li .hot{background-position: 0 -74px;}
.rec li .new{background-position: -64px -74px;}
.rec li .sd{background-position: -128px -74px;}
.rec li .alone{background-position: -192px -74px;}
.rec-name{font-size: 18px; padding-top: 10px;}
.rec .start-link{margin-top: 5px;}
.rec-tit{position: absolute;bottom: 0;color: #fff;font-size: 16px;width: 100%;box-sizing: border-box; padding: 10px 20px;background: url('../images/hot_bg.png') repeat-x center top;}
.filter{padding: 6px 13px 0;}
.filter-letter,.filter-type{height: 20px; line-height: 20px; margin-bottom: 20px;}
.filter .label{float: left;}
.filter .keys{float: left; margin-left: 10px;}
.filter .keys .item{display: inline-block; line-height: 20px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: #333; cursor: pointer;}
.filter .keys .on{background: #fde701;}
.all ul{zoom:1;margin-left: -20px;}
.all ul:after{content:"";clear:both;display:block;height:0;line-height:0;font-size:0}
.all li{float: left; margin: 0 0 20px 20px; width: 300px; height: 220px; background: #fff; border-radius: 4px; position: relative; overflow: hidden;}
.all-img{height: 180px;}
.all-tit{font-size: 16px; padding: 0 12px; line-height: 40px; height: 40px;}
.all-name{padding-top: 10px;font-size: 16px;}
.all .code-img{width: 95px; height: 95px;}
.all .ft{margin-top: 10px; text-align: center;}
.all .start-link{width: 80px; line-height: 25px;margin: 0;}
.all .home-link{display: inline-block; width: 78px; line-height: 23px; border-radius: 12px; border: 1px solid #fff; color: #fff; margin-left: 3px;}
.all .home-link:hover{border-color: #fde701;color: #fde701;}
.all-more{display: block;font-size:18px;width: 240px; line-height: 50px;background:#fde701;border-radius:25px;color: #333;text-align: center; margin: 20px auto;cursor: pointer;}
.all-more:hover{background: #f4cf00;}
.all li .tag{width: 64px;height: 64px;}
.all li .hot{background-position: 0 0;}
.all li .new{background-position: -64px 0;}
.all li .sd{background-position: -128px 0;}