
#allBox{
	max-width:500px;height:100%;position:relative;top:0;left:0;margin: auto;
}
#page1,#page2,#page3,#page4,#page5,#page6,#page7{height:100%;width:100%;position:relative;top:0;left:0;}
#swiperBox{width:100%;height:100%;}
#scrollBox{width:100%;height:100%;}

.titleImg{position:absolute;top:0;left:0;width:100%;height:100%;background-color:black;}
.titleImg1{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../image/1.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:100% 100%;}
.titleImg2{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../image/2.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:100% 100%;}
.titleImg4{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../image/4.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:100% 100%;}
.titleImg3{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../image/3.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:100% 100%;}
#videoCover4{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../image/4cover.jpg);background-size:100% 100%;}
.videoCover3{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../image/3cover.jpg);background-size:100% 100%;}
.arrow{position:absolute;top:90%;left:45%;width:10%;z-index:2;}
.fadeOutUp {
    -webkit-animation: 2s fadeOutUp ease-in-out infinite;
    animation: 2s fadeOutUp ease-in-out infinite;}
@-webkit-keyframes fadeOutUp{
	0%{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px);}
	50%{opacity:0.3;-webkit-transform:translateY(-20px);transform:translateY(-20px);}
}
@keyframes fadeOutUp{
	0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
	50%{opacity:0.3;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);}
}
.videoClass{position:absolute;top:0;left:0;width:100%;height:100%;display:block;background:black;}
.title{text-align:center;font-size:0.4rem;position:relative;top:60%;left:0;width:100%;color:#fff;}
.detail{text-align:center;font-size:0.25rem;position:relative;top:70%;left:5%;width:90%;color:#fff;}
.test{-webkit-animation: test .7s ease both;
	animation: test 0.7s ease both;}
@-webkit-keyframes test{
	from{opacity: 0; -webkit-transform:scale(0.1,0.1);}
	to{opacity: 1; -webkit-transform: scale(1,1);}
}
@keyframes test{
	from{opacity: 0; transform:scale(0.1,0.1);}
	to{opacity: 1; transform: scale(1,1);}
}