.all{
	background-color: aliceblue;
}
/* 导航栏 */
.navigation {
	z-index: 99999;
	width: 100vw;
	height: 5vw;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(5px);
	line-height: 5vw;
	display: flex;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0.1vw 0.1vw 0px;
	position: fixed;
	border-bottom-left-radius: 1vw;
	border-bottom-right-radius: 1vw;
}

.navigation img {
	margin-left: 2vw;
	margin-right: 0;
	width: 4vw;
	height: 4vw;
	margin-top: 0.5vw;
}

.navigation div {
	color: #989898;
	font-size: 1.5vw;
	font-weight: 900;
	font-family: 楷体;
	margin-left: 1vw;
}

/* 彩色盒子 */
.head {
	width: 80vw;
	margin-top: 8vw;
	display: flex;
}

.head-one {
	font-family: 楷体;
	height: 18vw;
	border-radius: 1vw;
	cursor: pointer;
}

.head-one:first-child {
	transition: all 1s;
	padding: 1vw;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0.5vw 1.5vw;
	color: #ff557f;
	text-align: left;
	width: 33vw;
	background-image: linear-gradient(45deg, rgba(255, 154, 158, 1) 0%, rgba(250, 208, 196, 1) 99%, #fad0c4 100%);
	backdrop-filter: blur(10px);
}

.head-one:nth-child(2) {
	transition: all 1s;
	padding: 1vw;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0.5vw 1.5vw;
	color: #c8c8c8;
	text-align: center;
	width: 18vw;
	background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
	background-blend-mode: lighten;
	backdrop-filter: blur(10px);
}

.head-one:last-child {
	width: 20vw;
}

.head-one-two {
	text-align: right;
	width: 20vw;
	height: 7.5vw;
	border-radius: 1vw;
}

.head-one-two:first-child {
	transition: all 1s;
	padding: 1vw;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0.5vw 1.5vw;
	width: 18vw;
	color: #ff00ff;
	background-image: linear-gradient(to top, rgba(161, 140, 209, 1) 0%, rgba(251, 194, 235, 1) 100%);
	backdrop-filter: blur(10px);
}

.head-one-two:last-child {
	transition: all 1s;
	padding: 1vw;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0.5vw 1.5vw;
	width: 18vw;
	color: #00aaff;
	background-image: linear-gradient(120deg, rgba(161, 196, 253, 1) 0%, rgba(194, 233, 251, 1) 100%);
	backdrop-filter: blur(10px);
}

.head-one-two:first-child {
	margin-bottom: 1vw;
}

.first {
	position: absolute;
	right: 2vw;
	bottom: 0;
	width: 20vw;
	height: 15vw;
	object-fit: cover;
}

.second {
	position: absolute;
	width: 15vw;
	height: 15vw;
	bottom: 0;
}

.third {
	position: absolute;
	left: 1vw;
	bottom: 0;
	width: 9vw;
	height: 9vw;
}

.fourth {
	position: absolute;
	left: 1vw;
	bottom: 0;
	width: 9vw;
	height: 9vw;
}



.first img,
.second img,
.third img,
.fourth img {
	width: 100%;
	height: 100%;
	/* object-fit: cover; */
}


.head-one-two:last-child:hover,
.head-one-two:first-child:hover,
.head-one:nth-child(2):hover,
.head-one:first-child:hover {
	transform: scale(1.02);
}

.head-one:hover .first,
.head-one:hover .second,
.head-one-two:hover .third,
.head-one-two:hover .fourth{
	animation-play-state: running;
}

/* 彩色盒子标题字体 */
.head-one:first-child .headline {
	font-size: 2.5vw;
	font-weight: 900;
}

.head-one:nth-child(2) .headline {
	font-size: 2vw;
	font-weight: 900;
}

.head-one-two:first-child .headline {
	font-size: 1.5vw;
	font-weight: 900;
}

.head-one-two:last-child .headline {
	font-size: 1.5vw;
	font-weight: 900;
}


/* 彩色盒子内容字体 */
.head-one:first-child .briefly {
	font-size: 2vw;
}

.head-one:nth-child(2) .briefly {
	font-size: 1.5vw;
}

.head-one-two:first-child .briefly {
	font-size: 1vw;
}

.head-one-two:last-child .briefly {
	font-size: 1vw;
}

/* 内容盒子 */
.content {
	width: 90vw;
	margin-top: 30px;
	display: flex;
	overflow: hidden;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
}

.contentbox {
	cursor: pointer;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
	width: 250px;
	height: 200px;
	margin:10px;
	border-radius: 10px;
	transition: all 1s;
	overflow: hidden;
}

.contentbox:hover {
	transform: scale(1.02);
}

.contentboxtop {
	width: 100%;
	height: 50%;
	text-align: center;
	overflow: hidden;
}

.contentboxbottom {
	width: 100%;
	height: 50%;
	position: relative;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	padding-left: 10px;
	
}

.boximg {
	width: 100%;
	height: 100%;
}

.boximg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.boxtitme {
	width: 100%;
	position: absolute;
	bottom: 10px;
	font-size: 10px;
	color: #8d00d3;
}

.boxtitme svg{
	/* margin-right: 3px; */
}

.bt {
	font-size: 15px;
	font-weight: 900;
	margin-bottom: 10px;
}

.jj{
	font-size: 12px;
}