#banner{
	width:100%;
	height:100vh;
	background-image:url(../images/imgSeomove/banner.gif);
	background-repeat:no-repeat;
	background-position:0 100%;
	background-color: #d8d4c9;
	background-size:100%;
	position:relative;
}
#banner .txt h1{
	text-align:center;
	padding-top: 7%;
	position:relative;
}
#banner .txt h1:after{
    content: '';
    background-image: url(../images/imgSeomove/banner-title-s.png);
    background-repeat: no-repeat;
    background-position: 60% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#banner .scrollDown{
	position: absolute;
    left: 48%;
    bottom: 20px;
    -webkit-filter: drop-shadow(0px 0px 3px #6b6b6b);
	cursor:pointer;
}
#banner .work{
	position: absolute;
    right: 50px;
    bottom: 90px;
	width: 40%;
}
#advantage{
    background-image: url(../images/imgSeomove/bar-bg-book.png);
    background-repeat: repeat-x;
    background-position: 0% -10%;
	padding: 80px 0;
}
#advantage h2{
	text-align:center;
	font-size:40px;
}
#advantage p{
	text-align:center;
	font-size:20px;
}
#advantage ul{
    text-align: center;
    margin: 80px 0 50px;
}
#advantage li{
	display: inline-block;
    margin: 0 1%;
    width: 17%;
    text-align: center;
}
#advantage li:hover img{
	animation-name:img;
	animation-iteration-count:1;
	animation-timing-function:linear;
	animation-duration:0.2s;
}
@keyframes img{
	0{
		transform:scaleX(1);
	}
	50%{
		transform:scaleX(-1);
	}
	100%{
		transform:scaleX(1);
	}
}
#program{
	background-color:#52c3f1;
	padding:50px 0;
	position:relative;
	overflow:hidden;
}
#program:before{
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-image:url(../images/imgSeomove/float-01.png),url(../images/imgSeomove/float-02.png),url(../images/imgSeomove/float-03.png),url(../images/imgSeomove/float-04.png),url(../images/imgSeomove/float-03.png);
	background-repeat:no-repeat;
	background-position:10% 20%,60% 10%,75% 25%,7% 80%,90% 65%;
	animation-name:flo;
	animation-iteration-count:infinite;
	animation-duration:4s;
	animation-timing-function:linear;
	animation-direction:alternate;
}
@keyframes flo{
	0%{
		background-position:-10% 20%,60% 10%,75% 25%,7% 80%,90% 65%;
	}
	25%{
		background-position:-10% 20.5%,60% 11%,75% 24%,7% 80%,90% 64.5%;
	}
	50%{
		background-position:-10% 21.5%,60% 12%,75% 23%,7% 81%,90% 64%;
	}
	75%{
		background-position:-10% 22%,60% 11%,75% 24%,7% 82%,90% 63%;
	}
	100%{
		background-position:-10% 21%,60% 10%,75% 25%,7% 81%,90% 64.5%;
	}
}
#program .title{
    float: left;
    margin-top: 120px;
    margin-right: 80px;
}
#program ul{
	overflow:hidden;
	float:left;
    width: 500px;
}
#program li{
    background: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 35px 0;
    margin: 20px;
    width: 200px;
	float:left;
}
#program li:nth-child(2),
#program li:nth-child(4){
	float:right;
}
#program li:nth-child(2){
	margin-top: 100px;	
}
#program li h3{
	color:#ff4040;	
	text-align:center;
	font-size:24px;
	margin: 10px 0;
}
#program li p{
	text-align:center;
	font-size: 18px;
}
#program li b{
	color:#ff4040;
	transition:all linear 0.3s;
}
#program li:hover b{
	font-size: 22px;
}
#program .earth{
	position:absolute;
	right:5%;
    bottom: -200px;
	width: 35%;
}
#program:after{
	content: '';
    position: absolute;
    right: 19%;
    top: 52%;
    transform: scaleX(-1);
    width: 149px;
    height: 53px;
    background-image: url(../images/imgSeomove/float-plane.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    animation-name: plane;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    -webkit-filter: drop-shadow(-3px 5px 0px #565656);	
	opacity:1;
}
@keyframes plane{
	0{
		right: 19%;
		top: 52%;
		opacity:0.5;
		-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,1));	
	}
	10%{
		right: 23%;
		top: 52%;
		opacity:1;
		-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0.2));	
	}
	30%{
	    right: 60%;
		top: 10%;	
		opacity:1;
		-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0));	
	}
	50%{
		right: 100%;
		top: 5%;
		opacity:0;
		-webkit-filter: drop-shadow(-3px 5px 0px rgba(255,255,255,0));	
	}
	100%{
		right: 100%;
		top: 5%;
		opacity:0;
		-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0));	
	}
}
#bottom{
	background-image:url(../images/imgSeomove/bottom-bg.jpg);
	background-repeat:no-repeat;
	background-position:50% 50%;
	position:relative;
	padding: 150px 0;
	background-size: cover;
}
#bottom .txt{
	width: 60%;
}
#bottom .txt h2{
	color:#ff4040;
	font-size:40px;
}
#bottom .txt p{
	color:#4c4c4c;
	font-size:30px;
}
#bottom .txt p.sss{
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: 10px;
}
#bottom .txt p:last-child{
    float: right;
	margin-top: -150px;	
}
#bottom .town{
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 38%;
    text-align: center;
}
@media screen and (max-width: 1440px) {
	#banner .work{
	    bottom: 10%;
		width: 30%;	
	}
	#banner .txt h1{
		padding-top: 15%;
		-webkit-filter: drop-shadow(0px 0px 2px white);
	}
	#banner .txt h1 img{
	    width: 25%;	
	}
	#advantage h2,
	#bottom .txt h2{
		font-size: 32px;	
	}
	#program .title{
		margin-right: 50px;	
	}
	#program li h3,
	#bottom .txt p{
		font-size:22px;
	}
	#program li p,
	#bottom .txt p.sss{
		font-size:16px;
	}
	#program li{
	    width: 180px;	
	}
	#program ul{
		width:440px;
	}
	#bottom .txt p:last-child{
	    margin-top: 50px;	
	}
	#bottom .town{
		right: 0;
		width: 40%;
		bottom: initial;
		top: 20%;	
	}
	#bottom{
		padding: 100px 0;
	}
	#program .earth{
		right: 0%;
	}
	#program:after{
		right: 0%;
		top: 52%;
		width: 100px;
		height: 53px;
		-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0));	
		opacity:1;
		background-size:100%;
	}
	@keyframes plane{
		0{
			right: 14%;
			top: 52%;
			opacity:0.5;
			-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0));	
		}
		10%{
			right: 18%;
			top: 52%;
			opacity:1;
			-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0));	
		}
		30%{
			right: 55%;
			top: 10%;	
			opacity:1;
			-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0));	
		}
		50%{
			right: 100%;
			top: 5%;
			opacity:0;
			-webkit-filter: drop-shadow(-3px 5px 0px rgba(255,255,255,0));	
		}
		100%{
			right: 100%;
			top: 5%;
			opacity:0.5;
			-webkit-filter: drop-shadow(-3px 5px 0px rgba(86,86,86,0));	
		}
	}
}
@media screen and (max-width: 1680px) {
	#bottom .txt p:last-child{
	    margin-top: 50px;	
		margin-right: 50px;
	}
}
@media screen and (max-width: 1280px) {
	#banner .txt h1 img{
	    width: 30%;	
	}
	#banner{
		background-image:url(../images/imgSeomove/banner.png);
	}
}
@media screen and (max-width: 980px) {
	#banner .txt h1 img{
	    width: 40%;	
	}
	#banner .work{
		bottom: 5%;
		width: 50%;
		right: 0;		
	}
	#advantage li{
		width:25%;
	}
	#advantage h2, #bottom .txt h2{
		font-size: 28px;
	}
	#advantage p{
		font-size: 16px;	
	}
	#program .title{
		margin: 0 2% 0;
		width: 18%;
	}
	#program ul{
	    width: 76%;	
	}
	#program li,
	#program li:nth-child(2),
	#program li:nth-child(4){
		width: auto;
		float: none;
		margin:20px 0;
		padding: 15px 0;	
	}
	#program li h3{
	    margin: 0;	
	}
}
@media screen and (max-width: 768px) {
	#banner .txt h1 img{
	    width: 50%;	
	}
	#banner{
		background-position: 50% 100%;
		background-size: cover;		
	}
	#banner .txt h1:after{
	    background-size: 150px;	
		background-position: 70% 55%;
	}
	#program .earth{
		right: initial;
		left: 0;
		bottom: -50px;		
	}
	#bottom .txt p:last-child img{
		width: 150px;
	}
	#bottom .txt p{
		font-size:18px;
	}
	#bottom .txt{
		width:100%;
	}
	#bottom .town{
	    top: 5%;	
	}
	#bottom{
	    padding: 100px 0 50px;	
	}
}
@media screen and (max-width: 640px) {
	#banner .txt h1 img{
	    width: 60%;	
	}
	#program .title{
		margin: 0 2% 0;
		width: 22%;
	}
	#program ul{
	    width: 74%;	
	}
	#bottom .town{
	    right: initial;
		left: 2%;
		top: initial;
		bottom: 3%;	
	}
}
@media screen and (max-width: 480px) {
	#banner .txt h1 img{
	    width: 70%;	
	}
	#banner .work{
		width: 70%;
	}
	#banner .txt h1{
		padding-top: 25%;	
	}
	#banner .txt h1:after{
		background-size: 120px;	
		background-position: 75% 55%;
	}
	#program .title{
		margin: 0 0 30px;
		width: 100%;
		text-align:center;
	}
	#program .title img{
		width:120px;
	}
	#program ul{
	    width: 80%;	
		margin:0 10%;
	}
	#program li h3{
		font-size:20px;
	}
	#program .earth{
		right: initial;
		left: -30%;
		bottom: -80px;
		width: 70%;		
	}
	#advantage li{
	    width: 40%;
		margin: 0 1% 20px;	
	}
	#advantage li:last-child,
	#advantage li:nth-child(3),
	#advantage li:nth-child(4){
		margin: 0 1% 0;	
	}
	#advantage h2, #bottom .txt h2{
		font-size: 22px;	
	}
	#bottom .txt p:last-child{
	    margin-right: 0;	
	}
	#bottom .town{
	    width: 55%;	
	}
	#bottom{
	    padding: 50px 0;	
	}
	@keyframes flo{
		0%{
			background-position:-10% 50%,20% 10%,75% 35%,7% 80%,90% 65%;
		}
		25%{
			background-position:-10% 50.5%,20% 11%,75% 34%,7% 80%,90% 64.5%;
		}
		50%{
			background-position:-10% 51.5%,20% 12%,75% 33%,7% 81%,90% 64%;
		}
		75%{
			background-position:-10% 52%,20% 11%,75% 34%,7% 82%,90% 63%;
		}
		100%{
			background-position:-10% 51%,20% 10%,75% 35%,7% 81%,90% 64.5%;
		}
	}
}
@media screen and (max-width: 350px) {
	#banner .txt h1:after{
	    background-size: 100px;	
		background-position: 75% 55%;
	}
}