.header{width: 100%;} .header .hd_top{height: 0.45rem;line-height: 0.45rem;background: #083364;} .header .hd_top a{color: #fff} .header .hd_top a:hover{color: #f96616;} .header .hd_top .status{display: inline-block;margin-left: 0.35rem} .header .hd_top .status a{padding: 0 0.15rem;} .header .hd_top .set_btn{float: right;display: inline-block;} .header .hd_top .set_btn a{font-size: 0.16rem;} .header .hd_top .set_btn a.language{padding-left: 0.40rem;} .header .hd_top .set_btn span{padding: 0 0.10rem;color: #fff;} @media screen and (max-width: 800px){ .header .hd_top{display: none;} } .header .hd_bot{width: 100%;height: 1.65rem;background: url(../images/hd_bg.png) no-repeat;background-size: 100%;min-height: 55px;} .header .hd_bot .logo{float: left;display: inline-block;margin-left: 0.3rem;margin-top: 0.35rem;} .header .hd_bot .logo img{width: 4.30rem;background-size: 100%;} .header .hd_bot .search{float: right;width: 3.4rem;height: 0.35rem;margin-top: 1.1rem;} .header .hd_bot .search .txt{float:left;width: 1.7rem;height: 0.34rem;font-size: 0.15rem;color: #333;line-height: 0.35rem;padding:5px;border-right:0;-webkit-appearance:none;} .header .hd_bot .search .btn{float:left;width: 0.38rem;height: 0.34rem;display: inline-block;background: #d3d3d3 url("../images/search.png") no-repeat center center;background-size: 80% 80%;line-height: 0.35rem;margin-right: 5px} .header .hd_bot .search a{color: #fff;font-size: 0.16rem} .header .hd_bot .search_btn{display: none;} .header .hd_bot .nav_btn{display: none;} @media screen and (max-width: 800px){ .header .hd_bot{height: 1.28rem;background: url(../images/ph_hd.jpg) no-repeat;background-size: 100%;} .header .hd_bot .inner{width: 100%;} .header .hd_bot .logo{/*margin-left: 0.95rem;*/margin-top: 0.3rem;} .header .hd_bot .logo img{width: 3.8rem;background-size: 100%;animation:myfirst 1s;-webkit-animation:myfirst 1s; /* Safari and Chrome */} .header .hd_bot .search{display: none;} .header .hd_bot .search_btn{display: block;float: right;margin-right: 0.6rem;margin-top: 0.5rem;} .header .hd_bot .search_btn a{font-size: 0.18rem;line-height: 0.18rem;color: #fff;} .header .hd_bot .search_btn img{width: 0.38rem;} .header .hd_bot .nav_btn{display: block;float: right;} .header .hd_bot .nav_btn a{display: block;width: 0.97rem;height: 0.97rem;background: #11aad3 url('../images/ph_nav.png') no-repeat;background-size: 100%;animation:myfirst 1s;-webkit-animation:myfirst 1s; /* Safari and Chrome */} .header.navshow .hd_bot .nav_btn a{background: #11aad3 url('../images/ph_close.jpg') no-repeat;background-size: 100% 100%;} } @keyframes myfirst { from {opacity: 0;right:-162px;} to {opacity: 1;right:0;} } .header_sticky{position: sticky;top: -1px;z-index: 1000} .header_sticky .nav{width: 100%;height: 0.5rem;text-align: center;background: #fff} .header_sticky .nav ul.menu{width: auto;height: 0.5rem;margin: 0 auto;display: inline-block;} .header_sticky .nav ul.menu li{text-align: center;height: 0.5rem;position: relative;display: inline-block;} .header_sticky .nav ul.menu li a.name{height: 0.5rem;padding: 0 0.25rem;font-size: 0.2rem;line-height: 0.5rem;color: #031d79;} .header_sticky .nav ul.menu .list{position: absolute;z-index: 1;opacity: 0;visibility: hidden;left: 33%;right: auto;top: 0.5rem;bottom: auto;background: #fff;width: 2.5rem;margin-left: -1rem;box-shadow: 0 0 0.38rem 0 rgba(0, 0, 0, 0.19);-webkit-box-shadow: 0 0 0.38rem 0 rgba(0, 0, 0, 0.19);-moz-box-shadow: 0 0 0.38rem 0 rgba(0, 0, 0, 0.19);border-top: 0.1rem solid #015ca2;padding: 0.1rem 0 0.2rem;} .header_sticky .nav ul.menu .list li{display: block;height: auto;} .header_sticky .nav ul.menu .list a{display: block;text-align: center;border-bottom: 1px solid #ededed;padding: 0.1rem 0.2rem;font-size: 0.18rem;line-height: 0.3rem;color: #333;} .header_sticky .nav ul.menu .list a:hover{background: #fb9c0a;color: #fff;} .header_sticky .nav ul.menu li:hover a.name{color: #d4600d;} .header_sticky .nav ul.menu li:hover .list{opacity: 1;visibility: visible;top: 100%;transition: opacity 0.5s ease;-webkit-transition: opacity 0.5s ease;-moz-transition: opacity 0.5s ease;-o-transition: opacity 0.5s ease;} .header_sticky.is-pinned .nav{background: #0259a0} .header_sticky.is-pinned .nav ul.menu li a.name{color: #fff} .header_sticky.is-pinned .nav ul.menu li:hover a.name{color: #edae4f;} .header_sticky.is-pinned .nav ul.menu .list{border-top: 0.1rem solid #c5c4c4;} .header .ph_nav{display: none;} @media screen and (max-width: 800px){ .header_sticky .nav{display: none;} .header.navshow .ph_nav{display: block;position: absolute;top: 1.3rem;width: 100%;z-index: 999;border-bottom: 0.2rem solid #015ca2;} .header .ph_menu{background: #fff;} .header .ph_menu a{font-size: 0.38rem;} .header .ph_menu li{width: 100%;text-align: left;border-bottom: 1px solid #ededed;} .header .ph_menu li h2 {position: relative;line-height: 1rem;width: 86%;margin: 0 auto;} .header .ph_menu li h2 a{color: #031d79;line-height: 1rem;} .header .ph_menu li .h2:after {position: absolute;right: 0.22rem;top: 0.36rem;width: 0;height: 0;content: "";border-width: 0.16rem 0.16rem 0 0.16rem;border-style: solid;border-color: #fff transparent;-webkit-transition: all .25s;-moz-transition: all .25s;-ms-transition: all .25s;-o-transition: all .25s;transition: all .25s;} .header .ph_menu li .h2:before {position: absolute;right: 0.17rem;top: 0.36rem;width: 0;height: 0;content: "";border-width: 0.2rem 0.2rem 0 0.2rem;border-style: solid;border-color: #031d79 transparent;-webkit-transition: transform .25s;-moz-transition: transform .25s;-ms-transition: transform .25s;-o-transition: transform .25s;transition: transform .25s;} .header .ph_menu li.active h2:after{top: 0.41rem;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg); } .header .ph_menu li.active h2:before{-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg); } .header .ph_menu li .list{display: none;width: 100%;margin: 0 auto;} .header .ph_menu li .list li a{line-height: 0.8rem;padding-left: 0.8rem} .header .ph_menu li .list li:hover{background: #fb9c0a;} .header .ph_menu li .list li:hover a{color: #fff;} .header .ph_status{width: 100%;background: #fff;display: flex;flex-wrap: wrap;} .header .ph_status li{width: 50%;} .header .ph_status li a{font-size: 0.3rem;line-height: 0.8rem;width: 72%;display: block;margin: 0 auto;} }