body{ margin:0; padding:0; font-size:14px; font-family:"Microsoft Yahei",Arial, Helvetica, sans-serif;-webkit-text-size-adjust:none; overflow-x: hidden; background-color: #282a2c;}
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; width: 100%; max-width: 1920px; min-width: 1366px; height: 910px; margin: 0 auto; overflow: hidden;}
/* top-bar */
.top-bar-box{ position: absolute; right: 168px; top: 13px; z-index: 10; width: 980px; height: 49px;}
#btn-music{ position: absolute; width: 61px; height: 61px; right: -70px; top: -7px; cursor: pointer;}
#btn-music.on{ background: url(../images/music-on.png);}
#btn-music.off{ background: url(../images/music-off.png);}
.btn-rule,.btn-prize{ position: absolute; width: 191px; height: 49px; top: 0; cursor: pointer;}
.btn-rule{ right: 191px; background: url(../images/btn-rule.png); }
.btn-prize{ right: 0; background: url(../images/btn-prize.png);}
.btn-rule:hover,.btn-prize:hover{ background-position: 0 -49px;}
.user-box{ display: none; position: absolute; width: 650px; height: 49px; right: 400px; top: 0; font-size: 16px; line-height: 49px; color: #2a220e; text-align: right; text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;}
/* nav */
.nav-box{ position: absolute; left: 18px; top: 118px; z-index: 10; width: 114px; height: 581px; padding-top: 84px; box-sizing: border-box; background: url(../images/nav-line-bg.png) no-repeat center center;}
.nav-box li{ position: relative; width: 114px; height: 47px; margin-bottom: 46px; background: url(../images/nav-suo.png) no-repeat center center;}
.nav-box li img{ display: none; position: absolute; width: 100%; left: 0; top: 0;}
.nav-box li.normal,.nav-box li.active{ background: none;}
.nav-box li.normal{ cursor: pointer;}
.nav-box li.normal .nav-text-normal{ display: block;}
.nav-box li.active .nav-text-active{ display: block;}
/* section-day */
.section-day{ display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden;}
.day-bg,.day-video{ position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: 0; width: 1920px;}
.day-video{ top: -70px;}
.center-cont{ position: relative; width: 1366px; margin: 0 auto; z-index: 5;}
.btn-clue{ position: absolute; cursor: pointer;}
.btn-clue img{ position: absolute;}
/* day1 */
.btn-day1-clue1{ left: 624px; top: 466px; width: 128px; height: 128px; background: url(../images/day1-btn1.png);}
.btn-day1-clue1 span{ position: absolute; left: 22px; top: 20px; width: 85px; height: 85px; background: url(../images/day1-btn1-quan.png);}
.btn-day1-clue2{ left: 624px; top: 594px; width: 385px; height: 228px;}
.btn-day1-clue2 span{ position: absolute; left: 184px; top: -20px; width: 232px; height: 128px; background: url(../images/day1-btn2.png);}
/* day2 */
.btn-day2-clue1{ left: -233px; top: 329px; width: 353px; height: 456px;}
.btn-day2-clue2{ left: 1016px; top: 609px; width: 300px; height: 267px;}
/* day3 */
.btn-day3-clue1{ left: 518px; top: 281px; width: 365px; height: 365px;}
.day3-btn1-scale1{ left: 58px; top: 63px;}
.day3-btn1-scale2{ left: 135px; top: 137px;}
.btn-day3-clue2{ left: 1103px; top: 420px; width: 131px; height: 120px;}
.day3-btn2-name{ left: 72px; top: 4px;}

.zs1{ position: absolute; left: 1016px; top: 609px;}
/* day4 */
.day4-item1{ position: absolute; left: -277px; top: 98px; transform-origin: left bottom;}
.day4-gai1{ position: absolute; left: -277px; top: 165px; width: 464px; height: 471px; background: url(../images/day4-gai1.png);}
.day4-item4{ position: absolute; right: -277px; top: -70px;}
.day4-gai4{ position: absolute; right: -277px; top: 99px; width: 332px; height: 467px; background: url(../images/day4-gai4.png);}
.btn-day4-clue1{ left: 0; top: 174px; width: 300px; height: 262px;}
.day4-name1{ left: 73px; top: 81px;}
.btn-day4-clue2{ left: 175px; top: 478px; width: 142px; height: 49px;}
.day4-name2{ left: 32px; top: 60px;}
.btn-day4-clue3{ left: 294px; top: 567px; width: 94px; height: 111px;}
.day4-name3{ left: 6px; top: 28px;}
.btn-day4-clue4{ right: -150px; top: 58px; width: 288px; height: 208px;}
.day4-name4{ left: 118px; top: 116px;}
.btn-day4-clue5{ left: 491px; top: 111px; width: 465px; height: 473px;}
.day4-name5{ left: 286px; top: 145px;}

.huixin{ position: absolute; left: 96px; top: 264px; width: 128px; height: 128px; background: url(../images/day1-btn1.png);}
.huixin span{ position: absolute; left: 22px; top: 20px; width: 85px; height: 85px; background: url(../images/day1-btn1-quan.png);}

.zs2{ position: absolute; left: 1103px; top: 420px;}
/* day5 */
.btn-day5-clue1{ left: 518px; top: 281px; width: 365px; height: 365px;}
.day5-name{ left: 125px; top: 119px;}
.zs3{ position: absolute; left: 175px; top: 478px;}
.zs4{ position: absolute; left: 294px; top: 120px;}
/* pop */
.pop-fixed{ display:none; position:fixed; width:100%; height:100%; left:0; top:0; background-color:rgba(0,0,0,0.7); z-index:10000000;}
/* pop-rule */
.pop-bg{ position:absolute; left:50%; top:50%; transform: translate3d(-50%,-50%,0);}
.pop-bg1{ width: 1098px; height: 582px; background: url(../images/pop-bg1.png);}
.icon-close{ position:absolute; right: 0; top: 0; z-index: 10; width: 50px; height: 50px; background:url(../images/icon-close.png); cursor:pointer;}
.pop-bg1 .pop-cont-box{ position: absolute; left: 85px; top: 0; width: 938px; height: 554px;}
.pop-t{ display: block; margin: 42px auto 0;}
.cus-scroll{ overflow-x: hidden; overflow-y: auto;}
.cus-scroll::-webkit-scrollbar{ width: 6px; background-color: #535c72;}
.cus-scroll::-webkit-scrollbar-thumb{ width: 8px; background-color: #d2be87;}
.rule-scroll{ width: 812px; height: 366px; margin: 4px 0 0 76px;}
.rule-item{ width: 780px; padding-bottom: 30px; color: #c6d6e9;}
.rule-item h4{ font-size: 18px; font-weight: bold; line-height: 20px;}
.rule-item p{ margin-top: 10px; font-size: 16px; line-height: 28px;}
/* pop-phone */
.pop-bg2{ width: 674px; height: 516px; background: url(../images/pop-bg2.png);}
.pop-bg2 .pop-cont-box{ position: absolute; left: 75px; top: 0; width: 533px; height: 490px;}
.form-box{ width: 350px; margin: 0 auto; padding-top: 6px;}
.form-line-box{ width: 350px; height: 33px; margin-bottom: 20px; overflow: hidden;}
.form-line-box.h43{ height: 43px;}
.form-tag{ float: left; display: flex; width: 115px; height: 33px; align-items: center;}
.inp-phone,.inp-code{ float: left; width: 232px; height: 31px; padding: 0 10px; box-sizing: border-box; font-size: 18px; line-height: 31px; background-color: #eeece9; border: 1px solid #757678;}
.inp-code{ width: 118px;}
.btn-get-code{ float: left; width: 114px; height: 33px; font-size: 14px; line-height: 33px; color: #5b8dff; text-align: center; text-decoration: underline; cursor: pointer;}
.btn-conform{ display: block; width: 243px; height: 64px; margin: 0 auto; background: url(../images/btn-conform.png); cursor: pointer;}
.btn-conform:hover{ background-position: 0 -64px;}
#wanmeiCaptcha_0{ max-width: 350px!important;}

.tip-msg{ width: 420px; height: 66px; margin: 22px auto 0; font-size: 12px; line-height: 16px; color: #dfdfdf;}
.tip-msg span{ color: #ffe699;}
/* pop-msg */
#pop-msg{ z-index: 101;}
.pop-bg3{ width: 687px; height: 364px; background: url(../images/pop-bg3.png);}
.pop-bg3 .icon-close{ right: -20px;}
.pop-bg3 .pop-cont-box{ position: absolute; left: 54px; top: 0; width: 586px; height: 346px;}
.pop-bg3 .pop-t{ margin: 28px auto 0;}
#msg{ display: flex; width: 500px; height: 143px; margin: 0 auto; font-size: 30px; line-height: 42px; color: #f9f8b5; justify-content: center; text-align: center; align-items: center;}
/* pop-dialog */
.pop-dialog-box{ position: absolute; left: 50%; transform: translate3d(-50%,0,0); width: 1098px; height: 369px; top: 440px;}
#dialog-item-wrap{ position: relative; width: 100%; height: 100%;}
.dialog-item{ display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

.speaker-A{ position: absolute; left: -244px; top: -412px;}
.speaker-B{ position: absolute; left: -95px; top: -375px;}
.speaker-C{ position: absolute; left: -89px; top: -369px;}
.speaker-D{ position: absolute; left: 632px; top: -387px;}
.speaker-E{ position: absolute; left: -187px; top: -410px;}
.speaker-F{ position: absolute; left: -157px; top: -515px;}
.speaker-G{ position: absolute; left: -92px; top: -409px;}


.dialog-cont-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/dialog-bg.png);}
.dialog-cont{ display: flex; position: absolute; left: 167px; top: 5px; width: 776px; height: 250px; font-size: 22px; line-height: 36px; color: #c6d6e9; align-items: center; justify-content: center; text-align: center;}

#btn-next,#btn-sub-question{ position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: 256px;}
/* pop-question */
#pop-question .pop-dialog-box{ background: url(../images/dialog-bg.png);}
.tag-question{ position: absolute; left: 58px; top: -64px;}
.question-box{ position: absolute; left: 167px; top: 40px; width: 776px; height: 215px;}
#question-t{ font-size: 22px; line-height: 36px; color: #c6d6e9;}
#answer-list{ width: 776px; margin-top: 20px; overflow: hidden;}
#answer-list li{ float: left; width: 194px; height: 24px; padding-left: 30px; box-sizing: border-box; margin-bottom: 12px; font-size: 22px; line-height: 24px; color: #ffe699; background: url(../images/icon-choise.png) 0 0 no-repeat; cursor: pointer;}
#answer-list li.on{ background: url(../images/icon-choise-on.png) 0 0 no-repeat;}
/* pop-video */
.pop-vide-cont{ position: absolute; width: 1030px; height: 579px; left: 50%; top: 50%; margin-left: -515px; margin-top: -290px;}
.close-video{ position:absolute; width: 50px; height: 50px; right:-56px; top:0px; background:url(../images/icon-close.png); cursor:pointer;}
.pop-vide-cont video{ width: 100%; height: 100%; background-color: #000;}
/* 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-day-item{ display: none;}
.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);}
.prize-list li span.btn-error{ background: url(../images/btn-error.png);}
/* pop-bind */
.form-line-box select{ float: right; width: 230px; height: 33px;  padding: 0 10px; box-sizing: border-box; font-size: 18px; line-height: 33px; background-color: #eeece9; border: 1px solid #757678;}
.bind-tip{ width: 400px; height: 48px; margin: 0 auto; font-size: 15px; line-height: 18px; color: #cacaca; text-align: center;}

/* animation */
.ani-zhuan{ animation: key-zhuan 10s linear infinite;}
@keyframes key-zhuan{
    0%{ transform: rotate(0deg)}
    100%{ transform: rotate(-360deg)}
}
.ani-scale{ animation: key-scale 1s alternate infinite;}
@keyframes key-scale{
    0%{ transform: scale(1);}
    100%{ transform: scale(1.1);}
}
.ani-scaleFan{ animation: key-scaleFan 1s alternate infinite;}
@keyframes key-scaleFan{
    0%{ transform: scale(1);}
    100%{ transform: scale(0.92);}
}
.ani-opa{ animation: key-opa 0.5s linear alternate infinite;}
@keyframes key-opa{
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}
.ani-floatScale{ animation: key-floatScale 2s linear alternate infinite;}
@keyframes key-floatScale{
    0%{ transform: translate3d(0,0,0) scale(1);}
    100%{ transform: translate3d(20px,-20px,0) scale(1.2);}
}
.ani-float{ animation: key-float 1s linear alternate infinite; }
@keyframes key-float{
    0%{ transform: translate3d(0,0,0);}
    100%{ transform: translate3d(0,-10px,0);}
}
.ani-floatFan{ animation: key-floatFan 1s linear alternate infinite; }
@keyframes key-floatFan{
    0%{ transform: translate3d(0,0,0);}
    100%{ transform: translate3d(0,10px,0);}
}
.ani-rotate{ animation: key-rotate 2s linear alternate infinite;}
@keyframes key-rotate{
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(-5deg);}
}