body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video{ display: inline-block;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul,li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
a{text-decoration:none; -webkit-tap-highlight-color:transparent;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html{-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-overflow-scrolling: touch; width:100%;}
img{border: 0; -webkit-touch-callout: none;}
body{-webkit-text-size-adjust: 100%; width:100%; background: #08182e;}

.spr{ background-image:url(//game.gtimg.cn/images/val/act/a20241021viewing/m/spr.png); background-repeat:no-repeat; background-size:8.59rem 3.07rem;}
.spr.btn-buy{ width:7.03rem; height:0.65rem; background-position:1.92308% 1.23967%;}
.spr.btn-close{ width:0.36rem; height:0.37rem; background-position:91.85905% 84.81481%;}
.spr.btn-define{ width:3.32rem; height:0.63rem; background-position:0.56926% 75.40984%;}
.spr.btn-f5{ width:1.49rem; height:0.37rem; background-position:99.57746% 30%;}
.spr.btn-receive.gray{ width:7.02rem; height:0.55rem; background-position:1.91083% 27.77778%;}
.spr.btn-receive{ width:7.02rem; height:0.55rem; background-position:1.91083% 50.39683%;}
.spr.btn-receive.undone{ width:7.02rem; height:0.55rem; background-position:1.91083% 98.80952%;}
.spr.btn-video{ width:0.47rem; height:0.47rem; background-position:87.06897% 88.07692%;}
.spr.close_menu{ width:0.62rem; height:0.62rem; background-position:88.70765% 48.97959%;}
.spr.i-f5{ width:0.16rem; height:0.17rem; background-position:94.42467% 12.06897%;}
.spr.menu_btn{ width:0.62rem; height:0.62rem; background-position:96.73777% 48.97959%;}
.spr.order{ width:0.86rem; height:0.44rem; background-position:91.5912% 13.30798%;}
.spr.page3-jd{ width:1.11rem; height:0.3rem; background-position:94.65241% 1.08303%;}
.spr.time{ width:5.17rem; height:0.43rem; background-position:98.53801% 69.69697%;}
.spr.tit-left{ width:0.22rem; height:0.19rem; background-position:98.08841% 1.04167%;}
.spr.tit-right{ width:0.22rem; height:0.19rem; background-position:98.08841% 8.33333%;}

.header{width:100%;height:1.52rem;}
.menu_btn{font-size:0;}
.common_nav{display:flex;width:100%;justify-content:space-between;align-items:center;height:1.52rem;background:#000;font-size:0.18rem;line-height:1;color:#7a8e99;padding:0 0.32rem 0 0.32rem;position:fixed;left:0;z-index:1001;top:0;opacity:1;}
.nav-logos{display:flex;justify-content:space-between;align-items:center;width:3.7rem;height:0.6rem}
.nav-logo-valorant{width:0.68rem;height:0.6rem;background:url(//game.gtimg.cn/images/val/act/a20241021viewing/m/logo1.png) no-repeat center/100% 100%;position:relative}
.m_logo_box>a:first-of-type,.nav-logo-vct{width:0.55rem;height:0.6rem;background:url(//game.gtimg.cn/images/val/act/a20241021viewing/m/logo2.png) no-repeat center/100% 100%;}
.logo_right{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.header .m_logo_box{align-items:center;background-color:rgba(0,0,0,.95);border-bottom:1px solid #273237;display:flex;flex-direction:row;height:1.52rem;justify-content:space-between;padding:0 0.35rem 0 0.62rem}
.header .close_menu{display:block;}
.header .ul_link{background-color:#0f1519;background:rgba(15,21,25,.95);border-left:1px solid #273237;box-shadow:-0.06rem 0 0.1rem 0 rgba(0,0,0,.75),-0.06rem 0 0.1rem 0 rgba(0,0,0,.2);flex-direction:column;height:100vh;opacity:0;position:absolute;right:0;top:0;transform:translateX(100%);transition:all .2s;width:4.66rem;z-index:3;}
.common_nav.show_menu .ul_link{opacity:1;transform:translateX(0);}
.header .ul_link li{font-size:0.32rem;height:0.97rem;border-bottom:1px solid #273237;color:#7a8e99;}
.header .ul_link li a{padding-left:0.62rem;width:100%;height:100%;display:flex;align-items:center;position:relative;color:#7a8e99;}
.header .ul_link li a::before{background-color:#c4af79;content:'';display:block;height:100%;left:0;opacity:0;position:absolute;top:0;width:0.04rem}
.header .ul_link li.on a::before{opacity:1;}
.download_game{display:none}

#afooter{padding:0 0 .4rem;line-height:.24rem;color:#777;text-align:center;font-size:.16rem;font-family:'tahoma'; position: relative; z-index: 3; background: #000;}
#afooter a{color:#ddd;text-decoration:none}
#common-footer{position:relative;line-height:0.24rem;padding:0.4rem 0.55rem .2rem;font-size:0.16rem;text-align:center;color:#777;background-color:#000;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:99;}
#common-footer .foot{min-width:auto;text-align:center}
#common-footer .foot_lefts{width:4.7rem;display:flex;flex-direction:column}
#common-footer .foot_links{width:7.9rem;color:#ece8e1;text-align:left}
#common-footer .foot_ieg_logo{display:none}
#common-footer .logo.logo-ieg{-webkit-box-flex:0;-ms-flex:0 0 2.74rem;flex:0 0 2.74rem;height:0.52rem;background-position:0 0;}
#common-footer .logo{margin:0 0.15rem;font-size:0;text-indent:-9999em;background-image:url(//game.gtimg.cn/images/val/act/a20241021viewing/m/footer-sprites.png);background-size:2.74rem 1.06rem;background-repeat:no-repeat}
#common-footer a{color:#ece8e1;}
#common-footer .foot_left{float:none;width:auto;height:auto;text-indent:0;overflow:hidden}
#common-footer .logo-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
#common-footer .logo.logo-riot{-webkit-box-flex:0;-ms-flex:0 0 1.51rem;flex:0 0 1.51rem;height:0.52rem;background-position:0 -0.59rem}
#common-footer .plate-cont{color:#ece8e1;font-size:0.16rem;text-align:left;margin-top:0.3rem;margin-bottom:0.3rem;padding-right:0.6rem;line-height: .24rem;}
#common-footer .age-box{position:relative;text-align:justify; line-height: .24rem;}
#common-footer .age-box p+p{margin-top:.02rem}
#common-footer .foot_links li{overflow:unset}
#common-footer .age-icon{background:url(//game.gtimg.cn/images/val/act/a20241021viewing/m/age-icon.png) no-repeat;width:0.82rem;height:1.06rem;position:absolute;left:5.9rem;top:-2rem; background-size: 100% 100%;}
#common-footer .age-icon .age-text{background-color:#101519;width:7.09rem;height:6.36rem;padding:0.4rem;opacity:0;pointer-events:none;transition:opacity .3s;position:absolute;top:-6.6rem;left:-6.3rem;box-sizing:border-box}
#common-footer .age-icon .age-text::after{content:'';width:0;height:0;border-left:.15rem solid transparent;border-right:.15rem solid transparent;border-top:.16rem solid #101519;position:absolute;bottom:-0.16rem;left:6.6rem}
#common-footer .age-icon .age-text p{line-height:2.25;font-size:0.16rem;margin:0;color:#fff;text-align:justify}
#common-footer .age-icon:hover .age-text{pointer-events:all;opacity:1;transition:opacity .3s;}




.wrapper{ position:relative; font-size:12px; overflow: hidden; width: 100%;}
.wrapper *,.dia *,.dia{ -webkit-box-sizing:border-box; box-sizing:border-box;}
body .wrapper .boxc{-webkit-box-sizing: content-box; box-sizing:content-box;}
.wrapper a{ outline:none;}
.wrapper .hid{text-indent:-9999px;font-size:0px;overflow:hidden;width:0px;height:0px;}
.wrapper img{ display:block;}

@font-face {
  font-family: 'num';
  src: url(//game.gtimg.cn/images/val/act/a20241021viewing/font/num.ttf);
}

.page1{ background: url(//game.gtimg.cn/images/val/act/a20241021viewing/m/bg1.jpg) 50% 0 no-repeat; height: 8.3rem; background-size: 100% 100%; position: relative; z-index: 2;}
.page2{display: none;}
.page3{ background: url(//game.gtimg.cn/images/val/act/a20241021viewing/m/bg2.jpg) 50% 0 no-repeat; height: 12rem; background-size: 100% 100%; position: relative; z-index: 1;}
.page4{ background: url(//game.gtimg.cn/images/val/act/a20241021viewing/m/bg3.jpg) 50% 0 no-repeat; height: 7.4rem; background-size: 100% 100%; position: relative;}
.page5{ background: url(//game.gtimg.cn/images/val/act/a20241021viewing/m/bg4.jpg) 50% 0 no-repeat; height: 9.1rem; background-size: 100% 100%; position: relative;}

.page1 .main{height: 100%;}
.page1 .login-box{position: absolute; width: 100%; left: 0; bottom: -.54rem; font-size: .26rem; text-align: center; color: #fff;}
.page1 .login-box a{ color: #f1bd0e;}


.page3 .main{padding-top: 2.23rem; padding-left: .24rem; position: relative;}
.page3 .time{ color: #fff; font-size: .18rem; text-align: center; line-height: .43rem; padding-left: 1.6rem; letter-spacing: .04rem;}
.page3 .btn-f5{position: absolute; right: .24rem; top: 2.46rem; color: #f2f2f2; font-size: .18rem; line-height: .37rem; padding-left: .08rem;}
.page3 .btn-f5 i{position: absolute; right: 0; top: 50%; margin-top: -.085rem; right: .1rem;}
.page3 .btn-f5.rotation{pointer-events: none;}
.page3 .btn-f5.rotation i{-webkit-animation: aniRotation 1s; animation: aniRotation 1s;}
.page3 .gift-list{padding-top: .35rem;}
.page3 .gift-list li{padding-left: .25rem; height: 4.45rem; padding-top: .45rem;}
.page3 .name{font-size: .38rem; line-height: 1; font-weight: bold; color: #fff; width: 3.1rem; border-bottom: 1px solid #53c0c0; height: .9rem; padding-top: .26rem;}
.page3 .gift-list li:nth-of-type(2) .name{font-size: .33rem; padding-top: 0;}
.page3 .task{font-size: .2rem; line-height: .26rem; color: #fffeeb; margin-top: .18rem;}
.page3 .task span{ color: #53c0c0;}
.page3 .jindu{margin-top: .08rem; height: .4rem; position: relative;}
.page3 .page3-jd{line-height: .3rem; color: #101f3e; font-size: .18rem; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -.15rem;}
.page3 .jindu .num{line-height: .4rem; font-size: .24rem; font-weight: bold; text-align: right; width: 3.1rem; color: #fff;}
.page3 .jindu .num span{ color: #53c0c0;}
.page3 .btn-receive{display: block; margin-left: -.25rem; margin-top: .69rem; color: #172226; font-size: .24rem; font-weight: bold; line-height: .55rem; text-align: center;}
.page3 .btn-receive.undone,.page3 .btn-receive.gray{ pointer-events: none;}
.page3 .btn-receive.undone{color: #12262c;}
.page3 .btn-receive.gray{ color: #172226;}

.page4 .main{padding-top: .9rem;}
.page4 .buy-box{position: absolute; left: 0; width: 100%; top: 6.06rem;}
.page4 .buy-box a{display: block; margin: 0 auto; line-height: .65rem; color: #12262c; font-size: .24rem; font-weight: bold; text-align: center;}
.page4 .gift-box{width: 7rem; margin: 0 auto; height: 4.88rem; position: relative;}
.page4 .gift-tips{font-size: .2rem; line-height: .28rem; color: #fff; text-align: justify;}
.page4 .video-box{position: absolute; right: .03rem; bottom: .03rem; height: 1.54rem; width: 2.7rem; }
.page4 .video-box .btn-video{position: absolute; left: 50%; top: 50%; margin-left: -.235rem; margin-top: -.235rem; -webkit-animation: aniZoom 2s linear infinite; animation: aniZoom 2s linear infinite;}
.page4 .video-box p{ color: #fff; font-size: .18rem; position: absolute; left: .02rem; bottom: .09rem; line-height: .24rem;}

@-webkit-keyframes aniZoom{0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(.8)}100%{-webkit-transform:scale(1)}}
@keyframes aniZoom{0%{transform:scale(1)}50%{transform:scale(.8)}100%{transform:scale(1)}}
@-webkit-keyframes aniRotation{0%{-webkit-transform: rotate(0);}100%{-webkit-transform:rotate(360deg);}}
@keyframes aniRotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.page5 .main{padding-top: 1.15rem;}
.page5 li{ color: #f2f2f2; padding-left: 1.36rem; width: 7.25rem; text-align: justify; position: relative; padding-bottom: .32rem;}
.page5 li .order{position: absolute; left: .23rem; top: 0; font-family: 'num'; color: #172226; font-size: .32rem; font-weight: bold; text-align: center; line-height: .44rem;}
.page5 .question{font-size: .24rem; line-height: .36rem;}
.page5 .answer{font-size: .2rem; line-height: .3rem; margin-top: .12rem;}

.dia{box-sizing: border-box; position: relative; display: none;}
.dia *{box-sizing:border-box;}
.dia .btn-close{display: block;position: absolute;top: -.5rem;right:0;}
.dia .btn-group{font-size: 0; text-align: center;}
.dia .btn-group a{display: inline-block; vertical-align: top; font-size: .24rem; font-weight: bold; line-height: .63rem;}
.dia .btn-group .btn-define{ color: #172226;}

.dia .dia-tit{font-size: 0; text-align: center;}
.dia .dia-tit p{display: inline-block; vertical-align: top; color: #face2d; font-size: .42rem; line-height: .6rem; font-weight: bold; position: relative;}
.dia .dia-tit i{position: absolute; top: 50%; margin-top: -.095rem;}
.dia .dia-tit .tit-left{left: -.58rem;}
.dia .dia-tit .tit-right{right: -.58rem;}

.dia-tips{width: 7.07rem;height:4.12rem; padding-top: .84rem;background: url(//game.gtimg.cn/images/val/act/a20241021viewing/pc/tc-bg1.png) no-repeat; background-size: 100% 100%;}
.dia-tips .text-tip{height:1.25rem;position: relative;text-align: center; line-height:.38rem ;color: #fffeeb;font-size: .24rem; display:flex; display:-webkit-flex; align-items:center; justify-content:center; padding: 0 .5rem; margin-bottom: .1rem;}
.dia-tips .text-tip span{color: #53c0c0;}

.dia-video{width: 7.1rem; height: 4rem; border: 2px solid #53c0c0;}
.dia-video .video-box{width: 100%; height: 100%;}