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

.nav-link { display: none; width:38px; height:38px; padding:0 15px; border:1px solid #ccc; border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -webkit-border-radius:2px; background:url(../img/bg-nav-link.png) center center no-repeat; text-indent:-9999px;}
.nav {
  -webkit-transition: all 0.3s ease;  
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease; 
  float:left;
}
.nav ul { float:right;
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-table; z-index:9999;
  font-family:"微軟正黑體" !important;
}
.nav > li > ul.sub-nav {
	min-width: 10em;
	padding: 4px 0;
	background-color: #f4f4f4;
	border: 1px solid #CCC;
}
.nav ul li { padding: 0px; }
.nav > ul > li { display: inline-block; }
.nav ul li a { padding-top:9px; display: block; text-decoration: none; color: #fff; font-size:1em;}
.nav ul li a:hover { color:#fff; text-decoration:underline;}
.nav ul li.mainnavline{ padding:0 1px;}
.nav ul li.mainnavicon a{ width:20px; height:20px; padding:0; text-indent:-9999px;}
.nav ul li.mainnavicon.fb{ margin-left:6px; background:url(../img/icon-fbx.png) no-repeat;}
.nav ul li.mainnavicon.youtube{ margin-left:1px; background:url(../img/icon-youtubex.png) no-repeat;}
.nav ul li.mainnavicon.flickr{ margin-left:0px; background:url(../img/icon-flickrx.png) no-repeat;}
.nav ul li > a {}
.nav ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 180px;
  background-color: #f4f4f4;
  border: 1px solid #CCC;
}
.nav ul li:hover > ul { display: block; }
.nav ul ul > li { position: relative; }
.nav ul ul > li a { padding: 0px 15px 0px 10px; height: auto; color:#000; background-color: #f4f4f4; text-align:left; }
.nav ul ul > li a:hover { background-color: #fff; color: #fff; }
.nav ul ul ul { position: absolute; left: 100%; top:0; }

.nav_en ul li a{ font-size:1em !important;}

.search{ display:none;}

@media all and (max-width: 768px) {
  ul#ul_header .wrap{ padding:0;}
  .example-header .container { width: 100%; }
  
  a.nav-link { display: block; color: #fff; background-color: #fff; float: right; text-decoration: none; margin-top:7px; padding: 19px 10px; position:absolute; top:15px; right:0px;}
  .nav { clear: both; min-width: inherit; float: none; background:#5B0001; }
  .nav, .nav > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
  .nav > li > ul.sub-nav { padding: 0px; border: none; }
  .nav.active, .nav > ul ul.active { max-height: 55em; }
  .nav ul { clear:both; float:none; display: inline; }
  .nav > ul { border-top: 1px solid #808080; }
  .nav li, .nav > ul > li { display: block; }
  .nav li a { color: #000 !important; text-align:left; display: block; padding: 0.1em; border-bottom: 1px solid #808080; position: relative; }
  
  .nav ul li a {padding-left:20px !important; padding-right:20px !important;  display: block; text-decoration: none; color: #333; font-size:1.1em;}
  .nav ul li a:hover { color:#fff !important; background:#022c76; text-decoration:none;}
  
  .nav ul li.mainnavline{ display:none;}
  
  .nav li.has-subnav > a:after {
    content: '+';
    position: absolute;
    top: 5px;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .nav li.has-subnav > a.active:after {
    content: "-";
  }
  .nav ul > li a { background-color: #e4e4e4; height:45px; line-height:8px; padding: 18px 18px 18px 30px; }
  .nav ul ul > li a { background-color: #e4e4e4; height:40px; line-height:8px; padding: 15px 18px 15px 30px; }
  .nav ul ul, .nav ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
  
  .nav_icon{ width:240px; margin:0 auto; padding:5px 0; display:block;}
  .nav ul li.mainnavicon a{ width:70px; height:70px;}
  .nav ul li.mainnavicon a:hover{ background:transparent;}
  .nav ul li.mainnavicon.fb{ float:left; margin:0 5px; background:url(../img/icon-fb.png) no-repeat;}
  .nav ul li.mainnavicon.youtube{ float:left; margin:0 5px; background:url(../img/icon-youtube.png) no-repeat;}
  .nav ul li.mainnavicon.flickr{ float:left; margin:0 5px; background:url(../img/icon-flickr.png) no-repeat;}
  .search{ display:block !important; clear:both; width:100% !important; padding:10px 20px 10px 20px; overflow:hidden; position:relative;}
  .input_searchtxt{ float:left; width:100%; padding:7px 46px 12px 10px; color:#000; border:1px solid #ccc;}
  .input_searchbtn{ float:right; width:36px; height:36px; background: url(../img/btn-searchbtn.png) no-repeat; position:absolute; right:20px; text-indent:-9999px;}
  .input_searchsort{ display:none !important;}
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
.nav ul li a { padding-top:11px;}
.nav ul li.mainnavline{ padding:0 5px;}
.nav ul li.mainnavicon a{ width:20px; height:20px; padding:0; text-indent:-9999px;}
.nav ul li.mainnavicon.fb{ margin-left:6px; background:url(../img/icon-fbx.png) no-repeat;}
.nav ul li.mainnavicon.youtube{ margin-left:3px; background:url(../img/icon-youtubex.png) no-repeat;}
.nav ul li.mainnavicon.flickr{ margin-left:3px; background:url(../img/icon-flickrx.png) no-repeat;}	
}

@media all and (max-width: 768px) and (-webkit-min-device-pixel-ratio:0) {
.nav ul li a { padding-top:18px;}
.nav ul li.mainnavicon a{ width:70px; height:70px;}
.nav ul li.mainnavicon a:hover{ background:transparent;}
.nav ul li.mainnavicon.fb{ float:left; margin:0 5px; background:url(../img/icon-fb.png) no-repeat;}
.nav ul li.mainnavicon.youtube{ float:left; margin:0 5px; background:url(../img/icon-youtube.png) no-repeat;}
.nav ul li.mainnavicon.flickr{ float:left; margin:0 5px; background:url(../img/icon-flickr.png) no-repeat;}
.input_searchtxt{ float:left; width:100%; padding:8px 41px 8px 8px; color:#000; border:1px solid #ccc;}
}