body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a,a:hover{text-decoration:none}
img{border:0}
body{box-sizing: border-box; background: #08182e;}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
ul li{list-style:none;}
/* reset end */
/***底部***/
#afooter {position: relative;padding: 30px 0;text-align: center;font: normal 12px/19px Tahoma;z-index: 10;background-color: #222;}
#afooter, #afooter a {color: #c0c0c0;text-decoration: none;}

/* 针对火狐浏览器 */
@-moz-document url-prefix(){*{scrollbar-width:none;}}

/*去掉milo自动的滚动条样式*/
body{overflow-y: auto; min-width: 1400px;}
body.generating{overflow-x: hidden;}
body::-webkit-scrollbar {width:8px;height:8px;background-color:#08182e;}
body::-webkit-scrollbar-thumb{background-color:#f94654; border: 1px solid #f94654; border-radius:4px;}
body::-webkit-scrollbar-track{background-color:#08182e; border: 1px solid #f94654; border-radius:4px;}

.wrapper-scale{position: relative; overflow: hidden;}
.wrapper-scale .wrapper{ transform-origin: 0 0;}
.wrapper *{-webkit-box-sizing: border-box; box-sizing: border-box; font-family: '\5FAE\8F6F\96C5\9ED1', serif;}
.wrapper{position:relative; overflow:hidden; width: 100%; transition:opacity .2s cubic-bezier(.215,.61,.355,1); opacity: 0;}
.wrapper img{display: block;}
.clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:" ";font-size:0}
.clearfix{*zoom:1}

/* 精灵图 S */
.spr{ background:url(//game.gtimg.cn/images/val/cp/a20251215activateAct/spr.png) no-repeat;}
.spr.bar-arrow{ width:12px; height:24px; background-position:-987px -4px;}
.spr.bar-icon.gray{ width:26px; height:25px; background-position:-602px -252px;}
.spr.bar-icon.on{ width:60px; height:52px; background-position:-745px -1375px;}
.spr.bar-icon{ width:26px; height:26px; background-position:-602px -222px;}
.spr.card-bg.gray{ width:222px; height:445px; background-position:-4px -1002px;}
.spr.card-bg.on{ width:222px; height:445px; background-position:-230px -1002px;}
.spr.card-bg{ width:222px; height:445px; background-position:-456px -1002px;}
.spr.claim-button.gray{ width:177px; height:51px; background-position:-682px -1214px;}
.spr.claim-button.on{ width:173px; height:51px; background-position:-809px -1375px;}
.spr.claim-button{ width:177px; height:51px; background-position:-682px -1269px;}
.spr.complete-icon.on{ width:33px; height:32px; background-position:-952px -1150px;}
.spr.complete-icon{ width:33px; height:33px; background-position:-952px -1113px;}
.spr.experience-button{ width:401px; height:89px; background-position:-508px -413px;}
.spr.gain-bg{ width:189px; height:208px; background-position:-682px -1002px;}
.spr.highlight-share{ width:469px; height:243px; background-position:-4px -486px;}
.spr.highlight-smack{ width:469px; height:242px; background-position:-4px -733px;}
.spr.highlight-sticker{ width:469px; height:242px; background-position:-477px -756px;}
.spr.highlight-tab.on{ width:500px; height:100px; background-position:-4px -278px;}
.spr.highlight-tab{ width:500px; height:100px; background-position:-4px -382px;}
.spr.number-bg1{ width:60px; height:27px; background-position:-633px -382px;}
.spr.number-bg2{ width:58px; height:31px; background-position:-950px -643px;}
.spr.pop-btn{ width:347px; height:70px; background-position:-634px -54px;}
.spr.pop-close{ width:37px; height:37px; background-position:-952px -1072px;}
.spr.prop1{ width:63px; height:68px; background-position:-930px -1223px;}
.spr.prop2{ width:74px; height:72px; background-position:-524px -222px;}
.spr.prop3{ width:119px; height:17px; background-position:-508px -314px;}
.spr.prop4{ width:66px; height:72px; background-position:-936px -275px;}
.spr.prop5{ width:67px; height:70px; background-position:-936px -201px;}
.spr.prop6{ width:133px; height:41px; background-position:-875px -1027px;}
.spr.prop7{ width:60px; height:71px; background-position:-863px -1300px;}
.spr.prop8{ width:44px; height:67px; background-position:-585px -335px;}
.spr.prop9{ width:63px; height:73px; background-position:-863px -1223px;}
.spr.prop10{ width:71px; height:69px; background-position:-936px -128px;}
.spr.prop11{ width:59px; height:70px; background-position:-682px -1375px;}
.spr.prop12{ width:58px; height:54px; background-position:-950px -585px;}
.spr.prop13{ width:55px; height:71px; background-position:-950px -782px;}
.spr.prop14{ width:73px; height:70px; background-position:-875px -1149px;}
.spr.prop15{ width:61px; height:70px; background-position:-930px -1295px;}
.spr.prop16{ width:63px; height:76px; background-position:-936px -351px;}
.spr.prop17{ width:58px; height:72px; background-position:-950px -509px;}
.spr.prop18{ width:50px; height:119px; background-position:-950px -857px;}
.spr.QR-code{ width:298px; height:250px; background-position:-634px -128px;}
.spr.sticker-bg{ width:469px; height:243px; background-position:-477px -509px;}
.spr.subtitle-bg{ width:516px; height:52px; background-position:-4px -222px;}
.spr.tab-icon1{ width:73px; height:73px; background-position:-875px -1072px;}
.spr.tab-icon2{ width:73px; height:74px; background-position:-508px -335px;}
.spr.tab-icon3{ width:73px; height:74px; background-position:-913px -431px;}
.spr.tab-select{ width:57px; height:100px; background-position:-950px -678px;}
.spr.task-info.gray{ width:626px; height:105px; background-position:-4px -4px;}
.spr.task-info{ width:626px; height:105px; background-position:-4px -113px;}
.spr.title-bg1{ width:148px; height:46px; background-position:-682px -1324px;}
.spr.title-bg2{ width:349px; height:46px; background-position:-634px -4px;}
.spr.title-logo{ width:24px; height:29px; background-position:-602px -281px;}
.spr.title-stars{ width:42px; height:43px; background-position:-950px -980px;}
/* 精灵图 E */

/* 通用 S */
.page1 .login-box a:hover,
.page2 .spr.card-bg > a:hover,
.page3 .wagu-machine .spr.experience-button:hover,
.page3 .spr.highlight-tab:not(.on):hover
{ filter: brightness(1.18); cursor: pointer; }
/* 通用 E */

.page1 { width: 1920px; height: 1079px; background: url(//game.gtimg.cn/images/val/cp/a20251215activateAct/bg1.jpg) no-repeat; background-size: 100% 100%; position: relative; }
.page1 .subtitle { color: #f55058; font-size: 26px; position: absolute; width: 555px; text-align: center; right: 130px; top: 655px; }
.page1 .login-box { text-align: center; position: absolute; right: 125px; top: 745px; width: 550px; }
.page1 .login-box .login { font-size: 24px; color: #c9c3b7; }
.page1 .login-box a { color: #f55058; }

@font-face { font-family: 'TUNGSTEN-SEMIBOLD'; src: url('//game.gtimg.cn/images/val/cp/a20251215activateAct/font/TUNGSTEN-SEMIBOLD.OTF') format('opentype'); font-weight: normal; font-style: normal; }
.page2 { width: 1920px; height: 983px; padding: 130px 175px 0 205px; background: url(//game.gtimg.cn/images/val/cp/a20251215activateAct/bg2.jpg) no-repeat; background-size: 100% 100%; position: relative; }
.page2 .title { display: flex; justify-content: start; align-items: end; }
.page2 .title > p { color: #ebe8e1; font-size: 69px; letter-spacing: 6px; font-weight: 600; }
.page2 .title > i { display: block; transform: translateY(-22px); margin-left: 10px; }
.page2 .main { width: 100%; display: flex; justify-content: space-between; align-items: start; margin-top: 40px; }
.page2 .main .title-box { color: #111923; font-size: 25px; text-align: center; line-height: 46px; letter-spacing: 1px; font-weight: 600;  }
.page2 .main .left { width: 660px; }
.page2 .left .task-box { width: 100%; height: 509px; margin-top: 30px; overflow-y: auto; }
.page2 .left .spr.task-info { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 25px; }
.page2 .left .spr.task-info:last-of-type { margin: 0; }
.page2 .left .task-box::-webkit-scrollbar { width: 5px; height: 5px; background-color: #08182e; }
.page2 .left .task-box::-webkit-scrollbar-thumb{ background-color: #f55058; }
.page2 .left .task-box::-webkit-scrollbar-track{ background-color: #2f363d; }
.page2 .left .description { display: flex; align-items: center; justify-content: start; width: 410px; overflow: hidden; }
.page2 .description span { color: #f55058; font-size: 41px; font-family: 'TUNGSTEN-SEMIBOLD', sans-serif; letter-spacing: 2px; margin-right: 20px;  }
.page2 .description p { color: #bdbfbf; font-size: 22px; line-height: 30px; text-align: start; letter-spacing: 1px; }
.page2 .spr.task-info .spr.complete-icon,
.page2 .spr.task-info.gray .spr.complete-icon.on { display: none; }
.page2 .spr.task-info .spr.complete-icon.on,
.page2 .spr.task-info.gray .spr.complete-icon { display: block; margin-right: 5px; }
.page2 .left .task-status { display: flex; justify-content: space-between; align-items: center; }
.page2 .task-status > p { color: #ffffff; font-size: 22px; }
.spr.task-info .task-status > p:last-of-type { display: none; }
.spr.task-info.gray .task-status > p { color: #0f1011; display: block; }
.spr.task-info.gray .task-status > p:first-of-type { display: none; }

.page2 .main .right { display: flex; flex-direction: column; position: relative; justify-content: space-between; align-items: start; }
.page2 .right .progress-bar { width: 825px; padding-top: 54px; user-select: none; -webkit-user-drag: none; display: flex; flex-direction: column; justify-content: start; align-items: start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; cursor: grab; }
.page2 .right .progress-bar { position: relative; --fade-width: 80px; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - var(--fade-width)), rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - var(--fade-width)), rgba(0,0,0,0) 100%); }
.progress-bar.dragging-active, 
.progress-bar.drag-active {scroll-behavior: auto !important;cursor: grabbing !important;}
.page2 .right .progress-bar::-webkit-scrollbar { display: none; }
.page2 .right .spr.bar-arrow { display: block; position: absolute; right: 0; top: 119px; }
.page2 .progress-bar .bar-wrapper { display: flex;  justify-content: start; align-items: center; position: relative; margin-top: 27px; }
.page2 .bar-wrapper .bar-container { display: flex; justify-content: start; align-items: center; position: relative; }
.page2 .bar-container .bar { display: block; width: 251px; height: 3px; background: #f55058; }
.page2 .bar-container:first-of-type .bar { width: 104px; }
.page2 .bar-container .square { display: block; width: 7px; height: 7px; background-color: #f55058; }
.page2 .bar-container.gray .bar,
.page2 .bar-container.gray .square { background: #888283; }

.page2 .progress-bar .card-wrapper { display: flex; justify-content: start; align-items: end; margin-top: -17px; }
.page2 .card-wrapper .progress-box { margin-right: 30px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: end; }
.page2 .progress-box .spr.bar-icon,
.page2 .progress-box .spr.bar-icon.on,
.page2 .progress-box .spr.bar-icon.gray,
.page2 .progress-box.status3 .spr.bar-icon.on,
.page2 .progress-box.status3 .spr.bar-icon.gray { display: none; }

.page2 .progress-box.status3 .spr.bar-icon,
.page2 .progress-box.status2 .spr.bar-icon.on { display: block; position: relative; z-index: 2; margin-bottom: -3px; }
.page2 .progress-box.status1 .spr.bar-icon.gray { display: block; position: relative; z-index: 2; margin-bottom: -2px; }

.page2 .progress-box.status2 .spr.bar-icon.on { margin-bottom: -17px; margin-top: -12px; }
.page2 .progress-box.status1 .spr.bar-icon { margin-bottom: -3px; }
.page2 .progress-box.status2::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 9px; width: 30px; height: 10px; background: #131c24; z-index: 1; pointer-events: none; }
.page2 .progress-box.status1::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 8px; width: 20px; height: 10px; background: #131c24; z-index: 1; pointer-events: none; }

.page2 .progress-box > p { color: #c5c3bf; font-size: 20px; letter-spacing: 1px; position: absolute; left: 50%; transform: translateX(-50%); top: -47px; white-space: nowrap;  }
.page2 .progress-box .spr.card-bg { display: none; flex-direction: column; justify-content: start; align-items: center; position: relative; padding: 90px 10px 0; }
.page2 .progress-box.status1 .unlocked-box,
.page2 .progress-box.status2 .ready-box,
.page2 .progress-box.status3 .claimed-box { display: flex;}
.page2 .spr.card-bg .prop-container { width: 100%; height: 140px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.page2 .prop-container .prop-top { width: 100%; display: flex; justify-content: center; align-items: center; }
.page2 .prop-container .prop-bottom { height: 55px; width: 100%; display: flex; justify-content: center; align-items: center; }
.page2 .prop-top > div { margin: 0 5px; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; }
.page2 .prop-container i { display: block; }
.page2 .prop-container .spr.prop6 { color: #171b25; font-size: 16px; line-height: 19px; font-weight: 600; text-align: center;}
.page2 .spr.card-bg .prop-text { position: relative; padding: 0 12px; color: #a5a5a4; font-size: 16px; height: 75px; margin-top: 28px; letter-spacing: 1px; display: flex; flex-direction: column; justify-content: end; align-items: start; align-self: start; }
.page2 .prop-text > p::before { content: '-'; color: #a5a5a4; font-size: 16px; position: absolute; left: 0; }
.page2 .spr.card-bg > a { display: flex; justify-content: center; align-items: center; font-size: 20px; letter-spacing: 2px; font-weight: 600; position: absolute; bottom: 32px; }
.progress-box.status1 .spr.card-bg > a { color: #000000; pointer-events: none; }
.progress-box.status2 .spr.card-bg.on > a { color: #f55058; }

.page2 .progress-box.status2 .ready-box { will-change: transform, opacity; }
.page2 .progress-box.status2 .ready-box.drop-out { transition: transform 600ms cubic-bezier(.22,.9,.28,1), opacity 600ms; transform: translateY(160px) scale(.98); opacity: 0; pointer-events: none; }
.progress-box.status3 .spr.card-bg.gray > a { color: #ebe8e1; pointer-events: none; }

.page3 { width: 1920px; height: 2416px; padding: 107px 210px 0; background: url(//game.gtimg.cn/images/val/cp/a20251215activateAct/bg3.jpg) no-repeat; background-size: 100% 100%; position: relative; }
.page3 .wagu-machine { display: flex; flex-direction: column; justify-content: start; align-items: start; }
.page3 .wagu-machine .title { color: #ebe8e1; font-size: 68px; line-height: 74px; font-weight: 600; letter-spacing: 2px; }
.page3 .wagu-machine .spr.title-stars { display: inline-block; margin-left: 7px; }
.page3 .wagu-machine .spr.subtitle-bg { color: #ebe8e1; font-size: 25px; text-align: center; line-height: 52px; letter-spacing: 1px; margin-top: 20px; }
.page3 .wagu-machine .spr.experience-button { display: block; color: #0b131c; font-size: 32px; letter-spacing: 2px; margin-top: 40px; text-align: center; font-weight: 600; line-height: 89px; }
.page3 .wagu-machine .customization-frequency { color: #ebe8e1; font-size:22px; margin-top: 25px; font-weight: 100; letter-spacing: 2px; }
.page3 .wagu-machine .spr.number-bg1 { display: inline-block; font-weight: 600; margin: 0 10px; color: #f55058; text-align: center; line-height: 27px; }
.page3 .wagu-machine .wagu-bottom { margin-top: 15px; }
.page3 .wagu-bottom > a { display: inline-block; font-size: 20px; margin-right: 30px; color: #0b131b; font-weight: 600; letter-spacing: 2px; border-bottom: 3px solid #0b131b; }
.page3 .wagu-bottom > a:hover { color: rgba(255, 255, 255, 0.42); border-bottom: 3px solid rgba(255, 255, 255, 0.42); }
.page3 .highlight-bg { display: none; }
.page3 .highlight-container { width: 1649px; height: 632px; padding: 60px 0 0; margin-top: 40px; left: 50%; transform: translateX(-50%); position: absolute; background: url(//game.gtimg.cn/images/val/cp/a20251215activateAct/highlight-bg.png) no-repeat; background-size: 100% 100%; }
.page3 .highlight-container > h2 { color: #ebe8e1; font-size: 46px; letter-spacing: 2px; text-align: center; }
.page3 .highlight-container .highlight-content { padding-top: 59px; display: flex; justify-content: space-between; align-items: center; }
.page3 .highlight-content .tab-bar { width: 720px; display: flex; flex-direction: column; justify-content: center; align-items: end; }
.page3 .tab-bar .spr.highlight-tab:nth-of-type(2) { margin-top: 36px; margin-bottom: 36px; }
.page3 .tab-bar .spr.highlight-tab { display: flex; position: relative; justify-content: space-between; align-items: center; font-size: 22px; color: #a2a2a2; }
.page3 .tab-bar .spr.highlight-tab.on { color: #ebe8e1; pointer-events: none; }
.page3 .spr.highlight-tab > p { width: 250px; text-align: center; margin-right: 75px; letter-spacing: 2px; }
.page3 .spr.highlight-tab > i { display: inline-block; margin-left: 24px; }
.page3 .tab-bar .spr.tab-select { display: none; }
.page3 .spr.highlight-tab.on .spr.tab-select { display: inline-block; position: absolute; left: -96px;  }
.page3 .highlight-content .activity-container { width: 887px; height: 372px; display: flex; flex-direction: column; align-items: start; justify-content: start; }
.page3 .activity-container .activity-title { position: relative; display: flex; justify-content: start; align-items: center; height: 58px; }
.page3 .activity-title > span {  color: #f55058; font-size: 30px; margin: -40px 0 0 6px; letter-spacing: 1px; font-family: 'TUNGSTEN-SEMIBOLD', sans-serif;  }
.page3 .activity-title > p { width: 584px; line-height: 28px; text-align: center; color: #111b25; font-size: 24px; font-weight: 600; margin-top: 3px; }
.page3 .activity-container .sticker-content { display: flex; justify-content: center; align-items: center; width: 469px; height: 243px; margin: 44px 0 0 72px; position: relative; }
.page3 .sticker-content .spr.sticker-bg { position: absolute; }
.page3 .sticker-content .spr.highlight-sticker { display: block; }
.page3 .activity-container > div { display: none; }
.page3 .activity-container.con1 > div:nth-of-type(1),
.page3 .activity-container.con2 > div:nth-of-type(2),
.page3 .activity-container.con3 > div:nth-of-type(3) { display: block }
.page3 .faq-container { width: 100%; margin-top: 740px; }
.page3 .faq-container .faq-title { display: flex; justify-content: start; align-items: center; }
.page3 .faq-container .faq-title::before { content: ''; display: block; width: 6px; height: 47px; margin-right: 10px; background: #ebe8e1; }
.faq-container .faq-title > p { color: #ebe8e1; font-size: 46px; font-weight: 600; letter-spacing: 2px; }
.page3 .faq-container .faq-item { margin-top: 35px; display: flex; justify-content: start; align-items: start; }
.faq-container .faq-item > div { margin-left: 20px; transform: translateY(-7px); width: 1305px; }
.faq-container .faq-item > span { color: #f55058; font-size: 26px; line-height: 28px; text-align: center; font-weight: 600; }
.faq-container .faq-item h5 { color: #ebe8e1; font-size: 26px; }
.faq-container .faq-item p { color: #ebe8e1; font-size: 22px; }
.page3 .wagu-machine .spr.experience-button.h5-button { display: none; }
.page3 .wagu-bottom > a.h5-button { display: none; }

/* 弹窗通用 S */
.dia, .dia * { box-sizing: border-box; }
.dia { position: relative; display: none; padding: 45px 20px 0; }
.dia .spr.pop-close { display: block; transition: all .3s;}
.dia .spr.pop-close:hover { transform: rotate(180deg);}
.dia .spr.pop-close { position: absolute; top: -50px; right: 0;}
.dia .spr.pop-btn { position: absolute; bottom: 44px; text-align: center; line-height: 70px; font-size: 30px; color: #ffffff; letter-spacing: 2px; left: 50%; transform: translateX(-50%); }
.dia .spr.pop-btn:hover { filter: brightness(1.18); cursor: pointer; }
.dia .pop-title { display: flex; justify-content: center; align-items: center; }
.dia .pop-title > i:last-of-type { transform: rotate(180deg);  }
.dia .pop-title > p { color: #f55058; font-size: 40px; margin: 0 15px; letter-spacing: 4px; }
/* 弹窗通用 E */

.dia-tips { width: 750px; height: 370px; background: url(//game.gtimg.cn/images/val/cp/a20251215activateAct/pop-bg1.png) no-repeat; background-size: 100% 100%; }
.dia-tips .text-tip { width: 100%; text-align: center; margin-top: 70px; padding: 0 100px; }
.dia-tips .text-tip > p { color: #ffffff; font-size: 48px; letter-spacing: 2px; line-height: 55px; word-break: break-all; }

.pop1 { width: 750px; height: 510px; background: url(//game.gtimg.cn/images/val/cp/a20251215activateAct/pop-bg2.png) no-repeat; background-size: 100% 100%; padding-right: 70px; padding-left: 70px; }
.pop1 .prop-box { display: flex; justify-content: center; align-items: center; width: 100%; margin: 30px 0 10px; }
.pop1 .prop-box .spr.gain-bg { margin-right: 20px; position: relative; padding-top: 8px; }
.pop1 .prop-box .spr.gain-bg:last-of-type { margin-right: 0; }
.pop1 .spr.gain-bg > div { width: 155px; height: 155px; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
.pop1 .spr.gain-bg img { width: 100%; height: 100%; object-fit: contain; }
.pop1 .spr.gain-bg > p { color: #191b25; font-size: 21px; font-weight: 600; letter-spacing: 1px; text-align: center; position: absolute; bottom: 4px; left: 0; right: 0; }

.pop2 { width: 750px; height: 480px; background: url(//game.gtimg.cn/images/val/cp/a20251215activateAct/pop-bg3.png) no-repeat; background-size: 100% 100%; padding-right: 70px; padding-left: 70px; }
.pop2 > p { margin: 10px 0; color: #a3a4a3; font-size: 27px; text-align: center; letter-spacing: 2px; }
.pop2 .spr.QR-code { display: block; margin: auto;  }