@charset "utf-8";
body{ margin:0; padding:0; font-size: 14px; font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none; background-color: #282a2c; overflow-x: hidden;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6{ font-size: 100%;font-weight: normal;}
*{outline: none;}
img{ border: 0;}
ol,ul{list-style: none;}
a{ font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; text-decoration: none;outline: none; cursor: pointer;}
a:hover{ text-decoration: none;}

#wrap{ position: relative; min-width: 1340px; max-width: 1920px; height: 980px; margin: 0 auto;}
.h-center{ position: absolute; left: 50%; transform: translate(-50%,0);}
.top-bar{ top: 21px; z-index: 10; width: 1340px; height: 29px;}
/* login */
.login-box{ position: absolute; left: 0; top: 0; width: 1023px; height: 29px;}
.login-before{ position: absolute; right: 0; top: 0; width: 115px; height: 29px;}
.btn-login{ display: block; width: 115px; height: 29px; background: url(../images/btn-login.png) no-repeat; cursor: pointer;}
.login-after{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 18px; line-height: 28px; color: #fff; text-align: right;}
.btn-logout{ cursor: pointer;}
.bind-info{ display: none; margin-left: 10px;}

.top-btn-wrap{ position: absolute; left: 1029px; top: 0; width: 366px; height: 29px;}
.top-btn-wrap span{ float: left; width: 115px; height: 29px; margin-right: 6px; cursor: pointer;}
.btn-my-guess{background: url(../images/btn-my-guess.png) no-repeat;}
.btn-rule{background: url(../images/btn-rule.png) no-repeat;}
.btn-prize-top{background: url(../images/btn-prize-top.png) no-repeat;}

.ball{ display: none; position: absolute;}
.ball1{ left: 250px; top: 347px; width: 168px; height: 166px; background: url(../images/ball1.png) no-repeat;}
.ball2{ left: 819px; top: 39px; width: 82px; height: 101px; background: url(../images/ball2.png) no-repeat;}
.ball3{ left: 924px; top: 374px; width: 122px; height: 134px; background: url(../images/ball3.png) no-repeat;}
.ani-moveU20{ animation: key-moveU20 1.6s linear infinite alternate;}
@keyframes key-moveU20{
    0%{ transform: translate(0,0);}
    100%{ transform: translate(0,-20px);}
}
.ani-moveU30{ animation: key-moveU30 2.4s linear infinite alternate;}
@keyframes key-moveU30{
    0%{ transform: translate(0,0);}
    100%{ transform: translate(0,-30px);}
}
.ani-moveD20{ animation: key-moveD20 1.6s linear infinite alternate;}
@keyframes key-moveD20{
    0%{ transform: translate(0,0);}
    100%{ transform: translate(0,20px);}
}
/* day1 */
.section-day{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#section-day1{ display: block;}
.day-bg{ top: 0; width: 1920px;}
.section-day video{ position: absolute; left: 50%; margin-left: -960px; top: 0; width: 1920px;}
.day-tag,.guess-tag{ top: 648px;}
.guess-guide,.guess-cont{ top: 0; z-index: 5; width: 1340px; height: 100%;}
.guess-cont{ display: none;}
.slogan{ top: 455px; width: 957px; height: 222px; background: url(../images/slogan.png) no-repeat;}
.guess-before,.guess-after{ top: 716px; width: 585px; height: 110px;}
.guess-after{ display: none;}
.btn-guess{ display: block; width: 226px; height: 56px; margin: 0 auto; background: url(../images/btn-guess2.png) no-repeat; cursor: pointer;}
#section-day1 .btn-guess{ background: url(../images/btn-guess1.png) no-repeat;}
.tip-guess{ width: 585px; height: 31px; margin-top: 23px; font-size: 15px; line-height: 31px; text-align: center; background: url(../images/tip-line.png) no-repeat;}
.guess-before .tip-guess{ color: #fff29a;}
.guess-after .tip-guess{ color: #fff;}
.guess-after .tip-guess span{ color: #fff29a;}

.weapon-item{ position: absolute; cursor: pointer;}
.weapon-chui{ left: 13px; top: 107px; width: 215px; height: 204px; background: url(../images/weapon-chui-img.png) no-repeat;}
.weapon-pipa{ left: 65px; top: 565px; width: 215px; height: 221px; background: url(../images/weapon-pipa-img.png) no-repeat;}
.weapon-zhang{ right: 61px; top: 119px; width: 218px; height: 220px; background: url(../images/weapon-zhang-img.png) no-repeat;}
.weapon-zhu{ right: 130px; top: 531px; width: 222px; height: 204px; background: url(../images/weapon-zhu-img.png) no-repeat;}

.weapon-chui.ani-move20,.weapon-zhu.ani-move20{ animation: key-moveU20 1.6s linear infinite alternate;}
.weapon-pipa.ani-move20,.weapon-zhang.ani-move20{ animation: key-moveD20 1.6s linear infinite alternate;}

.weapon-on{ display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.weapon-title-l{ position: absolute; top: 63px; left: -48px; transition: left .3s;}
.weapon-title-r{ position: absolute; top: 63px; right: -48px; transition: right .3s;}
.weapon-dec-l{ position: absolute; top: 90px; left: -22px; opacity: 0; transition: opacity .3s;}
.weapon-dec-r{ position: absolute; top: 90px; right: -22px; opacity: 0; transition: opacity .3s;}
.weapon-item:hover .weapon-title-l,.weapon-item.on .weapon-title-l{ left: -76px;}
.weapon-item:hover .weapon-title-r,.weapon-item.on .weapon-title-r{ right: -76px;}
.weapon-item:hover .weapon-dec,.weapon-item.on .weapon-dec{ opacity: 1;}
.weapon-item:hover .weapon-on,.weapon-item.on .weapon-on{ display: block;}

.btn-sub-choise{ top: 716px; width: 226px; height: 56px; background: url(../images/btn-sub-choise.png) no-repeat; cursor: pointer;}

#section-day1 .day-tag,#section-day1 .tip-guess{ display: none;}
/* day2 */
.role-info{ position: absolute; width: 107px; height: 570px;}
.role-info1{ left: 174px; top: 38px;}
.role-info2{ left: 1053px; top: 120px;}
.role-info .role-line{ display: none; position: absolute; z-index: 3;}
.role-info1 .role-line{ left: 105px; top: 228px; width: 255px; height: 96px; background: url(../images/role-line1.png) no-repeat;}
.role-info2 .role-line{ right: 105px; top: 240px; width: 251px; height: 62px; background: url(../images/role-line2.png) no-repeat;}
.role-text-bg{ display: none; position: absolute; top: 0; width: 100%; height: 100%; background: url(../images/role-text-bg.png) no-repeat;}
.role-info1 .role-text-bg{ left: 20px;}
.role-info2 .role-text-bg{ left: -20px;}
.role-text{ display: none; position: absolute; top: 165px;}
.role-text1{ left: 10px;}
.role-text2{ left: 2px;}

.btn-role-tip{ position: absolute; width: 85px; height: 86px; cursor: pointer;}
.btn-role-tip1{ left: 522px; top: 344px;}
.btn-role-tip2{ left: 750px; top: 404px;}
.btn-role-tip div{ position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: url(../images/btn-role-tip.png) no-repeat;}
.ani-huxi-s{ animation: key-huxi-s .8s infinite alternate;}
@keyframes key-huxi-s{
    0%{ opacity: 1; transform: scale(1);}
    100%{ opacity: .9; transform: scale(.9);}
}
.btn-role-bg{ position: absolute; left: -77px; top: -77px; width: 243px; height: 244px; background: url(../images/btn-role-bg.png) no-repeat; animation: key-huxi-b .8s infinite alternate;}
@keyframes key-huxi-b{
    0%{ opacity: 1; transform: scale(1);}
    100%{ opacity: .9; transform: scale(1.1);}
}

.input-box{ top: 716px; width: 463px; height: 54px; background: url(../images/input-box-bg.png) no-repeat;}
.input-box input{ float: left; width: 240px; height: 54px; margin-left: 42px; font-size: 18px; line-height: 54px; color: #fff; background: none; border: none;}
.input-box input::-webkit-input-placeholder{ color: #9b9b9b;}
.input-box .btn-sub{ float: right; width: 150px; height: 54px; cursor: pointer;}
/* day3 */
.role-tag{ position: absolute; left: 184px; top: 136px; width: 60px;}
.feature-info{ position: absolute; width: 175px; height: 355px;}
.feature-info1{ left: 140px; top: 16px;}
.feature-info2{ left: 180px; top: 430px;}
.feature-info3{ left: 1033px; top: 56px;}
.feature-info4{ left: 1137px; top: 295px;}
.feature-info5{ left: 939px; top: 512px;}
.feature-info .feature-line{ display: none; position: absolute; z-index: 3;}
.feature-info1 .feature-line{ left: 115px; top: 123px; width: 196px; height: 75px; background: url(../images/feature-line1.png) no-repeat;}
.feature-info2 .feature-line{ left: 119px; top: -42px; width: 264px; height: 209px; background: url(../images/feature-line2.png) no-repeat;}
.feature-info3 .feature-line{ right: 94px; top: 93px; width: 311px; height: 70px; background: url(../images/feature-line3.png) no-repeat;}
.feature-info4 .feature-line{ right: 97px; top: 4px; width: 228px; height: 178px; background: url(../images/feature-line4.png) no-repeat;}
.feature-info5 .feature-line{ right: 97px; top: 94px; width: 194px; height: 79px; background: url(../images/feature-line5.png) no-repeat;}
.feature-text{ display: none; position: absolute; top: 0; z-index: 4;}
.feature-text1,.feature-text2{ left: 20px;}
.feature-text3,.feature-text4,.feature-text5{ left: -20px;}
.feature-list{ position: absolute; top: 92px; z-index: 5; width: 88px; height: 230px;}
.feature-info1 .feature-list,.feature-info2 .feature-list{ left: -30px;}
.feature-info3 .feature-list,.feature-info4 .feature-list,.feature-info5 .feature-list{ left: 128px;}
.feature-list span{ display: block; width: 88px; height: 26px; margin-bottom: 10px; font-size: 14px; line-height: 26px; color: #fff0bb; text-align: center; background: url(../images/btn-feature.png) no-repeat 0 0; cursor: pointer;}
.feature-list span:hover,.feature-list span.on{ background-position: 0 100%;}
.ani-upShow10{ animation: key-upShow10 .2s linear;}
@keyframes key-upShow10{
    0%{ transform: translate(0,10px); opacity: .6;}
    100%{ transform: translate(0,0px); opacity: 1;}
}

.btn-feature-tip{ position: absolute; width: 46px; height: 46px; cursor: pointer;}
.btn-feature-tip1{ left: 430px; top: 192px;}
.btn-feature-tip2{ left: 542px; top: 364px;}
.btn-feature-tip3{ left: 776px; top: 198px;}
.btn-feature-tip4{ left: 960px; top: 270px;}
.btn-feature-tip5{ left: 796px; top: 578px;}
.btn-feature-tip div{ position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: url(../images/btn-feature-tip.png) no-repeat;}
.btn-feature-bg{ position: absolute; left: -42px; top: -41px; width: 132px; height: 132px; background: url(../images/btn-feature-bg.png) no-repeat; animation: key-huxi-b .8s infinite alternate;}
.btn-feature-tip3 .btn-feature-bg{ background: url(../images/btn-feature-bg2.png) no-repeat; }

.feature-num-box{ float: left; width: 240px; height: 54px; margin-left: 42px; font-size: 18px; line-height: 54px; color: #fff;}
.color-yellow{ color: #ffcf67;}
/* day4 */
.feature-tag{ position: absolute; left: 196px; top: 260px;}
.btn-version-tip{ position: absolute; width: 138px; height: 125px; cursor: pointer;}
.btn-version-tip1{ left: 161px; top: 336px;}
.btn-version-tip2{ left: 1019px; top: 336px;}
.btn-version-tip div{ position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: url(../images/btn-version-tip.png) no-repeat;}
.btn-version-bg{ position: absolute; left: -50px; top: -53px; width: 323px; height: 324px; background: url(../images/btn-role-bg.png) no-repeat; animation: key-huxi-b .8s infinite alternate;}
.ani-upShow50{ animation: key-upShow50 .2s linear;}
@keyframes key-upShow50{
    0%{ transform: translate(0,50px); opacity: .6;}
    100%{ transform: translate(0,0px); opacity: 1;}
}
.ani-downShow50{ animation: key-downShow50 .2s linear;}
@keyframes key-downShow50{
    0%{ transform: translate(0,-50px); opacity: .6;}
    100%{ transform: translate(0,0px); opacity: 1;}
}

.version-info{ position: absolute;}
.version-info1{ left: 186px; top: 161px; width: 130px; height: 625px;}
.version-info2{ left: 1048px; top: 232px; width: 150px; height: 624px;}
.version-text-bg{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.version-text-bg1{ background: url(../images/version-text-bg1.png) no-repeat;}
.version-text-bg2{ background: url(../images/version-text-bg2.png) no-repeat;}
.version-text{ display: none; position: absolute; top: 40px;}
.version-text1{ left: 40px;}
.version-text2{ left: 24px;}
/* day5 */
.btn-prize-bot,.btn-link-version{ top: 716px; width: 226px; height: 56px; background: url(../images/btn-prize-bot.png) no-repeat; cursor: pointer;}
.btn-link-version{ display: none; background: url(../images/btn-link-version.png) no-repeat;}
.btn-weapon-view{ position: absolute; left: 1033px; top: 306px; width: 109px; height: 99px; cursor: pointer;}
.btn-weapon-view div{ position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: url(../images/btn-weapon-view.png) no-repeat;}
.btn-weapon-view-bg{ position: absolute; left: -57px; top: -63px; width: 219px; height: 220px; background: url(../images/btn-weapon-view-bg.png) no-repeat; animation: key-huxi-b .8s infinite alternate;}
.weapon-view-line{ position: absolute; left: -87px; top: -110px;}

/* pop */
.pop-fixed{ display: none; position: fixed; left: 0; top: 0; z-index: 10000000; width: 100%; height: 100%; background-color:rgba(0,0,0,0.7);}
.pop-bg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1204px; height: 687px;}
.icon-close{ position: absolute; right: 102px; top: 40px; z-index: 10; width: 50px; height: 50px; background:url(../images/icon-close.png); cursor:pointer;}
/* pop-msg */
#pop-msg{ z-index: 10000002;}
.pop-bg-msg{ width: 676px; height: 387px; background: url(../images/pop-bg-msg.png) no-repeat;}
.pop-t-msg{ display: block; margin: 58px auto 0;}
.msg-box{ display: flex; width: 520px; height: 136px; margin: 0 auto 0; justify-content: center; align-items: center;}
#msg{ width: 100%; font-size: 26px; line-height: 36px; color: #ffeac1; text-align: center;}
.btn-conform{ display: block; width: 266px; height: 67px; margin: 0 auto; background: url(../images/btn-conform.png) no-repeat; cursor: pointer;}
/* pop-rule */
.pop-bg1{ background: url(../images/pop-bg1.png) no-repeat;}
.pop-bg2{ background: url(../images/pop-bg2.png) no-repeat;}
.pop-t-rule{ display: block; margin: 46px auto 0;}
.cus-scroll{ overflow-x: hidden; overflow-y: auto;}
.cus-scroll::-webkit-scrollbar{ width: 8px; background-color: #ba2c25;}
.cus-scroll::-webkit-scrollbar-thumb{ width: 8px; background-color: #d2be87;}
.rule-scroll{ width: 746px; height: 466px; margin: 30px 0 0 270px;}
.rule-text{ width: 650px; padding-bottom: 30px; font-size: 16px; line-height: 30px;}
.rule-text .rule-tag{ font-weight: bold; color: #ffe48f;}
.rule-text p{ margin-top: 5px; color: #fff7e4;}
/* pop-bind */
.pop-t-bind{ display: block; margin: 88px auto 0;}
.form-box{ width: 516px; height: 276px; margin: 0 auto; padding-top: 52px;}
.form-line{ width: 100%; height: 60px; margin-bottom: 35px;}
.form-tag{ float: left; height: 35px; margin-top: 12px;}
.form-line select{ float: right; width: 371px; height: 60px; padding: 0 20px; box-sizing: border-box; font-size: 28px; line-height: 60px; color: #ebdeb9; background: url(../images/select-bg.png) no-repeat; border: none; appearance: none; -webkit-appearance: none;}
.bind-tip{ font-size: 16px; color: #d7c68a; text-align: center;}
/* pop-my-guess */
.pop-t-guess{ display: block; margin: 88px auto 0;}
.guess-list{ display: flex; width: 956px; height: 292px; margin: 78px auto 0; justify-content: center; background: url(../images/guess-line.png) no-repeat center 128px;}
.guess-list li{ position: relative; width: 138px; height: 223px; margin: 0 20px; background: url(../images/guess-none.png) no-repeat;}
#guess-col1.on{ background: url(../images/guess-col1.png) no-repeat;}
#guess-col2.on{ background: url(../images/guess-col2.png) no-repeat;}
#guess-col3.on{ background: url(../images/guess-col3.png) no-repeat;}
#guess-col4.on{ background: url(../images/guess-col4.png) no-repeat;}
.guess-list li div{ display: flex; width: 100%; height: 94px; font-size: 24px; color: #ffeac1; justify-content: center; align-items: center; text-align: center;}
.guess-list li#guess-col3 div{ width: 100px; margin: 0 auto; font-size: 14px;}
/* pop-weapon-view */
.weapon-swiper{ width: 990px; height: 642px; margin: 14px auto 0;}
.weapon-swiper .swiper-slide img{ display: block; width: 818px; margin: 0 auto;}
.btn-prev-weapon,.btn-next-weapon{ position: absolute; top: 282px; z-index: 5; width: 48px; height: 79px; cursor: pointer;}
.btn-prev-weapon{ left: 0; background: url(../images/btn-prev-weapon.png) no-repeat;}
.btn-next-weapon{ right: 0; background: url(../images/btn-next-weapon.png) no-repeat;}
.weapon-swiper .swiper-button-disabled{ opacity: .6; cursor: default;}
.weapon-tab-list{ position: absolute; left: 50%; transform: translate(-50%,0); top: 52px; z-index: 5; width: 758px; height: 110px;}
.weapon-tab-list li{ float: left; position: relative; overflow: hidden; width: 102px; height: 32px; margin: 0 3px 18px; cursor: pointer;}
.weapon-tab-list li img{ position: absolute; left: 0; top: 0;}
.weapon-tab-list li.on img{ left: -104px;}
#weapon-tab8{ margin-left: 111px;}

#pop-weapon-view .btn-conform{ position: absolute; left: 50%; top: 543px; transform: translate(-50%,0); z-index: 5;}
/* pop-prize */
.prize-cont{ display: flex; position: absolute; width: 1526px; height: 486px; left: 50%; top: 50%; margin-left: -763px; margin-top: -243px;}
#pop-prize .icon-close{ right: 90px; top: -50px;}
.prize-list{ display: flex; width: 100%; height: 100%; justify-content: center;}
.prize-list li{ position: relative; width: 220px; height: 426px; margin: 0 15px;}
.prize-list li img{ display: block; width: 100%;}
.prize-list li.mt58{ margin-top: 58px;}
.prize-list li span{ position: absolute; width: 153px; height: 54px; left: 50%; margin-left: -76px; top: 305px;}
.prize-list li span.btn-get{ background: url(../images/btn-get.png); cursor: pointer;}
.prize-list li span.btn-get-done{ background: url(../images/btn-get-done.png);}
.prize-list li span.btn-get-none{ background: url(../images/btn-get-none.png);}