body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,i{ margin:0; padding:0; }
img {border: none;vertical-align:middle}em{ font-style:normal;}ul, li, dl, dd, dt, ol{ list-style: none; }
a {	outline: none; text-decoration: none; cursor: pointer;}table { border-collapse:collapse; border-spacing:0; }
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}input,select{vertical-align: middle;}i{font-style: normal;}
html{overflow-x: hidden;}
body{font-size: 16px; background: url(../images/bg.jpg) top center no-repeat #eee;}

.main{width: 1000px;margin: 0 auto;}



/* 玩家信息区域 */
.player-info {
    border-radius:10px;
    height: 120px;;
    width: 900px;
    padding: 15px 50px;
    border: 1px solid #ccc;
    background-color: #fff;
    text-align: center;
}

.player-info .avatar {
    display: block;
    width: 120px;
    height: 120px;

    float: left;
    overflow: hidden;
    border:2px solid #ccc;
    border-radius: 10px;
}
.player-info .jianglibtn{
    background-color: orange;
    border: none;
    padding: 5px 20px;
    cursor: pointer;
    margin: 20px auto;
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    float: left;
    border-radius: 10px;
}
.player-info .jianglibtn:hover{
    background-color: #f8c51c;
}
.player-info .info {
    width: 430px;height: 120px;
    display: table;
    float: left;
    margin-left: 10px;
        color: #666;
}
.player-info .info b{
    font-size: 24px;
    color: red;
    display: block;
}
.player-info .info .name {
    line-height: 50px;
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.player-info .level span.win-rate {
    color: orange;
}

.player-info .join-btn {
    margin-top: 15px;
}

.player-button {
    background-color: orange;
    border: none;
    padding: 10px 30px;
    cursor: pointer;
    margin: 20px auto;
    display: block;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    border-radius: 10px;
}
.player-button:hover{
    background-color: #d47202;
    color: #fff;
}
/* 排行榜区域 */
.ranking {
    border-radius:10px;
    margin: 20px auto;
    width: 970px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.ranking .title {
    padding: 15px;
    font-size: 24px;
    color: #f8c51c;
    font-weight: bold;
    text-align: center;
}
.ranking .title span{
    width: 27px;height: 24px;
    display: inline-block;
    background: url(../images/jb.png) no-repeat;
    margin-right: 10px;
    vertical-align: middle;
}


/* 替换flex布局，使用IE7兼容的方式 */


.rank-tabs .tab {
    float: left;
    width: 50%;
    text-align: center;
    padding-bottom: 5px;
    font-weight: bold;
    box-sizing: border-box;
    *display: inline; /* IE7 hack */
    *zoom: 1; /* IE7 hack */
}

.rank-tabs .tab.active {
    border-bottom: 2px solid red;
    color: red;
}

.rank-tabs .tab:not(.active) {
    color: blue;
}

/* 替换flex布局，使用IE7兼容的方式 */
.rank-content {
    overflow: hidden; /* 清除浮动 */
    zoom: 1; /* 触发IE hasLayout */
    color: #666;
}

.rank-content:after {
    content: "";
    display: block;
    clear: both;
}

.rank-content .left-rank,
.rank-content .right-rank {
    float: left;
    width: 49%;
    background: #f9f9f9;
}

.rank-content .left-rank {
    margin-right: 2%;
    background: #f9f9f9;
}

.rank-content .tab{
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #666;
    padding:15px 0;
}
.rank-content table {
    width: 100%;
    border-collapse: collapse;
}

.rank-content th,
.rank-content td {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.rank-content th:first-child,
.rank-content td:first-child {
    text-align: center;
}

.rank-content th:nth-child(2),
.rank-content td:nth-child(2) {
    text-align: left;
}

.rank-content th:last-child,
.rank-content td:last-child {
    text-align: right;
}

.rank-content .player-avatar {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #333;
    vertical-align: middle;
    *display: inline; /* IE7 hack */
    *zoom: 1; /* IE7 hack */
}

/* 活动规则区域 */
.rules {
    margin: 20px auto;
    width: 970px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius:10px;
}


.rules .title {
    padding: 15px;
    font-size: 24px;
    color: #f8c51c;
    font-weight: bold;
    text-align: center;
}
.rules .title span{
    width: 27px;height: 24px;
    display: inline-block;
    background: url(../images/gz.png) no-repeat;
    margin-right: 10px;
    vertical-align: middle;
}
.rules .rule-section:first-child {
    margin-top: 0;
}

.rules .section-title {
    padding-top: 10px;
    padding-bottom: 5px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    
}

.rules .section-content {
    padding-left: 17px;
    color: #666;
    line-height: 24px;
    margin: 0;
}


.pop-close{width: 38px;height: 40px;background: url(../images/xx.png);display: block;position: absolute;right:0px;top:0px;}
.pop-close:hover{background-position: 0 -41px;}
.gzpop{color: #fff;font-size: 18px;width: 570px;height: 360px;border:1px solid #aaa69c;background: #eee;position: relative;}
.gzpop h1{text-align: center;line-height: 48px;height:48px;font-weight: bold;background:#ddd;color: #333; }
.tablepop {font-size: 16px;}
.tablepop a,.poptip{color: red;}
.tablepop .poptxt table td{padding: 5px 10px;border:1px solid #ddd;}
.popbtn{width: 154px;height: 40px;line-height: 40px; display: block;background: url(../images/btn.png);font-size: 20px;color: #962300;
	text-align: center;font-weight: bold; }
.popbtn:hover{background-position:0 -40px; }
.poptxt{padding:0px 20px;line-height: 28px;height: 285px;width: 530px;overflow-y: auto;overflow-x: hidden; color: #666;}
.poptxt table{display: table;width: 100%; font-size: 14px;}
.poptxt table td{padding: 5px 0;}
.poptxt table tr:hover{background: #fff; color: #666;}
.gzpop .lingqu{color: #cb6b2b;}

/*底部*/
.bottom{text-align: center;font-size: 12px;padding-top: 50px;color: #999;line-height: 24px;clear: both;}
.bottom a{color: #999}