@charset "utf-8";
 
body {
	margin: 0px;
	padding: 0px;
	font-family:  "微軟正黑體", "新細明體",Arial; 
} 
header{  
	box-sizing: border-box; 
	background-color:#333; 
    width: 100%;position: relative;
    background-color: #fff;
    height: 160px;box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
	background-image: url("../img/banner_img04.png");background-repeat: no-repeat;background-size: cover;
}
header h1 {width: 100%;max-width: 1000px;margin: 0px auto;height: 100%;} 
header h1 img{height: 100%;} 

nav.phonemenuArea{}  
 .phonemenubar{}
.topArea{position: absolute;top:10px;right: 10px;} 
.topArea .btn{background-color: #fff;} 
.topArea .btn:is(:hover , :focus){background-color: #333;color: #fff;}

.menuArea{display:block;width: 100%;background-color:#fff;position: relative;}
.menuArea ul.menuBar{    
	list-style-type: none; margin: 0px;gap:10px;
  display: flex;align-items:center; justify-content:center; 
} 
.menuArea ul.menuBar > li > a , .menuArea ul.menuBar > li .dropdown-toggle{display: block; padding:8px ;color: #333;font-size: 1.05rem;text-decoration: none;font-weight: 600;transition: all 0.5s;}
.menuArea ul.menuBar > li > a:is(:hover , :focus) , .menuArea ul.menuBar > li > .dropdown-toggle:is(:hover , :focus){background-color: #efefef;color: #090;}
  

main{position: relative;background-image: linear-gradient(to bottom , rgba(223,223,223,1) 30% , rgba(255,255,255,1));min-height:calc(100vh - 350px);}
 
footer{position: relative;background-color:#fff;font-size: 0.9rem;margin-top: 5px;} 

 

.phone_menu , .btn_menuclose{display:none;} 

 .bodyContent{width: 100%;max-width: 1350px;margin: 0px auto;position: relative;}
.bodyContent.mw_800{max-width: 800px;}
 .bodyContent.mw_1000{max-width: 1000px;}


 /*   路徑導覽*/
.siteMapAREA{background-color: #fff;position: relative;width: 100%;padding: 5px;box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.1);}
ul.siteMap{width: 100%;padding:0px;margin: 0px auto;position: relative;} 
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{padding: 10px;}
.loginbox li{margin: 3px 0px;}
.loginbox li .tt{font-size: 1.125em;font-weight: 600;} 

 

@media only screen and (max-width: 768px){	
    

header{ height:100px;background-size: cover;} 
 
	
  .phonemenubar::after{content: "";display: block;clear: both;}
.topArea{ position: relative;float: right;top:auto;right:auto;padding: 3px;}    

    
.phone_menu{ 
	border-style: none;background-color: transparent;
	display: inline-block; 
    position: relative; float: left;
   background-color: #fff;
} 
.btn_menuclose{width: 45px;height: 45px;border-radius: 50%;background-color: #fff;
	display: inline-block;
align-items:center;
 justify-content:center;
}
 .btn_menuclose:hover , .btn_menuclose:focus{border: solid 1px #333;}	
.menuburger {
  width: 40px;
  height: 45px;  
 padding: 10px;
}

.menuburger div {
  position: relative;
  width: 20px;
  height: 2px;
  border-radius: 5px;
  background-color: #333;
  margin: 6px auto;
  transition: all 0.3s ease-in-out;
}  
       
  
.menuburger.activeToogle .top-bun {
  transform: rotate(-45deg);
  margin-top: 12px;
}
.menuburger.activeToogle .bottom-bun {
  opacity: 0;
  transform: rotate(45deg);
}
.menuburger.activeToogle .meat {
  transform: rotate(45deg);
  margin-top: -8px;
}
 
nav.phonemenuArea{ }  
.topArea{}
    
.menuArea{display: none;position: fixed;width: 100vw;height: 100vh;background-color:#d4d4d4;top:0px;left: 0px;z-index:99; padding: 40px 10px;overflow-y: auto;}
    
.menuArea ul.menuBar{  flex-direction: column;}
 
.menuArea ul.menuBar li{display:block;border-style: none;float: none; width:100%;text-align: left;}
.menuArea ul.menuBar li:last-child{border-style: none;} 
.menuArea ul.menuBar li a{}
.menuArea ul.menuBar li.link_sitemap{display: block;}
.menuArea ul.menuBar li .submenu{display: block;position: relative;width: auto;text-align: left;
background-color:transparent;box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);left: auto;top:auto; padding:10px;margin-bottom: 10px;border-radius: 10px;background-color: #fff;
  height: auto !important;  
} 
.menuArea ul.menuBar li .submenu a{border-style: none;color: #333;transition: all 0.5s;background-color: transparent;}
.menuArea .sub_block{border-style: none;}
    
 
}