body {
    position: relative;
    height: 2480px;
    background-image: url(../images/body.jpg);
    background-position: center 42px;
    background-color: #8e7448;
}

.logo {
    position: absolute;
    top: 60px;
    left: 2%;
    width: 163px;
    height: 129px;
    background-image: url(../images/logo.png);
    z-index: 3;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.m-viewport {
    padding-top: 810px;
}

.top-notice {
    width: 1012px;
    height: 51px;
    line-height: 51px;
    margin: 0 auto 60px;
    font-size: 18px;
    color: #fff2b4;
    text-align: center;
    background-image: url(../images/bg-top-notice.png);
}

.top-notice b {
    color: #ff383d;
}

.m-viewport .diamond-item {
    position: relative;
    width: 1000px;
    height: 130px;
    margin: 0 auto 20px;
    background-image: url(../images/bg-row.png);
}

.cost-tag {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 270px;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.tag-88 {
    background-image: url(../images/tag/tag-88.png);
}

.tag-188 {
    background-image: url(../images/tag/tag-188.png);
}

.tag-388 {
    background-image: url(../images/tag/tag-388.png);
}

.tag-588 {
    background-image: url(../images/tag/tag-588.png);
}

.tag-888 {
    background-image: url(../images/tag/tag-888.png);
}

.tag-1888 {
    background-image: url(../images/tag/tag-1888.png);
}

.tag-4888 {
    background-image: url(../images/tag/tag-4888.png);
}

.tag-9888 {
    background-image: url(../images/tag/tag-9888.png);
}

.tag-19888 {
    background-image: url(../images/tag/tag-19888.png);
}

.tag-29888 {
    background-image: url(../images/tag/tag-29888.png);
}

.diamond-item ul {
    padding-top: 26px;
    padding-left: 340px;
}

.diamond-item li {
    position: relative;
    float: left;
    width: 78px;
    height: 78px;
    margin-right: 53px;
    background-image: url(../images/bg-item.png);
}

.diamond-item .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    background-image: url(../images/sprite-icon.png);
}

.icon-f4 {
    background-position: -0px -0px;
   }
   .icon-f5 {
    background-position: -46px -0px;
   }
   .icon-g1 {
    background-position: -92px -0px;
   }
   .icon-g2 {
    background-position: -138px -0px;
   }
   .icon-g4 {
    background-position: -184px -0px;
   }
   .icon-g5 {
    background-position: -230px -0px;
   }
   .icon-h1 {
    background-position: -276px -0px;
   }
   .icon-h2 {
    background-position: -322px -0px;
   }
   .icon-h3 {
    background-position: -368px -0px;
   }
   .icon-h4 {
    background-position: -414px -0px;
   }
   .icon-h5 {
    background-position: -460px -0px;
   }
   .icon-i1 {
    background-position: -506px -0px;
   }
   .icon-i2 {
    background-position: -552px -0px;
   }
   .icon-i3 {
    background-position: -0px -46px;
   }
   .icon-i4 {
    background-position: -46px -46px;
   }
   .icon-i5 {
    background-position: -92px -46px;
   }
   .icon-f3 {
    background-position: -138px -46px;
   }
   .icon-g3 {
    background-position: -184px -46px;
   }
   .icon-a1 {
    background-position: -230px -46px;
   }
   .icon-a2 {
    background-position: -276px -46px;
   }
   .icon-b1 {
    background-position: -322px -46px;
   }
   .icon-a3 {
    background-position: -368px -46px;
   }
   .icon-a5 {
    background-position: -414px -46px;
   }
   .icon-a4 {
    background-position: -460px -46px;
   }
   .icon-c1 {
    background-position: -506px -46px;
   }
   .icon-b2 {
    background-position: -552px -46px;
   }
   .icon-b4 {
    background-position: -0px -92px;
   }
   .icon-b3 {
    background-position: -46px -92px;
   }
   .icon-b5 {
    background-position: -92px -92px;
   }
   .icon-c2 {
    background-position: -138px -92px;
   }
   .icon-c3 {
    background-position: -184px -92px;
   }
   .icon-c4 {
    background-position: -230px -92px;
   }
   .icon-c5 {
    background-position: -276px -92px;
   }
   .icon-d1 {
    background-position: -322px -92px;
   }
   .icon-d2 {
    background-position: -368px -92px;
   }
   .icon-d3 {
    background-position: -414px -92px;
   }
   .icon-d4 {
    background-position: -460px -92px;
   }
   .icon-d5 {
    background-position: -506px -92px;
   }
   .icon-e1 {
    background-position: -552px -92px;
   }
   .icon-e2 {
    background-position: -0px -138px;
   }
   .icon-e4 {
    background-position: -46px -138px;
   }
   .icon-e3 {
    background-position: -92px -138px;
   }
   .icon-e5 {
    background-position: -138px -138px;
   }
   .icon-f2 {
    background-position: -184px -138px;
   }
   .icon-f1 {
    background-position: -230px -138px;
   }

.ui-topic {
    /* background: #333;
    background: rgba(0, 0, 0, 0.8); */
    color: #fff;
    padding: 5px;
    position: absolute;
    top: 100px;
    left: 200px;
}

.ui-topic .inner_html {
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    font-family: arial;
}

.ui-topic .inner_html a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dotted #990000;
}

.ui-topic .inner_html a:hover {
    border-bottom: 2px solid #990000;
}

.ui-topic {
    color: #00ff00;
}

.ui-topic .itemDesc {
    width: 300px;
    margin-top: 10px;
    color: #a1e5ff;
}

.ui-topic .type2 {
    color: #fff;
}

.ui-topic .type3 {
    margin-bottom: 10px;
}

.ui-topic .green,
.ui-topic .strength,
.ui-topic .agility,
.ui-topic .mentality,
.ui-topic .iniMovementSpeed,
.ui-topic .healthPoint,
.ui-topic .manaPerSecond,
.ui-topic .skillStats,
.ui-integralAddition,
.ui-topic .smPerSecond,
.fightingCapAdd {
    color: #00ff00;
}

.ui-topic .skillAdd1 {
    margin-top: 10px;
}

.ui-topic .skillAdd1,
.ui-topic .skillAdd2 {
    width: 260px;
}

.ui-topic .skillAdd1,
.ui-topic .skillAdd2 {
    color: #0088ff;
}

.ui-topic .purple {
    color: #9205EA;
}

.ui-topic .gold,
.ui-topic .type3 {
    color: #FFCC11;
}

.ui-topic .dGold {
    color: #dd9955;
}

.ui-topic .orange,
.ui-topic .magicValue {
    color: #FF8800;
}

.ui-topic .blue {
    color: #0088ff;
}

.ui-topic .desc {
    max-width: 300px;
    word-break: break-all;
}

#M3-foot {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 6;
}