body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, hr, pre, form, fieldset, input, textarea, p, blockquoteth, td { margin: 0px; padding: 0px; box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: normal; box-sizing: border-box;}
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
object, input, textarea { outline: none; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
em{font-style: normal;}
i { font-style: normal; }
strong { font-weight: bold; }
ol, ul { list-style: none; }
capation, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
/* 以下样式根据不同的网站可能需要改写 */

i { font-style: normal; }
a { text-decoration: none;}

@font-face {
    font-family: 'DIN';
    src: url('/2026worldcup/static/fonts/DIN-Medium.otf');
}
@font-face {
    font-family: 'DIN Bold';
    src: url('/2026worldcup/static/fonts/DIN-Bold.otf');
}

/*flex布局*/
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

body{
  width:auto;
  line-height:normal;
  padding:0;
  font-size:12px; 
  font-family: 'PingFang SC', 'tahoma';
  min-width: 1200px;
  background-color: #fff;
}
/* header */
.header-wrapper{
  width: 100%;
}
.header-container{
  width: 100%;
  background:#0326DE url(/2026worldcup/static/images/header-other-bg.png) no-repeat center center;
}
.header-main{
  width: 1120px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.header-logo{
  width: 280px;
  padding: 0 0 0 20px;
}
.header-logo-zh{
}
.header-logo-en, .header-logo-vi, .header-logo-ko, .header-logo-th{
  width: 340px;
}
.header-logo a {}
.header-logo a img {
  width: 100%;
  height: auto;
}
.nav-container{
  width: 100%;
  background-color: #000;
  position: sticky;
  top: 0;
  z-index: 999;
}
.nav-main{
  width: 1120px;
  height: 50px;
  margin: 0 auto;
}
.nav-list{
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: 16px;
  margin: 0 24px;
}
.nav-list a.active {
  font-size: 20px;
}
.nav-list a span{
  position: relative;
}
.nav-list a:hover span::after, .nav-list a.active span::after {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 0 20px 20px 20px;
  background: linear-gradient(90deg, #FCB53E 0%, #FE3D03 100%);
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}
/* footer */
.footer-wrapper{
  width: 100%;
  background-color: #000;
}
.footer-container{
  width: 1200px;
  margin: 0 auto;
  padding: 32px 0 16px;
}
.footer-copyright{
  width: 100%;
}
.footer-copyright p{
  color: #B3B3B3;
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
}
.footer-nav{
  width: 100%;
  border-top: 1px solid #333;
  padding: 16px 0;
  margin-top: 24px;
  text-align: center;
  color: #B3B3B3;
  font-size: 12px;
}
.footer-nav a{
  color: #B3B3B3;
  font-size: 12px;
  margin: 0 12px;
}
.footer-nav a:hover{
  text-decoration: underline;
}
/* float-box */
.float-box{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 180px;
  right: 24px;
}
.back-top{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  cursor: pointer;
}
.back-top::after{
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  position: absolute;
  top: calc(50% + 3px);
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.back-top:hover{
  
}

/* hot */
.hot-box{
  width: 100%;
}
.hot-top{
  padding: 0 8px;
  margin-bottom: 12px;
}
.hot-top h3{
  color: #333;
  font-size: 18px;
  padding-left: 12px;
  position: relative;
}
.hot-top h3::after{
  content: '';
  display: block;
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: #333;
  position: absolute;
  bottom: 50%;
  left: 0;
  transform: translateY(50%);
}
.hot-list-box{
  padding: 20px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
}
.hot-list{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hot-list li{
  display: flex;
}
.hot-list li i{
  flex: none;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: #999;
  font-size: 14px;
  margin: 2px 14px 0 2px;
}
.hot-list li i.no{
  color: #fff;
  font-weight: bold;
  background: linear-gradient(90deg, #FCB53E 0%, #FE3D03 100%),linear-gradient(90deg, #FC9D3E 0%, #FE3D03 100%);
  border-radius: 4px 4px 0 4px;

}
.hot-list li a{
  color: #333;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.hot-list li a:hover{
  text-decoration: underline;
}
.none{
  display: none;
}
.red, .red_zh, .red_hk, .red_ko, .green_en, .green_vi, .green_th{
  color: #EB4A44;
}
.grey, .grey_zh, .grey_hk, .grey_ko, .grey_en, .grey_vi, .grey_th{
  color: #333;
}
.green, .green_zh, .green_hk, .red_en, .red_vi, .red_th{
  color: #01C0A1;
}
.green_ko{
  color: #446BEB;
}
.win_zh, .win_hk, .win_ko, .lose_en, .lose_vi, .lose_th{
  background-color: #FFD8D8;
  color: #EB4A44;
}
.draw_zh, .draw_hk, .draw_en, .draw_vi, .draw_th, .draw_ko{
  background-color: #F4F5F7;
  color: #333;
}
.lose_zh, .lose_hk, .win_en, .win_vi, .win_th{
  background-color: #DCFAEA;
  color: #01C0A1;
}
.lose_ko{
  background-color: #E0E8FF;
  color: #446BEB;
}
.black-bg{
  background-color: #000;
}
.red-bg{
  background-color: #EB4A44;
}
.blue-bg{
  background-color: #446BEB;
}
.green-bg{
  background-color: #01C0A1;
}

@media screen and (max-width: 767px) {
  html{font-size:calc(100vw*100/375);}

  body{
    min-width: 100%;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  a:focus,input:focus,p:focus,div:focus{ 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
  }
  /* header */
  .header-wrapper{
    width: 100%;
  }
  .header-container{
    width: 100%;
    background:#15154C url(/2026worldcup/static/images/header-m.png) no-repeat center center;
    background-size: cover;
  }
  .header-main{
    width: 100%;
    height: .5rem;
    margin: 0 auto;
  }
  .header-logo{ 
    width: 1.54rem !important;
    height: 0.32rem;
    padding: 0 0 0 0.3rem;
    margin-left: 0.3rem ;
  }
  .header-logo a{
    display: none;
  }
  .header-logo-zh{
    background: url(/2026worldcup/static/images/logo-m-zh.png) no-repeat center center;
    background-size: cover;
  }
  .header-logo-hk{
    background: url(/2026worldcup/static/images/logo-m-zh.png) no-repeat center center;
    background-size: cover;
  }
  .header-logo-en, .header-logo-vi, .header-logo-ko, .header-logo-th{
    width: 1.95rem !important;
    height: 0.32rem;
    background: url(/2026worldcup/static/images/logo-m-en.png) no-repeat center center;
    background-size: cover;
  }
  .nav-container{
    width: 100%;
    background-color: #000;
  }
  .nav-main{
    width: 100%;
    height: .4rem;
    margin: 0 auto;
  }
  .nav-list{
    display: flex;
    align-items: center;
    height: 100%;
  }
  .nav-list a {
    flex: 1;
    font-size: .14rem;
    margin: 0;
  }
  .nav-list a.active {
    font-weight: bold;
    font-size: 0.14rem;
  }
  .nav-list a:hover span::after, .nav-list a.active span::after {
    width: .28rem;
    height: 0.04rem;
    border-radius: 0 0.2rem 0.2rem 0.2rem;
    bottom: -0.05rem;
  }
  .nav-list a:hover span::after{
    background: none;
  }

  /* footer */
  .footer-container{
    width: 100%;
    margin: 0 auto;
    padding: 0.24rem 0.16rem 0.16rem;
  }
  .footer-copyright p{
    font-size: 0.12rem;
    margin-bottom: 0.08rem;
    text-align: left;
  }
  .footer-nav{
    width: 100%;
    border-top: 1px solid #333;
    padding: 0.16rem 0;
    margin-top: 0.24rem;
    text-align: center;
    color: #B3B3B3;
    font-size: 0.12rem;
  }
  .footer-nav a{
    color: #B3B3B3;
    font-size: 0.12rem;
    margin: 0 0.02rem;
  }
  .footer-nav a:hover{
    text-decoration: none;
  }
  /* float-box */
  .float-box{
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0.96rem;
    right: 0.24rem;
  }
  .back-top{
    display: none;
    width: 0.44rem;
    height: 0.44rem;
    border: 1px solid #999;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
  }
  .back-top::after{
    content: '';
    display: block;
    width: 0.12rem;
    height: 0.12rem;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    position: absolute;
    top: calc(50% + 0.03rem);
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .back-top:hover{
    
  }
}