
.homehot {
	width: 100%;
}

.title{
	width: 100%;
	color: #2f2f2f;
	font-size: 18px;
	line-height: 40px;
}

.title span {
	width: 100%;
	font-size: 35px;.box img { width: 370px; border-radius:10px; }
	display: block;
}
.homehot .row{
	padding-top: 50px;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	width:100%;
	position: relative;
}
.homehot .row .item{
    width:370px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 40px;

    box-sizing: box-sizing;
}
.homehot .row .item:nth-of-type(3n) {
    margin-right: 0!important;
}

.homehot .row .item img{
	width:100%
}



#div1 {float:left; position: relative;width:100%; margin-top:50px}
.box { float: left;}
.box:hover {  }
.box img { width: 370px; border-radius:10px; }



.box .div {
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	background-image: url(../images/15.png);
	background-repeat: no-repeat;
	background-position:270px 30px;
	background-size: 40px auto;
	width: 90%;
	height: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #f94f36;
	padding: 20px;
	box-sizing: border-box; 
	display: none;
 
}
.box .div div{
	position: absolute;
	bottom: 10px;
}
.box .div div p{
	color: #0a112b;
}
.box:hover .div{
	display: block;
}


.more {
	font-weight: bold;
	display: flex;
	align-items: center;	
}

.more img {
	width: 33px;
	margin-left: 10px;
}

.homehot {
	width: 100%;
}
.homehot .div {
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	background-image: url(../images/15.png);
	background-repeat: no-repeat;
	background-position:270px 30px;
	background-size: 40px auto;
	width: 90%;
	height: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #f94f36;
	padding: 20px;
	box-sizing: border-box; 
	display: none;
 
}
.homehot .div div{
	position: absolute;
	bottom: 10px;
}
.homehot .div div p{
	color: #0a112b;
}
.homehot .row .item:hover .div{
	display: block;
}


.homehot .type
{
	width:100%;
	display: flex;
	flex-direction: column;
}

.homehot .type .colortype
{
	width:100%;
	display: flex;
	margin-top: 20px;

}

.homehot .type .colortype div
{
	width:90px;
	height:10px;
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
}

.homehot .colortype div:nth-child(1){background-color: #e9e9e9;}
.homehot .colortype div:nth-child(2){background-color: #d40203;}
.homehot .colortype div:nth-child(3){background-color: #ed7b00;}
.homehot .colortype div:nth-child(4){background-color: #f5dd09;}
.homehot .colortype div:nth-child(5){background-color: #44bb00;}
.homehot .colortype div:nth-child(6){background-color: #04d2b7;}
.homehot .colortype div:nth-child(7){background-color: #0463e6;}
.homehot .colortype div:nth-child(8){background-color: #7f00c8;}
.homehot .colortype div:nth-child(9){background-color: #8e511a;}
.homehot .colortype div:nth-child(10){background-color: #000000;}
.homehot .colortype div:nth-child(11){background-color: #fff;border: 1px solid #f4f4f4;}
.homehot .colortype div:nth-child(12){background-image: linear-gradient(45deg, #FF0000,#FFF200, #1E9600);}

.homehot .colortype .on::before{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #959595;
	position: absolute;
	left: 50%;
	top:-8px;
	transform: translate(-50%, 0%);
}
.homehot .typenav{
	width:100%;
	/*border-top: 1px solid #f3f3f3;*/
	/*border-bottom: 1px solid #f3f3f3;*/
	margin-top: 20px;
	box-sizing: border-box;
}
.homehot .typenav form{
	display: flex;
}
.homehot .typenav div{
	/*width: 160px;*/
}