.music {
    position: absolute;
    top: 2rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    background-image: url("../images/music-stop.png");
    background-size: 3rem 3rem;
    background-position: right top;
    z-index: 9999;
}

.play {
    animation: kf-music 2s infinite linear;
    background-image: url("../images/music.png");
}

/*-------------------------------------------------*/


.loading {
    background-size: 100% 100%;
    background-position: center top;
    display: block;
}

.loading .loadingTvc{
    display: none;
}

.android .loading{
    background-image: url("../images/loading/01.jpg");
    animation: loading 3s infinite forwards linear;
    -webkit-animation: loading 3s infinite forwards linear;
    -webkit-backface-visibility: hidden;
}

.ios .loading .loadingTvc{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.loading .loadingPct {
    position: absolute;
    left: 0;
    bottom: 10rem;
    font-size: 1.5rem;
    color: #fff;
    width: 100%;
    height: 1.5rem;
    text-align: center;
}

#loadingTvc{
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/*-------------------------------------------------*/

.index{
    background-image: url("../images/index/bg.jpg");
}

.index > div{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.index .logo{
    width: 11.6rem;
    height: 2.8rem;
    left: 2.4rem;
    top: 3rem;
    background-image: url("../images/index/logo.png");
	z-index: 999;
}

.index .icebox{
    background-image: url("../images/index/01.png");
    width: 37.5rem;
    height: 60.3rem;
}

.index .fissurate{
    animation: fissurate 1 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.index .inner{
    background-position: center center;
    background-size: auto 100%;
    width: 100%;
    height: 100%;
}

.index .title{
    height: 6.3rem;
    top: 9rem;
}

.index .title .inner{
    background-image: url("../images/index/title.png");
}

.index .text{
    width: 100%;
    height: 7.9rem;
    margin-top: 24rem;
    display: inline-block;
    animation-delay: 1s;
}
.index .text .inner{
    background-image: url("../images/index/text.png");
    background-position: left 7.5rem center;
}

.index .front{
    background-image: url("../images/index/front.png");
}

.index .mask{
    background-image: url("../images/index/mask.png");
}

.index .button{
    top: auto;
    bottom: 11rem;
    height: 5.6rem;
    animation-delay: 1.5s;
}

.index .button .inner{
    background-image: url("../images/index/click.png");
    width: 14.8rem;
    margin-left: auto;
    margin-right: auto;
}

/*-------------------------------------------------*/

.timeTunnel{
    background-image: url("../images/time_tunnel/01.jpg");
    background-size: 100% 100%;
    background-position: center top;
    animation: timeTunnel 5s 1 forwards linear;
    -webkit-animation: timeTunnel 5s 1 forwards linear;
    -webkit-backface-visibility: hidden;
}

/*-------------------------------------------------*/

.fullView{

}

.fullView .stage{
    width: 112.5rem;
    height: 60.3rem;
    background-image: url("../images/full_view/full.jpg");
    background-size: 100% 100%;
    /*transform: translateX(-24rem);*/
    transform: translateX(-0rem);
    /*transform: translateX(-48rem);*/
}

.fullView .stage .animateParams{
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

.fullView .stage .skating_01{
    width: 18.8rem;
    height: 12.7rem;
    background-image: url("../images/full_view/skating_01.png");
    position: absolute;
    left: 10rem;
    top: 36rem;
    animation-name: skating_01;
    -webkit-animation-name: skating_01;
}
.fullView .stage .skating_02{
    width: 6.9rem;
    height: 12rem;
    background-image: url("../images/full_view/skating_02.png");
    position: absolute;
    left: 0rem;
    top: 38rem;
    animation-name: skating_02;
    -webkit-animation-name: skating_02;
}
.fullView .stage .skating_03{
    width: 21.9rem;
    height: 14.9rem;
    background-image: url("../images/full_view/skating_03.png");
    position: absolute;
    left: 4rem;
    top: 44rem;
    animation-name: skating_03;
    -webkit-animation-name: skating_03;
}
.fullView .stage .skating_04{
    width: 12rem;
    height: 11.5rem;
    background-image: url("../images/full_view/skating_04.png");
    position: absolute;
    left: 20rem;
    top: 48rem;
    animation-name: skating_04;
    -webkit-animation-name: skating_04;
}

.fullView .stage .hockey_01{
    width: 4.6rem;
    height: 8rem;
    background-image: url("../images/full_view/hockey_01.png");
    position: absolute;
    right: 37rem;
    top: 40rem;
    animation-name: hockey_01;
    -webkit-animation-name: hockey_01;
}

.fullView .stage .hockey_02{
    width: 4.6rem;
    height: 8rem;
    background-image: url("../images/full_view/hockey_01.png");
    position: absolute;
    right: 31rem;
    top: 46rem;
    animation-name: hockey_02;
    -webkit-animation-name: hockey_02;
}

.fullView .stage .hockey_03{
    width: 4.6rem;
    height: 8rem;
    background-image: url("../images/full_view/hockey_01.png");
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1);
    position: absolute;
    right: 21rem;
    top: 38rem;
    animation-name: hockey_03;
    -webkit-animation-name: hockey_03;
}

.fullView .stage .hockey_04{
    width: 4.7rem;
    height: 8rem;
    background-image: url("../images/full_view/hockey_04.png");
    position: absolute;
    right: 24rem;
    top: 46rem;
    animation-name: hockey_04;
    -webkit-animation-name: hockey_04;
}

.fullView .stage .hockey_05{
    width: 4.7rem;
    height: 8rem;
    background-image: url("../images/full_view/hockey_04.png");
    position: absolute;
    right: 10rem;
    top: 42rem;
    animation-name: hockey_05;
    -webkit-animation-name: hockey_05;
}

.fullView .stage .ball{
    width: 2rem;
    height: 2rem;
    background-image: url("../images/full_view/ball.png");
    position: absolute;
    right: 27rem;
    top: 52rem;
}


.fullView .skating{
    width: 32.8rem;
    height: 27.7rem;
    background-image: url("../images/full_view/skating.png");
    position: absolute;
    left: 1.5rem;
    top: 2rem;
    display: none;
}

.fullView .hockey{
    width: 32.8rem;
    height: 23.9rem;
    background-image: url("../images/full_view/hockey.png");
    position: absolute;
    right: 1.5rem;
    top: 4rem;
    display: none;
}

.fullView .hockeyBall{
    width: 0.1rem;
    height: 0.1rem;
    left: 17rem;
    bottom: 11rem;
    background-image: url("../images/full_view/ball.png");
    position: absolute;
    display: none;
}

.fullView .hockeyBallBig{
    animation: hockeyBallBig 1s 1 linear;
    -webkit-animation: hockeyBallBig 1s 1 linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.fullView .hockeyBallSmall{
    animation: hockeyBallSmall 1s 1 linear;
    -webkit-animation: hockeyBallSmall 1s 1 linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.fullView .tips{
    width: 100%;
    height: 1.6rem;
    position: absolute;
    left: 0;
    bottom: 3rem;
    display: none;
    background-image: url("../images/full_view/text_1.png");
    background-position: center center;
    background-size: auto 100%;
}

.fullView .tips.txt2{
    background-image: url("../images/full_view/text_2.png");
}

.fullView .buttonWrapper{
    position: absolute;
    left: 0;
    bottom: 1rem;
    width: 100%;
    height: 4.8rem;
}

.fullView .buttonWrapper .button{
    width: 4rem;
    height: 4.8rem;
    background-image: url("../images/full_view/rotate.png");
    display: none;
}


.fullView .left{
    width: 4rem;
    height: 4rem;
    background-image: url("../images/full_view/left.png");
    position: absolute;
    left: 1rem;
    bottom: 2rem;
    display: none;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

.fullView .right{
    width: 4rem;
    height: 4rem;
    background-image: url("../images/full_view/right.png");
    position: absolute;
    right: 1rem;
    bottom: 2rem;
    display: none;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}
/*-------------------------------------------------*/


.oiling{
    background-color: rgba(0,0, 0, .9);
}

.oiling > div{
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    display: none;
}

.oiling .exclamation{
    background-image: url("../images/oiling/exclamation.png");
    display: block;
}

.oiling .button{
    background-image: url("../images/oiling/button.png");
}

.oiling .refueller{
    background-image: url("../images/oiling/refueller.png");
}

.oiling .refueller .video{
    width: 30rem;
    height: 18.3rem;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 23.5rem;
    border-radius: 0.2rem;
    overflow: hidden;
    box-sizing: border-box;
}

.oiling .refueller .video .wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

.oiling .refueller .video video{
    width: 100%;
    height: 100%;
    object-fit: fill;
    background-color: #000;
}

.oiling .refueller .video .status{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.oiling .refueller .video .pause{
    background-image: url("../images/oiling/play.png");
    background-position: center center;
    background-size: 4rem 4rem;
}

/*-------------------------------------------------*/

.fault{
    background-image: url("../images/fault/01.jpg");
    background-size: auto 100%;
    background-position: center center;
    animation: fault 5s 1 forwards linear;
    -webkit-animation: fault 5s 1 forwards linear;
    -webkit-backface-visibility: hidden;
}


/*-------------------------------------------------*/

.share{
    background-image: url("../images/share/bg.png");
}

.share > div{
    background-position: center center;
    background-size: auto 100%;
    width: 100%;
}

.share .title{
    height: 2.8rem;
    background-image: url("../images/share/title.png");
    display: inline-block;
    margin-top: 5rem;
}

.share .text{
    height: 8.9rem;
    background-image: url("../images/share/text.png");
    margin-top: 2rem;
}

.share .qrcode{
    width: 13rem;
    height: 13rem;
    text-align: center;
    margin-top: 3rem;
}

.share .qrcode > img{
    width: 100%;
    height: 100%;
}

.share .tips{
    height: 4rem;
    background-image: url("../images/share/tips.png");
    margin-top: 3rem;
}

.share .touch{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

.share .btns{
    position: absolute;
    left: 0;
    bottom: 5rem;
    z-index: 2;
    width: 100%;
    height: 10rem;
}
.share .btns .retryBtn{
    width: 16.4rem;
    height: 4.5rem;
    background-image: url("../images/share/retry.png");
}
.share .btns .shareBtn{
    width: 16.4rem;
    height: 4.5rem;
    background-image: url("../images/share/share.png");
    margin-top: 0.5rem;
}

.share .shareTips{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    background-image: url("../images/share/share_tips.png");
    background-size: 16.5rem 11.4rem;
    background-position: top 2rem right 2rem;
    display: none;
}