header{position: fixed;top:0;left:0;z-index: 11;width: 100%;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;background:white;height: 80px;}
header .logo{margin-left: 75px;}
header>ul{display: inline-block;vertical-align: middle;}
header>ul>li{display: inline-block;margin-left: 50px;letter-spacing: 2px;position: relative;height: 100%;position: relative;line-height: 80px;}
header .xs-visible{display: none;}
header>ul>li:before{content: "";position: absolute;left: 0;bottom: 0px;height: 3px;width: 100%;background: #0973BF;transform: scale(0);transition: all 0.3s;}
header>ul>li:hover:before{transform: scale(1);}
header>ul>li:hover ul{display: block;}
header>ul>li:hover a{color: #0973BF;}
header>ul>li.active:before{content: "";position: absolute;left: 0;bottom: 0px;height: 3px;width: 100%;background: #0973BF;transform: scale(1);transition: all 0.3s;}
header>ul>li.active a{color: #0973BF;}

header .head_icon{margin-right: 10%;display: flex;align-items: center;}
header .head_icon>p{margin-right: 10px;transition: all .2s linear;}
header .head_icon>div{width: 40px;height: 40px;border-radius: 50%;display: inline-block;cursor: pointer;position: relative;}
header .head_icon .search{background-image: url(../images/search.png);background-color: #353436;background-size: cover;margin-right: 10px;}
header .head_icon>div .search{position: relative;}
header .head_icon .search form input{width:0;padding:0 42px 0 15px;border-bottom:2px solid transparent;background:transparent;transition: all .4s linear;position:absolute;top:0;right:0;z-index:2;height: 40px;font-size: 14px;}
header .head_icon .search form input:focus {width:150px;z-index:1;border-bottom:2px solid #0973BF;}


header .head_icon .search form input::-webkit-input-placeholder{font-size: 1rem;}
header.cur .head_icon .search form input{font-size: 14px;}
header .head_icon .items{background-image: url(../images/classfiy.png);background-color: #0973BF;background-size: cover;}
header .head_icon .items:hover{background-image: url(../images/close.png);}
header .head_icon .items ul{position: absolute;top:100%;left: 50%;transform: translateX(-50%);opacity: 0;visibility: hidden;padding-top: 20px;}
header .head_icon .items:hover  ul{opacity:1;visibility:visible;}
header .head_icon .items ul li{white-space: nowrap;background: #fff;}
header .head_icon .items ul li a{display: block;padding:10px 30px;position: relative;background: #fff;font-size: 14px;}
header .head_icon .items ul li a:after{position: absolute;content: "";left:10px;top:50%;transform: translateY(-50%);width:5px;height: 5px;background: #353436;}
header .head_icon .items ul li a:hover{color:#0973bf;}
header .head_icon .items ul li a:hover:after{background:#0973bf;}
header .head_icon .items ul:before{content: "";position: absolute;bottom: calc(100% - 20px);left:50%;transform: translateX(-50%);border: 7px solid transparent;border-bottom:15px solid  #fff;}
header .product_drop{position: absolute;left: 0;top: 100%;width: 100%;background: rgba(57,112,170,0.9);box-shadow: 2px 7px 35px #ccc;height: 273px;display: none;}
header .product_drop .wrap{max-width: 1118px;margin: 3% auto 0;display: flex;justify-content: space-between;}
header .product_drop .wrap .drop_l{width: 23%;}
header .product_drop .wrap .drop_m{width: 33%;text-align: left;border-right: 1px solid #fff;}
header .product_drop .wrap .drop_m h2{font-size: 14px;}
header .product_drop .wrap .drop_m h2 a{color: #fff;}
header .product_drop .wrap .drop_m ul{display: flex;flex-wrap: wrap;margin: 10px 0 20px;}
header .product_drop .wrap .drop_m ul li{width: 32%;}
header .product_drop .wrap .drop_m ul li a{font-size: 12px;color: #fff;}
header .product_drop .wrap .drop_r{width: 38%;text-align: left;color: #fff;}
header .product_drop .wrap .drop_r h2{font-size: 14px;}
header .product_drop .wrap .drop_r div{font-size: 12px;line-height: 1.7;margin-top: 10px;}

.onepiece{font-size: 20px;
    color: #d9cac5;}
header .product_drop1{position: absolute;left: 0;top: 100%;width: 100%;background: rgba(57,112,170,0.9);box-shadow: 2px 7px 35px #ccc;height: 273px;display: none;}
header .product_drop1 .wrap{max-width: 1118px;margin: 3% auto 0;display: flex;justify-content: space-between;}
header .product_drop1 .wrap .drop_l{width: 23%;}
header .product_drop1 .wrap .drop_m{width: 33%;text-align: left;border-right: 1px solid #fff;}
header .product_drop1 .wrap .drop_m h2{font-size: 14px;color: #fff;}
header .product_drop1 .wrap .drop_m ul{display: flex;flex-wrap: wrap;margin: 10px 0 20px;}
header .product_drop1 .wrap .drop_m ul li{width: 32%;}
header .product_drop1 .wrap .drop_m ul li a{font-size: 12px;color: #fff;}
header .product_drop1 .wrap .drop_r{width: 38%;text-align: left;color: #fff;}
header .product_drop1 .wrap .drop_r h2{font-size: 14px;}
header .product_drop1 .wrap .drop_r div{font-size: 12px;line-height: 1.7;margin-top: 10px;}

header .product_drop2{position: absolute;left: 0;top: 100%;width: 100%;background: rgba(57,112,170,0.9);box-shadow: 2px 7px 35px #ccc;height: 273px;display: none;}
header .product_drop2 .wrap{max-width: 1118px;margin: 3% auto 0;display: flex;justify-content: space-between;}
header .product_drop2 .wrap .drop_l{width: 23%;}
header .product_drop2 .wrap .drop_m{width: 33%;text-align: left;border-right: 1px solid #fff;}
header .product_drop2 .wrap .drop_m h2{font-size: 14px;color: #fff;}
header .product_drop2 .wrap .drop_m ul{display: flex;flex-wrap: wrap;margin: 10px 0 20px;}
header .product_drop2 .wrap .drop_m ul li{width: 32%;}
header .product_drop2 .wrap .drop_m ul li a{font-size: 12px;color: #fff;}
header .product_drop2 .wrap .drop_r{width: 38%;text-align: left;color: #fff;}
header .product_drop2 .wrap .drop_r h2{font-size: 14px;}
header .product_drop2 .wrap .drop_r div{font-size: 12px;line-height: 1.7;margin-top: 10px;}

header .product_drop3{position: absolute;left: 0;top: 100%;width: 100%;background: rgba(57,112,170,0.9);box-shadow: 2px 7px 35px #ccc;height: 273px;display: none;}
header .product_drop3 .wrap{max-width: 1118px;margin: 3% auto 0;display: flex;justify-content: space-between;}
header .product_drop3 .wrap .drop_l{width: 23%;}
header .product_drop3 .wrap .drop_m{width: 33%;text-align: left;border-right: 1px solid #fff;}
header .product_drop3 .wrap .drop_m h2{font-size: 14px;color: #fff;}
header .product_drop3 .wrap .drop_m ul{display: flex;flex-wrap: wrap;margin: 10px 0 20px;}
header .product_drop3 .wrap .drop_m ul li{width: 32%;}
header .product_drop3 .wrap .drop_m ul li a{font-size: 12px;color: #fff;}
header .product_drop3 .wrap .drop_r{width: 38%;text-align: left;color: #fff;}
header .product_drop3 .wrap .drop_r h2{font-size: 14px;}
header .product_drop3 .wrap .drop_r div{font-size: 12px;line-height: 1.7;margin-top: 10px;}

header .product_drop4{position: absolute;left: 0;top: 100%;width: 100%;background: rgba(57,112,170,0.9);box-shadow: 2px 7px 35px #ccc;height: 273px;display: none;}
header .product_drop4 .wrap{max-width: 1118px;margin: 3% auto 0;display: flex;justify-content: space-between;}
header .product_drop4 .wrap .drop_l{width: 23%;}
header .product_drop4 .wrap .drop_m{width: 33%;text-align: left;border-right: 1px solid #fff;}
header .product_drop4 .wrap .drop_m h2{font-size: 14px;color: #fff;}
header .product_drop4 .wrap .drop_m ul{display: flex;flex-wrap: wrap;margin: 10px 0 20px;}
header .product_drop4 .wrap .drop_m ul li{width: 32%;}
header .product_drop4 .wrap .drop_m ul li a{font-size: 12px;color: #fff;}
header .product_drop4 .wrap .drop_r{width: 38%;text-align: left;color: #fff;}
header .product_drop4 .wrap .drop_r h2{font-size: 14px;}
header .product_drop4 .wrap .drop_r div{font-size: 12px;line-height: 1.7;margin-top: 10px;}

header .product_drop5{position: absolute;left: 0;top: 100%;width: 100%;background: rgba(57,112,170,0.9);box-shadow: 2px 7px 35px #ccc;height: 273px;display: none;}
header .product_drop5 .wrap{max-width: 1118px;margin: 3% auto 0;display: flex;justify-content: space-between;}
header .product_drop5 .wrap .drop_l{width: 23%;}
header .product_drop5 .wrap .drop_m{width: 33%;text-align: left;border-right: 1px solid #fff;}
header .product_drop5 .wrap .drop_m h2{font-size: 14px;color: #fff;}
header .product_drop5 .wrap .drop_m ul{display: flex;flex-wrap: wrap;margin: 10px 0 20px;}
header .product_drop5 .wrap .drop_m ul li{width: 32%;}
header .product_drop5 .wrap .drop_m ul li a{font-size: 12px;color: #fff;}
header .product_drop5 .wrap .drop_r{width: 38%;text-align: left;color: #fff;}
header .product_drop5 .wrap .drop_r h2{font-size: 14px;}
header .product_drop5 .wrap .drop_r div{font-size: 12px;line-height: 1.7;margin-top: 10px;}


.xs-visible{display: none;}
.xs-hidden{}
/*小屏导航栏样式*/
.p-h-menu{ float: right; }
.p-h-line{    margin-top: 10px;
    margin-right: 15px; 
    width: 35px;height: 30px;
  }
.p-h-line span{
    position: relative;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background-color: #0973BF;
    margin: 7px 0;
    display: block;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.p-h-line.curr .head-l-x {
    top: 10px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.p-h-line.curr .head-l-y{ display: none; }
.p-h-line.curr .head-l-z {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.p-h-m-list{ position: absolute; top:100%; left: 0; z-index: 10; width: 100%; background-color:#0973BF; display: none; transition: none;}
.p-h-main{ display: block; padding: .5rem 5%; font-size: 14px;; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }
.p-h-main.p-h-arrow{ background-image: url(../images/arrow-b1.png); background-repeat: no-repeat; background-position: 95% center; background-size: 20px; }
.p-h-main.p-h-arrow:hover{color:#fff;}
.p-h-main.curr{ background: #0f6eca url(../images/arrow-b1.png) no-repeat 95% center; background-size: 20px; }
.p-h-submenu{ padding: .5rem 7%; border-bottom: 1px solid rgba(255,255,255,.1); display: none; transition: none;}
.p-h-submenu a{ display: block; color: #fff; font-size: 14px; line-height: 1.8; }

@media screen and (max-width:1420px ) {
	header>ul>li{margin-left: 40px;}
	header>ul>li>a{font-size: 14px;}
	header .head_icon{margin-right:7%;}
	
}
@media screen and (max-width: 1200px) {
	header .head_icon{display: none;}
	header>ul>li{margin-left: 25px;}
	header>ul{margin-right: 6%;}
}
@media screen and (max-width:768px ) {
	header{height: 64px;}
	.xs-visible{display: block!important;}
  	.xs-hidden{display: none!important;}
	header .logo{margin-left: 15px;}
	header .nav{display: none;position: absolute;top: 100%;left: 0;background: rgba(0,0,0,0.5);}
	header>ul>li{width: 100%;font-size: 16px;padding: 5%;border-bottom: 1px dashed #FFFFFF;}
	header .head_icon{display: none;}

}