@charset "UTF-8";

/*網頁宣告*/     
*{
margin:0;padding:0
}  
html{
box-sizing:border-box
}    
*,*:before,*:after{
box-sizing:inherit
}  
body{
 background: #242424;
 font-size: 16px;
 font-family: "Microsoft JhengHei",  Arial, Helvetica, sans-serif;     
}  
a ,a:hover ,a:visited  ,a:active{ 
 text-decoration: none;
}    
.fa{
margin-right: 5px;
}  
hr{
	border-top: 1px solid #666666;
}    
/*網頁宣告*/
    
/*版面結構*/ 
#warn_shadow{
    position: fixed;
    display:none;    
    width:100%;
    height:100%;
    background: black;
    z-index: 1;
    opacity: 0.5;
    z-index: 10;
    }    
#warn_box{  
    position: fixed;
    display:none; 
    background: #efefef;
    text-align: center;
    top:40%;
    left:50%;
    width:220px;
    height:120px;
    margin-left:-110px;
    border-radius: 5px;
    border:1px solid grey;
    box-shadow:0px 0px 1px  grey;
    z-index: 1000;        
    }   
#warn_top{        
    padding: 3px;
    border-radius: 5px 5px 0 0;
    background: #b4b4b0;
    border-bottom:1px solid grey;
    margin-bottom: 10px;     
    }
#warn{       
    position: absolute;
    width:150px;
    left:25px;
    word-break: break-all;        
    } 
#warn_close{       
    float: right;
    background: #eae7e7;
    text-align: center;  
    width:20px;
    height:23px;   
    border:1px solid grey;
    border-radius: 5px;
    background: lightgrey;
    cursor: pointer;
    }    
#warn_botton{          
    position: absolute;
    right:50%;
    bottom:5px;
    margin-right: -25px;
    background: #eae7e7;
    text-align: center;  
    width:50px;
    height:23px;   
    border:1px solid grey;
    border-radius: 5px;
    background: lightgrey;
    padding-bottom: 2px;
    cursor: pointer;        
    }   
#container{
    background: #fff;
    max-width:1000px;        
    margin:0 auto;
    position: relative;    
    boder:1px solid #fff;
    box-shadow:0px 0px 4px  grey;
    }     
.header{
    display: flex;
    background: #fff; 
    background-image: url("../images/bk.png");
    justify-content:space-between;
    flex-wrap:wrap;
    align-items:flex-end;　
    }
.section{
    max-width:1000px;
    display: flex;      
    align-items: stretch; 
    justify-content: space-between;
    }   
.sidebar{
    width:240px;    
    box-shadow:1px -1px 1px 0px grey;     
    }
.show-nav{               
    position:absolute;
    right:5px;;
    top:5px;;      
    color:#a30707;
    display:none;
    cursor: pointer;
    font-size:30px; 
    line-height: 18px; 
    text-align:center;  
    }
.show-sidebar{            
    position:absolute;
    left:8px;
    top:5px;      
    color:#a30707;
    display:none;
    cursor: pointer;
    font-size:30px;
    line-height: 18px; 
    text-align:center;
    }
.main{         
    background: #313131;
    width:100%;
    }
.footer{
    background:#494849; 
    margin:0 auto;
    }      
.alapower{
    max-width:1000px;
    margin:0 auto;  
    height:30px;
    font-size: 12px;
    color:#818181;
    text-align:right;
    line-height: 14px; 
    padding:10px 0px 10px 0px;      
}    
/*版面結構*/   

/*表單*/
input[type=text] {  
    border: 1px solid #F15A23;
    border-radius: 1px;
    height:22px;
    background-color: #eeeeee;
    color: #5e5e5f;
    padding: 2px 5px 3px 5px;
    margin-top: 10px;
    } 
    
input[type=password] {  
    border: 1px solid #F15A23;
    border-radius: 1px;
    height:22px;
    background-color: #eeeeee;
    color: #5e5e5f;
    padding: 2px 5px 3px 5px;
    margin-top: 10px;
    }  
input[type=submit] {
    border: 1px solid grey;
    border-radius: 5px;
    height:22px;
    background-color: #920001;
    color: white;
    padding: 2px 10px 2px 10px;
    } 
input[type=button] {
    border: 1px solid grey;
    border-radius: 5px;
    height:22px;
    background-color: #920001;
    color: white;
    padding: 2px 10px 2px 10px;
    } 
input::placeholder { 
    color: #7d96cc;
    }    
 /*表單*/   
    
  /*表頭*/ 
.logo{   
    padding:5px 10px 5px 10px;    
    }
.search{
    color:#F15A23;
    padding:5px 10px 10px 10px;
    text-align: right;  
    line-height: 25px;
    font-size: 14px;  
    }
/*表頭*/ 

/*主選單*/  

.nav{
   max-width:1000px;
   height:46px;
   margin:0 auto;
   border-radius: 5px; 
   }   
ul{        
   display: flex;
   flex-direction: row;
   align-content:stretch;  
   }    
ul> li{
   list-style:none;
   flex:1  200px;
   line-height: 45px;
   background:#222;  
   box-shadow:0px 2px 3px 0px grey;  
   text-align: center;
   background: linear-gradient( darkred 20%,black 80%)        
   }       
.nav > ul > li > ul > li:nth-of-type(1) {
   height: 2px;        
   } 
 ul> li > a {
   color: #fff; 
   flex:1  200px;
   height:44px;
   display: block;
   text-decoration: none;        
   }     
.nav > ul> li> :hover {
   background:#F15A23;
   transition: all 200ms ease-in-out; 
   }    
.nav> ul> li:hover ul{     
   display: block;     
   }    
 ul > li >ul {
   position: absolute;        
   display: none;
   Z-index:10;        
   }    
 ul> li> ul > li{
   background: #fff;
   padding:0 30px;
   width:200px; 
   height:44px;
   text-align:left;
   border-bottom: 1px solid grey;     
   }
 ul> li> ul > li:hover{
   background: #ede9e9;   
   }    
ul >li> ul> li> a{        
   color:#000; 
   }    
ul >li> ul> li> a:hover{
   color: #F15A23;       
   }
/*主選單*/
   
    
/*次選單*/  
.menu{  
   width:240px; 
   margin: 0 auto;        
   }
.menu_title{
   width:230px;
   margin:0 auto;    
   background: #ff8a07;
   height:40px;
   font-size: 17px;
   color:#fff;
   line-height: 16px; 
   padding:11px 10px 0px 14px;
   letter-spacing: 3px; 
   border-top:2px solid #ccc;
   border-radius: 5px 5px 0 0 ; 
   box-shadow:1px 1px 3px 0px grey;
   }    
.menu_li{
   color: #fff;
   list-style:none;
   width:230px;
   margin:0 auto;
   line-height: 45px;
   position: relative;
   background:#1B1B1B;    
   box-shadow:1px 1px 3px 2px grey; 
   border-bottom: 1px solid grey;  
   cursor:pointer;      
   }     
.menu_li a {
   color: #fff; 
   width;230px;
   height:44px;
   display: block;
   text-decoration: none;        
   } 
.menu_li:hover {
   background:#4C4C4C;
   } 
 .menu_ol_ol {
   position: relative;
     
   display: none;  
   Z-index:10; 
         
   }    
 .menu_ol_li{
   background: #fff;
   width:228px;  
   Color:#000;
   border-bottom:1px solid grey;   
   }
 .menu_ol_li a{        
   color:#000;   
   font-size: 14px;
   letter-spacing: 0px;
   }  
 .menu_ol_li a:hover{
   color: #F15A23;        
   }
    
 /*次選單*/ 
 
    
  /*baner*/ 
#banner {   
   position:relative;     
}
#banner ul {
   position:absolute;
   list-style-type:none;
   filter: Alpha(Opacity=80);
   opacity:0.8;
   z-index:1002;
   margin:0; 
   padding:0; 
   bottom:10px; 
   right:20px;
}
#banner ul li { 
   width: 18px;
   height: 18px; 
   FONT-SIZE: 6px;
   padding:0px 0px 0px 1px;
   margin-left:5px;
   float:left;
   display:block;
   color:#FFF;
   border:#e5eaff 1px solid;
   background:#444444;
   cursor:pointer;
   line-height: 17px;
 }
#banner ul li.on { 
   background:#000000
}
#banner_list a{
   position:absolute;
} 
/*baner*/ 
 

/*內文區*/ 

#board{
   background: #E71312;
   height:26px;
   font-size: 14px;
   color:#fff;
   padding:6px 10px 0px 20px;
   line-height: 12px;  
}    
.title{ 
   margin: auto;
   color:#fff;
   height:40px;
   margin: 15px 0 20px 0;      
   padding:10px 10px 3px 25px; 
}    
   
.product-bottom{
   color:white;
   text-align: center;
   font-size:16px;
   margin:40px 0 30px 0;     
}
    
  /*內文區*/ 
    
  /*表尾*/ 

.footer1{
   float: left;
   padding:20px 20px 15px 20px;
}
.footer2{
   float: left;
   color:#EBEBEB;
   line-height: 28px;
   padding:20px 20px 15px 20px;
   letter-spacing: 2px;
   font-size: 14px;     
}
.footer3{
   float: right;
   font-size: 13px;
   line-height: 20px;
   color:#DA933F;  
   padding:20px 20px 20px 20px;
   font-family:  Arial, Helvetica, sans-serif;
}
 
.footer-icon{
    display: flex
}
    
 .circle1 {
    width:50px;
    height:50px;
    border: 1px solid #e2e0e0; 
    border-radius:25px;
    padding-top:15px;
    font-size:15px; 
    font-weight:bold;
    margin:0 2px 10px 0;
    text-align:center;
}  
    
.circle1 a{
    color:#e2e0e0;
}   
 /*表尾*/ 
    
 /*會員登入*/ 
.login{
   background:#FFF;    
   line-height:35px;
   padding:0px 15px 0px 15px;
   text-align: right;
   letter-spacing: 0px;  
   margin-bottom: 10px; 
   box-shadow:1px 1px 5px 0px grey; 
}
.login_title{
   background: #f88a00;
   height:27px;
   font-size: 16px;
   color:#fff;
   text-align:center;
   line-height: 16px; 
   padding:4px 10px 0px 10px; 
}    
.login-word{  
   font-size:14px;
   color:#333;
   text-align:justify;
   letter-spacing: 0px;      
}
    
 /*會員登入*/     
    

    
@media (max-width:680px){
        .show-nav{display:block;}
        .show-sidebar{display:block;}
        .header-top{display:none;}
        .header{flex-direction: column;align-items: center;}
        .header{ justify-content:center;}
        .logo{  padding:5px 10px 0px 10px;}
        .search{  padding:0px 10px 10px 10px;  text-align: center;   line-height: 15px;}       
        .nav{height:auto; display: none; }        
         ul{display: block;} 
         ul> li{ width: 100%; background:#FF9F30;    border-top:1px solid #fff   ;  }        
         ul > li >ul, ul > li >ul>li{ position: static;     width:100%; text-align: center;}         
        .section{flex-direction:column; ;flex-wrap: wrap;}
        .sidebar{display: none; width: 100%  ;}
        .footer{text-align: center;}  
        .footer1,.footer2,.footer3{float: none;margin:0 auto;}
        .footer-icon{justify-content: center;}
      

  
        
    }