@charset "utf-8";
/*Background_setting*/
*{ margin:0; padding:0; line-height:100%; font-family:"微軟正黑體",Arial; box-sizing:border-box;}
*:focus { outline: none;}
::selection{ background-color:#000088; color:#fff;}
a{ text-decoration:none;}
body{ position:relative;}
/*header*/
.header{  border:0px #ff0000 solid; width:100%; height:100px; position:fixed; top:0; left:0; background-color:white; padding:0 30px ; z-index:99;}
.logo{ display:inline-block; margin-right:30px;}
.mobile_menu_btn{ display:none; }
.menu_blcok{ position:absolute; top:0; right:30px;}
.menu_blcok .menu{ height:110px; line-height:110px; border-bottom:7px solid #fff; display:inline-block; font-size:17px; color:#333; margin-left:26px; transition:.2s;}
.menu_blcok .menu:hover, .menu_blcok .menu.hover{ border-bottom:7px solid #000000; transition:.3s;}
.have_class{ display:inline-block; position:relative;}
.have_class .menu_level2{ height:0; display:inline-block; position:absolute; top:110px; left:40px; padding-top:5px; overflow:hidden; transition:.3s;}
.have_class .menu_level2 .menu02{ width:152px;  font-size:13px; color:#000000; background-color:#f0f0f0; display:inline-block; padding:6px 8px; margin-bottom:5px; position:relative; border-left:4px solid #000000 ; transition:1s;}
.have_class .menu_level2 .menu02 p{ display:block; font-size:15px; color:#333; padding-top:3px; line-height:22px;}
.have_class:hover .menu_level2{ height:100px; transition:0.5s;}
.have_class .menu_level2 .menu02:hover{ margin-left:10px;  transition:.3s;}
/*footer*/
.footer{ border:0px #0000ff solid; width:100%; display:block; background-color:#444; text-align:center; padding:35px 0 20px 0; z-index: 10;}
.footer_top_line{ width:368px; height:6px; background-color:#797979; display:inline-block; margin-bottom:20px;}
.footer_text{ font-size:15px; color:#fff; display:block; padding-bottom:15px;}
.footer_text a{ display:inline-block; font-size:15px; color:#fff; border-left:1px solid #fff; padding-left:5px; margin-left:5px;}
.footer_text a:hover{ color:#ccc;}
.footer_text a:first-child{ border:0; margin:0; padding:0;}




@media screen and (max-width:1023px) and ( min-width:768px){
/*header*/
.header{ height:55px; padding:0 15px;}
.logo,.logo img{ height:55px;}
.menu_blcok .menu{ height:55px; line-height:55px;}
.have_class .menu_level2{ top:55px;}
}




@media screen and ( max-width:767px) {
/*header*/
.header{ height:55px; padding:0 10px;}
.logo{ margin-right:15px;}
.logo,.logo img{ height:55px;}
.mobile_menu_btn{ cursor: pointer; width:47px; height:55px; padding:8px 0 5px 0; display:inline-block; position:absolute; top:0; right:0;}
.mobile_menu_btn p{ width:30px; height:25%; border-bottom:2px solid #000000;}
.menu_blcok { display: none; background-color:#fff; position:absolute; top:60px; left:5px; right:5px; box-shadow: 0 3px 8px 1px rgba(0,0,0,.2); }
.menu_blcok.show{ display: block; }
.menu_blcok .menu{ display:block; height:50px; line-height:50px; margin:0; padding:0 15px;}
.have_class{ display:block;}
.have_class .menu_level2{ width:100%; height:auto; position:static; background-color:#f0f0f0;}
.have_class:hover .menu_level2{ height:auto; transition:.3s;}
.have_class .menu_level2 .menu02{ width:100%; background:none;}
.menu_blcok .menu:hover, .menu_blcok .menu.hover{ border-bottom:1px solid #000000;}

/*footer*/
.footer{ padding:30px 10px 0px 10px;}
.footer_text{ text-align:left; line-height:25px;}
.footer_text a{ display:block; border:0; margin:0; padding:10px 0 0 0;}
.footer_text a:first-child{ padding:10px 0 0 0;}
}