/* 鍒囨崲 */ .tabs-box .hd-line{transition: .3s;} .tabs-box .hd>*{position: relative;} .tabs-box .bd{ position: relative; overflow: hidden;} .e-anim-hide{display: none;} .e-anim-on{ display: block;} .e-anim-off{ pointer-events: none; display: block; display: none\9;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .e-anim-off { display: block; } /* IE10+ */ } .tabs-box .e-anim-on{animation:tabs-anim-on .3s;animation-fill-mode: both; width: 100%;} .tabs-box .e-anim-off{ animation:tabs-anim-off .3s; width: 100%; position: absolute; animation-fill-mode: both; top: 0;} @keyframes tabs-anim-on{ from { opacity: 0; } to {opacity: 1;} } @keyframes tabs-anim-off{ from { opacity: 1; } to { opacity: 0;} } @media screen and (min-width: 320px) { div.nav-poa{ position: absolute; left: 0; top: 0; width: 100%;} .container-header{position: relative;} .nav-box-bg{height: 55px; width: 100%; position: absolute; left: 0; top: 0; z-index: 8;} .nav-box{ height: 55px; position: relative; width: 100%; z-index: 100; /* box-shadow: 0 0 5px rgba(0,0,0,.2); */ } .header-box{ height: 55px; display: none;} .logo{ float: left; position: relative; z-index: 2; height: 55px; padding: 0;} .logo a{ display: block; height: 100%;} .logo img{ height:100%; display: block;} .nav-btn{ display: block; padding: 0 10px; margin-right: -10px; float: right; cursor: pointer; position: relative; z-index: 9; border: solid 1px #c3191e; background: #c3191e; margin-top: 10px; border-radius: 4px; height: 37px;} .nav-btn i{ line-height: 35px; font-size: 18px; width: 18px; text-align: center; color: #fff; overflow: hidden; display: inline-block;} .nav-btn i.nav-hide-btn{ display: none;} .nav-btn-show i.nav-hide-btn{ display: block;} .nav-btn-show i.nav-show-btn{ display: none;} .nav{ position: absolute; top: 55px; left: 0; right: 0; background: #c3191e; padding:10px 15px; -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.2); -moz-box-shadow: 0 10px 20px rgba(0,0,0,.2); box-shadow: 0 10px 20px rgba(0,0,0,.2); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; z-index: 8;} .nav.e-anim-on{animation:nav-anim-on .3s; animation-fill-mode: both; } .nav.e-anim-off{ animation:nav-anim-off .5s; animation-fill-mode: both;} .nav-list{ visibility: visible !important;} .nav-list li{} .nav-list li a::before{ content: ' '; border-top: solid 1px #a10e12; position: absolute; bottom:0; left: 0; right: 0;} .nav-list li:nth-last-child(2) a::before{display: none;} .nav-list li a{ display: block; position: relative;} .nav-list li a b{font-weight: normal; line-height: 42px; position: relative; color: #fff; display: block; text-align: center;} .nav-list li .nav-list-sub{ overflow: hidden; background: #a10e12; overflow: hidden; transition:height .3s,opacity .3s;} .nav-list li .nav-list-sub div{ padding: 10px 0;} .nav-list li .nav-list-sub a{ line-height: 40px; border-bottom: solid 1px rgba(0,0,0,.1); color: #fff; font-size: 12px; text-align: center;} .nav-list li .nav-list-sub a::before{ display: none;} .nav-list li .nav-list-sub a:nth-last-child(1){border: none;} .nav-list li .nav-list-sub a span{ color: #fff;} .nav-list li .nav-list-sub a.on-02 span{ color: #085CA5;} .nav-list li .nav-list-sub a.on-02{ background: #E7EFF6;} .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-list li .on{ } .nav-list li .on b,.nav-list li .on i:before{ color: #fff;} .nav-list li.nav-on a b,.nav-list li.nav-on a i:before{ color: #fff;} .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: #0A6FD7; z-index: -1; position: absolute; display: none;} .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); } .nav-list-sub.e-anim-hide{ display: block; } .nav-list a b{ transition: color .3s,background .3s;} .nav-list-height.e-anim-on{animation:nav-list-anim-on .3s; animation-fill-mode: both; display: block;} .nav-list-height.e-anim-off{ animation:nav-list-anim-off .3s; animation-fill-mode: both; display: block;} .nav-list li .nav-list-sub div.btn-sub-bg{display: none;} .nav-top{ background: #a10e12; padding: 15px; border-radius: 8px; margin-bottom: 15px; display: flex; justify-content: center;} .nav-top dl{ position: relative; padding:0 10px;} .nav-top dt a{display: flex; align-items: center; justify-content: center;} .nav-top dt i.icon-l{ padding-right: 5px; line-height: 16px;} .nav-top dt i.icon-r{ padding-left: 5px; line-height: 16px;} .nav-top dt i.icon-l::before{ color: #fff; font-size: 16px; line-height: 16px;} .nav-top dt i.icon-r::before{ color: #fff; font-size: 12px; line-height: 16px;} .nav-top dt span{color: #fff;} .m-hide{display: none;} .lang-btn .e-anim-on{animation:lang-anim-on .3s; animation-fill-mode: both; } .lang-btn .e-anim-off{ animation:lang-anim-off .5s; animation-fill-mode: both;} .lang-btn dd {position: absolute; left: 50%; margin-left: -50px; top: 30px; width: 100px; z-index: 2;} .lang-btn dd i{ border-bottom: solid 8px #f4f4f4; border-left: solid 8px transparent; border-right: solid 8px transparent; position: absolute; left: 50%; top: -8px; margin-left: -10px;} .lang-btn dd div{ background: #f4f4f4; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: 5px;} .lang-btn dd div a{display: block; text-align: center; padding: 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} .lang-btn dd div a.on{ background: #c3191e; color: #fff;} .nav-search{position:relative;} .nav-search input{ border:none; padding:5px 50px 5px 15px; border-radius:4px; width:100%; height:40px;} .nav-search button{ position:absolute; right:0; top:0; width:40px; height:40px; border:none; background:none; cursor:pointer;} .nav-search button i::before{ color:#3f3f3f;} .nav-search button:hover i::before{ color:#a10e12;} } @keyframes lang-anim-on{ from { opacity: 0; transform: translateY(-10px);} to {opacity: 1; transform: translateY(0);} } @keyframes lang-anim-off{ from { opacity: 1; transform: translateY(0);} to { opacity: 0; transform: translateY(-10px);} } @keyframes nav-anim-on{ from { opacity: 0; transform: translateY(-10px); filter: blur(2px);} to {opacity: 1; transform: translateY(0);} } @keyframes nav-anim-off{ from { opacity: 1; transform: translateY(0); filter: blur(0);} to { opacity: 0; transform: translateY(-10px); filter: blur(2px);} } @keyframes nav-list-anim-on{ from { opacity: 0; transform: translateY(-20px);} to {opacity: 1; transform: translateY(0);} } @keyframes nav-list-anim-off{ from { opacity: 1; transform: translateY(0);} to { opacity: 0; transform: translateY(20px);} } @media screen and (min-width: 375px) { } @media screen and (min-width: 480px) { /* .logo{ height: 76px; padding: 30px 0;} .nav-box-bg{ height: 76px;} .nav-box{ height: 76px;} .header-box{ height: 76px;} .nav{ top: 76px;} .nav-btn i{ line-height: 76px; font-size: 28px; width: 30px;} */ } @media screen and (min-width: 992px) { .nav{ height: 85px;} .nav:before{display: none;} .nav-box-bg{ height: 85px; } .nav-box{ box-shadow: none; position: relative; height: 85px; background: #fff;} .header-box{ height: 50px; display: block; background: #c3191e;} .logo{ height: 85px; padding: 0; margin-top: 0; z-index: 11;} .logo img{ margin: 0 auto;} .logo a{ width: 100%; height: 100%; display: block; padding: 0;} .nav-btn{ display: none;} .nav{ 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; padding-left: 0; padding-right: 0; left: auto; right: auto; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} .nav-list:after{ content: ' '; overflow: hidden; clear: both; display: block;} .nav-list{ position: relative; width: 100%; display: flex;} .nav-list li{flex-grow:1; border-bottom: none; position: relative; border: none;} .nav-list li a::before{ border: none; left: auto; top: 15px; bottom: 15px; border-left: solid 1px #ffffff;} .nav-list li a b{ line-height: 50px; height: 50px; color: #FFFFFF; overflow: hidden; font-weight: normal; font-size: 14px;} .nav-list li a{ height: 50px; line-height: 50px; padding: 0; font-size: 14px; position: relative;} .nav-list{ padding-left: 2px; padding: 0 200px 0 0;} /*.nav-list li:nth-last-of-type(1) a:after{display: none;}*/ .nav-list li.nav-on>a b{ color: #FFFFFF;} .nav-list li.nav-off>a b{ color: #FFFFFF;} .nav-list li .on b/*,.nav-list li a:hover b*/{ color: #FFFFFF;} .nav-list li .on .nav-btn-bg{ opacity: 1;filter:Alpha(opacity=100); background: #d73241;} .bd-more{border-bottom-color: #fff; display: none;} .nav-list li .nav-list-sub{ position: absolute; top: 50px; box-shadow: 0 5px 8px rgba(0,0,0,.3); box-shadow:none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;padding-top: 0; left: 0; right: auto; width: auto; background: none; min-width: 100%;} .nav-list li .nav-list-sub .nav-list-height{padding: 10px 0; overflow: hidden; position: relative; background: #a10e12; background: #fff;} .nav-list li .nav-list-sub a{ height: auto; border: none; font-size: 12px; padding: 0 10px; text-align: center; line-height: 40px; position: relative; z-index: 2; display: block;} .nav-list li .nav-list-sub a span{ color: #333; white-space: nowrap; padding: 0; font-size: 14px; line-height: 40px;} .nav-list li .nav-list-sub a:hover span,.nav-list li .nav-list-sub a.on span{ color:#d73241;} .nav-list li .nav-list-sub a:hover,.nav-list li .nav-list-sub a.on{background: none;} .nav-list div.nav-btn-bg,.nav-list div.nav-btn-bg-02{ height: 50px; transition: .3s; display: block; background: #d73241;} .nav-list-sub.e-anim-hide{ display: none;} .nav.e-anim-hide{ display: block;} .nav-list-height.e-anim-on{animation:nav-list-anim-on-pc .5s; animation-fill-mode: both; display: block;} .nav-list-height.e-anim-off{ animation:nav-list-anim-off-pc .2s; animation-fill-mode: both; display: block;} /*PC浜岀骇涓嬫媺鑳屾櫙鑹?/ .nav-list-sub-bg{ display: block; position: absolute; top: -100%; height: 40px; width: 100%; left: 0; background: #0A6FD7; opacity: 0; filter:Alpha(opacity=0); } .nav-list-sub-bg-show{ opacity: 1; filter:Alpha(opacity=100);} .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: #0A6FD7;} /* pc浜岀骇鏍忕洰婊戝潡 */ .nav-list li .nav-list-sub div.btn-sub-bg{display: block; position: absolute; width: 0; left: 0; height: 40px; padding: 0; border-bottom: solid 2px #fff; transition: .3s;} /* top-r */ .nav-top{position: absolute; right: 0; top: 20px; left: auto; padding: 0; background: none; margin-bottom: 0;} .nav-top .m-hide{display: block;} .nav-top dl{padding: 0 0 0 30px;} .nav-top dt span{ color: #333;} .nav-top dt i.icon-l::before{ color: #c3191e; font-size: 20px; line-height:1;} .nav-top dt i.icon-r::before{ color: #333;} .nav-top dt a{ padding: 10px 0;} .lang-btn dd{ top: 44px; margin-left: -35px;} .nav-top dt a:hover span{ color: #c3191e;} .nav-top dt a:hover i.icon-r::before{ color: #c3191e;} .nav-search{position:absolute; right:0; top:94px; z-index:9;} .nav-search input{ width:180px; height:32px; font-size:14px; } .nav-search button{ height:32px; width:32px;} } @keyframes nav-list-anim-on-pc{ from { opacity: 0; transform: translateY(-10px);} to {opacity: 1; transform: translateY(0);} } @keyframes nav-list-anim-off-pc{ from { opacity: 1; transform: translateY(0);} to { opacity: 0; transform: translateY(10px);} } @media screen and (min-width: 1240px) { .nav{height: 100px;} .nav-box-bg{ height: 100px; } .nav-box{ height: 100px;} .logo{ height: 100px;} .header-box{ height: 60px;} .nav-list li a{height: 60px;} .nav-list li a b{ height: 60px; line-height: 60px; font-size: 14px;} .nav-list div.nav-btn-bg, .nav-list div.nav-btn-bg-02{height: 60px;} .nav-top{ top: 28px;} .nav-list li a::before{top:20px; bottom:20px;} .nav-list li .nav-list-sub{top: 60px;} .nav-list li .nav-list-sub a{ line-height: 45px;} .nav-list li .nav-list-sub a span{ line-height: 45px; font-size: 14px;} .nav-search{position:absolute; right:0; top:94px; z-index:9;} .nav-search{top:112px;} .nav-search input{height:35px;} .nav-search button{height:35px; width:35px;} } /*@media screen and (min-width: 1540px) { .container-header{ width: 1400px;} .nav{height: 105px;} .nav-box-bg{ height: 105px; } .nav-box{ height: 105px;} .logo{ height: 105px;} .header-box{ height: 60px;} .nav-list li a{height: 60px;} .nav-list li a b{ height: 60px; line-height: 60px; font-size: 18px;} .nav-list div.nav-btn-bg, .nav-list div.nav-btn-bg-02{height: 60px;} .nav-top{ top: 20px;} .nav-list li a::before{ top: 20px; bottom: 20px;} .nav-list{ padding: 0 200px 0 0;} .nav-list li .nav-list-sub{top: 60px;} .nav-list li .nav-list-sub a{ line-height: 50px;} .nav-list li .nav-list-sub a span{ line-height: 50px; font-size: 16px;} .nav-top dt i.icon-l::before{ font-size: 24px;} .nav-top dt i.icon-r::before{font-size: 20px;} .nav-top dt a{ padding: 20px 0;} .lang-btn dd{ top: 64px; width: 120px; margin-left: -45px;} .lang-btn dd div a{ font-size: 16px; line-height: 40px;} .nav-search{top:117px;} .nav-search input{height:35px;} .nav-search button{height:35px; width:35px;} } */