#banner {
    width: 100%;
    height: 800px;
    background: #F5F5F5;
}

.banner-p, .banner-img {
    width: 50%;
    float: left;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .banner-img img {
        max-height: 80%;
    }

    .banner-p h3 {
        font-size: 50px;
    }

    .banner-p p {
        font-size: 16px;
    }

    .banner-p a {
        display: inline-block;
        width: 130px;
        height: 50px;
        line-height: 50px;
        border: 1px solid #222;
        border-radius: 8px;
        text-align: center;
        margin-top: 20px;
        text-decoration: none;
        color: #222;
    }

.direction {
    position: relative;
    width: 100%;
    margin: 80px 0 50px 0;
}

    .direction .navigation {
        position: absolute;
        top: 0;
        right: 0;
        width: 115px;
    }

    .direction h3 {
        font-size: 35px;
        font-weight: 500;
    }

a.circle {
    display: inline-block;
    width: 50px;
    height: 50px;
    /*border-radius: 50%;*/ /* 或 border-radius: 50px; */
    /*border: 3px solid #014899;*/
    /* background: #fff;
    font-size: 30px;
    font-weight: 400;
    color: #014899;
    text-align: center;*/
}

    a.circle.swiper-button-disabled {
        /*color: #DBDBDB;
        border: 3px solid #DBDBDB;*/ /* 或其他你想要的颜色 */
    }

    a.circle:hover {
        cursor: pointer;
    }

    a.circle.swiper-button-disabled:hover {
        cursor: default;
    }

#preProd {
    background: url('/image/icon1/left2.png') no-repeat 0px 1px;
}

    #preProd.swiper-button-disabled {
        background: url('/image/icon1/left1.png') no-repeat 0px 1px;
    }

#nextProd {
    background: url('/image/icon1/right2.png') no-repeat 0px 1px;
    position:absolute;
    right:1px;
}

    #nextProd.swiper-button-disabled {
        background: url('/image/icon1/right1.png') no-repeat 0px 1px;
    }

#preSolu {
    background: url('/image/icon1/left2.png') no-repeat 0px 1px;
}

    #preSolu.swiper-button-disabled {
        background: url('/image/icon1/left1.png') no-repeat 0px 1px;
    }

#nextSolu {
    background: url('/image/icon1/right2.png') no-repeat 0px 1px;
    position: absolute;
    right: 1px;
}

    #nextSolu.swiper-button-disabled {
        background: url('/image/icon1/right1.png') no-repeat 0px 1px;
    }

#recommend {
    width: 80%;
    /*height: 1000px;*/
    margin-top: 80px;
    /*display: flex;
    justify-content: space-between;*/
}

    #recommend ul {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #recommend li {
        list-style: none;
        width: 100%;
        height: 300px;
        margin-bottom: 30px;
        /*background: #F5F5F5;*/
        border-radius: 10px;
    }

        #recommend li a {
            display: inline-block;
            text-decoration: none;
            width: 100%;
            height: 100%;
            text-align: center;
            margin-top: 20px;
        }

            #recommend li a h4 {
                margin-top: 1%;
                font-size: 16px;
                color: #022567;
            }

#col2 li {
    height: 465px;
}

    #col2 li a {
        margin-top: 50px;
    }

#prod a.prod-img {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#prod img {
    max-width: 85%;
    height: auto;
    max-height: 240px;
    transition: transform 0.3s ease; /* 平滑的过渡效果 */
}

#prod img:hover {
    transform: scale(1.1); /* 鼠标移入时放大1.2倍 */
}

#prod .swiper-slide {
    background: #F6F7FB;
    border-radius: 20px;
    padding: 0 0 60px 0;
    height:380px;
    position:relative;
}

    #prod h4 {
        position:absolute;
        left:0;
        bottom: 40px;
        width:100%;
        color:#010101;
    }

#solu-wrapper {
    position: relative;
    height:1030px;
    width: 80%;
}
    #solu-wrapper .direction{
        margin-top:85px;
    }


@media (max-width: 1600px) {
    #solu-wrapper {
        height: 860px;
    }

    #prod .swiper-slide {
        height: 320px;
    }
}

@media (max-width: 1368px) {
    #solu-wrapper {
        height: 736px;
    }
    #prod .swiper-slide {
        height: 290px;
    }
}

#solution img {
    border-radius:20px;
    max-width: 100%;
    height: auto;
    max-height: 498px;
    /*transition: transform 0.3s ease;*/ /* 平滑的过渡效果 */
}

#video {
    /*width: 78%;*/
    margin-top: 200px;
}

    #video video {
        background: #000;
    }

        #video video.custom-style::-webkit-media-controls-enclosure {
            display: none;
        }

    #video .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 半透明遮罩层 */
    }

    #video .play {
        position: absolute;
        top: 46.5%;
        left: 48%;
        color: #fff;
        background: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%; 
        cursor:pointer;
    }
.right-triangle {
    width: 0;
    height: 0;
    border-left: 20px solid #333; /* 左边框透明 */
    border-top: 13px solid transparent; /* 上边框设置颜色 */
    border-bottom: 13px solid transparent; /* 下边框设置颜色 */
    border-right: 20px solid transparent; /* 右边框设置颜色和宽度，形成三角形的底边 */
    position:absolute;
    top:12px;
    left:19px;
}

/*.custom-style::-webkit-media-controls-enclosure {
    background-color: blue;
    display: none;
}*/

#target {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

    #target img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

#shops {
    width: 80%;
    margin-top: 120px;
    display: flex;
    justify-content: center;
}

    #shops ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        #shops ul li {
            list-style: none;
            width: 7%;
            height: auto;
            background: #F5F5F5;
            border-radius: 10px;
            padding: 0 30px 11px 30px;
        }

        #shops ul a {
            display: inline-block;
            text-decoration: none;
            width: 100%;
            height: 100%;
            text-align: center;
            margin-top: 20px;
        }

            #shops ul a img {
                width: 80%;
            }

            #shops ul a h4 {
                margin-top: 10px;
                font-size: 16px;
                color: #022567;
            }


/*@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        height: 50px;
    }

    .nav-items {
        display: none;
    }

    .menu-btn {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #000;
        cursor: pointer;
    }
}
*/