.single-portfolio-box {
    margin-bottom: 30px;
    text-align: center;
    background-color: #f5fbfe;
    -webkit-transition: 0.5s;
    border: 0.1px solid #dadada;
    transition: border 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .single-portfolio-box .image {
        border-radius: 5px 5px 0 0;
    }

        .single-portfolio-box .image img {
            border-radius: 5px 5px 0 0;
            width: 100%;
        }

    .single-portfolio-box .image {
        border-radius: 5px 5px 0 0;
    }

    .single-portfolio-box .content {
        text-align: left;
        padding: 25px 25px 20px;
        border-radius: 0 0 5px 5px;
        position: relative;
    }

        .single-portfolio-box .content .learnmore {
            color: #ffffff;
            background-image: linear-gradient(to right, #85c023, #009ce1);
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            text-align: center;
            transition: background-color 0.5s, color 0.5s;
            text-decoration: none;
            display: inline-block;
        }

        .single-portfolio-box .content h3 {
            margin-bottom: 0;
            -webkit-transition: 0.5s;
            transition: 0.5s;
            font-size: 18px;
            height: 60px;
        }

        .single-portfolio-box .content span {
            display: block;
            color: #009ce1;
            -webkit-transition: 0.5s;
            transition: 0.5s;
            font-weight: 600;
            margin-top: 6px;
        }

        .single-portfolio-box .content .link-btn {
            width: 40px;
            height: 40px;
            line-height: 32px;
            text-align: center;
            background-color: #009ce1;
            -webkit-transition: 0.5s;
            transition: 0.5s;
            color: #f5fbfe;
            border-radius: 3px;
            position: absolute;
            font-size: 25px;
            right: 20px;
            top: -20px;
            display: inline-block;
            border: 0.1px solid #dadada;
        }

    .single-portfolio-box .content {
        text-align: left;
        padding: 25px 25px 20px;
        border-radius: 0 0 5px 5px;
        position: relative;
        background-color: #fff;
    }

    .single-portfolio-box a {
        color: #6b6e71;
    }

        .single-portfolio-box a:hover {
            color: #6b6e71;
            text-decoration: none;
        }

    .single-portfolio-box:hover .content .link-btn {
        color: #009ce1;
        background-color: #f5fbfe;
    }

.flaticon-next-button:before {
    content: "\f101";
}

.single-portfolio-box:hover {
    background-color: #009ce1;
}

    .single-portfolio-box:hover .content {
        background-color: #f5fbfe;
    }

        .single-portfolio-box:hover .content h3 {
            color: #fff;
        }

            .single-portfolio-box:hover .content h3 a {
                color: #6b6e71;
                text-decoration: none;
            }

        .single-portfolio-box:hover .content span {
            color: #fff;
        }

.product {
    margin-top: 30px;
}

.portfolio-area {
    overflow: hidden;
}

    .portfolio-area .section-title {
        text-align: left;
        max-width: 655px;
        margin-left: 0;
        margin-right: 0;
    }

        .portfolio-area .section-title p {
            max-width: 500px;
            margin-left: 0;
            margin-right: 0;
        }

    .portfolio-area .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .portfolio-area.section-title-center .section-title {
        text-align: center;
        max-width: 695px;
        margin-left: auto;
        margin-right: auto;
    }

        .portfolio-area.section-title-center .section-title p {
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

    .portfolio-area.no-space .row {
        margin-left: 0;
        margin-right: 0;
    }

        .portfolio-area.no-space .row .col-lg-3 {
            padding-left: 0;
            padding-right: 0;
        }

    .portfolio-area.no-space .single-portfolio-item {
        margin-bottom: 0;
        border-radius: 0;
    }

        .portfolio-area.no-space .single-portfolio-item .image {
            border-radius: 0;
        }

            .portfolio-area.no-space .single-portfolio-item .image img {
                border-radius: 0;
            }

        .portfolio-area.no-space .single-portfolio-item .content {
            border-radius: 0;
            border-right: 1px solid #ecf5fe;
        }

    .portfolio-area.no-space .single-portfolio-box {
        border-radius: 0;
        margin-bottom: 0;
    }

        .portfolio-area.no-space .single-portfolio-box .image {
            border-radius: 0;
        }

            .portfolio-area.no-space .single-portfolio-box .image img {
                border-radius: 0;
            }

        .portfolio-area.no-space .single-portfolio-box .content {
            border-radius: 0;
            border-right: 1px solid #ecf5fe;
        }

.main-title {
    max-width: 1200px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

    .main-title .sub-title {
        display: block;
        margin-bottom: 12px;
        color: #009ce1;
        text-transform: uppercase;
        font-size: 15.5px;
        font-weight: 700;
    }

    .main-title h2 {
        margin-bottom: 0;
        font-size: 42px;
    }

    .main-title p {
        max-width: 600px;
        font-size: 16px;
        font-weight: 600;
        margin-left: auto;
        margin-right: auto;
        margin-top: 12px;
    }

.productde {
    text-align: center; /* Center the image inside the .productde div if it's smaller than the container */
}

.proimg {
    max-width: 100%; /* Ensures the container doesn't overflow its parent */
    overflow: hidden; /* This will hide any parts of the image that might overflow after resizing */
}

.product-image {
    max-width: 100%; /* This will ensure the image doesn't stretch out of its container */
    max-height: 350px; /* Adjust this value based on your desired maximum height */
    display: block; /* This ensures any margin collapse or other issues won't affect it */
    margin: 0 auto; /* This will center the image if it's smaller than its container */
}

.shop-details-thumb {
    position: relative;
}

.thumb-tabs {
    background: #fff;
    padding: 50px;
    border-radius: 5px;
    filter: drop-shadow(0 0 15px rgba(218, 218, 218, 0.3));
}

.shop-details-thumb img {
    width: 100%;
    border-radius: 4px;
    filter: drop-shadow(0 0 15px rgba(218, 218, 218, 0.3));
}

.product-main .product-short p {
    font-size: 16px;
    margin: 0px;
}

.product-short p {
    font-size: 16px;
    margin-bottom: calc(30rem / 21.333);
    line-height: calc(30rem / 21.333);
    font-family: lato;
    color: #414344;
}

.sf-share-counts {
    margin-left: 20px;
    padding: 20px 0;
}

    .sf-share-counts .sf-share-img {
        width: 24px;
        height: 24px;
    }

    .sf-share-counts .share-text {
        display: inline-block;
        margin: 0 25px 0 0;
        line-height: 28px;
    }

    .sf-share-counts a {
        margin-right: 20px;
        font-size: 24px;
        opacity: 0.6;
        line-height: 28px;
        display: inline-block;
    }

.fab {
    color: #414344;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

.vps-hosting-pricing-table {
    overflow: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-collapse: unset;
    border-spacing: 0 10px;
}

    .vps-hosting-pricing-table > thead {
        background-color: transparent;
    }

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    text-align: center;
}

.vps-hosting-pricing-table > thead > tr > th {
    border: none;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
    font-family: "Poppins", sans-serif;
}

.vps-pricing-row {
    text-align: left;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border: solid 1px #ebebeb;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.vps-hosting-pricing-table > tbody > tr > td {
    padding: 20px 20px;
    border-right: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

/* line 2919, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table {
    overflow: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-collapse: unset;
    border-spacing: 0 10px;
}

/* line 2927, src/assets/scss/custom/_style.scss */
.domain-search-result-table {
    border-collapse: collapse;
}

/* line 2930, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table > thead {
    background-color: transparent;
}

/* line 2934, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table.vps-hosting-pricing-table-two {
    border-collapse: collapse;
}

/* line 2947, src/assets/scss/custom/_style.scss */
.vps-pricing-row {
    text-align: left;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border: solid 1px #ebebeb;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

    /* line 2956, src/assets/scss/custom/_style.scss */
    .vps-pricing-row > td:first-child {
        border-left: 2px solid transparent;
        border-radius: 4px 0 0 4px;
    }

    /* line 2961, src/assets/scss/custom/_style.scss */
    .vps-pricing-row > td:last-child {
        border-right: 2px solid transparent;
        border-radius: 0 4px 4px 0;
        text-align: right;
    }

/* line 2967, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table > tbody > tr.vps-pricing-row:hover {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}

/* line 2972, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table-two > thead {
    background: #035ded;
    color: #ffffff;
}

    /* line 2977, src/assets/scss/custom/_style.scss */
    .vps-hosting-pricing-table-two > thead > tr > th:last-child {
        border-right: 1px solid #035ded;
    }

/* line 2981, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table-two .vps-pricing-row > td:first-child {
    border-left: initial;
}

/* line 2985, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table-two .vps-pricing-row > td:last-child {
    border-right: initial;
}

/* line 2989, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table-two > tbody > tr.vps-pricing-row:hover {
    background: #f5f5f5;
    border: none;
}

/* line 2994, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table > tbody > tr > td {
    padding: 20px 20px;
    border-right: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

 

/* line 3002, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table.domain-search-result-table > tbody > tr > td {
    font-size: 14px;
}

/* line 3005, src/assets/scss/custom/_style.scss */
.vps-pricing-row > td {
    border: none;
}

/* line 3009, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table .rate {
    font-size: 20px;
    font-weight: 700;
    color: #035ded;
    font-family: "Poppins", sans-serif;
}

    /* line 3016, src/assets/scss/custom/_style.scss */
    .vps-hosting-pricing-table .rate span {
        font-size: 12px;
        font-weight: 600;
        margin-left: 5px;
        opacity: 0.8;
        color: #757575;
    }

/* line 3024, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table .score-bar-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* line 3035, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table .geekbench-score {
    font-weight: 400;
    margin-right: 15px;
}

/* line 3040, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table .score-bar-wrap .score-bar-item {
    min-width: 40px;
    height: 10px;
    font-size: 10px;
    border-radius: 10px;
    background-color: #ebebeb;
    position: relative;
}

/* line 3049, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table .pricing-onsale,
.vps-hosting-pricing-table .cpu-core {
    display: block;
    font-size: 14px;
    color: #757575;
    margin-top: 4px;
    font-weight: 400;
}

/* line 3057, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table > tbody > tr > td:first-child::before {
    content: attr(data-value);
    display: none;
    width: initial;
    height: initial;
    background-color: transparent;
    position: relative;
    left: initial;
    top: initial;
    opacity: 1;
}

/* line 3069, src/assets/scss/custom/_style.scss */
.vps-pricing-row > td:before {
    content: attr(data-value);
    display: none;
}

/* line 3074, src/assets/scss/custom/_style.scss */
table > tbody > tr > td:first-child:before {
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    background-color: #035ded;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    /* line 3090, src/assets/scss/custom/_style.scss */
    .vps-hosting-pricing-table > thead {
        display: none;
    }
    /* line 3094, src/assets/scss/custom/_style.scss */
    .vps-pricing-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 4px;
        width: 45%;
        float: left;
        margin: 0 15px 28px 15px;
    }
    /* line 3110, src/assets/scss/custom/_style.scss */
    .vps-hosting-pricing-table > tbody > tr {
        padding: 15px;
    }
        /* line 3113, src/assets/scss/custom/_style.scss */
        .vps-hosting-pricing-table > tbody > tr > td {
            padding: 10px 15px;
            font-size: 14px;
            font-weight: normal;
        }
    /* line 3119, src/assets/scss/custom/_style.scss */
    .vps-pricing-row:hover.border-accent-primary > td:first-child {
        margin-bottom: 0;
        border-radius: 0;
        border-left: none;
    }
    /* line 3125, src/assets/scss/custom/_style.scss */
    .vps-pricing-row > td:first-child {
        border-left: none;
        border-radius: 0;
    }
    /* line 3130, src/assets/scss/custom/_style.scss */
    .vps-hosting-pricing-table > tbody > tr > td:first-child::before {
        display: block;
        width: 45%;
    }
    /* line 3135, src/assets/scss/custom/_style.scss */
    .vps-pricing-row > td:before {
        display: block;
        width: 45%;
    }
    /* line 3140, src/assets/scss/custom/_style.scss */
    .vps-hosting-pricing-table > tbody > tr > td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    /* line 3151, src/assets/scss/custom/_style.scss */
    .vps-pricing-row > td:last-child::before {
        display: none;
    }
    /* line 3155, src/assets/scss/custom/_style.scss */
    .vps-pricing-row > td:last-child {
        text-align: center !important;
        margin: auto;
    }
}

@media (max-width: 768px) {
    /* line 3163, src/assets/scss/custom/_style.scss */
    .vps-pricing-row {
        width: 100%;
        float: none;
        margin-left: auto;
        margin-bottom: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* line 3171, src/assets/scss/custom/_style.scss */
    .vps-pricing-row td a.primary-solid-btn {
        padding: 8px 12px !important;
    }
}

/*domain search list css*/
/* line 3177, src/assets/scss/custom/_style.scss */
.title-alert span.red {
    color: red;
}

/* line 3180, src/assets/scss/custom/_style.scss */
.title-alert span.success {
    color: green;
}

/* line 3183, src/assets/scss/custom/_style.scss */
.domain-filter-title,
.domain-filter-list li label {
    cursor: pointer;
}

/* line 3186, src/assets/scss/custom/_style.scss */
.domain-filter-list li label {
    display: inline-block;
    width: 100%;
}

    /* line 3190, src/assets/scss/custom/_style.scss */
    .domain-filter-list li label .form-check-input {
        margin-top: 0.53rem;
    }

@media (max-width: 1199.98px) {
    /* line 3194, src/assets/scss/custom/_style.scss */
    .domain-filter-list {
        display: none;
    }
    /* line 3197, src/assets/scss/custom/_style.scss */
    .domain-filter-title h5 span {
        display: block;
    }
}

@media (min-width: 992px) {
    /* line 3203, src/assets/scss/custom/_style.scss */
    .domain-filter-list {
        display: block !important;
    }
    /* line 3206, src/assets/scss/custom/_style.scss */
    .domain-filter-title h5 span {
        display: none !important;
    }
}

/* line 3211, src/assets/scss/custom/_style.scss */
.vps-hosting-pricing-table.alert-table > tbody > tr > td {
    font-size: 18px;
}

/* line 3214, src/assets/scss/custom/_style.scss */
.alert-table tbody tr {
    border-color: #031974;
    border-radius: 4px;
}

/* line 3218, src/assets/scss/custom/_style.scss */
.alert-table .vps-pricing-row > td:first-child {
    border-left: 0;
}

/* line 3221, src/assets/scss/custom/_style.scss */
.alert-table .vps-pricing-row > td:last-child {
    border-right: 0;
}

@media (max-width: 991px) {
    /* line 3225, src/assets/scss/custom/_style.scss */
    .vps-hosting-pricing-table.alert-table > tbody > tr > td {
        display: block;
    }
    /* line 3228, src/assets/scss/custom/_style.scss */
    .alert-table .vps-pricing-row {
        width: 100%;
        margin: 0;
    }
        /* line 3232, src/assets/scss/custom/_style.scss */
        .alert-table .vps-pricing-row > td:last-child {
            margin-left: 0;
        }
}

.table.vps-hosting-pricing-table {
    width: 100% !important; /* 这确保优先级高于其他CSS规则 */
}

.primary-solid-btn {
    /* 设置文本颜色为白色 */
    color: #ffffff;
    /* 背景渐变从蓝色到紫色 */
    background-image: linear-gradient(to right, #85c023, #009ce1);
    /* 添加一些内边距，更加美观 */
    padding: 10px 20px;
    /* 边框设置 */
    border: none;
    border-radius: 5px; /* 可以调整为你喜欢的值 */
    /* 文字大小 */
    font-size: 16px; /* 可以根据需要调整 */
    /* 确保文字居中显示 */
    text-align: center;
    /* 可选: 添加一些过渡效果 */
    transition: background-color 0.5s, color 0.5s;
    /* 其他可能的装饰性属性 */
    text-decoration: none;
    display: inline-block; /* 或者 'block'，根据需要 */
}

    .primary-solid-btn:hover,
    .primary-solid-btn:focus {
        /* 当鼠标悬停或点击按钮时改变渐变方向或颜色 */
        background-image: linear-gradient(to left, #009ce1, #85c023);
        color: #ededed;
    }

/* CSS */
.selected {
    background-color: #009ce1 !important; /* 使用您喜欢的颜色 */
    color: white; /* 根据需要调整文字颜色，确保与背景色形成对比 */
}

.myinput {
    background: #f9f9f9;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #333333;
    padding-right: 55px;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    width: 100%;
    padding: 0 20px;
}

.news-list .item {
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 3rem;
}

    .news-list .item .title {
        position: relative; /* 设置为 relative 以便在此容器内定位伪元素 */
        width: 100%; /* 确保标题元素占据全部可用宽度 */
    }

        .news-list .item .title a {
            color: #6b6e71;
            font-size: 24px;
            display: block; /* 改为 block 元素，让它占据整行 */
            position: relative; /* 保持 relative，这对定位伪元素很重要 */
            line-height: 1.5;
            padding-bottom: 0.5rem; /* 由于 ::after 是绝对定位，因此为它添加一些空间 */
            text-decoration: none;
        }

            .news-list .item .title a::before,
            .news-list .item .title a::after {
                content: "";
                position: absolute;
                left: 0; /* 从左侧开始，确保覆盖整个容器宽度 */
                bottom: -0.5rem; /* 调整位置以适应实际需求 */
                height: 2px;
            }

            .news-list .item .title a::before {
                background: linear-gradient(to right, #009de1, #85c023);
                width: 30%; /* 您可以根据需要调整宽度 */
                z-index: 2;
            }

            .news-list .item .title a::after {
                background-color: #eee;
                width: 100%; /* 这将使背景延伸到整个 .title 容器宽度 */
                z-index: 1; /* 确保这在 ::before 伪元素下面 */
            }

    .news-list .item .info .pic {
        margin-right: 15px; /* space between image and text */
    }

        .news-list .item .info .pic .newsimg {
            border-radius: 4px;
            width: 600px;
            height: 255px;
            object-fit: cover;
            border: 1px solid #a7a6a6;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            max-height: 255px;
        }

        .news-list .item .info .pic .productimg {
            border-radius: 4px;
            width: 450px; /* 固定宽度 */
            height: 300px; /* 固定高度 */
            object-fit: cover; /* 图片将填充整个元素，可能部分图片会被裁剪 */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 阴影效果 */
        }

    .news-list .item .info .con p a {
        color: #727171;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        text-decoration: none;
        font-size: 18px;
    }

    .news-list .item .info .bar .btn {
        color: #ffffff;
        background-image: linear-gradient(to right, #85c023, #009ce1);
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        transition: background-color 0.5s, color 0.5s;
        text-decoration: none;
        display: inline-block;
    }

    .news-list .item .info .con .bar {
        font-size: 0.2rem;
    }

        .news-list .item .info .con .bar .time {
            color: #ccc;
        }

    .news-list .item .info .right img {
        margin-top: 100px;
        width: 20px;
        height: 50px;
    }

.menu-icon {
    margin-left: 5px; /* 或者您需要的任何间距 */
}

.sitem {
    padding-left: 60px;
    font-size: 14px;
}

.sitem1 {
    padding-left: 50px;
    font-size: 16px;
}

/* 修改激活状态下的列表组项的文字颜色 */
.list-group-item.active {
    color: white;
    background-color: #009ce1; /* 默认的Bootstrap蓝色，您可以根据需要更改 */
    border-color: #009ce1; /* 与背景色相同，确保一致性 */
}

/* 以下是可选的，如果您还需要修改鼠标悬停或聚焦状态下的颜色 */
.list-group-item-action:hover,
.list-group-item-action:focus {
    color: #ffffff; /* 鼠标悬停或聚焦时的文字颜色 */
    background-color: #009ce1; /* 鼠标悬停或聚焦时的背景色，选择一个较深的色调 */
}

.sticky-col {
    position: -webkit-sticky; /* 为Safari浏览器提供支持 */
    position: sticky;
    top: 0; /* 表示一旦达到顶部就不再向上滚动 */
    align-self: flex-start; /* 为了在Flex容器中正常工作 */
    z-index: 1020; /* 确保它位于其他内容之上，如果需要可以调整 */
}

.search-div {
    padding: 30px;
    border: 1px solid #ddd;
    position: relative;
}

    .search-div .search-keyword {
        background: #f9f9f9;
        border: 1px solid #ddd;
        font-size: 14px;
        color: #333333;
        padding-right: 55px;
        height: 50px;
        line-height: 50px;
        vertical-align: middle;
        width: 100%;
        padding: 0 20px;
    }

    .search-div .search-button {
        position: absolute;
        right: 30px;
        top: 50%;
        height: 50px;
        width: 50px;
        line-height: 52px;
        margin-top: -25px;
        background: transparent;
        border: none;
        padding: 0;
        color: #333333;
    }



.priduct-summary .title {
    font-weight: 500;
    margin-top: 50px; 
    border-left: 2px solid #009ce1; /* 竖线的样式和颜色 */
    padding-left: 10px; /* 调整竖线与文本之间的距离 */
    height: 60%; /* 竖线的高度与标题文本相同 */
    display: inline-block; /* 让竖线显示为行内元素以避免换行 */
}

.productmainimg {
    border: 1px solid #eee;
}

.priduct-summary {
    padding-left: 50px;
    padding-right: 50px;
}

.con {
    width: 100%;
}


.solution-box {
    margin-bottom: 30px;
    text-align: center;
    background-color: #f5fbfe;
    -webkit-transition: 0.5s;
    border: 0.1px solid #dadada;
    transition: border 0.3s, box-shadow 0.3s;
    border-radius: 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    min-height: 250px;
}

    .solution-box .image {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }



        .solution-box .image img {
            width: 100%;
        }


    .solution-box .content {
        display: block;
        position: absolute;
        bottom: 20px; /* Adjust as needed */
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
    }

        .solution-box .content h5 {
            margin-bottom: 0;
            -webkit-transition: 0.5s;
            transition: 0.5s;
            font-size: 18px;
        }

.product-area {
    padding: 50px;
}

.productrow {
    margin-bottom: 20px;
}

.product-box {
    text-align: center;
    background-color: #f5fbfe;
    -webkit-transition: 0.5s;
    border: 0.1px solid #dadada;
    transition: border 0.3s, box-shadow 0.3s;
    border-radius: 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s, font-size 0.3s;
    margin: 10px;
    overflow: hidden;
}

    .product-box::before {
        content: "\e636"; /* Unicode 字符编码，可以替换为您想要的图标 */
        font-family: iconfont; /* 使用 FontAwesome 图标库，确保已引入对应的字体文件 */
        position: absolute;
        bottom: 20px; /* 距离底部的距离 */
        left: 30px; /* 距离左侧的距离 */
        transform: scale(1); /* 初始尺寸 */
        opacity: 0; /* 默认隐藏图标 */
        transition: opacity 0.3s; /* 添加平滑过渡效果 */
    }

    /* 悬停时显示图标 */
    .product-box:hover::before {
        opacity: 1; /* 显示图标 */
        transform: translate(-10%, -10%) scale(2); /* 放大图标 */
    }

    .product-box:hover {
        transform: translateY(-10px); /* 向上移动10像素 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 增加阴影 */
        font-size: 20px; /* 放大字体 */
        transition: transform 0.3s, box-shadow 0.3s, font-size 0.3s; /* 添加平滑过渡 */
    }


    .product-box .image img {
        width: 100%;
        padding-left: 20px;
        margin-top: 0px;
    }


    .product-box .content {
        display: block;
        position: absolute;
        top: 20px; /* Adjust as needed */
        left: 20px;
        width: 265px;
        transition: 0.5s;
    }

        .product-box .content h5 {
            text-align: left;
            margin-bottom: 0;
            -webkit-transition: 0.5s;
            transition: 0.5s;
            font-size: 22px;
            transition: 0.5s;
        }


.section-title .title .left-line {
    font-size: 2.2vw;
    font-weight: 700;
    color: #242728;
    padding-left: 15px;
    margin-bottom: 35px;
}

    .section-title .title .left-line:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background: #009ce1;
        height: 100%;
        width: 4px;
    }
/*分页控件*/
.paginator {
    font: 16px Arial, Helvetica, sans-serif;
    padding: 0px 10px 0px 30px;
    margin: 0px;
    font-family: 微软雅黑;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 100px;
}

    /* 页面的背景以及字体*/
    .paginator a {
        padding: 1px 6px;
        border: solid 1px #7EC0EE;
        background: url(../Images/System/pages.png);
        text-decoration: none;
        margin-right: 2px;
        color: #009de1;
    }

        .paginator a:visited {
            padding: 1px 6px;
            border: solid 1px #99d6ff;
            background: #fff;
            text-decoration: none;
            color: #4cb8ff;
        }

    .paginator .cpb {
        padding: 5px 15px;
        font-weight: bold;
        font-size: 18px;
        border: none;
    }

    .paginator a:hover {
        color: #ffffff;
        background: #009de1;
        border-color: #99d6ff;
        text-decoration: none;
    }

    .paginator span {
        margin: 2px;
        color: #4cb8ff;
    }

        .paginator span.active {
            margin: 2px;
            padding: 2px 8px;
            border: solid 1px #009de1;
            background: #009de1;
            text-decoration: none;
            color: #ffffff;
        }


.pbanner img {
    max-width: 100%;
    height: auto;
}