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

/*--------------------------------------------------------------------------------[ 左側垂直mlmenu ]-----*/
.side .mlmenu {
	padding: 0px;
	width: 180px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	z-index: 999;
}


.LeftBox { width: 100%; margin: 0; padding: 20px 0; clear: both; z-index: 9999; position: absolute; height: auto; right: 0; background-color: #265598;}

/*-------------------------------------top menu-*/

@media (min-width: 768px) {
.header .menu { width: 100%; margin: 0; padding: 0; clear: both; z-index: 9999; }
.header .menu ul { list-style: none; margin: 0px; padding: 0; z-index: 999 }
.header .menu ul a { display: block; color: #fff; transition: all .2s; outline: none; text-decoration: none; text-align: left; cursor: pointer; }
.header .menu ul>li>a:hover,  .header .menu ul>li>a:focus { background-color: #336699; color: #fff;}
.header .menu ul>li>a:focus{ outline:2px solid #ffc000}
.header .menu>ul { padding: 0; margin: 0; display: inline-block; }
.header .menu>ul>li { margin: 0px; padding: 0; float: left; position: relative; }
.header .menu>ul>li>a { padding: 4px 15px; font-weight: bolder; font-size: 1em; }
.header .menu>ul>li>a span { display: block }
.header .menu>ul>li:last-child>a { border: none; }
.header .menu>ul>li:hover>a { background-color: #008186; color: #fff; }
.header .menu>ul>li:hover>a:after { }
.header .menu ul ul { display: none; overflow: visible; width: 160px; padding: 0; position: absolute; top: auto; left: -10px; text-align: left; box-shadow: rgba(0, 0, 0, 0.5) 0 5px 10px; }
.header .menu li li { position: relative; float: none; vertical-align: top; margin: 0; border-bottom: 1px solid #fff }
.header .menu li li:last-child { border-bottom: none }
.header .menu li li a { padding: 10px 15px 10px 25px; color: #fff; display: block; background-color: #008186; font-size: 1.125em; }
.header .menu li li a:before { content: ''; width: 10px; height: 10px; border: 2px solid #fff; border-left: none; border-bottom: none; transform: rotate(45deg); display: inline-block; position: absolute; left: 5px; top: 15px; }
.header .menu li li:last-child a { border-bottom: none; }
.header .menu li li a:hover,  .header .menu li li a:focus { background-color: #52514d; color: #fff; }
.header .menu li li.hasChild>a { padding-right: 32px; background-image: url(../images/menu_a_hasChild.png); background-repeat: no-repeat; background-position: 154px 15px; }
.header .menu li li.hasChild>a:hover { }
.header .menu ul ul ul { position: absolute; top: 0; left: 160px; margin-top: 0px; }
/* 內頁menu */
.header .menuin { text-align: center; top: 110px; background-color: #008186 }
.header .menuin>ul>li>a { border-right: 1px solid #fff; color: #fff; }
}
 @media (min-width: 992px) and (max-width: 1199px) {
}
 @media (min-width: 768px) and (max-width: 991px) {
.header .menu { margin: 33px 0 0 0; }
.header .menuin { margin: 5px 0 0 0; }
}
 @media (max-width: 767px) {
.header .menu { text-align: left; margin: 0 0 10px; }
.header .menu ul { list-style: none; margin: 0px; padding: 0; overflow: hidden; font-size: 1.125em; line-height: 1.2; position: relative; z-index: 999 }
.header .menu a { display: block; padding: 10px 16px; transition: .4s; background-color: #1866b3; color: #fff ;font-weight: bolder}
.header .menu a:hover { text-decoration: none }
.header .menu>ul { padding: 0; font-size: 1.125em; line-height: 25px; display: inline; }
.header .menu>ul>li { margin: 0px 10px 0; padding: 0; float: none; position: relative; }
/*   #Header .menu>ul>li>a:hover, */
.header .menu>ul>li>a.here { background-color: #008186; color: #fff; }
/* #Header .menu>ul>li>a:hover{
	
} */
.header .menu>ul>li>a { border-bottom: 1px solid #fff; background-image: none }
.header .menu>ul>li>a:after, .header .menu>ul>li>a.here:after/* #Header .menu>ul>li>a:focus:after */ { content: ""; width: 10px; height: 10px; border: 3px solid #fff; border-right: none; border-bottom: none; position: absolute; right: 20px; top: 17px; transform: rotate(135deg); transition: .5s; }
/*     #Header .menu>ul>li:hover>a:after,
    #Header .menu>ul>li:hover>a.here:after, */
.header .menu>ul>li>a.here:after { content: ""; width: 10px; height: 10px; border: 3px solid #fff; border-right: none; border-bottom: none; position: absolute; right: 20px; top: 17px; transform: rotate(225deg); }
.header .menu>ul>li.nav a { background-color: #eeeeee; color: #333 }
.header .menu li.hasChild>a { /* padding-right: 50px; background-image: url(../images/menu_a_hasChild2.png); background-repeat: no-repeat; background-position: right 12px;  */
}
.header .menu li.hasChild.closeThis>a { background-position: right -124px; }
.header .menu li li.hasChild>a { background-position: right 15px; }
.header .menu li li.hasChild.closeThis>a { background-position: right -102px; }
.header .menu ul ul { display: none; padding: 0px; font-size: 1em; margin: 0; width: auto }
.header .menu li li:first-child>a { border-top: 1px solid #bbb; }
.header .menu li li a { border-bottom: 1px solid #fff; padding: 10px 16px 10px 30px; background-color: #ddd; color: #333 }
.header .menu li li li a { border-bottom: 1px solid #fff; padding: 10px 16px 10px 45px; background-color: #ccc; color: #000 }
.header .menu li li li li a { border-bottom: 1px solid #999; padding: 10px 16px 10px 55px; background-color: #fff; color: #333 }
}