@charset "gb2312";
* {margin:0;padding:0;border:0;-webkit-user-select:text}
a,img {-webkit-touch-callout:none;}
body,p {margin: 0;}
img{border: none;pointer-events: none;}
body,html {height: 100%;overflow: hidden;}
.writing p{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout: none;}

.wrap{width: 100%;height: 100%;overflow: hidden;}
.page{width: 100%;height: 100%;overflow: hidden;position: absolute;left: 0;top: 0;}
.load{z-index: 1000;background: url(../images/bg.jpg) center top / cover no-repeat;background-size: 100% 100%;}
.goglogo{position: absolute;width: 5rem;left: .7rem;top: 20%;}
.goglogo img{width: 5rem;height: auto;}
.progress{position: absolute;top: 50%;width: 100%;text-align: center;font-size: .26rem;}
.title{background: url(../images/title.png);width: 4.09rem;height: 6.47rem;background-size: 100% 100%;opacity: 0;position: absolute;top: 5%;left: 0.975rem;}
.back.on .title{animation: title 1s ease-in forwards;-webkit-animation: title 1s ease-in forwards;}
.start{background: url(../images/dian.png) top center no-repeat;height: .5rem;width: .5rem;position: absolute;background-size: 100% 100%;left: 4.9rem;top: 40%;-webkit-animation: dian .8s infinite linear; animation: dian .8s infinite linear;cursor: pointer;}

.pc_bg{width: 100%;height: 100%;overflow: hidden;position: fixed;z-index: 10000;left: 0;top: 0;bottom: 0;right: 0;background: #000;display: none;}
.pc_bg .code{width: 230px;height: 230px;display: block;margin: 10% auto 30px;background: #fff;padding: 10px;}
.pc_bg:after{content:'为了更好的体验，请使用手机扫描二维码浏览';display:block;color:#fff;text-align:center;font-size:20px;}

.swiper-slide{overflow: hidden;}
.swiper-container{overflow: hidden;}
.swiper-button-next{background: url(../images/next.png);width: 1rem;height: .61rem;background-size: 100% 100%;top: 8.7%;left: 50%;margin-left: -.35rem;animation: prev 1s linear infinite; -webkit-: prev 1s linear infinite;outline: none;}
.timeDiv img{width: 100%;height: auto;}
.swiper-slide img{width: 6.4rem;}
.swiper-slide img.down{position: absolute;left: 0;bottom: 0;}

.swiper-slide-active .up{-webkit-animation:leftIn 1s linear forwards;animation:leftIn 1s linear forwards;}
.swiper-slide-active .down{-webkit-animation:rightIn 1s linear forwards;animation:rightIn 1s linear forwards;}

.swiper-slide{background: url(../images/last.png) center top / cover no-repeat;background-size: 100% 100%;}
.swiper-slide-last img{width: 5rem;}
.swiper-slide-last p{font-size: .4rem;width: 6.4rem;text-align: center;position: absolute;left: 0;top: 50%;}

.music{width:.5rem; height: .5rem;overflow: hidden;background: transparent url(../images/music.png) 0 0 no-repeat;background-size: 100% auto;vertical-align: top;position:fixed; right:.2rem; top:.2rem;z-index:102;}
.music.on{background-position: 0 bottom;-webkit-animation: rolling 2s linear infinite;animation: rolling 2s linear infinite;}

@-webkit-keyframes rolling{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(-360deg);}
}
@keyframes rolling{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(-360deg);}
}

@-webkit-keyframes title {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2rem); 
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0); 
	}
}

@keyframes title {
	0% {
		opacity: 0;
		transform: translateY(-2rem); 
	}
	100% {
		opacity: 1;
		transform: translateY(0); 
	}
}

@-webkit-keyframes dian {
	0% { -webkit-transform: scale(1, 1);}
	100% { -webkit-transform: scale(2, 2);}
}
@keyframes dian {
	0% { transform: scale(1, 1);}
	100% { transform: scale(2, 2);}
}

@keyframes prev {
    0% { transform: translateY(1rem);opacity: 1;}
    100% { transform: translateY(0);opacity: 0;}
}

@-webkit-keyframes prev {
    0% { -webkit-transform: translateY(1rem);opacity: 1;}
    100% { -webkit-transform: translateY(0);opacity: 0;}
}

@keyframes leftIn {
    0% { transform: translateX(-5rem);opacity: 0;}
    100% { transform: translateX(0);opacity: 1;}
}

@-webkit-keyframes leftIn {
    0% { -webkit-transform: translateX(-5rem);opacity: 0;}
    100% { -webkit-transform: translateX(0);opacity: 1;}
}

@keyframes rightIn {
    0% { transform: translateX(5rem);opacity: 0;}
    100% { transform: translateX(0);opacity: 1;}
}

@-webkit-keyframes rightIn {
    0% { -webkit-transform: translateX(5rem);opacity: 0;}
    100% { -webkit-transform: translateX(0);opacity: 1;}
}