@charset "utf-8";
img { max-width: 100%; }
a { text-decoration: none; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; /*For IE 6&7 only*/ }

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.container { background: url(../images/index_bg.jpg) no-repeat center top; }
.index { background: url(../images/index-footer.png) no-repeat bottom center; }
.wrapper { width: 1200px; margin: auto; }
.header { background: #fff; border-bottom: #11ace8 7px solid; height: 95px; }

.header { font-family: "OpenSans Regular", Arial, Microsoft JhengHei ,  sans-serif; }
.language { float: right; line-height: 88px; background: #e6e6e6; padding: 0 10px; }
.language img { vertical-align: middle; }
.language select { border: none; background: url(../images/arrow.png) no-repeat right; padding-right: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 16px; font-family: "OpenSans Light", Arial, sans-serif; }
.language select::-ms-expand { /* for IE 11 */ display: none; }

.logo { float: left; }
.nav { float: right; }
.nav ul { margin: 0; padding: 0; }
.nav li { float: left; list-style-type: none; }
.nav li:not(:last-child):after { content: "|"; color: #131313; }
.nav li a { display: inline-block; line-height: 88px; padding: 0 20px; color: #131313; }
.nav li a:hover, .nav li.active a { background: #11ace8; color: #fff; }

.banner { margin: 5% 0 2% 55% ; WIDTH: 450px; }
#alt-caption { text-align: center; font-size: 20px; color: #00477b; font-family: "Lato Regular", Arial, sans-serif; }
.cycle-pager { text-align: center; }
.cycle-pager span { font-size: 3em; color: #9b820c; cursor: pointer; }
.cycle-pager span.cycle-pager-active { color: #fed100;  }

.news { margin: 0 0 0 55%; color: #333; font-family: "Lato Light", Arial, Microsoft JhengHei , sans-serif; font-size: 16px; }
.news .title, .about .title { font-size: 40px; color: #11ace8; font-family: "Arial Narrow", Arial, Microsoft JhengHei, sans-serif; }
.news .more, .about .more { display: inline-block; font-size: 20px; line-height: 1.5em; color: #222; font-family: 'Raleway Semi Bold', Arial, Microsoft JhengHei , sans-serif; float: right; background: url(../images/more.png) no-repeat 0px 0px; padding-left: 2em; }
.news .more a, .about .more a { color: #222; }
.news .more a:hover, .about .more a:hover { text-decoration: underline; }
.news a { color:#333;}
.news a:hover { color:#11ace8;}
.news dl dt { float:left; margin-right:10px; padding: 5px; width:180px; }
.news dl dt:after { content: "|"; margin: 0 16px;  }
.news dl dd { margin: 2px 0; padding: 5px 0; line-height: 1.4; }

.about { float: left; width: 40%; line-height: 1.8em; font-size: 18px; color: #333; font-family: "Lato Light", Arial, Microsoft JhengHei , sans-serif; }
.about .title { color: #fff; }
.cominfo { color: #fff; float: right; width: 45%; text-align: center; margin: 10em 2em 0 0; font-size: 14px; font-family: "Lato Regular", Arial, Microsoft JhengHei ,  sans-serif; line-height: 2em; }
.cominfo ul { padding: 0; }
.cominfo li { list-style-type: none; font-family: Microsoft JhengHei ; }
.cominfo .comName { font-size: 20px; font-family: "Lato Bold", Arial, Microsoft JhengHei , sans-serif; }
.cominfo .design { font-size: 13px; }
.cominfo .design a{ color:#FFFFFF;}

.footer { margin: 2em 0 0; padding: 6em 0 3em; }
#return-to-top { display: block; position: fixed; z-index: 1; bottom: 10px; right: 10px; text-align: center; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7);
	width: 50px; height: 50px; display: block; text-decoration: none; border-radius: 35px; display: none;
	-webkit-transition: all 0.3s linear; -webkit-transition: all 0.3s ease;	transition: all 0.3s ease; }
#return-to-top i { color: #fff; text-align: center;	line-height: 45px; font-size: 30px;	-webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#return-to-top:hover { background: rgba(0, 0, 0, 0.9); }

.toggle-menu { display: none; background: #11ace8; color: #fff; padding: 10px 20px; }
[off-canvas] { background: #48a3da; }

@media (max-width:1200px) {
	.wrapper { width: 100%; }
	.banner { margin-bottom: 0; }
	.news { margin: 0 15px 0 45%; }
	.news .more { margin-right: 3em; }
	.about { padding-left: 15px; }
}
@media (max-width:1100px) {
	.header .nav li a { padding: 0 13px; font-size: 16px; }
	.language select { font-size: 16px; }
}
@media (max-width:1024px) {
	.container { background-position: left -100px top 2em; background-size: 120%; }
	.header .nav li a { padding: 0 15px; font-size: 14px; }
	.language select { font-size: 14px; }
	.news { margin-left: 35%; }
	.footer { padding: 0; }
	.about .more { margin-right: 30px; }
}
@media (max-width:1023px) {
	.header .nav li a { padding: 0 5px; font-size: 14px; }
}
@media (max-width:900px) {
	.header .nav li a { padding: 0 3px; font-size: 12px; }
	.language select { font-size: 12px; }
}
@media (max-width:800px) {
	.header .language, .header .nav { display: none; }
	.header { padding: 10px; height: 90px; }
	.container { background-position: left -180px top 5em; background-size: 150%; }
	.banner { width: auto; margin-top: 5em; margin-left: 45%; }
	.news { margin-left: 15%; }
	.footer { padding: 0; }
	.about { padding-left: 15px; line-height: 1.8em; }
	.about .more { margin-right: 130px; }
	.cominfo { margin: 16em 0 0; line-height: 1.5em; }
	.toggle-menu { display: block; }
	.side-nav .language { float: none; line-height: 38px; background: #e6e6e6; }
	.side-nav .language select { font-size: 16px; }
	.side-nav .main-menu { padding: 0; margin: 0; list-style-type: none; }
	.side-nav .main-menu a { display: block; border-bottom: #308dc6 1px solid; color: #e4fdf9; font-size: 14px; padding: 18px; }
	.side-nav .main-menu a:hover, .side-nav .main-menu .active a {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d76b7+0,0f75b3+100 */
		background: rgb(13,118,183); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(13,118,183,1) 0%, rgba(15,117,179,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(13,118,183,1) 0%,rgba(15,117,179,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(13,118,183,1) 0%,rgba(15,117,179,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d76b7', endColorstr='#0f75b3',GradientType=0 ); /* IE6-9 */ }
}
@media (max-width:768px) {
	.banner { width: auto; margin-top: 5em; margin-left: 40%; }
	.about {line-height: 1.5em; }
}
@media (max-width:640px) {
	.index { background-position: bottom -130px right -330px; }
	.news { margin: 0; padding: 0 15px; }
	.news .more, .about .more { margin-right: 0; }
	.about, .cominfo { float: none; width: 100%; }
	.about .title { color: #00477b; }
	.about { padding: 0 15px; margin-bottom: 10em; line-height: 1.8em; }
	.cominfo { line-height: 1.5em; }
	.container { background-position: left -180px top 7em; background-size: 150%; }
}
@media (max-width:480px) {
	.container { background: url(../images/index_bg-480.jpg) no-repeat center top; background-size:100%;    background-position: left 0 top 2em;}

	.index { background-position: bottom -130px right -410px; }
	.banner { margin: 17em auto 0; width: 100%; background: #fff; }
	.news dl dt { float: none; width: 100%; padding: 0; }
}
@media (max-width:375px) {

	.index { background-position: bottom -80px right -470px; }
}
@media (max-width:320px) {

	.index { background-position: bottom -80px right -500px; }
	.news, .about { padding: 0 10px; }
}