/*头部样式*/ header {width: 100%;z-index: 10;transition: all 0.5s;height: 90px;position: sticky;top: 0;background: #fff;} header.z-active {z-index: 99;} @media screen and (max-width: 1024px) {header { height: 60px;}} header .header-phone-click {cursor: pointer;width: 22px;height: 16px;align-items: center;position: relative;right: 5%;margin-right: 0;margin-left: auto;} @media screen and (max-width: 1024px) {header .header-phone-click { display: flex;}} header .header-phone-click .phone-click-line {height: 2px;background: #000;width: 100%;transition: all 0.5s;overflow: hidden;} header .header-phone-click .phone-click-line::before,header .header-phone-click .phone-click-line::after {content: '';position: absolute;width: 100%;height: 2px;background: #000;transition: all 0.5s;} header .header-phone-click .phone-click-line::before {top: 0;transition: all 0.5s;} header .header-phone-click .phone-click-line::after {bottom: 0;transition: all 0.5s;} header .header-phone-click.active .phone-click-line {background: transparent;transition: all 0.5s;} header .header-phone-click.active .phone-click-line::before {margin: auto;transition: all 0.5s;transform: translateY(7px) rotate(45deg);} header .header-phone-click.active .phone-click-line::after {margin: auto;transition: all 0.5s;transform: translateY(-7px) rotate(-45deg);} header .header-box {display: flex;justify-content: space-between;align-items: center;height: 100%;padding: 0 3.125vw;} @media screen and (max-width: 1024px) {header .header-box { width: 100%; max-width: 100%;}} header .header-box .logo {max-width:200px;} @media screen and (max-width: 1024px) {header .header-box .logo { width: 100%; margin-left: 0%; justify-content: flex-start; max-width: 100px; height: 40px;}} header .header-box .logo img {max-width: inherit;max-height: 100%;object-fit: contain;width: 100%;} header .header-box .header-menu {display: flex;align-items: center;height: 100%;} header .header-box .header-menu .header-code {display: flex;align-items: center;justify-content: flex-end;margin-top: 20px;cursor: pointer;} @media screen and (max-width: 1024px) {header .header-box .header-menu .header-code { display: none;}} header .header-box .header-menu .header-code .item {width: 30px;position: relative;margin-left: 20px;} header .header-box .header-menu .header-code .item .code-show {width: 150px;position: absolute;top: 30px;left: 50%;transform: translateX(-50%);display: none;z-index: 2;} header .header-box .header-menu .header-code .item:hover .code-show {display: block;} @media screen and (max-width: 1440px) {header .header-box .header-menu { flex-basis: calc(100% - 150px); justify-content: flex-end;}} @media screen and (max-width: 1024px) {header .header-box .header-menu { width: 100%; position: absolute; background: #fff; top: 60px; height: 100vh; z-index: 10; left: 0; margin-left: 0; padding: 30px 5% 30px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: none; overflow: auto;}} header .header-box .header-menu nav {color: #fff;display: flex;align-items: center;justify-content: flex-end;height: 100%;} @media screen and (max-width: 1366px) {header .header-box .header-menu nav { margin-left: auto; margin-right: 40px;}} @media screen and (max-width: 1024px) {header .header-box .header-menu nav { width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: auto;}} header .header-box .header-menu nav .first-item {transition: all 0.2s;display: flex;align-items: center;justify-content: center;padding: 0 40px;height: 100%;} @media screen and (max-width: 1600px) {header .header-box .header-menu nav .first-item { padding: 0 20px;}} @media screen and (max-width: 1366px) {header .header-box .header-menu nav .first-item { padding: 0 20px;}} @media screen and (max-width: 1024px) {header .header-box .header-menu nav .first-item { height: auto; width: 100%; margin-right: 0; justify-content: flex-start; position: relative; flex-direction: column; align-items: flex-start; margin-left: 0;}} header .header-box .header-menu nav .first-item .first-box {position: relative;width: 100%;height: 100%;} header .header-box .header-menu nav .first-item .first-box::after {content: '';top: -20px;bottom: 0;right: 0;width:109px;height:20px;margin: auto;background: url("../images/img00.png") no-repeat center right / contain;position: absolute;transition: all 0.5s;opacity: 0;pointer-events: none;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .first-box::after { display: none;}} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .first-box { border-bottom: 1px solid #eee;}} header .header-box .header-menu nav .first-item.active .first-box::after,header .header-box .header-menu nav .first-item:hover .first-box::after {opacity: 1;} header .header-box .header-menu nav .first-item.active .first-item-title,header .header-box .header-menu nav .first-item:hover .first-item-title {color: #000;font-family: Outfit-SemiBold;} header .header-box .header-menu nav .first-item .first-item-title {font-size:20px;height: 100%;display: flex;justify-content: center;align-items: center;position: relative;color: #333;transition: all 0.2s;width: 100%;padding:5px 0;} @media screen and (max-width: 1600px) {header .header-box .header-menu nav .first-item .first-item-title { font-size: 16px;}} @media screen and (max-width: 1280px) {header .header-box .header-menu nav .first-item .first-item-title { font-size: 14px;}} @media screen and (max-width: 1024px) {header .header-box .header-menu nav .first-item .first-item-title { color: #222; height: 50px; width: 100%; justify-content: flex-start;}} header .header-box .header-menu nav .first-item i {display: none;width: 50px;height: 50px;position: absolute;right: -10px;top: 0;bottom: 0;margin: auto;cursor: pointer;transition: all 0.5s;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item i { display: block;}} header .header-box .header-menu nav .first-item i::before,header .header-box .header-menu nav .first-item i::after {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;background: #000;} header .header-box .header-menu nav .first-item i::before {width: 14px;height: 2px;} header .header-box .header-menu nav .first-item i::after {height: 14px;width: 2px;} header .header-box .header-menu nav .first-item i.active {transform: rotate(45deg);} header .header-box .header-menu nav .first-item .second-box {position: absolute;top: 90px;-webkit-box-shadow: 0 10px 50px rgba(54, 56, 79, 0.11);box-shadow: 0 10px 50px rgba(54, 56, 79, 0.11);width: 100%;left: 0;height: 120px;opacity: 0;visibility: hidden;transition: all 0.5s;background: #ffffff;display: flex;justify-content: center;align-items: center;pointer-events: none;/*特殊*/} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box { position: relative; top: 0; background: none; opacity: 1; visibility: visible; transform: translate(0); padding: 0; box-shadow: none; border: none; display: none; transition: all 0s; pointer-events: auto; height: auto;}} header .header-box .header-menu nav .first-item .second-box .second-item {position: relative;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-item { margin: 10px 0 0;}} header .header-box .header-menu nav .first-item .second-box .second-item .second-item-title {color: #222;display: block;font-size: 16px;transition: all 0.2s;text-align: left;padding: 10px 20px;line-height: 1.4;} @media screen and (max-width: 1440px) {header .header-box .header-menu nav .first-item .second-box .second-item .second-item-title { font-size: 14px;}} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-item .second-item-title { color: #000; text-align: left; padding: 0 10px;}} @media screen and (min-width: 769px) {header .header-box .header-menu nav .first-item .second-box .second-item .second-item-title:hover { color: var(--dominant-color);}} header .header-box .header-menu nav .first-item .second-box .second-item .second-item-title:hover {color: var(--dominant-color);} header .header-box .header-menu nav .first-item .second-box .second-product {display: flex;flex-wrap: wrap;justify-content: flex-start;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-product { padding-bottom: 30px; width: 100%;} header .header-box .header-menu nav .first-item .second-box .second-product::-webkit-scrollbar:horizontal { height: 2px;}} header .header-box .header-menu nav .first-item .second-box .second-product .second-item {flex-basis: 20%;margin: 0;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-product .second-item { flex-basis: 100%;}} header .header-box .header-menu nav .first-item .second-box .second-product .second-item:nth-child(n + 6) {margin-top: 30px;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-product .second-item:nth-child(n + 6) { margin-top: 0;}} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .img {height: 40px;position: relative;display: block;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-product .second-item .img { display: none;}} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .img img {height: auto;max-height: 100%;position: absolute;top: 0;left: 0;bottom: 0;margin: auto;} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .second-item-title {color: #222;text-align: left;padding: 0;transition: all 0.5s;margin-top: 10px;display: inline-block;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-product .second-item .second-item-title { margin-top: 10px; padding: 0 10px; position: relative; width: 100%;}} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .second-item-title:hover {color: var(--dominant-color);} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .three-box {margin-top: 10px;line-height: 2;} @media screen and (max-width: 768px) {header .header-box .header-menu nav .first-item .second-box .second-product .second-item .three-box { margin-top: 0; display: none; padding-left: 30px; margin-bottom: 10px;}} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .three-box .three-item-title {display: block;transition: all 0.5s;font-size: 12px;color: #999;width: fit-content;} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .three-box .three-item-title:hover {color: var(--dominant-color);} header .header-box .header-menu nav .first-item .second-box .second-product .second-item .three-box .three-item-title.news {color: var(--dominant-color);font-size: 12px;} header .header-box .header-menu nav .first-item .second-box .second-product .second-item:hover .three-box {opacity: 1;visibility: visible;} header .header-box .header-menu nav .first-item .second-box.product {background: #ffffff;} @media screen and (min-width: 1025px) {header .header-box .header-menu nav .first-item:hover .second-box { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;}} header .header-box .header-menu nav .first-item:hover a {color: var(--dominant-color);} header .search {cursor: pointer;} @media screen and (max-width: 1440px) {header .search { margin-left: 0;}} @media screen and (max-width: 768px) {header .search { width: 100%; margin: 30px 0; display: none;}} header .search img {width: 20px;} header .search i {font-size: 20px;color: #333;} header .search i.search-click {display: flex;} @media screen and (max-width: 768px) {header .search i.search-click { display: none;}} header .search i.search-close {display: none;} header .search.active i.search-click {display: none;} header .search.active i.search-close {display: block;} header .search .search-show {position: absolute;top: -90px;border-radius: 4px;border: 2px solid #666;right: 90px;width: 100%;height: 70px;max-width: 1000px;background: #f3f3f3;z-index: 2;transition: all 0.5s;} @media screen and (max-width: 768px) {header .search .search-show { position: relative; top: 30px; right: 0; border: none; height: 50px;}} header .search .search-show.active {top: 10px;} header .search label {display: block;position: relative;width: 100%;height: 100%;border-radius: 20px;overflow: hidden;} @media screen and (max-width: 1080px) {header .search label { width: 150px;}} @media screen and (max-width: 768px) {header .search label { width: 100%; border: 1px solid #000000;}} header .search label input {height: 100%;width: 100%;background: none;color: #999;border: none;font-size: 20px;} header .search label button {background: none;width: 50px;height: 100%;position: absolute;top: 0;right: 0;color: #fff;font-size: 20px;display: flex;align-items: center;justify-content: center;opacity: 0.9;transition: all 0.5s;} @media screen and (max-width: 1440px) {header .search label button { color: #000;}} header .search label button i {font-size: 24px;} header .search label button:hover {opacity: 1;} header .language {color: #fff;position: relative;cursor: pointer;width: 140px;height: 40px;background: #fff;border-radius: 30px;display: flex;align-items: center;justify-content: center;} @media screen and (max-width: 768px) {header .language { display: none;}} header .language .language-title {display: flex;justify-content: space-between;align-items: center;color: #333333;font-size: 16px;cursor: pointer;border-radius: 20px;border: 1px solid #999;width: 90px;height: 34px;padding: 0 10px;} @media screen and (max-width: 768px) {header .language .language-title { color: #000; font-size: 14px; justify-content: flex-start;}} header .language .language-title i {margin-left: 20px;font-size: 14px;transform: translateY(1px);} header .language .language-title .language-icon {font-size: 22px;transition: all 0s;} header .language .language-title .language-icon:hover {transform: scale(1.05);} header .language .language-title .language-text {margin-left: 6px;} @media screen and (max-width: 768px) {header .language .language-title .language-text { display: block;}} header .language .language-show {position: absolute;top: 0;padding-top: 50px;color: #333;right: 0;width: 120px;transition: all 0.5s;opacity: 0;visibility: hidden;transform: translateY(-10px);pointer-events: none;} header .language .language-show .language-show-item {padding: 10px 0;background: #fff;overflow: hidden;-webkit-box-shadow: 0 10px 50px rgba(54, 56, 79, 0.11);box-shadow: 0 10px 50px rgba(54, 56, 79, 0.11);} header .language .language-show .language-show-item a {text-align: center;display: block;height: 40px;line-height: 40px;transition: all 0.5s;} header .language .language-show .language-show-item a:hover {background: var(--dominant-color);color: #fff;} header .language:hover .language-show {opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;} /*头部样式*/ /*底部样式*/ .footer {position: relative;background: #b7000e;} .footer .footer-box {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 50px 0 0px;} @media screen and (max-width: 768px) {.footer .footer-box { padding: 50px 0;}} .footer .footer-box .left {flex-basis:50%;margin-right: 50px;} .footer .footer-box .right {flex: 1;max-width:45%;} .footer .footer-menu {display: flex;justify-content: space-between;flex-basis: 100%;grid-gap: 30px;} @media screen and (max-width: 768px) { .footer .footer-box .left {flex-basis:100%;margin-right: 0px;} .footer .footer-menu { flex-direction: column; display: none;}} .footer .footer-menu .first-item {display: block;font-size: 18px;color: #fff;font-weight: 600;} @media screen and (max-width: 768px) {.footer .footer-menu .first-item { font-size: 14px; margin-bottom: 20px;}} .footer .footer-menu .first-summary {border-bottom: 1px solid #eee;font-size: 16px;margin-bottom: 20px;padding-bottom: 20px;color: #fff;margin-top: 20px;} .footer .footer-menu .bottom .b-item {display: flex;align-items: center;color: #fff;margin-bottom: 10px;} .footer .footer-menu .bottom .b-item .icon {margin-right: 20px;} .footer .footer-menu .second-box {margin-top: 20px;} .footer .footer-menu .second-box img {max-width: 120px;} @media screen and (max-width: 768px) {.footer .footer-menu .second-box { margin-top: 10px; line-height: 1.6;}} .footer .footer-menu .second-box a,.footer .footer-menu .second-box span {display: block;color: #fff;font-size: 16px;transition: all 0.5s;position: relative;width: fit-content;margin-bottom: 10px;line-height: 1.4;} .footer .footer-menu .second-box a::after {width: 0;background: var(--dominant-color);height: 1px;bottom: 0;left: 0;position: absolute;transition: all 0.5s;} .footer .footer-menu .second-box a:hover {color: #fff;} .footer .footer-menu .second-box a:hover::after {width: 100%;} .footer .footer-right {flex-basis: 350px;display: flex;align-items: center;color: #fff;margin-left: auto;justify-content: space-between;} @media screen and (max-width: 1280px) {.footer .footer-right { display: none;}} .footer .footer-right .tel {font-size: 32px;} @media screen and (max-width: 768px) {.footer .footer-right .tel { font-size: 14px;}} .footer .footer-text {display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;flex-basis: 100%;} @media screen and (max-width: 768px) {.footer .footer-text { flex-direction: column; align-items: flex-start; margin-top: 0;}} .footer .footer-text .footer-logo {filter: brightness(10);margin-bottom: 30px;} .footer .footer-text .footer-logo img {max-width:250px;width: 100%;} @media screen and (max-width: 768px) {.footer .footer-text .footer-logo img { max-width: 100px;}} .footer .footer-text .list .item {display: flex;align-items: baseline;margin-bottom: 20px;} .footer .footer-text .list .item .icon {width: 20px;height: 20px;} .footer .footer-text .list .item .text {flex: 1;margin-left: 10px;color: #fff;} .footer .footer-text .footer-code {display: flex;align-items: center;justify-content: flex-end;margin-right: 0;margin-left: auto;} @media screen and (max-width: 768px) {.footer .footer-text .footer-code { margin-left: 0; margin-right: auto;}} .footer .footer-text .footer-code .item {border-radius: 50%;width: 30px;height: 30px;cursor: pointer;display: flex;justify-content: center;align-items: center;position: relative;background: #c7c7c7;margin-right: 15px;transition: all 0.5s;} @media screen and (max-width: 768px) {.footer .footer-text .footer-code .item { width: 24px; height: 24px; margin-right: 10px;}} .footer .footer-text .footer-code .item .show {position: absolute;width: 100px;bottom: 40px;left: 50%;margin-left: -50px;opacity: 0;transition: all 0.5s;transform: translateY(10px);visibility: hidden;} .footer .footer-text .footer-code .item:last-child {margin-right: 0;padding-right: 0;} .footer .footer-text .footer-code .item .fab {color: #fff;font-size: 16px;} @media screen and (max-width: 768px) {.footer .footer-text .footer-code .item .fab { font-size: 12px;}} .footer .footer-text .footer-code .item:hover {background: var(--dominant-color);} .footer .footer-text .footer-code .item:hover .show {transform: translateY(0);visibility: visible;opacity: 1;} .footer .footer-text .footer-copyright {padding: 30px 0 ;flex-basis: 100%;color: #fff;display: flex;align-items: center;justify-content: space-between;line-height: 1.8;} @media screen and (max-width: 768px) {.footer .footer-text .footer-copyright { margin-top: 0; padding-top: 0; border: none; font-size: 12px; flex-direction: column-reverse;}} @media screen and (max-width: 768px) {.footer .footer-text .footer-copyright .c-div { width: 100%; text-align: center;}} .footer .footer-text .footer-copyright .c-div a {color: #fff;transition: all 0.5s;} .footer .footer-text .footer-copyright .c-div a:hover {color: var(--dominant-color);text-decoration: underline;} .footer .footer-messages {flex-basis: 50%;} @media screen and (max-width: 768px) {.footer .footer-messages { width: 100%; margin-bottom: 30px; margin-top: 30px;}} .footer .footer-messages label {display: block;background: #414041;position: relative;} .footer .footer-messages label input {height: 50px;width: 100%;background: #414041;border: none;color: #fff;} .footer .footer-messages label button {position: absolute;right: 0;top: 0;height: 50px;width: 120px;background: #009de1;color: #fff;} .footer .footer-bottom {color: #fff;padding-bottom: 30px;display: flex;align-items: center;justify-content: space-between;} @media screen and (max-width: 768px) {.footer .footer-bottom { flex-direction: column; align-items: flex-start;}} .footer .footer-bottom .link {display: flex;align-items: center;grid-gap: 20px;} @media screen and (max-width: 768px) {.footer .footer-bottom .link { margin-bottom: 20px;}} .footer .footer-bottom .link .item {border-radius: 50%;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;transition: all 0.5s;} .footer .footer-bottom .link .item i {font-size: 18px;color: #fff;} .footer .footer-bottom .link .item .show {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);width: 120px;display: none;} .footer .footer-bottom .link .item:hover {background: var(--dominant-color);} .footer .footer-bottom .link .item:hover .show {display: block;} .go-top {width: 60px;height: 60px;position: fixed;bottom: 30px;right: 50px;background: #fff !important;z-index: 1;color: #333;font-size: 20px;border-radius: 50%;display: none;justify-content: center;align-items: center;transform: rotate(180deg);box-shadow: 0 10px 50px rgba(54, 56, 79, 0.15);transition: all 0.5s;} @media screen and (max-width: 768px) {.go-top { bottom: 20px; right: 20px; width: 40px; height: 40px;}} .go-top i {transition: all 0.5s;} .go-top:hover {background: var(--dominant-color) !important;} .go-top:hover i {color: #fff;}/*底部样式*//*20241125*/.msearch{ display: none; margin-bottom: 20px; overflow: hidden; box-sizing: border-box;} .msearch form{ display: flex; width: 100%; border-radius: 25px; padding: 0px 25px; background: #EEEEEE; box-sizing: border-box; overflow: hidden;} .msearch .text{ border: none; outline: none; background: none; font-size: 15px; color: #00a6ca; width: calc(100% - 40px); height: 42px; box-sizing: border-box;} .msearch .btns{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: flex-end; box-sizing: inherit; background: none; border: none;} .msearch .btns img{ max-width: 18px;} @media screen and (max-width: 768px){ .msearch{display: flex; }} header .search i.search-click{ position: absolute; right: 0; top: 0; width: 54px; height: 100%; align-items: center; justify-content: center;} header .search{ position: relative;} header .search label{ height: 44px;} header .search .search-show{ position: relative; top: 0; right: 0; z-index: -1; width: 50px; height: auto; opacity: 0; -webkit-transition: width 0.5s ease, opacity 0.5s ease; transition: width 0.5s ease, opacity 0.5s ease; } header .search .search-show.active{ top: 0; z-index: 1; opacity: 1; width: 160px;} header .search .search-show.on{ width: 250px;} .msearch{ display: none; margin-bottom: 20px; overflow: hidden; box-sizing: border-box;} .msearch form{ display: flex; width: 100%; border-radius: 25px; padding: 0px 25px; background: #EEEEEE; box-sizing: border-box; overflow: hidden;} .msearch .text{ border: none; outline: none; background: none; font-size: 15px; color: #00a6ca; width: calc(100% - 40px); height: 42px; box-sizing: border-box;} .msearch .btns{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: flex-end; box-sizing: inherit; background: none; border: none;} .msearch .btns img{ max-width: 18px;} @media screen and (max-width: 1920px) and (min-width: 1025px){ header .search label{height: 2.3vw; } header .search i.search-click{width: calc(2.6vw + 4px); } header .search .search-show{width: 2.6vw; } header .search .search-show.active{position: static;width: 8.333333333333333vw; } header .search .search-show.on{width: 13vw; } header .search label input{font-size: 1.041666666666667vw; } header .search label button{width: 2.604166666666667vw; } header .search label button img{width: 40%; }} @media screen and (max-width: 1440px) { header .header-box .header-menu{justify-content: center; } header .language{width: auto;margin-left: 20px; }} @media screen and (max-width: 1080px){header .search label{width: 100%; }} @media screen and (max-width: 768px){.msearch{display: flex; }} /*# sourceMappingURL=header.css.map */ .footer .footer-bottom .footer-link span,.footer .footer-bottom .footer-link span a{ color: #191919;} @media screen and (min-width: 1025px) { header .header-box .logo{position: relative;z-index: 15;} header .header-box .header-menu nav .first-item .second-box{top: 56px; -webkit-box-shadow: none; box-shadow: none; padding-top: 34px; height: 154px; box-sizing: border-box;} header .header-box .header-menu nav .first-item .second-box:before{content: '';position: absolute;left: 0;top: 34px;z-index: -1;width: 100%;height: 120px;-webkit-box-shadow: 0 10px 50px rgba(54, 56, 79, 0.11); box-shadow: 0 10px 50px rgba(54, 56, 79, 0.11);}}