* { margin: 0px; padding: 0px; }
body {background: #fff url("../images/banner.png") center top no-repeat; -webkit-text-size-adjust: none;}
html {min-width: 1200px; }
.wraper {width: 100%;margin: 0 auto;min-width: 1200px}
.wrap {width: 1200px; margin: 0px auto; }
.fl {float: left; }
.fr {float: right; }
dl, dt, ul { list-style: none; text-decoration: none; padding-inline-start: 0px; }
a {text-decoration: none; color: #333;}
.clearfix::before, .clearfix::after { content: ""; display: table; clear: both; }
.un {transition: all 0.3s ease-out 0s; }
.none {display: none; }
.ellipsis {text-overflow: ellipsis;white-space: nowrap; overflow: hidden}
.logo{margin-top: 30px;}
.inr{width: 1050px; margin: 440px auto 30px; font-size: 18px; color: #fff; line-height: 28px; text-indent: 2em;}
.title{ margin: 50px auto; text-align: center;}
.inrBox{display: flex; justify-content: space-between}
.inrBox li{background: url(../images/abg.png) center no-repeat; width: 280px; height: 280px; display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box; padding-top: 25px; font-size: 18px;}
.inrBox li img{width: 88px;}
.inrBox li h2{color: #99752e; font-size: 24px; margin: 10px 0;}
.inrBox li p{line-height: 28px;}
.inrBox li:nth-child(4){margin-right: 0;}
.video li{width: 578px; height: 354px; background: url(../images/videoBg.png) center right no-repeat; position: relative; margin-right: 40px;}
.video li:nth-child(2n){margin-right: 0;}
.video li .teacher{position: absolute; top: 30px; left: 0px;}
.video li .subs{position: absolute;z-index: 100;background-color: #ff9e0c;background-image: linear-gradient(to bottom,#ffb919,#ff8a01);min-width: 60px;height: 30px;line-height: 30px;font-size: 18px;font-weight: bold;color: #fff;text-align: center;border-radius: 20px 20px 20px 0;bottom: 25px;left: 140px;padding: 0 6px;}
.video li .content{width: 360px; margin-left: 210px; margin-top: 32px;}
.video li .content h2{font-size: 24px; color: #333;}
.video li .content h2 span{font-size: 17px; font-weight: normal;}
.video li .content .school{background: #00bd8e; display: inline-block; color: #fff; padding: 4px 10px; margin: 10px 0;}
.video li .content p{color: #666; line-height: 25px;}
.video li .content p .circles{display: inline-block; width: 6px; height: 6px; border-radius: 10px; position: relative; top: -2px; margin-right: 3px;}
.video li .content p .green{background-color: #009973;}
.video li .content p .yellow{background-color: #fac975;}
.video li .content dl dt{font-size: 18px; color: #009973; font-weight: bold; margin: 10px 0;} 
.video li .content dl dd{line-height: 25px;}
.video li .content dl dd:hover{color: #00bd8e;}
.video li .bofang{position: absolute; right: 20px; bottom: 20px;}

.direction .box{width: 597px; height: 523px; padding-left: 10px; box-sizing: border-box;}
.direction .box li{width: 90%; margin: 20px auto; height: 110px; box-sizing: border-box; padding: 20px; color: #555;}
.direction .box li img{margin-right: 13px; margin-top: 5px;}
.direction .box h3{font-size: 22px; margin-bottom: 5px;}
.direction .box.green{background: url(../images/bbg1.png) center no-repeat;}
.direction .box.yellow{background: url(../images/bbg2.png) center no-repeat;}
.direction .box.green h2,.direction .box.green h3{color: #00bd8e;}
.direction .box.yellow h2{color: #e59100;}
.direction .box.yellow h3{color: #99752e;}
.direction .box.green li{background: #f0fffb;}
.direction .box.yellow li{background: #fffdf0;}
.direction .box h2{height: 95px; line-height: 95px; padding-left: 30px; font-size: 24px;}
.direction .box{margin-bottom: 20px; margin-right: 5px;}
.direction .box:nth-child(2n){margin-right: 0;}

.trip{border-radius: 10px; background: url(../images/green.png) center no-repeat; display: flex; justify-content: space-around;}
.trip div{padding: 25px 0; text-align: center; line-height: 25px; color: #fff;}
.trip div img{margin-bottom: 12px;}

.sail{height: 520px;position: relative;margin-bottom: 91px;}
.sails{background: url(../images/circle.png) center no-repeat;height: 520px; position: absolute; top: 0; left: 0; animation:play 3s linear infinite; z-index: 1; width: 100%;}
@keyframes play{
    0% {
        transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
        transform:rotate(-360deg);
    }
}
.sail .unit{text-align: center;  width: 244px; position: absolute; z-index: 100;}
.sail .unit div{line-height: 42px; font-size: 24px; font-weight: bold; color: #fff; text-align: center; position: relative; margin-bottom: 10px;}
.sail .unit p{line-height: 25px;}
.sail .unit span{position: absolute; left: 5px;}
.sail .left span{right: -202px;left: 0;}
.sail .unit .green span{color: #00bd8e;}
.sail .unit .orange span{color: #ff8900;}
.sail .m1 .green,.sail .m5 .green{background: url(../images/d1.png) center no-repeat; height: 42px; width: 244px;}
.sail .m2 .green,.sail .m6 .green{background: url(../images/d2.png) center no-repeat; height: 42px; width: 244px;}
.sail .m3 .orange{background: url(../images/d3.png) center no-repeat; height: 42px; width: 244px;}
.sail .m4 .orange{background: url(../images/d4.png) center no-repeat; height: 42px; width: 244px;}
.sail .m1{left: 90px;top: 80px;}
.sail .m2{left: 850px;top: 80px;}
.sail .m3{left: 20px;top: 242px;}
.sail .m4{left: 900px;top: 242px;}
.sail .m5{left: 90px;top: 400px;}
.sail .m6{left: 850px;top: 400px;}

.bot{background: url(../images/green1.png) center no-repeat; height: 233px; text-align: center; box-sizing: border-box; padding-top: 48px;}
.bot h2{color: #009973; font-size: 22px; margin-bottom: 30px;}
.bot p{font-size: 22px; color: #fff;}

.pulse:hover{animation-name: pulse;
	-webkit-animation-name: pulse;	
	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;}
@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}
.swing:hover{-webkit-animation:swing 1s .2s ease both;
-moz-animation:swing 1s .2s ease both;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% {
-webkit-transform-origin:top center
}
20% {
-webkit-transform:rotate(7deg)
}
40% {
-webkit-transform:rotate(-5deg)
}
60% {
-webkit-transform:rotate(2deg)
}
80% {
-webkit-transform:rotate(-2deg)
}
100% {
-webkit-transform:rotate(0deg)
}
}
@-moz-keyframes swing {
20%, 40%, 60%, 80%, 100% {
-moz-transform-origin:top center
}
20% {
-moz-transform:rotate(7deg)
}
40% {
-moz-transform:rotate(-5deg)
}
60% {
-moz-transform:rotate(2deg)
}
80% {
-moz-transform:rotate(-2deg)
}
100% {
-moz-transform:rotate(0deg)
}
}