.banner{
	width: 100%;
	display: inline-block;
}
.banner01{background-color: #f4dbd0;}
.banner02{background-color: #bfc0ba;}
.banner03{background-color: #F1F1F1;}

.banner figure{	height: 100%;}
.banner figure img{height:auto ;width: 53%;}
.banner01 figure img{float: right;}
.banner02 figure img{float: left;}
.banner03 figure img{float: right;}
.banner04 figure img{width: 100%;}


.banner article {
	position: absolute;
	bottom: 20px;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 20px;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);}

.banner01 article {width: 55%;top: 2%;left: 5%; color: #fff;text-align: left;}
.banner02 article {width: 50%;top: 1%;right: 5%;color: #fff;text-align: left;}
.banner03 article {width: 55%;top: 3%;left: 5%;color: #fff;text-align: left;}


.banner article h2 {font-size: 2em;margin-bottom: 25px;border-radius: 1px;line-height: 34px;}
.banner article p {font-weight: 400;font-size: 3em;margin-bottom: 12px;border-radius: 2px;}

/* --.banner01----- */
.banner01 article h2 {padding: 0px 5px;color: #195a74;background: rgba(56, 194, 197, 0.0);}
.banner01 article p {font-size: 1.8em;background: rgba(48, 155, 190, 0.0);padding: 0px 5px;color: #973440;}

/* --.banner02----- */
.banner02 article h2 {padding: 3px 20px;margin-bottom: 15px;color: #FAF4F4;background: rgba(56, 194, 197, 0.62);}
.banner02 article p {color: #fff;font-size: 1.8em;background: rgba(48, 155, 190, 0.62);padding: 5px 20px;margin-bottom: 8px;}
.banner02 article .but {padding: 5px 20px;color: #FFFFFF;font-size: 13pt;float: right;display: block;background-color: #FF6A00;border-radius: 5px;}

/* --.banner03----- */
.banner03 article{ padding-top: 0px;text-shadow: 0 1px 2px rgba(0,0,0,.0);}
.banner03 article h2 {
	padding: 5px 20px;
	color: #FAF4F4;
	background-color: rgba(3,156,222,1.00);
	border-radius: 5px;	line-height: 25px

}
.banner03 article h3 {
	font-size: 1.9em;
	padding: 0px 15px;
	color: #DE6902;
	margin-bottom: 5px;
	margin-top: -15px;
}
.banner03 article p {
	color: #5C5C5C;
	font-size: 11pt;
	background: rgba(48, 155, 190, 0);
	padding: 2px 15px;
	line-height: 15px
}
.banner03 article .but {
	padding: 3px 20px;
	color: #FFFFFF;
	font-size: 12pt;
	float: left;
	display: block;
	background-color:rgba(3,156,222,1.00);
	border-radius: 5px;
	margin-left: 10px;
}

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

	.banner figure img{
		width: 55%;
		max-height: 220px;
		height: auto;
	}
	.banner04 figure img{width: 100%;}
	.banner article h2 {line-height: 30px;}

	.banner01 article {width: 60%;top: 3%;}
	.banner02 article {width: 55%;top: 3%;right: 5%;color: #fff;text-align: left;}
	.banner03 article {width: 60%;top: 2%;left: 7%;color: #fff;text-align: left;}

	/* --.banner01----- */
	.banner01 article h2 {
		font-size: 2em;
		margin-bottom: 20px;
	}
	.banner01 article p {
		font-size: 1.8em;
		margin-top: 0px;
	}

	/* --.banner02----- */
	.banner02 article h2 {font-size: 2em;}
	.banner02 article p {
		font-size: 1.8em;
		margin-top: 0px;
		padding:  5px 25px;
	}
	.banner02 article .but {padding: 5px 20px;color: #FFFFFF;font-size: 13pt;float: right;display: block;background-color: #FF6A00;border-radius: 5px;}

	/* --.banner03----- */
	.banner03 article{ padding-top: 10px;text-shadow: 0 1px 2px rgba(0,0,0,.0);}
	.banner03 article h2 {	font-size: 2em;}
	.banner03 article h3 {
		font-size: 2em;
		padding: 0px 15px;
		margin-bottom: 20px;
		margin-top: -5px;
	}

	.banner03 article p {display: none;}
	.banner03 article .but {
		padding: 5px 30px;
		color: #FFFFFF;
		font-size: 13pt;
		float: left;
		display: block;
		background-color:rgba(3,156,222,1.00);
		border-radius: 5px;
		margin-left: 10px;
	}
}



@media only screen and (min-width: 768px) and (max-width: 959px) {

	.banner04 figure img{width: 100%;}
	.rslides {
		position: relative;
		list-style: none;
		overflow: hidden;
		width: 100%;
		padding: 0;
		margin: 0;
		height: 175px;
	}

	.banner article h2 {line-height: 30px;}

	.banner01 article {width: 60%;top: 2%;}
	.banner02 article {width: 55%;top: 2%;right: 5%;color: #fff;text-align: left;}
	.banner03 article {width: 60%;top: 2%;left: 7%;color: #fff;text-align: left;}

	/* --.banner01----- */
	.banner01 article h2 {
		font-size: 2em;
		margin-bottom: 20px;
	}
	.banner01 article p {
		font-size: 1.8em;
		margin-top: 0px;
	}

	/* --.banner02----- */
	.banner02 article h2 {font-size: 2em;}
	.banner02 article p {
		font-size: 1.8em;
		margin-top: 0px;
		padding:  0px 25px;
	}
	.banner02 article .but {padding: 5px 20px;color: #FFFFFF;font-size: 13pt;float: right;display: block;background-color: #FF6A00;border-radius: 5px;}

	/* --.banner03----- */
	.banner03 article{ padding-top: 10px;text-shadow: 0 1px 2px rgba(0,0,0,.0);}
	.banner03 article h2 {	font-size: 2em;}
	.banner03 article h3 {
		font-size: 2em;
		padding: 0px 15px;
		margin-bottom: 10px;
		margin-top: -5px;
	}

	.banner03 article p {display: none;}
	.banner03 article .but {
		padding: 5px 30px;
		color: #FFFFFF;
		font-size: 13pt;
		float: left;
		display: block;
		background-color:rgba(3,156,222,1.00);
		border-radius: 5px;
		margin-left: 10px;
	}
}

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

	.banner04 figure img{width: 100%;}
	.rslides {
		position: relative;
		list-style: none;
		overflow: hidden;
		width: 100%;
		padding: 0;
		margin: 0;
		height: auto;
	}
	.banner figure img{
		width: 100%;
		height: auto;
	}
	.banner article{
		background-color: rgba(255,255,255,0.80);
		margin-bottom: 3%;

	}
	.banner01 article {width: 75%;top: 10%;left: 10%;margin-top: 0px;}
	.banner02 article {width: 75%;top: 10%;right: 10%;color: #fff;text-align: left;}
	.banner03 article {width: 75%;top: 10%;left: 10%;color: #fff;text-align: left;}


	.banner article h2 {font-size: 2em;margin-bottom: 25px;border-radius: 1px;line-height: 34px;}
	.banner article p {font-weight: 400;font-size: 3em;margin-bottom: 12px;border-radius: 2px;}

	/* --.banner01----- */
	.banner01 article h2 {padding: 15px 25px;color: #195a74;background: rgba(56, 194, 197, 0.0);}
	.banner01 article p {
		font-size: 1.8em;
		background: rgba(48, 155, 190, 0.0);
		padding: 10px 25px;
		color: #973440;
		margin-top: -10px;
	}

	/* --.banner02----- */
	.banner02 article h2 {padding: 10px 20px;margin-bottom: 20px;color: #FAF4F4;background: rgba(56, 194, 197, 0.62);}
	.banner02 article p {color: #fff;font-size: 1.8em;background: rgba(48, 155, 190, 0.62);padding: 10px 20px;margin-bottom: 5px;}
	.banner02 article .but {
		padding: 5px 20px;
		color: #FFFFFF;
		font-size: 13pt;
		float: right;
		display: block;
		background-color: #FF6A00;
		border-radius: 5px;
		margin-right: 20px;
		margin-top: 10px;
	}

	/* --.banner03----- */
	.banner03 article{ padding-top: 0px;text-shadow: 0 1px 2px rgba(0,0,0,.0);}
	.banner03 article h2 {
		padding: 10px 20px;
		color: #FAF4F4;
		background-color: rgba(3,156,222,1.00);
		border-radius: 5px;
		line-height: 30px;
		margin: 3%;
	}
	.banner03 article h3 {
		font-size: 1.9em;
		padding: 0px 15px;
		color: #DE6902;
		margin-bottom: 15px;
		margin-top: -0px;
	}

	.banner03 article .but {
		padding: 3px 20px;
		color: #FFFFFF;
		font-size: 12pt;
		float: left;
		display: block;
		background-color:rgba(3,156,222,1.00);
		border-radius: 5px;
		margin-left: 10px;
	}
}
@media screen and (max-width: 480px) {

	.banner figure{	height: 100%;}
	.banner figure img{height:110px ;width: 53%;}
	.banner01 figure img{float: right;}
	.banner02 figure img{float: left;}
	.banner03 figure img{float: right;}
	.banner04 figure img{width: 100%; height:110px;}
	.rslides {
		position: relative;
		list-style: none;
		overflow: hidden;
		width: 100%;
		padding: 0;
		margin: 0;
		height: 110px;
	}
	.banner article h2 {line-height: 15px;}


	/* --.banner01----- */

	.banner01 article h2 {
		font-size: 1.0em;
		margin-bottom: 5px;
		padding-top: 0px;
	}
	.banner01 article p {
		font-size: 1.0em;
		margin-top: -10px;
		padding-top: 0px;

	}

	/* --.banner02----- */
	.banner02 article h2 {font-size: 1.0em;	margin-top: -10px;
	}
	.banner02 article p {
		font-size: 1.0em;
		margin-top: -15px;
		padding:  5px 5px;
	}

	.banner02 article .but {padding: 5px 20px;color: #FFFFFF;font-size: 1.0em;float: right;display: block;background-color: #FF6A00;border-radius: 5px;margin-top:-45px;}

	/* --.banner03----- */
	.banner03 article{ padding-top: 10px;text-shadow: 0 1px 2px rgba(0,0,0,.0);}
	.banner03 article h2 {
		font-size: 1.0em;
		margin-top: -10px;
		border-radius: 0px;
	}
	.banner03 article h3 {
		font-size: 1.0em;
		padding: 0px 10px;
		margin-bottom: 10px;
		margin-top: -10px;
	}

	.banner03 article p {
		color: #5C5C5C;
		font-size: 1.0em;
		background: rgba(48, 155, 190, 0);
		padding: 2px 15px;
		line-height: 15px
	}
	.banner03 article .but {
		padding: 3px 20px;
		color: #FFFFFF;
		font-size: 1.0em;
		float: right;
		display: block;
		background-color:rgba(3,156,222,1.00);
		border-radius: 5px;
		margin-left: 10px;
		margin-top:-20px;
	}
}
@media screen and (max-width: 320px) {

	.banner figure{	height: 100%;}
	.banner figure img{height:110px ;width: 53%;}
	.banner01 figure img{float: right;}
	.banner02 figure img{float: left;}
	.banner03 figure img{float: right;}
	.banner04 figure img{width: 100%; height:110px;}
	.rslides {
		position: relative;
		list-style: none;
		overflow: hidden;
		width: 100%;
		padding: 0;
		margin: 0;
		height: 110px;
	}
	.banner article h2 {line-height: 15px;}


	/* --.banner01----- */

	.banner01 article h2 {
		font-size: 1.0em;
		margin-bottom: 5px;
		padding-top: 0px;
	}
	.banner01 article p {
		font-size: 1.0em;
		margin-top: -10px;
		padding-top: 0px;

	}

	/* --.banner02----- */
	.banner02 article h2 {font-size: 1.0em;	margin-top: -10px;
	}
	.banner02 article p {
		font-size: 1.0em;
		margin-top: -15px;
		padding:  5px 5px;
	}

	.banner02 article .but {padding: 5px 20px;color: #FFFFFF;font-size: 1.0em;float: right;display: block;background-color: #FF6A00;border-radius: 5px;margin-top:-45px;}

	/* --.banner03----- */
	.banner03 article{ padding-top: 10px;text-shadow: 0 1px 2px rgba(0,0,0,.0);}
	.banner03 article h2 {
		font-size: 1.0em;
		margin-top: -10px;
		border-radius: 0px;
	}
	.banner03 article h3 {
		font-size: 1.0em;
		padding: 0px 10px;
		margin-bottom: 10px;
		margin-top: -10px;
	}

	.banner03 article p {
		color: #5C5C5C;
		font-size: 1.0em;
		background: rgba(48, 155, 190, 0);
		padding: 2px 15px;
		line-height: 15px
	}
	.banner03 article .but {
		padding: 3px 20px;
		color: #FFFFFF;
		font-size: 1.0em;
		float: right;
		display: block;
		background-color:rgba(3,156,222,1.00);
		border-radius: 5px;
		margin-left: 10px;
		margin-top:-20px;
	}
}