.indexBox {
    width: 100%;
    height: 100%;
    padding-top: 130px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.p3 {
    padding: var(--padding-base);
}

.p0_3 {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
}

.lp3 {
    padding-left: var(--padding-base);
}

.rp3 {
    padding-right: var(--padding-base);
}

.p5_0 {
    padding-top: 5.2vw;
    padding-bottom: 5.2vw;
}

.p4_0 {
    padding-top: calc(3.5vw + 22px);
    padding-bottom: calc(3.5vw + 22px);
}

.p3_0 {
    padding-top: var(--padding-base);
    padding-bottom: var(--padding-base);
}

.w100 {
    width: 100%;
    overflow: hidden;
}

.imgZoom {
    overflow: hidden;
}

.imgZoom img {
    transition: .6s;
}


.imgZoom:hover img {
    scale: 1.2;
}

.fadeInParent {
    position: relative;
}

.fadeInParent .fadeInSon {
    position: absolute;
    top: calc(100% + 1em);
    transform: translateX(-50%);
    left: 50%;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: inherit;
    z-index: 10;
}

.fadeInParent.active .fadeInSon {
    visibility: visible;
    top: calc(100% + 0.5em);
    opacity: 1;
}

.fadeInParent:hover .fadeInSon_hover {
    visibility: visible;
    top: calc(100% +  0.5em);
    opacity: 1;
}

.contact_icons {
    display: flex;
    align-items: center;
    gap: 0.875em;
    color: #fff;
    flex-wrap: wrap;
}

.contact_icons .cicon {
    font-size: inherit;
    color: inherit;
    width: 2.1875em;
    height: 2.1875em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    border-radius: 50%;
    flex-shrink: 0;
}

.contact_icons .cicon .cicon_img {
    font-size: inherit;
    width: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em;
    background-color: var(--primary-color);
    top: 100%;
}

.contact_icons .cicon .cicon_img img {
    width: 100%;
    height: auto;
}

.contact_icons .cicon .cicon_img::after {
    font-size: inherit;
    position: absolute;
    bottom: calc(100% - 1px);
    transform: translateX(-50%);
    left: 50%;
    width: 1em;
    height: 0.6em;
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    content: "";
    background-color: var(--primary-color);
    display: block;
}

.contact_icons .cicon.fadeInParent.active .cicon_img.fadeInSon {
    top: calc(100% + 1em);
}

.contact_icons .cicon.fadeInParent:hover .cicon_img.fadeInSon_hover {
    top: calc(100% + 1em);
}


.icon_contact {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: #fff;
    line-height: 1;
}

.icon_contact .iconfont {
    font-size: 1.33em;
}

.icon_contact p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: "IBMPlexSans";
}


.header_lang {
    display: flex;
    align-items: center;
    padding: 0.3em 0;
    color: #fff;
    line-height: 1;
    border-radius: 1.3em;
    cursor: pointer;
    transition: .4s;
    gap: 0.5em;
}

.header_lang .icon-arr-down {
    color: inherit;
    transition: .4s;
}


.header_lang.active .icon-arr-down {
    transform: rotate(180deg);
}

.header_lang span {
    user-select: none;
}

.header_lang ul {
    min-width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 0.4em;
    font-size: inherit;
    box-shadow: 0 0.2em 0.5em #0005;
}


.header_lang ul li {
    flex: 1;
    color: #fff;
    font-size: inherit;
    width: 100%;
}

.header_lang ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.6em 1em;
    user-select: none;
    color: var(--primary-color);
}

.search_mask {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index:999999;
    top: 0;
    left: 0;
}

.search_mask div {
    width: calc(var(--font-size-lg) * 2.5);
    height: calc(var(--font-size-lg) * 2.5);
    position: absolute;
    right: 4vw;
    top: 6vw;
    border-radius: 50%;
    border: 1px solid #ffffff;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.search_mask div span {
    font-size: var(--font-size-lg);
    transition: .3s;
    line-height: 1;
    color: #ffffff;
}

.search_mask div:hover {
    border-color: #d1ad90;
}

.search_mask div:hover span {
    color: #d1ad90;
}

.view_video {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index:999999;
    top: 0;
    left: 0;
}

.view_video iframe {
    display: none;
}

.view_video video, .view_video iframe {
    position: absolute;
    width: 60%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 34vw;
    max-height: 90vh;
}

.view_video div {
    width: calc(var(--font-size-lg) * 2.5);
    height: calc(var(--font-size-lg) * 2.5);
    position: absolute;
    right: 4vw;
    top: 6vw;
    border-radius: 50%;
    border: 1px solid #ffffff88;
    color: #ffffff88;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
}

.view_video div span {
    font-size: var(--font-size-lg);
    transition: .3s;
    color: #ffffff88;
}

.view_video div:hover {
    border-color: #fff;
}

.view_video div:hover span {
    color: #fff;
}

.search_mask form {
    width: 80%;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 50px;
    padding: var(--font-size-lg) var(--font-size-2-5xl);
    box-sizing: border-box;
    position: relative;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.search_mask form input {
    width: 95%;
    font-size: var(--font-size-lg);
}

.search_mask form button {
    width: 3%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
}

.search_mask form button svg {
    width: 100%;
    min-width: 30px;
    height: auto;
}

.header {
    display: flex;
    justify-content: space-between;
    gap: var(--font-size-xl);
    padding: var(--font-size-xs) var(--padding-base);
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    overflow: visible;
}

.header_left {
    flex-shrink: 0;
}

.header_logo {
    font-size: var(--font-size-xl);
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_logo img {
    height: 3em;
    width: auto;
}

.header_right {
    display: flex;
    align-items: flex-start;
    gap: var(--font-size-sm);
}

.header_right .cn {
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    line-height: 1;
}

.header_more {
    display: none;
    font-size: var(--font-size-3xl);
    cursor: pointer;
    user-select: none;
}


.header_nav {
    font-size: min(0.8333vw, var(--font-size-base));
}


.header_nav_ {
    font-size: inherit;
    display: flex;
    color: var(--text-primary);
    height: 100%;
}

.header_nav_item {
    font-size: inherit;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_nav_item::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    content: "";
    display: block;
    background-color: var(--primary-color);
    height: 0.3em;
    transition: .3s;
}

.header_nav_item>a {
    white-space: nowrap;
    font-family: var(--font-family-bahnschrift);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 1.2em 1.6em;
}

.header_nav_item>a .iconfont {
    transition: .3s;
}

.header_nav_item:hover::after {
    width: 100%;
}

.header_nav_item:hover>a {
    color: var(--primary-color);
}

.header_nav_item:hover>a .iconfont {
    transform: rotate(180deg);
}

.header_nav_item.active>a {
    color: var(--primary-color);
}

.header_nav2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: var(--font-size-base);
    height: 0;
    overflow: hidden;
    transition: .3s;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--back-color-three);
    max-width: 18em;
}


.header_nav2_item {
    font-size: inherit;
    width: 100%;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--back-color-four);
}

.header_nav2_item:last-child {
    border-bottom: none;
}

.header_nav2_item>a {
    display: block;
    width: max-content;
    max-width: 100%;
    padding: 1em 2em;
    min-width: 100%;
    height: 100%;
}

.header_nav2_item:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.header_nav2_item.active {
    color: #fff;
    background-color: var(--primary-color);
}


.header_search {
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    line-height: 1;
    position: relative;
}

.header_search .iconfont {
    cursor: pointer;
}

.header_search form {
    font-size: inherit;
    background-color: transparent;
    height: 2.5em;
    border-radius: 1.25em;
    display: flex;
    align-items: center;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    background-color: #fff;
    gap: 0.8em;
    width: 0;
    overflow: hidden;
    padding: 0;
    transition: .3s;
}

.header_search.active form {
    width: 12.5em;
    border-color: var(--primary-color);
    padding: 0 0.8em;
    border: 1px solid var(--primary-color);
}

.header_search form input {
    font-size: 0.875em;
    color: var(--text-primary);
    line-height: 1;
    padding: 0.5em;
}

.header_search form input::placeholder {
    color: inherit;
}

.header_search form button {
    line-height: 1;
    color: var(--primary-color);
    font-size: inherit;
    cursor: pointer;
    background-color: transparent;
    border: none;
}


.banner {
    position: relative;
}



.header_more {
    display: none;
    font-size: var(--font-size-3xl);
}

.banner .swiper .swiper-slide {
    position: relative;
}

.banner-sw-float {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
}

.banner-sw-float_ {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}


.index-solutions {
    padding: 0 var(--padding-xl);
    padding-top: var(--padding-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-size-2xl);
    
}

.index-title {
    
}

.index-title .title {
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-4xl);
    position: relative;
    padding-bottom: var(--font-size-lg);
    margin-bottom: var(--font-size-lg);
}

.index-title .title::after {
    display: block;
    content: "";
    position: absolute;
    top: 100%;
    transform: translate(-50%, -50%);
    left: 50%;
    background-color: var(--primary-color);
    width: calc(var(--font-size-base) * 5);
    height: calc(var(--font-size-base) * 0.35);
    border-radius: calc(var(--font-size-base) * 0.35 * 0.5);
}

.index-title .def {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.index-solutions_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-lg);
}

.index-solutions_grid_item {
    display: flex;
    flex-direction: column;
    width: calc((100% - var(--font-size-lg) * 3) / 4);
    gap: var(--font-size-lg);
}

.index-solutions_grid_item .img {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--back-color-three);
    padding: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    
}

.index-solutions_grid_item .img img {
    max-width: 100%;
    max-height: 100%;
    transition: .4s;
}

.index-solutions_grid_item .img:hover img {
    transform: translateY(calc(var(--font-size-lg) * -0.5));
}

.index-solutions_grid_item .text {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
}

.index-solutions_grid_item .text .title {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-md);
    text-align: center;
}

.index-solutions_grid_item .text .desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

.index-solutions .more {
    font-size: var(--font-size-sm);
    color: #fff;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 1.2em 3em;
    padding-top: 1.4em;
    border-radius: 0.4em;
    transition: .4s;
    border: 1px solid var(--primary-color);
}

.index-solutions .more:hover {
    background-color: #fff;
    color: var(--primary-color);
}

.index-about {
    padding-top: var(--padding-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-size-2xl);
}

.index-about_ {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.4166;
    min-height: 0;
}

.index-about_>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.index-about_float {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.index-about_float .vplay {
    font-size: var(--font-size-3xl);
    width: 2.5625em;
    height: 2.5625em;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    user-select: none;
    margin: 7.8125vw 0;
    flex-shrink: 0;
}

.index-about_float .vplay .icon-play {
    transform: translate(0.05em, 0.05em);
}

.index-about_infos {
    display: flex;
    justify-content: space-between;
    gap: var(--font-size-3xl);
    padding: var(--font-size-3xl) var(--padding-xl);
    background-image: linear-gradient(90deg,rgba(26,26,26,0.00) 0%,#0f0f0f73 50%,rgba(6,6,6,0.00) 100%) !important;
    width: 100%;
}

.index-about_infos_item {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-base);
    color: #fff;
    align-items: center;
}

.index-about_infos_item .number {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.index-about_infos_item .number .num {
    font-size: var(--font-size-4-5xl);
}

.index-about_infos_item .number .unit {
    font-size: var(--font-size-xl);
}

.index-about_infos_item .number .unit sup {
    font-size: 0.5em;
}

.index-about_infos_item .seq {
    width: calc(var(--font-size-base) * 9.5);
    height: max(calc(0.2 * var(--font-size-base)), 1px);
    background-image: linear-gradient(to right,rgba(255,255,255,.01),var(--primary-color),rgba(255,255,255,.01));
}

.index-packaging {
    padding: 0 var(--padding-xl);
    padding-top: var(--padding-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-size-2xl);
    padding-bottom: calc(var(--font-size-xs) + 2px);
}

.index-packaging_grid {
    display: flex;
    gap: var(--font-size-xl);
    flex-wrap: wrap;
    width: 100%;
}

.index-packaging_grid_item {
    width: calc((100% - var(--font-size-xl) * 2) / 3);
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 2px var(--font-size-xs) 0 rgba(0, 0, 0, 0.19);
    padding: var(--font-size-xs) 0;
}

.index-packaging_grid_item .title {
    padding: var(--font-size-lg) var(--font-size-2xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
}

.index-packaging_grid_item .img {
    min-height: 0;
    aspect-ratio: 1 / 0.7;
}

.index-packaging_grid_item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-packaging_grid_item .more {
    padding: var(--font-size-lg) var(--font-size-2xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--font-size-lg);
    font-size: var(--font-size-base);
    line-height: 1;
}

.index-packaging_grid_item .more .iconfont {
    font-size: 2em;
}

.index-stories {
    padding: 0 var(--padding-xl);
    padding-top: var(--padding-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-size-2xl);
}

.index-stories_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-xl) var(--font-size-xs);
    width: 100%;
}

.index-stories_grid_item {
    width: calc((100% - var(--font-size-xs) * 3) / 4);
    display: flex;
    flex-direction: column;
    gap: var(--font-size-sm);
}

.index-stories_grid_item .img {
    aspect-ratio: 1 / 0.569;
    position: relative;
    width: 100%;
    min-height: 0;
}

.index-stories_grid_item .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.index-stories_grid_item .img .vplay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-4xl);
    line-height: 1;
    cursor: pointer;
}

.index-stories_grid_item .img .vplay .btn {
    border: 0.2em solid #fff;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-stories_grid_item .img .vplay .btn .iconfont {
    transform: translate(0.06em, 0.04em);
}

.index-stories_grid_item .title {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    text-align: center;
}

.index-services {
    padding-top: var(--padding-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-size-2xl);
}

.index-services_ {
    background-color: #000;
    display: flex;
    gap: var(--padding-sm);
    padding: var(--padding-base) var(--padding-xl);
    
}

.index-services_left {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xl);
    color: #fff;
    width: 38%;
}

.index-services_left .title {
    font-size: var(--font-size-2xl);
}

.index-services_left .desc {
    font-size: var(--font-size-base);
    margin-bottom: var(--font-size-xl);
}

.index-services_left .list {
    font-size: var(--font-size-md);
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
}

.index-services_left .list .list_item {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
}

.index-services_left .list .list_item .iconfont {
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    font-size: 0.8em;
    padding-top: 0.06em;
    padding-left: 0.06em;
    transform: translateY(-0.1em);
}

.index-services_right {
    flex: 1;
}

.index-services_right form {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-lg);
}

.index-services_right form .line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-xl);
}

.index-services_right form .line input {
    width: calc((100% - var(--font-size-xl)) / 2);
    font-size: var(--font-size-md);
    padding: 1em 1.2em;
    border-radius: 0.3em;
    background-color: #fff;
    line-height: 1;
}

.index-services_right form textarea {
    font-size: var(--font-size-md);
    padding: 1em 1.2em;
    border-radius: 0.3em;
    background-color: #fff;
    line-height: var(--line-height-tight);
    width: 100%;
    height: 10em;
}

.index-services_right form button {
    padding: 1em 2.2em;
    font-size: var(--font-size-md);
    background-color: var(--primary-color);
    border-radius: 0.3em;
    color: #fff;
    align-self: flex-start;
}

.index-knowledge {
    padding: var(--padding-md) var(--padding-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-size-2xl);
}

.index-knowledge_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-lg);
}

.index-knowledge_grid_item {
    aspect-ratio: 1 / 1;
    position: relative;
    min-height: 0;
    width: calc((100% - var(--font-size-lg) * 2) / 3);
}

.index-knowledge_grid_item>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-knowledge_grid_item .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.5) 100%);
    padding: var(--font-size-4xl) var(--font-size-2xl);
    transition: .3s;
}

.index-knowledge_grid_item .text .title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    color: #fff;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.index-knowledge_grid_item .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--padding-sm);
    background-color: rgba(var(--third-color-rgb), 0.8);
    padding: var(--padding-base) var(--padding-sm);
    padding-top: var(--padding-md);
    opacity: 0;
    color: #fff;
    transition: .3s;
}

.index-knowledge_grid_item .mask .title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.index-knowledge_grid_item .mask .more {
    font-size: var(--font-size-md);
}

.index-knowledge_grid_item .mask .desc {
    flex: 1;
}

.index-knowledge_grid_item:hover .text {
    opacity: 0;
}

.index-knowledge_grid_item:hover .mask {
    opacity: 1;
}

.footer_top {
    padding: var(--padding-base) var(--padding-xl);
    display: flex;
    justify-content: space-between;
    gap: var(--padding-sm);
    background-color: #171717;
}

.footer_top_left {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
    justify-content: space-between;
}

.footer_grid {
    display: flex;
    gap: var(--padding-sm);
}

.footer_grid_item {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-lg);
    min-width: min(15vw, calc(32.86 * var(--font-size-sm)));
    max-width: calc(32.86 * var(--font-size-sm));
}

.footer_grid_item .title {
    font-size: var(--font-size-lg);
    color: #fff;
    text-transform: uppercase;
}

.footer_grid_item .text {
    color: #fff9;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
    line-height: 2.5;
}

.footer_grid_item .text a:hover {
    color: var(--primary-color);
}

.footer_icons .cicon {
    background-color: transparent;
    border: 1px solid #fff;
}

.footer_bottom {
    padding: var(--font-size-lg) var(--padding-xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #101010;
    color: #fff;
    gap: 0.5em;
}

.footer_bottom p {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
}

.page-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl);
    margin-bottom: 1em;
    text-align: center;
    text-transform: uppercase;
}

.position {
    background-color: var(--back-color-five);
    padding: var(--font-size-base) 0;
    
}

.position>div {
    display: flex;
    font-size: var(--font-size-base);
    gap: 0 0.4em;
}

.position .iconfont {
    transform: translateY(-0.1em);
    color: var(--text-secondary);
}

.position_ {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.4em;
}

.product-category {
    padding: 0 var(--padding-xl);
    padding-top: var(--padding-md);
}

.product-category_ {
    position: relative;
}

.product-category_ .swiper-button::after {
    display: none;
}

.product-category_ .swiper-button {
    color: #fff;
    font-size: var(--font-size-md);
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    line-height: 1;
    left: auto;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    top: 50%;
    margin: 0;
}

.product-category_ .swiper-button-prev {
    left: -1em;
    padding-right: 0.2em;
}

.product-category_ .swiper-button-next {
    right: -1em;
    padding-left: 0.2em;
}


.product-category_ .swiper-button-prev .iconfont {
    transform: rotate(180deg);
}

.product-category_item {
    display: flex;
    background-color: var(--back-color-five);
    z-index: 1;
    position: relative;
    overflow: hidden;
    height: auto;
}

.product-category_item::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    transition: .4s;
    background-color: var(--back-color-six);
    z-index: -1;
}

.product-category_item:hover::after {
    left: 0;
}

.product-category_item .text {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
    flex: 1;
    padding: var(--font-size-3xl);
    padding-right: 0;
}

.product-category_item .text .title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.product-category_item .text .desc {
    font-size: var(--font-size-sm);
    flex: 1;
    display: block;
}

.product-category_item .text .more {
    text-decoration: underline;
    font-size: var(--font-size-base);
}

.product-category_item .img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 39.5%;
    padding: var(--font-size-3xl) var(--font-size-lg);
}

.product-category_item .img img {
    max-width: 100%;
    max-height: 100%;
}

.hot-product {
    padding: var(--padding-md) var(--padding-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hot-product_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-3xl);
    margin-bottom: var(--padding-sm);
    display: flex;
}

.hot-product_grid_item {
    width: calc((100% - var(--font-size-3xl) * 3) / 4);
    display: flex;
    flex-direction: column;
    gap: var(--font-size-base);
}

.hot-product_grid_item .img {
    aspect-ratio: 1 / 0.8;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hot-product_grid_item .img img {
    max-width: 100%;
    max-height: 100%;
}

.hot-product_grid_item .title {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
}

.hot-product_grid_item .title:hover a {
    color: var(--primary-color);
}

.hot-product_grid_item .more {
    font-size: var(--font-size-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 0.8em 1.4em;
    padding-top: 0.9em;
    border-radius: 1.4em;
    background-color: var(--back-color-five);
    width: max-content;
    transition: .3s;
}

.hot-product_grid_item .more:hover {
    background-color: var(--primary-color);
    color: #fff;
}


.hot-product>.more {
    font-size: var(--font-size-sm);
    color: #fff;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 1.2em 3em;
    padding-top: 1.4em;
    border-radius: 0.4em;
    transition: .4s;
    border: 1px solid var(--primary-color);
    width: max-content;
}

.hot-product>.more:hover {
    background-color: #fff;
    color: var(--primary-color);
}

.product-special-industry {
    padding: var(--padding-md) var(--padding-xl);
}

.product-special-service {
    padding: var(--padding-base) var(--padding-xl);
    background-color: var(--back-color-five);
}

.product-special-service .page-title {
    margin-bottom: var(--padding-base);
}

.product-special-service .index-services_ {
    padding: 0;
    background-color: transparent;
    gap: var(--padding-md);
}

.product-special-service .index-services_left {
    color: var(--text-primary);
    width: 42%;
}

.product-special-service .index-services_left .desc {
    font-size: var(--font-size-md);
}

.product-special-service .index-services_left .list_item {
    font-size: var(--font-size-md);
}

.product-special-service .index-services_left .list_item .iconfont {
    background-color: var(--text-primary);
    color: var(--back-color-five);
}

.product-special-service .index-services_right form {
    gap: var(--font-size-xs);
}

.product-special-service .index-services_right form .line {
    gap: var(--font-size-xs);
}

.product-special-service .index-services_right form .line input {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--text-secondary);
    border-radius: 0;
    padding:0.8em;
}

.product-special-service .index-services_right form textarea {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--text-secondary);
    border-radius: 0;
    padding:0.8em;
}

.product-special-service .index-services_right form button {
    width: 100%;
}

.page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--text-third);
}

.page .page-num, .page>span {
    line-height: 1;
    transition: .2s;
    width: 2.5em;
    height: 2.5em;
    border: 1px solid var(--back-color-one);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page .page-num:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.page .page-num-current {
    color: #fff;
    background-color: var(--primary-color);
}

.page .page-arr {
    line-height: 1;
    width: 2.5em;
    height: 2.5em;
    border: 1px solid var(--back-color-three);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page .page-arr:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.productlist {
    padding: var(--padding-base) var(--padding-xl);
}

.productlist>div {
    display: flex;
    gap: var(--font-size-xl);
}

.productlist_left {
    width: calc(17.5 * var(--font-size-base));
    display: flex;
    flex-direction: column;
    gap: var(--font-size-3xl);
}

.productlist_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--font-size-3xl);
}

.productlist_nav {
    display: flex;
    flex-direction: column;
}

.productlist_nav_title {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    background-color: var(--primary-color);
    padding: var(--font-size-lg);
}

.productlist_more {
    display: none;
}

.productlist_nav_grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--back-color-eight);
    font-size: var(--font-size-base);
}

.productlist_nav_grid a:hover {
    color: var(--primary-color);
}

.productlist_nav_grid_item {
    border-bottom: 1px solid var(--back-color-eight);
    font-size: inherit;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.productlist_nav_grid_item:last-child {
    border-bottom: none;
}

.productlist_nav_grid_item>.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.productlist_nav_grid_item>.title a {
    padding: var(--font-size-base);
    padding-right: 0;
    flex: 1;
}

.productlist_nav_grid_item.active>.title a {
    color: var(--primary-color);
}

.productlist_nav_grid_item>.title .iconfont {
    padding: var(--font-size-base);
    cursor: pointer;
    transform: rotate(180deg);
    transition: .3s;
}

.productlist_nav_grid_item>.title .iconfont:hover {
    color: var(--primary-color);
}

.productlist_nav_grid_item.open .iconfont {
    transform: rotate(360deg);
}

.productlist_nav_grid2 {
    font-size: var(--font-size-sm);
    padding: 0 1.6em;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    height: 0;
    overflow: hidden;
    box-sizing: content-box;
}

.productlist_nav_grid2_item {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
}

.productlist_nav_grid2_item.active>a {
    color: var(--primary-color);
}

.productlist_nav_grid2_item::before {
    content: "·";
    font-weight: var(--font-weight-bold);
}

.productlist_nav_grid_item.open.parent {
    padding-bottom: 1em;
}

.productlist_news {
    display: flex;
    flex-direction: column;
}

.productlist_news_title {
    color: #fff;
    display: block;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    background-color: var(--primary-color);
    padding: var(--font-size-lg);
}

.productlist_news_grid {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-base);
    gap: var(--font-size-xl);
}

.productlist_news_grid a:hover {
    color: var(--primary-color);
}

.productlist_news_grid_item {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-sm);
}

.productlist_news_grid_item .text {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
}

.productlist_news_grid_item .text .title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.productlist_news_grid_item .text .desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.productlist_sort {
    font-size: var(--font-size-2-5xl);
    font-weight: var(--font-weight-normal);

}

.productlist_desc {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.productlist_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-xs);
}

.productlist_grid_item {
    width: calc((100% - var(--font-size-xs) * 2) / 3);
    border: 1px solid var(--back-color-eight);
    display: flex;
    flex-direction: column;
    padding: calc(var(--font-size-xs) / 2);
    gap: var(--font-size-xs);
    padding-bottom: var(--font-size-xs);
    position: relative;
}

.productlist_grid_item::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: max(1px, 0.125rem);
    width: 0;
    transition: .3s;
    content: "";
    display: block;
    background-color: var(--primary-color);
}

.productlist_grid_item .img {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.productlist_grid_item .img img {
    max-width: 100%;
    max-height: 100%;
}

.productlist_grid_item .title {
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.productlist_grid_item a:hover {
    color: var(--primary-color);
}

.productlist_grid_item:hover::before {
    width: 100%;
}

.product {
    padding: var(--padding-base) var(--padding-xl);
}

.product_top {
    display: flex;
    gap: var(--font-size-xl);
}

.product_top_left {
    display: flex;
    gap: var(--font-size-xs);
    width: 66%;
}

.product_top_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xl);
}

.product_swiper {
    width: 82.4%;
    min-height: 0;
    min-width: 0;
}

.product_thumb_swiper {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.product_top_left .swiper-slide {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}


.product_thumb_swiper {
    position: relative;
}

.product_thumb_swiper .swiper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.product_top_left .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
}

.product_swiper .swiper-slide {
    padding: var(--font-size-xl);
}

.product_thumb_swiper .swiper-slide {
    cursor: pointer;
    opacity: 0.4;
    padding: calc(var(--font-size-xs) / 2);
    transition: opacity .3s;
}

.product_thumb_swiper .swiper-slide-thumb-active {
    opacity: 1;
    border: max(1px, 0.125rem) solid var(--text-primary);
}

.product_top_right .title {
    font-size: var(--font-size-2xl);
}

.product_top_right .def {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.product_top_right .btns {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
    margin-top: var(--font-size-xs);
}

.product_top_right .btn {
    min-width: min(100%, 18em);
    width: max-content;
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-base);
    gap: var(--font-size-xs);
    padding: 0.6em 1.2em;
    line-height: 1;
    border-radius: 1.4em;
    border: 1px solid var(--primary-color);
    transition: .1s;
}

.product_top_right .btn .iconfont {
    font-size: 1.4em;
}

.product_top_right .btn:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.product_detail {
    border: 1px solid var(--back-color-eight);
    display: flex;
    flex-direction: column;
    margin-top: var(--padding-sm);
}

.product_detail_topline {
    width: 100%;
    background-color: var(--back-color-two);
    display: flex;
    flex-wrap: wrap;
}

.product_detail_topline::after {
    content: "";
    display: block;
    flex: 1;
    border-bottom: 1px solid var(--back-color-eight);
}

.product_detail_topline .title {
    background-color: #fff;
    border-right: 1px solid var(--back-color-eight);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.6em 1.2em;
    font-weight: var(--font-weight-normal);
    border-top: max(1px, 0.125rem) solid var(--text-primary);
    cursor: pointer;
}

.product_detail_content {
    padding: var(--font-size-xl);
}

.product_top_right .basket-quantity {
    font-size: var(--font-size-base);
}

.basket-quantity {
    display: flex;
    gap: 0.75em;
    color: var(--text-secondary);
    line-height: 1;
    align-items: center;
    font-size: inherit;
}

.basket-quantity .number {
    display: flex;
    align-items: center;
    gap: 0.375em;
}


.basket-quantity .number>a {
    width: 1.6em;
    height: 1.6em;
    border: 1px solid var(--back-color-eight);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.basket-quantity .number .num {
    width: 3em;
    height: 1.6em;
    border: 1px solid var(--back-color-eight);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-align: center;
    padding: 0.2em;
}

.basket-quantity .number .reduce::before {
    content: "";
    display: block;
    width: 1em;
    height: max(1px, 0.125em);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: var(--text-primary);
}

.basket-quantity .number .add::before {
    content: "";
    display: block;
    width: 1em;
    height: max(1px, 0.125em);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: var(--text-primary);
}

.basket-quantity .number .add::after {
    content: "";
    display: block;
    height: 1em;
    width: max(1px, 0.125em);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: var(--text-primary);
}
























.float_basket {
  width: 3.125rem;
  height: 3.125rem;
  box-sizing: border-box;
  position: fixed;
  right: 1.25rem;
  bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7a8599;
  border-radius: 50%;
  cursor: pointer;

  z-index: 90;
}

.float_basket svg {
  width: 50%;
  height: auto;
}

.float_basket span {
  position: absolute;
  transform: translate(25%, -25%);
  right: 0;
  top: 0;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background-color: red;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  display: none;
}

.float_basket_content {
  position: fixed;
  bottom: -18.75rem;
  right: 0;
  width: 14.375rem;
  height: 17.125rem;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: 0 0 8px #999;
  transition: 0.5s;
  z-index: 99;
}

.float_basket_content_active {
  bottom: 0;
}

.float_basket_content>div:first-child {
  position: relative;
  background-color: #7a8599;
  height: 2.25rem;
  cursor: pointer;
}

.float_basket_content>div:first-child p {
  text-align: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 2.25rem;
}

.float_basket_content>div:first-child p span {
  color: #f7992b;
}

.float_basket_content>div:first-child>span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.float_basket_content>div:first-child>span svg {
  height: 50%;
}

.float_basket_content_form {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.float_basket_content_form ul {
  width: 100%;
  height: 12.475rem;
  overflow: auto;
}

.float_basket_content_form ul li {
  width: 100%;
  display: flex;
  height: 3.75rem;
  box-sizing: border-box;
  padding: 4% 1%;
  border-bottom: 2px solid #dddddd;
}

.float_basket_content_form ul li .ptext {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.float_basket_content_form ul li .line {
    display: flex;
    gap: 1rem;
    margin-top: 0.2rem;
}

.float_basket_content_form ul li .line .basket-quantity {
    font-size: 0.7rem;
}


.float_basket_content_form ul li p {
  font-size: 0.75rem;
  color: #246bb3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.float_basket_content_form ul li span {
  display: none;
  font-size: 0.75rem;
  color: #888888;
  flex: 1;
  cursor: pointer;
  align-items: flex-end;
  width: min-content;
}

.float_basket_content_form ul li:hover {
  background-color: #fffeee;
}

.float_basket_content_form ul li:hover .ptext span {
  display: flex;
}

.float_basket_content_form ul li span:hover {
  text-decoration: underline;
}

.float_basket_content_form ul li .pimg {
  width: 25%;
  margin-right: 3%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.float_basket_content_form ul li .pimg img {
  max-width: 100%;
  max-height: 100%;
}

.float_basket_content_form>div {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem;
  align-items: center;
}

.float_basket_content_form button {
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.float_basket_content_form button:first-child {
  background-color: #f1f1f1;
  color: #e64545;
}

.float_basket_content_form button:last-child {
  background-color: #e64545;
  color: #f1f1f1;
}

.float_tip {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 1% 2%;
  background-color: #333333;
  color: #ffffff;
  z-index: 100;
  display: none;
  opacity: 0;
  transition: 1s;
}

.float_tip_active {
  opacity: 1;
}

.inquiry {
    padding: var(--padding-base) var(--padding-xl);
}

.inquiry_title {
    font-size: var(--font-size-2-5xl);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--font-size-xs);
}

.inquiry_form {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
}

.inquiry_form_table {
    font-size: var(--font-size-base);
}

.inquiry_form_table th {
    background-color: var(--back-color-five);
    color: var(--text-secondary);
    padding: 0.4em 0.2em;
    border: 1px solid var(--back-color-six);
}

.inquiry_form_table td {
    color: var(--text-secondary);
    padding: 0.4em;
    border: 1px solid var(--back-color-six);
    text-align: center;
    align-content: center;
    vertical-align: middle;
}

.inquiry_form_table img {
    max-width: 100%;
    max-height: 100%;
}

.inquiry_form_table td .basket-quantity {
    justify-content: center;
}

.inquiry_form_table tr td:first-child {
    width: 16em;
    height: 9em;
    padding: 0.5em 1em;
}

.inquiry_form_table tr td:first-child img {
    margin: 0 auto;
}

.inquiry_form_table .delete {
    cursor: pointer;
}

.inquiry_form>input {
    padding: 0.8em 0.6em;
    border: 1px solid var(--back-color-six);
    border-radius: 0.4em;
}

.inquiry_form textarea {
    padding: 0.8em 0.6em;
    border: 1px solid var(--back-color-six);
    border-radius: 0.4em;
    height: 8em;
}

.inquiry_form button {
    align-self: center;
    background-color: var(--primary-color);
    color: #fff;
    min-width: 12em;
    padding: 1em 1.6em;

    border-radius: 0.4em;
    line-height: 1;
}

.newslist {
    padding: var(--padding-base) var(--padding-xl);
}

.newslist>div {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
    align-items: center;
}

.newslist_title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl);
    text-transform: uppercase;
}


.newslist_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-lg);
    width: 100%;
}

.newslist_grid_item {
    width: calc((100% - var(--font-size-lg) * 2) / 3);
    display: flex;
    flex-direction: column;
    gap: var(--font-size-lg);
}

.newslist_grid_item a:hover {
    color: var(--primary-color);
}

.newslist_grid_item .img {
    aspect-ratio: 1 / 0.91;
    min-height: 0;
    position: relative;
    display: block;
}

.newslist_grid_item .img .arr {
    position: absolute;
    content: "";
    transform: translate(-50%, -50%) rotate(135deg) scaleY(-1);
    left: 50%;
    top: 50%;
    font-size: calc(var(--font-size-lg) / 2);
    width: 4em;
    height: 4em;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: .4s;
    opacity: 0;

}

.newslist_grid_item .img:hover .arr {
    transform: translate(-50%, -50%) rotate(180deg) scaleY(-1);
    opacity: 1;
    scale: 1;
    font-size: var(--font-size-lg);
}

.newslist_grid_item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
}

.newslist_grid_item .img:hover img {
    opacity: 0.3;
}

.newslist_grid_item .text {
    display: flex;
    flex-direction: column;
    gap: calc(var(--font-size-xs) / 2);
}

.newslist_grid_item .text .title {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

.newslist_grid_item .text .desc {
    color: var(--text-secondary);
}

.news {
    padding: var(--padding-md) var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--font-size-sm);
}

.news_title {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
}

.news_title .title {
    text-align: center;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-3xl);
}

.news_title .info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 1.5em;
    font-size: var(--font-size-base);
    justify-content: center;
}

.news_content {
    font-size: var(--font-size-base);
}

.about {
    
}

.about-title {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xl);
    margin-bottom: var(--padding-sm);
}

.about-title .title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.about-title .desc {
    text-align: center;
    color: var(--text-secondary);
}

.profile {
    padding: var(--padding-base) var(--padding-xl);
}

.profile_ {
    display: flex;
    gap: var(--padding-sm);
    margin-bottom: var(--font-size-3xl);
}

.profile_left {
    width: 49%;
}

.profile_left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile_right {
    flex: 1;
}

.profile_grid {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-3xl);
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 1;
}

.profile_grid::before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
    top: 0;
    left: calc(var(--font-size-2-5xl) * 2.33 / 2);
    background-color: var(--back-color-six);
    z-index: -1;
}

.profile_grid_item {
    display: flex;
    gap: var(--font-size-xl);
    align-items: baseline;
    flex: 1;
    position: relative;
    z-index: 1;
}

.profile_grid_item:last-child::after {
    content: "";
    position: absolute;
    display: block;
    width: calc(var(--font-size-2-5xl) * 2.33);
    height: 100%;
    transform: translateX(-50%);
    top: 0;
    left: calc(var(--font-size-2-5xl) * 2.33 / 2);
    background-color: #fff;
    z-index: -1;
}

.profile_grid_item .step {
    font-size: var(--font-size-2-5xl);
    width: 2.33em;
    height: 2.33em;
    border-radius: 50%;
    box-shadow: 0 0.33em 0.66em rgba(23, 22, 49, .1);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--primary-color);
    flex-shrink: 0;
}

.profile_grid_item .text {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
}

.profile_grid_item .text .title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
}

.profile_grid_item .text .desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.profile_imgs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-base);
}

.profile_imgs .img {
    width: calc((100% - var(--font-size-base) * 3) / 4);
    aspect-ratio: 1 / 0.685;
    min-height: 0;
}

.profile_imgs .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history {
    padding: var(--padding-base) var(--padding-xl);
    background-color: var(--back-color-four);
}

.history_item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.history_item .year {
    width: 4.25em;
    font-size: var(--font-size-4-5xl);
    padding: 3%;
    position: relative;
    z-index: 1;
    padding-bottom: 0;
}

.history_item .year::before {
    border-radius: 50%;
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    background-image: linear-gradient(to top, #666 50%, #df0916);
}

.history_item .year .circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--text-secondary);
    line-height: 1;
}

.history_item .year .circle::before {
    content: "";
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 98%;
    height: 98%;
    border-radius: 50%;
    background-color: var(--back-color-five);
    z-index: -2;
}

.history_item .year .circle::after {
    content: "";
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background-color: #fff;
    z-index: -1;
}

.history_item .year .pos {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -0.75em;
    position: relative;
    z-index: 2;
}

.history_item .year .pos .block {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--text-secondary);
    flex-shrink: 0;
}

.history_item .year .pos .line {
    width: max(1px, 0.05em);
    height: 1.2em;
    background-color: var(--text-secondary);
}

.history_item .desc {
    font-size: var(--font-size-sm);
    padding: 2.5em 1.1em;
    background-color: var(--text-secondary);
    color: #fff;
    width: 100%;
}

.history_swiper {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-2-5xl);
    align-items: center;
}

.history_swiper .swiper {
    width: 100%;
    min-width: 0;
}

.history_swiper .swiper-pagination {
    position: static;
}

.history_swiper .swiper-pagination .swiper-pagination-bullet {
    border-radius: 0;
}

.history_swiper .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
}

.certificate {
    padding: var(--padding-base) var(--padding-xl);
}

.certificate_item {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-xs);
}

.certificate_item .img {
    min-height: 0;
    aspect-ratio: 1 / 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificate_item .img img {
    max-width: 100%;
    max-height: 100%;
}

.certificate_item .title {
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.certificate_swiper {
    position: relative;
}

.certificate_swiper .swiper-button::after {
    display: none;
}

.certificate_swiper .swiper-button {
    color: #fff;
    font-size: var(--font-size-lg);
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    line-height: 1;
    left: auto;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    top: 50%;
    margin: 0;
    transition: .2s;
}

.certificate_swiper .swiper-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.certificate_swiper .swiper-button-prev {
    left: 0;
}

.certificate_swiper .swiper-button-next {
    right: 0;
}


.certificate_swiper .swiper-button-prev .iconfont {
    transform: rotate(180deg);
}

.choose {
    padding: var(--padding-base) var(--padding-xl);
    padding-bottom: var(--padding-md);
}

.choose_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding-sm) var(--font-size-xl);
}

.choose_grid_item {
    width: calc((100% - var(--font-size-xl)) / 2);
    padding: var(--font-size-lg);
    position: relative;
    background-color: var(--back-color-one);
    border: 1px solid var(--back-color-one);
    position: relative;
    z-index: 1;
    border-radius: var(--font-size-lg);
    transform: translateY(calc(var(--font-size-base) * -0.25));
    display: flex;
    flex-direction: column;
    gap: calc(var(--font-size-base) * 0.25);
}


.choose_grid_item::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    border-radius: var(--font-size-lg);
    width: 100%;
    height: 100%;
    background-color: var(--back-color-seven);
    border: 1px solid var(--back-color-one);
    left: 0;
    top: calc(var(--font-size-base) * 0.25);
}

.choose_grid_item::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    border-radius: var(--font-size-lg);
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    left: 0;
    top: calc(var(--font-size-base) * 0.5);
}

.choose_grid_item .title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    transform: translateY(calc(var(--font-size-base) * 0.25));
}

.choose_grid_item .text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    transform: translateY(calc(var(--font-size-base) * 0.25));
}

.proline {
    padding: var(--padding-base) var(--padding-xl);
    background-image: url(../images/proline.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #000;
}

.proline_ {
    display: flex;
    justify-content: space-between;
    gap: var(--padding-sm);
    align-items: center;
}

.proline_ .text {
    font-size: var(--font-size-lg);
    color: #fff;
    max-width: 40em;
}

.proline_ .more {
    font-size: var(--font-size-sm);
    line-height: 1;
    padding: 1.2em 3em;
    padding-bottom: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 0.5em;
    flex-shrink: 0;
    border: 1px solid var(--primary-color);
    transition: .2s;
}

.proline_ .more:hover {
    background-color: #fff;
    color: var(--primary-color);
}

.about .product-special-service {
    background-color: #fff;
}

.indicators {
    padding: var(--padding-base) var(--padding-xl);
    padding-bottom: calc(var(--padding-base) * 2);
}

.indicators_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-size-lg);
}

.indicators_grid_item {
    width: calc((100% - var(--font-size-lg) * 5) / 6);
    aspect-ratio: 1 / 1;
    min-height: 0;
    box-shadow: 0px 0px var(--font-size-xs) rgba(0, 0, 0, .09);
    font-size: var(--font-size-base);
    padding: 0.625em;
    border-radius: 50%;
}

.indicators_grid_item .text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    border: max(1px, 0.15em) dotted #700007;
    box-shadow: 0px 0px var(--font-size-xs) rgba(0, 0, 0, .09);
    border-radius: 50%;
    padding: 2em;
    font-weight: var(--font-weight-bold);
}

.indicators_grid_item:hover .text {
    background-image: linear-gradient(to bottom,#df0916 0%,#700007 100%);
    border: max(1px, 0.15em) solid #700007;
}

.videolist {
    padding: var(--padding-base) var(--padding-xl);
}

.videolist_grid {
    margin-bottom: var(--padding-sm);
}

.contact {
    padding: var(--padding-base) var(--padding-xl);
}

.contact_ {
    display: flex;
    gap: var(--padding-base);
}

.contact_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-size-2xl);
    width: 57%;
    flex-shrink: 0;
}

.contact_left .title {
    text-align: center;
    font-size: var(--font-size-4xl);
    text-transform: uppercase;
}

.contact_left .form {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-lg);
    width: 100%;
}

.contact_left .form .line {
    display: flex;
    gap: var(--font-size-xs);
    width: 100%;
}

.contact_left .form input {
    flex: 1;
    font-size: var(--font-size-base);
    padding: 1em 0.8em;
    background-color: var(--back-color-four);
    color: var(--text-secondary);
    line-height: 1;
}

.contact_left .form textarea {
    font-size: var(--font-size-base);
    padding: 1em 0.8em;
    background-color: var(--back-color-four);
    color: var(--text-secondary);
    line-height: 1;
    width: 100%;
    height: 10em;
}

.contact_left .form button {
    font-size: var(--font-size-md);
    background-color: var(--primary-color);
    padding: 1em 3em;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 18em;
    color: #fff;
}

.contact_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
}

.contact_right_item {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-base);
}

.contact_right_item .title {
    padding-bottom: var(--font-size-sm);
    border-bottom: 1px solid var(--back-color-six);
    position: relative;
    font-size: var(--font-size-base);
}

.contact_right_item .title::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 10%;
    content: "";
    height: 1px;
    display: block;
    background-color: var(--primary-color);
}

.contact_right_item .text {
    font-size: var(--font-size-sm);
}


.contact_right_item .text .iconfont {
    font-size: 1.2em;
    color: #AF9F7B;
}

.notext {
    font-size: var(--font-size-base);
}

@media (max-width: 769px) {
    .header_right {
        align-items: center;
    }

    .header_more, .header_search, .header_right .cn {
        font-size: var(--font-size-3xl);
        color: var(--primary-color);
        display: block;
    }
    
    .header_nav {
        position: absolute;
        --header-nav-width: min(18.18em, 100dvw);
        top: 100%;
        height: calc(100dvh - 100%);
        width: 0;
        right: 0;
        font-size: var(--font-size-3xl);
        background-color: #fff;
        overflow: hidden;
        transition: .3s;
    }

    .header_nav_ {
        flex-direction: column;
        height: 100%;
        gap: 0;
        width: var(--header-nav-width);
    }

    .header_nav_item {
        flex: 1;
    }

    .header_nav_item>a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header_nav_item>a .iconfont {
        display: none;
    }

    .header_nav_item:hover::after {
        display: none;
    }

    .header_nav.active {
        width: var(--header-nav-width);
    }

    .header_nav2 {
        display: none !important;
    }

    .index-solutions_grid_item {
        width: calc((100% - var(--font-size-lg)) / 2);
    }

    

    .index-stories_grid_item {
        width: calc((100% - var(--font-size-xs)) / 2);
    }

    .index-services_ {
        flex-direction: column;
    }

    .index-services_left, .product-special-service .index-services_left {
        width: 100%;
    }

    .index-knowledge_grid_item {
        width: calc((100% - var(--font-size-lg)) / 2);
    }

    .footer_grid, .footer_top_right {
        display: none;
    }

    .footer_top {
        justify-content: center;
    }

    .hot-product_grid_item {
        width: calc((100% - var(--font-size-3xl)) / 2);
    }

    .productlist_news {
        display: none;
    }
    
    .productlist>div {
        flex-direction: column;
        gap: var(--padding-base);
    }

    .productlist_left {
        width: 100%;
    }

    .newslist_grid_item {
        width: calc((100% - var(--font-size-lg)) / 2);
    }

    .profile_ {
        flex-direction: column;
    }

    .profile_left {
        width: 100%;
    }

    .profile_imgs .img {
        width: calc((100% - var(--font-size-base)) / 2);
    }

    .choose_grid_item {
        width: 100%;
    }

    .indicators_grid_item {
        width: calc((100% - var(--font-size-lg) * 2) / 3);
    }

    .contact_ {
        flex-direction: column;
    }

    .contact_left {
        width: 100%;
    }

    .productlist_more {
        display: block;
    }

    .productlist_nav {
        position: relative;
        z-index: 2;
    }

    .productlist_nav_grid {
        position: absolute;
        top: 100%;
        left: 0;
        transition: .4s;
        background-color: #fff;
        width: 100%;
        overflow: auto;
        max-height: 0;
    }

    .productlist_nav_grid.active {
        max-height: 40dvh;
    }

    .productlist_nav_grid_item>.title .iconfont {
        transition: none;
    }

    .product_top {
        flex-direction: column;
    }

    .product_top_left {
        width: 100%;
    }

    .footer_bottom {
        flex-direction: column;
    }
}


@media (max-width: 431px) {
    .index-packaging_grid_item {
        width: 100%;
    }

    .productlist_grid_item {
        width: calc((100% - var(--font-size-xs)) / 2);
    }
    
}


.float_content {
    width: 4.375em;
    position: fixed;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    font-size: var(--font-size-base);
}

.float_content_button {
    width: 4.375em;
    height: 4.375em;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    margin-bottom: 3px;
    cursor: pointer;
    border: 0 solid var(--primary-color);
    border-left-width: 3px;
    transition: .5s;
    position: relative;
    right: 0;
    font-size: var(--font-size-base);
    z-index: 1;
}

.float_content_button div:first-child {
    height: 100%;
    width: 0;
    background-color: var(--secondary-color);
    position: absolute;
    left: 0;
    z-index: -1;
    transition: .8s;
}

.float_content_button-img div:first-child {
    transition: .4s;
}

.float_content_button div:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.float_content_button div:nth-child(2) span {
    color: #ffffff;
    font-size: var(--font-size-xs);
    display: block;
    margin-top: 0.4166em;
}

.float_content_button div:nth-child(2)>img {
    height: 40%;
    width: auto;
    filter: brightness(100);
    margin-bottom: 5px;
}

.float_content_button div:nth-child(2) .icon {
    font-size: var(--font-size-3xl);
    fill: #fff;
    color: #fff;
}


.float_content_button div:nth-child(2) .sicon path {
    fill: #fff;
}

.float_content_button div:nth-child(2) p {
    display: none;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
}

.float_content_button-text:hover {
    width: 18.75em;
    right: 14.375em;
    background-color: transparent;
}

.float_content_button-text div:first-child {
    transition: .4s;
}

.float_content_button:hover div:first-child {
    width: 100%;
}

.float_content_button-text:hover div:nth-child(2)>img {
    display: none;
}

.float_content_button-text:hover div:nth-child(2) .icon {
    display: none;
}

.float_content_button-text:hover div:nth-child(2) span {
    display: none;
}

.float_content_button-text:hover div:nth-child(2) p {
    display: block;
}


.float_content_button div:nth-child(2)>div {
    position: absolute;
    top: 50%;
    right: calc(100% + 1em);
    width: 12.5em;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background-color: #05204D;
    overflow: hidden;
}

.float_content_button div:nth-child(2)>div img {
    width: 100%;
}


.float_content_button-img:hover div:nth-child(2)>div {
    opacity: 1;
    visibility: visible;
    top: 0;
    
}



@media screen and (max-width:769px){
    .footer {
        margin-bottom: calc(var(--font-size-base) * 3.75);
    }

	.float_content {
        flex-direction: row;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        left: 50%;
        width: 100%;
    }

    .float_content_button {
        margin-bottom: 0;
        flex: 1;
        height: 3.75em;
        border-left: none;
    }

    .float_content_button-text div:first-child {
        display: none;
    }

    
    .float_content_button-text:hover {
        width: auto;
        right: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .float_content_button div:first-child {
       display: none;
    }

    .float_content_button-text:hover div:nth-child(2)>img {
        display: block;
    }

    .float_content_button-text:hover div:nth-child(2) .icon {
        display: block;
    }

    .float_content_button-text:hover div:nth-child(2) span {
        display: block;
    }

    .float_content_button-text:hover div:nth-child(2) p {
        display: none;
    }

    .float_content_button div:nth-child(2)>div {
        transform: translateX(-50%);
        left: 50%;
        right: auto;
        width: 100%;
        bottom: 2.5em;
        top: auto;
        overflow: visible;
    }

    .float_content_button div:nth-child(2)>div::after {
        position: absolute;
        top: 100%;
        transform: translateX(-50%);
        left: 50%;
        width: 0.875em;
        height: 0.5em;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: "";
        background-color: #05204D;
        display: block;
    }

    .float_content_button-img:hover div:nth-child(2)>div {
        opacity: 1;
        visibility: visible;
        top: auto;
        bottom: 4.375em;
    }

}