@media (min-width:720px){

}
@media (min-width:320px) and (max-width:719px){
	body{
		background-color: red;
	}
}
.head-body{
	position: relative;
	width: 100%;
	min-width: 1337px;
	box-sizing: border-box;
	font-size: 14px;
	background-color: #FFFFFF;
}
.head-content{
	position: relative;
	background-image: url(../img/headBackLogo.png);
	background-size: cover;
	background-position: center;
	height: 175px;
}
.head-img-back{
	position: relative;
	width: 100%;
	z-index: 0;
}
.head-img-logo{
	position: absolute;
    left: 16vw;
    top: 10vh;
    width: 14vw;
}
.head-fun{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	position: absolute;
	top: 40px;
	right: 15%;
	height: 100px;
}
.head-search{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	width: 260px;
	padding: 6px 15px;
	margin-right: 20px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.2);
	border-radius: 50px;
	border: 2px solid #FFFFFF;
}
.head-search-icon{
	width: 20px;
	height: 20px;
}
.head-search>input{
	background-color: transparent;
	border: none;
	font-size: 20px;
	margin-left: 10px;
	width: 100%;
}
.head-num{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}
.head-num-icon{
	width: 50px;
	height: 50px;
}
.head-num-text{
	font-size: 20px;
	color: rgba(212, 181, 114,1);
	margin-left: 10px;
}

.nav{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width: 1337px;
	height: 80px;
	background-color: #FFFFFF;
	margin: 0 auto;
}
.nav-ul{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width: 100%;
	height: 100%;
	font-size: 22px;
}
.nav-ul>li{
	position: relative;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width: 176px;
	height: 100%;
}
.nav-ul>li>a{
	color: #333333;
}
.nav-on{
	font-weight: bold;
	background-color: rgb(0,0,0,0.3);
}
.nav-on>a{
	padding-bottom: 2px;
	border-radius: 4px;
	border-bottom: 4px solid rgba(212, 181, 114,1);
}
.customization-on{
	display: none;
	position: absolute;
	top: 80px;
	left: 0;
	z-index: 100;
	width: 315px;
	font-size: 21px;
	font-family: SourceHanSansSC;
	font-weight: 400;
	color: #777777;
	padding: 15px 0;
	box-sizing: border-box;
	background-color: #FAFAFA;
	box-shadow: 7px 8px 11px 7px rgba(8,1,3,0.2);
}
.customization-on a{
	color: #777777;
}
.customization-on-color{
	color: #D4B573;
	font-weight: 800;
}
.customization-on-color a{
	color: #D4B573;
}
.customization-on-but{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width: 57px;
	height: 25px;
	font-size: 17px;
	font-family: SourceHanSansSC;
	font-weight: 400;
	color: #D4B573;
	background: #E8E8E8;
	border-radius: 13px;
}
.customization-on-but a{
	color: #D4B573;
}
.customization-on>li{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	padding: 15px 45px;
	box-sizing: border-box;
}
.customization-on>li>div{
	cursor: pointer;
}
.customization-on>li>div:hover{
	color: #D4B573;
	font-weight: 800;
}
.nav-on:hover>.customization-on{
	display: block;
}
.nav-ul>li:hover>.customization-on{
	display: block;
}
.nav-ul>li:hover{
	font-weight: bold;
	background-color: rgb(0,0,0,0.3);
}
.nav-ul>li:hover>a{
	padding-bottom: 2px;
	border-radius: 4px;
	border-bottom: 4px solid rgba(212, 181, 114,1);
}