/*the common*/
body { background: #fff; min-width:320px; line-height:1.33}
img { width:auto; height:auto}

[class^="ico-"]{ display:inline-block; overflow:hidden; vertical-align:middle;}


.c-black{color: #333;}
.color-up{color:#cc3333}
.color-down{color:#009900}

.header{position: relative;  background: #303e56; height: 44px;}
.header .logo-img{width: 24%; padding:0.4rem 0.4rem; float: left;}
.header .tit{font-size: 1.125rem; color: #fff; padding: 0.5rem 0}
.header .tit span{color: #fdcd00; border-right: 1px solid #596578; display: inline-block; padding-right: 0.5rem; margin-right: 0.5rem}
.header .btn-to-home{position: absolute; right: 0.5rem; top: 50%; transform:translate(0, -50%); -webkit-transform: translate(0,-50%); }
.header-ico-home{width:28px; height:28px; display: inline-block; overflow: hidden; vertical-align: middle; background: url(http://ue1.17173cdn.com/a/lol/zt/2015/top/m/img/ico-home.png); background-size: 100%; -webkit-background-size: 100%}
.banner{width: 100%; height:93px; background:#0d1021 url(http://ue2.17173cdn.com/a/lol/zt/2015/top/m/img/banner-bg.jpg) no-repeat right top; background-size:contain; -webkit-background-size:contain; padding: 0.5rem; box-sizing:border-box;}
.banner .tit{font-size:1.25rem; color:#fdcc6d; }
.banner .sub-tit{font-size:1.125rem; color:#fff; padding-bottom: 0.3rem}
.banner .txt{font-size:0.6875rem; color:#67c5fe; }
.banner .txt span{padding-right: 1rem}

.content{padding:0.8rem}
.content .con-tit{border-bottom: 1px solid #bcbcbc; font-size: 1.125rem; padding-bottom: 0.3rem}
.content .con-txt{padding: 0.5rem 0; font-size: 1rem; }
.content .con-txt p{text-indent: 2rem; padding-bottom: 0.5rem;}


.my-pagination .swiper-pagination-bullet{width:16.66%;background:#cc3333;height:36px;font-size: 1rem; line-height:36px;text-align:center;border-radius:0;color:#fff; opacity: 1}
.my-pagination .swiper-pagination-bullet-active{color:#fff; background:#910000;opacity: 1}



.rank{padding: 0.5rem 0;}
.rank .list-item{overflow: hidden; position: relative; line-height: 1.5625; padding: 0.2rem 0}
.rank .list-item .rank-c1{float: left; width: 38px;}
.rank .list-item .num{font-style: normal; width:25px; height: 25px; background:#bcbcbc; color: #fff; text-align: center; line-height: 24px; border-radius: 0.2rem; display: block;}
.rank .top .num{background:#ff6565}
.rank .list-item .rank-c2{overflow: hidden;}
.rank  .list-item .tit{float: left; overflow: hidden; width: 70%; white-space: nowrap; text-overflow:ellipsis; position: relative;}

.rank .list-item .ttop{font-size: 12px; position: absolute; right: 0; top: 4px;}

.rank .list-item .art-item-c1{float: right; padding:3px 5px 0 0;  font-size: 14px; color: #b0b0b0}

.comm-plist{overflow: hidden; margin-left: -3%}
.comm-plist .item{float: left; width: 30.3%; height:30%;  margin:20px 0 0 3%;}
.comm-plist .item .con{display:inline-block; width: 90%; position: relative;}
.comm-plist .con img{width: 100%; border-radius:0.5rem;}
.comm-plist .con .rank-txt{position: absolute; width: 100%; height:20px; text-align: center; color: #fff;  font-size: 14px; left: 0; bottom: 0; overflow: hidden; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;}

.comm-plist1{overflow: hidden;}
.comm-plist1 .item{float: left; width:42.5%; text-align: center; margin: 0 0 10px 5%; }
.comm-plist1 .item .con{display: inline-block; width:100%; height:79px; overflow: hidden; position: relative;}
.comm-plist1 .item .con img{width: 100%; height: 100%;}
.comm-plist1 .item .con .txt{width: 100%; line-height:24px; position: absolute; background: rgba(0,0,0,.7); color: #fff; left: 0; bottom: 0; font-size:12px; overflow: hidden; text-overflow:ellipsis; white-space: normal; }
.comm-plist2{overflow: hidden;}
.comm-plist2 .item{float: left; width: 33.3%; text-align: center;}
.comm-plist2 .item .con{width:80%; display:inline-block;}
.comm-plist2 .item .con img{width:85%}
.comm-plist2 .item .txt{font-size: 0.75rem; padding-top: 0.5rem}
.comm-plist2 .item2{ }
.comm-plist2 .item2 .con{width:100%}
.comm-plist2 .item .con .txt{color: #333}


.rank-box{margin: 0.5rem 0 2rem}
.rank-box .tit{width:95px; height: 26px; line-height: 1.625rem; border-top-right-radius: 0.7rem; border-bottom-right-radius: 0.7rem; color: #fff; font-size: 1.125rem; text-align: center;}
.rank-box-up .tit{background: #cc3333;}
.rank-box-down .tit{background: #009900;}
.rank-box-up .rank-txt{background: rgba(255,101,101,0.8);}
.rank-box-down .rank-txt{background: rgba(0,153,0,0.8);}

.rank-con{}
.rank-con .rank-num{background:#ebebeb; text-align: center; font-size:2rem; color:#bcbcbc; height:40px; line-height: 40px;}
.rank-info{overflow: hidden; padding-bottom:1rem; border-bottom: 1px solid #bcbcbc}
.rank-info .c1{float: left; width: 30%;}
.rank-info .c1 .comm-plist .item{margin-top: 1.1rem; width: 100%}
.rank-info .c2{overflow: hidden; padding: 1rem 0 0 1rem;}
.rank-info .c2 .tit{font-size: 1.125rem;}
.rank-info .c2 .txt{font-size: 0.875rem; padding-top: 0.3rem; position: relative; font-style: normal; line-height:1rem}
.rank-info .c2 .txt-r{position: absolute; right: 0; top: 6px; font-size: 0.75rem; width: 30%;text-align: right;}
.rank-info .c2 .arrow{width:0;height:0;line-height:0;border-left-width:5px; border-right-width:5px;border-top-width:9px; border-bottom-width:9px;border-style:solid; position: absolute; left: 0;}
.rank-info .c2 .arrow-up{border-color:transparent transparent #cc3333 transparent; border-style:dashed dashed solid dashed; top: -6px;}
.rank-info .c2 .arrow-down{border-color: #009900 transparent transparent transparent; border-style:solid dashed dashed dashed;top: 3px;}

.comm-pn{padding: 0.8rem 0}
.comm-pn .hd .tit{border-left: 4px solid #cc3333; padding-left:0.6rem; font-size: 1.125rem;}
.comm-pn .bd{padding:0.8rem 0 }
.comm-pn .bd p{text-indent: 2rem; padding-bottom: 0.5rem;}

.pn-recomment{background:#1a2134; padding-bottom: 0.5rem}
.pn-recomment .hd{padding:0.5rem 0.8rem}
.pn-recomment .hd .tit{color: #fff; font-size: 1.125rem;}
.pn-about{background:#ebebeb; padding: 0.8rem}

.footer { position:relative; padding:1em 0 2.5em; background-color:#292c35 }
.mod-platform { margin-bottom:0.5rem; text-align:center }
.mod-platform a { color:#fff }
.mod-platform a:first-child { margin-right:2em }
.copyright {font-size:.75rem; color:#c0c0c0; text-align:center }
.copyright a { color:#c0c0c0 }
.btn-gotop { display:none; position:fixed; bottom:-2em; left:50%; width:4em; height:4em; margin-left:-2em; background:rgba(0, 0, 0, 0.6); border-radius:100% ; z-index:100;text-align: center;}
.btn-gotop::after {
display:inline-block;
position:relative;
content: '';
top:1em;
width:.8em;
height:.8em;
border-left:.2em solid #a9abae;
border-top:.2em solid #a9abae;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}

.footer-ico-pc, .footer-ico-star {
display:inline-block;
overflow:hidden;
vertical-align:middle;
background:url(http://ue3.17173cdn.com/a/lol/zt/2015/top/m/img/footer-ico.png) no-repeat
}
.footer-ico-pc, .footer-ico-star { margin-bottom:3px }

@media only screen and (max-width:480px) {
.footer-ico-pc, .footer-ico-star{ width: 20px; height: 16px;background-size:100%}
.footer-ico-pc { background-position: 0 0}
.footer-ico-star { background-position: 0 -25px;}
}

@media only screen and (min-width:481px) {
.footer-ico-pc, .footer-ico-star{ width: 40px; height: 32px;}
.footer-ico-pc { background-position: 0 0}
.footer-ico-star { background-position: 0 -50px;}
}


/*iPhone 5 and iPhone 5s*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {

} 

/*the iPhone 4*/
@media only screen and (min-device-width: 320px) and (max-device-height: 480px){

} 

/*iPhone 6 and iPhone 6+*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {

}
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

}