*{
	font-family: "Microsoft YaHei", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	padding: 0;
	margin: 0;
}

::selection {
	background-color: #FFD069;
	color: white;
}

body {
	background-repeat: no-repeat;
	background-size: center;
	background-attachment: fixed;
	overflow-x: hidden;
}

.template_bor {
	border-radius:25px;
	margin-left: 35%;
	width: 30%; 
	height: 90px;
	background-color: #705050; 
	justify-content: center;
	align-items: center;
	display: flex;
}

.template_text {
	text-decoration: none;
	color: #565659;
	vertical-align: baseline;
	font-size: 1.05rem;
	margin-bottom: 1.5%;
	font-weight: normal;
	line-height: 250%;
	font-family: "STZhongsong";
	display: flex; 
	flex-direction: column; 
}

.template-text-link {
	text-decoration: underline;
	color: #b89b5d;
	font-weight: normal;
	line-height: 250%;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
}

.template-text-link:hover {
	background-color: white;
}

.template_text-a {
	text-decoration: none;
	color: #565659;
	vertical-align: baseline;
	font-size: 1.05rem;
	margin-bottom: 1.5%;
	font-weight: normal;
	line-height: 250%;
	font-family: "STZhongsong";
	display: flex; 
	flex-direction: column; 
	align-items: flex-end;
}

.template-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
	margin: 1%;
	background-color: #E5E5E5;
	border-radius: 2%;
	width: 29.3%;
	padding: 1%;
	padding-top: 2.5%;
	padding-bottom: 1%;
	height: 36%;
	box-shadow: 0px 3px #FFD069;
}


.template_title {
	color: #313133;
	text-shadow: 0px 5px #FFD069;
	margin-left: 5%
}

.head {
	height: 12%;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight:bold;
	color: #313133;
	display: flex;
	line-height: 200%;
} 

.head-1 {
	height: 12%;
	margin-top: 5px;
	margin-bottom: 24px;
	font-weight:bold;
	color: #313133;
	display: flex;
} 

.top {
	background-color: rgba(229,229,229,.7); 
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	width: 100%; 
	height: 4.5%;
	transition: 0.5s;
	padding: 10px 0px 10px 0px;
	display: flex;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
	justify-content: center;
	position: fixed;
	align-items: center;
	z-index: 20;
	border-bottom-left-radius:25px;
	border-bottom-right-radius:25px;
	box-shadow: 0px 1px 10px gray;
}

.circle {
	position: fixed;
	width: 20%;
	height: 20%;
	z-index: 9;
}

.video_frame {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	background-color: #E5E5E5; 
	flex-direction: column;
	position: static;
}

.video_frame_ {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column;
	position: static;
}

.video_img {
	width:100%;
	border-radius: 1%; 
	box-shadow: 0px 1px 5px gray; 
	margin-left: 0%;
	opacity: 0%;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.video_img:hover {
	opacity: 100%;
}

.video_sec {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	background-color: #E5E5E5; 
	flex-direction: row;
}

.video_sec_ {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: row;
	margin: 5%;
}

.slide-out {
	width: 86%;
	padding-left: 7%;
	padding-right: 7%;
	background-color: #E5E5E5;
	display: flex;
	position: relative;
}

.slide-img-a {
	padding: 0.3%;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}


.slide-img-b {
	padding: 0.3%;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.slide-img-c {
	padding: 0.3%;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}



.slide-img-a:hover {
	padding: 0%;
	position: absolute;
	width: 72%;
	top: -30%;
	left: 5%;
	z-index: 12;
	box-shadow: 0 0 1000px 1500px rgba(255, 255, 255, 0.5) ;
}


.slide-img-b:hover {
	padding: 0%;
	position: absolute;
	width: 72%;
	top: -50%;
	left: 14%;
	z-index: 12;
	box-shadow: 0 0 1000px 1500px rgba(255, 255, 255, 0.5) ;
}


.slide-img-c:hover {
	padding: 0%;
	position: absolute;
	width: 72%;
	top: -50%;
	right: 5%;
	z-index: 12;
	box-shadow: 0 0 1000px 1500px rgba(255, 255, 255, 0.5) ;
}





.sticktop {
	width: 100%; 
	height: 5%;
	z-index:-10;
	margin-top: 0;
	position: fixed;
	display: flex;
	justify-content: center;
}

.toptitle {
	animation: floating 3s infinite ease-in-out;
	padding-top: 9%;
	position: relative;
}

.stickhead {
	z-index:-10;
	display: table-cell;
}

.headimage {
	position: relative;
}



@keyframes floating {
	50% {
		transform: translateY(-2%);
	}
}

.introduction {
	font-weight: bolder;
}

.template_bar {
	width: 100%;
	height: 0;
	border-bottom: #5B4242 2px dashed;
	padding-left: 0%;
	margin: 0%;
}

.bottom {
	width: 96%;
	background-color: #313131;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 4%;
	flex-grow: 1;
	align-content: space-between;
	box-shadow: 0 0 16px 0  #313131;
}

.bottom_column {
	padding: 3%;
	text-decoration: none;
	color: #F2F2F2;
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
	line-height: 150%;
}

.bottom_column a {
	text-decoration: none;
	color: #F2F2F2;
	font-size: 1rem;
}

.bottom_column h3 {
	text-shadow: 0px 1.5px #FFD069;
}

.bottom_column a:hover {
	text-decoration: underline;
}

.yuushya_logo {
	background-image: url("./images/yuushya_bottom.png");
	background-size: cover;
	margin: 1.6%;
	width: 350px;
	height: 96px;
}


li {list-style-type:none;}

.toptitle {
	width: 100%; 
	display: flex;
	height: 50%;
	justify-content: center;
	align-items: center;
}

.yuushya_large {
	margin-top: 5%;
	margin-bottom: 5%;
}

.topitem {
	text-decoration: none;
	text-align: center;
	flex-grow: 1;
	color: #FFFFFF;
	font-size: 1.2rem;
	width: 60px
}

.topitem a {
	color: #332828;
	text-decoration: none;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
}


.topitem a:hover {
	background-color: #FFD069;
	color: #FFFFFF ;
	border-radius: 3rem;
	padding: 3%;
	padding-left: 15%;
	padding-right: 15%;
}


.requirements {
	display: flex;
	padding: 2%;
	padding-left: 10%;
	padding-right: 10%;
	transform: translateX(0%);
	width: 80%;
	background-color: #E5E5E5;
	align-items: center;
	justify-content: space-between;
}


.maind {
	background-color: #F2F2F2; 
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	margin-top: 0%;
	width: 100%;
	height: 6%;
}


.mainin {
	justify-content: center;
	margin-left: 20%;
	width: 60%; 
	display: flex;
	flex-flow: column;
	padding-bottom: 4%;
	padding-top: 3%;
	background-color: #F2F2F2; 
	border-radius:25px;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
}


.mainout {
	margin-top: 0%;
	z-index:-9;
	width: 100%; 
	background-color: #F2F2F2; 
}

.video-inside {
	width: 60%;	
	box-shadow: 0px 1px 5px gray;
}

.insideblock_a {
	display: flex;
	width: 100%; 
	height: 500px;
	background-color: #F2F2F2;	
}

.text1 {
	margin-left: 10%;
	width: 80%; 
}

.replacement {
	margin-left: 5%;
	width: 90%; 
	height: 50px;
	background-color: #F2F2F2;	
}

.replacement-special {
	margin-left: 5%;
	width: 90%; 
	height: 50px;
	background-color: #F2F2F2;	
}

.replacement_light {
	width: 100%; 
	height: 50px;
	background-color: #E5E5E5;
}

.download_left {
	display: flex;
	margin-left: 0%;
	background-color: #705050;
	border-radius: 25px;
	height: 20%;
}

.download_button {
	background-color: #F2F2F2;
	margin-right: 25%;
	margin-left: 25%;
	border-radius: 25px;
	width: 50%; 
	height: 75px;
	transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.download-button-all {
	margin: 1%;
	width: 90%;
	background-color: #FFD069;
	padding: 2%;
	color: #565659;
	padding-left: 4%;
	font-size: 1.5rem;
	transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	cursor: pointer;
}

.download-button-all-bg {
	margin: 1%;
	width: 90%;
	padding: 2%;
	color: #FFFFFF;
	padding-left: 4%;
	font-size: 1.5rem;
	transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	cursor: pointer;
}

.download-button-all-bg:hover {
	width: 100%;
}


.download-button-all:hover {
	width: 100%;
}


.download-button-invaild {
	margin: 1%;
	width: 90%;
	background-color: #E5E5E5;
	color: #565659;
	padding: 2%;
	padding-left: 4%;
	font-size: 1.5rem;
	transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	cursor: not-allowed;
}

.download_button:hover {
	background-color: #FFD069;
	width:70%;
	margin-left: 15%;
	margin-right: 15%;
}


.download {
	margin-left: 18%;
	width: 64%;
	display: flex;
}

.download_replacement {
	width: 4%;
}

.home-download {
	width: 100%;
	background-color: #FFD069;
	display: flex;
	flex-direction: column;	
	z-index: 2;
	border-top-left-radius: 20%;
	border-top-right-radius: 20%;
}

.home-download-in {
	display: flex; 
	flex-direction: row;
	flex-grow: 1 1;
}



.download-guide {
	width: 30%;
	padding: 3%;
	margin: 5%;
	align-items: center;
	display: flex;
	flex-direction: column;
	z-index: 2;
}


.download-intel {
	width: 30%;
	padding: 3%;
	margin: 5%;
	align-items: center;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

.download-in {
	background-color: #ffe09e;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	padding: 3%;
	flex-direction: column;
	border-radius: 5%;
	transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	z-index: 2;
	cursor: default;
}

.download-in:hover {
	padding: 1%;
	width: 120%;
	background-color: #ffebbf;
	z-index: 2;
}


.textintro {
	border-radius:25px;
	margin-left: 35%;
	margin-top: 4.5%;
	color: #F2F2F2;
	font-size: 2rem;
	width: 30%; 
	height: 8%;
	justify-content: center;
	align-items: center;
	display: flex;
}

 /* 移动适配按钮 */

 .mobiletop {
	 overflow: hidden;;
	 position: fixed;
	 display: none;
	 top: 8%;
	 width: 100%;
	 height: 2%;
	 flex-direction: column;
	 margin-left: -80%;
	 text-decoration: none;
	 transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s ;
	 opacity: 0;
	 z-index: 35;
 }

 .mobile-title {
	 padding: 5%;
	 color: #565659;
	 font-size: 2rem;
	 background-color: #737373;
	 transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s ;
 }

 .mobile-title:hover {
	background-color: #FFD069;
	color: #565659;
 }

 .mobile-title a {
	 text-decoration: none;
	 color: #F2F2F2;
	 width: 80%;
 }


 .menuin {
	width: auto; 
	height: 100%;
	border-radius: 0%;
	overflow: hidden;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 15;
 }


 .checkround {
	background-image: url(./images/menu.png) ;
	background-repeat: repeat;
	background-size: cover;
	width: 80px; 
	height: 80px;
	border-radius: 5%;
	background-color:  #565659;
	margin-left: 40%;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
	z-index: 20;
 }

#menubotton1:checked ~ .checkround {
	width: 1250px; 
	height: 800px;
	background-size: 0%;
	border-radius: 50%;
	z-index: 2;
	margin-left: -410%;
	background-color: #565659;
}

#menubotton1:not(checked) ~ .checkround {
	width: 80px; 
	height: 80px;
}

#menubotton1:checked ~ .blackcover {
	width: 200%;
	height: 200%;
	opacity: 0.5;
}

#menubotton1:checked ~ .mobiletop {
	opacity: 1;
	height: 80%;
}


 .topmenu {
	 width: 0%;
 }


 .sidebar {
	 position: absolute;
	 top: 50%;
	 left: 95%;
	 background-color: #FFFFFF;
	 display: block;
	 z-index: -20;
 }

 .blackcover {
	 width: 200%;
	 height: 1%;
	 position: fixed;
	 margin-left: -100%;
	 margin-top: -50%;
	 background-color: black;
	 opacity: 0.5;
	 z-index: 4;
	 opacity: 0;
	 transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
 }

 .imgtext1 {
	 width: 65%;
 }

 .imgtext2 {
	width: 65%;
}

.wave {
	left: 0; 
	width:100%; 
	text-decoration: wavy overline; 
	font-size: 15rem; 
	overflow: hidden; 
	padding-top: 10%; 
	position: absolute; 
	color: #FFD069; 
	z-index: 0;
}

.wave-down {
	height: 20%;
}

.to-back {
	background-color: #F2F2F2;
}

.feedback {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-grow: 1;
}

.feedback-button {
	background-color: #E5E5E5;
	text-decoration: none;
	padding: 8px;
	width: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.feedback-button:hover {
	background-color: #FFD069;
	width: 600px;
}

.creation-img {
	opacity: 0;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.creation-img:hover {
	opacity: 1;
}

.card-bili {
	left:89%; 
	position: relative; 
	width: 50px; 
	height: 50px; 
	background-image: url(./images/bilibili.png); 
	background-position: right; 
	background-size: cover; 
	transform: translateY(-55px);
	margin-bottom: -50px;
}

.card-bluebird {
	left:89%; 
	position: relative; 
	width: 50px; 
	height: 50px; 
	background-image: url(./images/bluebird.png); 
	background-position: right; 
	background-size: cover; 
	transform: translateY(-55px);
	margin-bottom: -50px;
}

.card-yt {
	left:89%; 
	position: relative; 
	width: 50px; 
	height: 50px; 
	background-image: url(./images/yt.png); 
	background-position: right; 
	background-size: cover; 
	transform: translateY(-55px);
	margin-bottom: -50px;
}

.to-back-in {
	box-shadow: 0 0 16px 0  #313131; 
	width: 100%; 
	height: 82px; 
	background-color: #313131; 
	border-top-right-radius: 50%; 
	border-top-left-radius: 50%;
}







 /* 移动适配 */

@media screen and (max-width: 1129px) {

	.requirements {
		padding: 2.5%;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		padding-left: 10%;
		padding-right: 10%;
		font-size: 2rem;
		text-align: start;
		flex-direction: column; 
        align-items: flex-start;
	}




	 .topitem {
		 display: none;
	 }

	 .to-back-in {
		box-shadow: 0 0 16px 0  #313131; 
		width: 100%; 
		height: 82px; 
		background-color: #313131; 
		border-top-right-radius: 80%; 
		border-top-left-radius: 0%;
	}
	

	 .yuushya_logo {
		margin: 1.8%;
		margin-bottom: 0%;
		width: 600px;
		height: 160px;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}

	 .video-inside {
		width: 80%;	
		box-shadow: 0px 1px 5px gray;
	}

	 .card-bili {
		left:87%; 
		position: relative; 
		width: 100px; 
		height: 100px; 
		background-image: url(./images/bilibili.png); 
		background-position: right; 
		background-size: cover; 
		transform: translateY(-60px);
		margin-bottom: -50px;
	}

	.card-bluebird {
		left:87%; 
		position: relative; 
		width: 100px; 
		height: 100px; 
		background-image: url(./images/bluebird.png); 
		background-position: right; 
		background-size: cover; 
		transform: translateY(-60px);
		margin-bottom: -50px;
	}

	.card-yt {
		left:87%; 
		position: relative; 
		width: 100px; 
		height: 100px; 
		background-image: url(./images/yt.png); 
		background-position: right; 
		background-size: cover; 
		transform: translateY(-60px);
		margin-bottom: -50px;
	}

	 .feedback {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex-grow: 1;
	}

	.feedback-button {
		background-color: #E5E5E5;
		text-decoration: none;
		padding: 0px;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
		transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
	}

	.feedback-button:hover {
		background-color: #FFD069;
		width: 100%;
	}


	 .download-in {
		width: 100%;
		height: 100%;
		padding: 1%;
		border-radius: 5%;
	}

	.template-card {
		width: 96%;
	}

	.h2 {
		font-size: 250%;
	}

	.download-guide {
		width: 30%;
		padding: 0%;
		margin: 5%;
	}
	
	
	.download-intel {
		width: 30%;
		padding: 0%;
		margin: 5%;
	}

	.news-title {
		font-size: 200%;
	}
	
	.replacement-special {
		margin-left: 5%;
		width: 90%; 
		height: 200px;
		background-color: #F2F2F2;	
	}

	 .wave {
		padding-top: 9%; 
	 }

	 .wave-down {
		height: 6%;
	}

	 .topmenu {
		 width: 90%;
	 }

	 .mobiletop {
		 display: flex;
	 }

	 .body {
		 background-attachment: local;
	 }


	 .boximg {
		  flex-direction: column; 
	 }

	 .boximg-2 {
		flex-direction: column; 
		flex-direction: column-reverse;
   }

	 .imgtext1 {
		 width: 100%;
	 }

	.mainin {
		justify-content: center;
		margin-left: 2%;
		width: 96%; 
		transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
	}

	.menuin {
		display: flex;
	}

	.head-1 {
		font-size: 300%;
	}

	.to-hide {
		display: none;
	}

	.to-back {
		background-color: rgba(229,229,229,0);
	}

	.home-download {
		display: none;
	}

	.head {
		height: 12%;
		margin-top: 25px;
		font-size: 220%;
		margin-bottom: 25px;
		font-weight: bold;
		color: #313133;
	} 

	.template_text {
		text-decoration: none;
		color: #565659;
		vertical-align: baseline;
		font-size: 175%;
		margin-bottom: 1.5%;
		font-weight: normal;
		line-height: 222%;
		font-family: "STZhongsong",
	}

	.slide-out {
		flex-direction: column;
	}

	
.slide-img-a:hover {
	padding: 0%;
	position: static;
	width: 100%;
	top: 0%;
	left: 0%;
	padding-bottom: 0%;
	box-shadow: none ;
}


.slide-img-b:hover {
	padding: 0%;
	position: static;
	width: 100%;
	top: 0%;
	left: 0%;
	padding-bottom: 0%;
	box-shadow: none ;
}


.slide-img-c:hover {
	padding: 0%;
	position: static;
	width: 100%;
	top: 0%;
	left: 0%;
	padding-bottom: 0%;
	box-shadow: none;
}





	.template_text-a {
		text-decoration: none;
		color: #565659;
		vertical-align: baseline;
		font-size: 150%;
		margin-bottom: 1.5%;
		font-weight: normal;
		line-height: 300%;
		font-family: "STZhongsong",
	}

	.top {
		background-color: #E5E5E5; 
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		width: 100%; 
		height: 10%;
		transition: 0.5s;
		display: block;
		justify-content: center;
		padding: 0px 0px 0px 0px;
		position: fixed;
		align-items: center;
		z-index: 8;
		border-bottom-left-radius:25px;
		border-bottom-right-radius:25px;
		margin: 0%;
		z-index: 20;
	}

	.topitem {
		font-size: 1.44rem;
	}
}