@charset "utf-8";
/* CSS Document */

@import url("reset.css");

body{
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#333333;
	-webkit-text-size-adjust:none;
}

.webout{
	max-width:2000px;
	margin:0 auto;
	overflow:hidden;
}

.out{
	max-width:1010px;
	padding:0 20px;
	margin:0 auto;
}

/*HEADER-----------------------------------------*/
header{
	background:url(../images/top_line.png) top center repeat-x;
	background-size:65px auto;
	padding:35px 0 30px;
}

header img{
	width:60%;
	max-width:250px;
}

/*BANNER-----------------------------------------*/
.banner .out{
	padding:0;
	text-align:center;
}

.banner .text{
	width:100%;
	max-width:580px;
}

.banner .image{
	width:72%;
	max-width:415px;
}

/*CONTENT-----------------------------------------*/
.content{
	background:#EEEEEE url(../images/bg.png) top center no-repeat;
	margin-top:120px;
}

.content .box{
	max-width:870px;
	padding:50px;
	border:#008E6B 4px solid;
	border-radius:10px;
	background-color:#FFFFFF;
	background-repeat:no-repeat;
	background-size:15px;
	background-image:url(../images/corner.png),url(../images/corner.png),url(../images/corner.png),url(../images/corner.png);
	background-position:left 7px top 7px, right 7px top 7px, left 7px bottom 7px, right 7px bottom 7px;
	margin:0 auto;
	position:relative;
	top:-65px;
	font-size:20px;
	line-height:1.5em;
}

.content .box:after{
	content:"";
	position:absolute;
	left:0;
	bottom:-51px;
	width:100%;
	height:47px;
	background:url(../images/shadow.png) top center no-repeat;
	background-size:100% auto;
}

.content p span{
	color:#CC0000;
	border-bottom:#CC0000 1px solid;
}

.content p:last-child{
	text-align:right;
}

.content ul{
	margin:1.2em 0;
}

.content li div{
	display:inline-block;
	vertical-align:top;
	padding:10px 0;
	border-bottom:#008E6B 1px solid;
}

.content li div span{
	font-size:0.8em;
	position:relative;
	top:-0.5em;
}

.content li div:nth-child(1){
	width:7em;
}

.content li div:nth-child(2){
	width:11em;
}

.content li:last-child div{
	border:none;
}

/*FOOTER-----------------------------------------*/
footer{
	font-size:14px;
	line-height:2em;
	color:#FFFFFF;
	text-align:center;
	padding:40px 20px 25px;
	background:#008E6B url(../images/footer_shadow.png) top 14px center no-repeat;
	position:relative;
}

footer:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:14px;
	background:url(../images/bottom_line.png) center repeat-x;
	background-size:auto 14px;
}

footer .mb{
	display:none;
}

footer span{
	padding:0 1em;
	opacity:0.2;
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
	/*BANNER-----------------------------------------*/
	.banner .out{
		padding:0 20px;
	}
	
	/*CONTENT-----------------------------------------*/
	.content .box{
		padding:50px 20px;
	}
	
	/*FOOTER-----------------------------------------*/
	footer .mb{
		display:inline;
	}

	footer span{
		display:none;
	}
}

@media only screen and (max-width:500px){
	/*CONTENT-----------------------------------------*/
	.content li div{
		display:block;
		padding:0;
		border-bottom:none;
	}
	
	.content li div:nth-child(1){
		font-weight:bold;
		padding:5px 0;
	}
	
	.content li:last-child div:nth-child(2){
		margin-top:-0.5em;
	}
}