﻿/*reset*/
@charset "utf-8";
/* CSS Document */
html,body,div,span,object,embed,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,cite,code,del,dfn,em,img,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,tbody,tfoot,thead,tr,th,td,section,article{margin:0;padding:0;-webkit-text-size-adjust:none;}
html{overflow-y:scroll; overflow-x:hidden;}
table{border-collapse:collapse; border-spacing:0;}
img{border:none;display:block;}
ul,li,ol {list-style:none;}
i,em,cite,dfn{font-style:normal;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearMargin:before{content: "";display: table;height: 0;clear: both;visibility: hidden;}
.clearfix{*display:inline-block;*zoom:100%;}
.clear{clear:both; line-height:1px; height:1px; *display:inline; font-size:1px;}
.fl{float:left;}
.fr{float:right;}
.alignL{text-align:left;}
.alignC{text-align:center;}
.alignR{text-align:right;}
.middle{vertical-align:middle;}
.relative{position:relative;}
.absolute{position:absolute;}
.none{display:none;}
.block{display:block;}
.overf{overflow:hidden;}
.center{margin:0 auto;}
:focus,a{outline:none; -moz-outline-style:none;}
a:visited{text-decoration:none;}
a:hover {text-decoration:none;}
.yellow{color:#fff954;}
@font-face {font-family:"font";src:url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/font.TTF);}
body{font:14px/1.6 "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",tahoma,Arial; color:#fff;background-color: #2c233e;font-family:"font";}
.wrap{overflow:hidden;position:relative;width:100%;z-index: 7;min-width:1200px;height: 1000px;}
.sp,.btn-start,.btn-next,.btn-get,.btn-close,.p-btns a,.p-tit2 strong::before,.p-tit2 strong::after,.btn-sure,.btn-qx,.btn-qx-new{background-image: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/sp.png);background-repeat: no-repeat;}
.logo{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/logo.png) 0 0 no-repeat;width: 301px;height: 76px;display: block;position: absolute;left: 50px;top: 40px;z-index: 9;}
.main{width:1200px;margin:0 auto;position:relative;z-index:2;height: 1000px;}
.page{width: 100%;position: relative;height: 1000px;}
.page.opc{ animation: opc 1.5s linear forwards; -webkit-animation: opc 1.5s linear forwards; }
@keyframes opc{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.stars{position: absolute;width: 1200px;top: 0;left: 50%;margin-left: -600px;z-index: 3;}
.stars span{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/dot.png) 0 0 no-repeat;background-size: 100% 100%;width: 33px;height: 34px;display: block;position: absolute;}
.stars span:nth-child(odd){ animation: str 1.5s linear infinite; -webkit-animation: str 1.5s linear infinite; }
.stars span:nth-child(even){ animation: str 1.5s linear 1s infinite; -webkit-animation: str 1.5s linear 1s infinite; }
.stars span.str1{top: 20px;left: 60px;}
.stars span.str2{top: 35px;left: 805px;width: 20px;height: 20px;}
.stars span.str3{top: 80px;right: -40px;}
.stars span.str4{top: 330px;left: -95px;width: 25px;height: 25px;}
.stars span.str5{top: 350px;left: 110px;}
.stars span.str6{top: 410px;right: 170px;width: 20px;height: 20px;}
.stars span.str7{top: 520px;right: -100px;width: 20px;height: 20px;}
.stars span.str8{top: 750px;left: -140px;}
.stars span.str9{top: 810px;right: 50px;}
.stars span.str10{top: 45px;left: 130px;width: 15px;height: 15px;}
.stars span.str11{top: 55px;right: 160px;width: 15px;height: 15px;}
@keyframes str{
    0%,100%{ opacity: 1;  }
    50%{ opacity: 0.1; }
}
.page0{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/bg0.jpg?1) 50% 0 no-repeat;}
.page1{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/bg1.jpg?1) 50% 0 no-repeat;}
.page2{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/bg2.jpg?1) 50% 0 no-repeat;}
.page3{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/bg3.jpg?1) 50% 0 no-repeat;}
.page4{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/bg4.jpg?1) 50% 0 no-repeat;}
.page5{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/bg5.jpg?1) 50% 0 no-repeat;}
.page6{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/bg6.jpg?1) 50% 0 no-repeat;}
.quan{width: 1850px;height: 1850px;position: absolute;top: 50%;left: 50%;margin: -945px 0 0 -915px;}
.quan span{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.quan1{ background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/quan1.png) 0 0 no-repeat; animation: rota 80s linear infinite; -webkit-animation: rota 80s linear infinite; }
.quan2{ background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/quan2.png) 0 0 no-repeat; animation: rota 90s linear infinite; -webkit-animation: rota 90s linear infinite; }
.yun{display: block;position: absolute;background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/yun.png) 0 0 no-repeat;width: 1344px;height: 368px;bottom:33px;left: 160px;}
@keyframes rota{
    0%{ transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); }
    100%{ transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); }
}
.title{ animation: scaleA .8s ease both; -webkit-animation: scaleA .8s ease both; background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/title.png) 0 0 no-repeat; width: 745px; height: 272px; position: absolute; display: block; top: 159px; left: 50%; margin-left: -340px; }
.time{ position: absolute; width: 100%; text-align: center; top: 220px; left: 0; color: #4e3240; font-size: 14px; opacity: 0; animation: opc 1s linear .5s forwards; -webkit-animation: opc 1s linear .5s forwards; }
.btn-top-rule{display: block;font-size: 20px;text-decoration: underline;color: #4e3240;margin: 20px auto 0;width: 120px;text-align: center;}
.btn-box{ width: 421px; height: 83px; display: block; margin: 26px auto 0; opacity: 0; animation: showImg .5s linear 4s forwards; -webkit-animation: showImg .5s linear 4s forwards; }
.page0 .btn-box{ animation: showImg .5s linear 2s forwards; -webkit-animation: showImg .5s linear 2s forwards;}
.btn-start{width: 421px; height: 83px; display: block; animation: btn-light 1s linear infinite; -webkit-animation: btn-light 1s linear infinite;}
@keyframes scaleA{
	0%{ opacity:0; transform:scale(3,3); -webkit-transform:scale(3,3); -moz-transform:scale(3,3); -ms-transform:scale(3,3); -o-transform:scale(3,3); }
	80%{ transform:scale(.9,.9); -webkit-transform:scale(.9,.9); -moz-transform:scale(.9,.9); -ms-transform:scale(.9,.9); -o-transform:scale(.9,.9); }
	100%{ opacity:1; transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); }
}
@keyframes showImg{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.page-text{width: 680px;font-size: 16px;text-align: center;overflow: hidden;color: #4e3240;margin: 0 auto;box-sizing: border-box;padding-top: 160px;}

.page-text0{
    padding-top: 401px;
    height: 686px;
}
.page-text p{
    line-height: 52px;
}
.page-text0 p{
    line-height: 54px;
}
.text-box{
    position: relative;
    height: 0;
    overflow: hidden;
    animation: heigh0 4s linear forwards;
    -webkit-animation: heigh0 4s linear forwards;

}
.text-box strong{font-weight: normal;display: block;}
.page-text p em{color: #b21fc3;font-size: 20px;}
.mt{margin-top: 20px;}
.img-list{position: absolute;width: 100%;top: 0;left: 0;z-index: 7;}
.img-list li{display: block;position: absolute;}
.img-list li img{display: block;width: 100%;}
.float01{width: 313px;height: 203px;top: 140px;left: -129px;}
.float02{width: 266px;height: 198px;top: 374px;left: -124px;}
.float03{width: 370px;height: 219px;top: 644px;left: -144px;}
.float04{width: 351px;height: 196px;top: 163px;right: -163px;}
.float05{width: 275px;height: 149px;top: 426px;right: -132px;}
.float06{width: 305px;height: 213px;top: 658px;right: -92px;}

/*  */

.page1 .text-box{ animation: heigh1 3.5s linear forwards; -webkit-animation: heigh1 3.5s linear forwards;
}
.page1-float01{width: 171px;height: 111px;top: 422px;left: 17px;}
.page1-float02{width: 150px;height: 110px;top: 125px;right: -281px;}

.page2 .text-box{ animation: heigh2 3.5s linear forwards; -webkit-animation: heigh2 3.5s linear forwards;
}

.page3 .mt{margin-top: 34px;}
.page-text1{padding-top: 165px;}
.page-text2{padding-top: 175px;}
.page-text3{padding-top: 240px;}
.page3 .text-box{ animation: heigh3 3s linear forwards; -webkit-animation: heigh3 3s linear forwards;
}
.page3 .btn-box{ animation: showImg .5s linear 3s forwards; -webkit-animation: showImg .5s linear 3s forwards; }
.page3 .page1-float01{top: 130px;left: -159px;}
.page3 .page1-float02{top:268px;right: 62px;}

.page-text4{padding-top: 240px;}
.page4 .text-box{ animation: heigh4 3s linear forwards; -webkit-animation: heigh4 3s linear forwards;
}
.page4 .btn-box{ animation: showImg .5s linear 3s forwards; -webkit-animation: showImg .5s linear 3s forwards; }


.page5 .text-box span{display: block;color: #b41fc3;font-size: 20px;} 
.page-text5{padding-top: 200px;}
.page-text5 p{line-height: 46px;}
.page5 .text-box{ animation: heigh5 5s linear forwards; -webkit-animation: heigh5 5s linear forwards;
}
.page5 .btn-box{ animation: showImg .5s linear 5s forwards; -webkit-animation: showImg .5s linear 5s forwards; }
.page5 .page1-float01{top: 370px;left: -150px;}
.c-scroll{max-height: 100px;overflow: hidden;overflow-y: scroll;width: 400px;margin: 0 auto;}
.c-scroll::-webkit-scrollbar {width: 5px;height: 1px;}
.c-scroll::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2); background: #b41fc3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
.c-scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2); border-radius: 5px; background: #e9c286; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
@keyframes heigh0{
    0%{height: 0;}
    100%{height: 680px;}
}
@keyframes heigh1{
    0%{height: 0;}
    100%{height: 645px;}
}
@keyframes heigh2{
    0%{height: 0;}
    100%{height: 640px;}
}
@keyframes heigh3{
    0%{height: 0;}
    100%{height: 460px;}
}
@keyframes heigh4{
    0%{height: 0;}
    100%{height: 440px;}
}
@keyframes heigh5{
    0%{height: 0;}
    100%{height: 600px;}
}
@keyframes heigh6{
    0%{height: 0;}
    100%{height: 650px;}
}

.btn-next{display: block;width: 254px;height: 52px;margin: 0 auto;background-position: 0 -93px;}
.page6 .text-box{ animation: heigh6 5s linear forwards; -webkit-animation: heigh6 5s linear forwards;
}
.page6 .btn-box{ animation: showImg .5s linear 5s forwards; -webkit-animation: showImg .5s linear 5s forwards; }
.page-text6{padding-top: 170px;}
.page-text6 p{line-height: 40px;}
.page-text6 .mt{margin-top: 8px;display: block;line-height: 20px;}
.btn-get{display: block;width: 414px;height: 52px;background-position: 0 -155px;}
@keyframes btn-light{
    0% {filter: brightness(100%);}
    50% {filter: brightness(130%);}
    100% {filter: brightness(100%);}
}	
@-webkit-keyframes btn-light{
    0% {-webkit-filter: brightness(100%);}
    50% {-webkit-filter: brightness(130%);}
    100% {-webkit-filter: brightness(100%);}
}
@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.tc-mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;display: none;background: rgba(0, 0, 0, .8);}
.btn-close{position: absolute;display: block;width: 48px;height: 48px;top: -50px;right: -50px;background-position: -101px -527px;}
.pop{position: fixed;top: 50%;left: 50%;display: none;z-index: 1000;outline: none;}
.pop1{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/tc-bg.png) 0 0 no-repeat;width: 689px;height: 511px;margin: -256px 0 0 -345px;}
.btn-close{width: 42px;height: 43px;background-position: -300px -93px;position: absolute;display: block;top: -10px;right: -50px;}
.p-con{padding: 30px 10px 0;}
.p-tit{width: 100%;text-align: center;font-size: 36px;color: #873e78;line-height: 56px;}
.msg{width: 359px;height: 35px;line-height: 36px;text-align: center;font-size: 16px;margin: 12px auto 0;background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/txt-bg.png) 0 0 no-repeat;color: #281e2f;}
.p-txt1{font-size: 18px;color: #5d3845;text-align: center;margin-top: 12px;}
.i-bg{width: 100%;margin: 12px auto 0;display: block;}
.i-bg img{display: block;margin: 0 auto;}
.btn-rule{display: block;position: absolute;bottom: 35px;right: 35px;font-size: 18px;color: #281e2f;text-decoration: underline;}
.i-bg2 img{width: 100%;display: block;}
.p-txt2{width: 100%;text-align: center;font-size: 18px;color: #9c394e;margin-top: 10px;}
.p-btns{margin: 15px auto 0;width: 558px;}
.p-btns a{float: left;width: 238px;height: 77px;margin: 0 20px;}
.btn-sure{background-position: 0 -217px;}
.btn-qx{background-position: 0 -304px;}
.p-tit2 strong{position: relative;}
.p-tit2 strong::before,.p-tit2 strong::after{content: "";position: absolute;top: 50%;width: 108px;height: 23px;margin-top: -11px;display: block;}
.p-tit2 strong::before{background-position: -246px -217px;left: -115px;}
.p-tit2 strong::after{background-position: -246px -239px;right: -115px;}
.pop4{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/tc-bg4.png) 0 0 no-repeat;width: 689px;height: 650px;margin: -325px 0 0 -344px;}
.r-list{width: 550px;margin: 15px auto 0;padding-left: 15px;height: 420px;overflow: hidden;overflow-y: scroll;padding-left: 30px;padding-right: 10px;}
.r-list li{font-size: 16px;color: #9c394e;line-height: 32px;list-style: decimal;}
.btn-wx{display: block;width: 409px;height: 219px;display: block;margin: 15px auto 30px;background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/btn-wx.png) 0 0 no-repeat;}
.r-list table{width: 100%;}
.r-list td{border: 1px solid #9c394e;}
.r-list tr td:nth-child(1){width: 120px;}
.r-list::-webkit-scrollbar {width: 5px;height: 1px;}
.r-list::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2); background: #b41fc3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
.r-list::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2); border-radius: 5px; background: #e9c286; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
.pop2{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/tc-bg2.png) 0 0 no-repeat;width: 487px;height: 307px;margin: -153px 0 0 -243px;}
.pop2 .p-con{padding: 50px 10px 0;}
.pop2 .btn-sure{margin: 25px auto 0;width: 238px;height: 77px;display: block;}
.btn-qx2{margin: 25px auto 0;width: 238px;height: 77px;display: block;}
.btn-qx-new{background-position: 0 -391px;}
.gift-list{font-size: 20px;text-align: center;color: #9c394e;position: relative;margin: 20px 0;height: 230px;}
.gift-list p{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);width: 100%; }
.gift-list p span{width: 100%;display: block;}
.pop3{background: url(https://static.web.sdo.com/dn/pic/dn_20act/2010wg/tc-bg3.png) 0 0 no-repeat;width: 648px;height: 310px;margin: -155px 0 0 -324px;}
.p-con2{padding: 50px 20px 0;}
.p-con2 .p-btns{margin: 30px auto 0;}
.p-txt3{width: 100%;text-align: center;font-size: 22px;color: #9c394e;margin-top: 10px;}
.p-txt3 em{color: #b21fc3;}
.p-con2 .p-btns a{ transform: scale(.9); -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); }