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

@import url("reset.css");

a{ text-decoration:none; outline:none;}
img{ vertical-align:top;}
li{ list-style:none;}

body,html{margin:0;height:100%}
body{height:100%;width:100%;margin:0;padding:0}
.clearfix:after,.clearfix:before{content:"";display:table;height:0;overflow:hidden}
.clearfix:after{clear:both}
.clearfix{zoom:1}
/* https://daneden.github.io/animate.css/ */

*{margin: 0;padding: 0;outline: none;}
.WRAPPER{width:950px;height:auto;margin: 0 auto;overflow: hidden;}

.YEQIAN{width: 100%;height:110px;background: url('../images/yeqian-bg.jpg') no-repeat center top;}
.YEQIAN ul{width:97.5%;height: auto;margin: 0 auto;padding-left: 2.5%;}
.YEQIAN li a{display: block;width: 100%;height:110px;}
.YEQIAN li{float: left;width:33.33%;height: 110px;}
.YEQIAN li:nth-child(1){background: url(../images/li-1.png) no-repeat center top;background-position:10px 10px; background-size: 90%;}
.YEQIAN li:nth-child(1):hover{background: url(../images/li-2.png) no-repeat center top;background-position:-40px 5px; background-size: 110%;}
.YEQIAN li:nth-child(2){background: url(../images/li-3.png) no-repeat center top;background-position:10px 10px; background-size: 90%;}
.YEQIAN li:nth-child(2):hover{background: url(../images/li-4.png) no-repeat center top;background-position:5px 5px; background-size: 100%;}
.YEQIAN li:nth-child(3){background: url(../images/li-5.png) no-repeat center top;background-position:5px 15px; background-size: 100%;}
.YEQIAN li:nth-child(3):hover{background: url(../images/li-6.png) no-repeat center top;background-position:0px 10px; background-size: 110%;}
.YEQIAN li:hover{transition: .2s ease-in-out;}

.PINPAI{width: 950px;height: 245px;margin: 0 auto;background: url(../images/pinpai-bg.jpg) no-repeat center top;overflow: hidden;}
.PINPAI ul{width: 770px;height: auto;padding-left: 75px;padding-top: 13px;}
.PINPAI li{float: left;width: 190px;height: 120px;}
.PINPAI li img{width: 90%;height: auto;margin: 0 5%;}
.PINPAI li img:hover{width: 110%;height: auto;transition: .2s ease-in-out;transform: translate(-10%,-10%);overflow: hidden;}

/*
.BOUNCED{animation: bounceIn 2s;-webkit-animation-name: bounceIn;-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-timing-function: cubic-bezier(.215,.61,.355,1);}
*/


@media screen and (max-width:768px){
	
	body,html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
	
	.WRAPPER{width:100%;}
	.YEQIAN{height:0;padding-bottom: 11.578%;background-size: cover;}
	.YEQIAN ul{width:90%;height: auto;margin: 0 auto;padding-left: 0%;}
	.YEQIAN li a{width: 100%;height: 0;padding-bottom: 35%;}
	.YEQIAN li{width:33.33%;height:0;padding-bottom:12%;}
	.YEQIAN li:nth-child(1){background-position:0px 5px;}
	.YEQIAN li:nth-child(1):hover{background-position:-20px 5px;}
	.YEQIAN li:nth-child(2){background-position:0px 5px;}
	.YEQIAN li:nth-child(2):hover{background-position:-5px 5px;}
	.YEQIAN li:nth-child(3){background-position:0px 5px;}
	.YEQIAN li:nth-child(3):hover{background-position:0px 5px;}
	
	.PINPAI{width: 100%;height:0;padding-bottom:  25.789%; background-size: cover;}
	.PINPAI ul{width:83%;height: auto;padding-left: 8%;padding-top: 1.5%;}
	.PINPAI li{width: 25%;height:0;padding-bottom: 14%;}
	
	
}