@charset "utf-8";body {
    max-width: 640px;
    margin: 0 auto
}

.mod-sec {
    margin: 10px 0;
    padding: 10px;
    background: #fff
}

.mod-line {
    height: 2px;
    margin: 10px 0;
    background: #ffa900
}

.mod-title {
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 2px solid #ffa900
}

.mod-title h3 {
    font-size: 16px;
    line-height: 1;
    position: relative;
    height: 16px;
    padding-left: 20px;
    color: #ffa900
}

.mod-title h3 i {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.mod-title .title-icon1 {
    background-image: url(../images/title_icon_music.png)
}

.mod-title .title-icon2 {
    background-image: url(../images/title_icon_equipment.png)
}

.mod-title .title-icon3 {
    background-image: url(../images/title_icon_equipment2.png)
}

.mod-title .title-icon4 {
    background-image: url(../images/title_icon_equipment3.png)
}

.mod-title .title-icon5 {
    background-image: url(../images/title_icon_hero.png)
}

.mod-title .title-icon6 {
    background-image: url(../images/title_icon_hero2.png)
}

.mod-title .title-icon7 {
    background-image: url(../images/title_icon_hero3.png)
}

.mod-title .title-icon8 {
    background-image: url(../images/lb.png)
}

.mod-border-box {
    padding: 10px;
    border: 1px solid #dae1e6
}

.mod-title2 {
    height: 25px;
    padding-bottom: 10px
}

.mod-title2 p {
    font-size: 12px;
    line-height: 24px;
    width: 100px;
    height: 25px;
    text-align: center;
    color: #000c14;
    background: #def1ff
}

.mb0 {
    margin-bottom: 0
}

.mod-musiclist li {
    height: 40px;
    border-top: 1px dotted #dae1e6
}

.mod-musiclist li:first-of-type {
    border-top: 0
}

.mod-musiclist li a {
    display: block;
    height: 100%
}

.mod-musiclist li .icon {
    position: relative;
    top: 50%;
    display: block;
    float: right;
    width: 8px;
    height: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
    background: url(../images/icon_music.png) no-repeat;
    background-size: 100%
}

.mod-musiclist li .title {
    font-size: 12px;
    line-height: 40px;
    position: relative;
    overflow: hidden;
    height: 40px;
    margin-right: 20px;
    color: #3d4b56
}

.mod-musiclist-rank-head {
    font-size: 12px;
    font-weight: bold;
    line-height: 28px;
    height: 28px;
    margin: 0 -10px;
    padding: 0 10px;
    color: #3d4b56;
    background: #f1f5f8
}

.mod-musiclist-rank-head .h1 {
    float: left;
    width: 2em
}

.mod-musiclist-rank-head .h-more {
    position: relative;
    overflow: hidden;
    height: 28px;
    margin-left: 2em
}

.mod-musiclist-rank-head .h3 {
    float: right;
    width: 3em
}

.mod-musiclist-rank-head .h2 {
    overflow: hidden;
    height: 28px;
    margin-right: 3em;
    text-align: center
}

.mod-musiclist-rank-cont i {
    font-size: 10px;
    line-height: 16px;
    position: relative;
    top: 50%;
    display: block;
    float: left;
    float: left;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    color: #3d4b56;
    background: #def1ff
}

.mod-musiclist-rank-cont li:nth-of-type(1) i {
    color: #fff;
    background: #ff6248
}

.mod-musiclist-rank-cont li:nth-of-type(2) i {
    color: #fff;
    background: #ffa900
}

.mod-musiclist-rank-cont li:nth-of-type(3) i {
    color: #fff;
    background: #73bf24
}

.mod-musiclist-rank-cont p {
    position: relative;
    overflow: hidden;
    height: 40px;
    margin-left: 29px
}

.mod-musiclist-rank-cont a {
    font-size: 12px;
    line-height: 40px;
    position: relative;
    display: block;
    height: 40px;
    margin-right: 30px;
    color: #3d4b56
}

.mod-musiclist-rank-cont span {
    font-size: 10px;
    line-height: 40px;
    display: block;
    float: right;
    overflow: hidden;
    width: 34px;
    height: 40px;
    text-align: center;
    color: #6f8597
}

.mod-hero-select-box {
    padding: 0 10px 10px;
    border: 1px solid #dae1e6;
    background: #fff
}

.mod-hero-select-box .select-box {
    height: 60px;
    margin: -2px 0;
    padding: 10px 0
}

.mod-hero-select-box .select-box li {
    float: left;
    width: 33%
}

.mod-hero-select-box .select-box li:nth-of-type(3n+2) {
    text-align: center
}

.mod-hero-select-box .select-box li:nth-of-type(3n+3) {
    text-align: right
}

.mod-hero-select-box .select-box li p {
    font-size: 12px;
    line-height: 30px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 50px;
    height: 30px;
    padding-left: 25px
}

.mod-hero-select-box .select-box li p:before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 15px;
    height: 15px;
    content: '';
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url(../images/icon_select.png);
    background-size: 100%
}

.mod-hero-select-box .select-box .on p:before {
    background-image: url(../images/icon_select_on.png)
}

.mod-box-title {
    padding: 10px 0
}

.mod-box-title .title {
    line-height: 28px;
    position: relative;
    width: 93px;
    height: 28px;
    text-align: center;
    color: #fff;
    background: #48b1ff
}

.mod-box-title .title:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 3px 4px 0 4px;
    border-style: solid;
    border-color: #48b1ff transparent transparent transparent
}

.mod-des-box {
    margin-top: 10px;
    padding: 6px 10px;
    background: #f1f5f8
}

.mod-des-box p {
    font-size: 12px;
    line-height: 20px;
    color: #3d4b56
}

.mod-des-box span {
    font-weight: bold
}

.mod-iconlist {
    overflow: hidden;
    margin-bottom: -10px;
    margin-left: -7px
}

.mod-iconlist .mod-iconitem {
    float: left;
    box-sizing: border-box;
    width: 20%;
    margin-bottom: 10px;
    padding-left: 7px
}

.mod-iconlist .mod-iconitem img {
    display: block;
    width: 100%;
    height: auto
}

.mod-iconlist .mod-iconitem p {
    font-size: 10px;
    line-height: 24px;
    overflow: hidden;
    height: 25px;
    margin-top: 10px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.mod-iconlist.equip-recom .mod-iconitem {
    width: 16.66%
}

.mod-iconlist.equip-list .mod-iconitem img {
    border-radius: 50%
}

.mod-iconlist.compose-equip-list {
    margin-bottom: 0;
    margin-left: -8px
}

.mod-iconlist.compose-equip-list .mod-iconitem {
    margin-bottom: 15px;
    padding-left: 8px
}

.mod-iconlist.glyph-list {
    overflow-y: auto;
    max-height: 248px;
    margin-left: -10px
}

.mod-iconlist.glyph-list .mod-iconitem {
    width: 16.666%;
    padding-left: 10px
}

.mod-iconlist.glyph-list .mod-iconitem img {
    width: 100%;
    height: auto
}

.mod-iconlist.glyph-list .mod-iconitem p {
    line-height: 20px;
    height: 20px
}

.mod-iconlist.relat-hero {
    margin-left: -15px
}

.mod-iconlist.relat-hero .mod-iconitem {
    box-sizing: border-box;
    width: 33.33%;
    padding-left: 15px
}

.mod-iconlist.relat-hero .mod-iconitem img {
    width: 100%;
    height: auto
}

.mod-srcollbox {
    overflow-x: auto;
    overflow-y: hidden
}

.mod-srcollbox .mod-iconlist {
    position: relative;
    width: 100%;
    height: 95px;
    margin-left: -10px
}

.mod-srcollbox .mod-iconlist .mod-iconitem {
    width: 60px;
    padding-left: 10px
}

.mod-srcollbox .mod-iconlist .mod-iconitem img {
    display: block;
    width: 50px;
    height: 50px
}

.database-nav {
    display: -webkit-box;
    display: box;
    display: -ms-flexbox;
    height: 28px
}

.database-nav li {
    height: 28px;
    padding-left: 10px;
    -webkit-box-flex: 1;
    box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1
}

.database-nav li:first-child {
    padding-left: 0
}

.database-nav li a {
    font-size: 12px;
    line-height: 28px;
    position: relative;
    display: block;
    height: 100%;
    text-align: center;
    color: #fff;
    background: #7d6cff
}

.database-nav .on a:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 3px 4px 0 4px;
    border-style: solid;
    border-color: #007bff transparent transparent transparent
}

.database-nav .n1 a {
    background: #7d6cff
}

.database-nav .n1 a:after {
    border-top-color: #7d6cff
}

.database-nav .n2 a {
    background: #73bf24
}

.database-nav .n2 a:after {
    border-top-color: #73bf24
}

.database-nav .n3 a {
    background: #39d7e9
}

.database-nav .n3 a:after {
    border-top-color: #39d7e9
}

.database-nav .n4 a {
    background: #ffa900
}

.database-nav .n4 a:after {
    border-top-color: #ffa900
}

.musiclist-tab {
    height: 28px;
    padding-bottom: 10px
}

.musiclist-tab ul {
    display: -webkit-box;
    display: box;
    display: -ms-flexbox
}

.musiclist-tab li {
    font-size: 14px;
    line-height: 28px;
    position: relative;
    height: 28px;
    margin-left: 10px;
    text-align: center;
    color: #6f8597;
    background: #def1ff;
    -webkit-box-flex: 1;
    box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1
}

.musiclist-tab li:first-child {
    margin-left: 0
}

.musiclist-tab .on {
    color: #fff;
    background: #48b1ff
}

.musiclist-tab .on:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 3px 4px 0 4px;
    border-style: solid;
    border-color: #48b1ff transparent transparent transparent
}

.musiclist-item {
    display: none;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid #dae1e6
}

.music-hero-box {
    overflow: hidden;
    height: 75px
}

.music-hero-box .img {
    display: block;
    float: left;
    width: 75px;
    height: 75px
}

.music-hero-box .cont {
    position: relative;
    overflow: hidden;
    height: 75px;
    margin-left: 85px
}

.music-hero-box .name {
    font-size: 14px;
    line-height: 28px;
    height: 28px;
    margin-top: 5px;
    padding: 0 10px;
    background: #f1f5f8
}

.music-hero-box .name span {
    color: #48b1ff
}

.music-hero-box .btns {
    display: -webkit-box;
    display: box;
    display: -ms-flexbox;
    overflow: hidden;
    height: 28px;
    margin-top: 10px
}

.music-hero-box .btns a {
    font-size: 14px;
    line-height: 28px;
    display: block;
    height: 28px;
    margin-left: 10px;
    text-align: center;
    color: #fff;
    -webkit-box-flex: 1;
    box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1
}

.music-hero-box .btns a:first-of-type {
    margin-left: 0
}

.music-hero-box .btns .b1 {
    background: #ffa900
}

.music-hero-box .btns .b2 {
    background: #48b1ff
}

.music-hero-musiclist .hd {
    padding: 10px 0
}

.music-hero-musiclist .list-box {
    padding: 0 10px;
    border: 1px solid #dae1e6
}

.music-hero-musiclist .mod-musiclist .icon {
    width: 10px;
    height: 15px;
    background: url(../images/icon_music2.png);
    background-size: cover
}

.equipment-hero-box {
    height: 110px
}

.equipment-hero-box .hero {
    float: left;
    width: 75px
}

.equipment-hero-box .hero img {
    display: block;
    width: 75px;
    height: 75px
}

.equipment-hero-box .hero p {
    font-size: 12px;
    line-height: 26px;
    height: 25px;
    margin-top: 10px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.equipment-hero-box .btns {
    position: relative;
    overflow: hidden;
    height: 110px;
    margin-left: 85px
}

.equipment-hero-box .btns a {
    font-size: 14px;
    line-height: 28px;
    display: block;
    height: 28px;
    margin: 10px 0;
    text-align: center;
    color: #fff
}

.equipment-hero-box .btns .b1 {
    background: #ffa900
}

.equipment-hero-box .btns .b2 {
    background: #48b1ff
}

.equipment-hero-box .cont {
    position: relative;
    top: 50%;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.mod-select2-box .select-box-wrap {
    overflow: hidden;
    margin: -5px
}

.mod-select2-box .select-box {
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
    height: 25px;
    margin: 5px 0;
    padding: 0 5px
}

.mod-select2-box .select-box .label {
    font-size: 12px;
    line-height: 24px;
    float: left;
    width: 55px;
    height: 25px;
    text-align: center;
    color: #0092ff;
    background: #def1ff
}

.mod-select2-box .select-box .input-box {
    position: relative;
    margin-left: 60px
}

.mod-select2-box .select-box .input-box .value {
    font-size: 12px;
    line-height: 24px;
    position: relative;
    height: 25px;
    padding: 0 10px;
    color: #3d4b56;
    background: #f1f5f8
}

.mod-select2-box .select-box .input-box .value:after {
    position: absolute;
    top: 50%;
    right: 5px;
    display: block;
    width: 0;
    height: 0;
    content: '';
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border-width: 5px 4px 0 4px;
    border-style: solid;
    border-color: #3d4b56 transparent transparent transparent
}

.mod-select2-box .select-box .input-box select {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0
}

.no-result {
    font-size: 14px;
    line-height: 36px;
    margin-top: 10px;
    text-align: center;
    color: #3d4b56
}

.glyph-tree-reset {
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
    height: 25px;
    margin: 5px 0;
    padding: 0 5px
}

.glyph-tree-reset a {
    font-size: 12px;
    line-height: 24px;
    display: block;
    height: 25px;
    text-align: center;
    color: #0092ff;
    background: #def1ff
}

.mod-mask {
    position: fixed;
    z-index: 201;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    background: rgba(0,0,0,.8)
}

#heroAll {
    position: absolute;
    top: 50%;
    left: 0;
    margin: 10px;
    padding: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #fff
}

#heroAll .hd {
    position: relative;
    height: 28px;
    padding: 0 10px;
    background: #ffa900
}

#heroAll .hd .title {
    font-size: 14px;
    line-height: 28px;
    height: 28px;
    color: #fff
}

#heroAll .hd .close {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 16px;
    height: 16px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: url(../images/icon_close.png) no-repeat;
    background-size: cover
}

#heroAll .bd {
    padding: 10px;
    border: 1px solid #ffa900;
    border-top: 0
}

#heroAll .select-box {
    overflow: hidden;
    padding: 10px 10px 0 0;
    border: 1px solid #dae1e6
}

#heroAll .select-box li {
    float: left;
    box-sizing: border-box;
    width: 33%;
    padding: 0 0 10px 10px
}

#heroAll .select-box a {
    font-size: 12px;
    line-height: 28px;
    display: block;
    height: 28px;
    text-align: center;
    color: #fff;
    background: #48b1ff
}

#heroAll .select-box .on a {
    background: #4d9bd6
}

#heroAll .hero-box {
    overflow-y: auto;
    max-height: 163px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #dae1e6
}

.equipment-box {
    overflow: hidden;
    height: 75px
}

.equipment-box .icon {
    display: block;
    float: left;
    width: 75px;
    height: 75px;
    border-radius: 50%
}

.equipment-box .cont {
    position: relative;
    top: 50%;
    margin-left: 85px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.equipment-box .cont dl {
    height: 25px;
    padding: 5px 0
}

.equipment-box .cont dt {
    font-size: 12px;
    line-height: 24px;
    float: left;
    width: 75px;
    height: 25px;
    text-align: center;
    color: #0092ff;
    background: #def1ff
}

.equipment-box .cont dd {
    font-size: 12px;
    line-height: 24px;
    box-sizing: border-box;
    height: 25px;
    margin-left: 85px;
    padding-left: 10px;
    background: #f1f5f8
}

.mod-select-tab {
    overflow: hidden;
    padding-bottom: 10px
}

.mod-select-tab ul {
    margin-left: -10px
}

.mod-select-tab li {
    font-size: 12px;
    line-height: 26px;
    float: left;
    width: 86px;
    height: 26px;
    margin-left: 10px;
    text-align: center;
    color: #6f8597;
    background: #def1ff
}

.mod-select-tab .on {
    position: relative;
    color: #fff;
    background: #48b1ff
}

.mod-select-tab .on:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 3px 4px 0 4px;
    border-style: solid;
    border-color: #48b1ff transparent transparent transparent
}

.mod-select-cont .cont-item {
    display: none
}

.equipment-info-item {
    display: none;
    padding: 10px 10px 5px;
    border: 1px solid #dae1e6
}

.equip-panel-title {
    overflow: hidden;
    height: 25px
}

.equip-panel-title p {
    font-size: 12px;
    line-height: 24px;
    width: 100px;
    height: 25px;
    text-align: center;
    color: #000c14;
    background: #def1ff
}

.equip-panel-info:last-of-type .mod-des-box {
    padding-bottom: 0
}

.equip-panel-info .mod-title2 {
    padding-bottom: 0
}

.equip-panel-info .mod-des-box {
    margin-top: 0;
    padding: 5px 13px;
    background: 0
}

.compose-equip-box:last-of-type {
    margin-bottom: -15px
}

.bate-news ul {
    overflow: hidden;
    margin-top: -10px;
    margin-left: -10px
}

.bate-news li {
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    padding: 10px 0 0 10px
}

.bate-news li a {
    font-size: 12px;
    line-height: 24px;
    display: block;
    display: block;
    overflow: hidden;
    height: 25px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.hero-skin {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px
}

.hero-skin-box {
    position: relative;
    overflow: hidden
}

.hero-skin-box .swiper-slide img {
    display: block;
    width: 100%
}

.hero-skin-info {
    padding: 6px 10px;
    margin-top: 10px;
    background: #f1f5f8;
    font-size: 12px;
    line-height: 24px
}

.hero-skin-info p span {
    margin-right: 20px
}

.hero-skin-tab {
    position: absolute;
    z-index: 1;
    bottom: 70px;
    left: 0;
    width: 100%;
    height: 45px;
    background: rgba(0,0,0,.65)
}

.hero-skin-tab .more-skin {
    font-size: 12px;
    line-height: 24px;
    position: relative;
    display: block;
    float: right;
    width: 25px;
    height: 100%;
    text-align: center;
    text-indent: .2em;
    letter-spacing: .2em;
    color: #fff;
    background: #48b1ff;
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    z-index: 10
}

.hero-skin-tab .more-skin:before {
    position: absolute;
    top: 50%;
    left: -3px;
    display: block;
    width: 0;
    height: 0;
    content: '';
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border-width: 4px 3px 4px 0;
    border-style: solid;
    border-color: transparent #48b0ff transparent transparent
}

.hero-skin-tab-cont {
    position: relative;
    margin-right: 28px
}

.hero-skin-tab-cont ul {
    height: 100%
}

.hero-skin-tab-cont li {
    padding: 5px 5px 5px 0;
    width: 35px
}

.hero-skin-tab-cont li.on:before {
    content: "";
    display: block;
    width: 35px;
    height: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    background: #f1f5f8
}

.hero-skin-tab-cont li img {
    display: block;
    width: 35px;
    height: 35px
}

.hero-base-info .info-item {
    overflow: hidden;
    padding-bottom: 10px
}

.hero-base-info .info-label {
    font-size: 12px;
    line-height: 24px;
    float: left;
    overflow: hidden;
    width: 75px;
    height: 25px;
    text-align: center;
    color: #0092ff;
    background: #def1ff
}

.hero-base-info .info-value {
    margin-left: 80px
}

.hero-base-info .info-value li {
    float: left;
    box-sizing: border-box;
    height: 25px;
    padding-left: 5px
}

.hero-base-info .info-value li p {
    line-height: 24px;
    overflow: hidden;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.hero-base-info .values-2 li {
    width: 50%
}

.hero-base-info .values-4 li {
    width: 25%
}

.hero-panel-info dl {
    overflow: hidden;
    height: 25px;
    padding-top: 5px
}

.hero-panel-info dl:first-of-type {
    padding-top: 0
}

.hero-panel-info dt {
    font-size: 12px;
    line-height: 24px;
    float: left;
    width: 75px;
    height: 25px;
    text-align: center;
    color: #000c14;
    background: #def1ff
}

.hero-panel-info dd {
    overflow: hidden;
    height: 25px;
    margin-left: 85px
}

.hero-panel-info dd span {
    display: block;
    width: 0;
    height: 15px;
    margin-top: 5px;
    background: url(../images/icon_star.png) repeat;
    -webkit-background-size: 16px 15px;
    background-size: 16px 15px
}

.hero-panel-info dd .star-1 {
    width: 16px
}

.hero-panel-info dd .star-2 {
    width: 32px
}

.hero-panel-info dd .star-3 {
    width: 48px
}

.hero-panel-info dd .star-4 {
    width: 64px
}

.hero-panel-info dd .star-5 {
    width: 80px
}

.hero-panel-info dd .star-6 {
    width: 96px
}

.hero-panel-info dd .star-7 {
    width: 112px
}

.hero-panel-info dd .star-8 {
    width: 128px
}

.hero-panel-info dd .star-9 {
    width: 144px
}

.hero-panel-info dd .star-10 {
    width: 160px
}

.hero-other-box-tab {
    height: 28px;
    padding-bottom: 10px
}

.hero-other-box-tab ul {
    margin-left: -10px
}

.hero-other-box-tab li {
    font-size: 12px;
    float: left;
    box-sizing: border-box;
    width: 25%;
    height: 28px;
    padding-left: 10px
}

.hero-other-box-tab li a {
    line-height: 28px;
    display: block;
    height: 28px;
    text-align: center;
    color: #6f8597;
    background: #def1ff
}

.hero-other-box-tab .on a {
    position: relative;
    color: #fff;
    background: #48b1ff
}

.hero-other-box-tab .on a:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 3px 4px 0 4px;
    border-style: solid;
    border-color: #48b1ff transparent transparent transparent
}

.hero-other-box-item {
    display: none;
    overflow: hidden
}

.hero-other-box-item .mod-border-box {
    overflow-y: scroll;
    max-height: 245px
}

.hero-other-box-item .text {
    font-size: 12px;
    line-height: 20px;
    margin: -4px 0;
    color: #3d4b56
}

.hero-other-box-item .panel-date {
    overflow: hidden;
    margin: 0 0 -10px -10px
}

.hero-other-box-item .panel-date li {
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    padding: 0 0 10px 10px
}

.hero-other-box-item .panel-date p {
    font-size: 10px;
    line-height: 26px;
    overflow: hidden;
    height: 25px;
    padding: 0 .4rem;
    text-align: left;
    color: #3d4b56;
    background: #f1f5f8
}

.glyph-tab-box {
    overflow: hidden;
    margin-left: -10px
}

.glyph-tab-item {
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    padding-left: 10px
}

.glyph-tab-item .label {
    line-height: 28px;
    position: relative;
    height: 28px;
    text-align: center;
    color: #fff;
    background: #48b1ff
}

.glyph-tab-item .label:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 3px 4px 0 4px;
    border-style: solid;
    border-color: #48b1ff transparent transparent transparent
}

.glyph-tab-item .img {
    display: block;
    width: 75px;
    height: 75px;
    margin: 10px auto;
    border-radius: 50%
}

.glyph-tab-item .name {
    font-size: 12px;
    line-height: 25px;
    height: 25px;
    text-align: center;
    background: #f1f5f8
}

.glyph-cont-box {
    overflow: hidden;
    margin-bottom: -10px
}

.glyph-cont-item {
    padding: 10px 0;
    border-top: 1px dotted #c5d5e1
}

.glyph-cont-item:first-of-type {
    border-top: 0
}

.glyph-cont-item .box1 {
    overflow: hidden
}

.glyph-cont-item .box1 .label {
    float: left;
    overflow: hidden
}

.glyph-cont-item .box1 .label .l1 {
    font-size: 12px;
    line-height: 20px;
    float: left;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    padding: 5px 0;
    text-align: center;
    color: #000b14;
    background: #def1ff
}

.glyph-cont-item .box1 .label .l2 {
    font-size: 12px;
    font-weight: bold;
    line-height: 50px;
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.glyph-cont-item .box1 .value {
    box-sizing: border-box;
    height: 50px;
    margin-left: 120px;
    padding: 5px 10px;
    background: #f1f5f8
}

.glyph-cont-item .box1 .value p {
    font-size: 12px;
    line-height: 20px;
    position: relative;
    color: #3d4b56
}

.glyph-cont-item .box2 {
    overflow: hidden;
    padding-top: 10px
}

.glyph-cont-item .box2 .label {
    font-size: 12px;
    font-weight: bold;
    line-height: 25px;
    float: left;
    width: 75px;
    height: 25px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.glyph-cont-item .box2 .value {
    font-size: 12px;
    line-height: 25px;
    box-sizing: border-box;
    height: 25px;
    margin-left: 85px;
    padding: 0 10px;
    background: #f1f5f8
}

.hero-skill-tab li {
    float: left;
    width: 63px;
    padding-right: 10px
}

.hero-skill-tab li:last-child {
    padding-right: 0
}

.hero-skill-tab li img {
    display: block;
    width: 63px;
    height: 63px;
    margin: 0 auto;
    border-radius: 50%
}

.hero-skill-tab li p {
    font-size: 10px;
    line-height: 25px;
    overflow: hidden;
    height: 25px;
    margin-top: 10px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.hero-skill-tab .on img {
    margin: -1px auto;
    border: 1px solid #ffa900
}

.hero-skill-tab .on p {
    font-weight: bold;
    color: #fff;
    background: #ffa900
}

.hero-skill-cont {
    margin-top: 10px;
    padding: 6px 10px;
    background: #f1f5f8
}

.hero-skill-cont p {
    font-size: 12px;
    line-height: 20px;
    display: none;
    color: #3d4b56
}

.hero-skill-cont span {
    font-weight: bold
}

.hero-skill-item .skill-icon .label {
    font-size: 12px;
    line-height: 25px;
    overflow: hidden;
    height: 25px;
    text-align: center;
    color: #000b14;
    background: #def1ff
}

.hero-skill-item .skill-icon .img {
    display: block;
    width: 63px;
    height: 63px;
    margin: 10px auto;
    border-radius: 50%
}

.hero-skill-item .skill-icon .name {
    font-size: 12px;
    line-height: 25px;
    height: 25px;
    text-align: center;
    background: #f1f5f8
}

.hero-skill-item .skill-box2 {
    float: right;
    box-sizing: border-box;
    width: 33.33%
}

.hero-skill-item .skill-box {
    position: relative
}

.hero-skill-item .skill-box .top-box {
    position: relative;
    overflow: hidden;
    margin: 0 -5px
}

.hero-skill-item .skill-box .top-box-item {
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    padding: 0 5px
}

.hero-skill-item .skill-box .mod-des-box {
    margin-right: 10px
}

.hero-skill-item .skill-box2 .mod-des-box p {
    overflow: hidden
}

.hero-news-list {
    margin: -10px 0
}

.hero-news-list li {
    line-height: 40px;
    overflow: hidden;
    box-sizing: border-box;
    height: 40px;
    border-top: 1px dotted #c5d5e1
}

.hero-news-list li:first-of-type {
    border-top: 0
}

.hero-video-list {
    overflow: hidden;
    margin: -15px 0 0 -9px
}

.hero-video-list li {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 15px 0 0 9px
}

.hero-video-list li .img {
    position: relative;
    overflow: hidden
}

.hero-video-list li .img:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ''
}

.hero-video-list li .img:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    content: '';
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: url(../images/icon_play.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover
}

.hero-video-list li .img img {
    display: block;
    width: 100%
}

.hero-video-list li .title {
    box-sizing: border-box;
    margin-top: 10px;
    padding: 6px 10px;
    background: #f1f5f8
}

.hero-video-list li .title p {
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    height: 40px
}

.hero-panel-change-info {
    overflow-y: auto;
    max-height: 280px;
    margin-bottom: -10px
}

.hero-panel-change-info dl {
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 10px
}

.hero-panel-change-info dt {
    font-size: 10px;
    line-height: 25px;
    float: left;
    box-sizing: border-box;
    width: 60%;
    height: 25px;
    padding: 0 10px;
    color: #3d4b56;
    background: #f1f5f8
}

.hero-panel-change-info dd {
    font-size: 10px;
    line-height: 25px;
    float: right;
    box-sizing: border-box;
    width: 37%;
    height: 25px;
    padding-left: 3px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.equipment-custom-list {
    padding-bottom: 10px
}

.equipment-custom-list ul {
    margin-left: -8px
}

.equipment-custom-list li {
    position: relative;
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 16.66%;
    padding-left: 10px
}

.equipment-custom-list li span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #bae2ff;
    background-image: url(../images/add.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center
}

.equipment-custom-list li img {
    display: block;
    width: 100%;
    height: 100%
}

.equipment-custom-list .on span {
    margin: -1px;
    border: 1px solid #ffa900
}

.equipment-custom-list .on i {
    position: absolute;
    top: 1px;
    right: -5px;
    display: block;
    width: 10px;
    height: 10px;
    background: url(../images/icon_close2.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover
}

#equipment-custom-box .custom-tab {
    overflow: hidden;
    margin-left: -10px
}

#equipment-custom-box .custom-tab li {
    float: left;
    box-sizing: border-box;
    width: 20%;
    padding-left: 10px
}

#equipment-custom-box .custom-tab p {
    font-size: 12px;
    line-height: 28px;
    height: 28px;
    text-align: center;
    color: #958360;
    background: #fff0d4
}

#equipment-custom-box .custom-tab .on p {
    color: #fff;
    background: #ffa900
}

.equipment-tree-box {
    overflow: hidden;
    width: 256px;
    margin: 0 auto
}

.equipment-tree-item {
    position: relative;
    overflow: hidden;
    width: 312px;
    margin: 0 -27px
}

.equipment-tree-box .tree-list {
    float: left;
    width: 103px
}

.equipment-tree-box .tree-item {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 100px
}

.equipment-tree-box .tree-item img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 15px auto 10px;
    border-radius: 50%
}

.equipment-tree-box .tree-item p {
    font-size: 10px;
    line-height: 25px;
    width: 50px;
    height: 25px;
    margin: 0 auto;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.equipment-tree-box .tree-item .line {
    position: absolute;
    z-index: -1;
    top: 40px;
    right: 0;
    left: 0;
    display: block;
    height: 1px;
    background: 0
}

.equipment-tree-box .tree-item.on .line {
    background: #ffa900
}

.equipment-tree-box .tree-1 .tree-item .line {
    right: 0;
    left: 50%
}

.equipment-tree-box .tree-3 .tree-item .line {
    right: 50%;
    left: 0
}

.equipment-tree-box .vertical-line {
    position: absolute;
    top: 40px;
    bottom: 60px;
    display: none;
    width: 1px;
    background: #ce9934
}

.equipment-tree-box .line-1 {
    left: 103px
}

.equipment-tree-box .line-2 {
    right: 105px
}

#glyph-tree-box {
    position: relative;
    width: 300px;
    height: 252px;
    margin: 0 auto;
    border: 1px solid #dae1e6;
    background: url(../images/bg_glyph_tree.png) repeat;
    background-size: 38px 65px
}

#glyph-tree-box .glyph-item {
    position: absolute;
    z-index: 1;
    width: 32px;
    height: 37px
}

#glyph-tree-box .red-glyph .glyph-item {
    background: url(../images/icon_red_glyph.png) no-repeat;
    background-size: 32px 37px
}

#glyph-tree-box .green-glyph .glyph-item {
    background: url(../images/icon_green_glyph.png) no-repeat;
    background-size: 32px 37px
}

#glyph-tree-box .blue-glyph .glyph-item {
    background: url(../images/icon_blue_glyph.png) no-repeat;
    background-size: 32px 37px
}

#glyph-tree-box .green-glyph .on {
    background: url(../images/icon_green_glyph_cur.png) no-repeat;
    background-size: 32px 37px
}

#glyph-tree-box .blue-glyph .on {
    background: url(../images/icon_blue_glyph_cur.png) no-repeat;
    background-size: 32px 37px
}

#glyph-tree-box .red-glyph .on {
    background: url(../images/icon_red_glyph_cur.png) no-repeat;
    background-size: 32px 37px
}

#glyph-tree-box .glyph-item img {
    display: block;
    width: 34px;
    height: 34px;
    margin: 1px 0 0 -1px
}

#glyph-tree-box .blue-glyph .i0 {
    top: 10px;
    left: 40px
}

#glyph-tree-box .blue-glyph .i1 {
    top: 10px;
    left: 78px
}

#glyph-tree-box .blue-glyph .i2 {
    top: 43px;
    left: 21px
}

#glyph-tree-box .blue-glyph .i3 {
    top: 43px;
    left: 59px
}

#glyph-tree-box .blue-glyph .i4 {
    top: 75px;
    left: 3px
}

#glyph-tree-box .blue-glyph .i5 {
    top: 108px;
    left: 21px
}

#glyph-tree-box .blue-glyph .i6 {
    top: 140px;
    left: 3px
}

#glyph-tree-box .blue-glyph .i7 {
    top: 173px;
    left: 21px
}

#glyph-tree-box .blue-glyph .i8 {
    top: 205px;
    left: 40px
}

#glyph-tree-box .blue-glyph .i9 {
    top: 205px;
    left: 77px
}

#glyph-tree-box .red-glyph .i0 {
    top: 10px;
    right: 76px
}

#glyph-tree-box .red-glyph .i1 {
    top: 10px;
    right: 38px
}

#glyph-tree-box .red-glyph .i2 {
    top: 43px;
    right: 57px
}

#glyph-tree-box .red-glyph .i3 {
    top: 43px;
    right: 19px
}

#glyph-tree-box .red-glyph .i4 {
    top: 75px;
    right: 1px
}

#glyph-tree-box .red-glyph .i5 {
    top: 108px;
    right: 19px
}

#glyph-tree-box .red-glyph .i6 {
    top: 140px;
    right: 1px
}

#glyph-tree-box .red-glyph .i7 {
    top: 173px;
    right: 19px
}

#glyph-tree-box .red-glyph .i8 {
    top: 205px;
    right: 75px
}

#glyph-tree-box .red-glyph .i9 {
    top: 205px;
    right: 38px
}

#glyph-tree-box .green-glyph .i0 {
    top: 76px;
    left: 116px
}

#glyph-tree-box .green-glyph .i1 {
    top: 76px;
    left: 153px
}

#glyph-tree-box .green-glyph .i2 {
    top: 108px;
    left: 97px
}

#glyph-tree-box .green-glyph .i3 {
    top: 108px;
    left: 135px
}

#glyph-tree-box .green-glyph .i4 {
    top: 108px;
    left: 173px
}

#glyph-tree-box .green-glyph .i5 {
    top: 140px;
    left: 78px
}

#glyph-tree-box .green-glyph .i6 {
    top: 140px;
    left: 116px
}

#glyph-tree-box .green-glyph .i7 {
    top: 140px;
    left: 154px
}

#glyph-tree-box .green-glyph .i8 {
    top: 140px;
    left: 192px
}

#glyph-tree-box .green-glyph .i9 {
    top: 173px;
    left: 135px
}

.mod-srcollbox .similar-hero-list {
    height: 120px
}

.mod-srcollbox .similar-hero-list .mod-iconitem {
    width: 85px
}

.mod-srcollbox .similar-hero-list .mod-iconitem img {
    width: 75px;
    height: 75px
}

.hero-select-tab li {
    width: 20%
}

.hero-select-tab ul a {
    font-size: 12px;
    line-height: 26px;
    float: left;
    width: 20%;
    height: 26px;
    margin-left: 10px;
    text-align: center;
    color: #6f8597;
    background: #def1ff
}

.mod-title3 {
    line-height: 16px;
    height: 25px;
    color: #ffa900
}

.rank-title:before {
    display: inline-block;
    width: 14px;
    height: 17px;
    margin: -2px 4px 0 1px;
    content: '';
    vertical-align: middle;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAhCAYAAAAoNdCeAAACa0lEQVRIibXWTYjNURjH8c/MeIkmZuFlMYQpRAklG8ZLKYVMGkTNRhbKYhZEKDFW3hYokpUkryWkWFh4LQol8lqDZCOFYZrG21ice7nzn/Ofe3X/fpt/9zznnO95zn3O8zwVXaeVqwp0lTKxssQNa/ECn7APjViHJ2jH0pJOVYJn1biMmb3M+Yo5uN/bRn1SxmvQhAlYjBElHOgWLuARLuFhclKaZyexogigN7VhZO77R2n/2bQyQDAI45KDMVgtxpQJgxnFYDU4jqoMYC2YngYbhgdCVGWhwULQLInB6mVzfYXqi5Ux2HV0ZAwjPIMesA+4mjHoJ87EYP9dhbAhmJfx/lVYHoPNxoCMYbAoBruJ1xmDvuNUDPYeU3EtI9BnzMK5GIxQr5qEKCpX23CncCAWje/wKgPY7eRAWujfKxPUJlT2bkornidwF2PRIFSCYuoUiudzISe2JSfEPJuLi9glJOWtIleS0FchB1ZjI84K77YobEfu2w8TcRgH8FKIsP1YhvV4KuTTtdiABegvFM/NyY2TbcF8XIkc4LPQVbXo3rZVoBmrMSmxphPj8SbNs+0REKE2denZH3ahLgIieNhSOFDo2UIF5SChLxiFjxFbjRB5QyO2X5iMx/z1rCJ5ioQOpoAIiWBLiq0SO/M/8p414HzKgg6MFtJZmiqFBnVKir0etyoV9+pIERDhupql9/y78ydqxHAha5wXOtq8vmFvEVBeN4XmNq9nOIYbQsO6ONYR1wmtc7Xg1ZoSYXKbPsNArMLRQmPsUbdiE34IWeRf9FYIiC9CFummtNx4KAdr/UcY7MmtbU8afgMiyIPMJTlXAgAAAABJRU5ErkJggg==);
    background-size: cover
}

.rank-week-tab {
    padding-bottom: 10px
}

.rank-week-tab-item {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-right: 5px;
    text-align: center
}

.rank-week-tab-item:last-child {
    padding-right: 0;
    padding-left: 5px
}

.rank-week-tab-item dt {
    font-size: 12px;
    line-height: 22px;
    height: 22px;
    color: #79858f;
    background: #f1f5f8
}

.rank-week-tab-item dd {
    line-height: 25px;
    height: 25px;
    color: #000;
    background: #d4edff
}

.rank-week-tab-item.on dd {
    position: relative;
    background: #63b8f7
}

.rank-week-tab-item.on dd:before {
    position: absolute;
    bottom: -4px;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 4px 4px 0 4px;
    border-style: solid;
    border-color: #63b8f7 transparent transparent transparent
}

.rank-table .td {
    display: block;
    box-sizing: border-box;
    padding: 0 4px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.rank-table .img {
    width: 46px;
    height: 46px;
    padding-right: 5px
}

.rank-table-thead {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    height: 18px
}

.rank-table-thead .td {
    font-size: 12px;
    height: 18px;
    text-align: center;
    color: #3d4b56
}

.rank-table-tbody li {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    height: 46px;
    padding-bottom: 15px
}

.rank-table-tbody li:before {
    position: absolute;
    z-index: -1;
    top: 8px;
    left: 0;
    display: block;
    width: 100%;
    height: 30px;
    content: '';
    background: #eee
}

.rank-table-tbody li:last-child {
    padding-bottom: 0
}

.rank-table-tbody .td {
    font-size: 12px;
    line-height: 46px;
    height: 46px;
    text-align: center
}

.rank-table-tbody .img img {
    display: block;
    box-sizing: border-box;
    height: 100%;
    border: 3px solid #eee
}

.rank-table-tbody .td span,.rank-table-tbody .td span a {
    color: #257cbb
}

.quwei-rank-list .hd {
    overflow: hidden;
    height: 20px;
    padding-bottom: 3px
}

.quwei-rank-list .hd .name {
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
    padding-left: 5px;
    color: #ffa900;
    border-left: 3px solid #ffa900
}

.quwei-rank-list .hd .server {
    font-size: 10px;
    line-height: 20px;
    float: right;
    width: 50%;
    text-align: right;
    color: #818181
}

.quwei-rank-list .bd {
    height: 55px;
    padding: 10px;
    background: #f1f5f8
}

.quwei-rank-list .bd .img {
    display: block;
    float: left;
    width: 55px;
    height: 55px
}

.quwei-rank-list .bd .data {
    height: 55px;
    margin-left: 72px
}

.quwei-rank-list .bd .data p {
    font-size: 12px;
    line-height: 28px;
    height: 28px;
    color: #3d4b56
}

.quwei-rank-list .bd .data span {
    color: #f33
}

.rank-hero-data {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 75px;
    padding-bottom: 5px
}

.rank-hero-data .img {
    display: block;
    width: 75px;
    height: 75px;
    border-radius: 50%
}

.rank-hero-data .cont {
    display: block;
    box-sizing: border-box;
    margin-top: 7px;
    padding: 0 10px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.rank-hero-data .cont p {
    font-size: 10px;
    line-height: 25px;
    height: 25px;
    margin-bottom: 10px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.rank-hero-data .info {
    display: block;
    width: 103px;
    height: 60px;
    margin-top: 7px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM4AAAB4CAMAAACNUj2eAAAAUVBMVEX/8NTx1KaVg2Dz2Kzz48fSwqTy1qn758X+7s/m1rr02rD65cH34Ln76821pIXEs5X86cmllHP44r323bTZyaydjGrLu528rI3s3cDf0LOtnHwpLaenAAAFF0lEQVR42u2a63qjIBBAJ6N4xwveou//oCtFmURdMW1w0/04P3Ypab9yyswIAjgcDofD4XA4HA6Hw+FwOBwOh8PxC0lrL/BqEcH/QBrcFIGAl2CYL80CGTwyYAWKuGLACwYXESY3wgvfpMOw15/k4Lc4wBXw+vZMzd+iU2A3/wKUJgxbH+yTLRaB5y3NzJhCPh7QgGTEZlZWUVfhCJahpPFSGXXeopb+WIcj3tXktMhULhUcrFLqpBGgEEtHEn4r2LayPsNnwBJRvZMtUUadb9G5t9fo0ESUhikz6fiI/qYU9HMl6BCrWRHskR6kSepRQplZdFbMhfmOF+jQDGSRceZe11EaXNW3yprO+fyIanPRLnCHQkfhCDHzp8xpLOuI4LF6RXw93rKMnpYKIvqGTo4M+umrexfjE+zNcfacNOHkVsMjcl7S5/QK/6JTULA9dOmnTovx1LSqk67KViLbT3/+QAqsvjk9r0OxNmALUsdisPElaSaDSPKlE0YPeFKnlHA5VYryRZ0KGXTY2dbxllUzn1pmwiWFAoMOpy6l0PJJKbasE+o4C26n0EU7PNZZdeWyCEwadnVU7GSynt3OES0+9YFOvNaJZfR1yGzrfOVFJFvnbAJdHDx4osEDGJNWFfr3vrNX2WhgtDOQ/9J/1PK+mNcEyas60PmTRa7izbqOQtcxVdl0lyrUxFZnu55px51QbOTC7W4p2Ehn8xxKVJNTQCYv6PAKO4Zs3StrG/TIrtWBMhPLJjvIZIOLLIXzOv6Io95JEx0W6vXHxTr00QQQJ3WGFkc+DbZCtsqtKcxYgS2/TCcSGfGVMhkh+AmdOEfsOYD0kQ1NjgtDjM/4lnSmpD8kMuk0OWK7BBnvETtfe+LIJCN2V+mEphXOoU7TrcvuUOEkEa823+McbMQH6gw4UbF1IqkYax56RvYbdKBp2R12YJ2yIS7VqcsZ72ufViqyHZ0PZKuT7Y45/fU63uNH4hfqcMPslCd1hp7ypAcDtnTKUKi3OTMqd2bUvigsD3QYA6BX6jMV5vQgZUDQ48aOjnQxk251qFIX1JyLXLe0Lte5neNgdlCfrvVYcbVTUAqkE+OWf6kT7enoqch1uHVqp9DDP9LJTtkkR6WgQIyXBY8SGIG4NtggTIkwpNVoXYbUf1zZ+lgm/4Zi1slzfonOlmz35NpcqA91WuyB4ZrYts7yCjFI6A3pSR3Cfxpoh0OObMThch2q2aV+hSt+qtPjfdLxseVXB1uYPCygMx1xBh1Gf+k9nQq5LAWsuTZ3SCZQAimdXP9EB1tV2SrcT613vgWlnBGeHn209CW6KzUUECWQ44pcPk/zS3Tqh8xIl4FT12r546XUkbyiw7BTOpYJaSUmSCaLtkenlE/p8jNr/h5sQ9vMOj6uaN6bPPo8utYyHNaU9aKzNAM4pUNco1MuDhCpeBJ8//sylVFi8fq+jg9E9WYdSHUlSxOvDuGvRKKus0Tn1ofq0K2oAxcKOTrj3tdpcIfmgmAjMlptHstQpfhkHeDrkZovhnxssK0WA8Jway8E+HwdAHEw4NB0BYx0/J5fXajN4fRiKJJOh+h/hs7uuMnSfPeLo6T1PyLYJlZXWTdXXQ3QgchpHb+1pbO9DPbqvcleHbyd1GlRwcEqFFxe4t3oApIZntP4zTo9SqoBbENTQknzEqTzGaR6WoKvNPr1CO0j4H8gEokXeIng4HA4HA6Hw+FwOBwOh8PhcDgcDsc3+ANzDUM3Y/boUgAAAABJRU5ErkJggg==) no-repeat;
    background-size: cover
}

.rank-hero-data-info-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 110px;
    margin-bottom: 10px;
    padding: 10px;
    background: #eee
}

.rank-hero-data-info-box .data-info-item {
    display: block;
    box-sizing: border-box;
    height: 110px;
    padding: 0 10px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.rank-hero-data-info-box .data-info-item .canvas {
    font-size: 15px;
    font-weight: bold;
    line-height: 75px;
    position: relative;
    box-sizing: border-box;
    width: 75px;
    height: 75px;
    margin: 0 auto 8px;
    text-align: center;
    border-radius: 50%;
    background: #fff
}

.rank-hero-data-info-box .data-info-item .canvas.red {
    color: #f33;
    background: url(../images/pie-red.png) no-repeat;
    background-size: 391px 390px
}

.rank-hero-data-info-box .data-info-item .canvas.green {
    color: #22ac38;
    background: url(../images/pie-green.png) no-repeat;
    background-size: 391px 390px
}

.rank-hero-data-info-box .data-info-item .canvas.blue {
    color: #00a0e9;
    background: url(../images/pie-blue.png) no-repeat;
    background-size: 391px 390px
}

.rank-hero-data-info-box .data-info-item .canvas.p0 {
    background-position: -0 -0
}

.rank-hero-data-info-box .data-info-item .canvas.p2 {
    background-position: -81px -0
}

.rank-hero-data-info-box .data-info-item .canvas.p20 {
    background-position: -0 -78px
}

.rank-hero-data-info-box .data-info-item .canvas.p3 {
    background-position: -80px -78px
}

.rank-hero-data-info-box .data-info-item .canvas.p4 {
    background-position: -161px -0
}

.rank-hero-data-info-box .data-info-item .canvas.p5 {
    background-position: -161px -78px
}

.rank-hero-data-info-box .data-info-item .canvas.p6 {
    background-position: -0 -157px
}

.rank-hero-data-info-box .data-info-item .canvas.p7 {
    background-position: -81px -157px
}

.rank-hero-data-info-box .data-info-item .canvas.p8 {
    background-position: -161px -157px
}

.rank-hero-data-info-box .data-info-item .canvas.p9 {
    background-position: -238px -0
}

.rank-hero-data-info-box .data-info-item .canvas.p1 {
    background-position: -239px -78px
}

.rank-hero-data-info-box .data-info-item .canvas.p10 {
    background-position: -238px -157px
}

.rank-hero-data-info-box .data-info-item .canvas.p11 {
    background-position: -0 -235px
}

.rank-hero-data-info-box .data-info-item .canvas.p12 {
    background-position: -80px -236px
}

.rank-hero-data-info-box .data-info-item .canvas.p13 {
    background-position: -158px -236px
}

.rank-hero-data-info-box .data-info-item .canvas.p14 {
    background-position: -238px -236px
}

.rank-hero-data-info-box .data-info-item .canvas.p15 {
    background-position: -317px -0
}

.rank-hero-data-info-box .data-info-item .canvas.p16 {
    background-position: -317px -78px
}

.rank-hero-data-info-box .data-info-item .canvas.p17 {
    background-position: -317px -157px
}

.rank-hero-data-info-box .data-info-item .canvas.p18 {
    background-position: -322px -237px
}

.rank-hero-data-info-box .data-info-item .canvas.p19 {
    background-position: -0 -315px
}

.rank-hero-data-info-box .data-info-item .title {
    font-size: 12px;
    line-height: 25px;
    position: relative;
    height: 25px;
    text-align: center;
    text-align: center;
    color: #0092ff;
    background: #fff
}

.rank-hero-data-info-box .data-info-item .title:before {
    position: absolute;
    top: -4px;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    content: '';
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-width: 0 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent #fff transparent
}

.mod-title4 {
    font-size: 16px;
    line-height: 25px;
    height: 25px;
    padding-bottom: 10px;
    color: #ffa900
}

.mod-title4 .date {
    font-size: 12px;
    line-height: 25px;
    position: relative;
    float: right;
    width: 80px;
    height: 25px;
    text-align: center;
    color: #3d4b56;
    background: #f1f5f8
}

.mod-title4 .date:before {
    position: absolute;
    top: 50%;
    left: -4px;
    width: 0;
    height: 0;
    margin-top: -4px;
    content: '';
    border-width: 4px 4px 4px 0;
    border-style: solid;
    border-color: transparent #f1f5f8 transparent transparent
}

.mod-title4:before {
    display: inline-block;
    width: 13px;
    height: 11px;
    margin: 0 4px 0 0;
    content: '';
    vertical-align: middle;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAVCAYAAACzK0UYAAAA4klEQVRIid2UPQ7CMAyFvwDqxAXKwD04AENvgdQeCwZG7sBEB+6BRMsFGKhUlYFEipKm6R8VwlIU27Hfi+MkojrRJGtgD2yAK5AAt8aMGpl51g/AFljK+diVAEB4KnkBgWaXwKIria+SwLDnXQnakIwi/0cSAZkc0UBMC0vdrgwIZVAOrKRe1YAID4mFpUhMMAXUh8TC+vnGt+7jkONq28dBxxU6dEt8JIVhl312o0hyzffQ9IsRn2q6K8fyK5JEOu5ArAXFwBl4ynmnrblyLL/vqx9FJnsnKZ9r962RTlGJeANqnVGDJOOhZwAAAABJRU5ErkJggg==);
    -webkit-background-size: cover;
    background-size: cover
}

.rank-hero-select-tab li {
    box-sizing: border-box;
    width: 25%;
    margin: 0;
    padding-left: 10px;
    background: none
}

.rank-hero-select-tab li span {
    display: block;
    color: #6f8597;
    background: #def1ff
}

.rank-hero-select-tab .on {
    background: none
}

.rank-hero-select-tab li.on:after {
    display: none
}

.rank-hero-select-tab .on span {
    position: relative;
    color: #fff;
    background: #48b1ff
}

.rank-hero-select-tab .on span:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -4px;
    content: '';
    border-width: 3px 4px 0 4px;
    border-style: solid;
    border-color: #48b1ff transparent transparent transparent
}

.rank-hero-select-tab li a {
    display: block;
    color: #958360;
    background: #fff0d4
}

.mod-title2 {
    position: relative;
    z-index: 1
}

.btn-lbyd {
    line-height: 25px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 118px;
    width: 182px;
    height: 25px;
    overflow: hidden
}

.btn-lbyd a {
    font-size: 12px;
    display: block;
    width: 86px;
    height: 25px;
    color: #fff;
    background: #ff6783;
    text-align: center
}

.btn-lbyd .get-hero {
    float: left
}

.btn-lbyd .get-skin {
    float: right
}

.sub-info {
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: -5px
}

.mod-sec .lb-box {
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
    border-bottom: 1px dashed #b3c8d8
}

.mod-sec .lb-box.last {
    border-bottom: none
}

.mod-sec .lb-info {
    width: 80%;
    float: left
}

.mod-sec .lb-info p {
    width: 100%;
    height: 17px;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 10px;
    overflow: hidden
}

.mod-sec .lb-info span {
    display: block
}

.mod-sec .lb-info .rest {
    font-size: 14px;
    color: #b0b0b0;
    float: left
}

.mod-sec .lb-info .all-progress {
    position: relative;
    display: block;
    width: 60%;
    height: 10px;
    margin-top: 5px;
    margin-right: 5px;
    float: left;
    background-color: #e6e6e6
}

.mod-sec .lb-info .now-progress {
    display: block;
    height: 100%;
    background-color: #dea91d
}

.mod-sec .lb-info .percent {
    float: left
}

.mod-sec .lb-box a {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/get-btn.png) no-repeat;
    background-size: 100% 100%;
    float: right
}