*{margin:0;padding:0}
li,ul{list-style:none}
em,i{font-style:normal}
a,a:active,a:hover,a:link,a:visited{text-decoration:none}
img{vertical-align:top;border:none}
h1,h2,h3,h4,h5,h6{font-weight:400;font-size:100%}
input{outline:0}
.clearfix:after{visibility:hidden;content:'';height:0;clear:both}
html{font-size:62.5%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;-webkit-tap-highlight-color:transparent}
body{font-family:"Microsoft YaHei",Helvetica,Georgia,Arial,sans-serif;color:#000;font-size:3rem;background-color: #7045bf;}
#wrap1,#wrap2{position: relative; width: 75rem; height: 120.3rem; overflow: hidden;}
#wrap1{background: url("images/bg-wrap1.jpg") no-repeat top center;}
#wrap2{background: url("images/bg-wrap2.jpg") no-repeat top center;}
#wrap1 .btn-share{display: block; position: absolute; left: 50%; top:98rem; width: 33.7rem; height: 8.8rem; margin-left: -16.85rem;}
#wrap1 .words-share{position: absolute; top:77.6rem; left: 50%; width: 44.2rem; height: 19rem; margin-left: -22.1rem; color: #fff; text-align: center; line-height: 1.6em;}
em.yellow{color: #ffd52b;}
.img-roles{position: absolute; top:40.4rem; left: 50%; width: 75rem; height: 38.1rem; margin-left: -37.5rem; animation: RoleAni 1s ease-in-out infinite alternate; -webkit-animation: RoleAni 1s ease-in-out infinite alternate;}
@-webkit-keyframes RoleAni{to{-webkit-transform: translateY(-1rem);}}
@keyframes RoleAni{to{transform: translateY(-1rem);}}
.overlay,.popup{display: none;}
.overlay{position: absolute; top:0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: #000; opacity: .8;}
.popup{position: absolute; top:0; left: 50%; z-index: 20;}
.popup-share{width: 75rem; height: 70rem; margin-left: -37.5rem;}
.popup-share .words{position: absolute; left: 0; top:12rem; width: 75rem; height: 55.9rem;}
.popup-share .img-arrow{position: absolute; right: 5rem; top:2.5rem; width: 18.1rem; height: 9.4rem; animation: ArrowAni .5s ease-in-out infinite alternate; -webkit-animation: ArrowAni .5s ease-in-out infinite alternate;}
@-webkit-keyframes ArrowAni{to{-webkit-transform: translate(2rem,-1rem);}}
@keyframes ArrowAni{to{transform: translate(2rem,-1rem);}}
.popup-prize{top:50%; width: 58rem; height: 57.8rem; margin-left: -29rem; margin-top: -29rem; background-color: #7004ea; border-radius: 2rem;}
.popup-prize .btn-close{display: block; position: absolute; top:-1.2rem; right:-1.2rem; width: 5.8rem; height: 5.8rem; background: url("images/btn-close.png") no-repeat;}
.popup-prize article{color: #fff; text-align: center; line-height: 1.75em;}
.popup-prize h5{font-weight: bold; font-size: 3.7rem; color: #ffcd29; margin-top: 2rem;}
.popup-prize .prize-code{width: 43.3rem; height: 7rem; background-color: #fff; color: #000; border-radius: 4rem; margin: 2rem auto; line-height: 7rem;}
.popup-prize em.yellow{text-decoration: underline;}
.popup-prize .btn-ok{display: block; position: absolute; left: 50%; bottom: 2.7rem; width: 33.7rem; height: 8.8rem; margin-left: -16.85rem; background: url("images/btn-ok.png") no-repeat;}
#wrap2 .btn-download{display: block; position: absolute; left: 50%; top:96rem; width: 34rem; height: 8.8rem; margin-left: -17rem;}
#wrap2 .btn-homepage{display: block; position: absolute; right: 3rem; top:96.5rem; width: 8.6rem; height: 8.6rem;}
#wrap2 .avatar{position: absolute; left: 4.2rem; top:76rem; width: 19.2rem; height: 19.2rem; background-color: #fff; border-radius: 10rem; box-shadow: 1rem 1rem 1rem #000;}
#wrap2 .chat{position: absolute; top:68rem; right: 0; width: 50rem; height: 30.7rem; background: url("images/bg-chat.png") no-repeat; text-align: center;}
#wrap2 .chat div{width: 38.4rem; margin-left: 10rem; margin-top: 7rem;}
.l-bar, .r-bar{position:absolute; transform-origin:40% 50%; -webkit-transform-origin:40% 50%; animation:BarAni .5s infinite alternate linear; -webkit-animation:BarAni .5s infinite alternate linear;}
.r-bar{top:24.6rem; right:6.4rem; width:20.1rem; height:15.4rem;}
.l-bar{top:25.2rem; left:4.1rem; width:19.5rem; height:16.1rem;}
.slogan{position:absolute; width:75rem; height:37.6rem; left:0; top:7.4rem; z-index:1;}
@keyframes BarAni{0%{transform: rotate(5deg);} 50%{transform: rotate(0deg);} 100%{transform: rotate(-5deg);}}
@-webkit-keyframes BarAni{0%{-webkit-transform: rotate(5deg);} 50%{-webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(-5deg);}}