body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; }
fieldset, img { border: 0; }
ol, ul, li { list-style: none; }
:focus { outline: 0; }
img { display: block; object-fit: cover; }
.none, legend { display: none; }
.fl { float: left; display: inline; }
.fr { float: right; display: inline; }
body { width: 100%; overflow-x: hidden; color: #fff; background: #f7fafc; }
a { color: #fff; text-decoration: none; }
a:hover {color:#FFB70F;text-decoration: none; }
i, s, u, em, strong {font-style: normal; text-decoration: none; }
input::placeholder { color: #999; }

/* IE < 8 */
body {font-size: .14rem;background-image: linear-gradient(90deg,rgb(24,27,57) 0%,rgb(33,36,98) 32%,rgb(24,27,57) 61%);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
.nav-bar ul::-webkit-scrollbar { display: none; }
.wrap {position: relative;width: 1290px;margin: 0 auto;/* box-sizing: border-box; */}
.mask { display: none; background: rgba(0, 0, 0, .5); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 8; min-height: 100vh; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s }
.ellipsis { line-height: 0.23rem; max-height: .92rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.border { background: #fff; }

.hd{text-align:center;}
.hd h2{margin-bottom: .25rem;line-height: .52rem;font-size:.35rem;}
.hd p{margin-bottom: .4rem;line-height: .24rem;font-size: .14rem;color: #87a8e4;letter-spacing: -.02em;}

.topHead { position: relative; z-index: 3; height: .8rem; }
.topHead .fixed {width: 100%;height: .8rem;}
.topHead .wrap {display: flex;justify-content: space-between;align-items: center;}
.mainBody { width: 100%; margin: 0 auto; }
.mainBody>section {padding: .5rem 0;}
.logo img {width: auto;height: .5rem;}
.nav-bar { display: flex; flex: 1; line-height: .79rem; justify-content: flex-end;}
.nav-bar li {position: relative;margin: 0 .15rem;font-size: .12rem;color: #fff;cursor: pointer;font-weight: bold;text-transform: uppercase;}
.nav-bar a { color: #fff; }
.nav-bar a:hover,.nav-bar li.active a {color: #FFB70F;}
.topHead .fixed.hover{position:fixed;top:.3rem;animation: slideDown 1s forwards;height: .68rem;}
.topHead .fixed.hover .wrap{padding: 0 .3rem;background: #fff;border-radius: .1rem;box-sizing: border-box;}
.topHead .fixed.hover .logo img{height:.4rem;}
.topHead .fixed.hover .nav-bar{line-height: .68rem;}
.topHead .fixed.hover li a{color:#333;}
.topHead .fixed.hover li.active a,.topHead .fixed.hover li a:hover{color:#1559ed;}
.topHead .fixed:not(.hover){}
.topHead .fixed.up{position:fixed;top:0;animation: slideUp 1s;}

.area1 .wrap{position:relative;padding-top: 1.3em;}
.area1 h1{padding-top: .8rem;font-size:.3rem;color:#fff;}
.area1 .text1{margin: .3rem 0;color:#ffb70f;font-size:.5rem;font-weight:bold;}
.area1 .text2{margin: 2.8rem 0 .3rem;font-size:.35rem;color:#fff;font-weight:bold;text-align:center;}
.area1 .downbox{display:flex;flex-wrap:wrap;justify-content: center;margin: .5rem 0 .8rem;max-width: 100%;}
.area1 .downbox a{display:flex;justify-content:center;align-items:center;width:45%;height:.58rem;line-height:.58rem;overflow:hidden;text-align:center;font-size:.17rem;background:#fff;color:#ffb70f;border-radius: .2rem;font-weight: bold;}
.area1 .downbox a:first-child{margin-right:5%;}
.area1 .downbox .button2{background-image: linear-gradient(0deg, rgb(255, 126, 49) 0%, rgb(255, 183, 15) 99%);color:#fff;}
.area1 .downbox a:before{content:'';display:block;width:.2rem;height:.2rem;margin-right:.05rem;}
.area1 .downbox .button1:before{background:url(../images/button_icon1.svg) center center no-repeat;}
.area1 .downbox .button2:before{background:url(../images/button_icon2.svg) center center no-repeat;}
.area1 .downbox p{width: 91%;padding: .1rem 0;text-align:right;font-size: .15rem;color:#fff;}
.area1 .arrow{height: .3rem;margin:.5rem 0 0;animation: csstransform-31532 1.2s infinite 1.1s alternate;animation-timing-function: ease-in;}
.area1 .arrow svg{display: block!important;width: .2rem;height: .3rem;margin:0 auto;}
.area1 .arrow svg path{fill: #ffb70f!important;}
.area1 .img1{display:none;}
.area1 .img2 img{width: 100%;height: auto;max-width: 100%;}
.area1 .img3 img{width: 100%;height: auto;}
.area1 .img4 img{animation:css-area1 2.5s infinite 0s alternate;animation-timing-function: linear;}
.area1 ul{display:flex;justify-content: space-between;}
.area1 ul li{max-width: 18%;height:.86rem;border-radius: .1rem;box-sizing: border-box;overflow: hidden;}
.area1 ul li img{max-height: .86rem;width: 100%;margin: auto;}

.area2 {padding:.3rem 0;}
.area2 .wrap{display:flex;justify-content:space-between;padding: 0 .2rem;}
.area2 .box1{width: 52%;padding: .3rem 0;color:#fff;}
.area2 .box1 h2{font-size:.35rem;}
.area2 .box1 .text{margin: .15rem 0 .3rem;line-height:.2rem;color:#87a8e4;}
.area2 .box1 li{position: relative;display:flex;align-items:center;line-height:.25rem;font-size: .14rem;padding-left: .3rem;}
.area2 .box1 li:before{content:'';display:block;position: absolute;top: .035rem;left: 0;width: .18rem;height: .18rem;margin-right: .1rem;background:url(../images/list_icon.svg) center center no-repeat;}
.area2 .box2{display: flex;flex-direction: column;align-items: center;width: 38%;padding:.3rem 0;border:.02rem solid #1559ed;border-radius: .1rem;color:#fff;}
.area2 .box2 img{width:auto;height:.28rem;}
.area2 .box2 h2{text-align:center;font-size:.21rem;}
.area2 .box2 h2 span{display: block;margin: .1rem 0 0;line-height:.68rem;color:#ffb70f;font-size:.5rem;}
.area2 .countdown{display:flex;margin: .12rem 0;}
.area2 .countdown li{position:relative;display:flex;flex-direction:column;text-align:center;}
.area2 .countdown li span{display:block;width: .65rem;line-height:.4rem;text-align:center;background:#1559ed;font-size:.3rem;border-radius:.05rem;}
.area2 .countdown li i{line-height: .3rem;font-size:.16rem;color:#87a8e4;}
.area2 .countdown li:not(:last-child){margin-right:.3rem;}
.area2 .countdown li:not(:last-child):after{content:":";position:absolute;right:-.2rem;top:0;line-height:.4rem;font-size:.22rem;font-weight:bold;}
.area2 .box2 .button{display:flex;align-items:center;justify-content:center;width:65%;line-height:.5rem;height:.5rem;overflow:hidden;border-radius:.15rem;font-size:.18rem;color:#fff;font-weight: bold;background-image: linear-gradient(0deg, rgb(255, 126, 49) 0%, rgb(255, 183, 15) 99%);}
.area2 .box2 .button:after{content:'';display:block;width:.16rem;height:.16rem;margin-left:.1rem;background:url(../images/button_icon3.svg) no-repeat;}
.area3{background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(15, 0, 31, 0.68) 37%, rgb(15, 0, 30) 79%);}
.area3 ul{display:flex;}
.area3 li{width:26%;display:flex;flex-direction:column;align-items:center;padding: .3rem 0 .5rem;}
.area3 li:nth-child(2){margin:0 10%;}
.area3 li span{width:1rem;height:1rem;line-height:1rem;text-align:center;font-size:.6rem;font-weight:bold;background:#ff0000;border-radius:1rem;}
.area3 li p{margin: .4rem 0 .16rem;font-size:.24rem;}
.area3 li .desc{line-height:.26rem;font-size:.16rem;text-align:center;color: #87a8e4;}

.area4{padding: .8rem 0 .3rem!important;background-image: linear-gradient(0deg, rgb(15, 0, 30) 0%, rgb(39, 41, 146) 20%, rgb(15, 0, 30) 65%);}
.area4 ul{display:flex;justify-content: space-between;}
.area4 li{width: 14.666%;height: 2.47rem;overflow: hidden;border-radius:.1rem;}
.area4 li img{width: 100%;height: 100%;}

.area5{padding: 1rem 0!important;background-color: #0f001e;}
.area5 ul{display:flex;/* margin-left:-1%; */}
.area5 li{width: 24.1%;/* margin-left:1%; */box-sizing:border-box;}
.area5 li .icon{display: flex;justify-content: center;align-items: center;width:.68rem;height:.68rem;background-color: #e2eefd;border-radius: .2rem;}
.area5 li img{width: auto;height: .4rem;max-width: .5rem;max-height: .4rem; transition: all .3s ease-in 0s;}
.area5 li:hover img{transform: scale(1.1); }
.area5 li .inner{padding: .3rem .3rem .5rem;border-radius:.1rem;background-image: linear-gradient(90deg, rgb(24, 27, 57) 40%, rgb(33, 36, 98) 100%);border:1px solid transparent;}
.area5 li .inner:hover{border-color:#fff;}
.area5 li .title{margin: .2rem 0 .1rem;font-size:.18rem;line-height:.24rem;font-weight: bold;}
.area5 li .desc{font-size:.14rem;line-height:.2rem;color: #87a8e4;}

.area6{ background-color: #0f001e;}
.area6 ul{display:flex;/* margin-left:-1%; */}
.area6 li{width: 32.333%;/* margin-left:1%; */padding:.3rem 0;border-radius:.1rem;box-sizing:border-box;background-image: linear-gradient(0deg, rgb(24, 27, 57) 0%, rgb(33, 36, 98) 21%, rgb(24, 27, 57) 45%);}
.area6 .player,.area6 .comment{padding:0 .25rem;}
.area6 .comment{margin-bottom:.25rem;line-height:.26rem;font-size:.16rem;}
.area6 .player{display:flex;justify-content:space-between;align-items:center;font-size:.12rem;}
.area6 .player .name{display:flex;align-items:center;font-size:.16rem;font-weight:bold;}
.area6 .player .name:after{content:'';display:block;width: .16rem;height: .16rem;margin-left: .05rem;background:url(../images/blue-tick.png) no-repeat;background-size:100% auto;}
.area6 .player .txt1{color:#1bbe54;}
.area6 .player img{width:.84rem;height:.84rem;border-radius:.84rem;}
.area6 .player-info{line-height:.24rem;}

.area7{padding: 1rem 0!important;background-color: #0f001e;}
.area7 li{margin-bottom: .15rem;border-radius:.1rem;box-sizing:border-box;overflow:hidden;}
.area7 li .w{position:relative;display:flex;align-items: center;justify-content: space-between;width: 100%;line-height: .3rem;padding: .15rem .2rem;font-size:.18rem;font-weight:bold;background-image: linear-gradient(90deg, rgb(24, 27, 57) 0%, rgb(33, 36, 98) 10%, rgb(24, 27, 57) 100%);box-sizing: border-box;}
.area7 li .w:after{content:'';width: .1rem;height: .1rem;border-top:2px solid #fff;border-right:2px solid #fff;transition: transform .3s ease-in-out;transform: rotate(45deg);margin-left: .01rem;}
.area7 li .d{padding:.2rem;background:#fff;font-size: .16rem;color:#000;}
.area7 li .active:after{transform: rotate(-45deg);}
.footer {background: #181B39;color: #fff;}
.footer .wrap{display:flex;padding: .8rem 0 .5rem;border-bottom:1px solid rgba(222, 222, 222, 0.15);}
.footer .box1{width:32%;}
.footer .foot-logo{height:.42rem;widht:auto;margin-bottom:.1rem;}
.footer .box1 p{font-size:.13rem;}
.footer .box2{width:30%;margin-left:.5rem;}
.footer .box2 li{margin-bottom: .12rem;line-height: .2rem;font-size:.12rem;font-weight: bold;}
.footer .box3{margin-left:auto;}
.footer .linkbox{display:flex;}
.footer .linkbox a{width:.4rem;height:.4rem;margin:0 .1rem;}
.footer .linkbox a svg{width:100%;height:100%;fill:#fff;}
.footer .linkbox a:hover svg{fill:#FFB70F;}
.footer .copyright{padding:.2rem 0;line-height:.3rem;text-align:center;}
.menuBtn {display: none;width: .5rem;height: .5rem;overflow: hidden;z-index: 10;}
.popMenu {position: fixed;width: 5rem;height: 100%;background-color: rgba(0, 0, 0, 0.4);top: 0;right: -5rem;background-color: #121519fa;box-shadow: 2px 8px 23px 3px rgb(0 0 0 / .2);z-index: 100;}
.menu_logo img {width: auto;height: .6rem;padding: .8rem .15rem 0;}
.popMenu .menu_ul {position: relative;width: 100%;padding: .4rem;overflow: hidden;box-sizing: border-box;box-sizing: border-box;z-index: 9;}
.popMenu .menu_ul li {line-height: .56rem;font-size: .24rem;}
.popMenu .menu_ul li a { display: block; color: #fff; }
.popMenu .linkbox{display:flex;margin-top: .9rem;}
.popMenu .linkbox a{display:flex;justify-content:center;align-items:center;width:.56rem;height:.4rem;margin-left:.18rem;background:#fff;border-radius:.1rem;}
.popMenu .linkbox  svg{fill:#f80;height: .32rem;width: auto;max-width: .32rem;max-height: .32rem;}
.popMenu .tips{padding:0 .2rem;font-size:.17rem;font-weight:300;color:#EDEDED;}
.popMenu .closeBtn{position:absolute;top: .25rem;right: .2rem;width:.4rem;height:.4rem;line-height: .4rem;text-align: center;font-size: .3rem;color: #fff;}
.swiper-container-horizontal>.swiper-pagination-bullets{display:none;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { height: .06rem; margin: 0 .02rem; width: .2rem; border-radius: .06rem;background:#fff;opacity:.1}
.swiper-pagination { margin-top:.1rem;position: relative; bottom: 0 !important; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {background: #007aff;opacity:1}
.swiper-box-3 .swiper-pagination, .swiper-box-1 .swiper-pagination { bottom: -.06rem !important; }
.rightFloat { position: fixed; top: 30%; right: 0; width: .48rem; background: #000; padding: .1rem 0; border-radius: .2rem 0 0 .2rem; z-index: 99; }
.rightFloat li { display: flex; align-items: center; justify-content: center; height: .45rem; }
.rightFloat img { height: .32rem; width: auto; max-width: .32rem; max-height: .32rem; }
.fixedDown { display: none; position: fixed; bottom: 0; width: 100%; z-index: 99; padding: .15rem .2rem; background: #000; border-radius: .2rem .2rem  0 0; box-sizing: border-box; }
.fixedDown .down-btn {display: flex;justify-content: center;align-items: center;width: 5rem;max-width: 70%;line-height: .5rem;margin: 0 auto;background: #F80;font-size: .15rem;font-weight: bold;color: #fff;border-radius: .4rem;}
.fixedDown .down-btn img { width: .18rem; height: .18rem; margin-right: .05rem; }
.fixed-down-scroll { font-size: .11rem; color: #FFF300; }
.fixed-down-scroll li { width: 100%; height: .4rem; line-height: .5rem; overflow: hidden; text-align: center; }
html { font-size: 100px; }
@media (min-width:1199px){
	.area1 .box{width:50%;margin-left:50%;}
	.area1 .img4{position:absolute;left:0;top: 1rem;width:45%;}
	.area1 .img4 img{width: 90%;height:auto;}
}
@media (max-width:1500px){
	.wrap{width:90%!important;}
}
@media (max-width:1199px){
	.area1 .wrap{padding-top:0;}
	.area1 h1{text-align:center;}
	.area1 .text1{margin:.3rem 0;}
	.area1 .downbox{max-width:70%;margin:.8rem auto .8rem;}
	.area1 .arrow{display:none;}
	.area1 .img4 img{width: 90%;height: auto;margin:1rem auto 0;max-width: 5.7rem;}
	.area1 .text2{margin-top:1rem;}
	.area2 .countdown li span{width:.5rem;}
	.area4 li{height:2.2rem;}
}
@media (max-width:959px) {
	html{font-size:95px}
	.topHead .fixed.hover .wrap{padding: 0 .1rem;}
	.area1 .text1{font-size:.38rem;}
	.area1 h1{padding-top:0}
	.area2 .countdown li:not(:last-child):after{right: -.15rem;}
	.area2 .countdown li:not(:last-child){margin-right:.2rem;}
	.area2 .countdown li i{font-size:.13rem;}
	.area6 li{width:6rem;}
	.area4 li{height:1.6rem;}
}
@media (max-width:768px) {
	html { font-size: 90px; }
	.topHead .wrap{width:95%!important;height:.8rem;}
	.nav-bar { display: none; }
	.menuBtn {display: flex;align-items: center;background: url(../images/menu_ico.png) center -.2rem no-repeat;background-size: .25rem auto;}
	.topHead .fixed.hover{top:.2rem;}
	.topHead .fixed.hover .wrap{height:.6rem;}
	.topHead .fixed.hover .menuBtn{background-position: center .15rem;}
    .popMenu {width: 90%;right: -90%;}
	.swiper-container-horizontal>.swiper-pagination-bullets{display:block;}
	.area1{padding: .3rem 0 0!important;}
	.area1 .text1{margin:0 auto .2rem;text-align:center;}
	.area1 .img1{display:block;}
	.area1 .img1 img{width: 80%;height:auto;margin:.3rem auto;}
	.area1 .downbox{max-width: 60%;flex-direction:column;}
	.area1 .downbox a{width:100%;height: .68rem;line-height: .68rem;margin: .1rem 0;font-size:.2rem;}
	.area1 .downbox p{text-align:center;}
	.area1 .arrow{display:block;}
	.area1 ul{width: 90%;flex-wrap:wrap;justify-content: normal;margin:0 auto;}
	.area1 ul li{width: 31.333%;max-width: 31.333%;}
	.area1 ul li:nth-child(4){margin:0 3%;}
	.area1 ul li:nth-child(1){margin-right:4%;}
	.area1 ul li:nth-child(1),.area1 ul li:nth-child(2){width:48%;flex: none;max-width:48%;margin-bottom: .2rem;}
	.area1 ul li:nth-child(1) img,.area1 ul li:nth-child(2) img{width: 100%;auto;max-height: auto;height: auto;}
	.area1 .text2{margin-top:.5rem;font-size: .24rem;}
	.area2 .wrap{flex-direction:column;}
	.area2 .box1{width:100%;padding: 0 0 .5rem 0;}
	.area2 .box1 h2,.area2 .box1 .text{text-align:center;}
	.area2 .box1 h2{font-size:.24rem;}
	.area2 .box2{width:80%;margin:0 auto;padding-top:.3rem;}
	.area3 ul{flex-direction:column;}
	.area3 li{width: 80%;margin: 0 auto!important;}
	.area3 li p{text-align:center;}
	.area4 ul{flex-wrap:wrap;}
	.area4 li{width: 31.333%;height: calc(100vw / 2.8);margin-bottom: .2rem;}
	.area5 .swiper-box-1{margin:0 .3rem;}
    .area5 li .icon{width:.8rem;height:.8rem;}
	.area5 li .title{margin: .3rem 0 .15rem;font-size: .22rem;}
	.area5 li .desc{font-size: .18rem;}
	.footer .wrap{flex-direction:column;padding: .5rem 0;}
	.footer .box1,.footer .box2,.footer .box3{width:100%;margin:0;}
	.footer .box2{margin:.3rem 0;}
}
@media (max-width:460px) {
	.hd h2{font-size:.24rem;line-height: .3rem;margin-bottom: .1rem;}
    .area1 h1{font-size: .22rem;}
	.area1 .text1{font-size:.32rem;}
	.area1 .downbox{width: 80%;max-width: 80%;margin: .3rem auto;}
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideUp {
 from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}
@keyframes csstransform-31532 {
	100% {transform: translateY(10px);opacity: 0}
}
@keyframes css-area1 {
    100% {
       transform: translateY(10px);
    }
}