.w1600 { width: calc(100% - 8rem); margin: 0 auto; } header { position: fixed; width: 100%; z-index: 5; } .fix-header{ height: 2.835rem; } .pc-block { display: block; } .mb-block { display: none; } .header-top { width: 100%; background-color: rgb(0, 113, 84); height: .8rem; line-height: .8rem; display: flex; align-items: center; justify-content: flex-end; padding: 0 4rem; } .pc-header { width: 100%; display: block; } .header-top a:not(:last-child) { margin-right: 1.25rem; } .header-top a { display: flex; align-items: center; transition: all .3s; -webkit-text-fill-color: rgba(255, 255, 255, .95) } .header-top a:hover { -webkit-text-fill-color: rgba(255, 255, 255, 1) } .header-top a:last-child { cursor: default; } .header-top a span { display: block; height: .325rem; margin-right: .175rem } .header-top a span img { height: 100%; filter: grayscale(0) brightness(50); } .header-bottom { display: flex; align-items: center; height: 2.05rem; padding: 0 4rem; background-color: #fff; justify-content: space-between; } .header-bottom .header-logo a { display: flex; width: 4.6rem; } .header-bottom .header-logo a img { width: 100%; } .header-nav { display: flex; align-items: center; justify-content: flex-end; height: 100%; } .header-nav .ul { display: flex; align-items: center; height: 100%; justify-content: flex-start; transition: all .3s; transition-delay: .1s; } .header-nav .ul .li { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; margin-right: 1.5rem; } .header-nav .ul a { color: rgb(89, 86, 86); font-weight: 400; transition: all .6s ease-in; } .header-nav .ul .li:hover>a { color: rgb(0, 113, 84); } .header-nav .ul .li::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 12px; height: 6px; background-image: url(../img/erq/sjx.png); background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0; visibility: hidden; transition: all .3s .15s ease; } .header-nav .ul .li .li-nav { position: absolute; left: 50%; top: 2.05rem; width: 4rem; background-color: #fff; opacity: 0; visibility: hidden; z-index: 1; transition: all .3s; transform: translateX(-50%) translateY(20px); } .header-nav .ul .li .li-nav a { margin: .25rem 0; display: block; text-align: center; padding: 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid rgba(0, 0, 0, .1); } .header-nav .ul .li .li-nav a:last-child{ margin-bottom: 0; } .header-nav .ul .li .li-nav a:hover{ border-bottom-color: rgba(0, 113, 84, .5); } @media(min-width:1024px) { .header-nav .ul .li:hover .li-nav { transform: translateX(-50%) translateY(0px); opacity: 1; visibility: visible; } .header-nav .ul .li.cur::after, .header-nav .ul .li:hover::after { opacity: 1; visibility: visible; } .header-nav .ul .li.cur>a, .header-nav .ul .li:hover>a { color: #007154; } .header-nav .ul .li .li-nav a:hover { color: rgb(0, 113, 84); } } .header-nav .search { position: relative; } .header-nav .search span { display: block; width: .5rem; cursor: pointer; } .header-nav .search img { width: 100%; } .header-nav .search form { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 7.5rem; height: 1rem; border: 1px solid rgb(0, 113, 84); display: flex; align-items: center; justify-content: space-between; padding-right: .25rem; width: 0; opacity: 0; visibility: hidden; transition: all .3s; } .header-nav .search form input { height: 100%; width: 80%; padding: .25rem .5rem; } .header-nav .search form input::placeholder { color: #999; } .header-nav .search form button { background-color: transparent; } .header-nav .search form input { color: rgb(89, 86, 86); } .header-nav .search.active>span { opacity: 0; position: absolute; visibility: hidden; } .header-nav .search.active form { width: 7.5rem; opacity: 1; visibility: visible; transition-delay: .1s; } .header-nav .ul.hide { position: absolute; right: 0; width: 0; opacity: 0; } .showht { display: flex; align-items: center; justify-content: flex-start; width: 5.5rem; height: 1.225rem; background: #007154; border-radius: .1rem; overflow: visible; padding-left: .5rem; padding-right: .5rem; transition: all .3s; z-index: 3; border: 1px solid #007154; cursor: pointer; } .showht .icons { width: .5rem; height: .5rem; margin-right: .3rem; } .showht .icons .icon { width: 100%; height: 100%; object-fit: cover; } .showht .xl { width: .35rem; height: .35rem; right: .5rem; top: 42%; opacity: .95; transform: translateY(-50%); } .showht span { -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1); transition: all .3s cubic-bezier(0.77, 0, 0.175, 1); } .showht .xl svg { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1); transition: all .3s cubic-bezier(0.77, 0, 0.175, 1); } .showht::after { content: ""; position: absolute; -webkit-transition: inherit; transition: inherit; z-index: -1; top: 0; left: 0; width: 0; height: 100%; border-radius: .1rem; } /* .showht.cur, .showht:hover { color: #007154; border-color: #007154; } */ /* .showht.cur span, .showht:hover span { color: #007154; } */ /* .showht.cur::after, .showht:hover::after { background: #fff; width: 100%; } .showht.cur svg path, .showht:hover svg path { fill: #007154; } */ .hideht { left: 0; margin-top: .05rem; width: 100%; border-radius: .1rem; border: 1px solid rgba(225, 225, 225); z-index: 2; background-color: #fff; display: none; } .hideht .li { height: 1.125rem; line-height: 1.125rem; padding: 0 .5rem; border-bottom: 1px solid rgba(225, 225, 225, 1); z-index: 1; transition: all .3s; } .hideht .li:hover{ color: #fff; border-bottom: #007154; background-color: #007154; } footer { width: 100%; background: #F7F6F6; height: 2.5rem; } footer .w1600 { display: flex; height: 100%; align-items: center; justify-content: space-between; } footer a{ transition: all .3s; } footer .left a, footer .left span { opacity: .6; font-weight: 500; } footer .right a { font-weight: 500; opacity: .2; } footer a:hover { opacity: 1; } .sideNav { position: fixed; right: 0; z-index:3; bottom: 1.25rem; } .sideNav a { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 1.625rem; height: 1.625rem; border-radius: .1rem; margin-bottom: .1rem; } .sideNav a span { opacity: .85; transition: all .3s; } .sideNav a .icon { overflow: hidden; margin-bottom: .125rem; } .sideNav a .icon img { transition: all .3s; } .sideNav a.cu { background: #007154; } .sideNav a.ab { background: #AACE35; } .sideNav a.wx, .sideNav a.pr { background: #FFFFFF; } .sideNav a:last-child { margin-bottom: 0; position: relative; } .sideNav a:last-child .wxbox{ text-align: center; } .sideNav a:last-child .wxbox img{ margin: 0 auto; } .sideNav a:last-child .hidewx{ display: block; position: absolute; top: 45%; transform: translateY(-60%); height: 2.5rem; width:2.5rem; left: -2.5rem; opacity: 0; visibility: hidden; transition: all .3s; } .sideNav a.wx:hover .hidewx img{ transform: none; } .sideNav a.wx:hover .hidewx { opacity: 1; visibility: visible; transform: translateY(-50%); } .sideNav a.ab:hover, .sideNav a.cu:hover { color: #fff; } .sideNav a:hover img { transform: scale(1.05); } .sideNav a.wx:hover, .sideNav a.pr:hover { color: #666; } .sideNav a:hover span { opacity: 1; } .m-header .nume { width: 24px; height: 18px; display: flex; align-items: center; justify-content: space-between; flex-direction: column; position: relative; } .m-header .nume .line { width: 100%; height: 2px; background-color: #666; position: absolute; left: 0; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.5s 0s cubic-bezier(0.645, 0.045, 0.355, 1) !important; } .m-header .nume .line1 { top: 0; } .m-header .nume .line2 { top: 9px; transition: all .3s .3s; } .m-header .nume .line3 { top: 18px; } .m-header .nume.cur { transform: rotateY(-180deg); } .m-header .nume.cur .line1 { transform: rotate(45deg); transform: translate3d(0, 8px, 0) rotate(45deg); } .m-header .nume.cur .line2 { opacity: 0; transition-delay: .1s; } .wrapheader { display: none; } .m-header .nume.cur .line3 { transform: rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } .m-header { display: none; } .sub-banner .banner_nav { bottom: 0; width: 100%; } .sub-banner img{ width: 100%; height: 100%; object-fit: cover; } .sub-banner .banner_nav .w1600 { display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .1); } .sub-banner .banner_nav a { display: inline-block; height: 1.65rem; flex: 1; line-height: 1.65rem; text-align: center; backdrop-filter: blur(5px); font-weight: 400; transition: all .3s; position: relative; } .sub-banner .banner_nav a:not(:last-child,:first-child) { border-left: 1px solid rgba(255, 255, 255, .2); } /* .sub-banner .banner_nav a:not(:first-child)::after{ content: ''; position: absolute; left: 0; height: 100%; width: 1px; height:100%; transition: all .3s; background-color: rgba(255, 255, 255, .2); } .sub-banner .banner_nav a:hover::after, .sub-banner .banner_nav a.on::after{ background-color: #007154; } */ .sub-banner .banner_nav a:hover, .sub-banner .banner_nav a.on { background: #007154; color: #fff; border-color: #007154; } .wrapheader { position: absolute; opacity: 0; visibility: hidden; } .wrapheader .header-nav { display: none; } footer .w1600 p br { display: none; } @media(max-width:996px) { .m-header { display: block; } .pc-header { display: none; } .pc-block { display: none; } .mb-block { display: block; } .header-top { padding: 0 6%; height: 1rem; line-height: 1rem; display: none; } .header-top a:not(:last-child) { margin-right: .5rem; } .header-bottom>.header-nav { display: none; } .header-bottom { height: 1.5rem; padding: 0 6%; } .header-bottom .header-logo a { width: 3.5rem; } .sideNav{ display: none; } .fix-header { height: 1.5rem; } .header-nav.cur { display: flex; } .sub-banner { height: 7rem; } .sub-banner .banner_nav { display: none; } .wrapheader .header-nav { display: flex; background-color: #fff; } .wrapheader { display: none; display: none; position: absolute; left: 0; flex-direction: column-reverse; top: 1.5rem; width: 100%; opacity: 1; visibility: visible; height: calc(100vh - 1.5rem); } .header-nav { position: relative; left: 0; flex-direction: column-reverse; top: 0; height: 100%; width: 100%; padding: 0 6%; padding-top:1rem ; } .header-nav .ul { flex-direction: column; width: 100%; } .header-nav .ul .li { width: 100%; height: auto; margin-right: 0; display: block; justify-content: flex-start; } .wrapheader .header-nav .ul .li>a{ position: relative; } .wrapheader .header-nav .ul .li>a.cusr::after{ transform: translateY(-50%) ; } .wrapheader .header-nav .ul .li:nth-child(1)>a::after{ display: none; } .wrapheader .header-nav .ul .li>a::after{ content: ''; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%) rotate(180deg); width: 12px; height: 6px; background-image: url(../img/erq/sjx.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .header-nav .ul .li a { display: block; width: 100%; padding: .25rem 0; border-bottom: 1px solid rgba(225, 225, 225); } .header-nav .ul .li::after { display: none; } .header-nav .ul .li .li-nav { left: 0; transform: translateX(0); padding: 0; position: relative; display: none; opacity: 1; width: 100%; top: auto; visibility: visible; transform: translateY(0); transition: none; } .header-nav .ul .li .li-nav a { text-align: left; text-indent: 2em; } .header-nav .ul .li.cur { position: relative; width: 100%; } .header-nav .search { width: 100%; margin-bottom: .5rem; } .header-nav .search>span { display: none !important; } .header-nav .search span { width: auto; } .header-nav .search form { position: relative; width: 100%; top: 0; transform: translateY(0); padding-left: 0; padding-right: 0; height: auto; opacity: 1; visibility: visible; padding-right: .5rem; } .header-nav .search form input { width: 90%; } .w1600 { width: 88%; margin: 0 auto; } .formbox{ margin-bottom: 1.5rem; } .formbox .item{ height: 1.25rem; } .formbox .t1 { margin-bottom: 1rem; } } @media (max-width:668px) { footer .w1600 { flex-direction: column; align-items: flex-start; padding: .6rem 0; } footer { height: auto; } footer .w1600 p { display: flex; flex-wrap: wrap; } footer .w1600 p br { display: block; } footer .w1600 span, footer .w1600 a{ display: block; margin-right: .1rem; margin-bottom: .1rem; } } .pagination{ display: flex; align-items: center; justify-content: center; }