body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
li{list-style:none}
a,a:hover{text-decoration:none;color:#ffe400;}
html,body{ height: 100%;}
body{line-height:1.5;font-size:12px;font-family:"hiragino sans gb",Arial;color:#fff;-webkit-tap-highlight-color:rgba(0,0,0,0)} 
.wrap{position:relative;color:#fff; height: 100%; overflow: hidden;}
.hide {display: none;}
/*椤甸潰鍔犺浇鎻愮ず*/
.mod_loading{position:absolute;height:100%;left:0;top:0;width:100%;z-index:100;background-color:#b9ccd5;display:-webkit-box;-webkit-box-align:center;}
.mod_loading .content{ text-align:center;-webkit-box-flex:1;margin:0 80px;}
.mod_loading .content .progress{height:13px;padding:2px;-webkit-border-radius:17px;border-radius:17px;background-color:#242a39;}
.mod_loading .content .progress span{display:block;height:13px;-webkit-border-radius:13px;border-radius:13px;background-color:#65cfd5;}
.mod_loading .content p{line-height:34px;color:#5f696a;}
/*婊戝潡*/
.slider {position: absolute;width: 36px;height: 36px;margin-left: -18px;left: 50%;bottom: 10px;z-index: 9999;}
.slider span {position: absolute;width: 24px;height: 35px;left: 50%;top: 50%;margin: -17px 0 0 -12px;background-position: -158px -46px;-webkit-animation: slide_up 2s infinite ease-out;}
.item, .item .box {width: 100%;height: 100%;overflow: hidden;}

@-webkit-keyframes slide_up {
    0%,30%{opacity: 0;-webkit-transform: translate3d(0,10px,0);}
    60% {opacity: 1;-webkit-transform: translate3d(0,0,0);}
    100% {opacity: 0;-webkit-transform: translate3d(0,-8px,0);}
}

.item-1 {background: #048599;}
.item-2 {background: #349b66;}
.item-3 {background: #e05365;}
.item-4 {background: #44a7cb;}
.item-5 {background: #fc9590;}
.item-6 {background: #d487b4;}
.item-7 {background: #f3f1bb url(img/item_7_bg.jpg) no-repeat;background-size: cover;}
.item-8 {background: #f3d2ac;}

/*common*/
.mod_container {position: absolute;left: 50%;top: 50%;margin-top: -36px;-webkit-transform: translate3d(-50%, -50%, 0);-webkit-backface-visibility:hidden;z-index: 2;}
.sprite_global {background-image: url(img/sprite_global.png);background-repeat: no-repeat;}
.item .sprite {background-repeat: no-repeat;-webkit-transform: translate3d(0, 200px, 0);opacity: 0;}
.item .text_2 {margin: 10px 20px 20px;}
.item .scene {margin: 10px auto;}
.item.play .sprite {opacity: 1;-webkit-transform: translate3d(0, 0, 0);}
.item.play .text_1 {-webkit-transition: all 1s ease-out;}
.item.play .text_2 {-webkit-transition: all 1s .3s ease-out;}
.item.play .scene {-webkit-transition: all 1s .6s ease-out;}

.btn_play, .btn_pause {position: absolute;right: 10px;top: 10px;width: 34px;height: 34px;z-index: 100;}
.btn_play {background-position: -107px -51px; }
.btn_pause {background-position: -60px -51px; }
.btn_play i, .btn_pause i {position: absolute;left: 50%;top: 50%;width: 14px;height: 30px;margin: -22px 0 0 -7px;background-position: -4px 0; }
.btn_play i {-webkit-animation: play_sate 4s infinite;}

/* item-1 */
.item-1 .sprite {background-image: url(img/sprite_1.png);}
.item-1 .text_1 {width: 108px;height: 20px;background-position: -23px 0;}
.item-1 .text_2 {width: 204px;height: 24px;background-position: -45px -23px;}
.item-1 .scene {width: 252px;height: 260px;background-position: 0 -66px;}
.item-1 .text_3 {position: absolute;left: 25px;bottom: 0;width: 50px;height: 24px;background-position: -124px 0;opacity: 0;}
.item-1 .text_4 {position: absolute;right: 20px;top: 90px;width: 39px;height: 29px;background-position: -183px 0;opacity: 0;}
.item-1 .text_5 {position: absolute;right: -14px;bottom: 70px;width: 45px;height: 27px;background-position: -239px 0;opacity: 0;}

.item-1.play .text_3 {-webkit-animation: micro_fade_down .6s 1s ease-out both;}
.item-1.play .text_4 {-webkit-animation: micro_fade_down .6s 1.2s ease-out both;}
.item-1.play .text_5 {-webkit-animation: micro_fade_down .6s 1.4s ease-out both;}

/* item-2 */
.item-2 .sprite {background-image: url(img/sprite_2.png);}
.item-2 .text_1 {width: 96px;height: 26px;background-position: -23px 0;}
.item-2 .text_2 {width: 146px;height: 24px;background-position: -60px -27px;}
.item-2 .scene {width: 253px;height: 264px;background-position: 0 -74px;}

/* item-3 */
.item-3 .sprite {background-image: url(img/sprite_3.png);}
.item-3 .text_1 {width: 93px;height: 24px;background-position: -23px 0;}
.item-3 .text_2 {width: 178px;height: 20px;background-position: -51px -27px;}
.item-3 .scene {width: 253px;height: 264px;background-position: 0 -74px;}

/* item-4 */
.item-4 .sprite {background-image: url(img/sprite_4.png);}
.item-4 .text_1 {width: 94px;height: 24px;background-position: 0 0;}
.item-4 .text_2 {width: 248px;height: 26px;background-position: -20px -30px;}
.item-4 .scene {position: relative;width: 266px;height: 256px;background-position: 0 -69px;}
.item-4 .scene i {position: absolute;opacity: 0;}
.item-4 .scene i:nth-child(1) {left: 85px;top: 100px;width: 11px;height: 18px;background-position: -253px -70px;}
.item-4 .scene i:nth-child(2) {left: 80px;top: 100px;width: 17px;height: 13px;background-position: -235px -41px;}
.item-4 .scene i:nth-child(3) {left: 69px;top: 100px;width: 28px;height: 22px;background-position: -262px -39px;}
.item-4 .desk {position: absolute;bottom: 10px;right: 50px;width: 61px;height: 97px;background-position: -293px 0;opacity: 0;-webkit-transform: translate3d(50px, 0, 0);}

.item-4.play i:nth-child(1) {-webkit-animation: music_1 1.5s 1.6s ease-in infinite;}
.item-4.play i:nth-child(2) {-webkit-animation: music_2 1.5s 2s ease-in infinite;}
.item-4.play i:nth-child(3) {-webkit-animation: music_3 1.5s 1.8s ease-out infinite;}
.item-4.play .desk {opacity: 1;-webkit-transform: translate3d(0, 0, 0);-webkit-transition: all .6s 1.6s ease-out;}

/* item-5 */
.item-5 .sprite {background-image: url(img/sprite_5.png);}
.item-5 .text_1 {width: 94px;height: 24px;background-position: 0 0;}
.item-5 .text_2 {width: 230px;height: 22px;background-position: -26px -30px;}
.item-5 .scene {position: relative;width: 255px;height: 256px;background-position: 0 -64px;z-index: 2;}
.item-5 .scene i {position: absolute;opacity: 0;}
.item-5 .scene i:nth-child(2) {left: 115px;top: 90px;width: 30px;height: 27px;background-position: -194px -39px;}
.item-5 .scene i:nth-child(3) {left: 115px;top: 90px;width: 25px;height: 21px;background-position: -188px -68px;}
.item-5 .scene i:nth-child(4) {left: 120px;top: 90px;width: 19px;height: 17px;background-position: -219px -72px;}
.item-5 .icon_zone {position: absolute;left: 109px;top: 112px;width: 44px;height: 43px;background-position: 0 -50px;z-index: 100;opacity: 0;}

.item-5.play .icon_zone {opacity: 1;-webkit-transform: perspective(400px) rotateY(360deg);-webkit-transition: all .7s 1.6s ease;} 
.item-5.play i:nth-child(2) {-webkit-animation: music_4 1.3s 1.2s ease-out infinite;}
.item-5.play i:nth-child(3) {-webkit-animation: music_5 1.3s 1.6s ease-out infinite;}
.item-5.play i:nth-child(4) {-webkit-animation: music_6 1.3s 2s ease-out infinite;}

/* item-6 */
.item-6 .sprite {background-image: url(img/sprite_6.png);}
.item-6 .text_1 {width: 104px;height: 24px;background-position: 0 0;}
.item-6 .text_2 {width: 228px;height: 22px;background-position: -23px -32px;}
.item-6 .scene {width: 251px;height: 247px;background-position: 0 -64px;}
.item-6 .text_3 {margin: 20px auto 0;color: #8d466f;text-align: center;line-height: 1.6;-webkit-transform: translate3d(0, 200px, 0);opacity: 0;}
.item-6 .boy_girl {position: absolute;top: 110px;left: 55px;width: 145px;height: 209px;background: url(img/boy_girl.png) no-repeat;background-size: cover;-webkit-transform: translate3d(0, -60px, 0);opacity: 0;}

.item-6.play .text_3 {-webkit-transform: translate3d(0, 0, 0);opacity: 1;-webkit-transition: all 1s .9s ease-out;}
.item-6.play .boy_girl {-webkit-transform: translate3d(0, 0, 0);opacity: 1;-webkit-transition: all .6s 1.6s ease-out;} 

/* item-7 */
.item-7 .sprite {background-image: url(img/sprite_7.png);}
.item-7 .text_1 {margin: 0 auto;width: 132px;height: 36px;background-position: -66px 0;}
.item-7 .text_2 {width: 262px;height: 40px;background-position: 0 -41px;}
.item-7 .scene {position: relative;width: 245px;height: 179px;background-position: -8px -103px;}
.item-7 .scene img {position: absolute;}
.item-7 .scene img:nth-child(1) {left: 8px;top: 1px;width: 218px;}
.item-7 .scene img:nth-child(2) {left: 12px;top: 57px;width: 100px;}
.item-7 .scene img:nth-child(3) {left: 83px;top: 56px;width: 79px;}
.item-7 .scene img:nth-child(4) {left: 148px;top: 60px;width: 85px;opacity: 0;}
.item-7 .btn_open_vip {display: block;padding: 5px 0;margin: 5px 30px 0;background: #0e9d4b;color: #fff;font-size: 20px;text-align: center;border-radius: 20px;opacity: 0;-webkit-transform: translate3d(0, 200px, 0);}
.item-7 .scene .tips_1 {position: absolute;left: 84px;top: -36px;width: 77px;height: 44px;background: url(img/tips_1.png) no-repeat;background-size: cover;opacity: 0;}
.item-7 .scene .tips_2 {position: absolute;left: -1px;bottom: 36px;width: 80px;height: 40px;background: url(img/tips_2.png) no-repeat;background-size: cover;opacity: 0;}

.item-7.play .btn_open_vip {opacity: 1;-webkit-transform: translate3d(0, 0, 0);-webkit-transition: all 1s .9s ease-out;}
.item-7.play .scene img:nth-child(1) {-webkit-animation:ScalingLeft 0.2s 1.1s ease both;}
.item-7.play .scene img:nth-child(2) {-webkit-animation:ScalingLeft 0.2s 1.3s ease both;}
.item-7.play .scene img:nth-child(3) {-webkit-animation:ScalingRight 0.2s 1.5s ease both;}
.item-7.play .scene img:nth-child(4) {opacity: 1;-webkit-transition: opacity .6s 1.7s ease-in-out;-webkit-animation: bounce 2s 1.7s ease infinite;}
.item-7.play .scene .tips_1 {opacity: 1;-webkit-transition: opacity .6s 2.2s ease-in-out;}
.item-7.play .scene .tips_2 {opacity: 1;-webkit-transition: opacity .6s 2.8s ease-in-out;}


/* item-8 */
.item-8 .music_logo {position: absolute;left: 10px;top: 10px;width: 88px;height: 26px;background-position: -28px 0;opacity: 0;}
.item-8 .text_1 {margin-top: 40px;font-size: 20px;color: #af6403;text-align: center;}
.item-8 .text_1 strong {font-weight: bolder;font-size: 24px;}
.item-8 .text_2 {margin: 0 20px;font-size: 18px;color: #af6403;text-align: center;}
.item-8 .scene {position: relative;margin: 0 auto;width: 213px;height: 261px;background: url(img/award_bg.png) no-repeat;background-size: 213px;}
.item-8 .scene i {position: absolute;width: 0;height: 0;right: 21px; bottom: 27px;background: url(img/gift.png) no-repeat;background-size: 178px;-webkit-transform: scale(0);}
.item-8 .btn_get_gift {display: block;padding: 5px 0;margin: 0 20px;background: #ff7800;color: #fff;font-size: 20px;text-align: center;border-radius: 20px;}
.item-8 .text_3 {margin-top: 10px;width: 100%;text-align: center;color: #af6403;}
.item-8 .anim {background-repeat: no-repeat;-webkit-transform: translate3d(0, 200px, 0);opacity: 0;}

.item-8.play .anim {opacity: 1;-webkit-transform: translate3d(0, 0, 0);}
.item-8.play .music_logo {opacity: 1}
.item-8.play .text_1 {-webkit-transition: all 1s ease-out;}
.item-8.play .text_2 {-webkit-transition: all 1s .3s ease-out;}
.item-8.play .scene {-webkit-transition: all 1s .6s ease-out;}
.item-8.play .btn_get_gift {-webkit-transition: all 1s .9s ease-out;}
.item-8.play .text_3 {-webkit-transition: all 1s 1.2s ease-out;}
.item-8.play .scene i {width: 178px;height: 220px;-webkit-transform: scale(1);-webkit-transition: all .5s 2.2s ease-out;}

@media screen and (max-height: 425px) {
    .mod_container {-webkit-transform: translate3d(-50%, -50%, 0) scale(.85);margin-top: -25px;}
    .item .mod_container {margin-top: -10px;}
    .item-6 .text_2 {margin: 8px 20px 0;}
    .item-8 .scene {margin: -25px auto;}
    .item-8.play .anim {-webkit-transform: translate3d(0, 0, 0) scale(.9);}
    .item-8 .text_1, .item-8 .text_2, .item-8 .btn_get_gift {font-size: 16px;}
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, only screen and (min-resolution: 240dpi) {
    .sprite_global {background-image: url(img/sprite_global@2x.png);background-size: 355px;}
	.item-1 .sprite {background-image: url(img/sprite_1@2x.png);background-size: 253px;}
	.item-2 .sprite {background-image: url(img/sprite_2@2x.png);background-size: 253px;}
	.item-3 .sprite {background-image: url(img/sprite_3@2x.png);background-size: 253px;}
	.item-4 .sprite {background-image: url(img/sprite_4@2x.png);background-size: 266px;}
	.item-5 .sprite {background-image: url(img/sprite_5@2x.png);background-size: 255px;}
	.item-6 .sprite {background-image: url(img/sprite_6@2x.png);background-size: 251px;}
    .item-7 .sprite {background-image: url(img/sprite_7@2x.png);background-size: 252px;}
}



@-webkit-keyframes play_sate {
    0%{-webkit-transform: perspective(400px) rotateY(0);}
    100% {-webkit-transform: perspective(400px) rotateY(360deg);}
}

@-webkit-keyframes micro_fade_down {
    0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);}
    100%{opacity:1;-webkit-transform:translate3d(0,0,0);}
}

@-webkit-keyframes music_1 {
    0%{opacity: 0;-webkit-transform: translate3d(0, 0, 0);}
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: translate3d(-50px, -50px, 0);}
}

@-webkit-keyframes music_2 {
    0%{opacity: 0;-webkit-transform: translate3d(0, 0, 0);}
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: translate3d(40px, -10px, 0);}
}

@-webkit-keyframes music_3 {
    0%{opacity: 0;-webkit-transform: rotate(0) translate3d(0, 0, 0);}
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: rotate(-45deg) translate3d(65px, -36px, 0);}
}

@-webkit-keyframes music_4 {
    0%{opacity: 0;-webkit-transform: rotate(0)  translate3d(0, 0, 0);}
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: rotate(15deg)  translate3d(10px, -80px, 0);}
}

@-webkit-keyframes music_5 {
    0%{opacity: 0;-webkit-transform: translate3d(0, 0, 0);}
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: translate3d(-10px, -50px, 0);}
}

@-webkit-keyframes music_6 {
    0%{opacity: 0;-webkit-transform: translate3d(0, 0, 0);}
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: translate3d(0, -30px, 0);}
}

@-webkit-keyframes ScalingLeft{
    0%{opacity:0;-webkit-transform:translate(-100%,100%) scale(6);}
    100%{opacity:0.99;-webkit-transform:translate(0,0)scale(1);}
}

@-webkit-keyframes ScalingRight{
    0%{opacity:0;-webkit-transform:translate(100%,-100%) scale(6);}
    100%{opacity:0.99;-webkit-transform:translate(0,0)scale(1);}
}

@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
    40%{-webkit-transform:translateY(-10px)}
    60%{-webkit-transform:translateY(-5px)}
}/*  |xGv00|05bf464dcca1bd2d43338fd1717dff5a */