/* CSS Document */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;}
body{
	overflow-x: hidden;
}
footer{
	margin-top: 20vh;
	/*width: 100%;*/
	background-color: #3F542C;
	/*display: grid;*/
	/*grid-template-columns: 1fr 1fr 1fr;*/
	/*grid-auto-flow: dense;*/
}
nav{
	display: block;
	margin: 5px;
	width: 50%;
	float: right;
	position: sticky;
    top: 2vh;
}
nav a{
	text-decoration: none;
	color: #3F542C;
	padding: 0 3%;
}
nav a:hover{
	color:#7E604F;
}
#kouhao{
	width: 30vw;
	margin: 15vh auto -30vh 15vw;
}
#banner{
	width: 50vw;
	float: right;
	margin: 20vh auto -30vh -30vw;
}
#news{
	width:75vw;
	height: 75vh;
	background:rgba(63,84,44,0.25);
	margin-top: 20vh;
}
#goods{
    width:100%;
    height: 80vh;
    background:rgba(63,84,44,0.25);
	margin-top: 20vh;
    display: grid;/*设置父元素为框架布局*/
    grid-template-columns:3fr 1fr 1fr;/*分列，fr为自适应长度单位*/
    grid-template-rows:auto;
    /*grid-row-gap: 5px;
    grid-column-gap: 5px;*//*行列间距*//*gap：20px;*/
}
.box{
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}
.box:nth-of-type(1){
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 5;
}
.box{
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}
/*.box:hover{
	transform: scale(1.05);
	box-shadow: 0 25px 40px rgba(0,0,0,0.5);
	z-index: 1;
		}*/
.img-box img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 20px;
    color: aliceblue;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 2;
}
.text-box p{
    width: 100%;
    height: 2.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.img-box::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,#222,transparent);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
}
.box:hover .img-box::before{
    opacity: 1;
}
.box .text-box h2{
    font-size: 20px;
    margin-bottom: 10px;
    transform: translateY(200px);
    transition: 0.5s;
}
.box:hover .text-box h2{
    transform: translateY(0);
    transition-delay: 0.2s;
}		
.box .text-box p{
    font-size: 16px;
    transform: translateY(200px);
    transition: 0.5s;
}
.box:hover .text-box p{
    transform: translateY(0);
    transition-delay: 0.3s;
}
@media (max-width: 1000px) 
{
	#kouhao{
		width: 50vw;
		margin: 15vh auto -30vh 10vw;
	}
	#banner{
	width: 50vw;
	float: right;
	margin: -30vh auto -10vh -30vw;
	}
	#goods{
	height:100vh;
	grid-template-columns:repeat(2,1fr);
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .box:nth-of-type(1){
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    }
}