@import url("reset.css");
@import url("un-reset.css");

@charset "utf-8";
/* CSS Document */
#wrapper{}
#clear {clear:both; }
body{color:#000; font:normal 14px/1.5 Verdana, "微軟正黑體", sans-serif;}
.mv{ -webkit-transition:all 0.8s; -moz-transition:all 0.8s; -ms-transition:all 0.8s; o-transition:all 0.8s; transition:all 0.8s;}
a { color:inherit;}

/*====== HEADER ======*/
.topnav{max-width:1000px; margin:0px auto; overflow:hidden; clear:both;}
.topnav li{width:90px; color:#FFF; text-align:center; float:right;}
.topnav li.lan_en{background:#cc0000;}
.topnav li.lan_cht{background:#f18200}
.topnav li a{width:100%; height:100%; display:block; color:inherit;}
.topnav li a:hover{background:#6d6d6d;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}

header{max-width:1000px; margin:10px auto 0px auto; overflow:hidden;}
.logo{width:260px; height:75px;  background:url(../images/logo.jpg) no-repeat center; float:left; }
.logo a {width:100%; height:100%; text-indent:-9999px; display:block; color:inherit;}


/*====== NAVIGATION ======*/
nav{width:70%; float:right; overflow:hidden;}
nav ul{position:absolute; z-index:9999; }
nav li.l1{background:url(../images/icon001.png) no-repeat center 10px;}
nav li.l2{background:url(../images/icon002.png) no-repeat center 10px;}
nav li.l3{background:url(../images/icon003.png) no-repeat center 10px;}
nav li.l4{background:url(../images/icon004.png) no-repeat center 10px;}
nav li.l5{background:url(../images/icon005.png) no-repeat center 10px;}
nav li.l6{background:url(../images/icon006.png) no-repeat center 10px;}
nav li.l7{background:url(../images/icon007.png) no-repeat center 10px;}

/*Create a horizontal list with spacing*/
nav li{display:inline-block; float:left;}
/*Style for menu links*/
nav li a{padding:45px 20px 10px; display:block; text-align:center; color:#000;}
nav li a:hover{background:url(../images/icon008.png) no-repeat center bottom;}

/*Create a horizontal list with spacing*/
nav li{display:inline-block; float:left;}
/*Style for menu links*/
nav li a{padding:45px 20px 10px; display:block; text-align:center; color:#000;}
/*Hover state for top level links*/
nav li:hover a{color:#cc0000; font-weight:bold;}
/*Style for dropdown links*/
nav li:hover ul a{background:#f18200; color:#fff; padding:10px 20px;}
/*Hover state for dropdown links*/
nav li:hover ul a:hover{background:#cc0000;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
/*Hide dropdown links until they are needed*/
nav li ul{display:none;}
/*Make dropdown links vertical*/
nav li ul li{display:block; float:none;}
/*Prevent text wrapping*/
nav li ul li a{width:100%; height:100%; display:block; color:inherit;}
/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover{display: block;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
/*Style 'show menu' label button and hide it by default*/
.show-menu {background:#f18200; color:#fff; text-align:center; padding:5px 0; display:none;}
/*Hide checkbox*/
input[type=checkbox]{display:none; -webkit-appearance:none;}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{display: block;}


/*====== BANNER ======*/
#owl-demo{max-width:1000px; margin:0px auto; overflow:hidden; border-top:5px #f18200 solid; }
#owl-demo .item img{width:100%; height:auto; margin:0px auto; overflow:hidden; display:block;}
/* display none until init */
.owl-carousel{display: none;position: relative;width: 100%;-ms-touch-action: pan-y;}
.owl-carousel .owl-wrapper{display: none;position: relative;-webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper-outer{overflow: hidden;position: relative;width: 100%;}	
.owl-carousel .owl-item{float: left;}
.owl-controls .owl-page,.owl-controls .owl-buttons div{ display:none;cursor:pointer;}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-pagination{text-align:center;}
.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1;*display:inline;/*IE7 life-saver */ }
.owl-theme .owl-controls .owl-page span{width:10px; height:10px;margin: 0px 5px;display:block;background:#cc0000;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;	filter: Alpha(Opacity=50);/*IE7 fix*/opacity: 0.5;}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{filter: Alpha(Opacity=100);/*IE7 fix*/opacity: 1;}


/*====== CONTAINER ======*/
#container{max-width:1000px; margin:20px auto; overflow:hidden;}
#container .about{ margin-bottom:10px; overflow:hidden;}
.orange{color:#f18200; font:bold 18px/2 Verdana, "微軟正黑體", sans-serif; display:block;}
.orange a{color:inherit;}
.orange a:hover{color:#cc0000;}
#container .about_text{width:49.5%; padding:20px 10px; color:#717171; float:left;
background:linear-gradient(top,#fff,#eee);
background:-moz-linear-gradient(top,#fff,#eee);
background:-webkit-linear-gradient(top,#fff,#eee);}
#container .about_img{width:49.5%; float:right; overflow:hidden;}
#container .about_img .about_img01{width:33%; float:left;}
#container .about_img .about_img02{width:66%; float:right;}
#container .about_img .about_img01 img, #container .about_img .about_img02 img{width:100%; height:auto;}

#container iframe{width:49.5%; height:270px; float:left;}
.red{color:#cc0000;}
#container .news{width:49.5%; padding:20px 10px; color:#717171; float:right; overflow:hidden;
background:linear-gradient(top,#fff,#eee);
background:-moz-linear-gradient(top,#fff,#eee);
background:-webkit-linear-gradient(top,#fff,#eee);}
#container .news .more{color:#f18200; font:normal 12px/1.5 Verdana, "微軟正黑體", sans-serif; float:right;}
#container .news .more:hover{color:#cc0000;}
#container .news li{overflow:hidden;}
#container .news ul li a{width:100%; height:100%; color:inherit;}
#container .news ul li a:hover{color:#f18200;}
#container .news ul li img{width:165px; height:85px; margin-right:10px; float:left;}
#container .news ul li p{display:block;}


/*====== SITEMAP ======*/
#sitemap{background:#999; padding:10px 0px; color:#fff;}
.sitemap{max-width:1000px; margin:0px auto; overflow:hidden;}
.sitemap li.title{/*width:20%;*/ padding:10px 20px; display:inline-block; *display:inline; zoom:1; vertical-align:top;max-width:50em;}
.sitemap li.title ul{ margin-top:10px;}
.sitemap a{color:inherit;}
.sitemap a:hover{}


/*====== FOOTER ======*/
footer{background:#585759 url(../images/footer.png) no-repeat right top; border-top:5px #f18200 solid; }
footer ul li{ margin:0px 1%; width:30%; display:inline-block; vertical-align:top;}
.footer{max-width:1000px; margin:0px auto;  color:#FFF; padding:10px 0px;  position:relative;}
.iware{color:#ccc; text-align:right; position:absolute; right:0px; bottom:10px;}
.iware a{color:#ccc; font-size:10px;}


@media only screen and (min-width: 660px) and (max-width: 1020px) {
/*====== NAVIGATION ======*/
/*Style for menu links*/
nav li a{padding:50px 9px 10px; display:block; text-align:center; color:#000;}
/*====== CONTAINER ======*/
#container .about_text{width:100%; float:none;}
#container .about_img{width:100%; float:none;}
#container iframe{width:100%; float:none;}
#container .news{width:100%; float:none;}
/*====== SITEMAP ======*/
.sitemap li.title{max-width:45em;}
}
@media only screen and (max-width: 640px) {
/*====== NAVIGATION ======*/
/*Style for menu links*/
nav li a:hover{background:#f18200; color:#cc0000;}
/*====== HEADER ======*/
.logo{width:100%; float:none;}
/*====== NAVIGATION ======*/
nav{width:100%; float:none;}
/*Make dropdown links appear inline*/
nav ul {position:static; display:none; clear:both;}
/*Create vertical spacing*/
nav li {margin-bottom: 1px;}
/*Make all menu links full width*/
nav ul li, nav li a {width: 100%;}
/*Display 'show menu' link*/
.show-menu {display:block; cursor:pointer;}

nav li a{padding:10px 0px; text-align:center; color:#fff; background:#f18200;}
nav li.l1{background:none;}
nav li.l2{background:none;}
nav li.l3{background:none;}
nav li.l4{background:none;}
nav li.l5{background:none;}
nav li.l6{background:none;}
nav li.l7{background:none;}
nav li:hover ul a{background:#cc0000; color:#fff; padding:10px 20px;}
/*====== CONTAINER ======*/
#container .about_text{width:100%; float:none;}
#container .about_img{width:100%; float:none;}
#container iframe{width:100%; float:none;}
#container .news{width:100%; float:none;}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
/*====== FOOTER ======*/
.iware{position:relative; display:block;}
/*====== SITEMAP ======*/
.sitemap li.title{/*width:25%;*/ width:90%; max-width:45em;}
footer ul li{width:95%;}
}
/*Smartphone*/
@media only screen and (max-width : 330px) {
#container .news ul li img{width:100%; height:auto;}
}

nav li ul li{position:relative;}
nav li ul ul{width:100%; position:absolute; top:1px; left:99%; display:none;}
nav li:hover ul ul a{background:#ffad4c;}
nav li ul li:hover ul{display:block;}
