/* 星星 */
.star_box{
    position: relative;
    width:100%;
    display: block;
}
.star {
    position: absolute;
    background: url(../images/step4_part2_star1.png) no-repeat;
    /*background-size: contain;*/
    overflow: hidden;
    display: block;
}

.star.star-1 {
    width: 50px;
    height: 34px;
    top: 110px;
    left: 97px;
}

.star.star-2 {
    width: 83px;
    height: 77px;
    top: 18px;
    left: 184px;
}

.star.star-3 {
    width: 74px;
    height: 70px;
    top: 115px;
    left: 172px;
}

.star.star-4 {
    width: 68px;
    height: 70px;
    top: 46px;
    left: 162px;
}

.star.famous-1 {
    width: 50px;
    height: 34px;
    top: 70px;
    left: 107px;
}
.star.famous-2 {
    width: 83px;
    height: 77px;
    top: 18px;
    left: 184px;
}
.star.famous-3 {
    width: 74px;
    height: 70px;
    top: 100px;
    left: 252px;
}

.star.gstar-1 {
    width: 50px;
    height: 34px;
    top: 0px;
    left: 217px;
    z-index:120;
}

.star.gstar-2 {
    width: 83px;
    height: 77px;
    top: 98px;
    left: 234px;
    z-index:120;
}

.star.gstar-3 {
    width: 74px;
    height: 70px;
    top: 145px;
    left: 382px;
    z-index:120;
}

.star.gstar-4 {
    width: 68px;
    height: 70px;
    top: 326px;
    left: 162px;
    z-index:120;
}

.star.xstar-1 {
    width: 50px;
    height: 34px;
    top: 360px;
    left: 27px;
    z-index:120;
}

.star.xstar-2 {
    width: 83px;
    height: 77px;
    top: 68px;
    left: 64px;
    z-index:120;
}

.star.xstar-3 {
    width: 74px;
    height: 70px;
    top: 145px;
    left: 182px;
    z-index:120;
}

.star.xstar-4 {
    width: 68px;
    height: 70px;
    top: 306px;
    left: 202px;
    z-index:120;
}

/** 星星 end **/

/* 眨眼 */
@-webkit-keyframes play-png {
    to {
        background-position: 100%;
    }
}

@keyframes play-png {
    to {
        background-position: 100%;
    }
}
/* 長鬍子 */
@-webkit-keyframes play-png2 {
    to {
        background-position: 100%;
    }
}

@keyframes play-png2 {
    to {
        background-position: 100%;
    }
}
/* 眨眼速度調整 */
.play-png {
    -webkit-animation-name: play-png;
    animation-name: play-png;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
/* 長鬍子速度調整 */
.play-png2 {
    -webkit-animation-name: play-png2;
    animation-name: play-png2;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
	-webkit-animation-play-state:paused;
	animation-play-state:pasued;
}
.twinkle {
    height: 157px;
    width: 160px;
    background: url(../images/step4_part3_flash.png);
    -webkit-animation-timing-function: steps(9);
    animation-timing-function: steps(9);
    top:10px;
    position: relative;
    margin:0 auto;
}
.hair {
    height: 356px;
    width: 165px;
    background: url(../images/step4_part4_flash_2.png);
    -webkit-animation-timing-function: steps(8,start);
    animation-timing-function: steps(8,start);
    top:0px;
    position: relative;
    margin:0 auto;
}
/** 眨眼 end **/
@media screen and (min-width: 768px) and (max-width: 1169px) {
    .star_box{
        position: relative;
        left:-50px;
    } 
    .twinkle {
        height: 157px;
        width: 160px;
        background: url(../images/step4_part3_flash.png);
        -webkit-animation-timing-function: steps(9);
        animation-timing-function: steps(9);
        top:10px;
        position: relative;
        margin:0 auto;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    .star_box{
        position: relative;
        left:150px;
    } 
}
@media screen and (max-width: 599px) {
    .star_box{
        position: relative;
        left:50px;
    } 
}
@media screen and (max-width: 330px) {
    .star_box{
        position: relative;
        left:0px;
    } 
}