*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
body{line-height:1.5;text-transform:uppercase;}
a{text-decoration:none;}

#header{width:100%; margin: 0 auto; /*position:absolute; z-index: 100;*/ position: relative; height: 170px; font-size:16px; color: #464857; background: url("../img/common/nav-bg.png") repeat;}
#header .headTop{ width: 1000px; margin: 0 auto;}
#header .headTop::after{content:"";clear:both;display:block}
#header .headTop .logo{ float:left; margin-top: 15px;}
#header .headTop .logo h1{ margin: 0;}
#header .headTop .logo h1 img{ width: 290px;}
#header .headTop .logo a{ display:block;}
#header .headTop .contactArea{ float: right; font-size: 15px; font-weight: bold;}
#header .headTop .contactArea ul{ margin-top: 30px;}
#header .headTop .contactArea ul li{ display: inline-block; padding-left: 22px; margin-left: 18px;}
#header .headTop .contactArea ul li a{ color: #464857;}
#header .headTop .contactArea ul li.iconTel{ background: url("../img/common/icon-tel.png") no-repeat left center; background-size: 18px;}
#header .headTop .contactArea ul li.iconFax{ background: url("../img/common/icon-fax.png") no-repeat left center; background-size: 18px;}
#header .headTop .contactArea ul li.iconInq{ background: url("../img/common/icon-form.png") no-repeat left center; background-size: 18px;}
#header .headTop .contactArea ul li.iconCau{ background: url("../img/common/icon-sales.png") no-repeat left center; background-size: 18px;}
nav{ width: 1000px; margin: 20px auto 0; font-size: 14px;}
nav>ul{position:relative;}
nav ul::after{content:"";clear:both;display:block}
nav li{list-style:none;float:left; margin-right: 96px;}
nav li:nth-child(6){ margin-right: 0;}
nav .dropdown{position:relative}
nav li a{ height: 50px; padding: 40px 0 0 0; text-align: center; color: #464857; transition: all .5s; display: block;}
nav li span{ height: 50px; padding: 40px 0 0 0; text-align: center; color: #646572; display: block;}
nav li a:hover{ opacity:0.6; filter:alpha(opacity=60); transition: all .5s; color: #810001;}
nav li a.nav01{ background: url("../img/common/nav01.png") no-repeat center top; background-size: 35px;}
nav li a.nav02{ background: url("../img/common/nav02.png") no-repeat center top; background-size: 35px;}
nav li a.nav03{ background: url("../img/common/nav03.png") no-repeat center top; background-size: 35px;}
/*nav li span.nav04{ background: url("../img/common/nav04.png") no-repeat center top;background-size: 35px; opacity: 0.5;}*/
nav li a.nav04{ background: url("../img/common/nav07.png") no-repeat center top; background-size: 35px;}
nav li a.nav05{ background: url("../img/common/nav05.png") no-repeat center top; background-size: 35px;}
nav li a.nav06{ background: url("../img/common/nav06.png") no-repeat center top; background-size: 35px;}

#menu-icon{ position: absolute; right: 0; top: 50%; margin-top: -12px; margin-right: 30px; display: none;}
#menu-icon span{ border: 2px solid #3395C4; background: #3395C4; width: 30px; margin-bottom: 5px; display: block; -webkit-transition: all .2s; transition: all .1s;}
/*@media only screen and (max-width: 1200px) {
  nav >ul>li >a{width: 122px; height: 80px; padding: 26px 0 0;}
}*/
@media only screen and (min-width: 769px) {
nav{display:block!important}
}

@media only screen and (max-width: 768px) {
#header{ width:100%; height: 50px; position: fixed; top: 0; font-size:14px; color:#464857; height: auto; padding-bottom: 10px; font-size:16px; color: #464857; z-index: 1000; background: /*rgba(255,255,255,0.85)*/ #FFF; box-sizing: border-box; align-self: baseline;}
#header .headTop{ width: 100%; margin: 0 auto;}
#header .headTop::after{content:"";clear:both;display:block}
	
#header .headTop .logo{ float:left; margin-top: 0;}
#header .headTop .logo h1{ width: 150px; margin: 10px 0 0 10px;}
#header .headTop .logo h1 a img{ width: 150px; vertical-align: middle; display: block;}
#header .headTop .contactArea{ float: right; margin-right: 54px;}
#header .headTop .contactArea ul{ margin-top: 10px;}
#header .headTop .contactArea ul li{ display: inline-block; padding-left: 0; margin-left: 5px;}
#header .headTop .contactArea ul li a img{ width: 26px;}

#menu-icon{display:inline;top:25px;cursor:pointer; margin-right: 10px;}
#menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px}
#menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-9px;}
#menu-icon.active .third{display:none}	
	
nav{display:none;width:100%;clear:both;float:none;max-height:400px;overflow-y:scroll;padding: 10px; margin: 10px auto 0;}
nav ul{ float:none; padding-right: 0;}
nav li{ float:none; border-bottom: #3395C4 dotted 1px; margin-bottom: 10px; margin-right: 0;}
nav ul li a{ float:none;color: #464857;padding:0 0 10px 40px;display:block;width: auto; height: auto; text-align: left;}
nav ul li span{float:none;color: #646572; padding:0 0 10px 40px;display:block;width: auto; height: auto; text-align: left;}
nav li a:hover{ opacity:0.6; filter:alpha(opacity=60); transition: all .5s;}
nav li a.nav01{ background: url("../img/common/nav01.png") no-repeat left top; background-size: 24px;}
nav li a.nav02{ background: url("../img/common/nav02.png") no-repeat left top; background-size: 24px;}
nav li a.nav03{ background: url("../img/common/nav03.png") no-repeat left top; background-size: 24px;}
/*nav li span.nav04{ background: url("../img/common/nav04.png") no-repeat left top; background-size: 24px; opacity: 0.5;}*/
nav li a.nav04{ background: url("../img/common/nav07.png") no-repeat left top; background-size: 24px;}
nav li a.nav05{ background: url("../img/common/nav05.png") no-repeat left top; background-size: 24px;}
nav li a.nav06{ background: url("../img/common/nav06.png") no-repeat left top; background-size: 24px;}
}