body {
	margin: 0;
	padding: 0;
	font-family:  "微軟正黑體", "新細明體",Arial;
	background-color: #010194;
    background-image: linear-gradient( to right  , #010194 30% , #000);
} 
header{ 
	box-sizing: border-box; 
	background-color:#333;
	position: fixed; z-index: 100;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    height: 90px;box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
}
header h1{display: inline-block;vertical-align: top;padding: 0px;padding-left: 10px; margin: 0px;font-size: 1em;line-height: 85px;}
header .logo img{height: 60px;} 

header .topArea{position: absolute;top:3px;right:10px;} 
header .topArea ul.topmenu{font-size: 0.8em;display: inline-block;}
header .topArea ul.topmenu li{display: inline-block;border-right: solid 1px #fff;padding-right:10px;margin-right:5px; 
	border-image: linear-gradient(to bottom , rgba(256,256,256,0)  10%, rgba(25,25,25,0.7) 50% , rgba(256,256,256,0)  90%); border-image-slice: 1;}
header .topArea ul.topmenu li:last-child{border-style: none;padding-right: 0px;}
header .topArea ul.topmenu li a{color: #333;} 
header .topArea ul.topmenu li button{border-style: none;background-color: transparent;color: #333;padding: 0px;}

nav.menuArea{display: inline-block;position: fixed;top:35px;right: 10px;z-index: 100;}
nav.menuArea ul.menuBar{  
	padding: 0px;
	list-style-type: none;position: relative;
}
nav.menuArea ul.menuBar li{display: inline-block;position: relative; }
nav.menuArea ul.menuBar li a{display: block; padding: 10px 10px;color: #333;font-size: 1.2em;text-decoration: none; border-radius: 50px; font-weight: 600;transition: all 0.5s;}
/*
nav.menuArea ul.menuBar li a:hover{border-radius: 0px; color: red;
    animation-duration: 1s;
	animation-name: menuanim; } 
@keyframes menuanim {
    50% {background-color:#ffe300;}  
    100%{background-color:rgba(255,255,255,0.1);}
  }
*/
nav.menuArea ul.menuBar li a:hover{color: orangered;}
nav.menuArea ul.menuBar li a:hover svg{fill:orangered;}

nav.menuArea ul.menuBar li .submenu{display: none;background-color:#fff; padding: 0px;width: 100%; 
	position: absolute;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.1);left: 0px;margin-top:5px;
	word-break: keep-all;text-align: center;z-index: 10;
}
nav.menuArea ul.menuBar li .submenu a{border-radius: 0px; border-bottom: solid 1px #efefef;background-color: #fff;color: #333;transition: all 0.5s;}
nav.menuArea ul.menuBar li .submenu a:hover{background-color: #ffe300;}
nav.menuArea ul.menuBar li .submenu:last-child a{border-style: none;}

nav.menuArea ul.menuBar svg{width: 30px;height: 30px;fill:#404040;display: inline-block;margin: 0px auto;transition: all 0.5s;}
svg .fillnone{fill:none;}


main{position: relative; background-color: #fff;}
 
footer{position: relative; padding: 10px;font-size: 0.9em;color: #fff;} 
footer .imgbox{text-align: center;}
footer .imgbox a{display: block;margin: 5px;}
footer .imgbox img{height:80px;}
footer ul.foot_list li{display: block; text-align: left;}    


footer .btn-goTop{
	width: 30px;height: 30px;line-height: 30px; position: absolute;right: 20px;top:-10px;text-align: center;border-radius: 5px;background-color: rgba(0,0,0,0.8);z-index: 10; border: solid 2px #fff;
}
footer .btn-goTop span{display: none;}
footer .btn-goTop i{color: #fff;font-size: 1.5em;}
footer .btn-goTop:hover ,  footer .btn-goTop:focus { background-color: #257ce9;} 

.phone_menu{display:none;} 
 .bodyContent{width: 100%;max-width: 1350px;padding:10px; margin: 0px auto;position: relative;}

 /*   路徑導覽*/
.siteMapAREA{background-color: #efefef;position: relative;width: 100%;padding: 5px 30px;border-bottom: dashed 1px #ccc;}
ul.siteMap{width: 100%;max-width: 1350px;padding:0px 10px;margin: 0px auto;} 
ul.siteMap.autoW{max-width: 100%;}
ul.siteMap li{display: inline-block;}
ul.siteMap li::before{ content: "＼";margin: 0px 5px; }
ul.siteMap li:nth-child(1){}
ul.siteMap li:nth-child(1)::before{ content: "";}
ul.siteMap li a{color: #000;}



.loginbox{width: 100%;max-width: 360px; margin: 20px auto;}
.loginbox li{padding: 10px;}
.loginbox .ht{font-size: 1.2em;font-weight: 600;letter-spacing: 5px;}
.loginbox  .VN_area{background-color: #fff;border-radius: 5px;padding: 3px;}
.loginbox  .VN_area::after{display: block;content: "";clear: both;}
.loginbox  .VN_area input[type="text"]{width:  calc(100% - 165px);float: left;}
.loginbox  .VN_area img{width: 120px;height: 38px;vertical-align: top;float: left;}
.loginbox  .VN_area .btn{background-color: #efefef;color: #333;border-style: none;float: left;width: 38px;height: 38px;vertical-align: top;text-align: center;padding: 0px;margin-left: 5px;}  









@media only screen and (max-width: 768px){	
    

header{ height:45px;position: fixed;top: 0px;width: 100%;pbox-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3);padding-left: 45px;background-color: #fff;} 
header h1{ display: inline-block;height:100%;line-height: auto;}
header .logo{height:100%;}
header .logo img{height:30px;vertical-align: top;margin-top:5px;}
 
 header .topArea{top:8px;right:0px;}   
.phone_menu{ 
	display: inline-block; 
    position: fixed;top:0px;left: 0px;
    z-index: 100;
} 
.menuburger {
  width: 45px;
  height: 45px;  
 padding: 7px;
}

.menuburger div {
  position: relative;
  width: 30px;
  height: 5px;
  border-radius: 5px;
  background-color: #333;
  margin: 4px auto;
  transition: all 0.3s ease-in-out;
}  
       
  
.menuburger.activeToogle .top-bun {
  transform: rotate(-45deg);
  margin-top: 15px;
}
.menuburger.activeToogle .bottom-bun {
  opacity: 0;
  transform: rotate(45deg);
}
.menuburger.activeToogle .meat {
  transform: rotate(45deg);
  margin-top: -10px;
}
 
nav.menuArea{display: none;position: fixed;width: 100vw;height: 100vh;background-color:#ffe300;top:0px;left: 0px;z-index:99; padding: 40px 10px;}
nav.menuArea ul.menuBar li{display:block;border-style: none;float: none; width:100%;text-align: left;border-bottom: solid 1px #ccc;}
nav.menuArea ul.menuBar li:last-child{border-style: none;} 
nav.menuArea ul.menuBar li a{}
nav.menuArea ul.menuBar li .submenu{display: block;position: relative;margin-left: 30px;width: auto;text-align: left;
	background-color:transparent;box-shadow:0px 3px 5px 0px rgba(0,0,0,0);left: auto;top:auto; padding: 0px;margin-bottom: 10px;
}
nav.menuArea ul.menuBar li .submenu a{border-style: none;color: #333;transition: all 0.5s;}
    
    
}
