* {
    margin: 0;
    padding: 0;
}

/* 自定义整个滚动条 */
::-webkit-scrollbar {
    width: 3px;
    /* 设置滚动条的宽度 */
    background-color: #f9f9f9;
    /* 滚动条的背景色 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f9f9f9;
    /* 轨道的背景色 */
    /* 轨道的圆角 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
    background-color: #333333;
    /* 滑块的背景色 */
    /
}


.main_container {
    width: 100%;
}

.left_header {
    width: calc(85px + 10rem);
    height: 100vh;
    background: #FFFFFF;
    box-shadow: 0px 0px calc(4px + 0.5rem) calc(0px + 0.1rem) rgba(147, 147, 147, 0.15);
    position: fixed;
    top: 0;
    z-index: 10;
}

.main_box {
    width: calc(100vw - calc(85px + 10rem));
    float: right;
}

.banner_video {
    width: 100%;
    height: 100vh;
    position: relative;
}

.banner_video video {
    height: 100%;
}

.ban_text {
    width: max-content;
    height: max-content;
    font-family: albb_reqular;
    font-size: calc(16px + 2rem);
    color: #FFFFFF;
    text-align: justify;
    font-style: normal;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
   
}

.product_box {
    width: 100%;
    padding: calc(6px + 4rem) 0;
    background: #F7F7F7;
}

.product {
    max-width: 1360px;
    width: 85%;
    margin: auto;
}

.product_card {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(9px + 3rem);
}

.product_pic {
    width: 50%;
    height: calc(26px + 20rem);
}

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

.product_right {
    width: 50%;
    height: calc(26px + 20rem);
    background: url(../images/pro_bg.png) no-repeat #ffffff;
    background-size: 80.5882%;
    background-position: center;
}

.product_text {
    height: 100%;
    font-family: PINGFANG-MEDIUM;
    font-weight: 500;
    font-size: calc(10px + 1rem);
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(4px + 0.5rem);

}

.product_text img {
    width: calc(2px + 0.25rem);
}

.about_box {
    width: 100%;
    padding: calc(6px + 4rem) 0;
}

.about {
    max-width: 1360px;
    width: 85%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about_left {
    width: 35.2941%;
}

.about_pic {
    width: 57.3529%;
    height: calc(120px + 20rem);
}

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

.about_intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: calc(4px + 0.5rem);
    margin-top: calc(17px + 2rem);
}

.about_intro p {
    font-family: PINGFANG-REGULAR;
    font-weight: 400;
    font-size: calc(6px + 0.5rem);
    color: #777777;
    line-height: calc(10px + 1rem);
    text-align: justify;
    font-style: normal;
}

.about_more {
    width: calc(36px + 5rem);
    line-height: calc(5px + 2rem);
    border: 1px solid #333333;
    font-family: PINGFANG-REGULAR;
    font-weight: 400;
    font-size: calc(8px + 0.5rem);
    color: #333333;
    text-align: center;
    font-style: normal;
    margin-top: calc(5px + 2rem);
    transition: .3s;
}
.about_more:hover{
    background: #333333;
    color: #ffffff;
}
.strength_box {
    width: 100%;
    padding: calc(6px + 4rem) 0;
    background: #F7F7F7;
}

.strength {
    max-width: 1360px;
    width: 85%;
    margin: auto;
}

.strength_card_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(9px + 3rem);
}

.strength_card {
    width: 23.6764%;
    height: calc(20px + 20rem);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: calc(2px + 1rem);
    cursor: pointer;
}

.strength_card:hover .str_icon img{
    transform: rotateY(180deg);
}

.str_icon {
    width: calc(16px + 3rem);
    height: calc(16px + 3rem);
    background: #F2F2F2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(6px + 2rem);
}

.str_icon img {
    width: calc(6px + 1.5rem);
    transition: .5s;
}

.str_title {
    font-family: PINGFANG-MEDIUM;
    font-weight: 500;
    font-size: calc(10px + 0.5rem);
    color: #454545;
}

.str_intro {
    width: calc(56px + 10rem);
    font-family: PINGFANG-REGULAR;
    font-weight: 400;
    font-size: calc(6px + 0.5rem);
    color: #777777;
    line-height: calc(8px + 1rem);
    text-align: justify;
    font-style: normal;
    margin-top: calc(1px + 1rem);
}

.factory_box {
    width: 100%;
    padding: calc(6px + 4rem) 0;
}

.factory {
    max-width: 1360px;
    width: 85%;
    margin: auto;
}

.factory_card_box {
    display: flex;
    justify-content: space-between;
    margin-top: calc(9px + 3rem);
}

.factory_card {
    width: 48.6764%;
    height: calc(67px + 15rem);
    position: relative;
    overflow: hidden;
}

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

.factory_card img:hover {
    transform: scale(1.1);
}

.fac_text {
    width: max-content;
    height: max-content;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(1px + 0.5rem);
}

.fac_text p {
    font-family: PINGFANG-MEDIUM;
    font-weight: 500;
    font-size: calc(8px + 1rem);
    color: #FFFFFF;
    text-shadow: 0px calc(0px + 0.1rem) calc(0px + 0.1rem) rgba(0, 0, 0, 0.5);

}

.fac_text img {
    width: calc(4px + 1.5rem);
}

.news_box {
    width: 100%;
    padding: calc(6px + 4rem) 0;
    background: #F7F7F7;
}

.news {
    max-width: 1360px;
    width: 85%;
    margin: auto;
}

.news_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(9px + 3rem);
}

.news_card {
    width: 31.6176%;
    background-color: #fff;
    padding-bottom: calc(8px + 1.5rem);
}

.news_pic {
    width: 100%;
    height: calc(35px + 10rem);
    overflow: hidden;
}

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

.news_card:hover img {
    transform: scale(1.1);
}

.news_title {
    font-family: PINGFANG-MEDIUM;
    font-weight: 500;
    font-size: calc(10px + 0.5rem);
    color: #333333;
    text-align: justify;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 calc(4px + 2rem);
    margin-top: calc(8px + 1rem);
}

.news_summary {
    font-family: PINGFANG-REGULAR;
    font-weight: 400;
    font-size: calc(6px + 0.5rem);
    color: #777777;
    line-height: calc(8px + 1rem);
    text-align: justify;
    font-style: normal;
    padding: 0 calc(4px + 2rem);
    margin-top: calc(0px + 0.5rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news_time {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(3px + 0.25rem);
    margin-left: calc(4px + 2rem);
    margin-top: calc(7px + 1rem);
}

.news_time img {
    width: calc(8px + 0.5rem);

}

.news_time p {
    font-family: DIN_Regular;
    font-weight: 400;
    font-size: calc(8px + 0.5rem);
    color: #333333;
    text-align: justify;
    font-style: normal;
}

.news_more {
    width: calc(36px + 5rem);
    line-height: calc(5px + 2rem);
    background: #333333;
    font-family: PINGFANG-REGULAR;
    font-weight: 400;
    font-size: calc(8px + 0.5rem);
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    margin: auto;
    margin-top: calc(14px + 2rem);
    transition: .3s;
}

.news_more:hover{
    background: #EC1F24;
}