body{
	display: flex;
	flex-wrap: wrap;
	    flex-direction: column;
}
div.all{
	background:linear-gradient(200deg,#517fa4,#243949);
	height: 340vh;
}
div.header{
	    width: 100.5%;
		height: 80px;
		margin: -6px;
		background-color: black;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

}
div.header a{
	color:#fdfdfd;
	text-align: center;
	display: block;
	float: left;
	width: 150px;
	height: 80px;
	line-height: 80px;
	margin-left: 40px;
	transition: 0.5s;
	font-family: 华文中宋,sans-serif;
}
div.header div.right input{
	margin-top: 25px;
	    margin-left: 15pc;
	    width: 185px;
	    height: 35px;
	    border-radius: 10px;
		position: absolute;
}
div.header div.right input:focus{
	outline: 2px solid #008C8C;
	outline-offset: -2px
}
div.header div.right img{
	width: 20px;
	position: absolute;
	right: 260px;
	top: 25px
}
div.header a:hover{
	color: #008c8c;
	background-position-x: 100%;
	transform: translateY(-5px);
	font-weight: bold;
	font-size: 30px;

}
div.header div.logo img{
	position: absolute;
	width: 200px;
	right: 1px;
	top: 0px;
}
div.bg img{
	width: 101%;
	height: 500px;
	text-align: center;
	margin-left: -15px;
	
}
div.one img{
	position: absolute;
	    left: 0pc;
	    top: 40pc;
	    right: 0;
	    margin: auto;
	    height: 200px;
	    border-radius: 50%;
	    box-shadow: 3px 0 15px -1px rgb(0 0 0 / 50%);
		transition: transform 0.50s ease-in-out;
}
div.one img:hover{
	transform: rotateX(90deg) translateY(-6px) scale(1.05);
}
div.two h1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 18pc;
	font-family: 宋体,sans-serif;
	font-weight: bold;
	font-size: 30px;
}
div.two p{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0pc;
	font-size: 17px;
	line-height: 2;
	font-family: 仿宋,sans-serif;
}
div.style {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 3pc;
	font-size: 45px;
	font-weight: bold;
	letter-spacing: 1pc;
}
div.style h1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 45px;
	font-weight: bold;
	letter-spacing: 1pc;
}
div.three{
	margin-top: 0pc;
	display: flex;
	justify-content: center;
	align-items: center;
}
.card{
	position: relative;
	width: 300px;
	height: 450px;
	margin: 20px;
	background-color: #758a99;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
	flex-shrink: 0;
}
.card .photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card .photo{
	 position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	border-radius: 0%;
	overflow: hidden; 
	transition: 0.5s;
}
.card:hover .photo{
	top: 30px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.card h2{
	font-size: 30px;
	font-weight: bold;
	position: absolute;
	top: 170px;
	transition: 0.5s;
}
.card h3{
	font-size: 20px;
	font-weight: bold;
	margin-top: 220px;
	width: 100%;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 20px;
	
}
.card p{
	width: 90%;
	text-indent: 32px;
	font-size: 16px;
	margin-bottom: 15px;
	line-height: 30px;
}
.card a{
	font-size: 14px;
	color:rgba(255,255,255,0.8); 
	border: 1px solid rgba(255,255,255,0.5);
	padding: 8px 32px;
	border-radius: 8px;
	
}
.card a:hover{
	color: #fff;
	background-color: rgba(255,255,255,0.2);
}
div.song {
	position: absolute;
	    left: 0;
	    top:125pc;
	    right: 0;
	    margin: auto;
	    font-size: 45px;
	    width: 122px;
	font-weight: bold;
	letter-spacing: 1pc;
}
div.song h1{
	position: absolute;
	    left: 0;
	    top: 0pc;
	    right: 0;
	    margin: auto;
	    font-size: 45px;
	    width: 122px;
	font-weight: bold;
	letter-spacing: 1pc;
}
div.switch img.sw1{
	position: fixed;
	right: 0pc;
	bottom: 180px;
	width: 50px;
	height: 50px;
}
div.switch img.sw2{
	position: fixed;
	left: 0pc;
	bottom: 180px;
	width: 50px;
	height: 50px;
}
div.four{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 15pc;
	
}
.four-1{
	display: flex;
	justify-content: center;
	align-items:center ;
	flex-wrap: wrap;
}
.four-1-1{
	position: relative;
	width: 240px;
	height: 240px;
	margin: 10px;
	display: flex;
	align-items: flex-end;
	text-align: center;
	color: #f5f5f5;
	box-shadow: 0 1px 1px rgba(0,0,0,0.1),
	0 2px 2px rgba(0,0,0,0.1),
	0 4px 4px rgba(0,0,0,0.1),
	0 8px 8px rgba(0,0,0,0.1),
	0 16px 16px rgba(0,0,0,0.1);
	overflow: hidden;
}
.four-1-1::before{
	content: "";
	width: 100%;
	height: 100%;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	background-position: 0 0;
	transition: transform 1s cubic-bezier(0.19,1,0.22,1);
	
}
.four-1-1:nth-child(1)::before{
	background-image: url(../img/wy/y1.jpg);
}
.four-1-1:nth-child(2)::before{
	background-image: url(../img/wy/y5.jpg);
}
.four-1-1:nth-child(3)::before{
	background-image: url(../img/wy/y7.jpg);
}
.four-1-1:nth-child(4)::before{
	background-image: url(../img/wy/y2.jpg);
}
.four-1-1:nth-child(5)::before{
	background-image: url(../img/wy/y8.jpg);
}
.four-1-1::after{
	content: "";
	display: block;
	width: 100%;
	height: 200%;
	background:linear-gradient(to bottom,
	rgba(0,0,0,0) 0%,
	rgba(0,0,0,0.25) 55%,
	rgba(0,0,0,0.8) 100%) ;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(0);
	transition: transform 1.4s cubic-bezier(0.19,1,0.22,1);
}
.four-1-1 .content{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
	padding: 16px 8px; 
	transform: translateY(70%);
	transition: transform 0.7s cubic-bezier(0.19,1,0.22,1);
}
.four-1-1 h2{
	font-size: 23px;
	font-weight: bold;
}
.four-1-1 p{
	font-size: 15px;
	letter-spacing: 2px;
	width: 80%;
	line-height: 20px;
	margin-top: 10px;
	text-align: justify;
}
.four-1-1 a{
	background-color: rgba(0,0,0,0.5);
	color: white;
	padding: 12px 24px;
	font-size: 12px;
	font-weight: bold;
	margin-top: 10px;
	border-radius: 10px;
}
.four-1-1 a:hover{
	background-color:  rgba(0,0,0,0.1);
}
.four-1-1 .content *:not(h2){
	opacity: 1;
	transform: translateY(20px);
	transition: transform 0.7s cubic-bezier(0.19,1,0.22,1),opacity 0.7s
	cubic-bezier(0.19,1,0.22,1);
}
.four-1-1:hover{
	align-items: center;
	
}
.four-1-1:hover::before{
	transform: translateY(-5%);
}
.four-1-1:hover::after{
	transform: translateY(-50%);
}
.four-1-1:hover .content{
	transform: translateY(0);
}
.four-1-1:hover .content *not(h2){
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}
div.ten{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
    position: absolute;
        left: 0;
        top: -7pc;
        right: 0;
}
div.ten h3{
	font-size: 40px;
	font-family:华文新魏,sans-serif ;
}
div.ten h4{
	margin-left: 10pc;
	margin-top: 2pc;
	font-style: initial;
	font-style: italic;
	    color: grey;
}
div.end{
	width:100% ;
	height: 80px;
	box-shadow: 0 4px 20px 3px rgb(0 0 0 / 10%);
	position: relative;
	margin-top: 15pc;
}
div.end h5{
	font-size: 15px;
	font-weight: bold;
	position: absolute;
	top: 2pc;
	left: 0pc;
}
div.end div.five img{
	width: 240px;
	position: absolute;
	    right: 0;
}
div.end div.six{
	position: absolute;
	top: 30px;
	right: 0;
	left: 0;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
div.end div.six a img{
	width: 20px;
}
div.end div.six a{
	cursor: pointer;
	margin-left: 30px;
}