.aboutus-banner {
    position: relative;
    height: 800px;
    width: 100%;
}

.banner-video video {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.banner-introduction {
    position: relative;
    z-index: 1;
    padding-top: 340px;
    padding-left: 200px;
    color: #fff;
}

    .banner-introduction .title {
        font-size: 4rem;
        margin-bottom: 0.2rem;
    }

    .banner-introduction .btn {
        margin-top: 50px;
        font-size: 4rem;
        background-color: #009ce1;
        font-size: 1.5rem;
        color: #fff;
        text-align: left;
        line-height: 0.5rem;
        border-radius: 25rem;
        padding: 10px 10px 10px 10px;
    }

        .banner-introduction .btn a {
            color: #fff;
        }

.about {
    background-color: #f4f4f4;
    border-radius: 8px;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 100px;
}

.experience {
    background-image: url("/imgs/weabg.png");
    background-size: 100%;
    background-position: top center;
    padding: 50px;
    background-color: #f4f4f4;
}

    .experience .content {
        padding-top: 5rem;
    }

        .experience .content .item {
            overflow: hidden;
            margin-bottom: 4rem;
        }

            .experience .content .item .pic {
                width: 36rem;
                height: 28rem;
            }

                .experience .content .item .pic img {
                    width: 100%;
                    height: 100%;
                }

            .experience .content .item:nth-of-type(1) .info {
                padding-right: 1.5rem;
            }

                .experience .content .item:nth-of-type(1) .info::after {
                    right: 1.1rem;
                }

            .experience .content .item:nth-of-type(2) .info {
                padding-left: 3rem;
            }

                .experience .content .item:nth-of-type(2) .info::before {
                    left: 0.3rem;
                }

            .experience .content .item:nth-of-type(3) .info {
                padding-right: 0.3rem;
            }

                .experience .content .item:nth-of-type(3) .info::after {
                    right: 0.3rem;
                }

            .experience .content .item .info {
                width: 33rem;
                position: relative;
                padding-left: 5rem;
                padding-top: 5rem;
            }

                .experience .content .item .info::after,
                .experience .content .item .info::before {
                    display: block;
                    content: "";
                    width: 2rem;
                    height: 2rem;
                    position: absolute;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-position: center;
                }

                .experience .content .item .info::before {
                    background-image: url("/imgs/ab1.png");
                    top: 5rem;
                    left: 0;
                }

                .experience .content .item .info::after {
                    background-image: url("/imgs/ab2.png");
                    bottom: 0rem;
                    right: 0;
                }

                .experience .content .item .info h1 {
                    font-weight: normal;
                    font-size: 2.4rem;
                    line-height: 1;
                    color: #85c023;
                    padding-top: 4rem;
                    margin-bottom: 2rem;
                }

                .experience .content .item .info p {
                    font-size: 1.4rem;
                    color: #666;
                    line-height: 1.6;
                }

.fr {
    float: right;
}

.fl {
    float: left;
}




.paragraph {
    margin-bottom: 100px;
}

    .paragraph p {
        font-size: 1.2rem;
    }

.about-us-banner {
    position: relative;
    color: #FFF;
    padding: 50px 0;
}



/* 设置带有特定ID的banner的背景图像 */
#banner_23836 {
    background-image: url('/images/about/Img_1637125299.png');
    background-size: cover;
    background-position: center;
    height: 390px;
}

#banner_history {
    /*background-image: url('/images/about/titleewer.png');
    background-size: cover;
    background-position: center;
    height: 390px;*/
}

#banner_csr {
    /*background-image: url('/images/about/csr.png');*/
    background-color: #18864a;
    background-size: cover;
    background-position: center;
    
}

/* banner中的标题样式 */
.banner__heading {
    font-size: 80px;
    margin-bottom:  0px;
    font-weight: bold;
    text-align: left;
}

    .banner__heading p {
        font-size: 40px;
        color: #fff;
    }

/* banner中的段落样式 */
.banner__paragraph p {
    font-size: 30px;
    margin-top: 20px;
    text-align: left;
    color: #fff;
}

/* 为sCurve__item设置基础样式 */
.sCurve__item {
    display: flex;
    margin-top: 200px;
    align-items: center;
    /* 垂直居中 */
    justify-content: space-between;
}

    /* 设置文本列的样式 */
    .sCurve__item .sCurveLeft {
        align-items: center;
        justify-content: space-between;
        padding-left: 100px;
        padding-right: 50px;
        padding-top: 50px;
    }

        /* 设置标题样式 */
        .sCurve__item .sCurveLeft .sCurve__heading p {
            font-size: 32px;
            font-weight: 700;
            color: #242728;
            margin-bottom: 0.5em;
        }

        /* 设置段落样式 */
        .sCurve__item .sCurveLeft .sCurve__paragraph p {
            font-size: 1.2rem;
            color: #666;
            padding-right: 100px;
        }



    /* 设置图片列的样式 */
    .sCurve__item .sCurveRight {
        padding-left: 100px;
    }

/* 为图片设置样式 */
.sCurveRight img {
    width: 600px;
    display: block;
    border-radius: 5px;
}

/* 添加装饰横线 */
.sCurveRight::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 150px;
    width: 80%;
    height: 6px;
    /* 横线高度 */
    background: linear-gradient(to right, #ff0000 0%, #0000ff 100%);
}

.sCurveRight::after {
    content: "";
    position: absolute;
    left: 200px; /* 定位到容器的右侧 */
    bottom: -10px;
    width: 700px; /* 背景图的宽度，根据实际图像大小调整 */
    height: 800px; /* 背景图的高度，根据实际图像大小调整 */
    background: url('/images/about/trameOdd.png') no-repeat;
    background-size: contain; /* 背景图大小设置为包含，确保图像完整显示 */
    background-position: right bottom; /* 背景图定位到右下角 */
    z-index: -1;
}


/* 设置文本列的样式 */
.sCurve__item .sCurveLeft2 {
    align-items: center;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 50px;
    padding-top: 80px;
}

    /* 设置标题样式 */
    .sCurve__item .sCurveLeft2 .sCurve__heading p {
        font-size: 32px;
        color: #000;
        margin-bottom: 0.5em;
    }

    /* 设置段落样式 */
    .sCurve__item .sCurveLeft2 .sCurve__paragraph p {
        font-size: 1.2rem;
        color: #666;
        padding-right: 100px;
    }


.sCurve__item .sCurveRight2 {
    padding-left: 100px;
}

/* 为图片设置样式 */
.sCurveRight2 img {
    width: 600px;
    display: block;
    /* 图片以块级元素显示，去除底部间隙 */
}

/* 添加装饰横线 */
.sCurveRight2::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 20px;
    width: 80%;
    height: 6px;
    /* 横线高度 */
    background: linear-gradient(to right, #ff0000 0%, #0000ff 100%);
}

.sCurveRight2::after {
    content: "";
    position: absolute;
    left: 0; /* 定位到容器的右侧 */
    bottom: -10px;
    width: 700px; /* 背景图的宽度，根据实际图像大小调整 */
    height: 800px; /* 背景图的高度，根据实际图像大小调整 */
    background: url('/images/about/trameOdd.png') no-repeat;
    background-size: contain; /* 背景图大小设置为包含，确保图像完整显示 */
    background-position: right bottom; /* 背景图定位到右下角 */
    z-index: -1;
}

.about5 {
    margin-top: 200px;
    align-items: center;
    margin-bottom: 100px;
}

/* Style for the card with no border */
.card {
    border: 0;
    position: relative;
    overflow: visible; /* To show the star image outside the card */
    padding-top: 50px; /* Adjust based on the size of the star image */
}

/* Style for the card image container */
.card-img-container {
    position: absolute;
    top: -60px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    width: 300px; /* Size of the star image */
    z-index: 10;
    transition: top 0.3s; /* Animation for the star image */
}

/* Style for the card body with border */
.card-body.with-border {
    border: 1px solid #dee2e6; /* Bootstrap's border color */
    border-radius: 0.25rem;
    background-color: #fff; /* Initial background color */
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

    /* Add a pseudo-element for the hover effect */
    .card-body.with-border::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -100%; /* Start from the left */
        width: 100%; /* Full width of the card */
        height: 100%; /* Full height of the card */
        background-color: #e9ecef; /* The color we want to transition to */
        transition: left 0.5s; /* Transition for the pseudo-element movement */
        z-index: 0;
    }

/* Hover effects */
.card:hover .card-body.with-border::after {
    left: 0; /* Move the pseudo-element to cover the card */
}

.card:hover .card-img-container {
    top: -80px; /* Moves the star image up */
}

/* Ensuring the content of the card is above the pseudo-element */
.card-body.with-border * {
    position: relative;
    z-index: 1;
}

.card-title {
    font-size: 18px;
}

/* Remove bottom margin from the paragraph inside .card-text */
.card-text p {
    font-size: 18px;
    margin-bottom: 0;
}

/* Additional styles for the button */
.btnx {
    background-color: #004085; /* Example button color, adjust as needed */
    color: white;
    transition: background-color 0.3s; /* Transition for button background color */
}

    .btnx:hover {
        background-color: #0056b3; /* Darker button color on hover */
    }




@charset "UTF-8";
 

.numberpaging {
    margin: 0 20px;
}

.numberpaging {
    max-width: 1200px;
    margin-top: 100px;
    text-align: center;
}

    .numberpaging > a.on {
        background: #009ce1;
        color: #fff;
        border: 1px solid #009ce1;
    }

    .numberpaging > a {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        line-height: 30px;
        border: 1px solid #ddd;
        margin: 0 3px;
        text-align: center;
        vertical-align: top;
        background: #fff;
    }

.history-hd {
    position: relative;
    background: url(/images/about/banner_new_cn.jpg) no-repeat;
    background-position: center;
    background-size: auto 100%;
}


    .history-hd > div {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        height: 365px;
    }

        .history-hd > div > p {
            position: absolute;
            display: inline-block;
            bottom: -21px;
            right: 20px;
            font-size: 70px;
            color: #d3dbde;
        }

.history-li {
    position: relative;
    margin-top: -145px;
    background: url(/images/about/bg_grey_line.png) repeat-y center
}

    .history-li .titset {
        position: relative;
        top: -63px;
        text-align: center
    }

        .history-li .titset h3 {
            color: #009ce1;
            margin-bottom: 20px
        }

        .history-li .titset .line-bk {
            background: #fff
        }

            .history-li .titset .line-bk:hover {
                color: #009ce1
            }

    .history-li .hisset {
        max-width: 1200px;
        margin: 0 auto;
    }

        .history-li .hisset > ul {
            margin: 180px 20px 0px
        }

            .history-li .hisset > ul:after {
                content: " ";
                display: block;
                clear: both
            }

            .history-li .hisset > ul > li {
                display: inline-block;
                float: left;
                width: 50%;
                margin: 70px 0px
            }

                .history-li .hisset > ul > li > div:after {
                    content: " ";
                    display: block;
                    clear: both
                }

                .history-li .hisset > ul > li .point {
                    display: inline-block;
                    float: left;
                    width: 18%;
                    height: 6px;
                    background: url(/images/about//img_about_history01.png) no-repeat right 1px center;
                    transform: rotate(180deg);
                    position: relative;
                    right: 5px
                }

                .history-li .hisset > ul > li .dataset {
                    position: relative;
                    right: 5px;
                    display: inline-block;
                    float: right;
                    width: 82%
                }

                    .history-li .hisset > ul > li .dataset * {
                        text-align: left;
                    }

                    .history-li .hisset > ul > li .dataset .img {
                        margin-top: -20%
                    }

                        .history-li .hisset > ul > li .dataset .img img {
                            width: 100%;
                            max-width: 400px
                        }

                    .history-li .hisset > ul > li .dataset .date {
                        margin: 20px 0px 7px;
                        font-weight: 600;
                        font-size: 30px;
                    }

                    .history-li .hisset > ul > li .dataset .txt {
                        word-break: keep-all;
                        font-size: 14px;
                    }

                .history-li .hisset > ul > li:nth-child(1) * {
                    text-align: right
                }

                .history-li .hisset > ul > li:nth-child(1) {
                    margin-top: 0px;
                }

                .history-li .hisset > ul > li:nth-child(2n+3) {
                    margin-top: 0px;
                    clear: both
                }

                    .history-li .hisset > ul > li:nth-child(2n+3) .dataset * {
                        text-align: right
                    }

                .history-li .hisset > ul > li:nth-child(1) .point {
                    float: right;
                    transform: rotate(0deg);
                    left: 4px
                }

                .history-li .hisset > ul > li:nth-child(1) .dataset {
                    float: left;
                    left: 4px;
                }

                .history-li .hisset > ul > li:nth-child(2n+3) .point {
                    float: right;
                    transform: rotate(0deg);
                    left: 4px
                }

                .history-li .hisset > ul > li:nth-child(2n+3) .dataset {
                    float: left;
                    left: 4px;
                }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.play {
    width: 54px;
    height: 54px; /* 确保宽度和高度相等以形成完美的圆形 */
    display: inline-block; /* 将元素设置为块级元素，以便应用宽高 */
    border-radius: 50%; /* 使元素呈圆形 */
    border: 2px solid transparent; /* 设置初始透明边框 */
    background-color: transparent; /* 设置初始透明背景 */
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; /* 过渡效果 */
}

    .play:hover {
        transform: scale(1.1); /* 鼠标悬停时放大 */
        border-color: #009ce1; /* 鼠标悬停时变为白色边框 */
        background-color: rgba(255, 255, 255, 0.5); /* 鼠标悬停时添加半透明白色背景 */
    }

    .play img {
        width: 100%;
        height: auto; /* 保持图片的宽高比 */
        border-radius: 50%; /* 使图片也呈圆形 */
    }