.ds-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.ds-tab .ds-tab-content {
    position: absolute;
    left: 0px;
    top: 56px;
    height: 454px;
    background: #F3F7FF;
    display: flex;
    flex-direction: column;
    width: 100%;
    visibility: hidden;
    opacity: 0;

}

.ds-tab .ds-tab-content .items {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 24px;

}

.ds-tab .ds-tab-content .items .item {
    padding: 32px;
    box-sizing: border-box;
    width: 580px;
    height: 143px;
    background: #FFFFFF;
    box-shadow: 0px 0px 30px 0px rgba(92, 153, 224, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    color: #333333;
}

.ds-tab .ds-tab-content .items .item.active, .ds-tab .ds-tab-content .items .item:hover {
    background: #106FFF;
    color: #fff;
}

.ds-tab .ds-tab-content .items .item .special-item-title {
    height: 25px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 18px;

    line-height: 25px;
}

.ds-tab .ds-tab-content .items .item .special-item-sub-title {
    margin-top: 10px;
    height: 44px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;

    line-height: 22px;
}

.ds-tab.active .ds-tab-content {
    visibility: visible;
    opacity: 1;
    transition: all 0.5s ease;
}

.ds-header {
    width: 100%;
    background-size: cover;
    height: 400px;
    background-image: url("/assets/addons/cms/img/localip-bg.png");
    min-width: 1240px;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ds-safe-width {
    width: 1240px !important;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 0 auto;
}

.ds-top-box {
    display: flex;
    margin: 100px auto auto auto;
    text-align: center;
    width: 100%;
    flex-direction: column;
}

.ds-top-box-title {

    height: 67px;
    font-family: "SourceHanSansSC-Medium";
    font-weight: 600;
    font-size: 48px;
    color: #FFFFFF;
    line-height: 67px;

    font-style: normal;
    text-align: center;
}

.ds-top-box-subtitle {
    font-family: "PingFangSC-Semibold";
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 33px;
    margin-top: 8px;
}

.ds-top-box-btn {
    font-family: "PingFangSC-Semibold";
    font-weight: 400;
    line-height: 25px;
    display: flex;
    margin: 40px 0 0 10px ;
}
.ds-btn {
    width: 90px;
    height: 36px;
    background: #FFFFFF;
    margin-right: 10px;
    border-radius: 8px;
    flex-wrap: wrap;
    display: flex;
    align-content: center;
    justify-content: center;
}
.ds-btn:first-child {
    color: #FFFFFF;
    background: #C61C1C;
}
.ds-top-box-btn .ds-btn .ds-btn-icon {
    width: 20px;
    height: 20px;
    margin: 8px 4px 8px 0;
}
.ds-top-box-btn .ds-btn .ds-btn-title{
    font-family: "PingFangSC-Semibold";
    font-weight: 400;
    font-size: 14px;
    line-height: 36px;
}

.ds-top-box-search-bar {
    display: flex;
    width: 100%;
    margin-top: 15px;
    justify-content: space-between;
}

.ds-top-box-search-input {
    /*width: 1020px;*/
    height: 50px;
    background: #FFFFFF;
    /*border-radius: 4px;*/
    border-radius: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
}

.ds-top-box-search-input span {
    display: block;
    width: 106px;
    height: 20px;
    border-right: 2px solid #106FFF;
    color: #106FFF;
    line-height: 20px;
    font-weight: 500;
    font-size: 16px;
    box-sizing: border-box;
    margin: 15px 0;
}

.ds-top-box-search-input input {
    border: none; /* 移除边框 */
    outline: none; /* 移除点击时的轮廓 */
    width: 1120px;
    height: 20px;
    margin: 15px 10px;
    padding-left: 20px;
    color: #222;
    /*display: block;*/
    /*margin: 15px 0;*/
    /*width: 794px;*/
}

.ds-top-box-search-btn img {
    width: 40px;
    height: 40px;
    margin: 5px 10px;
}


.ds-top-box-search-input input::before, .ds-top-box-search-input input::after {
    content: ""; /* 清空内容，确保伪元素不存在任何默认或自定义边框 */
    border: none; /* 确保伪元素也没有边框 */
}

.ds-top-box-search-btn {
    width: 60px;
    height: 50px;
    /*background: linear-gradient(315deg, #106FFF 0%, #1272C2 100%);*/
    border-radius: 0px 4px 4px 0px;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
}

.ds-top-box-search-high-level-btn {
    width: 120px;
    height: 50px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 50px;
    text-align: center;
    font-style: normal;
    background: linear-gradient(135deg, #F16868 0%, #DB5252 100%);
    border-radius: 4px;

}


input.dis-input::placeholder {
    color: #999; /* 将提示文本颜色设置为浅灰色 */
    font-size: 14px; /* 设置字体大小 */
    opacity: 1; /* 设置不透明度，确保文本清晰可见 */

}

.cursor-pointer {
    cursor: pointer;
}

/* 针对特定浏览器的兼容性写法 */
input.dis-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #999;
    font-size: 14px;
    opacity: 1;
}

input.dis-input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
    font-size: 14px;
    opacity: 1;
}

input.dis-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999;
    font-size: 14px;
    opacity: 1;
}

input.dis-input:-moz-placeholder { /* Mozilla Firefox 4-18 */
    color: #999;
    font-size: 14px;
    opacity: 1;
}

.ds-news-box {
    display: flex;
    flex-direction: column;
}

.ds-title-box {
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    height: 45px;
    display: flex;
}

.ds-title-box .ds-title-left-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(270deg, #CD494E 0%, rgba(205, 73, 78, 0) 100%);
    border-radius: 2px;
    margin: 21px 0 20px 0;
}

.ds-title-box .ds-title-right-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(270deg, rgba(205, 73, 78, 0) 0%, #CD494E 100%);
    border-radius: 2px;
    margin: 21px 0 20px 0;
}

.ds-title-box .ds-title-text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 32px;
    color: #333333;
    line-height: 45px;
    width: auto;
    font-style: normal;
    padding: 0 20px;
}


.ds-news-tabs {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 24px;
}

.ds-news-tab {
    height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #999999;
    line-height: 28px;
    padding-bottom: 14px;
    text-align: left;
    box-sizing: content-box;
    border-bottom: 4px solid rgba(255, 255, 255, 1);
    font-style: normal;
}

.ds-news-tab.active {
    border-bottom: 4px solid #106FFF;
    color: #106FFF !important;
    transition: all 0.5s ease;

}

.ds-news-list {
    display: none;
    width: 100%;

}

.ds-news-list.active {
    display: block !important;
}

.ds-news-list .ds-news-layout {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 462px;
    padding-left: 600px;
    justify-content: space-between;

}

.ds-news-layout .first {
    position: absolute;
    width: 600px;
    display: flex;
    height: 462px;
    left: 0;
    top: 0;
    flex-direction: column;

}

.ds-news-layout .other {
    height: 73px;
    width: 560px;
    border-bottom: 1px solid #E3E3E3;
    margin-left: 40px;
}

.ds-news-layout .other .news-title {
    height: 44px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    text-align: justify;
    font-style: normal;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


}

.ds-news-layout .other .date {
    height: 17px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    text-align: justify;
    font-style: normal;
    margin-bottom: 12px;
}

.ds-news-layout .first .image {
    display: block;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.ds-news-list .first .image {
    background-position: center center;
    background-size: cover;
}

.ds-news-list .first .txt {

    height: 62px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    line-height: 64px;
    text-align: left;
    font-style: normal;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-public-services {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 40px;

}

.ds-public-services .ds-title-box {
    margin-bottom: 64px;

}

.ds-public-services .items {
    display: flex;
    height: 224px;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 26px;
    width: 1198px;
    margin: 0 1px;
}

.ds-public-services .item {
    width: 224px;
    height: 224px;
    border-radius: 8px;
    display: flex;
    transition: all 0.5s ease;
    overflow: hidden;

}


.ds-public-services .item .left-box {
    width: 224px;
    height: 224px;
    display: flex;
    flex-direction: column;
}

.ds-public-services .item .mid-box {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="4" height="16" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="4" height="12" fill="white" /> <rect x="0" y="12" width="4" height="4" fill="transparent" /> </svg>');
    background-repeat: repeat-y;
    width: 1px;
    height: 158px;
    margin-top: 33px;
    overflow: hidden;
}

.ds-public-services .item .right-box {
    display: flex;
    visibility: hidden;
    width: 223px;
    height: 158px;
    margin-top: 33px;
    box-sizing: border-box;

    flex-direction: column;
    justify-content: space-between;
    padding-left: 50px;
}

.ds-public-services .item .right-box .sub-item {
    width: 141px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #FFFFFF;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 32px;
    text-align: center;
}

.ds-public-services .item .left-box .img-box {
    margin: 54px auto 0 auto;
    width: 72px;
    height: 72px;
}

.ds-public-services .item .left-box .img-box img {
    width: 100%;
    height: 100%;
    display: block;
}

.ds-public-services .item .left-box .txt {
    margin: 10px auto;
    height: 33px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 33px;
    text-align: left;
    font-style: normal;
}

.ds-public-services .item.deep-blue {
    background: linear-gradient(315deg, #87B0FF 0%, #658BFD 100%);
}

.ds-public-services .item.blue {
    background: linear-gradient(315deg, #11B8F1 0%, #62D0FC 100%);
}

.ds-public-services .item.green {
    background: linear-gradient(315deg, #23D0C6 0%, #59E1DE 100%);
}

.ds-public-services .item.yellow {
    background: linear-gradient(315deg, #FAA13C 0%, #F8C081 100%);
}

.ds-public-services .item.active {
    width: 448px;
    height: 224px;
}

.ds-public-services .item.active .mid-box,
.ds-public-services .item.active .right-box {
    visibility: visible;
}

.ds-center {
    display: flex;
}

/* ds -special services */
.ds-special-services {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.ds-special-services .ds-title-box {
    margin-bottom: 42px;
}

.ds-tabs-container {
    position: relative;
    font-size: 16px;
    background: #fff;

}

.ds-tab-header {
    display: flex;
    width: 708px;
    margin: 0 auto;
}

.ds-tab-header .ds-tab {
    width: calc(100% / 4);
    display: flex;
    height: 28px;
}

.ds-tab-header .ds-tab .icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat; /* 确保图标只显示一次 */
    background-image: url("/assets/addons/cms/img/localip/_icon.png");
}

.ds-tab-header .ds-tab .icon.icon0 {
    background-position: -40px -104px;
}

.ds-tab-header .ds-tab .icon.icon1 {
    background-position: -104px -104px;
}

.ds-tab-header .ds-tab .icon.icon2 {
    background-position: -168px -104px;
}

.ds-tab-header .ds-tab .icon.icon3 {
    background-position: -232px -104px;
}

/*active icon*/


.ds-tab-header .ds-tab.active .icon.icon0 {
    background-position: -40px -40px;
}

.ds-tab-header .ds-tab.active .icon.icon1 {
    background-position: -104px -40px;
}

.ds-tab-header .ds-tab.active .icon.icon2 {
    background-position: -168px -40px;
}

.ds-tab-header .ds-tab.active .icon.icon3 {
    background-position: -232px -40px;
}


.ds-tab-header .ds-tab .txt {
    height: 28px;
    line-height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #999999;
    line-height: 28px;
    margin-left: 2px;
}

.ds-tab-header .ds-tab.active .txt {
    /*color: #0D5999;*/
    color: #106FFF;
}

.ds-slider-container {
    position: relative;
    display: flex;
    width: 708px;
    margin: 0 auto;
    overflow: hidden; /* 隐藏超出部分，实现滑动效果 */
}

.ds-slider-track {
    display: flex;
    width: calc(100%); /* 假设滑块宽度为30px，左右各留30px空白 */
    transition: transform 0.3s ease; /* 平滑移动的关键 */
    /*transform: translateX(calc(-30px + 100% / 4));*/
}

.ds-slider {
    position: relative;
    height: 4px;
    background-color: #106FFF;
    width: 120px; /* 滑块宽度 */
    margin: 24px 0 0 0; /* 左右各30px空白，用于滑动 */
}


/* 保持向上小三角样式不变 */
.ds-slider::before {
    /* ... (与之前相同) */
    content: "";
    position: absolute;
    top: -8px; /* 调整以适应三角大小 */
    left: calc(60px - 4px); /* 使三角居中 */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #106FFF; /* 与滑块颜色相同 */
}

/* 根据索引调整滑块位置 */
.ds-tab-active-0 .ds-slider-track {
    transform: translateX(0);
}

.ds-tab-active-1 .ds-slider-track {
    transform: translateX(calc(708px / 4));
}

.ds-tab-active-2 .ds-slider-track {
    transform: translateX(calc(708px / 4 * 2));
}


.ds-tab-active-3 .ds-slider-track {
    transform: translateX(calc(708px / 4 * 3));
}

.ds-special-services-details {
    height: 454px;
    width: 100%;
    background: #F3F7FF;
}

.ds-friend-links {
    background: #fff;
    padding-top: 96px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 1240px;
    box-sizing: content-box;
    height: 332px;
}

.ds-friend-box {
    width: 100%;
    background-image: url("/assets/addons/cms/img/localip/friend-bg.png");

    background-position: center center;
    background-repeat: repeat-x;
    background-size: cover;
    height: 332px;
    position: absolute;
    top: 96px;
    left: 0;
    opacity: 0.6;
    z-index: 1;
}

.ds-friend-links .items {
    flex-direction: row;
    display: flex;
    width: 1200px;
    margin: 64px auto 0 auto;
    justify-content: space-between;
}

.ds-friend-links .items .item {
    text-decoration: none;
    display: block;
    width: 368px;
    height: 71px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid rgba(13, 89, 153, 0.4);
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    line-height: 71px;
    text-align: center;
    cursor: pointer;
}

.ds-friend-links .items .item:hover, .ds-friend-links .items .item.active {
    color: #106FFF;

}