@font-face {
  font-family: 'Big Caslon Medium';
  src: url('../font/BigCaslonMedium.ttf') format('truetype');
}
body{ margin:0; }
.v-main__wrap {
    flex: 1 1 auto;
    max-width: 100%;
    position: relative;
}
.main-banner {
    height: 46.8vw;
    background: #000000;
    display: flex;
    place-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 0px;
    z-index: 4;
}
.main-banner video {
    margin: auto;
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: block;
    line-height: 0;
    outline: none;
    transition: transform 1s ease-in-out 0s, opacity 0.5s ease-in-out 0s;
    opacity: 1;
}
:root {
  --animate-delay: 0.5s;
}
.logo{position:absolute;top:0vw;left:40vw;width:20vw;}
.page2{height:45vw;width:100%;background-color:#dbdbdb; background:url('../images/about-bg.png') repeat; position:relative;}
.qrcode {
	position: absolute;
    bottom: 23px;
	text-align:center;
	width:100%;
}
.qrcode img {
    width: 160px;
}
.page2 .page2_text{position:absolute;width:32vw;top:12vw;right:18vw;opacity:0;}
.page2 .page2_text img {width: 100%; position: absolute; top: 0; display: none;}
.about-logo {padding-top:10vw; float:left;}
.about-logo video { width:30vw;}
.about-box {width:80vw; margin:0 auto;}
.about-text {width:40vw; float:right; padding-top:10vw;}
.about-box .about-text img {width:35vw; }
.text-title {    font-size: 0.7rem; font-family: Visby Round CF Heavy;}
.text-desc {    font-size: 0.2rem; font-family: Visby Round CF Medium; margin-top: 2vw; line-height: 0.3rem;}

.page3{height:46vw;width:100%;background-color:#b3b3b2;position:relative;}
.page3 .page3_text{position:absolute;width:28vw;top:15vw;left:12vw;opacity:0;}
.page3 .page3_bg1{position:absolute;height:100%;right:0;top:0;}
.page3 .page3_img1{position:absolute;width:30vw;right:23vw;top:10vw;}
.page3 .page3_bg2{position:absolute;height:100%;right:0;top:0;opacity : 0;}
.page3 .page3_img2{position:absolute;width:30vw;right:26vw;top:8vw;display:none;}
.page3 .page3_bg3{position:absolute;height:100%;right:0;top:0;opacity : 0;}
.page3 .page3_img3{position:absolute;width:28vw;right:28vw;top:8vw;display:none;}
.page3 .page3_bg4{position:absolute;height:100%;right:0;top:0;opacity : 0;}
.page3 .page3_img4{position:absolute;width:32vw;right:25vw;top:8vw;display:none;}

.page4{;width:100%;background-color:#f1f1f1;position:relative; padding-bottom:5vh; overflow-x:hidden;}
.page4 .page4_text{position:absolute;width:38vw;top:8vw;left:30.5vw;opacity:0;}
.page4 .page4_img1{position:absolute;width:13vw;top:2vw;left:13vw;
	-webkit-animation: bounce-down 2s linear infinite;
	animation: bounce-down 2s linear infinite;
}
.page4 .page4_img2{position:absolute;width:24vw;bottom:2vw;left:4vw;
	-webkit-animation: bounce-down 2s linear infinite;
	animation: bounce-down 2s linear infinite;
}
.page4 .page4_img3{position:absolute;width:24vw;top:5.5vw;right:4.5vw;
	-webkit-animation: bounce-up 2s linear infinite;
	animation: bounce-up 2s linear infinite;
}

.page5{ height:47vw; width:100%;background-color:#000000;position:relative; overflow:hidden;}
.page5 .page5-text-box {display: inline-block; width: 40vw; padding: 10vw 5vw; float:left;}
.page5 .page5-text-box .text-img { width:30vw; display:block; padding-left:5vw;}
.page5 .page5-text-box .btn-img { width:10vw; padding-left: 4vw; }
.page5 .page5-video-box {float:right; width:47vw; font-size:0;}
.page5 .page5-video-box video {width:100%;}
.page6 { height:47vw;width:100%;background-color:#F8F1DD;position:relative; }
.page6 .page6_bg{width:100%;height:100%;position:absolute;bottom:0;left:0;}
.page6 .page6_text{position:absolute;width:26vw;top:16vw;right:20vw;}
.page6 .page6_img1{position:absolute;width:14vw;bottom:1vw;left:12vw;}
.page6 .page6_img2{position:absolute;width:15vw;bottom:1vw;left:32vw;}
.page6 .page6_img3{position:absolute;width:15.5vw;bottom:1vw;left:52vw;}
.page6 .page6_img4{position:absolute;width:14vw;bottom:1vw;left:72.5vw;}

@-webkit-keyframes bounce-down {
   25% {
        -webkit-transform: translateY(-5px);
   }
   50%, 100% {
        -webkit-transform: translateY(0);
   }
   75% {
        -webkit-transform: translateY(5px);
   }
}

@-webkit-keyframes bounce-up {
   25% {
        -webkit-transform: translateY(10px);
   }
   50%, 100% {
        -webkit-transform: translateY(0);
   }
   75% {
        -webkit-transform: translateY(-10px);
   }
}

@-webkit-keyframes wobble1 {

	0% { -webkit-transform: rotate(0deg);  }
	
	15% { -webkit-transform: rotate(-3deg); }
	
	30% { -webkit-transform: rotate(0deg); }
	
	45% { -webkit-transform: rotate(-3deg); }
	
	60% { -webkit-transform: rotate(1deg); }
	
	75% { -webkit-transform: rotate(-1deg); }
	
	100% { -webkit-transform: rotate(0deg); }
}
		
.footer {background:#161516; color:#ffffff; position:relative; font-size:0;}
.footer-box {
	position:absolute;
	width: 96vw;
    bottom: 0vh;
}
.footer-logo {    
	position: absolute;
    text-align: center;
    top: 10vw;
    left: 40vw;
}
.footer-logo img {
    width: 20vw;
}
.footer .icons {
    position: relative;
    text-align: center;
}
.footer .icons a {
    text-align: center;
    display: inline-block;
}
.footer .icons img {
    width: 10vw;
}
.footer .text {
    display: block;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    height: 10vh;
    line-height: 10vh;
}
.footer .text span { padding:0 10px;}
.footer .text a {
    color: #ffffff;
    text-decoration:none;
}




.rotate {
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
}
.music_off {
    background-image: url(../images/normalmusic.svg);
    background-size: contain;
}
@keyframes rotating {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
#audio_btn {
    position: absolute;
    right: 50px;
    top: 20px;
    z-index: 200;
    width: 25px;
    height: 25px;
    display:none;
}
.page4 .bg-left img {width: 40vw; position: absolute; left: -24vw; bottom:0; max-height:100%;}
.page4 .bg-right img {width: 40vw; position: absolute;right: -24vw;bottom:0; max-height:100%;}
.qa-box {
	font-family:"Big Caslon Medium";
    width: 50vw;
    margin: 0 auto;
	z-index:9999;
}
.qa-head {
	font-size:40px;
	padding-top:20px;
	font-weight:bold;
}
.qa-title {
	font-size:15px;
	font-weight:bold;
    margin-top: 10px;
}
.qa-content {
	font-size:14px;
    line-height: 25px;
    margin-top: 10px;
}

@media (max-width:768px) {
	.about-box .about-text img {
		width: 45vw;
	}
	.footer .icons img {
		width: 20vw;
	}
	.page4 .bg-left {display:none;}
	.page4 .bg-right {display:none;}
	.qa-box {width:80vw;}
}