/*pc*/
.tel-bar {display: inline-block;background: #008DD5;color: #fff;padding: 2em 4em;text-align: center;}
.tel-bar img{width: 4em;margin-bottom: 1em;}
.tel-bar .tel-link{font-size: 2em;display: block;color: #fff!important;}
.tel-bar p{display: inline-block;font-size: 0.9em; padding: 0.5em;line-height: 1;margin: auto;/*background-color:#34B7FB*/}
.icon { display:inline-block;width:1em!important;height:1em!important;vertical-align:middle;margin-top:-.15em; background-size:100% auto; background-repeat:no-repeat;}
.icon-tel                 { background-image:url(../img/icon-tel.png);}
.icon-arrow-blue          { background-image:url(../img/arrow-blue.png);}

@media (min-width: 768px){
	.header {position: relative; z-index: 100;width: 1200px!important; margin: auto;font-size: 12px;}
	.header:before,.header:after { content: ""; display:block; width: 100%; overflow: hidden; clear: both;}
	.header .logo{float:left; margin-top: 2em;  margin-bottom: 2em; }
	.header .logo img{zoom:0.6;}
	.header .search-bar{display: none;float:right;margin-top:3.2em; margin-left: 3em; white-space: nowrap; border: 1px #008dd5 solid;border-radius: 100px;overflow: hidden;line-height: 1;}
	.header .search-bar input{width: 50px; padding: 0 .8em; background: #fff; border: none;display: inline-block; vertical-align: middle;transition: width 300ms;}
	.header .search-bar input:focus{/*width: 80px;*/}
	.header .search-bar a{display: inline-block; vertical-align: middle; width: 2.4em;height:1.5em;background:url(../img/icon-search-w.png) no-repeat center #008dd5;background-size: 50% auto;cursor: pointer;}
	.header .nav{float:right;margin-top:3.7em;height: 3em;background: none!important;}
	.header .nav .ul-dep-1 {height: 100%;}
	.header .nav .li-dep-1 {display:inline-block;vertical-align: top;padding: 0 1.2em;height: 100%;float: none;width: auto;}
	.header .nav .a-dep-1 {display:inline-block;color: #000;height: 100%;font-size: 1em;}
	.header .nav .a-dep-1:before {display:none;}
	.header .nav a {color: #000;cursor: pointer;display: block}
	.header .nav a:hover {color: #008dd5;}
	.header .a-dep-3 {background: url(../img/arrow-12px.png) no-repeat left 3px;padding-left: 1em;}
	.header .a-dep-3 + .nav-sub{padding-left: 2em;}
	.header .a-dep-3 + .nav-sub li{margin-bottom: 0.2em;}
	.header .a-dep-1 + .nav-sub{position: absolute;left:-10000px;top:100%;width:1000px;overflow:hidden;background: #fff;background:rgba(255,255,255,0.95); transform:translate(0,10px);opacity:0;transition:transform 200ms, opacity 200ms, left 0ms 200ms;}
	.header .nav .li-dep-1:hover .a-dep-1 + .nav-sub{left:0px;transform:translate(0,0); opacity:1;transition:transform 500ms, opacity 500ms 100ms, left 0s 0s;}

	.header .nav .ul-dep-2 {text-align: center;position: relative;}
	.header .nav .li-dep-2 {display:inline-block;vertical-align: top; margin: 20px 30px;text-align: left;}
	.header .nav .li-dep-2-case,
	.header .nav .li-dep-2-history,
	.header .nav .li-dep-2-honor {position:absolute;left:52.3%;}
	.header .nav .li-dep-2-case{top:25%;}
	.header .nav .li-dep-2-history{top:40%;}
	.header .nav .li-dep-2-honor {top:55%;}
	.header .nav .a-dep-2 {display: block; font-size:11px; color:#000; font-weight: bold;margin-bottom: 1em;}
	
	.header .nav .li-dep-3 {margin-bottom: 0.8em;}
	
	.header .nav-folder-toggle .a-dep-3 {position: relative;}
	.header .nav-folder-toggle .a-dep-3:before{content: "+";position: absolute;right: 6em;top: 2px;line-height: 1;color: #008DD5}
	.header .nav-folder-toggle .nav-sub{ height: 0; overflow: hidden;}
	.header .nav-folder-open > .nav-sub{ height: auto;}
	.header .nav-folder-open > .a-dep-3:before{content: "-";}
	
	.ie8 .header .nav-folder-open  .nav-sub{ height: auto;}
	.ie8 .header .nav-folder-open .nav-folder-toggle .a-dep-3:before{content: "-";}
	
	.li-dep-tel .nav-sub {background: none!important;text-align: right;width: auto!important; }
	.header .nav .li-dep-tel:hover .a-dep-1 + .nav-sub{left: auto!important;right:0;}

	.li-dep-commercial {margin-right: -2em!important;}
	/**/
	.header .nav-aboutus .li-dep-2 {margin: 20px;}
	.header .ul-dep-4{margin-top: 0.3em;}
}
/*ipad*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.header {width: auto!important;}
	.header .logo {margin-left: 1em;margin-top: 2em; margin-bottom: 2em;}
	.header .nav {margin-top: 2em;}
	.header .a-dep-1 + .nav-sub {width: 100%;}
	.header .nav .li-dep-2 {margin: 20px;}
}
/*mobile*/
@media (max-width: 767px){
	.header {background: #fff;width:auto!important;font-size: 12px; text-align: center;   padding-bottom: 30px;border-bottom: 1px #eaeaea solid;padding-top: 30px;margin-bottom: 0px;   }
	.header:before,.header:after { content: ""; display:block; width: 100%; overflow: hidden; clear: both;}
	.header .logo{display: inline-block;}
	.header .logo:before{content:""; display: inline-block; vertical-align: middle;width: 0em; height:100%;}
	.header .logo img{zoom:1;vertical-align: middle; height: 62px;  width: 128px; }
	
	.header .search-bar{display: none!important;white-space: nowrap; border: 1px #008dd5 solid;border-radius: 100px;overflow: hidden;line-height: 1;}
	.header .search-bar input{width: 50px; padding: 0 .8em; background: #fff; border: none;display: inline-block; vertical-align: middle;transition: width 300ms;}
	.header .search-bar input:focus{width: 80px;}
	.header .search-bar a{display: inline-block; vertical-align: middle; width: 2.4em;height:1.5em;background:url(../img/icon-search-w.png) no-repeat center #008dd5;background-size: 50% auto;cursor: pointer;}
	.header .nav{position: fixed;z-index: 1000;left:100%;top:0;background:#fff;width: 80%;height:100%; box-sizing: border-box; padding: 20px 0; overflow-x:hidden;overflow-y: auto; -webkit-overflow-scrolling:touch;}
	.m-nav-toggle {float:right;width: 40px; height:40px;position: relative;}
	.m-nav-toggle span{ position:absolute;left:50%;top:50%; width:46%;height:3px; margin-left:-23%;margin-top: -1px; display:block; background:#555;border-radius: 5px;}
	.m-nav-toggle span:first-child{ margin-top:-7px;}
	.m-nav-toggle span:last-child { margin-top: 5px;}
	.m-nav-mask {position:absolute;left:0;top:0;z-index:2000;width:100%;height:0;overflow:hidden;background:rgba(0,0,0,0);transition: background 300ms, height 0ms 200ms;text-align:right;}
	.m-nav-mask:before { content:"╳"; font-size:2em; color:#fff; font-family:serif,arial; display:inline-block; width:20%; text-align:center; margin-top:.5em;}
	.m-nav-open .frame,.m-nav-open .container { transform:translate(-80%,0);}
	.m-nav-open .nav { display:block;}
	.m-nav-open .nav ul { display:block;}
	.m-nav-open .m-nav-mask { height:100%;background:rgba(7,134,211,.95); box-shadow:0 0 10px rgba(0,0,0,0.2);transition: background 300ms, height 0ms 0ms;}
	.m-nav-open .search-bar {display: block;position: fixed;left:100%;top:70%;margin-left: 20px;margin-top: 20px; z-index: 1000;border-radius: 0;}
	.m-nav-open .search-bar input {width: 15em; padding: 1em;}
	.m-nav-open .search-bar input:focus {width: 15em;}
	.m-nav-open .search-bar a {padding: 1.1em;}
	
	.header .nav li{ margin: 0 20px;}
	.header .nav li + li {border-top: 1px #eee dotted;}
	.header .nav a{font-size: 12px; display:inline-block; padding: 1em;box-sizing: border-box;transform: translate(0, 0);transition:transform 0ms 0ms;background: #fff;color: #000;}
	.header .nav-folder:before{ content: ""; float: right;width:0.5em; height:0.5em; margin: 1.5em; border-top: 1px #555 solid;border-right: 1px #555 solid;transform: rotate(45deg);}
	.header .nav-sub{position:absolute;z-index: 300; left:100%;top:0%;width:100%;height:100%;background:rgba(255,255,255,1); padding:0px;box-sizing: border-box;overflow-x:hidden;overflow-y: auto;-webkit-overflow-scrolling:touch;transition:transform 300ms;}
	.header .nav-sub:before{ content: "";display: block;height: 60px;}
	.header .nav-sub:after{ content: "";position: absolute;left: 0;top:0; width:1em; height:1em; margin:2em;border-top: 1px #555 solid;border-left: 1px #555 solid;transform: rotate(-45deg);}
	.header .nav-folder-open:before{transform: rotate(135deg);}
	.header .nav-folder-open:after{content: "空";padding: 1em;display: inline-block; color:#008dd5; visibility: hidden;}
	.header .nav-folder-open > a{position: absolute;z-index: 200;right:-50%;top:0;width:50%;height:60px;padding:0;padding-right: 20px; transform: translate(-100%, 0);font-size: 1.2em;text-align: right;transition:transform 300ms 200ms;background: #fff;}
	.header .nav-folder-open > a:before{content: "";display: inline-block; height: 100%; vertical-align: middle;}
	.header .nav-folder-open > .nav-sub{transform: translate(-100%, 0); z-index: 190}
	.header .nav-sub-open {z-index: 300!important;}
	
	.m-tel-toggle {float: right;width: 40px; height: 40px;text-align: center;font-size: 12px;}
	.m-tel-toggle:before {content: ""; display: inline-block; width: 0; height: 110%; vertical-align: middle;}
	.m-tel-toggle .toggle-sub {display:none;position: fixed;z-index: 1000; width: 100%;left: 0;top: 40px;font-size: 1.2em;box-sizing: border-box;}
	.m-tel-toggle .toggle-sub img {zoom:1;}
	.m-tel-open   {background: #008DD5}
	.m-tel-open .toggle-btn i {background-image:url(../img/icon-tel-white.png);}
	.m-tel-open .toggle-sub {display: block;}
	
	
	/*for nav-product*/
	.header .nav li.nav-product {margin: auto;z-index: 190;}
	.header .nav li.nav-product:before {display: none;}
	.header .nav li.nav-product > .a-dep-1 {display: none;}
	.header .nav li.nav-product > .nav-sub {position:inherit;left:auto;top: top;width: auto;height: auto;overflow-x: visible;overflow-y: visible;transition:none;}
	.header .nav li.nav-product > .nav-sub:before,
	.header .nav li.nav-product > .nav-sub:after {display: none;}
	
	.header .li-dep-tel .nav-sub {position: relative;z-index: 180; left: 0;height:auto;overflow: hidden;}
	.header .li-dep-tel .nav-sub:before,.header .li-dep-tel .nav-sub:after {display: none;}
	.header .li-dep-tel .nav-sub .tel-bar  {display: block;background: none;padding: 0;padding-left: 2.1em; color: #000;text-align: left}
	.header .li-dep-tel .nav-sub .tel-bar img{display: none;}
	.header .li-dep-tel .nav-sub .tel-bar div {display: none}
	.header .li-dep-tel .nav-sub .tel-bar > a {display: block;background: none;color: #0786d3!important;font-size: 1.6em;line-height: 1.2}
	.header .li-dep-tel .nav-sub .tel-bar > * {padding: 0;}
	.header .li-dep-tel .nav-sub .tel-bar > p {font-size: 0.7em;vertical-align: top;}

}