/*the global*/
body{font-size:12px;  font-family: "Microsoft Yahei"; letter-spacing:0px; min-width:1000px; background:#19182b; color:#FFF;}
a:focus,a:active,a:hover{ outline:none}
a:hover{ text-decoration: underline;}

.footer{ margin-top:20px;}
.global-footer{ color:#999; background:#212139;}
.global-footer a:link, .global-footer a:visited, .global-footer a:hover, .global-footer a:active{ color:#999;}

.area, .list-item, .comm-pn-bd, .comm-pn-hd, .tab{ *zoom: 1; }
.area:before, .list-item:before, .comm-pn-bd:before, .comm-pn-hd:before, .tab:before{ content: ' '; display: table; }
.area:after, .list-item:after, .comm-pn-bd:after, .comm-pn-hd:after, .tab:after{ content: ' '; display: table; clear: both;}

.ico-crown{ display:inline-block; vertical-align:middle; background:url(http://ue1.17173cdn.com/a/cf/cfpl/2016/mvp/img/sprite-png24.png) no-repeat;}
.ico-crown{ width: 30px; height: 25px; background-position: 0 0}

.bt-more{ display: block; border:1px solid #018af5; font-size: 22px; color:#018af5; font-weight: bold; height: 92px; line-height:92px; text-align: center; margin-top:45px;}
.bt-more i{ display: inline-block; vertical-align: middle; width: 26px; height: 26px; overflow: hidden; text-align: center; line-height: 26px; font-style: normal; background: #018af5; font-size: 22px; font-weight: bold; color:#19182b;; margin:0 10px 3px 0; *margin:33px 10px 33px 0; border-radius: 50%;}
.bt-more:hover{ background: #018af5; color:#19182b; text-decoration: none}
.bt-more:hover i{ background: #19182b; color:#018af5;}

.bt-flex{ display: block; border:1px solid #666; line-height: 42px; text-align: center; color:#666; margin-top:15px;}
.bt-flex:hover{ background: #999; color:#333;}

.gb-ptlist{ *zoom: 1; }
.gb-ptlist .list-item{}
.gb-ptlist .art-item-c1 { float: left; margin-right: 15px; _margin-right:10px;}
.gb-ptlist .art-item-c1 a{ display: block; position: relative; *zoom:1;}
.gb-ptlist .art-item-c2 { overflow: hidden; *zoom: 1; }
.gb-ptlist .tit { width: 99.5%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.comm-ptlist .list-item{ padding:10px 0;}
.comm-ptlist .art-item-c1{ width: 70px;}
.comm-ptlist .art-item-c1 img{ display: block; border-radius: 50%;}
.comm-ptlist .art-item-c2 .tit a{ font-size: 16px; color:#7fc0fe; font-weight: bold;}
.comm-ptlist .art-item-c2 .txt{ color:#999; }
.comm-ptlist .ico-crown{ position: absolute; left:0; top:-17px;}

.comm-ptlist1 .list-item{ margin-bottom:1px;}
.comm-ptlist1 .art-item-num{ float: left; margin:0 20px 0 0; width: 44px; height: 79px; background: #252436; font-size: 22px; color:#666; text-align: center; line-height: 78px;}
.comm-ptlist1 .top .art-item-num{ background: #ffb400; color:#19182b;}
.comm-ptlist1 .art-item-c1, .comm-ptlist1 .art-item-c2{ padding:15px 0 0 0;}
.comm-ptlist1 .art-item-c1{ width: 50px;}
.comm-ptlist1 .art-item-c1 img{ display: block;}
.comm-ptlist1 .art-item-c2 .tit a{ font-size: 16px; color:#7fc0fe; font-weight: bold;}
.comm-ptlist1 .art-item-c2 .info{ color:#666; }
.comm-ptlist1 .art-item-c2 .info strong{ color:#999;}

.comm-tab{}
.comm-tab .tab-item{ float: left;}
.comm-tab .tab-con{ display: block; width: 140px; height: 59px; font-size: 15px; color:#7fc0fe; text-align: center; line-height: 58px;}
.comm-tab .current .tab-con{ background: url(http://ue3.17173cdn.com/a/cf/cfpl/2016/mvp/img/sprite.png) no-repeat 0 -20px;}

.comm-pn{}
.comm-pn-hd{ height: 80px; position: relative; *zoom:1;}
.comm-pn-hd .tit{ font-size: 22px; color:#fff; line-height: 80px; float: left; margin-right:40px;}
.comm-pn-ex .comm-pn-hd .tit{ font-size: 30px;}
.comm-pn-ex .comm-pn-hd .tit i{ display: inline-block; font-size: 0; line-height: 0; vertical-align: middle; width: 14px; height: 14px; border:5px solid #ffb400; margin:0 8px 3px 0; *margin:28px 8px 28px 0; border-radius: 50%;}

/*the layout*/ 
.wrapper{ background:url(http://ue3.17173cdn.com/a/cf/cfpl/2016/mvp/img/wrapper.jpg) no-repeat center top;}
.content{ padding:25px 0 0 0;}
.area{ margin-top:60px;}
.area-in{ width: 1000px; margin:0 auto;}

/*the header*/
.header-c1{ width:1000px; height:297px; margin:0 auto; position:relative; *zoom:1;}
.header-c2{ background: #232235;}
.header-c2-in{ width: 1000px; margin:0 auto; position: relative; *zoom:1;}

.logo-17173{ position: absolute; left:0; top:20px;}
.logo-cf{ position: absolute; left:160px; top:24px;}
.logo-cfpl{ position: absolute; left:380px; top:15px;}

.zt-tit{ font-size: 22px; color:#ffb400; width: 314px; text-align: center; position: absolute; left:360px; top:210px;}
.zt-num{ font-size: 20px; color:#999; position: absolute; left:710px; top:135px;}
.zt-num i{ display: inline-block; vertical-align: middle; width: 1px; height:14px; line-height: 0; font-size: 0; background: #939393; margin-right:15px; margin-bottom:3px;}

.list-nav{ overflow: hidden; *zoom:1;}
.list-nav-item{ float: left; width: 123px;}
.list-nav-item .list-nav-c{ display: block; width: 121px; padding-right:2px; height: 60px; line-height: 60px; font-size: 16px; color:#fff; text-align: center; position: relative; *zoom:1; z-index: 1}
.list-nav-item .list-nav-c i{ width: 2px; height: 14px; font-size: 0; line-height: 0; overflow: hidden; background: #d4d4d6; position: absolute; left:-2px; top:50%; margin-top:-7px;}
.list-nav-item .list-nav-c:hover{direction: ltr; background: #ffb400; color:#19182b; _position: absolute; z-index: 5; text-decoration: none;}
.list-nav-item .list-nav-c:hover i{ display: none; filter: alpha(opacity=0); }

.pn-periods{ position: absolute; right:0; top:11px; z-index: 100;}
.periods-box{ width: 126px; *zoom:1; position: relative; z-index: 100}
.periods-cur{ font-size:16px; height: 38px; line-height:38px; position:relative; color:#19182b; background: #ffb400; text-align: center;}
.periods-cur i{ display: inline-block; vertical-align: middle; width: 15px; height: 15px; background: url(http://ue3.17173cdn.com/a/cf/cfpl/2016/mvp/img/sprite.png) no-repeat 0 0; margin:0 0 2px 5px; *margin:10px 0 9px 5px;}
.periods-old{width:124px; height:120px; border:1px solid #ffb400; padding-bottom:5px; display:none; position: relative; *zoom:1; /* position:absolute; left:0; top:38px;*/ z-index: 100; overflow: auto}
.periods-list li a{ font-size:14px; display:block; height:30px; line-height:30px; padding-left:15px; color:#ffb400;}
.periods-list li a:hover{ background-color:#232235;}
.periods-all .periods-cur i{ background-position: -15px 0}

.box-qq{ width: 220px; position: absolute; right:78px; top:15px; z-index: 20; background-color: #2e1777; border-radius: 14px; }
.box-qq-c1{ height: 34px; padding:0 6px 0 12px;font-size: 16px; color:#9a74f2; line-height: 34px;}
.box-qq-c1 .tit{ float: left;}
.box-qq-c1 .adorn{ float: right; width: 24px; height: 24px; background-color: #9a74f2; border-radius: 7px; margin-top:6px; position: relative;}
.box-qq-c1 .adorn i{ width: 0; height: 0; line-height: 0; font-size: 0; border:5px dashed transparent; border-top-style:solid; border-top-color:#fff; position: absolute; left:50%; top:50%; margin:-2px 0 0 -5px;}
.box-qq-c2{ padding:0 10px; display: none;}
.box-qq-show .box-qq-c1{ border-radius: 14px 14px 0 0}

/*the area1*/
.area1{ margin-top:0;}
.area1 .comm-pn-bd{ height: 478px;}
.pn-rank-star{ float: left; width: 360px;}
.pn-rank-score{ float: right; width: 590px;}

.pn-rank-star .comm-pn-bd{ background: #252436; padding:20px 15px 0; height: 458px;}

.pn-rank-score .comm-pn-c1, .pn-rank-score .comm-pn-c2{ width: 290px;}
.pn-rank-score .comm-pn-c1{ float: left;}
.pn-rank-score .comm-pn-c2{ float: right;}

/*the area2*/
.area2{ background: url(http://ue1.17173cdn.com/a/cf/cfpl/2016/mvp/img/area2.png) no-repeat center bottom;}
.pn-stat .comm-pn-hd{ border-bottom:1px solid #3e3e3e;}
.pn-stat .comm-pn-hd .comm-tab{ position: absolute; left:220px; bottom:-1px;}
.pn-stat .tab-pn-con{ padding:45px 0 26px 190px; position: relative; *zoom:1; min-height: 417px; _height:417px;}
.mod-stat .item{ float: left; width: 150px;}
.mod-stat .bar{ width: 56px; height: 296px; position: relative; *zoom:1; background: #30353d; margin:0 auto;}
.mod-stat .bar-in{ width: 56px; background: #018af5; position: absolute; left:0; bottom:0;}
.mod-stat .avatar{ text-align: center; margin-top:25px;}
.mod-stat .tit{ font-size: 14px; color:#7fc0fe; text-align: center; margin-top:25px;}
.mod-stat .odd .bar-in{ background: #ffb400}

.box-ruler{ position: absolute; left:0; top:22px;}
.box-ruler .bd{ padding:0 0 0 60px;}
.box-ruler .bd span{ display: block; margin-bottom:39px;}

/*the area3*/
.pn-most{}
.pn-most .comm-pn-bd{}
.mod-most{ width: 249px; margin-right:1px; float: left; height: 428px; background: #252436; padding:30px 0 0 0; text-align: center;}
.mod-team{height: 165px; overflow: hidden; *zoom:1; position: relative;}
.mod-team .c1, .mod-team .c2{ width:120px; }
.mod-team .c1{ float: left;}
.mod-team .c2{ float: right;}
.mod-team .c3{ width: 60px; position: absolute; left:50%; margin-left:-30px; top:20px;}
.mod-team .avatar{ height: 80px; width: 100%;}
.mod-team .avatar img{ border-radius: 50%;}
.mod-team .avatar-sm img{ padding-top:10px;}
.mod-team .tit{ font-size: 18px; color:#7fc0fe; line-height: 34px;}
.mod-team .info{ font-size: 24px; color:#666; line-height: 1.3}
.mod-most-tit{ font-size: 24px; color:#ffb400; margin-top:40px;}

.mod-prg{ z-index: 1}
.mod-prg, .mod-prg-info{ width: 150px; height: 150px;}
.mod-prg{ margin:0 auto; position: relative; *zoom:1;}
.mod-prg-info{ position: absolute; left:0; top:0; text-align: center; line-height: 150px; font-size: 24px; color:#7fc0fe;}

.svg-nosupport{ width: 150px; height: 150px; background: url(http://ue2.17173cdn.com/a/cf/cfpl/2016/mvp/img/circle.png) no-repeat; z-index: -1;}

circle{
    -webkit-transition: stroke-dasharray 1s;
    transition: stroke-dasharray 1s;
}	
/*the area4*/
.area4{ background: url(http://ue2.17173cdn.com/a/cf/cfpl/2016/mvp/img/area4.jpg) no-repeat center top;}

.pn-guest{ min-height:340px; _height:340px; padding:80px 0 30px; position: relative; *zoom:1;}
.logo-interview{ position: absolute; left:50%; top:20px; margin-left:-133px;}
.mod-guest{ width: 440px;}
.box-guest{ text-align: center;}
.box-guest img{ border-radius: 50%;}
.box-guest .tit{ font-size: 24px; color:#fff; line-height: 3.2;}

.mod-guest .info{ line-height: 1.83; margin-top:10px;}
.mod-guest .info .tit{ color:#7fc0fe;}

.pn-interview{ background: #252436; padding:20px;}
.list-interview .item{ float: left; width: 100%; padding:15px 0;}
.list-interview .avatar{ float: left; width: 70px; margin-right:35px;}
.list-interview .avatar img{ border-radius: 50%;}
.list-interview .txt{ float: left; position: relative; *zoom:1; background: #3f434b; border-radius: 10px; max-width: 750px; _width:750px;}
.list-interview .txt p{ font-size: 14px; color:#fff; line-height: 22px;  padding:24px 30px;}
.list-interview .txt i{ position: absolute; top:18px; left:-20px; width: 20px; height: 18px; background: url(http://ue3.17173cdn.com/a/cf/cfpl/2016/mvp/img/sprite.png) no-repeat 0 -100px;}
.list-interview .odd .avatar{ float: right; margin:0 0 0 35px;}
.list-interview .odd .txt{ float: right; background: #35334b;}
.list-interview .odd .txt i{ background-position: -30px -100px; left:auto; right:-20px;}

/*the pn-float*/
.pn-float{ position:absolute; width:128px; z-index:200; left:50%; top:445px; margin-left:530px;}
.pn-float-fixed{ position: fixed; top:45px;}
.pn-float-bd{ position: relative; *zoom:1; z-index: 1}
.pn-float-bd .line{ width: 0; font-size: 0; height: 339px; border-left:1px dotted #828285; position: absolute; left:50%; top:0; z-index: -1}
.list-subnav{ width: 125px; margin:0 auto;}
.list-subnav-item{margin-bottom:15px;}
.list-subnav-c{display: block; height: 42px; line-height:42px; color: #666; background-color:#19182b; font-size: 16px; transition: all 0.2s; -webkit-transition: all 0.2s; border:1px solid #666; text-align: center;}
.list-subnav-c:hover{ color:#fff;}
.list-subnav .current .list-subnav-c{background-color:#ffb400; border-color: #ffb400; color: #19182b;}

.list-subnav-item-last .list-subnav-c{ background: #018af5; border-color: #018af5; color:#19182b; line-height: 22px; height: 34px; padding-top:8px;}
.list-subnav-item-last .list-subnav-c:hover{ color:#19182b;}
.list-subnav-item-last .list-subnav-c i{ display: block; font-size: 0; line-height: 0; margin:0 auto; width: 15px; height: 8px; background: url(http://ue3.17173cdn.com/a/cf/cfpl/2016/mvp/img/sprite.png) no-repeat -60px -100px;}

.box-code{ text-align: center;}
.box-code .tit{ color:#fefefe; line-height: 28px;}