@charset "utf-8";
/* CSS Document */

/*主体*/
.content{margin:50px 0;}
.content ul{}
.content ul li{width:33.33%; float:left;  margin-bottom:40px;}
.content-img1{overflow:hidden;width:88%;margin: 0 6%;}
.content-img1 img{width:100%; max-width:100%; display:block;transition: all .6s;}
.content-font{width:100%;background-color:#F5F5F5; position:relative;}
.content-font1{font-size:18px; color:#333; text-align:center; padding:15px 0 0 0;}
.content-font2{font-size:14px; color:#333; text-align:center; padding:15px 0;}

					
.content-img1:hover  img{width:101%; transition:all .5s;transform:scale(1.1); -webkit-transition:all .5s; -webkit-transform:scale(1.1);}
.content-img1:hover .content-font{background-color:#00a051;}
.content-img1:hover .content-font1{color:#FFF;}
.content-img1:hover .content-font2{color:#FFF;}
.package{ overflow:hidden; width:100%;position:relative;}
.bottom-box{padding:30px 0; text-align:center; background-color:#00a051; font-size:40px; color:#FFF; font-weight:bold;}

.xt-top{ width:0; height:1px; background-color:#FFF; position:absolute; top:10px; left:5%; }
.xt-bottom{ width:0; height:1px; background-color:#FFF; position:absolute; bottom:10px; right:5%; }

.xt-left{ height:0; width:1px; background-color:#FFF; position:absolute; bottom:10px; left:5%; }
.xt-right{ height:0; width:1px; background-color:#FFF; position:absolute; top:10px; right:5%; }

.content-img1:hover  .package .xt-top{animation:go1 .8s forwards; -webkit-animation:go1 .8s forwards;}
.content-img1:hover  .package .xt-bottom{animation:go1 .8s forwards; -webkit-animation:go1 .8s forwards;}
.content-img1:hover  .package .xt-left{animation:go2 .8s forwards; -webkit-animation:go2 .8s forwards;}
.content-img1:hover  .package .xt-right{animation:go2 .8s forwards; -webkit-animation:go2 .8s forwards;}
@keyframes go1{
	from {width:0;}
    to {width:90%;}
	}
@keyframes go2{
	from {height:0;}
    to {height:calc(100% - 20px);height:-webkit-calc(100% - 20px); height:-moz-calc(100% - 20px);height:-o-calc(100% -        20px); height:-ms-calc(100% - 20px);}
	}

@media(max-width: 1024px){
	.content ul li{width: 50%;}
}
@media(max-width: 767px){
	.content ul li{width: 100%;margin-bottom: 20px;}
	.content-img1{margin: 0;width: 100%;}
	.content{margin: 20px 0 0;}
	.footer{margin-top: 0;}
	.con-nav .nav-new ul li{width: 33.33%;}
}