*{ margin:0; padding:0; list-style:none; border:0 }
html,body{ width:100%; height:100%; overflow:hidden; }
a{ text-decoration:none; }

.mainSwiper{width:100%;height:100%; position: relative; overflow: hidden; z-index: 1; background-color: #000}
.swiper-slide{width:100%; height: 100%;background-size: cover; background-position: center center;}

@media only screen and (min-width: 1280px){

	.top_bar{ width:100%; position: absolute; top: 0; left: 0; z-index: 2}
	.top_bar .logo{ width:200px; float:left; margin: 20px 25px }
	.top_bar .nav{ float:right; margin: 35px 30px;}
	.top_bar .nav a{ display:block; float:left; font-size:18px; color:#fff; margin:0 40px; font-weight:100; transition:.5s; position: relative; height: 30px; line-height: 30px;}
	.top_bar .nav a:hover{ color:#fbc048 }
	.top_bar .nav a:before{content: ""; display: block; width: 0; height: 3px; background-color: #fbc048; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); transition: .5s}
	.top_bar .nav a.cur{ color:#fde3af }
	.top_bar .nav a.cur:before{ width:15px }


	.part_1{ background-image:url(img/home.jpg);  }
	.part_2{ background-image:url(img/about.jpg); }

	.part_1 video{ width:100%; height:100%; object-fit:cover; object-position: center center; position: relative; z-index: 1;}
	.part_1 .slogan{ width:1003px; display:block; position: absolute; top:50%; left:50%; transform:translate(-501px,-126px); z-index:4 }

	.part_1 .scroll_tips{ width: 40px; height: 40px; border-radius: 40px; border: 1px rgba(255,255,255,.2) solid; position: absolute; bottom: 20px; left: 50%; margin-left: -20px; z-index: 4; cursor: pointer; transition: .5s }
	.part_1 .scroll_tips:hover{ background-color: rgba(255,255,255,.1); }
	.part_1 .scroll_tips:before{ width: 6px; height: 6px; display: block; content: ""; border-left: 2px #fff solid; border-bottom: 2px #fff solid; position: absolute; top: 14px; left: 16px; opacity: .8; animation: SlowAction 1s linear infinite alternate;}
	@-webkit-keyframes SlowAction {
		from { transform: translateY(0) rotate(-45deg); }
		to { transform: translateY(4px) rotate(-45deg); }
	}
	@keyframes SlowAction {
		from { transform: translateY(0) rotate(-45deg); }
		to { transform: translateY(4px) rotate(-45deg); }
	}

	.part_2 .about_box{ width:525px; position: absolute; top:50%; left:15vw; transform:translateY(-50%); }
	.part_2 .about_box .txt{ font-size:16px; line-height:30px; padding-top:25px; color:#fff; }
	.part_2 .about_box .txt p{ text-indent:2em; padding:10px 0; text-align: justify; text-justify: inter-character;}
	.part_2 .star{ position: absolute; width:100%; height:100%; top:0; left:0; pointer-events: none}
	.part_2 .star img{ width:6.3vw; display:block; position: absolute; top:50%;}
	.part_2 .star img:nth-child(1){ right: 39.2vw; margin-top:-6.6vw; animation: star .7s infinite alternate;}
	.part_2 .star img:nth-child(2){ right: 26.4vw; margin-top:-17.4vw; animation: star .6s infinite alternate; }
	.part_2 .star img:nth-child(3){ right: 28.2vw; margin-top:5.5vw; animation: star .9s infinite alternate; }
	.part_2 .star img:nth-child(4){ right: 2.2vw; margin-top:-1.5vw; animation: star .8s infinite alternate; }

	@keyframes star{
		0%{ transform:scale(.6);}
		60%{ transform: scale(1.1);}
		100%{ transform: scale(1.1);}
	}

	@media only screen and (max-aspect-ratio:1920/1080){
		.part_2{ background-position:80% 50%; }
		.part_2 .about_box{ left:5% }
		.part_2 .star { display:none }
	}
	.part_3 .logo{ width:180px; display:block; float:left; margin:20px 0 0 20px;}
	.part_3 .copyright{ line-height: 25px; float:right; color:#fff; font-size:14px; margin:30px 20px 0 0; text-align:right; opacity:.8 }
	.copyright{ font-size:14px; position: absolute; bottom:20px; right:20px; color:#fff; opacity:.4; z-index: 3}
	.copyright a{ color:#fff }
	.copyright a:hover{ color:#fffaab }
}


@media only screen and (max-width:1280px){
	
	.top_bar{ width:100%; position: absolute; top: 0; left: 0; z-index: 2}
	.top_bar .logo{ width:6rem; float:left; margin: .75rem 1rem }
	.top_bar .nav{ float:right; margin: 1.2rem 0rem 0 0}
	.top_bar .nav a{ display:block; float:left; font-size:.6rem; color:#fff; margin:0 .75rem; font-weight:100; transition:.5s; position: relative; height: 1rem; line-height: 1rem; opacity: .7}
	.top_bar .nav a:hover{ color:#c4d9ff }
	.top_bar .nav a:before{content: ""; display: block; width: 0; height: .05rem; background-color: #c4d9ff; position: absolute; bottom: -.2rem; left: 50%; transform: translateX(-50%); transition: .5s}
	.top_bar .nav a.cur{ color:#fff; opacity:1 }
	.top_bar .nav a.cur:before{ width:.7rem }


	.part_1{ background-image:url(img/home_m.jpg); }
	.part_2{ background-image:url(img/about_m.jpg);}

	.part_1 video{ display:none }
	.part_1 canvas{ width:100%; height:100%; position: relative; z-index:1; object-fit: cover; display: none}
	.part_1 .slogan{ width:10.4rem; display:block; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2 }
	.part_1 .scroll_tips{ width: 2rem; height: 2rem; border-radius: 2rem; border: 1px rgba(255,255,255,.2) solid; position: absolute; bottom: 1rem; left: 50%; margin-left: -1rem; z-index: 4; cursor: pointer; transition: .5s }
	.part_1 .scroll_tips:hover{ background-color: rgba(255,255,255,.1); }
	.part_1 .scroll_tips:before{ width: .35rem; height: .35rem; display: block; content: ""; border-left: 1px #fff solid; border-bottom: 1px #fff solid; position: absolute; top: .62rem; left: .85rem; animation: SlowAction 1s linear infinite alternate;}
	@-webkit-keyframes SlowAction {
		from { transform: translateY(0) rotate(-45deg); }
		to { transform: translateY(.2rem) rotate(-45deg); }
	}
	@keyframes SlowAction {
		from { transform: translateY(0) rotate(-45deg); }
		to { transform: translateY(.2rem) rotate(-45deg); }
	}


	.part_2 .about_box{ width:15.6rem; position: absolute; top:50%; left:50%; transform:translate(-50%,-7%); }
	.part_2 .about_box .t{ width:14rem; margin:0 auto; display:block; }
	.part_2 .about_box .txt{ font-size:.6rem; line-height:1rem; padding-top:.5rem; color:#fff; }
	.part_2 .about_box .txt p{ text-indent:2em; padding:.3rem 0; text-align: justify; text-justify: inter-character; font-weight: 200}
	.part_2 .star{ position: absolute; width:100%; height:100%; top:0; left:0 }
	.part_2 .star img{ width:1.7rem; display:block; position: absolute; top:50%;}
	.part_2 .star img:nth-child(1){ right: 85.9vw; margin-top:-41.5vw; animation: star .7s infinite alternate;}
	.part_2 .star img:nth-child(2){ right: 43vw; margin-top:-65.3vw; animation: star .6s infinite alternate; }
	.part_2 .star img:nth-child(3){ right: 58.2vw; margin-top:-26.5vw; animation: star .9s infinite alternate; }
	.part_2 .star img:nth-child(4){ right: 20vw; margin-top:-32.9vw; animation: star .8s infinite alternate; }

	@keyframes star{
		0%{ transform:scale(.6);}
		60%{ transform: scale(1.1);}
		100%{ transform: scale(1.1);}
	}

	.copyright{ width: 100%; text-align: center; font-size:.55rem; position: absolute; bottom:.5rem; right:0; color:white; opacity:.4; z-index: 3; display: none}
	.copyright a{ color:white }

}