@charset "utf-8";
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { margin:0px; padding:0px; height:100%; }
body, th, td, input {
	font-family: "Hiragino Kaku Gothic Pro", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 120%;
}
a{ text-decoration: none;}
b{ font-weight:normal;}
p{ line-height: 150%; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{ font-weight:400;}
h1{ font-size:40px; font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; }
h2{ font-size:26px; font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:bolder; line-height: 100%;}
h3{ font-size:24px; font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:bold; }
h4{ font-size:18px; font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif;}
h5{ font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; }
h6{ font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; }
a:link, a:visited { text-decoration:none; cursor:pointer; }
table,th,td { margin:0; padding:0; border:none; outline:none; border-collapse:collapse; border-spacing:0; }
img{ border:0;}
body {
	background:#FFF;
}
/*----------------- 最外層包裝 --------------------*/
#wrapper {
	width:100%;
	position:relative;
	text-align:left;
}
/*----------------- header --------------------*/
#menu-top{
	width:100%;
	position: relative;
	background: #0c1c36;
}
#top-logo{
	width:984px;
	height:30px;
	margin:0 auto;
	padding:25px 20px;
}
#top-logo-l{
	width:297px;
	float:left;
}
#top-logo-l img{
	width:100%;
}
#banner-words {
	position: absolute;
	width:30%;
	z-index:9999;
	left:18%;
	top:30%;
	font-size:18px;
}
/*-----------------MENU_手機板選單--------------------*/

/*----------------menu-----------------------------*/
#top_menu { float:right; width:auto; }
#top_menu ul { margin:0px; padding:0px;}
#top_menu ul li { position:relative; float:left; margin:15px 0 0 0; padding:0; list-style:none; text-align:center; border-right:1px #575757 solid; }
#top_menu ul li a { display:block; padding:5px 10px; color:#bcbcbd;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out; }
#top_menu ul li a:hover {color:#FFF; }
#top_menu ul li a.cur {color:#FFF; }
#top_menu ul li:hover ul { display:block; }
#top_menu ul li ul { display:none; position:absolute; top:25px; left:0px; z-index:9999; background:url(../images/bg_w90.png) repeat; width:150px; }
#top_menu ul li ul li { width:100%; border-bottom:1px #575757 solid; border-right:0; padding:6px 0; margin:0;}
#top_menu ul li ul li a {}
#top_menu ul li ul li a:hover {color: #c9db1d; }
#top_menu ul li ul li a.cur {color: #c9db1d; }


#mid-menu{
	width:100%;
	background:#99a6bc;
	padding:12px 0;
	text-align:center;
}
/*----------------content-----------------------------*/
#ad{
	width:100%;
	position:relative;
}
#ad img{
	width:100%;
}
#content{
	width:100%;
	background:#c7cfdd;
	padding:30px 0 0 0;
	position:absolute;
}
#index-news{
	width:1024px;
	margin:0 auto;
}
#index-news p span{
	color:#FFF;
}
#index-news h3,h4{
	color:#0c1c36;
	margin:0;
	padding:0;
	line-height:160%;
}
#index-news h4{
	height:55px;
	overflow:hidden;
}
#index-news h4 a:link{
	color:#0c1c36;
}
#index-news h4 a:hover{
	text-decoration:underline;
}
#index-news h4 a:visited{
	color:#0c1c36;
}
#index-news ul{
	padding:0;
	margin:0;
}
#index-news li{
	list-style:none;
	width:31%;
	float:left;
	margin:20px 1%;
}
#index-news li img{
	width:100%;
	height:215px;
}
.news-clean{
	width:100%;
	clear:both;
	float:left;
	margin:15px 0;
	height:1px;
	background:#FFF;
}
/*----------------footer-----------------------------*/
#footer{
	width:100%;
	background:#0c1c36;
	padding:30px 0;
	border-top:1px #FFFFFF solid;
	position:relative;
	bottom:0;
	clear:both;
	text-align:center;
}
#footer p{
	color:#7f7f7f;
	line-height:140%;
}
/*----------------iframe-----------------------------*/
#if-show{
	width:90%;
	margin:0 auto;
	position: relative;
    padding-bottom:50%;
    overflow: hidden;
}
#if-show iframe{
	position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:95%;
	border:0;
}
/*----------------slider-----------------------------*/
<!-- SlidesJS Optional: If you'd like to use this design -->
#slides2 {
	display: none;
	margin-bottom:50px;
}
#slides2 img {
	width:100%;
}
.slidesjs-navigation {
	margin-top:3px;
}
.slidesjs-previous {
	margin-right: 5px;
	float: left;
}
.slidesjs-next {
	margin-right: 5px;
	float: left;
}
.slidesjs-pagination {
	/*margin: 6px 0 0;*/
	margin:0;
	float: right;
	list-style: none;
}
.slidesjs-pagination li {
	float: left;
	margin: 0 1px;
}
.slidesjs-pagination li a {
	display: block;
	width: 13px;
	height: 0;
	/*padding-top: 13px;*/
	padding-top:0;
	background-image: url(../images/pagination.png);
	background-position: 0 0;
	float: left;
	overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
	background-position: 0 -13px;
}
.slidesjs-pagination li a:hover {
    background-position: 0 -26px;
}
.navbar {
	overflow: hidden;
}
<!-- End SlidesJS Optional-->

<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
#slides {
	display: none;
}
.container {
	margin: 0 auto;
}

/* For tablets & smart phones */
@media (max-width: 767px) {
.container {
	width: auto;
}
}
/* For smartphones */
@media (max-width: 480px) {
.container {
	width: auto;
}
}
/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
.container {
	width: 724px;
}
}
/* For larger displays */
@media (min-width: 1200px) {
.container {
	width: 1170px;
}
}



/*平板-1*/
@media only screen and (max-width:1024px) {
#top-logo{
	width:95%;
	height:30px;
	margin:0 auto;
	padding:25px 0;
}
#top-logo-l{
	width:30%;
	float:left;
}
#top-logo-l img{
	width:100%;
}
#banner-words {
	position: absolute;
	width:38%;
	z-index:9999;
	left:8%;
	top:150px;
	font-size:18px;
}
#mid-menu img{
	width:12%;
}
#index-news{
	width:95%;
	margin:0 auto;
}
}



/*平板-2*/
@media only screen and (max-width:855px) {
#top-logo-l{
	width:297px;
	float:inherit;
	margin:0 auto;
}
#top_menu { display:none; }
#banner-words {
	font-size:15px;
}
#mid-menu img{
	width:15%;
}
#index-news h4{
	font-size:15px;
	height:45px;
	overflow:hidden;
}
}



/*平板-4*/
@media only screen and (max-width:570px) {
#banner-words {
	display:none;
}
#mid-menu img{
	width:18%;
	padding:0;
	margin:0;
}
#index-news li{
	list-style:none;
	width:48%;
	float:left;
	margin:20px 1%;
}
}