:root { --width: 1400px; --max-width: auto; --height:100px; } [x-cloak] { display: none !important; } .layer-wrapper { min-width: var(--width); max-width: var(--max-width); width: 100%; margin-left: auto; margin-right: auto; } .layer-content { width: var(--width); margin-left: auto; margin-right: auto; } .header-wrapper { z-index: 999; max-width: var(--max-width); margin-left: auto; margin-right: auto; position: -webkit-sticky; position: sticky; top: 0; } .top-tip { background-color: #e60012; height: 40px; } .top-tip .top-tip_content { color: #fff; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .top-tip .top-tip_content p { color: #fff; font-size: 14px; } .top-tip .wx-card { margin-left: 10px; position: relative; } .top-tip .wx-card .iconfont { cursor: pointer; font-size: 16px; } .top-tip .wx-card .wa-down { z-index: 100; -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; margin: auto; padding: 5px; display: none; position: absolute; top: 100%; left: 50%; -webkit-transform: translatex(-50%); -moz-transform: translatex(-50%); -ms-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); } .top-tip .wx-card .wa-down .triangle { border: 8px solid rgba(0, 0, 0, 0); border-top-width: 0; border-bottom: 10px solid #fff; width: 0; height: 0; } .top-tip .wx-card .wa-down .wx-down-content { background-color: #fff; width: 120px; transform: translatex(-34px); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); } .top-tip .wx-card .wa-down .wx-down-content > img { width: 100%; } .top-tip .logo { z-index: 99; width: 192px; height: 202px; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; } .top-tip .logo > img { width: 100%; height: 100%; } .top-tip .wx-card:hover .wa-down { display: -webkit-flex; display: -ms-flexbox; display: flex; } .header-nav-container { --height: 100px; height: var(--height); position: relative; } .home-nav { height: var(--height); background-color: #fff; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; display: -webkit-flex; display: -ms-flexbox; display: flex; } .home-nav .left-nav .nav-item { margin-right: 50px; } .home-nav .right-nav .nav-item { margin-left: 50px; } .navs { height: var(--height); display: -webkit-flex; display: -ms-flexbox; display: flex; } .navs .nav-item { height: var(--height); position: relative; } .navs .nav-item .title { height: var(--height); line-height: var(--height); color: #000; font-size: 18px; font-weight: 500; } .navs .nav-item:hover .title{ color: #e60012; } .navs .nav-item:hover { border-bottom: 2px solid #e60012; } .navs .nav-item.active { border-bottom: 2px solid #e60012; } .navs .nav-item.active .title{ color: #e60012; } .navs .nav-item:hover .nav-drop-down { display: block; } .navs .nav-drop-down { background-color: #fff; display: none; position: absolute; top: 100% 2px; left: 50%; -webkit-transform: translatex(-50%); -moz-transform: translatex(-50%); -ms-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); } .navs .nav-drop-down .nav-drop-down_link { white-space: nowrap; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 200px; padding: 10px 15px; font-size: 16px; display: block; overflow: hidden; } .navs .nav-drop-down .nav-drop-down_link:hover { background-color: #f0f0f0; } .resident-navs { height: var(--height); -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; right: 0; } .resident-navs .resident-logo { -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .resident-navs .resident-logo > a { width: 160px; height: 71px; display: block; } .resident-navs .resident-logo > a > img { object-fit: contain; width: 100%; height: 100%; } .resident-navs .navs { margin-left: auto; } .resident-navs .navs .nav-item { margin-left: 55px; } .resident-navs .search-button { width: 20px; height: 20px; margin-left: 50px; } .resident-navs .search-button .iconfont { color: #444; font-size: 20px; font-weight: 600; } .home-swiper { min-width: var(--max-width); width: 100%; height: 800px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; } @media screen and (max-width: 1400px) { .home-swiper { width: var(--width); } } .home-swiper img { object-fit: cover; width: 100%; height: 100%; } .home-swiper .home-swiper-pagination { z-index: 20; --swiper-pagination-color: #fff; --swiper-pagination-bullet-width: 50px; --swiper-pagination-bullet-height: 5px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; bottom: 30px; } .home-swiper .home-swiper-pagination .swiper-pagination-bullet { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .footer-content { --top-height: 120px; --top-border-color: #393939; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; display: -webkit-flex; display: -ms-flexbox; display: flex; } .footer-content .left-footer { -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; } .footer-content .footer-logo { height: var(--top-height); border-bottom: 1px solid var(--top-border-color); -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .footer-content .footer-logo > a { width: 139px; height: 62px; } .footer-content .footer-logo > a > img { width: 100%; height: 100%; } .footer-content .contact-number { -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; padding-top: 50px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .footer-content .contact-number .icon { width: 26px; height: 26px; margin-right: 10px; } .footer-content .contact-number .icon > img { width: 100%; height: 100%; } .footer-content .contact-number .text { color: #fff; font-size: 24px; font-weight: 700; } .footer-content .footer-contact-info { color: #999; margin-top: 30px; font-size: 14px; font-weight: 400; line-height: 30px; } .footer-content .qr-code-img { width: 100px; height: 100px; } .footer-content .right-footer { margin-right: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; } .footer-content .right-footer .footer-nav-item { --nav-item-gap: 70px; --nav-item-max-width: 200px; } .footer-content .right-footer .footer-nav-head { height: var(--top-height); max-width: var(--nav-item-max-width); border-bottom: 1px solid var(--top-border-color); padding-left: var(--nav-item-gap); -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .footer-content .right-footer .footer-nav-head .title { color: #fff; font-size: 18px; font-weight: 400; } .footer-content .right-footer .footer-nav-body { padding-top: 50px; padding-bottom: 50px; padding-left: var(--nav-item-gap); max-width: var(--nav-item-max-width); line-height: 32px; } .footer-content .right-footer .footer-nav-body .link { color: #999; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; display: block; overflow: hidden; } .footer-content .right-footer .footer-nav-body .link:hover { color: #888; } .home-consultation .consultation-head { z-index: 5; background: center / 100% 100% no-repeat; height: 360px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .home-consultation .consultation-logo { -ms-flex-item-align: start; -webkit-align-self: flex-start; -o-align-self: flex-start; align-self: flex-start; width: 140px; } .home-consultation .consultation-logo > img { width: 100%; } .home-consultation .consultation-head_title { color: #ebf1f7; text-shadow: 0 3px 4px rgba(0, 0, 0, .34); -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; margin-left: 70px; margin-right: 150px; font-weight: bold; } .home-consultation .consultation-head_title > h3 { font-size: 60px; } .home-consultation .consultation-head_title > p { margin-top: 30px; font-size: 28px; line-height: 1.5; } .home-consultation .consultation-more { color: #fff; background: -webkit-linear-gradient(90deg, #e60101, #ff542e); background: -moz-linear-gradient(90deg, #e60101, #ff542e); background: -o-linear-gradient(90deg, #e60101, #ff542e); background: linear-gradient(90deg, #e60101, #ff542e); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 240px; height: 60px; font-size: 20px; font-weight: bold; display: -webkit-flex; display: -ms-flexbox; display: flex; } .home-consultation .consultation-more .iconfont { margin-right: 10px; font-size: 22px; } .home-consultation .consultation-body { height: 700px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } @media screen and (max-width: 1400px) { .home-consultation .consultation-body { width: var(--width); } } .home-consultation .consultation-right-body { width: 50%; margin-left: auto; position: relative; overflow: hidden; } .home-consultation .consultation-right-body img { object-fit: cover; width: 100%; height: 100%; } .home-consultation .consultation-body-control { --height: calc(700px 40px); --linear-gradient-bg: no-repeat center / 100% 100%; height: var(--height); background: var(--linear-gradient-bg); z-index: 20; width: calc(50% 160px); padding-right: 160px; position: absolute; bottom: 0; left: 0; } .home-consultation .consultation-body-control .consultation-body-control_box { width: calc(var(--width) / 2); height: 100%; margin-left: auto; padding-top: 60px; position: relative; } .home-consultation .consultation-body-control .consult-types { border-bottom: 1px solid rgba(255, 255, 255, .2); height: 100px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .home-consultation .consultation-body-control .consult-types .type-item { cursor: pointer; height: 100px; margin-right: 70px; } .home-consultation .consultation-body-control .consult-types .active { border-bottom: 4px solid #fff; } .home-consultation .consultation-body-control .consult-types .icon { -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 24px; height: 24px; margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; } .home-consultation .consultation-body-control .consult-types .icon > img { max-width: 100%; } .home-consultation .consultation-body-control .consult-types .title { color: #fff; margin-top: 16px; font-size: 18px; font-weight: 400; display: block; } .home-consultation .consultation-body-control .consultation-info-swiper { width: 100%; height: 250px; margin: 70px auto; position: relative; overflow: hidden; } .home-consultation .consultation-body-control .consultation-info-swiper .consultation-info_title { color: #fff; font-size: 34px; font-weight: bold; line-height: 48px; } .home-consultation .consultation-body-control .consultation-info-swiper .consultation-info_desc { color: #fff; -webkit-line-clamp: 4; -webkit-box-orient: vertical; margin-top: 30px; font-size: 16px; font-weight: 400; line-height: 32px; display: -webkit-box; overflow: hidden; } .home-consultation .consultation-body-control .consultation-info-swiper_control { -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; height: 48px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .home-consultation .consultation-body-control .consultation-info-swiper_control .btn { color: #fff; background: rgba(230, 0, 18, 0); border: 2px solid #e5e5e5; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 48px; height: 48px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .home-consultation .consultation-body-control .consultation-info-swiper_control .swiper-button-disabled { opacity: .6; } .home-consultation .consultation-body-control .consultation-info-swiper_control .consultation-info-swiper_pagination { --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-inactive-color: #fff; --swiper-pagination-color: #fff; width: auto; margin: 0 30px; } .mod-head { -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .mod-head > h3 { font-size: 40px; font-weight: bold; } .mod-head > span { margin-top: 20px; font-size: 14px; font-weight: 400; } .solution-content { padding-top: 70px; padding-bottom: 100px; } .solution-content .blinds-container { --item-width: 174px; --item-gap: 1px; background-color: #999; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; height: 460px; margin-top: 40px; margin-bottom: 50px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .solution-content .blinds-container .blinds-item { width: var(--item-width); margin-right: var(--item-gap); cursor: pointer; background-color: #ff542e; -webkit-transition: width .2s; -moz-transition: width .2s; -ms-transition: width .2s; -o-transition: width .2s; transition: width .2s; position: relative; } .solution-content .blinds-container .blinds-item:last-child { margin-right: 0; } .solution-content .blinds-container .blinds-item > img { object-fit: cover; height: 100%; } .solution-content .blinds-container .mask { color: #fff; background-color: rgba(0, 0, 0, .5); -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 100%; height: 100%; padding: 0 40px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 0; } .solution-content .blinds-container .mask .icon { -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 45px; height: 45px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .solution-content .blinds-container .mask .icon img { max-width: 100%; max-height: 100%; } .solution-content .blinds-container .mask .label { color: #fff; text-align: center; margin-top: 25px; font-size: 18px; font-weight: 400; line-height: 26px; } .solution-content .blinds-container .annot { color: #fff; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; background: #e60012; -webkit-border-radius: 0 20px 0 0; -moz-border-radius: 0 20px 0 0; -ms-border-radius: 0 20px 0 0; -o-border-radius: 0 20px 0 0; border-radius: 0 20px 0 0; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 210px; height: 56px; font-size: 18px; font-weight: 400; display: none; position: absolute; bottom: 0; left: 0; overflow: hidden; } .solution-content .blinds-container .active { width: calc(100% - var(--item-width) * 6 - var(--item-gap) * 6); } .solution-content .blinds-container .active .mask { display: none; } .solution-content .blinds-container .active .annot { display: -webkit-flex; display: -ms-flexbox; display: flex; } .solution-content .blinds-more { color: #fff; background: -webkit-linear-gradient(90deg, #e60000, #ff552e); background: -moz-linear-gradient(90deg, #e60000, #ff552e); background: -o-linear-gradient(90deg, #e60000, #ff552e); background: linear-gradient(90deg, #e60000, #ff552e); -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 170px; height: 50px; margin: 0 auto; font-size: 16px; font-weight: 400; display: -webkit-flex; display: -ms-flexbox; display: flex; } .solution-content .blinds-more .iconfont { margin-right: 10px; font-size: 18px; } .about-content { padding-top: 90px; padding-bottom: 100px; } .about-content .about-info { -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .about-content .about-desc { --color: #e60012; width: 630px; } .about-content .about-desc h3 { color: #e60012; text-transform: uppercase; font-size: 40px; font-weight: bold; } .about-content .about-desc h4 { color: #222; margin-top: 20px; font-size: 30px; font-weight: bold; } .about-content .about-desc p { color: #444; -webkit-line-clamp: 6; -webkit-box-orient: vertical; margin-top: 38px; margin-bottom: 60px; font-size: 16px; font-weight: 400; line-height: 32px; display: -webkit-box; overflow: hidden; } .about-content .about-swiper { -webkit-border-radius: 50px 0; -moz-border-radius: 50px 0; -ms-border-radius: 50px 0; -o-border-radius: 50px 0; border-radius: 50px 0; width: 630px; height: 430px; position: relative; overflow: hidden; -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .06); -moz-box-shadow: 0 0 12px rgba(0, 0, 0, .06); -ms-box-shadow: 0 0 12px rgba(0, 0, 0, .06); -o-box-shadow: 0 0 12px rgba(0, 0, 0, .06); box-shadow: 0 0 12px rgba(0, 0, 0, .06); } .about-content .about-swiper .swiper-slide { background-color: #fff; padding: 15px; } .about-content .about-swiper img { object-fit: cover; -webkit-border-radius: 50px 0; -moz-border-radius: 50px 0; -ms-border-radius: 50px 0; -o-border-radius: 50px 0; border-radius: 50px 0; width: 100%; height: 100%; } .about-content .about-swiper .swiper-about-buttons { z-index: 15; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; bottom: 30px; left: 30px; } .about-content .about-swiper .swiper-about-buttons button { width: 86px; height: 40px; } .about-content .about-swiper .swiper-about-buttons button .iconfont { font-size: 20px; } .about-content .about-swiper .swiper-about-buttons .prev { color: #e60012; background: #fff; } .about-content .about-swiper .swiper-about-buttons .next { color: #fff; background-color: #e60012; } .about-content .statistics { -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; margin-top: 90px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .about-content .statistics .data { -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .about-content .statistics .value-x { color: #e60012; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; margin-bottom: 20px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .about-content .statistics .value-x .value { vertical-align: middle; font-size: 60px; font-weight: 600; line-height: 1; } .about-content .statistics .value-x .uint { -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; height: 100%; font-size: 20px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; bottom: 6px; } .about-content .statistics .value-x .icon { font-size: 40px; font-weight: 900; line-height: 1; } .about-content .statistics .label { color: #444; font-size: 16px; } .more-wire { color: var(--color); border: 1px solid; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 170px; height: 50px; font-size: 14px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .more-wire .iconfont { margin-left: 10px; } .products-wrapper { background: center / 100% 100% no-repeat; } .products-wrapper .products-content { padding-top: 80px; padding-bottom: 100px; } .products-wrapper .products-tabs_wrapper { -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; height: 434px; margin-top: 60px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .products-wrapper .products-tabs_body { height: 330px; margin-top: 18px; position: relative; } .products-wrapper .product-card { background: #fff; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 448px; height: 388px; padding: 225px 20px 0; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .products-wrapper .product-card .img { object-fit: cover; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 255px; height: 250px; margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: -46px; left: 0; right: 0; } .products-wrapper .product-card .img img { max-width: 100%; } .products-wrapper .product-card .name { color: #000; text-align: center; width: 100%; font-size: 24px; font-weight: 400; display: block; } .products-wrapper .product-card .desc { text-align: center; color: #777; width: 100%; margin-top: 20px; font-size: 14px; font-weight: 400; line-height: 1; display: block; } .products-wrapper .product-card .more { color: #777; border: 1px solid #d7d7d7; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 140px; height: 40px; margin-top: 30px; font-size: 14px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .products-wrapper .product-card .more .iconfont { margin-left: 10px; font-size: 16px; } .products-wrapper .active { background-color: #e60012; } .products-wrapper .active .name, .products-wrapper .active .desc, .products-wrapper .active .more { color: #fff; } .products-wrapper .active .more { border-color: #fff; } .products-wrapper .products-tab_content { background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; width: 100%; height: 300px; padding: 25px 25px 0; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; bottom: 0; left: 0; } .products-wrapper .products-tab_content .product-item { width: 320px; } .products-wrapper .products-tab_content .product-item .img { width: 100%; overflow: hidden; } .products-wrapper .products-tab_content .product-item .img img { object-fit: cover; width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .products-wrapper .products-tab_content .product-item:hover .img img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .products-wrapper .products-tab_content .product-item .name { color: #000; text-align: center; margin-top: 23px; font-size: 17px; font-weight: 400; display: block; } .products-wrapper .products-tab_content:after { content: ""; border: 17.5px solid rgba(0, 0, 0, 0); border-top-width: 0; border-bottom: 20px solid #fff; width: 0; height: 0; display: block; position: absolute; top: -20px; } .products-wrapper .products-tab_content:first-child:after { left: 210px; } .products-wrapper .products-tab_content:nth-child(2):after { margin: 0 auto; left: 0; right: 0; } .products-wrapper .products-tab_content:nth-child(3):after { left: 1160px; } .cooperation-content { padding-top: 80px; padding-bottom: 100px; } .cooperation-content .cooperation-card { background: #fff; border: 1px solid #dfdfdf; -webkit-border-radius: 130px; -moz-border-radius: 130px; -ms-border-radius: 130px; -o-border-radius: 130px; border-radius: 130px; -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 260px; height: 480px; padding: 50px 55px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .cooperation-content .cooperation-card .avatar { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 150px; height: 150px; margin-bottom: 30px; overflow: hidden; } .cooperation-content .cooperation-card .avatar > img { object-fit: cover; width: 100%; height: 100%; } .cooperation-content .cooperation-card .title { color: #000; text-align: center; width: 100%; font-size: 22px; font-weight: 400; display: block; } .cooperation-content .cooperation-card .icon { background: #e60012; width: 20px; height: 3px; margin-top: 22px; margin-bottom: 30px; display: block; } .cooperation-content .cooperation-card p { color: #888; font-size: 14px; font-weight: 400; line-height: 24px; } .cooperation-content .cooperation-card:hover { background: #e60012; -webkit-box-shadow: 0 0 24px rgba(230, 0, 18, .13); -moz-box-shadow: 0 0 24px rgba(230, 0, 18, .13); -ms-box-shadow: 0 0 24px rgba(230, 0, 18, .13); -o-box-shadow: 0 0 24px rgba(230, 0, 18, .13); box-shadow: 0 0 24px rgba(230, 0, 18, .13); } .cooperation-content .cooperation-card:hover .title { color: #fff; } .cooperation-content .cooperation-card:hover .icon { background-color: #fff; } .cooperation-content .cooperation-card:hover p { color: #fff; } .leave-message { background: center center no-repeat; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; height: 835px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .leave-message .leave-message-x { -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; height: 634px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .leave-message .leave-message-from { background: #fff; width: 530px; padding: 48px; } .leave-message .leave-message-from > h4 { color: #000; font-size: 30px; font-weight: bold; } .leave-message .leave-message-from > span { color: #777; margin-top: 17px; font-size: 16px; display: block; } .leave-message .leave-message-from .form-item { background: #fff; border: 1px solid #e3e3e3; width: 100%; margin-top: 20px; padding: 20px 15px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .leave-message .leave-message-from .form-item .iconfont { color: #222; font-size: 20px; } .leave-message .leave-message-from .form-item input { background-color: rgba(0, 0, 0, 0); outline: 0; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; height: 25px; margin: 0 10px; font-size: 16px; } .leave-message .leave-message-from .form-item textarea { background-color: rgba(0, 0, 0, 0); outline: 0; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; width: 100%; min-height: 150px; margin: 0 10px; font-size: 16px; } .leave-message .leave-message-from .submit { color: #fff; background: #e60012; width: 100%; height: 60px; margin-top: 30px; font-size: 18px; font-weight: bold; } .leave-message .more { color: #fff; background: #ef1f2f; -webkit-border-radius: 28px; -moz-border-radius: 28px; -ms-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 240px; height: 56px; font-size: 20px; font-weight: bold; display: -webkit-flex; display: -ms-flexbox; display: flex; } .leave-message .more .iconfont { margin-right: 10px; font-size: 24px; } .honor-wrapper { background-color: #f9f9f9; } .honor-wrapper .honor-content { --color: #e60012; padding-top: 80px; padding-bottom: 80px; position: relative; } .honor-wrapper .honor-content .more-wire { margin: 0 auto; } .honor-wrapper .honor-swiper { width: 100%; min-height: 280px; margin: 50px 0; position: relative; overflow: hidden; } .honor-wrapper .honor-swiper .img { width: 100%; height: 220px; overflow: hidden; } .honor-wrapper .honor-swiper .img img { object-fit: cover; width: 100%; height: 100%; } .honor-wrapper .honor-swiper .name { color: #000; background: #fff; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; height: 60px; font-size: 18px; font-weight: 400; display: -webkit-flex; display: -ms-flexbox; display: flex; } .honor-wrapper .honor-swiper-buttons { z-index: 15; pointer-events: none; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; width: 100%; height: 48px; margin: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } @media screen and (max-width: 1400px) { .honor-wrapper .honor-swiper-buttons { width: 100%; } } @media screen and (min-width: 1400px) { .honor-wrapper .honor-swiper-buttons { width: calc(100% 166px); -webkit-transform: translatex(-83px); -moz-transform: translatex(-83px); -ms-transform: translatex(-83px); -o-transform: translatex(-83px); transform: translatex(-83px); } } .honor-wrapper .honor-swiper-buttons button { pointer-events: all; color: #9d9d9d; background: rgba(230, 0, 18, 0); border: 2px solid #ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 48px; height: 48px; } .engine-case { background: center / 100% 100% no-repeat; } .engine-case .engine-case_content { --color: #fff; padding-top: 80px; padding-bottom: 100px; } .engine-case .case-ul { -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; margin-top: 40px; margin-bottom: 14px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .engine-case .case-ul .case-li { background-color: #fff; width: 330px; margin-bottom: 26px; margin-right: 26px; padding: 5px; } .engine-case .case-ul .case-li:nth-child(4n) { margin-right: 0; } .engine-case .case-ul .case-link { display: block; } .engine-case .case-ul .img { width: 100%; height: 220px; overflow: hidden; } .engine-case .case-ul .img img { object-fit: cover; width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .engine-case .case-ul .desc { background: #fff; -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; width: 100%; height: 120px; padding: 22px 20px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .engine-case .case-ul .desc h4 { color: #000; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; overflow: hidden; } .engine-case .case-ul .desc span { color: #777; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; margin-top: 15px; font-size: 14px; display: block; overflow: hidden; } .engine-case .case-ul .case-li:hover .img img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .partner-content { padding-top: 80px; padding-bottom: 80px; } .partner-content .partner-ul { -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; margin-top: 50px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .partner-content .partner-ul .partner-li { background: #fff; border: 1px solid #dfdfdf; width: 210px; height: 110px; margin-bottom: 23px; margin-right: 23px; } .partner-content .partner-ul .partner-li .link { -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 100%; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; } .partner-content .partner-ul .partner-li .link img { object-fit: cover; max-width: 100%; max-height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .partner-content .partner-ul .partner-li:hover .link img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .partner-content .partner-ul .partner-li:nth-child(6) { margin-right: 0; } .knowledge { padding-top: 80px; padding-bottom: 80px; } .knowledge .knowledge-more { color: #777; border: 1px solid #d7d7d7; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 120px; height: 40px; font-size: 14px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .knowledge .knowledge-more .iconfont { margin-left: 5px; font-size: 16px; } .knowledge .knowledge-body { -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; margin-top: 30px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .knowledge .knowledge-body .knowledge-card { width: 670px; display: block; } .knowledge .knowledge-body .knowledge-card .img { height: 400px; overflow: hidden; } .knowledge .knowledge-body .knowledge-card .img img { object-fit: cover; width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .knowledge .knowledge-body .knowledge-card:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .knowledge .knowledge-body .knowledge-card .desc { padding-top: 30px; } .knowledge .knowledge-body .knowledge-card .desc .title { color: #000; max-width: 80%; font-size: 20px; font-weight: bold; } .knowledge .knowledge-body .knowledge-card .desc .date { color: #888; font-size: 14px; font-weight: 400; } .knowledge .knowledge-body .knowledge-card .desc p { color: #777; margin-top: 20px; font-size: 14px; font-weight: 400; line-height: 26px; } .knowledge .knowledge-body .knowledge-list { width: 670px; } .knowledge .knowledge-body .knowledge-list .knowledge-item { width: 100%; margin-bottom: 30px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .knowledge .knowledge-body .knowledge-list .knowledge-item:last-child { margin-bottom: 0; } .knowledge .knowledge-body .knowledge-list .knowledge-item .img { width: 250px; height: 150px; overflow: hidden; } .knowledge .knowledge-body .knowledge-list .knowledge-item .img img { object-fit: cover; width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .knowledge .knowledge-body .knowledge-list .knowledge-item:hover .img img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .knowledge .knowledge-body .knowledge-list .knowledge-item .desc { -moz-box-orient: vertical; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; width: calc(100% - 270px); margin-left: auto; padding-top: 12px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .knowledge .knowledge-body .knowledge-list .knowledge-item .desc h4 { color: #000; font-size: 20px; font-weight: 400; } .knowledge .knowledge-body .knowledge-list .knowledge-item .desc p { color: #777; font-size: 14px; font-weight: 400; line-height: 26px; } .knowledge .knowledge-body .knowledge-list .knowledge-item .desc span { color: #888; font-size: 14px; font-weight: 400; } .sub-product-details { background: center / 100% 100% no-repeat; } .sub-product-details .sub-product-details_content { padding-bottom: 80px; } .sub-product-details .sub-product-content { background: #fff; height: 535px; padding: 60px 50px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .sub-product-details .pro-history { color: #fff; padding: 40px 0; font-size: 16px; font-weight: 400; } .sub-product-details .pro-history .icon-shouye1 { font-size: 18px; } .sub-product-details .pro-history .icon-arrow-right { font-size: 14px; } .sub-product-details .img { background: #e3e3e3; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 650px; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .sub-product-details .img img { max-width: 100%; max-height: 100%; } .sub-product-details .introduction { width: 610px; margin-left: auto; padding-top: 16px; padding-bottom: 20px; } .sub-product-details .introduction .name { color: #000; font-size: 34px; font-weight: bold; } .sub-product-details .introduction .desc { color: #444; background: #efefef; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; width: 100%; margin-top: 40px; padding: 30px; font-size: 18px; font-weight: 400; line-height: 32px; } .sub-product-details .introduction .data { color: #444; margin-top: 22px; font-size: 18px; font-weight: 400; line-height: 1; } .sub-product-details .introduction .call-btn { color: #fff; background: #e60012; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 211px; height: 57px; margin-right: 20px; font-size: 18px; font-weight: bold; display: -webkit-flex; display: -ms-flexbox; display: flex; } .sub-product-details .introduction .call-btn .iconfont { margin-right: 10px; } .sub-product-details .introduction .back-btn { color: #fff; background: #080808; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 180px; height: 57px; font-size: 18px; font-weight: 400; display: -webkit-flex; display: -ms-flexbox; display: flex; } .sub-product-types { background: #fff; height: 100px; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2); -ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2); -o-box-shadow: 0 0 20px rgba(0, 0, 0, .2); box-shadow: 0 0 20px rgba(0, 0, 0, .2); } .sub-product-types .product-types_center { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .sub-product-types .product-types_center .type { color: #000; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; height: 100%; font-size: 24px; font-weight: 400; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .sub-product-types .product-types_center .type:after { content: ""; background: #e3e3e3; width: 1px; height: 22px; margin: auto 0; display: block; position: absolute; top: 0; bottom: 0; right: 0; } .sub-product-types .product-types_center .type:last-child:after { display: none; } .product-intro-content { border-bottom: 1px solid #eee; padding: 60px 0; } .product-intro-content .title { color: #000; margin-bottom: 30px; font-size: 24px; font-weight: bold; } .product-intro-content p { color: #222; font-size: 18px; font-weight: 400; line-height: 34px; } .product-intro-content .product-index-table { border-top: 1px solid #e6e7e9; border-left: 1px solid #e6e7e9; } .product-intro-content .product-index-table .tr { height: 60px; display: -webkit-flex; display: -ms-flexbox; display: flex; } .product-intro-content .product-index-table .label { background: #f4f6f9; border-bottom: 1px solid #e6e7e9; border-right: 1px solid #e6e7e9; -ms-flex-negative: 0; -webkit-flex-shrink: 0; -o-flex-shrink: 0; flex-shrink: 0; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: 260px; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .product-intro-content .product-index-table .value { border-bottom: 1px solid #e6e7e9; border-right: 1px solid #e6e7e9; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; width: calc(100% - 260px); height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .product-intro-content .product-index-table .value, .product-intro-content .product-index-table .label { color: #232323; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; padding: 0 30px; font-size: 15px; font-weight: 400; overflow: hidden; } .hj-sticky{ position: sticky; top: calc(var(--height) 40px); } .product-types_center > a:active { color:#e60012 !important; }