body{
	overflow-x: hidden;
	background: #DCF3E2;
}

#inner_title{
	position: relative;
	width: 100%;
	height: 370px;
	background: url('../images/topimg.png') no-repeat;
}

#inner_title span{
	display: block;
	position: absolute;
	top: calc(50% - 0.8em);
	left: 20%;
	color: #FFF;
	font-size: 3.8em;
	font-weight: bold;
	font-family: '微軟正黑體', 'Microsoft JhengHe', Helvetica, serif;;
	letter-spacing: 0.02em;
}

#inner_title span:after{
	position: absolute;
	bottom: -20px;
	left: 0;
	display: block;
	content: ' ';
	width: 100%;
	height: 10px;
	background: #0048AA;
}

main{
	position: relative;
	width: 1200px;
	padding: 1em 0;
	margin: auto;
}

main:after{
	display: block;
	content: ' ';
	clear: both;
}

aside{
	width: 250px;
	z-index: 5;
}

main > article{
	width: calc(100% - 250px);
	box-sizing: border-box;
	margin: 1em 0 0 0;
}

main > article:after{
	display: block;
	content: ' ';
	clear: both;
}

main > *{
	float: left;
}

aside{
	margin: -40px 0 0 0;
}

aside > div{
	width: 100%;
	height: 45px;
	background-color: #00A05D;
	background-image: linear-gradient(135deg, #1bbe4f 0%, #02814f 100%);
	border-radius: 15px 15px 0 0;
	border: 1px solid #FFF;
	border-style: none solid none solid;
	text-align: center;
	font-size: 1.5em;
	line-height: 1.6em;
	font-weight: bold;
	color: #FFF;
}

aside > ul{
	display: block;
	width: 100%;
	background: #FFF;
	border: 1px solid #999;
}

aside li a{
	display: block;
	padding: 0.8em;
	font-size: 1.2em;
	font-weight: bold;
	color: #000;
}

aside li a i{
	margin: 0 0.5em 0 0;
	color: #00A05D;
}

aside li.active > a{
	background: #007D45;
	color: #FFF;
}

aside li li a{
	padding: 0.5em 0 0.5em 2em;
	font-size: 1em;
}

aside li ul{
	display: block;
	border-bottom: 1px solid #CCC;
}

h1{
	font-weight: bold;
	font-size: 2.2em;
	margin: 0 0 0 1.5em;
}

h2{
	margin: 0 0 0 1.5em;
}

#crmbs{
	display: block;
	width: calc(100% - 1em);
	text-align: right;
	margin: 0.5em 0 0 0;
}

#crmbs:after{
	display: block;
	content: ' ';
	width: 400%;
	height: 6px;
	background: #008000;
	box-shadow: 0.5px -1px 5px #999;
}

#crmbs li{
	display: inline-block;
}

#crmbs li a{
	font-size: 1em;
}

#crmbs li:after{
	content: '>';
	margin: 0 0.5em;
}

#crmbs li:last-child:after{
	display: none;
}

#crmbs li a{
	color: #000;
}

#asidebtn{
	display: none;
}

#asidebtn.active{
	background: red;
}

main > article > section{
	box-sizing: border-box;
	width: calc(100% - 2em);
	float: right;
}

.side_ad{
	background: #DCF3E2;
	border: none;
}

.side_ad{
	padding: 1em 0;
}

.side_ad a{
	padding: 0;
	margin: 0;
}

.side_ad li.side_ad_title{
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 1em 0.5em;

}

.side_ad li.side_ad_title:after,.idx_pc_title:after{
	content: ' ';
	display: block;
	width: 75%;
	height: 5px;
	background-image: linear-gradient(to left, #00A04D 0%, #34d472 100%);
	margin: 0.2em 0 0.2em -0.5em;
}

.idx_pc_title{
	margin: 1em  0 0 0;
	font-size: 1.6em;
	font-weight: bold;
}

.idx_pc_title:after{
	width: 30%;
}

.side_ad li.side_ad_list{
	text-align: center;
	margin: 0.8em 0 0 0;
}

.side_ad li.side_ad_list img:nth-child(2){
	display: none;
}

.side_ad li.side_ad_list:hover img:nth-child(1){
	display: none;
}

.side_ad li.side_ad_list:hover img:nth-child(2){
	display: inline-block;
}

.side_ad li.side_ad_list p{
	font-size: 1.2em;
	margin: 0.2em 0;
}

#worldTime{
	position: relative;
	width: 100%;
	height: 315px;
	background: #FFF;
	border-radius: 0;
	border: 10px solid #00A05D;
	box-sizing: border-box;
	margin: 2em 0 0 0;
	padding-bottom: 20px;
}

#worldTime:before{
	content: 'World Time';
	display: block;
	position: absolute;
	top: -1.5em;
	left: calc(50% - (168px / 2));
	width: 168px;
	text-align: center;
	z-index: 2;
	color: #000;
	font-size: 0.7em;
	background: #FFF;
	border: 1px solid #CCC;
	box-shadow: 1px 1px 3px #CCC;
}

/* ---------- */

#intro{
	padding: 1em;
	background: #FFF;
	box-shadow: 0px 0px 15px #8e9890;
}

/* ---------- */

@media screen and (max-width:1200px) {
	#asidebtn{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 35px;
		height: 35px;
		background: green;
		text-align: center;
		color: #FFF;
		display: block;
		padding: 10px 0 0 0;
		box-sizing: border-box;
		cursor: pointer;
	}

	main{
		width: 100%;
	}

	aside{
		top: 10px;
		left: -250px;
		position: absolute;
		margin: 0;
	}

	aside.active{
		top: 10px;
		left: 10px;
	}

	.side_ad{
		padding: 1em 0;
		border: 1px solid #CCC;
		border-bottom: none;
		border-top: none;
	}

	.side_ad:last-child{
		border-bottom: 1px solid #CCC;
	}

	#crmbs{
		width: calc(100% - 1em);
	}

	main > article{
		width: 100%;
		margin: auto;
	}

	main > article > section{
		width: 100%;
		padding: 0 1em 1em 1em;
		box-sizing: border-box;
	}
}

@media screen and (max-width:1100px) {
	#crmbs:after{
		width: calc(100% + 1em);
	}
}

@media screen and (max-width:500px) {
	#inner_title{
		text-align: center;
		height: 10em;
	}

	#inner_title span{
		display: inline-block;
		position: relative;
		text-align: center;
		left: 0;
		font-size: 2em;
	}
}