.banner{height: 300px;padding-top: 80px;position: relative;}
.banner .on{position: absolute;left:0px;top:162px;animation: myMove01 2s;}
.banner .on h3{font-size: 28px;color:#fff;position: absolute;left:260px;top: 24px;animation: myMove 1.6s;animation-delay:.2s;}
.banner .on p{font-size: 18px;color:#fff;position:absolute;left:260px; top:66px;
animation: myMove 1.6s;animation-delay:.6s;
}
@keyframes myMove{
0%{left:0;}
100%{left:260px;}
}
@keyframes myMove01{
0%{left:-1124px;}
100%{left:0;}
}
.wrap{width: 1174px;margin: 0 auto;}
.wrap li.last{margin-right: 3%;}
.main ul{overflow: hidden;padding-top: 50px;}
.main h3{width: 160px;border-bottom: 2px solid #750173;font-size: 20px;color:#750173;line-height: 86px;}
.til{border-bottom: 1px solid #e5e5e5;}
.father{overflow: hidden;display: block;height: 160px;width:100%;}
.father1{overflow: hidden;display: block;height: 260px;width:100%;}
.content ul{padding-bottom: 20px;}
.content h4{font-weight: normal;font-size: 16px;color:#555555;padding-bottom: 20px;}
.content h4::before{content:"|";padding-right: 4px;color:#750173;}
.content li{width: 16.666%;height: 220px;box-sizing:border-box;padding-top: 20px;cursor: pointer;	overflow: hidden;margin-right: 3%;text-align: center;float: left;position:relative;}
.content span{position:absolute;left:0;right:0;bottom:20px;display: block;text-align: center;color:#666666;}
.content{overflow: hidden;border-bottom: 1px solid #e5e5e5;}
.three li:nth-of-type(4) img{width: 30%;}
.five li:nth-of-type(4) img{margin-top:50px;}
.four li{width: 15%;}
.six li{margin-right: 3%;}
.content li:hover{border: 1px solid #e5e5e5;box-shadow:0 2px 10px rgba(0, 0, 0, 0.3);-webkit-box-sizing:border-box;}

.content img{width: 90%;}
.content.one img{width: 98%;}
.three img{width: 58%;}
.six img{width: 56%;}
@media (min-width: 320px) and (max-width:639px ) {
	.banner{height: 180px;}
    .banner .on{display: none;}
.banner img{width: 100%;height: 100%;}
.content.one img,.content img{width: 90%;}
.wrap{width: 93.75%;}
.content li{width: 100%;line-height: 0;}
.main h3{font-size: 16px;height: 70px;}
.content span{margin-top:0;}
.two li {height: 300px;padding-bottom: 20px;}
.two li img{width: 32%;}
.two li span{margin-top: 0;}
.three img{width: 23%;}
.three li:nth-of-type(4) img{width: 11%;}
.five img{margin-top: 0;width: 32%;}
.four img{width: 30%;}
.six img{width: 26%;}
}
@media (min-width:640px) and (max-width:1023px){	
	.wrap{width: 93.75%;}
.banner{height: 200px;}
.banner img{width: 100%;height: 100%;}
.banner .on{position: absolute;left:0px;top:176px;animation: myMove01 2s;}
.banner .on img{width: 100%;padding-left: 60px;}
.banner .on h3{font-size: 20px;left:260px;top:8px;}
.banner .on p{font-size: 14px;left:260px;top:36px;}.training h2{font-size: 24px;padding-top: 40px;padding-bottom: 20px;}
.content li{width: 22%;height: 220px;margin-right: 3%;line-height: 0;}
.content span{font-size: 12px;margin-top: 0;}
.content.one img,.content img{width: 90%;}
.three img{width: 58%;}
.five img{margin-top: 0;}
.three li:nth-of-type(4) img{width: 29%;}
}
@media (min-width: 1024px) and (max-width:1560px ){
.four span{margin-top: 0;}
	.wrap{width: 93.75%;}
.banner{height: 300px;}
.banner img{width: 100%;height: 100%;}
.content li{width: 22%;height: 220px;margin-right: 3%;line-height: 0;}
.content.one img,.content img{width: 90%;}
.three span, .six span,.two span,.five span{margin-top: 0;}
.three li:nth-of-type(4) img{width: 20%;}
.five img{margin-top: 0;}
.five li:nth-of-type(4) img{margin-top: 30px;}
.three img,.six img{width: 38%;}
}








