* {
    margin: 0;
    padding: 0;
}

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

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

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

.banner_swiper {
    width: 100%;
    height: calc(100px + 30rem);
    position: relative;

}

.banner_swiper .mySwiper {
    width: 100%;
    height: 100%;
}

.banner_swiper .mySwiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.banner_swiper .mySwiper .swiper-slide .ban_img {
    width: 100%;
    height: 100%;
}

.ban_text {
    width: max-content;
    height: max-content;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
}

.ban_text p:nth-of-type(1) {
    font-family: TT0142M;
    font-weight: 500;
    font-size: calc(6px + 2rem);
    color: #FFFFFF;
    text-shadow: 0px 0px calc(5px + 0.25rem) rgba(0, 0, 0, 0.4);
    text-align: center;

}

.ban_text p:nth-of-type(2) {
    font-family: Century Gothic;
    font-weight: 400;
    font-size: calc(6px + 1rem);
    color: #FFFFFF;
    text-shadow: 0px calc(0px + 0.2rem) calc(0px + 0.5rem) rgba(0, 0, 0, 0.4);
    text-align: center;

}

.ban_dot_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(0px + 0.5rem);
    position: absolute;
    bottom: calc(2px + 1.5rem);
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
}

.ban_dot {
    width: calc(10px + 1rem);
    height: calc(0px + 0.1rem);
    background: #FFFFFF;
    opacity: 0.7;
    position: relative;
    cursor: pointer;
}

.ban_dot_act {
    width: 0;
    height: 100%;
    background: #E39651;
    position: absolute;
    top: 0;
    animation: bgcolor 4s linear;
    animation-fill-mode: forwards;
}

@keyframes bgcolor {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


.product_box {
    width: 100%;
    padding: calc(29px + 5rem) 0;
}

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


.product_card_box {
    margin-top: calc(16px + 2rem);
    display: flex;
    justify-content: space-between;
}

.product_card_left {
    width: 42%;
    height: calc(200px + 20rem);
    position: relative;
    overflow: hidden;
}

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


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

.product_card_left:hover .product_card_left_text p:nth-of-type(3){
    color: #E39651;
    border-bottom: 1px #E39651 solid;
   
}

.product_card_left_text {
    width: max-content;
    position: absolute;
    bottom: calc(7px + 1.5rem);
    left: 0;
    right: 0;
    margin: auto;
    transition: .5s;
}

.product_card_left_text p:nth-of-type(1) {
    font-family: OPPOSans-B;
    font-weight: normal;
    font-size: calc(4px + 1rem);
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0px calc(0px + 0.1rem) calc(1px + 0.25rem) rgba(17, 16, 15, 0.6);
}

.product_card_left_text p:nth-of-type(2) {
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(8px + 0.5rem);
    color: #FFFFFF;
    line-height: 1;
    margin-top: calc(2px + 1rem);
}

.product_card_left_text p:nth-of-type(3) {
    width: max-content;
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(6px + 0.5rem);
    color: #FFFFFF;
    line-height: 1;
    border-bottom: 1px #fff solid;
    padding-bottom: calc(0px + 0.2rem);
    margin-top: calc(8px + 1rem);
}

.product_card_right {
    width: 58%;
    height: calc(200px + 20rem);
    display: flex;
    justify-content: space-between;
}

.product_card_right a {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product_card_right a .product_card_right_card {
    width: 100%;
    height: 100%;
}

.product_card_right a:nth-of-type(2) .product_card_right_card {
    display: flex;
    flex-flow: column-reverse;
}

.product_card_right_card div:nth-of-type(1) {
    width: 100%;
    height: 50%;
    overflow: hidden;
}

.product_card_right_card div:nth-of-type(1) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.product_card_right_card div:nth-of-type(2) {
    width: 100%;
    height: 50%;
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 calc(8px + 1.5rem);
}


.product_card_right_card div:nth-of-type(2) p:nth-of-type(1) {
    font-family: OPPOSans-B;
    font-weight: normal;
    font-size: calc(4px + 1rem);
    color: #333333;
    line-height: 1;
    transition: .5s;
}

.product_card_right_card div:nth-of-type(2) p:nth-of-type(2) {
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(8px + 0.5rem);
    color: #666666;
    line-height: calc(7px + 1rem);
    margin-top: calc(2px + 1rem);
    transition: .5s;
}

.product_card_right_card div:nth-of-type(2) p:nth-of-type(3) {
    width: max-content;
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(6px + 0.5rem);
    color: #333333;
    line-height: 1;
    border-bottom: 1px #333333 solid;
    padding-bottom: calc(0px + 0.2rem);
    margin-top: calc(8px + 1rem);
    transition: .5s;
}

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

.product_card_right_card:hover div:nth-of-type(2) p:nth-of-type(3) {
    color: #E39651;
    border-bottom: 1px #E39651 solid;
}

.about_box {
    width: 100%;
    padding: calc(13px + 5rem) 0;
    background-color: #F5F5F5;
}

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

.about_card {
    display: flex;
    justify-content: flex-start;
    gap: calc(20px + 3rem);
    margin-top: calc(16px + 2rem);
}

.about_left {
    width: 47.3571%;
    height: calc(47px + 20rem);
    background: url(../images/about_bg.png) no-repeat;
    background-size: 94.5701% 94.5701%;
    position: relative;
}

.about_left img {
    width: 96.2292%;
    height: 94.2292%;
    position: absolute;
    bottom: 0;
    right: 0;
    box-shadow: 0px 0px calc(0px + 0.5rem) 0px rgba(17, 16, 15, 0.1);
}

.about_right {
    width: calc(7px + 30rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(10px + 1rem);
}

.about_right p:nth-of-type(1) {
    font-family: OPPOSans-B;
    font-weight: normal;
    font-size: calc(4px + 1rem);
    color: #000000;
    line-height: 1;
}

.about_right p:nth-of-type(2) {
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(6px + 0.5rem);
    color: #343434;
    line-height: calc(2px + 1.5rem);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.about_right p:nth-of-type(3) {
    width: max-content;
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(6px + 0.5rem);
    color: #343434;
    line-height: 1;
    margin-top: calc(1px + 1.5rem);
    border-bottom: 1px #333333 solid;
    padding-bottom: calc(0px + 0.2rem);
}

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

.factory {
    max-width: 1400px;
    width: 85%;
    margin: auto;
    background: url(../images/fac_bg.png) no-repeat;
    background-size: 45.5%;
    background-position-y: 28%;
}

.factory_title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.factory_title p:nth-of-type(1) {
    font-family: OPPOSans-B;
    font-weight: normal;
    font-size: calc(6px + 1rem);
    color: #000000;
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
}


.factory_title p:nth-of-type(2) {
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(8px + 0.5rem);
    color: #000000;
    line-height: calc(10px + 1rem);
    text-align: right;
    width: 59.8571%;
    margin-top: calc(10px + 1.5rem);
}

.factory_title p:nth-of-type(3) {
    width: max-content;
    font-family: OPPOSans-R;
    font-weight: normal;
    font-size: calc(6px + 0.5rem);
    color: #333333;
    line-height: 1;
    text-align: right;
    margin-top: calc(2px + 3rem);
    border-bottom: 1px #333333 solid;
    padding-bottom: calc(0px + 0.2rem);
}

.fac_swiper {
    width: 100%;
    height: calc(40px + 20rem);
    margin-top: calc(14px + 4rem);
    position: relative;
}

.fac_swiper .mySwiper1 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fac_swiper .mySwiper1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.swiper-pagination {
    position: absolute;
    bottom: calc(4px + 1rem);
    left: 50%;
    transform: translate(-50%) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(9px + 0.5rem);
}

.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #E39651 !important;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1 !important;
}

.reason_box {
    width: 100%;
    padding-top: calc(9px + 5rem);
    padding-bottom: calc(48px + 5rem);
    background: #F5F5F5;
}

.reason_card_box {
    display: flex;
    justify-content: space-between;
    margin-top: calc(16px + 2rem);
}

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

.reason_card {
    width: 33%;
    height: calc(159px + 20rem);
    position: relative;
}

.reason_title {
    width: max-content;
    height: max-content;
    font-family: OPPOSans-B;
    font-weight: normal;
    font-size: calc(4px + 1rem);
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0px calc(0px + 0.1rem) calc(1px + 0.25rem) rgba(17, 16, 15, 0.6);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
    transition: .5s;
}

.reason_mask a{
    width: 100%;
    height: 100%;
    background-color: #00000070;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(8px + 1.5rem);
    opacity: 0;
    transition: .5s;
}



.reason_mask img{
    width: calc(5px + 1.5rem);
    margin-top: calc(8px + 3rem);
}
.reason_card:hover .reason_title{
    bottom: 10%;
    transition: .5s;
}

.reason_card:hover .reason_mask a{
    opacity: 1;

}