@media screen and (min-width: 320px) { div.nav-poa{ position: absolute; left: 0; top: 0; width: 100%;} .nav-box{ height: 55px; position: relative; width: 100%; z-index: 99; /* box-shadow: 0 0 5px rgba(0,0,0,.2); */} .header-box{ height: 55px;} .logo{ float: left; position: relative; z-index: 9; height: 55px; padding: 0;} .logo a{ display: block; height: 100%;} .logo img{ display: block;height:100%;} .nav-btn{ display: block; padding: 0 10px; margin-right: -10px; float: right; cursor: pointer; position: relative; z-index: 9;} .nav-btn i{ line-height: 55px; font-size: 22px; width: 24px; text-align: center; color: #fff;} .nav-hide-btn{ display: none;} .nav-btn-show .nav-hide-btn{ display: block;} .nav-btn-show .nav-show-btn{ display: none;} .nav{ position: absolute; top: -1000%; left: 0; right: 0; background: #222; background: rgba(0,0,0,.9); border-top: solid 1px rgba(0,0,0,.1); padding:10px 15px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); -webkit-transform-origin:0% 0%; transform-origin:0% 0%; -webkit-transform: scaleY(.5) translateY(-25%); transform: scaleY(.5) translateY(-25%); opacity: 0; filter:Alpha(opacity=0); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;} .nav:before{content: ' '; border-bottom: solid 8px rgba(0,0,0,.7); border-left: solid 8px transparent; border-right: solid 8px transparent; position: absolute; right: 19px; top: -8px;} .nav-show{ top: 55px; opacity: 1; filter:Alpha(opacity=100); -webkit-transform: none; transform: none;} .nav-list{ visibility: visible !important;} .nav-list li{ border-top: solid 1px rgba(255,255,255,.1);} .nav-list li a{ display: block; } .nav-list li a b{font-weight: normal; line-height: 42px; position: relative; color: #eee; display: block; text-align: center;} .bd-more{ position: absolute; bottom: 0; left: 50%; margin-left: -8px; border-bottom: solid 8px rgba(128,128,128,.5); border-left: solid 8px transparent; border-right: solid 8px transparent; opacity: 0; filter:Alpha(opacity=0); -webkit-transform: translateY(8px); transform: translateY(8px);} .nav-list li .nav-list-sub{ opacity: 0; filter:Alpha(opacity=0); -webkit-transform-origin:0% 0%; transform-origin:0% 0%; overflow: hidden; background: rgba(128,128,128,.5); height: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: hidden;} .nav-list li .nav-list-sub div{ padding: 10px 15px;} .nav-list li .nav-list-sub a{ line-height: 40px; border-bottom: solid 1px rgba(255,255,255,.1); color: #ddd; font-size: 12px; text-align: center;} .nav-list li .nav-list-sub a:nth-last-child(1){border: none;} .nav-list li .nav-list-sub a:hover span,.nav-list li .nav-list-sub a.on-02 span{ color: #ed5e03;} .nav-list .nav-on{ border-color: transparent; position: relative; z-index: 9;} .nav-list .nav-on a{border-bottom:none ;} .nav-list .nav-off{ position: relative; z-index: 1;} .nav-on .bd-more{ opacity: 1; filter:Alpha(opacity=100); -webkit-transform: none; transform: none;} .nav-list li.nav-on .nav-list-sub{ opacity: 1; filter:Alpha(opacity=100);} .nav-list li .on b{ color: #e15617;} .nav-list li.nav-on a b{ color: #e15617;} .nav-box-bg{ position: absolute; z-index: 8; -webkit-background-size: cover; background-size: cover; overflow: hidden; height: 55px; left: 0; right: 0; background: #43494B; border-bottom: solid 2px #ed5e03;} /* 00144c */ .nav-list div.nav-btn-bg,.nav-list div.nav-btn-bg-02{ opacity: 0; filter:Alpha(opacity=0); width: 100%; left: 0; top: 0; height: 46px; background: #ffa039; z-index: -1; position: absolute; } .nav-list div.nav-btn-bg-02{ width: auto; left: auto;} .nav-list div.nav-btn-bg-02-show{ opacity: 1; filter:Alpha(opacity=100); } .header-t{ display: none;} /*PC二级下拉背景色*/ .nav-list-sub-bg{ display: none;} .header-swiper-box{ position: absolute; left: 0; top: 0; width: 100%;} .header-bg{ height: 0; background-position: center center; background-repeat: no-repeat; background-color: #0172d1;} } @media screen and (min-width: 375px) { } @media screen and (min-width: 480px) { .logo{ height: 75px;} .nav-box{ height: 75px;} .header-box{ height: 75px;} .nav-box-bg{ height: 75px;} .nav-show{ top: 75px;} .nav-btn i{ line-height: 75px; font-size: 28px; width: 30px;} .sub-logo{ height: 75px;} body{ background-position: center 75px;} } @media screen and (min-width: 992px) { .nav:before{display: none;} .nav-box{ height: 95px; box-shadow: none; position: relative;} .header-box{ height: 95px;} .logo{ height: 95px; padding: 0; } .logo img{ margin: 0 auto;} .logo a{ width: 100%; display: block;display:flex;align-items:center;} .nav-btn{ display: none;} .nav-box-bg{ height: 95px; top: 0;} .nav{ width: 100%;position: relative; -webkit-transform: none; transform: none; opacity: 1; filter:Alpha(opacity=100); z-index: 9; box-shadow: none; padding: 0; border-top: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: visible; background: none; top: 0;} .nav-list{ position: absolute; top: 0; width: auto; right: 0;padding-right:30px;} .search-box{position:absolute;right:0;top:0;line-height:95px;} .nav-list:after{ content: ' '; overflow: hidden; clear: both; display: block;} .nav-list li{ float: left; border-bottom: none; position: relative; border: none;} .nav-list li a b{ line-height: 95px; height: 95px; font-weight: bold; color: #fff; overflow: hidden;} .nav-list li a{ height: 95px; line-height: 95px; padding: 0 15px; font-size: 16px; position: relative; } .nav-list li .nav-list-sub a:after{ content: ' '; width: 1px; height: 14px; background: #fff; position: absolute; right: 0; top: 50%; margin-top: -7px;} /*.nav-list li:nth-last-of-type(1) a:after{display: none;}*/ .nav-list li.nav-on>a b{ color: #fff; } .nav-list li.nav-off>a b{} .nav-list li .on b/*,.nav-list li a:hover b*/{ color: #fff; font-weight: bold;} .nav-list li .on .nav-btn-bg{ opacity: 1;filter:Alpha(opacity=100); } .bd-more{border-bottom-color: #fff;} .nav-list li .nav-list-sub{ position: absolute; top: 100px; height: auto !important; opacity: 0; filter:Alpha(opacity=0); -webkit-transform: translateY(8px); transform: translateY(8px); box-shadow: 0 5px 8px rgba(0,0,0,.3); top: -1000%; left: 0; right: 0; width: auto; background: none; box-shadow:none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; width: 1000%;} .nav-list li .nav-list-sub .nav-list-height{ float: left; padding: 0; overflow: hidden;} .nav-list li .nav-list-sub a{ padding: 0; height: auto; border: none; font-size: 14px; float: left; padding: 0 15px; } .nav-list li .nav-list-sub a:after{display: none;} .nav-list li .nav-list-sub a span{ text-align: center; display: block; line-height: 32px; color: #666; position: relative;} .nav-list li .nav-list-sub a:hover,.nav-list li .nav-list-sub a.on-02{ background: #fff;} .nav-list li .nav-list-sub a:hover span,.nav-list li .nav-list-sub a.on-02 span{ color: #ed5e03;} /* .nav-list li .nav-list-sub a:hover span:after,.nav-list li .nav-list-sub a.on-02 span:after{ width: 100%; opacity: 1; filter:Alpha(opacity=100);}*/ .nav-list li.nav-off a b{ color: #fff;} .nav-list li.nav-on .nav-list-sub{ opacity: 1; filter:Alpha(opacity=100); -webkit-transform: none; transform: none; top: 95px;} .nav-list div.nav-btn-bg,.nav-list div.nav-btn-bg-02{ height: 95px; background: none; border-bottom: none; overflow: hidden;} .nav-list div.nav-btn-bg:before,.nav-list div.nav-btn-bg-02:before{content:' '; opacity: 1; left: 50%; bottom: 0; border-bottom: solid 10px #ed5e03; border-right: solid 10px transparent; border-left: solid 10px transparent; margin-left: -10px; z-index: 9; -webkit-transform: none; transform: none; display: block; width: 0; position: absolute;} .nav-list li a.on i.bd-more{ display: none;} /*.nav-list li.nav-off a i.bd-more{ -webkit-transform: translateY(10px); transform: translateY(10px);}*/ .nav-list li.nav-on i{display: none;} /*PC二级下拉背景色*/ .nav-list-sub-bg{ display: block; width: 100%; position: absolute; top: -100%; height: 34px; width: 100%; left: 0; background: #fff; opacity: 0; filter:Alpha(opacity=0); border-top: solid 2px #fd731f;} .nav-list-sub-bg-show{ opacity: .9; filter:Alpha(opacity=90); top: 93px;} } @media screen and (min-width: 1280px) { .nav-list li a{ font-size: 16px; padding: 0 25px;} .nav-list li a b{ font-size: 18px;} }