/*the global*/
body{font-size:12px; font-family: "Microsoft Yahei"; min-width:1000px; background: #e0e0e0}
a:focus,a:active,a:hover{ outline:none}
.first-screen, .area{overflow: hidden; *zoom:1;}
.first-screen:after, .area:after{content: ' '; display: table; clear: both;}

/*the layout*/ 
.wrapper{ background:url(//images.17173cdn.com/2015/lol/top/tahm.jpg) no-repeat center top;}

/*the common*/
.c-tx{ color:#23d0ff}
.c-tx:hover{ text-decoration:underline}
.c-tx1{ color:#333}
.c-tx1:hover{color:#d74c00;}

.ico{ vertical-align:middle; display:inline-block; background:url(http://ue3.17173cdn.com/a/lol/index/2016/v/img/sprite.png) no-repeat;}
.ico-video{ display:block; width:45px; height:45px; background-position:0 -64px; position: absolute;display: none;margin: -22px 0 0 -22px; left: 50%; top:50%; filter: alpha(opacity=0);}
.ico-video1{width:15px; height: 15px; margin: 0 5px 3px 0; _margin:6px 4px 6px 0;}
.ico-video2{width:13px; height: 13px; margin: 0 5px 3px 0; background-position: -32px 0}
.ico-comment{width:12px; height: 13px; margin: 0 5px 2px 0; background-position: -16px 0}
.ico-user{width:12px; height: 12px; margin: 0 5px 3px 0; background-position: -48px 0}
.ico-top{width:25px; height: 14px;position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -12px; background-position: -67px -69px;}

.avatar, .avatar img{display: block;}


.rank-list .tit, .comm-vlist-ex2 .tit, .comm-plist .tit{font-size: 14px; white-space: nowrap; text-overflow:ellipsis; overflow: hidden; display: block; width: 100%;}


.content{width: 1000px; margin: 0 auto; background:#fff}
.first-screen{background:url() no-repeat left top; height: 310px; padding: 20px 20px 0}
.first-screen-c1{width:480px; float: left;}
.first-screen-c2{width: 454px; float: right;}
.comm-vlist{overflow: hidden; *zoom:1; margin: 0 -7px;}
.comm-vlist .list-item{float: left; width:220px; overflow: hidden; margin:0 7px 20px; *display: inline; position: relative;}
.comm-vlist .item-c1{display: block; height: 125px; position: relative;}
.comm-vlist .list-item .txt{position: absolute; left:0; bottom: 0; _bottom:-1px;  width: 100%; height: 48px; _height: 49px; overflow: hidden; *zoom:1; display: block; z-index:3; transition:all .2s; -webkit-transition:all .2s; }
.comm-vlist .list-item .txt-in{line-height: 30px; height: 30px; position: absolute; bottom: 0; left: 0; width:100%;overflow: hidden; *zoom:1;}
.comm-vlist .list-item .txt-c1{float: left; color: #aaa; font-size:12px; display: block; width: 65px; padding:0 10px 0 5px;}
.comm-vlist .list-item .txt-c2{display: block; color: #fff; float:right; width: 135px; overflow: hidden; text-align: right; white-space: nowrap; text-overflow:ellipsis; font-size: 14px; padding-right: 5px;}
.comm-vlist .list-item .cover{width:100%;background: -webkit-linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
background: linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000',endColorstr='#ff000000'); height: 100%; _height:104%; position: absolute; left: 0; top: 0; z-index: -1}
.comm-vlist .list-item .date{position: absolute; top:-20px; right: 10px; font-size: 12px; color: #fff; z-index: 5;transition:all .3s; -webkit-transition:all .3s;}
.comm-vlist .item-c2{display: block; font-size: 14px; padding-top: 5px; line-height: 22px; height: 40px; overflow: hidden;}
.comm-vlist .list-item img{width: 100%;}
.comm-vlist .list-item a:hover .cover, .comm-vlist .hover .cover{background: #000; opacity: .5; filter: alpha(opacity=50);}
.comm-vlist .list-item a:hover .date, .comm-vlist .hover .date{top:8px;}
.comm-vlist .list-item a:hover .txt, .comm-vlist .hover .txt{height: 100%;}
.comm-vlist .list-item a:hover .ico-video, .comm-vlist .hover .ico-video{z-index: 8; display: block;filter: alpha(opacity=100);}

.comm-vlist-ex{margin: 0 -10px 0 -11px;}
.comm-vlist-ex .list-item{width: 176px; margin: 0 10px 20px 11px}
.comm-vlist-ex .list-item .txt-c2{font-size: 12px; color: #aaa; width: 70px;}
.comm-vlist-ex .item-c1{display: block; height: 100px; }
.comm-vlist-ex .list-item img{ height: 100px;}

.comm-vlist-ex1{overflow: hidden; *zoom:1; margin: 0 -10px;}
.comm-vlist-ex1 .list-item{float: left; width:176px; overflow: hidden;  *display: inline; position: relative;background: url(http://ue3.17173cdn.com/a/lol/index/2016/v/img/bg-list.gif) no-repeat center top; padding-top:6px; margin: 0 10px 20px; position: relative;}
.comm-vlist-ex1 .list-item .txt{position: absolute; width: 100%; top: 58px; left: 0; z-index: 3; height: 48px;width:100%;background: -webkit-linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
background: linear-gradient(top,rgba(0,0,0,0) 1%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 70%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000',endColorstr='#ff000000');}
.comm-vlist-ex1 .list-item .txt-c1{display: block; padding-top: 18px; height: 30px; line-height: 30px; text-align: center; color: #aaa}
.comm-vlist-ex1 .item-c2{text-align: center; height:22px; display: block; font-size: 14px; padding-top: 5px;}

.comm-vlist-ex2 .list-item{width: 210px;}
.comm-vlist-ex2 .list-item .txt-c3{text-align: right; display: block; padding-right:5px; color: #fff}
.comm-vlist-ex2 .item-c1{height:118px;}
.comm-vlist-ex2 .list-item img{height:118px;}
.comm-vlist-ex2 .list-item .info{color: #999; font-size: 12px; overflow: hidden; *zoom:1; display: block;}
.comm-vlist-ex2 .list-item .info-c1{float: left;}
.comm-vlist-ex2 .list-item .info-c2{float: right;}

.comm-plist{overflow: hidden; *zoom:1;}
.comm-plist .list-item{float: left; width: 65px; margin: 0 14px 15px 15px; *display: inline;}
.comm-plist .list-item .txt{display: block; text-align: center; padding-top: 5px; }
.comm-plist .list-item .tit{font-size: 12px;}

.rank-list .list-item{padding-bottom: 5px;}
.rank-list .art-item{overflow: hidden; *zoom:1;}
.rank-list .art-item-c1{width:20px; float: left; position: relative;}
.rank-list .avatar{display: none;}
.rank-list .num{color:#999; line-height:18px; width:18px; position: relative; margin-top: 2px;}
.rank-list .art-item-c2{overflow: hidden; *zoom:1;}
.rank-list .info{color: #999; padding-top: 10px; margin-right: -20px; display:none}
.rank-list .info span{padding-right: 20px;}
.rank-list .top, .rank-list-ex .list-item{padding-bottom: 8px;}
.rank-list .top .avatar, .rank-list-ex .avatar{display: block;}
.rank-list .top .art-item-c1, .rank-list-ex .art-item-c1{width:100px; margin-right:15px;}
.rank-list .top .num, .rank-list-ex .top .num{background: #ff6900; text-align: center; color:#fff; position: absolute; left: 0; top: 0; margin-top: 0}
.rank-list .top .info, .rank-list-ex .info{display: block;}
.rank-list-ex .list-item{padding-bottom: 15px;}
.rank-list-ex .tit{white-space: normal;	line-height: 1.3}
.rank-list-ex .info{padding-top:3px}
.rank-list-ex .num{background: #999999; text-align: center; color:#fff; position: absolute; left: 0; top: 0; margin-top: 0}


.comm-tab{position: absolute; right: 0; top:50%; margin-top: -12px; height: 25px; line-height: 25px; font-size: 0}
.comm-tab .tab-item{display: inline-block; *display: inline; *zoom:1; font-size:14px; margin-left: 5px;}
.comm-tab .tab-item a{color: #333; display: inline-block; line-height: 25px; padding: 0 6px; border-radius:3px;}
.comm-tab .current a{background:#00aa89; color: #fff}
.comm-tab-ex .tab-item{margin-left:12px;}

.area{padding:0 20px 20px}
.area1-c1{width:570px; float: left;}
.area1-c2{width:370px; float: right;}
.area3-c1{width:672px; float: left;}
.area3-c2{width:260px; float: right;}
.area4 .comm-tab{right: auto; left:130px;}
.area4 .pn-bd{border: 1px solid #ebebeb; padding:20px 0;}
.area5{font-size: 14px;}
.area5-c1{width: 50%; float: left; padding-top: 15px;}
.area5-c1 a{padding: 0 5px; color: #d74c00}
.area5-c1 a:hover{text-decoration: underline;}
.area5-c2{width: 250px; float: right; border: 1px dashed #333; border-width: 1px 0 1px 0; padding: 20px 0 5px; color: #6f6f6f}
.area5-c2 p{padding-bottom: 15px; text-align: center;}

.pn-hd{position: relative; height: 45px; margin-bottom: 8px;}
.pn-hd .tit{font-size: 20px; line-height: 45px; font-weight: bold;}

.more{position: absolute; right: 0; top: 0; line-height: 45px; color: #666; font-family: "Simsun"}
.more a.c-tx1{padding-left: 8px; color: #666}
.more a.c-tx1:hover{color:#d74c00;}



/* Slider */
.slick-list{ position: relative; overflow: hidden; display: block;}
.slick-list:focus{ outline: none; }
.slick-track { display: block;position: relative; left: 0; top: 0; *zoom: 1; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track,.slick-loading .slick-slide{ visibility: hidden; }
.slick-slide {display: none;float: left;height: 100%;min-height: 1px;  }
.slick-slide img,.slick-initialized .slick-slide { display: block;width: 480px; height:270px;}
.slick-loading img {display: none;}

.first-screen-c1{height: 270px; overflow: hidden; float: left;}
.first-screen-c1 .focus-wrap{position: relative;width:480px; overflow:hidden;margin: 0 auto; }
.first-screen-c1 .focus .focus-item{position: relative;*zoom:1;display: block; width:480px;}
.first-screen-c1 .focus .pic-box,.focus .txt-box,.focus .txt-in{display: block;}
.first-screen-c1 .focus .txt-box{position:absolute;bottom: 0; left: 0;width: 480px;z-index:11;overflow: hidden;}
.first-screen-c1 .focus .txt-in{padding:5px 0 0 0;color: #fff; font:normal 20px/1.5 "Microsoft Yahei"; text-align: center; height: 58px; width:380px; display: block; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; margin: 0 50px;}
.first-screen-c1 .focus .mask{position: absolute; z-index: -1;left:0; top:0; width:100%;background-color: #000;opacity: .72; filter: alpha(opacity=72); height: 63px;}

/* Arrows */
.first-screen-c1 .focus .slick-prev, .first-screen-c1 .focus .slick-next {position: absolute;z-index:1001; top:215px; display: block;height:45px;width:23px; cursor: pointer; background:url(http://ue3.17173cdn.com/a/lol/index/2016/v/img/sprite.png) no-repeat; opacity: 0.50; filter: alpha(opacity=50)}
.first-screen-c1 .focus .slick-prev{left:10px;background-position: 0 -15px;}
.first-screen-c1 .focus .slick-next{right:10px;background-position: -33px -15px;}
.first-screen-c1 .focus .slick-prev:hover, .first-screen-c1 .focus .slick-next:hover{ opacity: 1;filter: alpha(opacity=100)}
/* Dots */
.first-screen-c1 .focus .slick-dots{ position: absolute;z-index:1001; bottom:8px; list-style: none; display: block; text-align: center; right: 0; width: 100%; text-align: center; font-size: 0}
.first-screen-c1 .focus .slick-dots li{ position: relative; display: inline-block; *display: inline; *zoom:1; width:15px; height: 15px; overflow: hidden; margin: 0px 3px; cursor: pointer;}
.first-screen-c1 .focus .slick-dots li span {background:#333;float: left; display: block;width:15px; height: 15px;font-size: 0; cursor: pointer; outline: none; border-radius: 50%;}
.first-screen-c1 .focus .slick-dots .slick-active span{background-color: #06a4f3}
.first-screen-c1 .focus-con, .focus-item, .focus-item img{height: 270px;}

/*scroll-pane*/
.scroll-pane{height:300px; width: 100%; overflow-y:auto;}
.jspContainer{ overflow:hidden;	position:relative;}
.jspPane{ position:absolute}
.jspVerticalBar{ position:absolute; top:0; right:0;	width:14px; height:100%; }
.jspHorizontalBar{ position:absolute; bottom:0;	left:0;	width:100%;	height:16px}
.jspVerticalBar *, .jspHorizontalBar *{	margin:0; padding:0}
.jspCap{ display:none}
.jspHorizontalBar .jspCap{ float:left}
.jspTrack{ background:#ebebeb; position:relative}
.jspDrag{ background:#00aa89; position:relative; top:0; left:0; cursor:pointer}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag{ float:left; height:100%}
.jspArrow{ background:#00aa89; text-indent:-20000px; display:block;	cursor:pointer}
.jspArrow.jspDisabled{ cursor:default; background:#80808d}
.jspVerticalBar .jspArrow{ height:16px}
.jspHorizontalBar .jspArrow{ width:16px; float:left; height:100%}
.jspVerticalBar .jspArrow:focus{ outline:none}
.jspCorner{ background:#eeeef4;	float:left;	height:100%}
* html .jspCorner{ margin: 0 -3px 0 0}



/* pn-search */
.pn-search{ padding:50px 0 50px 237px; overflow:hidden; *zoom:1; background:#fff}
.pn-search .tit{ float:left; color:#00b7ee; font-size:20px; font-family:Microsoft YaHei;  line-height:35px; margin-right:10px}

.search-box3{ height:35px; position:relative; width:354px; float:left}
.search-box3 .txt{ width:265px; padding:0 77px 0 10px; color:#585858; background:#fff; border:1px solid #343434; height:33px; line-height:33px; outline: 0}
.search-box3 .btn{ border:none; width:77px; height:35px; cursor:pointer; position:absolute; right:0; top:0; background: url(http://ue2.17173cdn.com/images/lol/index/2013v2/b2.png) 0 -146px; color:#fff; *top:1px}


/* pn-site */
.pn-site{ border-top:1px solid #23262b; padding:40px 0;}
.pn-site .site-box{ width:1000px; margin:0 auto}
.list-site{ overflow:hidden; *zoom:1}
.list-site .item{ float:left; width:20%; text-align:center}
.list-site .tit{ color:#00a0e9; font-size:16px; font-weight:bold; padding-bottom:5px; font-family:Microsoft YaHei}
.list-site .con{ margin-bottom:5px}
.list-site .link{ color:#404e67; font-size:14px}
.list-site .link:hover{ text-decoration:underline}

.pn-float{position: fixed; _position: absolute; width:60px; left: 50%; margin-left: 600px; top: 35%; *zoom:1;}
.fix-sidebar a, .btn-gotop a{display: block; height: 60px; text-align: center; line-height: 60px; background:url(http://ue3.17173cdn.com/a/lol/index/2016/v/img/sprite.png) no-repeat -131px 0; color:#5379a5; font-weight:bold; padding: 0 10px; width: 40px; font-size: 16px; margin-top: 10px; }
.fix-sidebar a:hover, .btn-gotop a:hover, .fix-sidebar .active{background-position:-65px 0; color: #fff}
.fix-sidebar .row2{height: 48px; line-height: 18px; padding-top: 12px;}
.btn-gotop a{position: relative;}
.btn-gotop a:hover .ico-top{background-position:-97px -69px;}
/* global-footer */
.global-footer{ color:#333e51}
.global-footer a:link, .global-footer a:visited, .global-footer a:hover, .global-footer a:active{ color:#333e51; padding:0 15px}