body{margin: 0;padding: 0;}
		.cloud_content{width: 100%;height: 250px;position: absolute;z-index: 1;overflow: hidden;}
		.bg_content{width: 100%;height: 100vh;background: url(img/sy_bg.jpg) no-repeat center;background-size:100% 100%;position: relative;}
		.hwyp_bt{top: 20%;position: absolute;text-align: center;display: block;width: 100%;z-index: 2;}
		.hwyp_bt img{height: 170px;}
		.hwyp_fbt{bottom:calc(5% + 360px);position: absolute;text-align: center;display: block;width: 100%;z-index: 2;}
		.hwyp_fbt img{height: 35px;}
		.hwyp_ewm{bottom: 7.6%;position: absolute;display: block;z-index: 2;height: 350px;width: 350px;left:50%;margin-left: -175px;}
		.hwyp_ewm img{width: 100%;height: 100%;}
		.cloud1{position: absolute;right: -200%;}
		.cloud1,.cloud1-1{height: 80px;top: 100px;opacity: .25;}
		.cloud1{
			  animation:fly1 120s infinite;
			  -webkit-animation:fly1 120s linear infinite;
			  animation-delay: 15s;
			}
			@keyframes fly1
			{
				from {right:-200px;}
				to {right:100%;}
			}
		.cloud1-1{position: absolute;left: 10%;top: 100px;}
		.cloud1-1{
			  animation:fly1-1 100s;
			  -webkit-animation:fly1-1 100s linear forwards;
			  animation-delay: .5s;
			}
			@keyframes fly1-1
			{
				0% {left:10%;}
				50% {left:-50%;}
				100% {left:-100%;}
			}
			
			/*cloud2*/
			.cloud2{position: absolute;right: -200%;}
			.cloud2,.cloud2-1{height: 30px;top: 20px;opacity: .3;}
			.cloud2{
				  animation:fly2 200s infinite;
				  -webkit-animation:fly2 200s linear infinite;
				  animation-delay: 100s;
				}
				@keyframes fly2
				{
					from {right:-200px;}
					to {right:100%;}
				}
			.cloud2-1{position: absolute;left: 80%;top: 30px;}
			.cloud2-1{
				  animation:fly2-1 150s;
				  -webkit-animation:fly2-1 150s linear forwards;
				  animation-delay: .5s;
				}
				@keyframes fly2-1
				{
					0% {left:80%;}
					25% {left:50%;}
					50% {left:20%;}
					75% {left:-10%;}
					100% {left:-100%;}
				}
			.cloud3{position: absolute;right: -200%;}
			.cloud3,.cloud3-1{height: 60px;top: 50px;opacity: .4;}
			.cloud3{
				  animation:fly3 210s infinite;
				  -webkit-animation:fly3 210s linear infinite;
				  animation-delay:200s;
				}
				@keyframes fly3
				{
					from {right:-200px;}
					to {right:100%;}
				}
			.cloud3-1{position: absolute;left: 68%;top: 50px;}
			.cloud3-1{
				  animation:fly3-1 220s;
				  -webkit-animation:fly3-1 220s linear forwards;
				  animation-delay: .5s;
				} 
				@keyframes fly3-1
				{
					0% {left:68%;}
					25% {left:30%;}
					50% {left:0%;}
					75% {left:-50%;}
					100% {left:-100%;}
				}
	
			.left_jdcontent{width: calc((100% - 350px) / 2);position: absolute;bottom: 3%;left: 0;height: 380px;z-index: 1;box-sizing: border-box;overflow: hidden;}
			.right_jdcontent{width:  calc((100% - 350px) / 2);position: absolute;bottom: 3%;right: 0;height: 380px;z-index: 1;box-sizing: border-box;overflow: hidden;}
			.right_jdcontent img, .left_jdcontent img{height: 80%;}
			.left_jdcontent ul{height: 100%;}
			.left_jdcontent ul li {
				float: left;
				width: 2000px;
				list-style: none;
				height: 100%;
			}
			
			.left_jdcontent ul li img {
				display: block;
				width: 100%;
				height: 87%;
				
			
			}
			/*.left_jdcontent ul li img:nth-child(1){}*/
			.right_jdcontent ul{height: 100%;}
			.right_jdcontent ul li {
				float: left;
				width: 2000px;
				list-style: none;
				height: 100%;
			}
			
			.right_jdcontent ul li img {
				display: block;
				width: 100%;
				height: 89%;
			}
			@media only screen and (min-width: 1440px) {
				.hwyp_bt img{height: 250px;}
			}
			@media only screen and (max-width: 1400px) {
				.hwyp_bt{top: 8%;}
				
			}
			@media only screen and (max-width: 414px) {
				.hwyp_bt{top: 12%;}
				.hwyp_bt img{height: 6em !important;top: 12%;}
				.left_jdcontent{width: calc((100% - 300px) / 2)}
				.right_jdcontent{width:  calc((100% - 300px) / 2)}
				.hwyp_ewm{bottom: 7.6%;position: absolute;display: block;z-index: 2;height: 300px;width: 300px;left:50%;margin-left: -150px;}
				
			}
			/*背景音乐*/
			#lanren{position: absolute;right: 50px;top: 50px;z-index: 4;}
#lanren #audio-btn{width: 44px;height: 44px;background-size: 100% 100%;}
#lanren .on{background: url('img/music_on.png') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}
#lanren .off{background: url('img/music_off.png') no-repeat 0 0;}
@-webkit-keyframes rotating {
	from{
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
    	transform: rotate(0deg);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.ypcc{position: absolute;width: 100%;text-align: center;color: #5cbdff;    bottom: 1%;}