/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600);
body {
	font-family:'Open Sans', Verdana, Geneva,'Microsoft JhengHei',"微軟正黑體", sans-serif;
	overflow-x: hidden;
	line-height: 1.6em;
	color: #000;
}
h1 {
	font-size: 2.25em;
	margin-bottom: 15px;
	line-height: 1.4em;
	padding: 0 20px;
}
h2 {
	font-size: 1.5em;
}
p { 
	margin-bottom: 2.25em;
}

header {
	margin: 53px auto 17px auto;
}
.logo {
	width: 193px;
	height: 64px;
	display: block;
	margin: auto;
	background-image: url("../../images/logo.png");
	background-size: cover;
}
.container {
	position: relative;
	width: 100%;
}

.main {
	width: 1280px;
	margin: 0 auto;
}
.title_decor::before {
	content:'';
	background: url("../../images/title_decor_L.png") center center no-repeat;
	background-size: cover;
	width: 23px;
	height: 9px;
	display: inline-block;
	margin-right: 16px;
	margin-bottom: 7px;
}
.title_decor::after {
	content:'';
	background: url("../../images/title_decor_R.png") center center no-repeat;
	background-size: cover;
	width: 23px;
	height: 6px;
	display: inline-block;
	margin-left: 16px;
	margin-bottom: 7px;
}
.main_image {
	position: relative;
	margin-bottom: 105px;
}
.main_image .image_slogan {
	position: absolute;
	top: 56px;
	width: 100%;
	text-align: center;
}
.side_image {
	padding: 0 60px;
	margin-bottom: 98px;
	text-align: right;
	position: relative;
}
.side_image .image_slogan {
	position: absolute;
	top: 65px;
	width: 52.8%;
	text-align: center;
}
.lay_column {
	display: table;
}
.lay_column div {
	/*display: table-cell;*/
	text-align: center;
	vertical-align: top;
	display: inline-block;
}
div.column_title {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 48px;
	
}
.menu {
	margin: 0 auto;
	padding-left: 47px;
}
.menu > div:not(.column_title) {
	/*width: 326px;*/
	width: 230px;
	/*padding: 40px 94px 127px 0;*/
	margin: 0 77px 50px 0;
	padding-top: 40px;
	position: relative;
}
.lay_column div.last{
	margin: 0 0 126px 0;
}

.menu div.last h2{
	width: 3em;padding: 5px 6px 0 0;
}

.menu h2 {
	width: 2em;
	margin: 0 auto 70px auto;
}
.icon01 {
	background: url("../../images/icon01.png") top center no-repeat;
	background-size: 182px 170px;
	width: 182px;
	height: 170px;
	position: absolute;
	top: 0;
	left: 55px;
}
.icon02 {
	background: url("../../images/icon02.png") top center no-repeat;
	background-size: 184px 168px;
	width: 184px;
	height: 168px;
	position: absolute;
	top: -15px;
	left: 55px;
}
.icon03 {
	background: url("../../images/icon03.png") top center no-repeat;
	background-size: 222px 176px;
	width: 222px;
	height: 176px;
	position: absolute;
	top: -10px;
	left: 55px;
}
.icon04 {
	background: url("../../images/icon04.png") top center no-repeat;
	background-size: 179px 154px;
	width: 179px;
	height: 154px;
	position: absolute;
	top: -25px;
	left: 50px;
}

footer {
	font-size: 0.875em;
	color: #666;
	text-align: center;
	padding-bottom: 25px;
	position: relative;
	height: 100px;
	background: url("../../images/bgg.jpg") center bottom no-repeat;
	 width: 1480px; margin: 0 auto;
}
footer p {
	margin-bottom: 0;
}
footer span {
	margin-right: 15px;
	
}
footer .text {
	/*position: absolute;
	z-index: 10;
	width: 100%;*/
	text-align: center;
	bottom: 24px;
}
footer .bg01 { 
	/*background: url("../../images/footer_bg_L.png") left bottom no-repeat;*/
}
footer .bg02 {min-height: 100px;
	/*background: url("../../images/footer_bg_R.png") right bottom no-repeat;*/
}
.copyR {
	font-size: 0.75em;
}

@media only screen and (max-width: 1480px) {
	footer {
		width: 100%;
	}
	
}
@media only screen and (max-width: 1279px) {
	.main {
		width: 100%;
	}
	.main_image img {
		width: 100%;
	}
	.main_image .image_slogan {
		top: 26px;
	}
	.menu {
		width: 666px;
	}
	.menu > div:not(.column_title) {
		margin: 0 77px 63px 0;
	}
}

@media only screen and (max-width: 999px) {
	.main_image {
		margin-bottom: 65px;
	}
	.side_image {
		padding: 0 30px;
	}
	.side_image .image_slogan {
		top: 5px;
		width: 45%;
	}
}

@media only screen and (max-width: 799px) {
	.side_image .image_slogan {
		position: relative;
		width: 100%;
	}
	.side_image img {
		width: 100%;
	}
	footer {
		background: url("../../images/bgg2.jpg") center bottom no-repeat;
	}
}

@media only screen and (max-width: 649px) {
	h1 {
	font-size: 2em;

}
	.main {
		padding: 0 1em;
	}
	.main_image {
		margin-bottom: 45px;
	}
	.main_image .image_slogan {
		position: relative;
	}
	.lay_column div {
		display: block;
	}
	.menu {
		width: 100%;
		padding-left: 0;
		padding-bottom: 30px;
	}
	.menu > div:not(.column_title) {
		width: 230px;
		margin: 0 auto 100px auto;
	}
	footer span {
		display: block;
	}
}