.banner {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.banner_BG {
	display: block;
	width: 100%;
}

.banner_title {
	position: absolute;
    top: 20%;
    right: 35%;
	width: 30%;
	opacity: 0;
	transition: .5s;
	transition-delay: 1s;
}

.show .banner_title {
    top: 10%;
    right: 20%;
	width: 60%;
	opacity: 1;
}

.banner_subtitle {
	position: absolute;
    top: 75%;
    right: 36.5%;
	width: 26%;
	opacity: 0;
	transition: .3s;
}

.show .banner_subtitle {
    top: 52.5%;
	opacity: 1;
}

.banner_button {
	position: absolute;
    top: 87.5%;
    right: calc( 50% - 175px );
	width: 350px;
	height: 50px;
	line-height: 46px;
	opacity: 0;
	transition: .3s;
	cursor: pointer;
	border: #f0df79 2px solid;
	border-radius: 35px;
	color: #f0df79;
	font-size: 23px;
	font-weight: 900;
	text-align: center;
	overflow: hidden;
}

.show .banner_button {
    top: 65%;
	opacity: 1;
}

.banner_button .animate {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 54px;
	margin: -2px;
	border-radius: 35px;
	transition: .3s;
	background: #f0df79;
	color: #333;
	overflow: hidden;
	transition-timing-function: cubic-bezier(.37,1.48,.49,.81);
}

.banner_button .animate_text {
	width: 350px;
	line-height: 50px;
}

.show .banner_button:hover {
	top: calc( 65% - 5px );
	transition: .3s;
}

.show .banner_button:hover .animate {
	width: 350px;
}

.flag {
	position: absolute;
    top: 125%;
    right: 33%;
	width: 34%;
	opacity: 0;
	transition: .3s;
	transition-delay: .4s;
}

.show .flag {
	position: absolute;
    top: calc( 65% + 75px );
	opacity: 1;
}

.banner_item_l_b {
	position: absolute;
	top: 0;
	left: -25%;
	height: 100%;
	opacity: 0;
	transition: .5s;
	transition-delay: 1s;
}

.show .banner_item_l_b {
	left: 0;
	opacity: 1;
}

.banner_item_l_f {
	position: absolute;
	top: 0;
	left: -50%;
	height: 100%;
	opacity: 0;
	transition: .5s;
	transition-delay: 1.2s;
}

.show .banner_item_l_f {
	left: 0;
	opacity: 1;
}


.banner_item_r_b {
	position: absolute;
	top: 0;
	right: -25%;
	height: 100%;
	opacity: 0;
	transition: .5s;
	transition-delay: 1s;
}

.show .banner_item_r_b {
	right: 0;
	opacity: 1;
}

.banner_item_r_f {
	position: absolute;
	top: 0;
	right: -50%;
	height: 100%;
	opacity: 0;
	transition: .5s;
	transition-delay: 1.2s;
}

.show .banner_item_r_f {
	right: 0;
	opacity: 1;
}




@media screen and (max-width: 1024px) {

	.banner_BG {
		width: 260%;
		margin: 0 -80%;
	}

	.banner_title {
		position: absolute;
		top: 20%;
		right: 25%;
		width: 50%;
		opacity: 0;
		transition: .5s;
		transition-delay: 1s;
	}
	
	.show .banner_title {
		top: 10%;
		right: -15%;
		width: 130%;
		opacity: 1;
	}
	
	.banner_subtitle {
		position: absolute;
		top: 75%;
		right: 17.5%;
		width: 65%;
		opacity: 0;
		transition: .3s;
		transition-delay: .3s;
	}
	
	.show .banner_subtitle {
		top: 47.5%;
		opacity: 1;
	}

	.banner_button {
		top: 87.5%;
		right: calc( 50% - 125px );
		width: 250px;
		height: 35px;
		line-height: 31px;
		font-size: 16px;
	}
	
	.show .banner_button {
		top: 60%;
		opacity: 1;
	}
	
	.banner_button .animate {
		height: 39px;
	}
	
	.banner_button .animate_text {
		width: 250px;
		line-height: 35px;
	}
	
	.show .banner_button:hover {
		top: calc( 60% - 5px );
	}
	
	.show .banner_button:hover .animate {
		width: 250px;
	}
	
	.flag {
		position: absolute;
		top: 125%;
		right: 0;
		width: 100%;
		opacity: 0;
		transition: .3s;
		transition-delay: .4s;
	}
	
	.show .flag {
		position: absolute;
		top: 77.5%;
		opacity: 1;
	}
	

	.banner_item_l_b,
	.banner_item_l_f,
	.banner_item_r_b,
	.banner_item_r_f {
		display: none;
	}
	
}

@media screen and (max-width: 979px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 320px) {
}

@media screen and (max-device-width: 480px) {
}