.icon {
    display: inline-block;
    background: url("../img/sprite.png") no-repeat;
    width: 1212px;
    height: 1027px;
    background-size:1212px 1027px;
}
.i-copper {
    width: 236px;
    height: 377px;
    background-position:-660px 0px;
}
.i-gold {
    width: 405px;
    height: 503px;
    background-position:0px 0px;
}
.i-login {
    width: 294px;
    height: 92px;
    background-position:-220px -652px;
}
.i-prize {
    width: 197px;
    height: 188px;
    background-position:0px -839px;
}
.i-ranking {
    width: 210px;
    height: 316px;
    background-position:0px -513px;
}
.i-rankingLi {
    width: 379px;
    height: 72px;
    background-position:-546px -513px;
}
.i-right {
    width: 119px;
    height: 284px;
    background-position:-1093px -294px;
}
.i-rightHover {
    width: 119px;
    height: 284px;
    background-position:-1093px 0px;
}
.i-ruleLi {
    width: 27px;
    height: 31px;
    background-position:-1093px -588px;
}
.i-scroll {
    width: 177px;
    height: 386px;
    background-position:-906px 0px;
}
.i-silver {
    width: 235px;
    height: 400px;
    background-position:-415px 0px;
}
.i-title1 {
    width: 316px;
    height: 129px;
    background-position:-220px -513px;
}
.i-title2 {
    width: 179px;
    height: 120px;
    background-position:-207px -839px;
}
.i-title3 {
    width: 218px;
    height: 114px;
    background-position:-660px -387px;
}

body, html {
    margin: 0;
    font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
}

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

.clear {
    clear: both;
    height: 0;
    zoom: 1;
    visibility: hidden;

}

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

.top {width: 100%;height: 811px;}
.rank .main{width: 1200px;}

.rank {
    width: 100%;
    background: url("../img/rank.jpg") center 0; padding-top: 98px;
    height: 2210px;
}

.link {
    height: 40px;
    text-align: center;
    background: #26261f;
    font-size: 14px;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 0 30px;

}

.link a {
    color: #fffdf0;
    margin: 0 5px;
    text-decoration: none
}

.link span {
    float: left
}

.link span strong {
    font-weight: normal;
    color: #fffdf0;
    margin-right: 5px;
}

.time {
    position: absolute;
    top: 625px;
    font-size: 30px;
    left: 260px;
    color: #503622;
    font-weight: bold;
    width: 500px;text-align: center;
}
.login{ text-indent: -9999px; position: absolute;top:700px; left: 50%; margin-left: -144px;}
.login-in {
    position: absolute;
    color: #fff7ed;
    border-radius: 15px;
    background: rgba(32, 25, 27, .5);
    width: 624px;
    top: 700px;
    left: 50%;
    margin-left: -312px;
    height: 80px;
    border: #030000 1px solid;
     display: none;

}

.login-in p {
    padding-left: 50px;
    padding-top: 12px;
}

.login-in strong {
    color: #ffc467
}
.login-in strong a{
    color: #ffc467
}
.tab{ position: absolute; width: 416px; overflow: hidden; height: 92px; position: absolute;top:805px; left: 294px;}
.tab li{ background: url("../img/tab.png") no-repeat 0 0; width: 192px; height: 92px; text-indent: -9999px; display: inline-block; cursor: pointer}
.tab li.t1{ background-position:  0 0}
.tab li.t2{ background-position: right 0; margin-left: 20px;}
.tab .t1.hover{ background-position:0 bottom }
.tab .t2.hover{ background-position:right bottom }

.main .title{ text-align: center;}

.box-top{
     position: relative; text-align: center; height: 500px;
}
.show{ display:  block!important;}
.box{ display: none}
.box-top li h1{ color: #fffcf6;  font-weight: normal;}
.box-top li h2{ color: #faf3e5; font-size: 16px; margin-top: 5px;}
.box-top li h3{ color: #f0cc98; margin-top: 10px; font-size: 14px; font-weight: normal}
.box-top li h3 strong{display: inline-block;height: 25px;line-height: 25px;padding: 0 11px;background: #e1af72;color: #3d191a;border-radius: 3px;}
.box-top li h4{ color: #fffcf6;margin-top: 5px;}
.i-gold h1{padding-top: 230px;font-size: 73px;}
.i-silver h1{padding-top: 180px;font-size: 61px;}
.i-copper h1{padding-top: 150px;font-size: 61px;}
.box-top li{ position: absolute;top:20px}
.box-top .top2{top:80px; left: 118px;}
.box-top .top1{ left: 380px; }
.box-top .top3{ right: 136px;top:110px }
.box-common{ text-align: center; clear: both}
.box-common li{  display: inline-block; margin-left: 13px; margin-right: 13px; margin-bottom: 50px;}


.box-common li h1{ color: #fffcf6; font-size: 15px;padding-top: 53px;}
.box-common li h2{ color: #faf3e5; font-size: 44px; font-weight: normal; padding-top: 31px; }
.box-common li h3{ color: #f0cc98; margin-top: 50px; font-size: 14px; font-weight: normal}
.box-common li h3 strong{display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 11px;
    background: #fcdca9;
    color: #403232;
    border-radius: 3px;}
.box-common li h4{ color: #fffcf6}
.box-btm{ text-align: center;padding-left: 100px;}
.box-btm li{  position:  relative; margin-bottom: 25px;color: #d69c5d;font-size: 14px; display: inline-block ; width:490px }
.box-btm li strong{ font-size: 38px; font-weight: normal; color: #fffcf6; position: absolute; left: 14px;top:7px;}
.box-btm li span{color: #f8f1dc; width: 200px; display: inline-block;line-height: 72px; text-align: left }


.prize{ background: url("../img/prize.jpg") no-repeat center 0; width: 100%; height: 1400px; padding-top: 15px; clear: both}
.rule-box{ height: 246px; padding-left: 60px;  color: #fefdef; line-height: 30px; width: 82%}
.rule-box h2{ color: #ffc877; font-size: 24px; padding-bottom: 20px; padding-left: 40px; padding-top: 30px;}
.rule-box p{ position: relative; padding-left: 180px; padding-bottom: 20px;}
.rule-box p strong{color: #ffc877; font-weight: normal; position: absolute; left: 15px; width: 160px; text-align: right}
.rule-box p{}
.pic { margin-top: 60px;}
.pic li { margin-left: 30px; margin-right: 10px; text-align: center; position: relative}
.pic li img{  position: absolute }

.pic li img.img1{ left:-35px;top:25px; }
.pic li img.img2{ left:-40px;top:25px; }
.pic li img.img3{ left:10px;top:-20px; }
.pic li img.img4{ left:20px;top:-20px; }
.pic .name{ position: absolute; left: 0; top:130px; width: 100%; margin: 10px auto 0; font-size: 14px; height: 30px; line-height: 30px; border: #3f3c2e 1px solid; background: #231f23; color: #bf9a68; }
.pic .sum { color: #fff4e4; font-size: 12px; position: absolute; width: 100%; left: 0; text-align: center;top:180px;}
.rule{ background: url("../img/rule.jpg") no-repeat center 0;  width: 100%;height: 907px;}
.text{ color: #dbba8b;  font-size: 15px; padding-top: 50px; line-height: 44px;}
.text strong{ font-weight: normal}
.text li{ position: relative}
.text li span{ position: absolute; left: -35px;top:6px; text-align: center; line-height: 30px; color: #fff}
.scroll {
    position: fixed;
    right: 20px;
    top: 300px;
}



.scroll li {
    cursor: pointer;
    height: 71px;
    line-height: 71px;
    color: #f7f2e5;
    text-align: center
}
.scroll li:hover{ background: #a43706}