#app * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body{
  overflow-x: hidden;
}

[v-clock]{
  display: none;
}

[name=main]{
  position: absolute;
  top : 700px;
}

/* common base */

/* common */

/* pc端优先（max-width），故权重也是递增的（例如 1200样式<768样式...）*/

/* main width */

.main_width_2560 {
  max-width: 2560px;
  margin: auto;
}

.main_width_1920 {
  max-width: 1920px;
  margin: auto;
}

.main_width_1600 {
  max-width: 1600px;
  margin: auto;
}

.main_width_1300 {
  max-width: 1200px;
  margin: auto;
}

.main_width_1200 {
  max-width: 1200px;
  margin: auto;
}

/* width */

.width_1200{
  width: 1200px;
  position: relative;
  left: 50%;
  margin-left: -600px;
}

.width_1300{
  width: 1300px;
  position: relative;
  left: 50%;
  margin-left: -650px;
}

.width_1920{
  width: 1920px;
  position: relative;
  left: 50%;
  margin-left: -960px;
}

/* display */

.hide {
  display: none !important;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex_column{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.block{
  display: block;
}

.flex_ju_center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex_ju_between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex_ju_left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.flex_ju_right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.flex_ali_center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex_ali_bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flex_auto {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  width: 0;
}

.flex_wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/*  */

/* font-size */

.f_12{
  font-size: 12px;
}

.f_14{
  font-size: 14px;
}

.f_15{
  font-size: 15px;
}

.f_16{
  font-size: 16px;
}

.f_18{
  font-size: 18px;
}

.f_20{
  font-size: 20px;
}

.f_22{
  font-size: 22px;
}

.f_24{
  font-size: 24px;
}

.f_26{
  font-size: 26px;
}

.f_28{
  font-size: 28px;
}

.f_30{
  font-size: 30px;
}

.f_32{
  font-size: 32px;
}

.f_36{
  font-size: 36px;
}

.f_42{
  font-size: 42px;
}

.f_48{
  font-size: 48px;
}

.f_52{
  font-size: 52px;
}

.f_60{
  font-size: 60px;
}

.f_bold{
  font-weight: bold;
}

.f_italic{
  font-style: italic;
}

@media screen and (max-width : 1200px) {
  .f_12_1200{
    font-size: 12px;
  }

  .f_13_1200{
    font-size: 13px;
  }

  .f_14_1200{
    font-size: 14px;
  }

  .f_15_1200{
    font-size: 15px;
  }

  .f_16_1200{
    font-size: 16px;
  }

  .f_18_1200{
    font-size: 18px;
  }

  .f_20_1200{
    font-size: 20px;
  }

  .f_22_1200{
    font-size: 22px;
  }

  .f_24_1200{
    font-size: 24px;
  }

  .f_26_1200{
    font-size: 26px;
  }

  .f_28_1200{
    font-size: 28px;
  }

  .f_30_1200{
    font-size: 30px;
  }

  .f_32_1200{
    font-size: 32px;
  }

  .f_34_1200{
    font-size: 34px;
  }

  .f_36_1200{
    font-size: 36px;
  }

  .f_38_1200{
    font-size: 38px;
  }

  .f_40_1200{
    font-size: 40px;
  }

  .f_42_1200{
    font-size: 42px;
  }

  .f_44_1200{
    font-size: 44px;
  }
}

@media screen and (max-width : 768px) {
  .f_12_m{
    font-size: 12px;
  }

  .f_13_m{
    font-size: 13px;
  }

  .f_14_m{
    font-size: 14px;
  }

  .f_16_m{
    font-size: 16px;
  }

  .f_18_m{
    font-size: 18px;
  }

  .f_20_m{
    font-size: 20px;
  }

  .f_22_m{
    font-size: 22px;
  }

  .f_24_m{
    font-size: 24px;
  }

  .f_26_m{
    font-size: 26px;
  }

  .f_28_m{
    font-size: 28px;
  }

  .f_30_m{
    font-size: 30px;
  }
}

/* color */

/* ------------------------------网格相关(包含常用的工具类)------------------------------ */

/* grid */

.grid_desktop_12{
  width :100%;
}

.grid_desktop_9{
  width : 75%;
}

.grid_desktop_6{
  width : 50%;
}

.grid_desktop_4{
  width : 33.3333%;
}

.grid_desktop_3{
  width : 25%;
}

.grid_desktop_2{
  width : 16.6666%;
}

/* 特殊的网格值 */

.grid_desktop_9_top{
  width : 74.42%;
}

.grid_desktop_3_top{
  width : 25.58%;
}

.grid_container_wrap{
  overflow: hidden ;
}

.grid_container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.grid_container.spacing_40{
  margin: -40px
}

.grid_container.spacing_40>*{
  padding: 40px;
}

.grid_container.spacing_20{
  margin: -20px
}

.grid_container.spacing_20>*{
  padding: 20px;
}

.grid_container.spacing_26{
  margin: -26px
}

.grid_container.spacing_26>*{
  padding: 26px;
}

.grid_container.spacing_15{
  margin: -15px
}

.grid_container.spacing_15>*{
  padding: 15px;
}

.grid_container.spacing_10{
  margin: -10px
}

.grid_container.spacing_10>*{
  padding: 10px;
}

.grid_container.spacing_left_right_20{
  margin-left: -20px;
  margin-right : -20px;
}

.grid_container.spacing_left_right_20>*{
  padding-left: 20px;
  padding-right: 20px;
}

.grid_container.spacing_left_right_15{
  margin-left: -15px;
  margin-right : -15px;
}

.grid_container.spacing_left_right_15>*{
  padding-left: 15px;
  padding-right: 15px;
}

.grid_container.spacing_left_right_10{
  margin-left: -10px;
  margin-right : -10px;
}

.grid_container.spacing_left_right_10>*{
  padding-left: 10px;
  padding-right: 10px;
}

.grid_container.spacing_left_right_5{
  margin-left: -5px;
  margin-right : -5px;
}

.grid_container.spacing_left_right_5>*{
  padding-left: 5px; padding-right: 5px;
}

.grid_container.spacing_top_bottom_15{
  margin-top: -15px;
  margin-bottom : -15px;
}

.grid_container.spacing_top_bottom_15>*{
  padding-top: 15px;
  padding-bottom: 15px;
}

.grid_container.spacing_top_bottom_10{
  margin-top: -10px;
  margin-bottom : -10px;
}

.grid_container.spacing_top_bottom_10>*{
  padding-top: 10px;
  padding-bottom: 10px;
}

.grid_container.spacing_top_bottom_17{
  margin-top: -17px;
  margin-bottom : -17px;
}

.grid_container.spacing_top_bottom_17>*{
  padding-top: 17px;
  padding-bottom: 17px;
}

.grid_container.spacing_top_bottom_5{
  margin-top: -5px;
  margin-bottom : -5px;
}

.grid_container.spacing_top_bottom_5>*{
  padding-top: 5px;
  padding-bottom: 5px;
}

.grid_container>*{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* break_point 0*/

@media only screen and (min-width : 1920px){
  .hide_for_\>\=1920{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\>\=1920 *{
    background-image: none!important;
  }
}

@media only screen and (max-width : 1919px){
  .hide_for_\<\=1919{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\<\=1919 *{
    background-image: none!important;
  }
}

/* break_point 1 */

@media only screen and (min-width : 1601px){
  .hide_for_\>\=1601{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\>\=1601 *{
    background-image: none!important;
  }
}

@media only screen and (max-width : 1600px){
  .hide_for_\<\=1600{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\<\=1600 *{
    background-image: none!important;
  }
}

/* break_point 2 */

@media only screen and (min-width : 1201px){
  .hide_for_\>\=1201{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\>\=1201 *{
    background-image: none!important;
  }
}

@media only screen and (max-width : 1200px){
  .grid_tablet_12{
    width: 100%;
  }

  .grid_tablet_6{
    width : 50%;
  }

  .grid_tablet_4{
    width : 33.3333%;
  }

  .grid_tablet_3{
    width : 25%;
  }

  .hide_for_\<\=1200{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\<\=1200 *{
    background-image: none!important;
  }

  .pc .hide_for_pcAndTablet {
    display: none !important;
    background-image: none!important
  }

  .pc .hide_for_pcAndTablet *{
    background-image: none!important
  }
}

/* break_point 3 */

@media only screen and (min-width : 993px){
  .hide_for_\>\=993{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\>\=993 *{
    background-image: none!important;
  }
}

@media only screen and (max-width : 992px){
  .grid_992_12{
    width: 100%;
  }

  .grid_992_6{
    width: 50%;
  }

  .hide_for_\<\=992{
    display: none!important;
    background-image: none!important;
  }

  .hide_for_\<\=992 *{
    background-image: none!important;
  }
}

/* break_point 4 */

@media only screen and (min-width : 769px){
  .hide_for_\>\=769,
    .hide_for_pc
    {
    display: none!important;
    background: none!important;
  }

  .hide_for_\>\=769 *,
    .hide_for_pc *
    {
    background: none!important;
  }
}

@media only screen and (max-width : 768px){
  .grid_mobile_12{
    width : 100%;
  }

  .grid_mobile_6{
    width:  50%;
  }

  .grid_mobile_4{
    width : 33.3333%;
  }

  .grid_mobile_3{
    width : 25%;
  }

  .hide_for_mobile,
    .hide_for_m,
    .hide_for_\<\=768
    {
    display: none!important;
    background: none!important;
  }

  .hide_for_mobile *,
    .hide_for_m *,
    .hide_for_\<\=768 *
    {
    background: none!important;
  }

  .grid_container.spacing_20_mobile{
    margin: -20px
  }

  .grid_container.spacing_20_mobile>*{
    padding: 20px;
  }

  .grid_container.spacing_8_mobile{
    margin: -8px
  }

  .grid_container.spacing_8_mobile>*{
    padding: 8px;
  }

  .grid_container.spacing_5_mobile{
    margin: -5px
  }

  .grid_container.spacing_5_mobile>*{
    padding: 5px;
  }

  .grid_container.spacing_left_right_15_for_mobile{
    margin-left: -15px;
    margin-right : -15px;
  }

  .grid_container.spacing_left_right_15_for_mobile>*{
    padding-left: 15px;
    padding-right: 15px;
  }

  .grid_container.spacing_left_right_10_for_mobile{
    margin-left: -10px;
    margin-right : -10px;
  }

  .grid_container.spacing_left_right_10_for_mobile>*{
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid_container.spacing_left_right_5_for_mobile{
    margin-left: -5px;
    margin-right : -5px;
  }

  .grid_container.spacing_left_right_5_for_mobile>*{
    padding-left: 5px; padding-right: 5px;
  }

  .grid_container.spacing_top_bottom_15_for_mobile{
    margin-top: -15px;
    margin-bottom : -15px;
  }

  .grid_container.spacing_top_bottom_15_for_mobile>*{
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .grid_container.spacing_top_bottom_10_for_mobile{
    margin-top: -10px;
    margin-bottom : -10px;
  }

  .grid_container.spacing_top_bottom_10_for_mobile>*{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .grid_container.spacing_top_bottom_17_for_mobile{
    margin-top: -17px;
    margin-bottom : -17px;
  }

  .grid_container.spacing_top_bottom_17_for_mobile>*{
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .grid_container.spacing_top_bottom_8_for_mobile{
    margin-top: -8px;
    margin-bottom : -8px;
  }

  .grid_container.spacing_top_bottom_8_for_mobile>*{
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .grid_container.spacing_top_bottom_5_for_mobile{
    margin-top: -5px;
    margin-bottom : -5px;
  }

  .grid_container.spacing_top_bottom_5_for_mobile>*{
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

@media only screen and (max-width : 480px){
  .grid_\<\=480_6{
    width:  50%;
  }
}

.hover\:c_f8b700:hover {
  color: #f8b700
}

.hover\:underline:hover {
  text-decoration: underline
}

.hover\:c_f8b700{
  color : #f8b700;
}

.f_normal {
  font-style: normal;
}

.f_italic{
  font-style: italic;
}

.text_center {
  text-align: center;
}

.text_left {
  text-align: left;
}

.c_988749{
  color : #988749;
}

.c_fdf8e3 {
  color: #fdf8e3;
}

.c_ce5215 {
  color: #ce5215
}

.c_d9d3c3 {
  color: #d4ccb3
}

.c_afa47b {
  color: #afa47b
}

.c_f8b700 {
  color: #f8b700;
}

.c_33261c {
  color: #33261c
}

.c_f4e0a7 {
  color: #f4e0a7
}

.c_1e2125 {
  color: #1e2125;
}

.c_white{
  color : white;
}

.m_t_0\.2em {
  margin-top: 0.2em;
}

.module {
  padding: 0 8px;
}

/* width */

.width_1260 {
  width: 1260px;
  position: relative;
  margin-left: 50%;
  left: -630px;
}

.width_max_1920 {
  max-width: 1920px;
  margin: auto;
}

.spirit_1 {
  background: url( https://blz.nosdn.127.net/1/gold/images/minisite/war3-tournament/2020winter/spirit_1.png) no-repeat;
}

.spirit_2{
  background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/2021summer-sprite.png?v=9) no-repeat;
}

.p_t_55{
  padding-top: 55px;
}

.x-nav .j_item_part{
  padding: 0;
}

.x-nav  .j_item_part .part_activity{
  width: 160px;
  height: 47px;
  background-position: -1643px -33px;
  display: inline-block;
}

.x-nav .j_item_part .part_activity:hover{
  background-position: -1641px -100px;
}

.x-nav_fixed  .j_item_part .part_activity{
  background-position: -1641px -24px;
}

.x-nav_fixed  .j_item_part .part_activity:hover{
  background-position: -1639px -91px;
}

.left_nav{
  position: fixed;
  top: 300px;
  left: 30px;
  z-index: 90;
}

.vote_link{
  width: 170px;
  height: 120px;
  background-position:-103px -368px;
  position: relative
}

.vote_link .vote_url{
    width: 150px;
    height: 36px;
    cursor: pointer;
    position: absolute;
    top: 75px;
    left: 10px;
  }

.vote_code{
  background-position: -101px -512px;
  width: 170px;
  height: 308px;
  margin-top: 25px;
}

/* common module */

/* common-title */

.wt_title{
  height: 52px;
  text-align: center;
  position: relative;
  overflow: hidden
}

.wt_title::before {
    display: block;
    content: "";
    position: absolute;
    width: 793px;
    height: 52px;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 0;
    background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/2021summer-sprite.png?v=9) no-repeat;
    background-position: 0 0;
  }

.wt_title.live_sprite::before{
    background-position:-562px 0;
  }

.wt_title.reward_sprite::before{
    background-position:-562px -128px;
  }

.wt_title.news_sprite::before{
    background-position: -562px -432px;
  }

.wt_title.bracket_sprite::before{
    background-position: -564px -536px;
  }

.wt_title.video_sprite::before{
    background-position: -562px -640px;
  }

.wt_title.award_sprite::before{
    background-position:-562px -128px;
  }

.wt_title.contribute_sprite::before{
    width: 843px;
    height: 52px;
    background-position:-537px -233px;
  }

.wt_title.rank_sprite::before{
    width: 593px;
    height: 52px;
    background-position: -640px -337px;
  }

/* 边框 */

/* module live */

#live {
  background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/bg_02.jpg) no-repeat center top;
  padding-top: 25px;
  padding-bottom: 55px
}

#live .tit {
    display: none;
  }

/* module award */

#award {
  padding: 28px 0;
  background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/award_02.png) no-repeat center top;
  position: relative;
  z-index: 2
}

#award .heroes_right{
    position: absolute;
    right: 50%;
    margin-right: -960px;
    top: -100px;
    width: 411px;
    height: 798px;
    background-position:-1509px -714px;
  }

#award .award_widget{
    position: absolute;
    left : 50%;
    margin-left: -1180px;
    top : -120px;
  }

#award .award_img{
    display: block;
    margin: 40px auto 30px;
  }

#award .progress_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 1260px;
    margin: 20px auto 0
  }

#award .progress_wrap .progress_left{
      width: 260px;
      background: rgba(255, 255, 255, 0.1);
      position: relative
    }

#award .progress_wrap .progress_left .progress_cup{
        position: absolute;
        background-position:  -882px -1411px;
        width: 183px;
        height: 365px;
        left: 0;
        top: -75px;
      }

#award .progress_wrap .progress_inner,
        #award .progress_wrap .total_inner {
      padding: 10px 0
    }

#award .progress_wrap .progress_inner p,#award .progress_wrap .total_inner p{
        line-height: normal;
      }

#award .progress_wrap .progress_inner {
      padding-left: 8px;
      background: rgba(255, 255, 255, 0.1);
    }

#award .progress_wrap .total_inner {
      width: 35.1%;
      background: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/total_bg.jpg) no-repeat center;
      background-size: cover;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

#award .progress_wrap .progress {
      position: relative
    }

#award .progress_wrap .progress>img {
        width: 100%;
      }

#award .progress_wrap .progress .bar {
        position: absolute;
        top: 10.7%;
        left: 12.3%;
        height: 21.7%;
        width: 87%
      }

#award .progress_wrap .progress .bar .mark {
          position: relative;
          height: 100%;
          z-index: 2
        }

#award .progress_wrap .progress .bar .mark p {
            word-break: keep-all;
            top: 0;
            height: 100%;
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color : #d9d3c3
          }

#award .progress_wrap .progress .bar .mark p:nth-child(1) {
              left: 1%;
            }

#award .progress_wrap .progress .bar .mark p:not(:first-child) {
              -webkit-transform: translateX(-50%);
                      transform: translateX(-50%)
            }

#award .progress_wrap .progress .bar .mark p:nth-child(2) {
              left: 27%;
            }

#award .progress_wrap .progress .bar .mark p:nth-child(3) {
              left: 48.5%;
            }

#award .progress_wrap .progress .bar .mark p:nth-child(4) {
              left: 70%;
            }

#award .progress_wrap .progress .bar .mark p:nth-child(5) {
              left: 91.5%;
            }

#award .progress_wrap .progress .bar .currentBar {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          background: -webkit-gradient(linear, left top, left bottom, from(#48b1c1), to(#3d62b1));
          background: linear-gradient(to bottom, #48b1c1, #3d62b1)
        }

#award .progress_wrap .progress .bar .currentBar::after{
            display: block;
            content: "";
            height: 110%;
            position: absolute;
            right: -1px;
            top : -5%;
            width  : 1px;
            background-image: -webkit-gradient(linear,left top, left bottom,from(#b0a581),color-stop(#ffe6a8),to(#b0a581));
            background-image: linear-gradient(to bottom,#b0a581,#ffe6a8,#b0a581)
          }

#award .progress_wrap .progress .lock_status {
        position: absolute;
        top: 36%;
        left: 35.7%;
        width: 56.2%;
        height: 27%
      }

#award .progress_wrap .progress .lock_status .lock_item {
          display: block;
          position: absolute;
          width: 9.5%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAATCAYAAAB2pebxAAABJ0lEQVQ4jZ3TTStFURTG8R/dvBXJwMT7aybKTEmZYOIb+ABK5EsoRkYGJuY+wh0YkBEZGChFMtUl5RYGUrRrnzpd19l4JmutfZ79P3vtdU5D/9CYGnVgHYsYjPULnnCFfRzlt9RChnGMvlpyTp9YibC6kEPM4xV7OEUVTZjBGjrxhh4810KmcIEPzOKszikmcY5mbGA3LDbmDEsxln8ABF3iIOYL2WIeMh3jScF9ZC1np/oGmYjxLgG5ibE325+HZBOpJCCPMZbQniVBc2iJ+ThaCyBduTxMrBymM4LbxNuLNBraaUuYqonnbY0JQ9BmylAEeccWdrAd6z9DmuIPGDwDsa6rUgEkaBn3Mf6rnUyrKcNvIKnp/QqSVLiT8Jlfo/sf+x9Q+QL9Bi0/pT7a/AAAAABJRU5ErkJggg==) no-repeat center
        }

#award .progress_wrap .progress .lock_status .lock_item.active {
            background-image: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/unlock.png)
          }

#award .progress_wrap .progress .lock_status .lock_item::before {
            display: block;
            content: "";
            padding-top: 100%;
          }

#award .progress_wrap .progress .lock_status .lock_item:nth-child(1) {
            left: 0;
          }

#award .progress_wrap .progress .lock_status .lock_item:nth-child(2) {
            left: 33.33%;
          }

#award .progress_wrap .progress .lock_status .lock_item:nth-child(3) {
            left: 66.66%;
          }

#award .progress_wrap .progress .lock_status .lock_item:nth-child(4) {
            left: 100%;
          }

#award .progress_wrap .progress .lock_info {
        position: absolute;
        top: 63%;
        left: 31%;
        height: 23%;
        width: 65%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between
      }

#award .progress_wrap .progress .lock_info>p {
          width: 13.8%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }

#award .progress_wrap .total {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column
    }

#award .progress_wrap .total h4 {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center
      }

#award .progress_wrap .total h4::before,
                #award .progress_wrap .total h4::after {
          margin: 0 10px;
          content: "";
          display: block;
          height: 1px;
          width: 60px;
          background: rgba(175, 164, 123, 0.3);
        }

#award .player_rank{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    background: url(https://blz.nosdn.127.net/1/gold/images/minisite/war3-tournament/2020winter/vote_list_bg.jpg) no-repeat -100px -40px;
    padding : 0 13px 30px 0;
    border : 1px solid rgba(207,220,230,0.3);
    background-clip: border-box;
  }

#award .player_rank_wrap {
    padding-top: 40px;
    font-size: 16px;
    color: #cfdce6;
    width: 790px
  }

#award .player_rank_wrap .rank_dt{
      margin-top : 40px;
    }

#award .player_rank_wrap>div:nth-child(3) .rank_num,
            #award .player_rank_wrap>div:nth-child(4) .rank_num,
            #award .player_rank_wrap>div:nth-child(5) .rank_num{
        font-size: 24px;
      }

#award .player_rank_wrap .rank_dt,
        #award .player_rank_wrap .rank_dd {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      text-align: center
    }

#award .player_rank_wrap .rank_dt .rank_num, #award .player_rank_wrap .rank_dd .rank_num {
        width: 15%;
      }

#award .player_rank_wrap .rank_dt .rank_id, #award .player_rank_wrap .rank_dd .rank_id {
        width: 30%;
        text-align: left
      }

#award .player_rank_wrap .rank_dt .rank_id .photo, #award .player_rank_wrap .rank_dd .rank_id .photo {
          display: inline-block;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background-color: #33261C;
          position: relative;
          vertical-align: middle;
          overflow: hidden;
          margin-right: 10px
        }

#award .player_rank_wrap .rank_dt .rank_id .photo img, #award .player_rank_wrap .rank_dd .rank_id .photo img {
            position: absolute;
            width: 100%;
          }

#award .player_rank_wrap .rank_dt .rank_id .photo::after, #award .player_rank_wrap .rank_dd .rank_id .photo::after {
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid #807F7E;
            border-radius: 50%;
            top: 0;
            left: 0;
          }

#award .player_rank_wrap .rank_dt .rank_flag, #award .player_rank_wrap .rank_dd .rank_flag {
        width: 10%;
      }

#award .player_rank_wrap .rank_dt .rank_race, #award .player_rank_wrap .rank_dd .rank_race {
        width: 10%;
      }

#award .player_rank_wrap .rank_dt .rank_vote, #award .player_rank_wrap .rank_dd .rank_vote {
        width: 35%;
        text-align: right;
        padding-right: 25px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
      }

#award .player_rank_wrap .rank_dt {
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      padding-bottom: 8px;
    }

#award .player_rank_wrap .rank_dd {
      padding: 3px 0;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background: rgba(37, 84, 129, 0.3);
      margin-top: 2px
    }

#award .player_rank_wrap .rank_dd.rank_dd_col_2 {
        background: rgba(37, 84, 129, 0.5);
      }

#award .player_rank_wrap .rank_dd .rank_id,
            #award .player_rank_wrap .rank_dd .rank_num {
        font-size: 18px;
      }

#award .player_rank_wrap .rank_dd.rank_top .rank_id,
            #award .player_rank_wrap .rank_dd.rank_top .rank_num {
        font-weight: 700
      }

#award .player_rank_wrap .rank_dd.rank_top .rank_id .photo, #award .player_rank_wrap .rank_dd.rank_top .rank_num .photo {
          width: 51px;
          height: 51px;
          margin-left: -8px
        }

#award .player_rank_wrap .rank_dd.rank_top .rank_id .photo::after, #award .player_rank_wrap .rank_dd.rank_top .rank_num .photo::after {
            background: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2020winter/vote/player_rank.png) 0 0 no-repeat;
            border: none;
          }

#award .player_rank_wrap .rank_dd.rank_top .rank_id .photo.photo_1::after, #award .player_rank_wrap .rank_dd.rank_top .rank_num .photo.photo_1::after {
              background-position: 0 -62px;
            }

#award .player_rank_wrap .rank_dd.rank_top .rank_id .photo.photo_2::after, #award .player_rank_wrap .rank_dd.rank_top .rank_num .photo.photo_2::after {
              background-position: 0 -126px;
            }

#award .award_footer h4{
      color: #d9d3c3;
      line-height: 1;
      position: relative;
      letter-spacing: 2px;
      margin-top: 40px
    }

#award .award_footer h4::before{
        width: 1232px;
        display: block;
        position: absolute;
        content: '';
        left : 50%;
        margin-left : -616px;
        top : 50%;
        margin-top : -1px;
        height: 3px;
        background: url(https://blz.nosdn.127.net/1/gold/images/minisite/war3-tournament/2020winter/spirit_1.png) no-repeat;
        background-position:  -16px -1287px;
      }

#award .award_footer #join_activity{
      background-position:  -820px -882px;
      width: 307px;
      height: 88px;
      display: block;
      margin : 24px auto 0
    }

#award .award_footer #join_activity:hover{
        background-position:  -820px -789px;
      }

#award .award_info{
    text-align: center;
    color: #d9c898
  }

#award .award_info .color_gold{
      color: #f8b700;
    }

/*  module - 新闻&对阵模块 */

#news_against {
  padding-top: 55px;
  background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/news_bg.png) no-repeat center top;
  padding-bottom: 0
}

#news_against .news_img {
    width: 600px;
    height: 260px;
    margin-right: 0;
    border: none
  }

#news_against .news_img img {
      width: 100% !important;
      height: 260px !important;
    }

#news_against .news_img .img .txt {
      background-color: rgba(0, 0, 0, 0.8);
      border: none;
      color: #d9c898;
    }

#news_against .news_img .img li:hover .txt {
      opacity: 0.8;
      color: #d9c898;
    }

#news_against .news_img .num {
      bottom: 13px;
      z-index: 9;
      border-color: #8f6950
    }

#news_against .news_img .num li.active {
        background-color: #f9ae1b;
      }

#news_against .news_img .num li {
        height: 14px;
        width: 14px;
      }

#news_against .news_text {
    width: 630px;
    float: right;
    height: 300px;
    background-origin: padding-box;
    background-size: cover
  }

#news_against .news_text .title {
      border-bottom: 2px solid rgba(50, 34, 24, 0.8);
    }

#news_against .news_text .subTitlle {
      margin-top: 3px;
    }

#news_against .news_text .h-newsList {
      width: 100%;
      height: auto;
      border-top: 1px solid rgba(255, 255, 255, 0.1)
    }

#news_against .news_text .h-newsList a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #efdcad;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        font-size: 16px;
        padding-left: 20px;
      }

#news_against .news_text .h-newsList a:hover {
        color: white !important
      }

#news_against .news_text .h-newsList a:hover>span {
          color: white !important;
        }

#news_against .news_text .h-newsList .text {
        line-height: 51px;
        height: 51px;
        width: 520px;
      }

#news_against .news_text .h-newsList .time {
        top: 13px;
        color: #efdcad;
      }

#news_against .news_text .h-newsList li:hover .time {
        color: #efdcad;
      }

#news_against .bracket_title {
    margin-top: 40px;
  }

#news_against .g-bracket-wrap .h-bracket-skin-war3 .h-bracket_single_double .time {
      color: rgba(254, 254, 254, 0.6);
    }

#news_against .g-bracket-wrap .h-bracket-skin-cs .h-bracket_single_double .down-text {
      color: #d9c898;
    }

#news_against .g-bracket-wrap .h-bracket-skin-war3 .h-bracket_single_double .competitor {
      border-color: #f1bd37;
      background: #e5a517;
    }

#news_against .g-bracket-wrap .h-bracket-skin-war3 .h-bracket_single_double .logo {
      background-color: #1d2125;
    }

#news_against .g-bracket-wrap .h-bracket-skin-war3 .h-bracket_single_double .score {
      background-color: #edc05d;
    }

#news_against .g-bracket-wrap .h-bracket-skin-cs .h-bracket_single_double .score {
      color: #33261c;
    }

#news_against .g-bracket-wrap .h-bracket-skin-war3 .h-bracket_single_double .name {
      color: white;
    }

#news_against .g-bracket-wrap .h-bracket-skin-war3 .h-bracket_single_double .video-icon {
      background: url(https://blz.nosdn.127.net/1/gold/images/minisite/war3-tournament/2020winter/spirit_1.png) no-repeat;
      background-position: -730px -685px;
    }

#news_against .g-bracket-wrap {
    /* hover */
  }

#news_against .g-bracket-wrap .h-bracket-skin-cs .h-bracket_single_double .high-light .logo {
      background-color: #c18d01;
    }

#news_against .g-bracket-wrap .h-bracket-skin-cs .h-bracket_single_double .line-hight .line-right,
        #news_against .g-bracket-wrap .h-bracket-skin-cs .h-bracket_single_double .line-hight .line-center {
      border-color: #c7a622;
    }

#news_against .g-bracket-wrap .h-bracket-skin-cs .h-bracket_single_double .high-light .name {
      color: #33261c;
      background: #f8cd34;
    }

#news_against .g-bracket-wrap .h-bracket-skin-cs .h-bracket_single_double .high-light .score {
      background: #fadc73;
    }

.h-bracket-skin-war3 .h-bracket_single_double .line-right,
.h-bracket-skin-war3 .h-bracket_single_double .line-center,
.h-bracket-skin-war3 .h-bracket_single_double .match-bottom .line-center,
.h-bracket-skin-war3 .h-bracket_single_double .match-bottom .line-right {
  border-color: rgba(255, 255, 255, 0.3);
}

/* 赛事视频 */

#g-videoTape {
  padding: 35px 0;
  display: none;
}

/* 微博和介绍 */

#WB_Info {
  background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/info_bg_02.png) repeat-y center top;
  padding: 55px 0 ;
}

/* 底部介绍 */

.s_intro .intro_wrap {
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 0px
  }

.s_intro .intro_wrap .logo {
      margin-right: 20px;
      position: relative;
      top: auto;
      left: auto;
    }

.s_intro .cooperation {
    padding-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center
  }

.s_intro .cooperation span{
      color: #d9c898;
      display: inline-block;
      margin-right: 15px;
      font-size: 16px;
    }

/*对阵模块*/

#bracket_against{
  padding-top: 55px;
  background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/braket_bg.png) no-repeat center top;
  padding-bottom: 55px;
  position: relative;
  z-index: 89
}

#bracket_against .heroes_left{
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: -145px;
    width: 494px;
    height: 1060px;
    background-position:0 -881px;
  }

.color_f8b700{
  color: #f8b700;
}

/* 助威榜 */

.nationality_icon, .race_icon{
  width: 100%;
  max-width: 30px;
}

#rank_contribute {
  background: url(https://blz.nosdn.127.net/1/gold/images/minisite/2021summer/contribute_bg.png) no-repeat center top;
  padding: 55px 0;
  position: relative
}

#rank_contribute .rank_contribute_inner {
    position: relative;
    z-index: 2;
  }

#rank_contribute .widget {
    position: absolute;
    pointer-events: none
  }

#rank_contribute .widget.widget_1 {
      left: 50%;
      margin-left: -960px;
      bottom: 0;
    }

#rank_contribute .widget.widget_2 {
      right: 50%;
      margin-right: -960px;
      top: -70px;
    }

#rank_contribute .player_rank {
    -webkit-box-shadow: 0 0px 10px #1e1e20;
            box-shadow: 0 0px 10px #1e1e20;
    max-width: 1260px;
    width: 100%;
    margin: 50px auto 25px
  }

#rank_contribute .player_rank>* {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
    }

#rank_contribute .player_rank>*>* {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

#rank_contribute .player_rank>* .rank_num {
        width: 81px;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
      }

#rank_contribute .player_rank>* .rank_ID,
            #rank_contribute .player_rank>* .rank_contribute {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 29.5%;
                flex: 1 1 29.5%;
      }

#rank_contribute .player_rank>* .rank_race {
        width: 100px;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
      }

#rank_contribute .player_rank>* .rank_nationality {
        width: 100px;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
      }

#rank_contribute .player_rank>* .rank_total {
        width: 180px;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
      }

#rank_contribute .player_rank dt {
      background-color: #1e1e20;
      height: 44px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      border-bottom: 4px solid transparent;
      -o-border-image: linear-gradient(to right, #7b5f2a, #cdc375, #7b5f2a) 0 0 10 0;
         border-image: -webkit-gradient(linear, left top, right top, from(#7b5f2a), color-stop(#cdc375), to(#7b5f2a)) 0 0 10 0;
         border-image: linear-gradient(to right, #7b5f2a, #cdc375, #7b5f2a) 0 0 10 0;
      background-position: center;
      background-size: auto 100%;
      -webkit-box-shadow: 0 5px 10px #1e1e20;
              box-shadow: 0 5px 10px #1e1e20;
    }

#rank_contribute .player_rank dd {
      background-color: rgba(107, 93, 75, 0.8);
      height: 64px;
      font-size: 16px;
      color: #d9d3c3
    }

#rank_contribute .player_rank dd:not(:last-child) {
        border-bottom: 2px solid #544c43;
      }

#rank_contribute .player_rank dd .rank_num {
        background-color: rgba(77, 41, 0, 0.4);
      }

#rank_contribute .player_rank dd .rank_ID,
            #rank_contribute .player_rank dd .rank_race,
            #rank_contribute .player_rank dd .rank_total {
        background-color: rgba(255, 255, 255, 0.07);
      }

#rank_contribute .player_rank dd .rank_ID,
            #rank_contribute .player_rank dd .rank_contribute {
        -webkit-box-pack: left;
            -ms-flex-pack: left;
                justify-content: left;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding : 0 15px 0 3%;
      }

#rank_contribute .player_rank dd:nth-child(2),
            #rank_contribute .player_rank dd:nth-child(3),
            #rank_contribute .player_rank dd:nth-child(4) {
        color: #f8b700;
        font-weight: bold;
        font-size: 20px;
      }

#rank_contribute .player_rank dd .rank_ID {
        position: relative
      }

#rank_contribute .player_rank dd .rank_ID>*:not(:first-child) {
          margin-left: 10px;
        }

#rank_contribute .player_rank dd .rank_ID .extra img{
          width : 16px;
        }

#rank_contribute .player_rank dd .rank_ID .extra {
          word-break: break-all;
        }

#rank_contribute .player_rank dd .rank_ID .head_img {
          background: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/rank_normal.png) no-repeat center;
          background-size: cover;
          height: 36px;
          width: 36px;
          border-radius: 50%;
          -webkit-box-flex : 0;
              -ms-flex : none;
                  flex : none;
          overflow: hidden;
          padding: 2px
        }

#rank_contribute .player_rank dd .rank_ID .head_img img {
            display: block;
            width: 100%;
            border-radius: 50%;
          }

#rank_contribute .player_rank dd:nth-child(2) .rank_ID .head_img,
            #rank_contribute .player_rank dd:nth-child(3) .rank_ID .head_img,
            #rank_contribute .player_rank dd:nth-child(4) .rank_ID .head_img {
        width: 51px;
        height: 51px;
        padding: 4px;
      }

#rank_contribute .player_rank dd:nth-child(2) .rank_ID .head_img {
        background-image: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/rank_1.png);
      }

#rank_contribute .player_rank dd:nth-child(3) .rank_ID .head_img {
        background-image: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/rank_2.png);
      }

#rank_contribute .player_rank dd:nth-child(4) .rank_ID .head_img {
        background-image: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/rank_3.png);
      }

#rank_contribute .player_rank dd .rank_contribute {
        font-weight: normal
      }

#rank_contribute .player_rank dd .rank_contribute .head_img {
          border-radius: 2px;
          border: 1px solid #ffd300;
          position: relative;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          width: 30px;
          height: 30px
        }

#rank_contribute .player_rank dd .rank_contribute .head_img::before {
            position: absolute;
            left: 8px;
            top: -12px;
            display: block;
            content: "";
            background: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/contribute_1.png) no-repeat center;
            background-size: contain;
            width: 12px;
            height: 10px;
          }

#rank_contribute .player_rank dd .rank_contribute .name_num {
          margin-left: 5px;
          text-align: left
        }

#rank_contribute .player_rank dd .rank_contribute .name_num span {
            color: #d9d3c3;
          }

#rank_contribute .player_rank dd .rank_contribute .name_num p {
            color: #f8b700;
          }

#rank_contribute .total_contribute_rank {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto
  }

#rank_contribute .total_contribute_rank h3 {
      margin-top: 30px;
    }

#rank_contribute .total_contribute_rank .contribute_rank {
      margin-top: 80px
    }

#rank_contribute .total_contribute_rank .contribute_rank ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline
      }

#rank_contribute .total_contribute_rank .contribute_rank ul li {
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          -webkit-box-flex: 0;
              -ms-flex: 0 0 33%;
                  flex: 0 0 33%;
          position: relative;
          background-image: -webkit-gradient(linear, left bottom, left top, from(#2e312f), to(#3f4038));
          background-image: linear-gradient(to top, #2e312f, #3f4038)
        }

#rank_contribute .total_contribute_rank .contribute_rank ul li::before {
            display: block;
            content: "";
            height: 4px;
            -webkit-box-shadow: 0 4px 10px #1e1e20;
                    box-shadow: 0 4px 10px #1e1e20;
            position: absolute;
            width: 100%;
            top: 0;
          }

#rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(1) {
            height: 84px
          }

#rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(1)::before {
              background-image: -webkit-gradient(linear, left top, right top, from(#7d7c7c), color-stop(#d1d1d1), to(#7d7c7c));
              background-image: linear-gradient(to right, #7d7c7c, #d1d1d1, #7d7c7c)
            }

#rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(2) {
            height: 104px
          }

#rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(2)::before {
              background-image: -webkit-gradient(linear, left top, right top, from(#f59600), color-stop(#fbd800), to(#f59600));
              background-image: linear-gradient(to right, #f59600, #fbd800, #f59600)
            }

#rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(3) {
            height: 64px
          }

#rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(3)::before {
              background-image: -webkit-gradient(linear, left top, right top, from(#962c0f), color-stop(#d97a2b), to(#962c0f));
              background-image: linear-gradient(to right, #962c0f, #d97a2b, #962c0f)
            }

#rank_contribute .total_contribute_rank .contribute_rank ul li .info {
            position: absolute;
            top: 0;
            left: 0;
            -webkit-transform: translate(0, -80px);
                    transform: translate(0, -80px);
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center
          }

#rank_contribute .total_contribute_rank .contribute_rank ul li .info .rank_icon {
              display: block;
              margin: auto;
            }

#rank_contribute .total_contribute_rank .contribute_rank ul li .info .head_img {
              width: 70px;
              height: 70px;
              display: block;
              padding: 2px;
              border-radius: 4px;
              position: relative;
              background-origin: content-box;
              overflow: hidden
            }

#rank_contribute .total_contribute_rank .contribute_rank ul li .info .head_img img {
                display: block;
                position: relative;
                z-index: 1;
                width: 100%;
              }

#rank_contribute .total_contribute_rank .contribute_rank ul li .info .head_img:after {
                display: block;
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                pointer-events: none;
                background-image: -webkit-gradient(linear, left top, left bottom, from(#f0e4bd), to(#6d5055));
                background-image: linear-gradient(to bottom, #f0e4bd, #6d5055);
              }

#rank_contribute .total_contribute_rank .contribute_rank ul li .info .nick_name {
              color: #d9d3c3;
              margin-top: 3px;
            }

#rank_contribute .total_contribute_rank .contribute_rank ul li .info .total {
              color: #f8b700;
              font-weight: bold;
              font-style: italic;
            }

#rank_contribute .to_vote {
    padding-bottom: 55px
  }

#rank_contribute .to_vote h3 {
      margin-top: 60px;
    }

#rank_contribute .to_vote .vote_info {
      margin: 15px 0 10px 0;
    }

#rank_contribute .to_vote .vote>ul {
        margin-top: 0px
      }

#rank_contribute .to_vote .vote>ul .vote_item_inner {
          width: 100%;
          position: relative;
        }

#rank_contribute .to_vote .vote .head_img {
        width: 100%;
        padding-top: 100%;
        position: relative;
      }

#rank_contribute .to_vote .vote .head_img_inner {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        overflow: hidden;
        position: absolute
      }

#rank_contribute .to_vote .vote .head_img_inner::before {
          display: block;
          content: "";
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 4;
          background: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2020winter/vote/player_border.png) no-repeat center;
          background-size: contain;
          pointer-events: none;
        }

#rank_contribute .to_vote .vote .head_img_inner::after {
          display: block;
          content: "";
          height: 98%;
          width: 98%;
          position: absolute;
          top: 1%;
          left: 1%;
          z-index: 1;
          background: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/vote_item_bg.jpg) no-repeat center;
          background-size: cover;
          pointer-events: none;
          border-radius: 5%;
        }

#rank_contribute .to_vote .vote .head_img_inner img {
          display: block;
          position: relative;
          width: 100%;
          z-index: 3;
        }

#rank_contribute .to_vote .vote .head_img_inner .name {
          position: absolute;
          width: 95%;
          left: 3%;
          padding: 10px 0;
          z-index: 3;
          text-align: center;
          background: rgba(0, 0, 0, 0.75);
        }

#rank_contribute .to_vote .vote .head_img_inner .icon {
          z-index: 3;
          position: absolute;
          top: 13px;
          left: 13px
        }

#rank_contribute .to_vote .vote .head_img_inner .icon>*:not(:first-child) {
            margin-top: 8px;
          }

#rank_contribute .to_vote .vote .actions {
        margin-top: 7px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between
      }

#rank_contribute .to_vote .vote .actions .input_wrap {
          padding: 2px
        }

#rank_contribute .to_vote .vote .actions .input_wrap input {
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(0, 0, 0, 0.5);
            line-height: 1;
            width: 100%;
            height: 100%;
            text-align: center;
            display: block;
            padding: 3px 5px;
            outline: none;
            color: #d9d3c3
          }

#rank_contribute .to_vote .vote .actions .input_wrap input:focus {
              border-color: #b64813;
            }

#rank_contribute .to_vote .vote .actions>* {
          width: 48%;
        }

@media (max-width : 768px) {

#rank_contribute {
    padding-top: 35px;

    background: url(https://blz.nosdn.127.net/1/duizhan/minisite/war3-tournament/2021summer-okngaeop/__rank_bg_m.jpg) no-repeat center top;

    background-size: 100% auto
}
        #rank_contribute .player_rank>* .rank_num {
          width: 40px;
          -webkit-box-flex: 0;
              -ms-flex: none;
                  flex: none;
        }
        #rank_contribute .player_rank>* .rank_ID,
                #rank_contribute .player_rank>* .rank_contribute {
          -webkit-box-flex: 1;
              -ms-flex: 1 1 29.5%;
                  flex: 1 1 29.5%;
        }
        #rank_contribute .player_rank>* .rank_total {
          width: 90px;
          -webkit-box-flex: 0;
              -ms-flex: none;
                  flex: none;
        }
      #rank_contribute .player_rank dt{
        height: 34px;
        border-width: 2px;
      }
      #rank_contribute .player_rank dd {
        font-size: 12px !important;
        min-height: 40px;
        height: auto
      }
        #rank_contribute .player_rank dd:nth-child(2) .rank_ID .head_img,
                #rank_contribute .player_rank dd:nth-child(3) .rank_ID .head_img,
                #rank_contribute .player_rank dd:nth-child(4) .rank_ID .head_img {
          width: 26px;
          height: 26px;
          padding: 2px;
        }
        #rank_contribute .player_rank dd .rank_ID,
                #rank_contribute .player_rank dd .rank_contribute {
          padding : 0 8px 0 10px;
        }
          #rank_contribute .player_rank dd .rank_contribute .head_img {
            width: 18px;
            height: 18px
          }
            #rank_contribute .player_rank dd .rank_contribute .head_img::before{
              width: 8px;
              height: 6px;
              left: 4px;
              top: -7px;
            }
        #rank_contribute .player_rank dd .rank_ID .head_img {
          width: 20px;
          height: 20px;
        }
      #rank_contribute .total_contribute_rank .contribute_rank{
        margin-top : 50px
      }
            #rank_contribute .total_contribute_rank .contribute_rank ul li .info{
              -webkit-transform: translate(0, -38px);
                      transform: translate(0, -38px)
            }
              #rank_contribute .total_contribute_rank .contribute_rank ul li .info .head_img{
                width : 35px;
                height: 35px;
                padding : 1px;
              }
              #rank_contribute .total_contribute_rank .contribute_rank ul li .info .rank_icon{
                width : 13px;
              }
            #rank_contribute .total_contribute_rank .contribute_rank ul li::before{
              height: 2px;
            }
            #rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(1){
              height: 60px;
            }
            #rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(2){
              height: 70px;
            }
            #rank_contribute .total_contribute_rank .contribute_rank ul li:nth-child(3){
              height: 50px;
            }

    #rank_contribute .to_vote{
      padding-bottom: 35px
    }
      #rank_contribute .to_vote h3{
        margin-top : 30px;
      }
        #rank_contribute .to_vote .vote>ul{
        }
          #rank_contribute .to_vote .vote .head_img_inner .icon{
            width: 26px;
          }
  }

.vote_icon{
  display: none;
}

@media screen and (max-width : 1440px) {
  .heroes_left ,.heroes_right,.vote_code{
    display: none;
    -webkit-transition: all .5s;
    transition: all .5s;
  }

  .vote_icon{
    display: block;
    position: absolute;
    top:0;
    right: 0;
    width: 25px;
    cursor: pointer;
    height: 25px;
    z-index: 20;
  }

  .add_icon{
    background-position: -697px -1157px;
    width: 100%;
    height: 100%;
  }

  .show_icon .add_icon{
    background-position:-697px -1103px;
  }

  .show_icon .vote_code{
    display: block;
    -webkit-transition: all .5s;
    transition: all .5s;
  }
}