* {
    margin: 0;
    padding: 0;
}

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

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

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

.banner {
    width: 100%;
    background-color: #ffffff;
}

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

.banner_text_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: calc(50px + 10rem);

}

.banner_text_box p:nth-of-type(1) {
    font-family: FuturaBT, FuturaBT;
    font-weight: 500;
    font-size: calc(4px + 2rem);
    color: #FFFFFF;
}

.banner_text_box p:nth-of-type(2) {
    font-family: PINGFANG;
    font-weight: 600;
    font-size: calc(3px + 3rem);
    color: #FFFFFF;
}

.banner_text_box p:nth-of-type(2) span {
    font-family: Arial_black;
    font-weight: 900;
    font-size: calc(60px + 5rem);
    letter-spacing: 2px;
}

.banner_text_box p:nth-of-type(3) {
    font-family: DIN_REGULAR;
    font-weight: 400;
    font-size: calc(4px + 1rem);
    color: #FFFFFF;
    padding-right: 60%;
}

.learn_more {
    width: calc(53px + 5rem);
    margin-top: calc(8px + 3rem);
}

.banner2_text_card {
    width: calc(191px + 20rem);
    height: calc(16px + 15rem);
    background: #FFFFFF;
    opacity: 0.7;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: calc(78px + 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(6px + 0.5rem);
    padding: 0 calc(1px + 5rem);
}

.banner2_text_card p:nth-of-type(1) {
    font-family: Century Gothic;
    font-weight: bold;
    font-size: calc(6px + 1.5rem);
    color: #333333;
}

.banner2_text_card p:nth-of-type(2) {
    font-family: Century Gothic;
    font-weight: 400;
    font-size: calc(10px + 0.5rem);
    color: #333333;
    line-height: calc(10px + 1rem);
    text-align: center;
}

.banner2_text_card a .banner_learn_more {
    width: max-content;
    font-family: Century Gothic;
    font-weight: 400;
    font-size: calc(10px + 0.5rem);
    color: #333333;
    border-bottom: 1px #7c7c7c solid;
}

.learn_more img {
    width: 100%;
}

.products_box {
    width: 100%;
    padding-top: calc(26px + 5rem);
    background-color: #ffffff;
}

.products {
    max-width: 1400px;
    width: 85%;
    margin: auto;
}

.products_card_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(8px + 1.5rem);
    margin-top: calc(10px + 3rem);
}

.products_card_box a {
    width: 48.5714%;
    height: calc(60px + 20rem);
}

.products_card {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

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

.products_card img:hover {
    transform: scale(1.2);
}

.products_card_title {
    width: 100%;
    height: calc(20px + 2rem);
    background: #62928290;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(4px + 2rem);
}

.products_card_title p {
    font-family: PINGFANG;
    font-weight: bold;
    font-size: calc(10px + 0.5rem);
    color: #FFFFFF;

}

.products_card_title .xiejt {
    width: calc(3px + 1rem);
    height: calc(3px + 1rem);
}

.advantage_box {
    width: 100%;
    padding-bottom: calc(30px + 5rem);
    background-image: linear-gradient(to bottom, #ffffff 50%, transparent 50%);

}

.advantage {
    max-width: 1400px;
    width: 85%;
    margin: auto;
    overflow: hidden;
}

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

.advantage_card {
    width: 31.8571%;
    height: calc(80px + 20rem);
    background-image: linear-gradient(to bottom, #F5F5F5 30%, rgba(245, 245, 245, 0.9) 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: calc(2px + 0.5rem);
    padding-top: calc(5px + 4rem);
}

.advantage_icon_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.adv_icon {
    width: calc(14px + 5rem);
    height: calc(14px + 5rem);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.adv_icon img {
    width: 100%;
    height: 100%;
}

.adv_line {
    width: 1px;
    height: calc(6px + 1.5rem);
    background: #629282;
}

.advantage_card p:nth-of-type(1) {
    font-family: PINGFANG;
    font-weight: 800;
    font-size: calc(2px + 1rem);
    color: #333333;
    opacity: 0.9;
}

.advantage_card p:nth-of-type(2) {
    width: calc(30px + 15rem);
    font-family: PINGFANG;
    font-weight: 500;
    font-size: calc(8px + 0.5rem);
    color: #000000;
    line-height: calc(10px + 1rem);
    opacity: 0.9;
    text-align: center;
    margin-top: calc(10px + 0.5rem);
}

.story_box {
    width: 100%;
    padding: calc(42px + 5rem) 0;
    background-color: #ffffff;
    margin-top: calc(60px + 5rem);
}

.story {
    max-width: 1400px;
    width: 85%;
    margin: auto;
}

.story_content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: calc(10px + 3rem);
}

.story_pic {
    width: 50%;
    /* height: calc(20px + 20rem); */
}

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

.story_intro {
    width: 50%;
    /* height: calc(20px + 20rem); */
    background: #62928210;
    padding: calc(10px + 2rem) calc(9px + 1.5rem);

}

.story_intro_title p {
    font-family: PINGFANG;
    font-weight: 800;
    font-size: calc(4px + 1rem);
    color: #629282;
}

.story_intro_title div {
    width: calc(20px + 4rem);
    height: 2px;
    background: #629282;
    margin-top: calc(5px + 0.25rem);
}

.story_intro_text p {
    font-family: PINGFANG;
    font-weight: 500;
    font-size: calc(6px + 0.5rem);
    color: #333333;
    line-height: calc(10px + 1rem);
    text-align: justify;
    padding-top: calc(10px + 0.5rem);
}

.story_more {
    width: max-content;
    font-family: PINGFANG;
    font-weight: 500;
    font-size: calc(6px + 0.5rem);
    color: #333333;
    border-bottom: 1px #757575 solid;
    margin-top: calc(10px + 0.25rem);
}


.contact_box {
    width: 100%;
    padding: calc(30px + 5rem) 0;
    background-color: #F9F9F9;


}

.contact {
    max-width: 1400px;
    width: 85%;
    margin: auto;

}

.contact_content {
    width: 100%;
    height: calc(100px + 20rem);
    background: url(../images/contact_bg.png) no-repeat;
    background-size: cover;
    margin-top: calc(10px + 3rem);
    position: relative;
}

.contact_card {
    width: calc(95px + 10rem);
    height: calc(38px + 15rem);
    background: #FFFFFF;
    opacity: 0.8;
    position: absolute;
    right: calc(2px + 4rem);
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(5px + 1.5rem);

}

.contact_card p:nth-of-type(1) {
    font-family: Futura Md BT;
    font-weight: 500;
    font-size: calc(2px + 1rem);
    color: #333333;

}

.contact_card p:nth-of-type(2) {
    width: calc(58px + 10rem);
    font-family: PINGFANG;
    font-weight: 500;
    font-size: calc(10px + 0.5rem);
    color: #333333;
    line-height: calc(10px + 1rem);
    text-align: center;
}

.contact_card a .contact_more {
    width: max-content;
    font-family: PINGFANG;
    font-weight: 500;
    font-size: calc(6px + 0.5rem);
    color: #333333;
    border-bottom: 1px #888888 solid;
    margin-top: calc(5px + 2rem);
}

.contact_type_box {
    display: flex;
    justify-content: space-around;
    margin-top: calc(8px + 2rem);
}

.contact_type {
    width: calc(18px + 15rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: calc(10px + 0.5rem);
}

.contact_type_icon {
    font-family: PINGFANG;
    font-weight: bold;
    font-size: calc(10px + 0.5rem);
    color: #333333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(5px + 0.25rem);

}

.contact_type_icon img {
    width: calc(6px + 1.5rem);
}

.contact_type_con {
    font-family: PINGFANG;
    font-weight: 500;
    font-size: calc(6px + 0.5rem);
    color: #333333;
    line-height: calc(8px + 1rem);
    text-align: center;
}
.contact_type:nth-of-type(3) .contact_type_con{
    padding-left: calc(5px + 0.25rem);
}

.bg {
    width: 100%;
    height: 100vh;
    background: url(../images/advantage_bg.png) no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    z-index: -1;
}