/* 娓??ら?璁ゆ?峰? */ * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; color: #000; } a:hover { text-decoration: none; } li { list-style: none; } img { vertical-align: middle; } body { font-family: PingFang SC, sans-serif; line-height: 1.5; } i, em { font-style: normal; } /* 灏?瑁????ㄧ被?? */ .img-fluid { display: block; max-width: 100%; height: auto; } .line1 { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } /* ??蹇?1200px */ .container { width: 1200px; margin-left: auto; margin-right: auto; } /* 澶撮?ㄧ??蹇? */ .header-wrap { width: 1800px; margin-left: auto; margin-right: auto; } /* 澶撮? */ .header { position: fixed; top: 0; left: 0; z-index: 999999; width: 100%; height: 80px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); /* 婵?娲荤被?? */ /* ?瑰?诲?虹?扮????绱㈡? */ /* ???虹???? ,???虹?瀵艰????浜у??*/ /* 娣诲??杩?娓 */ transition: 0.45s ease; } .header .header-wrap { display: flex; justify-content: space-between; align-items: center; height: 100%; } .header .header-wrap .links { display: flex; align-items: center; height: 100%; } .header .header-wrap .links .logo .active-logo { display: none; } .header .header-wrap .links ul { margin-left: 269px; display: flex; height: 100%; } .header .header-wrap .links ul li { margin-right: 62px; position: relative; z-index: 9999; height: 100%; display: flex; align-items: center; /* hover???跺???剧ず??瓒?澶х??瀛? */ /* ??????涓?????瀛?,涓??㈣?缃??li锛?涓??㈣??疯?缃??垮???茬? */ } .header .header-wrap .links ul li::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background-color: #0168b7; transition: all 0.45s ease; cursor: pointer; } .header .header-wrap .links ul li:last-child { margin-right: 0; } .header .header-wrap .links ul li:hover { /* 浜у??澶х????瀛? */ /* ??????涓????剧ず */ } .header .header-wrap .links ul li:hover .header-section { display: block; } .header .header-wrap .links ul li:hover .hover-menu { display: block; } .header .header-wrap .links ul li:hover::before { width: 100%; left: 0; } .header .header-wrap .links ul li:hover > a { color: #127cbb !important; } .header .header-wrap .links ul li.current::before { width: 100%; left: 0; } .header .header-wrap .links ul li.current > a { color: #127cbb !important; } .header .header-wrap .links ul li > a { color: #fff; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .header .header-wrap .links ul li .header-section { position: fixed; left: 0; top: 80px; width: 100vw; z-index: 9999; background-color: rgba(255, 255, 255, 0.9); /* 榛?璁ゅ?????? */ display: none; } .header .header-wrap .links ul li .header-section .header-section-wrap { width: 100%; margin-left: auto; margin-right: auto; /* background-color: #fff; */ display: flex; } .header .header-wrap .links ul li .header-section .header-section-wrap .left { width: 26%; padding-left: 14%; padding-top: 46px; background-color: rgba(255, 255, 255, 0.4); padding-bottom: 5%; } .header .header-wrap .links ul li .header-section .header-section-wrap .left p { /* span???剧疆?剧???? */ width: fit-content; } .header .header-wrap .links ul li .header-section .header-section-wrap .left p span { padding-left: 14px; opacity: 0; } .header .header-wrap .links ul li .header-section .header-section-wrap .left p a { color: #323232; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; line-height: 3; } .header .header-wrap .links ul li .header-section .header-section-wrap .left p.current a { color: #0168b7; } .header .header-wrap .links ul li .header-section .header-section-wrap .left p.current span { opacity: 1; } .header .header-wrap .links ul li .header-section .header-section-wrap .right { width: 74%; background-color: #ffffff; padding-left: 86px; padding-top: 30px; /* 瓒??烘?剧ず婊??ㄦ? */ max-height: 700px; overflow-y: auto; /* ??棰? */ } .header .header-wrap .links ul li .header-section .header-section-wrap .right .title { color: #323232; font-family: PingFang SC; font-size: 24px; font-style: normal; font-weight: 400; line-height: 2; padding-bottom: 16px; border-bottom: 1px solid #e3e8ee; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content { padding-top: 17px; padding-bottom: 16px; padding-right: 145px; display: none; /* ??瀹归?ㄥ?? */ } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content .content-list { display: flex; flex-wrap: wrap; margin-top: 22px; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content .content-list .content-item { width: 24%; margin-right: 1.2%; display: flex; align-items: center; margin-bottom: 22px; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content .content-list .content-item img { width: 36px; height: 36px; object-fit: contain; object-position: center; margin-right: 10px; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content .content-list .content-item span { color: #323232; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; max-width: 100% !important; width: auto !important; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content .content-list .content-item .is-hot { padding-left: 7px; padding-right: 6px; height: 17px; background: #e7f4e4; color: #5ab34a; font-size: 10px; font-style: normal; font-weight: 400; text-transform: uppercase; line-height: 17px; text-align: center; margin-left: 4px; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content .content-list .content-item:nth-of-type(4n) { margin-right: 0; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content .content-list .content-item:hover span { color: #0168b7; } .header .header-wrap .links ul li .header-section .header-section-wrap .right .content.current { display: block; } .header .header-wrap .links ul li .hover-menu { position: absolute; /* left: 0; */ left: 50%; top: 100%; transform: translateX(-50%); background-color: #fff; /* box-shadow: 1px 3px 3px 0 #eee; */ display: none; } /* 淇?? */ .header .header-wrap .links ul li .hover-menu p { padding-left: 15px; padding-right: 15px; /* width: 190px; */ width: 150px; height: auto; text-align: center; } .header .header-wrap .links ul li .hover-menu p a { font-size: 16px; color: #000; line-height: 48px; } .header .header-wrap .links ul li .hover-menu p:hover { background-color: #0168b7; } .header .header-wrap .links ul li .hover-menu p:hover a { color: #fff; } .header .header-wrap .search { width: 82px; height: 26px; border-radius: 32px; background: rgba(255, 255, 255, 0.5); display: flex; align-items: center; padding-left: 15px; user-select: none; cursor: pointer; transition: 0.5s ease; } .header .header-wrap .search:hover { background: rgba(255, 255, 255, 0.2); } .header .header-wrap .search .icon { display: flex; align-items: center; } .header .header-wrap .search .icon .active-search { display: none; } .header .header-wrap .search span { color: #fff; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; padding-left: 6px; white-space: nowrap; } /* 淇?? */ .header.active { background: rgb(255, 255, 255); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05); } .header.active .header-wrap .links .active-logo { display: block; } .header.active .header-wrap .links .default-logo { display: none; } .header.active .header-wrap .links ul li a { color: #242424; } .header.active .header-wrap .search { background-color: rgba(0, 0, 0, 0.5); } .header.active .header-wrap .search .icon .default-search { display: none; } .header.active .header-wrap .search .icon .active-search { display: block; } .header .search-box { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); display: none; } .header .search-box .form-box { position: absolute; right: 10px; top: 80px; padding: 15px; background-color: #fff; } .header .search-box .form-box form { display: flex; } .header .search-box .form-box form > * { display: block; height: 40px; border-collapse: collapse; } .header .search-box .form-box form select { width: 100px; border-right: 0px; padding-left: 2%; } .header .search-box .form-box form input { width: 250px; padding-left: 12px; } .header .search-box .form-box form button { width: 40px; border: none; background-color: #ccc; } .header .pro-btn, .header .menu-btn, .header .phone-menu, .header .phone-pro { display: none; } /* 搴??ㄥ??瀹 */ .footer { padding-top: 56px; } .footer .footer-wrap { width: 1490px; margin-left: auto; margin-right: auto; } .footer .footer-top { display: flex; justify-content: space-between; padding-bottom: 94px; } .footer .footer-top .left { display: flex; } /* 淇?? */ .footer .footer-top .left .info-left { max-width: 32%; } .footer .footer-top .left .info-left .company-name { color: #fff; font-size: 20px; font-style: normal; font-weight: 700; line-height: 1.6; margin-top: 15px; margin-bottom: 8px; } .footer .footer-top .left .info-left .info-list p { color: #ababab; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; line-height: 2; } .footer .footer-top .left .info-left .info-list p a { color: #ababab; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; line-height: 2; } .footer .footer-top .left .info-right { display: flex; /* margin-left: 125px; */ margin-left: 90px; } .footer .footer-top .left .info-right ul { margin-right: 63px; } .footer .footer-top .left .info-right ul:last-child { margin-right: 0; } .footer .footer-top .left .info-right ul li h5 { color: #fff; font-family: PingFang SC; font-size: 18px; font-style: normal; font-weight: 700; line-height: 1.7; /* 涓??㈣? */ white-space: nowrap; } .footer .footer-top .left .info-right ul li a { color: #ababab; font-family: PingFang SC; font-size: 14px; font-style: normal; font-weight: 400; line-height: 2.28; } .footer .footer-top .left .info-right ul li:hover a { color: #0168b7; } .footer .footer-top .right .right-list { display: flex; } .footer .footer-top .right .right-list .right-item { border-right: 1px solid #3a3a3a; padding-left: 27px; padding-right: 26px; display: flex; flex-direction: column; align-items: center; } .footer .footer-top .right .right-list .right-item:last-child { border-right: 0px; padding-right: 0; } .footer .footer-top .right .right-list .right-item .qrcode-img { padding-top: 13px; border-top: 1px solid #3a3a3a; width: 78px; height: 78px; margin-bottom: 15px; } .footer .footer-top .right .right-list .right-item .qrcode-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .footer .footer-top .right .right-list .right-item .icon-img { height: 33px; margin-bottom: 10px; text-align: center; } .footer .footer-top .right .right-list .right-item .p1 { padding-bottom: 13px; } .footer .footer-top .right .right-list .right-item:nth-of-type(1) { padding-left: 0; } .footer .footer-top .right .right-list .right-item p { color: #fff; font-family: PingFang SC; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.35; white-space: nowrap; text-align: center; } .footer .footer-bottom { border-top: 1px solid #282e30; padding-top: 32px; padding-bottom: 44px; } .footer .footer-bottom .footer-wrap { display: flex; justify-content: space-between; } .footer .footer-bottom .footer-wrap a, .footer .footer-bottom .footer-wrap span { color: #ababab; font-family: PingFang SC; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .footer .footer-bottom .footer-wrap span { margin-right: 6px; } /* 渚ц竟??? */ .aside { position: fixed; top: 20%; right: 0; z-index: 99; } .aside .aside-item { width: 52px; height: 44px; border-radius: 4px 0px 0px 4px; margin-bottom: 8px; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } .aside .aside-item .hover-box { display: none; width: 100%; height: 100%; background: #bb0007; color: #fff; font-family: PingFang SC; font-size: 14px; font-style: normal; font-weight: 700; line-height: 1.15; padding: 6px 12px; text-align: center; } .aside .aside-item .hover-aside { position: absolute; right: 100%; top: 0; z-index: 9; width: 138px; height: 199px; background-repeat: no-repeat; background-size: 100% 100%; padding-left: 13px; padding-right: 18px; text-align: center; padding-top: 19px; padding-bottom: 26px; display: none; } .aside .aside-item .hover-aside .qq { width: 87px; height: 87px; background: #d9d9d9; margin-bottom: 7px; margin-left: auto; margin-right: auto; } .aside .aside-item .hover-aside .qq img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .aside .aside-item .hover-aside .p1 { color: #2d2d2d; font-family: PingFang SC; font-size: 14px; font-style: normal; font-weight: 700; line-height: 1.15; } .aside .aside-item .hover-aside .p2 { color: #7c7c7c; font-family: PingFang SC; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.3; white-space: nowrap; } .aside .aside-item .hover-aside a { display: block; margin-top: 6px; } .aside .aside-item:hover .hover-box, .aside .aside-item:hover .hover-aside { display: block; } .aside .aside-item:hover .default-box { display: none; } /* ???伴《?ㄥ???ㄨ?杞??? */ .aside-fun { position: fixed; bottom: 12%; right: 10px; z-index: 99; } .aside-fun .go-top { text-align: right; cursor: pointer; } .aside-fun .xunpan { margin-top: 22px; width: 129px; height: 42px; background: #bb0007; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; } .aside-fun .xunpan span { color: #fff; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; margin-left: 6px; } .aside-fun .xunpan-form { display: none; width: 291px; padding-bottom: 41px; /* border: 2px solid #e1e1e1; */ background: #fff; } .aside-fun .xunpan-form .top { width: 100%; height: 44px; background: #bb0007; padding-left: 25px; padding-right: 22px; display: flex; justify-content: space-between; align-items: center; } .aside-fun .xunpan-form .top span { color: #fff; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 700; line-height: 1; } .aside-fun .xunpan-form .main { padding-left: 21px; padding-right: 20px; } .aside-fun .xunpan-form .main .title { color: #888; font-family: PingFang SC; font-size: 13px; font-style: normal; font-weight: 400; line-height: 1.24; margin-top: 18px; margin-bottom: 18px; } .aside-fun .xunpan-form .main .row { margin-bottom: 10px; } .aside-fun .xunpan-form .main .row input { width: 100%; height: 42px; border: 1px solid #dadada; background: #fff; padding-left: 12px; } .aside-fun .xunpan-form .main .row input::placeholder { color: #525252; font-family: PingFang SC; font-size: 13px; font-style: normal; font-weight: 400; line-height: 1.23; } .aside-fun .xunpan-form .main .row textarea { width: 100%; height: 130px; border: 1px solid #dadada; background: #fff; resize: none; padding-top: 13px; padding-left: 12px; } .aside-fun .xunpan-form .main .row textarea::placeholder { color: #525252; font-family: PingFang SC; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.33; } .aside-fun .xunpan-form .main .row button { width: 116px; height: 42px; background: #bb0007; border: none; outline: none; color: #fff; font-family: PingFang SC; font-size: 13px; font-style: normal; font-weight: 400; text-align: center; line-height: 42px; } .aside-fun .xunpan-form .main .row:last-child { margin-bottom: 0; } .aside-fun .xunpan-form .main .row-custom { display: flex; align-items: center; margin-top: 18px; margin-bottom: 18px; } .aside-fun .xunpan-form .main .row-custom input { width: auto; background-color: #d9d9d9; border: 1px solid #a7a7a7; margin-right: 6px; } .aside-fun .xunpan-form .main .row-custom label { display: flex; align-items: center; margin-right: 15px; } /* 璋??村??搴?寮? */ /* ????500 */ @media (max-width: 1850px) { .header-wrap { width: 90%; } .header .header-wrap .links ul { margin-left: 70px; } .header .header-wrap .links ul li { margin-right: 40px; } .header .header-wrap .links ul li .header-section .header-section-wrap .left { padding-left: 6%; } .header .header-wrap .links ul li .header-section .header-section-wrap .right { padding-left: 15px; } .footer .footer-wrap { width: 90%; } } /* ????300px */ @media (max-width: 1500px) { .header .header-wrap .links ul { margin-left: 45px; } .header .header-wrap .links ul li { margin-right: 17px; } .footer .footer-top .left .info-right ul { margin-right: 35px; } .footer .footer-top .left .info-right { margin-left: 45px; } } /* ????92 */ @media (max-width: 1300px) { .header .header-wrap .links ul { margin-left: 25px; } .header .header-wrap .links ul li { /* margin-right: 5px; */ margin-right: 20px; } .footer .footer-wrap { flex-wrap: wrap; } .footer .footer-wrap > .left, .footer .footer-wrap .right { width: 100%; } .footer .footer-wrap > .left { justify-content: center; } .footer .footer-wrap > .right .right-list { justify-content: center; margin-top: 65px; } .footer-bottom .footer-wrap .left, .footer-bottom .footer-wrap .right { width: auto; } } @media (max-width: 1250px) { /* ???ㄧ被?? */ .container { width: 90%; margin-left: auto; margin-right: auto; } } /* ????68 */ @media (max-width: 992px) { .header .header-wrap .links ul { display: none; } /* pc绔?????绱 */ .header .header-wrap .search { display: none; } /* ??? */ .header .pro-btn, .header .menu-btn { display: block; width: 35px; height: 35px; } .header .pro-btn img, .header .menu-btn img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ?剧ず???鸿??????浜у?? */ .phone-menu, .phone-pro { display: flex !important; align-items: flex-start; } /* ???轰?绾ц???? */ .phone-menu { position: fixed; left: 100%; top: 80px; width: 100%; height: 100%; } .phone-menu ul { width: 70%; height: 100%; /* 瓒??烘?剧ず婊??ㄦ? */ overflow-y: auto; background-color: #fff; } .phone-menu ul li { width: 100%; border-bottom: 1px solid #efefee; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 25px; border-bottom: 1px solid #ddd; background-color: #fff; } .phone-menu ul li .top { display: flex; justify-content: space-between; align-items: center; min-height: 40px; } .phone-menu ul li .top a { color: #232323; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .phone-menu ul li .top span { user-select: none; font-size: 18px; color: #999; font-weight: 700; transition: 0.45s; } .phone-menu ul li .top.active span { transform: rotate(90deg); color: #0168b7; } .phone-menu ul li .menu { display: none; } .phone-menu ul li .menu p { width: 100%; line-height: 40px; background-color: #f5f5f5; padding-left: 15px; } .phone-menu ul li .menu p a { color: #000; font-size: 14px; } .phone-menu .mask { width: 30%; height: 100%; background-color: rgba(0, 0, 0, 0.45); } /* 浜?绾ц??????绱㈡??? */ .phone-menu ul li.custom-search form { display: flex; align-items: stretch; justify-content: center; margin: 15px 0px; } .phone-menu ul li.custom-search form { width: 100%; } .phone-menu ul li.custom-search form select { width: 100px; } .phone-menu ul li.custom-search form input { font-size: 14px; padding-left: 12px; width: 65%; margin-left: -1px; /* border: 1px solid #bb0007; */ } .phone-menu ul li.custom-search form input:focus, .phone-menu ul li.custom-search form select :focus { outline-color: #bb0007; } .phone-menu ul li.custom-search form button { width: 40px; height: 40px; flex-shrink: 0; border: none; background-color: #ccc; cursor: pointer; } .phone-menu ul li.custom-search form button img { object-fit: contain; } /* 浜у????琛 */ .phone-pro { position: fixed; left: -100%; top: 80px; width: 100%; height: 100%; } .phone-pro .mask { width: 30%; height: 100%; background-color: rgba(0, 0, 0, 0.45); } .phone-pro ul { background-color: #fff; width: 70%; height: 100%; /* 璁剧疆瓒??烘??ㄦ? */ overflow-y: auto; } .phone-pro ul li { min-height: 40px; border-bottom: 1px solid #efefee; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 25px; border-bottom: 1px solid #ddd; background-color: #fff; } .phone-pro ul li a { color: #232323; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } /* 搴??ㄨ?? */ .footer .footer-wrap > .left { width: 100%; } .footer .footer-wrap > .left .info-right { margin-left: 0; width: 100%; /* justify-content: space-around; */ justify-content: flex-start; } } @media (max-width: 768px) { .container { width: 92%; } .header { height: 65px; } .header .logo { height: 100%; display: flex; align-items: center; justify-content: flex-start; } /* 淇?? */ .header .logo img { /* height: 45px; */ height: 35px; object-fit: contain; object-position: center; } .phone-menu, .phone-pro { top: 65px; } .phone-menu ul li { padding-top: 0; padding-bottom: 0; } .aside { display: none; } .footer { padding-top: 45px; } .footer .footer-top { padding-bottom: 45px; } .footer .footer-top .right .right-list .right-item { border: none; } .footer .footer-bottom { padding-top: 20px; padding-bottom: 20px; } .footer-bottom .footer-wrap .right { display: none; } .footer-bottom .footer-wrap .left span { display: block; margin-bottom: 15px; } .footer .footer-wrap > .right .right-list { margin-top: 45px; } .footer .footer-top .right .right-list { flex-wrap: wrap; justify-content: space-around; } .footer .footer-top .right .right-list .right-item { padding-left: 0; padding-right: 7px; } /* ?板?宸︿晶淇℃? */ .footer .footer-wrap > .left { width: 100%; flex-wrap: wrap; justify-content: flex-start; } .footer .footer-wrap > .left .info-left { order: 2; margin-top: 35px; /* 淇?? */ max-width: none; } .footer .footer-wrap > .left .info-left img { width: 120px; object-fit: contain; } .footer .footer-top .left .info-left .company-name { font-size: 18px; } /* 淇?? */ .header .pro-btn, .header .menu-btn { width: 25px; height: 25px; } } /* 绉诲?ㄧ????? */ @media (max-width: 576px) { .footer .footer-wrap > .left .info-right { flex-wrap: wrap; } .footer .footer-wrap > .left .info-right ul { margin-right: 0; width: 50%; } .footer .footer-wrap > .left .info-right ul:nth-of-type(n + 3) { margin-top: 35px; } .footer .footer-top .right .right-list { justify-content: space-between; } .aside-fun { bottom: 5%; } .aside-fun .xunpan { width: auto; } .aside-fun .xunpan span { display: none; } .aside-fun .xunpan img { object-fit: contain; object-position: center; } .aside-fun .xunpan-form { padding-bottom: 15px; } .aside-fun .xunpan-form .main .title { margin-top: 7px; margin-bottom: 7px; } }