@charset "UTF-8";
/**
 *
 * @authors Your Name (you@example.org)
 * @date    2020-09-28 16:45:42
 * @version $Id$
 */
section.banner{
	animation: myfirst 2s;
	-webkit-animation: myfirst 2s; /* Safari and Chrome */
	height: 600px;
	margin-top: 98px;
	background:url(../images/banner_design.jpg) no-repeat center;
	position: relative;
	overflow: hidden;
}
@keyframes myfirst
{
from {width: 0;}
to {width: 100%;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {width: 0;}
to {width: 100%;}
}
section.banner .title{
	margin-top: 229px;
	overflow: hidden;
	width: 100%;
}
section.banner .title img{
	display: block;
	margin: 0 auto;
}
section.design{
	margin-bottom: 90px;
}
section.design li{
	margin-top: 38px;
}
section.design li .pic{
	width: 880px;
	height: 500px;
	position: relative;
	overflow: hidden;
}
section.design li .pic img{
	width: 100%;
	height: 100%;
	position: absolute;
	top:50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
	transition:all 1s;
}
section.design li .pic img:hover{

	width: 110%;
	height: 110%;
}
section.design li .detail{
	background-color:#fdfaf6;
	width: 500px;
	height: 500px;
}
section.design li .detail h3{
	margin-top: 157px;
	margin-left: 106px;
	font-size:28px;
	margin-bottom: 92px;
	position: relative;
}
section.design li .detail h3:after{
	content:'';
	width: 36px;
	height: 1px;
	background-color:#c7ad8c;
	position: absolute;
	bottom: -38px;
	left: 0;
	z-index: 1;
}
section.design li .detail h3:before{
	content:'';
	width: 23px;
	height: 27px;
	background-image:url(../images/1.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	position: absolute;
	top: 6px;
	left: -36px;
	z-index: 1;
}
section.design li .detail p{
	font-size:16px;
	margin-left: 106px;
	line-height: 24px;
	width: 330px;
}
section.design li:nth-child(2) .detail h3:before{
	width: 30px;
	height: 27px;
	background-image:url(../images/2.png);
}
section.design li:nth-child(3) .detail h3:before{
	width: 32px;
	height: 27px;
	background-image:url(../images/3.png);
}
section.design li:nth-child(4) .detail h3:before{
	width: 27px;
	height: 26px;
	background-image:url(../images/4.png);
}
section.design li:nth-child(5) .detail h3:before{
	width: 32px;
	height: 27px;
	background-image:url(../images/5.png);
}