/* global reset */
img{ vertical-align:middle}
a:hover{ text-decoration:underline; _vertical-align:baseline}
a:focus,button,input,select,textarea{ outline:none}
textarea{ resize:none}

.mask2{ position: absolute; opacity: 1; overflow: hidden; width: 500px; height: 40px; z-index: -1; bottom:0; left: 0; background: linear-gradient(top, transparent, rgba(0, 0, 0, 0.9) 30%, black);  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.9) 30%, black); background: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.9) 30%, black); background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.9) 30%, black); filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000',endColorstr='#ff000000',gradientType=0);}
:root .mask2{ fliter:none\0;}

.ico2{ display: inline-block; overflow: hidden; vertical-align: middle; background: url(http://ue1.17173cdn.com/a/v/lol/2015/img/b1.png) no-repeat;}
.ico2-s1{ width:26px; height: 24px; margin: 0 10px 2px 0}
.ico2-s2{ width:22px; height: 21px; background-position: -30px 0; margin: 2px 10px 4px 0}
.ico2-s3{ width:26px; height: 25px; background-position: -55px 0; margin: 0 10px 3px 0}
.ico2-s4{ width:21px; height: 25px; background-position: -85px 0; margin: 0 10px 2px 0}
.ico2-s5{ width:16px; height: 26px; background-position: -110px 0; margin: 0 10px 1px 0}
.ico2-s6{ width:25px; height: 25px; background-position: -130px 0; margin: 0 10px 3px 0}
.ico2-s7{ width:25px; height: 24px; background-position: -160px 0; margin: 0 10px 3px 0}
.ico2-search{ width:13px; height: 14px; background-position: -285px 0}

.comm-list{ overflow: hidden; *zoom:1;}
.comm-list li{ float: left; width:240px; padding:0 0 10px 10px;}
.comm-list .con{ display: block; position: relative; overflow: hidden; *zoom:1;}
.comm-list img{ width: 240px; height: 158px}
.comm-list .mask{ display: none; fliter:none; position: static;}
.comm-list .cover{ _filter:none; display: none;}
.comm-list .con:hover .mask{ position: absolute; display: block; z-index: 5; filter: alpha(opacity=50);}
.comm-list .con:hover .cover{ position: absolute; display: block; width:45px; height: 46px; left: 50%; margin-left: -23px; top:56px; z-index: 10; background: url(http://ue3.17173cdn.com/a/v/lol/2015/img/cover.png) no-repeat; _background: none;  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://ue3.17173cdn.com/a/v/lol/2015/img/cover.png'); }
.comm-list-ex2{ margin-left: -10px; margin-right: -10px;}
.comm-list-ex2 li{ width: 274px; margin: 0 10px; padding:0 0 10px; *display: inline; *zoom:1;}
.comm-list-ex2 img{ width: 274px; height: 135px}
.comm-list-ex2 .con:hover .cover{ position: absolute; left: 50%; display: block; width: 55px; height: 55px; background: url(http://ue1.17173cdn.com/a/v/lol/2015/img/cover3.png) 0 0 no-repeat; _background: none;  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://ue1.17173cdn.com/a/v/lol/2015/img/cover3.png'); margin-left: -28px; top:40px;}

.comm-list2{ overflow: hidden; *zoom:1; margin-left: -11px; margin-right: -10px;}
.comm-list2 li{ float: left; margin: 0 10px 0 11px; padding-bottom: 20px; *display: inline; *zoom:1;}
.comm-list2 .con{ display: block; padding: 4px; width: 168px; background: #ebebea; color: #333;}
.comm-list2 .c1{ display: block; position: relative; overflow: hidden; *zoom:1;}
.comm-list2 img{ width: 168px; height: 96px}
.comm-list2 .mask2{ z-index: 2; width: 100%; background: linear-gradient(top, transparent, rgba(0, 0, 0, 0.1) 30%, black);  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1) 30%, black); background: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1) 30%, black); background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1) 30%, black);}
.comm-list2 .view{ color: #aaa; position: absolute; left: 25px; bottom:5px; z-index: 5}
.comm-list2 .cover{ position: absolute; z-index: 5; left: 5px; bottom: 7px; width:15px; height: 15px; background: url(http://ue3.17173cdn.com/a/v/lol/2015/img/cover2.png) 0 0 no-repeat; _background: none;  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://ue3.17173cdn.com/a/v/lol/2015/img/cover2.png');}
.comm-list2 .c2{ display: block; font-size: 14px; line-height: 22px; height: 44px; overflow: hidden; margin-top: 8px}
.comm-list2 .con:hover{ color: #fff; background: #d74c00; text-decoration: none;}
.comm-list2-ex2 .con{ width: 214px; padding: 5px}
.comm-list2-ex2 img{ width: 214px; height: 122px}
.comm-list2-ex2 .c2{ margin-bottom: 12px}
.comm-list2-ex3{ margin-left: -10px}
.comm-list2-ex3 li{ margin: 0 10px}

.comm-mod .mod-hd{ position: relative; padding: 15px 0;}
.comm-mod .mod-hd .tit{ font-size: 20px; font-weight: bold; color: #333; height: 30px}

.comm-pn{ background: #fff; padding:10px 20px 0}
.comm-pn .pn-c1{ float: left; width:570px; margin-right: 20px; *display: inline; *zoom:1;}
.comm-pn .pn-c2{ overflow: hidden; *zoom:1;}

.comm-pn2{ background: #fff; padding: 10px 20px 0; position: relative; *zoom:1;}
.comm-pn2 .pn-hd{ position: relative; padding: 15px 0; *zoom:1;}
.comm-pn2 .pn-hd .tit{ font-size: 20px; font-weight: bold; color: #333; height: 30px}

.zq-wrap{ background: #f7f7f7 url(http://ue3.17173cdn.com/a/v/lol/2015/img/bg1.jpg) center top no-repeat;}
.header-in{ height: 425px}
.content{ padding-bottom: 20px}

.logo-box{ left: 251px; top:95px; padding-left: 24px; border-left: 1px solid #fff}
.logo-box .logo{ color: #fff}
.logo-box .game-name{ font-size: 24px; line-height: 1; margin-bottom: 6px}
.logo-box .game-txt{ display: block; font-size: 56px; font-weight: bold; line-height: 1}

.list-hero{ overflow: hidden; *zoom:1;}
.list-hero li{ float: left; padding-bottom: 17px; width: 66px}
.list-hero .con{ display: block; color: #333;}
.list-hero .c1{ display: block; border: 2px solid #040201}
.list-hero .c2{ display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; margin-top: 6px}
.list-hero img{ width: 62px; height: 62px}

.form-box{ overflow: hidden; *zoom:1;}
.form-box .form-item{ float:left; padding-right: 15px}
.form-box .form-radio-con{ display: inline-block; height: 26px; line-height: 26px; color: #6b594d; font-size: 14px; *zoom:1; overflow: hidden;}
.form-box .form-radio{  margin: 3px 10px 6px 0; vertical-align: middle;}

.search-form{position:relative;height:24px;padding:0 47px 0 10px;border:1px solid #cecece;background-color:#fff}
.search-form input{width:100%;height:24px;*margin-bottom:-1px;font-size:14px;color:#999;_color:#333;line-height:24px\9;border:0;background:0 0;outline:0}
.search-form input:focus{color:#333; border: none;}
.search-form button{position:absolute;top:3px;right:0;width:36px;height:18px;border:0;cursor:pointer; background: none; border-left: 1px solid #e6e6e6}
.search-form .ico2-search{ line-height: 20em}

.hero-box{ position: absolute; right: 0; top:0;}
.hero-box .box-c1{ color: #f8f8f8; background: #d74c00; line-height: 30px; padding: 0 19px 0 9px; height: 30px; cursor: pointer; border:1px solid #d74c00; border-bottom: none; position: relative; z-index: 10; height: 30px; *display: inline; *zoom:1;}
.hero-box .arrow{ position:absolute; top:13px; right:16px}
.hero-box .arrow u,.hero-box .arrow b{ display:block; overflow:hidden; position:absolute; width:0; height:0; font-size:0; border-left:5px dashed transparent; border-right:5px dashed transparent; border-bottom:5px dashed transparent; border-top-style:solid; border-top-width:5px}  
.hero-box .arrow u{ top:0; left:0; color:#d74c00; z-index:2;} 
.hero-box .arrow b{ top:1px; left:0; color:#fff}
.hero-box .box-c2{ border:1px solid #ebebea; background: #ffffff; position: absolute; right: 0; top:30px; z-index: 5; display: none; padding-top: 15px; width: 930px; padding-right: 9px; padding-left: 19px;}
.hero-box .box-c2 .box-c2-hd{ overflow: hidden; *zoom:1;}
.hero-box .box-c2 .box-c2-bd{ padding: 15px 0;}
.hero-box .hero-con{ max-height: 321px; overflow-y:auto; overflow-x:hidden;}
.hero-box .box-c2 .form-box{ float: left;}
.hero-box .box-c2 .search-box{ float: right; width: 232px}
.hero-box .list-hero{ width: 930px;}
.hero-box .list-hero li{ margin-right: 27px}
.hero-clicked .box-c1{ background: #ffffff; border-color:#ebebea; color: #333}
.hero-clicked .arrow u{ color:#fff;}
.hero-clicked .arrow b{ color: #333}
.hero-s .box-c2{ width: 560px;}
.hero-s .list-hero{ width: 560px;}

.comm-tab .gb-tab{ overflow: hidden; *zoom:1;}
.comm-tab .gb-tab-item{ float: left;}
.comm-tab .gb-tab-c{ display: block; color: #666; font-size: 14px; padding: 0 10px; line-height: 24px; white-space: nowrap;}
.comm-tab .gb-tab .current{ background: #d74c00; color: #fff; border-radius: 3px}
.comm-tab .gb-tab-c:hover{ text-decoration: none; color: #d74c00}
.comm-tab .current:hover{ color: #fff}

.float-box{ position: absolute; top:470px; left: 50%; margin-left: 520px;}
.list-float li{ background: url(http://ue3.17173cdn.com/a/v/lol/2015/img/bg-float.jpg) 15px 0 repeat-y;}
.list-float .con{ display: inline-block; padding-left: 46px; position: relative; color: #999; font-size: 16px; line-height: 40px; height: 40px;}
.list-float .sign{ position: absolute; width: 31px; height: 31px; background:url(http://ue1.17173cdn.com/a/v/lol/2015/img/float-b.png) no-repeat; left: 0; top:4px; z-index: 2}
.list-float .gotop .sign{ background-position: 0  -70px;}
.float-box .float-bg{ position: absolute; width:1px; height: 8px; background: #f7f7f7; left: 15px}
.float-box .float-bg1{ top:0; height: 11px;}
.float-box .float-bg2{ bottom:0;}
.list-float .con:hover{ text-decoration: none; color: #2a98fe; font-weight: bold; font-size: 20px}
.list-float .con:hover .sign{ background-position: 0 -35px}
.list-float .con:hover .float-bg{ height: 4px}
.list-float .gotop:hover .sign{ background-position:0 -110px}
.float-box-fixed{ position: fixed; _position: absolute; top:45px;}
 
/* page-index */
.pn-top{ overflow: hidden; *zoom:1; padding-top: 10px}
.pn-top .pn-c1{ float: left; width: 500px}
.pn-top .pn-c2{ float: right; width: 500px}
.slide-box{ width: 500px; height: 326px; overflow: hidden; *zoom:1; position: relative;}
.slide-box .con{ display: block; position: relative; color: #fff}
.slide-box .c1 img{ width: 500px; height: 326px;}
.slide-box .c2{ display: block; position: absolute; width: 100%; bottom: 0; left: 0; z-index: 2; height: 80px; overflow: hidden; *zoom:1;}
.slide-box .tit{ display: block; padding: 6px 55px 0; text-align: center; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.slide-box .mask{ filter: alpha(opacity=50); opacity: .5;}
.slide-box .slide-btn{ display: none; position: absolute; z-index: 5; cursor: pointer;  font: normal 72px/1 "SimSun";  text-align: center; color: #666}
.slide-box .slide-btn:hover{ color: #fff; text-decoration: none;}
.slide-box .backward{ left: 15px; bottom: 4px}
.slide-box .forward{ right: 15px; bottom: 4px}
.slide-box .backward:hover{ background-position: -48px 0}
.slide-box .forward:hover{ background-position: -72px 0}
.slide-box .slidetabs{ position: absolute; bottom: 10px; right: 20px; z-index: 5;}
.slide-box .slidetabs a{ display: inline-block; *zoom: 1; *display: inline; vertical-align: top; width: 12px; height: 12px; background: #5a5a5a; border:2px solid #5a5a5a; border-radius: 9px; margin: 0 3px;}
.slide-box .slidetabs a:hover, .slide-box .slidetabs .current{ background: none; border-color:#06a4f3}
.slide-box .con:hover{ color: #fff}
.slide-box .mask2{ z-index: 2; top:auto;}

.pn-new{ overflow: hidden; *zoom:1;}
.mod-rank{ position: relative; *zoom:1;}
.mod-rank .mod-hd{ padding-bottom: 10px}
.mod-rank .tab-rank .gb-tab{ position: absolute; right: 0; top:18px; z-index: 2} 
.list-rank{ overflow: hidden; *zoom:1;}
.list-rank li{ overflow: hidden; *zoom:1; line-height: 28px; *float: left; *width: 100%}
.list-rank .num{ float: left; color: #999; line-height: 18px; width: 20px; text-align: center; border:1px solid #dddddd; margin-right:8px; margin-top: 3px}
.list-rank .detail{ float: left; width: 78%}
.list-rank .title{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
.list-rank .tit{ color: #333; font-size: 14px;}
.list-rank .time{ color: #b9b9b9; line-height: 1.2; display: none;}
.list-rank .view{ float: right; color: #b9b9b9; font-size: 14px}
.list-rank .tit:hover{ color: #d74c00; text-decoration: underline;}
.list-rank .top3{ padding-bottom: 8px}
.list-rank .top3 .num{ border:none; width: 26px; height: 30px; font-size: 0; background: url(http://ue1.17173cdn.com/a/v/lol/2015/img/b1.png) -190px 0 no-repeat; margin-right:4px; margin-top: 6px}
.list-rank .li2 .num{ background-position: -220px 0}
.list-rank .li3 .num{ background-position: -250px 0}
.list-rank .top3 .time{ display: block;}

.pn-program{ padding-bottom: 10px}
.pn-program .pn-c2{ float: right; width: 370px}
.mod-program .mod-hd{ z-index: 10}
.mod-program .hero-box{ top:15px;}

.tag-box{ background: #ebebea; height: 240px; padding: 20px;} 

.tab-explain .tab-hd{ position: absolute; left: 205px; top:28px;}
.tab-explain .more{ position: absolute; right: 20px; color: #666; line-height: 30px; top:25px;}

/* page-list */
.crumbs{ color: #333}
.crumbs a{ color: #333}
.crumbs .sep{ margin: 0 9px}

.pn-list{ padding: 0 20px; background: #fff}
.pn-list .pn-hd{ padding: 16px 0; position: relative; z-index: 10; *zoom:1;}
.pn-list .hero-box{ top:10px;}

.list-fliter{ font-size: 0}
.list-fliter li{ display: inline-block; margin-bottom: 7px; margin-left: 10px; *display: inline; *zoom:1;}
.list-fliter .con{ display: inline-block; font-size:14px; color: #333; padding: 0 10px; line-height: 26px; }
.list-fliter .clicked .con{ background: #d74c00; color: #fff; border-radius: 3px}
.list-fliter .con:hover{ text-decoration: none; color: #d74c00}
.list-fliter .clicked .con:hover{ color: #fff}

.table-fliter th{ color: #333; font-size: 14px; background: #dfdfdf; font-weight: bold; width: 13%; padding:0 15px; vertical-align: middle;}
.table-fliter td{ padding: 7px 20px 0 10px; background: #dfdfdf; border-left: 1px solid #fff}
.table-fliter .tr-even th, .table-fliter .tr-even td{ background: #ebebea}

.result-box{ overflow: hidden; *zoom:1;}
.result-box .tit{ color: #333; font-size: 16px; float: left; line-height: 28px; padding-right: 25px}
.result-box .btn-fliter{ float: left; color: #333; font-size: 14px; line-height: 28px; border: 1px solid #cbcbcb; padding: 0 5px; border-radius: 3px; height: 28px;  display: none;}
.result-box .btn-fliter .txt{ margin-right: 20px}
.result-box .btn-fliter .sep{ color: #cbcbcb; font-weight: bold; font-size:18px}
.result-box .btn-fliter:hover{ text-decoration: none; border-color:#d74c00; color: #d74c00}
.result-box .btn-fliter:hover .sep{ color: #d74c00}

.tab-result .tab-hd{ overflow: hidden; *zoom:1; padding:30px 0 15px}
.tab-result .result-box{ float: left;}
.tab-result .gb-tab{ float: right; overflow: hidden; *zoom:1; border: 1px solid #cbcbcb; border-radius: 3px;}
.tab-result .gb-tab-item{ float: left;}
.tab-result .gb-tab-c{ display: inline-block; color: #666; line-height: 28px; padding: 0 10px}
.tab-result .gb-tab .current{ background: #d74c00; color: #fff; border-radius: 3px;}
.tab-result .gb-tab-c:hover{ text-decoration: none; color: #d74c00}
.tab-result .gb-tab .current:hover{ color: #fff}