* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei';
}

html .footer {
    background: #FFFFFF !important;
}

#aliyunCaptcha-sliding-wrapper #aliyunCaptcha-sliding-body #aliyunCaptcha-sliding-left {
    background-color: #f60 !important;
}

#aliyunCaptcha-sliding-wrapper #aliyunCaptcha-sliding-body #aliyunCaptcha-sliding-slider {
    background-color: #F6F7F9 !important;
    color: #737383 !important
}

#aliyunCaptcha-sliding-wrapper #aliyunCaptcha-sliding-body #aliyunCaptcha-sliding-text-box .verified {
    color: #fff !important
}

body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background: url(../images/618_bg.png) no-repeat center center #E6313A;
    min-height: 100vh;
    padding: 0;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
}

/* Banner样式 */
.banner-section {
    width: 100%;
    margin-bottom: 50px;
}



.banner-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.banner-content img {
    width: 100%;
}

/* 登录弹窗 */
#aliyunCaptcha-sliding-wrapper #aliyunCaptcha-sliding-body #aliyunCaptcha-sliding-left {
    background-color: #f60 !important;
}

#aliyunCaptcha-sliding-wrapper #aliyunCaptcha-sliding-body #aliyunCaptcha-sliding-slider {
    background-color: #F6F7F9 !important;
    color: #737383 !important
}

#aliyunCaptcha-sliding-wrapper #aliyunCaptcha-sliding-body #aliyunCaptcha-sliding-text-box .verified {
    color: #fff !important
}

/* 按钮基础样式 */
button {
    border: none;
    background-color: #4384FC;
    cursor: pointer;
}

/* 规则弹窗样式 */
.guize>div,
.guize1>div,
.guize2>div {
    width: 790px;
    max-width: 790px !important;
}

.guize>div p {
    margin-top: 8px;
    line-height: 20px;

}

.tanchang {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}


.tanchang>div {
    max-width: 520px;
    border-radius: 8px;
    background: #fff;
    margin: 120px auto;
}

.login>div {
    width: 410px;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.listinput {
    margin: 20px 0;
}

.loginbtns>input {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    outline: none;
    background: #f60;
    border: none;
}


/* 外层渐变边框容器 */
.product-section-wrapper {
    max-width: 98%;
    background: linear-gradient(135deg, #FFD6BE 0%, #E9915D 100%);
    border-radius: 25px;
    padding: 8px;
    position: relative;
    margin-bottom: 75px;
    margin-left: auto;
    margin-right: auto;
}

.product-section-wrapper::before {
    content: '';
    position: absolute;
    top: -75px;
    left: 30%;
    height: 75px;
    width: 50px;
    background: url('../images/618-connect.png') no-repeat center bottom;
    background-size: 100% auto;
    background-position: center bottom;
    z-index: 1;

}

.product-section-wrapper::after {
    content: '';
    position: absolute;
    top: -75px;
    right: 30%;
    height: 75px;
    width: 50px;
    background: url('../images/618-connect.png') no-repeat center bottom;
    background-size: 100% auto;
    background-position: center bottom;
    z-index: 1;
}

.section1.product-section-wrapper::before {
    height: 65px;
    top: -65px;
}

.section1.product-section-wrapper::after {
    height: 65px;
    top: -65px;
}

/* 产品模块样式 - 移除边框 */
.product-section {
    background: linear-gradient(135deg, #ff5555 0%, #ff3333 100%);
    border: none;
    border-radius: 17px;
    margin-bottom: 0;
    padding: 40px 20px 30px;
    position: relative;
    box-shadow: 12px 9px 8px 0px rgba(130, 12, 12, 0.25) inset;
}

.product-section-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/product-section-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.product-section-block {
    position: absolute;
    top: -45px;
    left: 0;
    right: 0;
    z-index: -1;
}

.product-section-block img {
    width: 100%;
    display: block;
}

.section-header {
    text-align: center;
    margin-bottom: 30px;
}

/* 外层盒子 - 渐变边框 */
.section-title-wrapper {
    background: linear-gradient(135deg, #FFE8DA, #FFBF76);
    border-radius: 53px;
    padding: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.section-title {
    color: #FFFFFF;
    background: #E6313A;
    font-size: 36px;
    font-weight: bold;
    padding: 17px 40px;
    border-radius: 50px;
    display: inline-block;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    font-family: 'HONOR Sans CN';
    line-height: 1;
}


.section-subtitle {
    color: #ffffff;
    font-size: 20px;
    margin-top: 20px;
    font-weight: 500;
    font-family: 'Microsoft YaHei'
}

.section-subtitle strong {
    color: #FFF68E;
    font-weight: normal;
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    max-width: 100%;
    background: #F02731;
    padding: 16px 20px;
    border-radius: 12px;
}

.product-card {
    background: #ffffff;
    border: 4px solid #FCCDB2;
    border-radius: 12px;
    padding: 15px 12px;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 280px;
    flex: 1;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.domain-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

.domain-name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.hot-tag {
    background: linear-gradient(45deg, #ff4444, #ff6666);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #ffffff;
    box-shadow: 0 2px 6px rgba(255, 68, 68, 0.3);
}

.domain-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.domain-input-section {
    margin-bottom: 20px;
}

.input-row {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2px;
    margin-bottom: 15px;
}

.domain-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 15px;
    font-size: 14px;
    outline: none;
    color: #333;
}

.domain-suffix {
    background: #ffffff;
    color: #333;
    padding: 12px 15px;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}

.search-btn {
    background: linear-gradient(45deg, #ff4444, #ff6666);
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
}

.search-btn:hover {
    background: linear-gradient(45deg, #ff6666, #ff8888);
    transform: scale(1.02);
}

.product-info {
    margin-bottom: 15px;
}

.product-label {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.product-benefit {
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.price-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.price-tag {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.price-tag.discount {
    background: #ff4444;
    color: #ffffff;
}

.price-tag.info {
    background: #4da6ff;
    color: #ffffff;
}

.price-display {
    text-align: right;
}

.current-price {
    font-size: 28px;
    font-weight: bold;
    color: #ff4444;
    display: block;
}

.price-unit {
    font-size: 14px;
    color: #666;
}

.original-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-top: 2px;
    display: block;
}

.register-button {
    background: linear-gradient(45deg, #4da6ff, #66b3ff);
    color: #ffffff;
    border: none;
    padding: 12px 0;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3);
}

.register-button:hover {
    background: linear-gradient(45deg, #66b3ff, #80c0ff);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 166, 255, 0.4);
}

.more-domains-section {
    text-align: center;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.more-domains-btn {
    text-align: center;
    border-radius: 30px;
    border: solid 1px#FFF4E8;
    background: #F02731;
    border: solid 1px#FFF4E8;
    padding: 12px 30px;
    color: #FFF4E8;
    font-family: "HONOR Sans CN";
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.more-domains-btn:hover {
    background: #FF3741;
    border: solid 1px #FFFFFF;
    color: #FFFFFF;
    transform: scale(1.05);
}

.more-domains-btn::after {
    content: '>';
    background: #FFF4E8;
    color: #F02731;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    transform: translateX(1px);
}

/* 域名注册模块特殊布局 */
.product-section:first-of-type .products-grid {
    justify-content: space-between;
}

.product-section:first-of-type .product-card {
    min-width: 250px;
    flex: 0 1 calc(25% - 12px);
}


/* 活动规则模块 */
.section7 .section-header {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.section7 .product-section {
    padding: 55px 47px 0;
}

.contact-list {

    color: #ffffff;
    list-style: none;
    border-radius: 10px;
    border: solid 4px#DA2524;
    padding: 97px 70px 42px 70px;
    transform: translateY(-52px);
}

.contact-title {
    background: rgba(255, 255, 255, 0.9);
    color: #ff3333;
    font-size: 24px;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px;
    display: inline-block;
    border: 2px solid #ffffff;
    margin-bottom: 20px;

}



.contact-item {
    margin-bottom: 12px;
    font-family: "HONOR Sans CN";
    font-size: 16px;
    padding-left: 33px;
    position: relative;
    line-height: 1.6;
}



/* 活动规则特殊样式 */
.contact-item strong {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.contact-item:has(strong) {
    margin-top: 20px;
    margin-bottom: 8px;
    position: relative;
}

.contact-item:has(strong)::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* 活动时间图标 */
.contact-item:has(strong):nth-of-type(1)::before {
    background: url(../images/contact-icon1.svg);
}

/* 活动对象图标 */
.contact-item:has(strong):nth-of-type(3)::before {
    background: url(../images/contact-icon2.svg);
}

/* 活动内容图标 */
.contact-item:has(strong):nth-of-type(6)::before {
    background: url(../images/contact-icon3.svg);
}

/* 使用规则图标 */
.contact-item:has(strong):nth-of-type(11)::before {
    background: url(../images/contact-icon4.svg);
}

/* 联系方式图片样式 */
.contact-img {
    text-align: center;
    margin-top: 10px;
}

.contact-img img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.contact-img p {
    color: #ffffff;
    font-size: 12px;
    margin: 0;
    font-family: "Microsoft YaHei";
}

/* 旧版本产品卡片兼容样式 */
.product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.product-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.product-tag {
    background: linear-gradient(45deg, #ff4444, #ff6666);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #ffffff;
    box-shadow: 0 2px 6px rgba(255, 68, 68, 0.3);
}

.product-features {
    margin: 15px 0;
}

.feature-item {
    color: #666;
    font-size: 14px;
    margin-bottom: 5px;
    padding-left: 15px;
    position: relative;
}

.feature-item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ff4444;
    font-weight: bold;
}

.product-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #f0f0f0;
}

.price-info {
    display: flex;
    flex-direction: column;
}

.buy-button {
    background: linear-gradient(45deg, #4da6ff, #66b3ff);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3);
}

.buy-button:hover {
    background: linear-gradient(45deg, #66b3ff, #80c0ff);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 166, 255, 0.4);
}

/* 新版域名卡片样式 - 按照设计图2 */
.domain-header-new {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.domain-name-large {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
    font-family: 'Microsoft YaHei';
}

.hot-tag-new {
    background: #FF3535;
    color: #ffffff;
    width: 90px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    line-height: 22px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.hot-tag-new img {
    margin-right: 4px;
}

.domain-description-new {
    color: #6E5A5A;
    font-size: 12px;
    margin-bottom: 19px;
    line-height: 1.4;
    font-family: 'HONOR Sans CN';
}

.domain-input-new {
    display: flex;
    border: 1px solid #D9D9D9;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
}

.doma-inok {
    font-size: 12px;
    color: rgb(111, 207, 62);
    margin-bottom: 5px;
    opacity: 0;
}

.doma-inok.no {
    color: red;
}

.domain-input-new input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 50px 10px 12px;
    font-size: 12px;
    outline: none;
    color: #333;
    min-width: 120px;
}

.domain-input-new input::placeholder {
    color: #D9D9D9;
}

.domain-input-new .suffix {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: #333;
    padding: 0;
    font-weight: normal;
    font-size: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.domain-input-new .query-btn {
    background: linear-gradient(120deg, #FF3C45, #FF5D36);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    white-space: nowrap;
    min-width: 60px;
    flex-shrink: 0;
    float: right;
    margin-right: 0px !important;
}

.domain-input-new .query-btn:hover {
    background: linear-gradient(45deg, #ff6666, #ff8888);
}

.product-advantage {
    margin-bottom: 16px;
    border-bottom: solid 1px#EEE;
    padding-bottom: 10px;
}

.advantage-label {
    color: #6E5A5A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 6px;
    font-weight: 500;
}

.advantage-text {
    color: #3F3937;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.price-tags-new {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.tag-discount {
    width: 65.976px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #FFEEEB;
    color: #F8454E;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.tag-support {
    display: flex;
    height: 22px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #E9F2FF;
    color: #3C8DFE;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.price-info-new {
    margin-bottom: 18px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.price-large {
    color: #F8454E;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.price-large .unit {
    color: #666;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.price-original {
    color: #888;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    margin-top: 2px;
    display: block;
}

.register-btn-new {
    font-family: "HONOR Sans CN";
    color: #FFF5EA;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #3B89FF 1.17%, #45C1FF 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.25) inset;
    border: solid 2px #FFE8DA;
}

.register-btn-new:hover {
    background: linear-gradient(271deg, #4B99FF 1.17%, #55D1FF 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.35) inset, 0 6px 20px rgba(59, 137, 255, 0.4);
}

/* 新版功能特性列表样式 */
.feature-list-new {
    margin-top: 6px;
}

.feature-item-new {
    color: #666;
    font-size: 12px;
    margin-bottom: 4px;
    line-height: 1.4;
    font-family: 'Microsoft YaHei';
}

.checkmark {
    color: #F8454E;
}

/* 特殊按钮样式 - 已领券状态 */
.register-btn-special {
    font-family: "HONOR Sans CN";
    color: #FFFFFF;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #FF4444 1.17%, #FF6666 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(139, 32, 32, 0.25) inset;
    border: solid 2px #FFE8DA;
}

.register-btn-special:hover {
    background: linear-gradient(271deg, #FF5555 1.17%, #FF7777 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(139, 32, 32, 0.35) inset, 0 6px 20px rgba(255, 68, 68, 0.4);
}

/* 建站卡片样式 - 继承product-card基础样式，可独立调整 */
.building-card {
    background: #ffffff;
    border: 4px solid #FCCDB2;
    border-radius: 12px;
    padding: 0px 0 18px 0;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 280px;
    flex: 1;
    overflow: hidden;
    flex: 0 1 calc(33% - 10px);
}

.building-card .product-advantage {
    border-bottom: none;
}

.building-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 建站网格样式 - 复制products-grid的样式 */
.building-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    max-width: 100%;
    background: #F02731;
    padding: 16px 20px;
    border-radius: 12px;

}

/* 建站头部 - 合并 building-header 和 building-description */
.building-header {
    margin-bottom: 16px;
    padding: 26px 20px 17px 20px;
    position: relative;
}

.building-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.building-header-bg img {
    width: 100%
}

/* 建站标题（第一个p标签） */
.building-header p:first-child {
    font-size: 22px;
    font-weight: 400;
    color: #3F3937;
    margin: 0 0 10px 0;
    font-family: "HONOR Sans CN";
    position: relative;
    z-index: 1;
}

/* 建站描述（第二个p标签） */
.building-header p {
    max-width: 280px;
    color: #6E5A5A;
    font-family: "HONOR Sans CN";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    position: relative;
    z-index: 1;
}

/* 建站优势 - 复制 product-advantage */
.building-advantage {
    margin-bottom: 16px;
    border-bottom: none;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* 建站优势标签 - 复制 advantage-label */
.building-advantage-label {
    color: #6E5A5A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 6px;
    font-weight: 500;
}

/* 建站功能列表 - 复制 feature-list-new */
.building-feature-list {
    margin-top: 6px;
    min-height: 173px;
}

/* 建站功能项 - 复制 feature-item-new */
.building-feature-item {
    color: #666;
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
    font-family: "HONOR Sans CN";
}

/* 建站勾选符号 - 复制 checkmark */
.building-checkmark {
    color: #F8454E;
    margin-right: 7px;
}

/* 建站价格标签 - 复制 price-tags-new */
.building-price-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 0 20px;
}

/* 建站折扣标签 - 复制 tag-discount */
.building-tag-discount {
    width: 65.976px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #FFEEEB;
    color: #F8454E;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

/* 建站支持标签 - 复制 tag-support */
.building-tag-support {
    display: flex;
    height: 22px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #E9F2FF;
    color: #3C8DFE;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* 建站注册按钮 - 复制 register-btn-new */
.building-register-btn {
    display: block;
    font-family: "HONOR Sans CN";
    color: #FFF5EA;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 348px;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #3B89FF 1.17%, #45C1FF 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.25) inset;
    border: solid 2px #FFE8DA;
    margin: 0 auto;
}

.building-register-btn:hover {
    background: linear-gradient(271deg, #4B99FF 1.17%, #55D1FF 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.35) inset, 0 6px 20px rgba(59, 137, 255, 0.4);
}

/* 建站特殊按钮 - 复制 register-btn-special */
.building-register-btn.special,
.database-register-btn.special,
.hosting-buy-btn.special,
.ssl-register-btn.special {
    font-family: "HONOR Sans CN";
    color: #FFFFFF;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 348px;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #FF4444 1.17%, #FF6666 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(139, 32, 32, 0.25) inset;
    border: solid 2px #FFE8DA;
    display: none;

}

.building-register-btn.special:hover,
.database-register-btn.special:hover,
.hosting-buy-btn.special:hover,
.ssl-register-btn.special:hover {
    background: linear-gradient(271deg, #FF5555 1.17%, #FF7777 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(139, 32, 32, 0.35) inset, 0 6px 20px rgba(255, 68, 68, 0.4);
}

/* Database module styles - 复制 building 模块样式 */
/* 数据库卡片样式 - 复制 building-card 基础样式 */
.database-card {
    background: #ffffff;
    border: 4px solid #FCCDB2;
    border-radius: 12px;
    padding: 0px 0 18px 0;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 280px;
    flex: 1;
    overflow: hidden;
    flex: 0 1 calc(33% - 10px);
}

.database-card .product-advantage {
    border-bottom: none;
}

.database-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 数据库网格样式 - 复制 building-grid */
.database-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    max-width: 100%;
    background: #F02731;
    padding: 16px 20px;
    border-radius: 12px;
}

/* 数据库头部 - 复制 building-header */
.database-header {
    padding: 26px 20px 16px 20px;
    position: relative;
}

.database-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.database-header-bg img {
    width: 100%
}

/* 数据库标题（第一个p标签） */
.database-header p:first-child {
    font-size: 22px;
    font-weight: 400;
    color: #3F3937;
    margin: 0 0 10px 0;
    font-family: "HONOR Sans CN";
    position: relative;
    z-index: 1;
}

/* 数据库描述（第二个p标签） */
.database-header p {
    color: #6E5A5A;
    font-family: "HONOR Sans CN";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    position: relative;
    z-index: 1;
}

/* 数据库优势 - 复制 building-advantage */
.database-advantage {
    margin-bottom: 16px;
    border-bottom: none;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* 数据库功能列表 - 复制 building-feature-list */
.database-feature-list {
    margin-top: 6px;
    min-height: 104px;
}

/* 数据库功能项 - 复制 building-feature-item */
.database-feature-item {
    color: #666;
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
    font-family: "HONOR Sans CN";
}

/* 数据库勾选符号 - 复制 building-checkmark */
.database-checkmark {
    color: #F8454E;
    margin-right: 7px;
}

/* 数据库价格标签 - 复制 building-price-tags */
.database-price-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 0 20px;
}

/* 数据库折扣标签 - 复制 building-tag-discount */
.database-tag-discount {
    width: 65.976px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #FFEEEB;
    color: #F8454E;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

/* 数据库支持标签 - 复制 building-tag-support */
.database-tag-support {
    display: flex;
    height: 22px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #E9F2FF;
    color: #3C8DFE;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* 数据库价格信息 - 类似 price-info-new */
.database-price-info {
    margin-bottom: 18px;
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 0 20px;
}

.database-price-large {
    color: #F8454E;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.database-price-large .database-unit {
    color: #666;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.database-price-original {
    color: #888;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    line-height: 1;
}

/* 数据库注册按钮 - 复制 building-register-btn */
.database-register-btn {
    display: block;
    font-family: "HONOR Sans CN";
    color: #FFF5EA;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 348px;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #3B89FF 1.17%, #45C1FF 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.25) inset;
    border: solid 2px #FFE8DA;
    margin: 0 auto;
}

.database-register-btn:hover {
    background: linear-gradient(271deg, #4B99FF 1.17%, #55D1FF 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.35) inset, 0 6px 20px rgba(59, 137, 255, 0.4);
}

/* 数据库容量规格样式 */
.database-capacity {
    padding: 16px 20px;
    margin-bottom: 16px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0px 2px 8px 0px rgba(12, 18, 72, 0.12);
}

.capacity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.capacity-item:last-child {
    margin-bottom: 0;
}

.capacity-size {
    color: #F8454E;
    font-size: 15px;
    font-weight: 600;
    font-family: "HONOR Sans CN";
}

.capacity-label {
    color: #666;
    font-size: 12px;
    font-weight: 400;
    font-family: "HONOR Sans CN";
}

/* Hosting module styles - 独立的虚拟机模块样式 */
/* 虚拟机网格样式 */
.hosting-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    max-width: 100%;
    background: #F02731;
    padding: 16px 20px;
    border-radius: 12px;
    gap: 15px;
}

/* 虚拟机卡片样式 */
.hosting-card {
    background: #ffffff;
    border: 4px solid #FCCDB2;
    border-radius: 12px;
    padding: 0 0 18px 0;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 280px;
    flex: 0 1 calc(25% - 12px);
    overflow: hidden;
}

.hosting-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 虚拟机头部 */
.hosting-header {
    margin-bottom: 16px;
    padding: 22px 20px 0px 20px;
    position: relative;
}

.hosting-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hosting-header-bg img {
    width: 100%
}

/* 虚拟机标题（第一个p标签） */
.hosting-header p:first-child {
    font-size: 20px;
    font-weight: 400;
    color: #3F3937;
    margin: 0 0 8px 0;
    font-family: "Microsoft YaHei";
    position: relative;
    z-index: 1;
    min-height: auto;
    line-height: 1;
}

/* 虚拟机描述（第二个p标签） */
.hosting-header p {
    color: #6E5A5A;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    position: relative;
    z-index: 1;
    max-width: 220px;
    min-height: 51px;
}

/* 配置选项区域 */
.hosting-specs {
    margin-bottom: 20px;
    padding: 0 20px;
}

.hosting-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: solid 1px #EEE;
}

.hosting-spec-label {
    color: #70655A;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 6px;
}

.hosting-spec-value {
    color: #3F3937;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    margin-top: 6px;
}

/* 虚拟机标签 */
.hosting-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 0 20px;
}

.hosting-tag-hot {
    width: 65.976px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #FFEEEB;
    color: #F8454E;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.hosting-tag-flagship {
    display: flex;
    height: 22px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #E9F2FF;
    color: #3C8DFE;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* 虚拟机价格信息 */
.hosting-price-info {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: baseline;
    padding: 0 20px;
}

/* 虚拟机购买按钮 */
.hosting-buy-btn {
    display: block;
    font-family: "HONOR Sans CN";
    color: #FFF5EA;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 348px;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #3B89FF 1.17%, #45C1FF 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.25) inset;
    border: solid 2px #FFE8DA;
    margin: 0 auto;
}

.hosting-buy-btn:hover {
    background: linear-gradient(271deg, #4B99FF 1.17%, #55D1FF 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.35) inset, 0 6px 20px rgba(59, 137, 255, 0.4);
}

/* SSL module styles - 独立的SSL证书模块样式 */
/* SSL卡片样式 */
.ssl-card {
    background: #ffffff;
    border: 4px solid #FCCDB2;
    border-radius: 12px;
    padding: 0px 0 18px 0;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 280px;
    flex: 1;
    overflow: hidden;
    flex: 0 1 calc(33% - 10px);
}

.ssl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* SSL网格样式 */
.ssl-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    max-width: 100%;
    background: #F02731;
    padding: 16px 20px;
    border-radius: 12px;
}

/* SSL头部 */
.ssl-header {
    margin-bottom: 25px;
    padding: 26px 20px 17px 20px;
    position: relative;
}

.ssl-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.ssl-header-bg img {
    width: 100%
}

/* SSL标题（第一个p标签） */
.ssl-header p:first-child {
    font-size: 22px;
    font-weight: 400;
    color: #3F3937;
    margin: 0 0 10px 0;
    font-family: "HONOR Sans CN";
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.ssl-header p strong {
    color: #E4D4C9;
    font-weight: 400;
    margin-right: 5px;
}

/* SSL标题图片样式 */
.ssl-header p:first-child img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* SSL描述（第二个p标签） */
.ssl-header p {
    color: #6E5A5A;
    font-family: "HONOR Sans CN";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    position: relative;
    z-index: 1;
}

/* SSL特性列表 */
.ssl-features {
    margin-top: 15px;
    margin-bottom: 20px;
    min-height: 120px;
    padding-left: 20px;
    padding-right: 20px;
}

.ssl-feature-item {
    color: #666;
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
    font-family: "HONOR Sans CN";
    display: flex;
    align-items: center;
}

.ssl-checkmark {
    color: #F8454E;
    margin-right: 8px;
    font-weight: bold;
}

/* SSL价格信息 */
.ssl-price-info {
    margin-bottom: 18px;
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 0 20px;
}

.ssl-price-large {
    color: #F8454E;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-family: "HONOR Sans CN";
}

.ssl-price-large .ssl-unit {
    color: #666;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.ssl-price-original {
    color: #888;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    line-height: 1;
}

/* SSL注册按钮 */
.ssl-register-btn {
    display: block;
    font-family: "HONOR Sans CN";
    color: #FFF5EA;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 348px;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #3B89FF 1.17%, #45C1FF 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.25) inset;
    border: solid 2px #FFE8DA;
    margin: 0 auto;
}

.ssl-register-btn:hover {
    background: linear-gradient(271deg, #4B99FF 1.17%, #55D1FF 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.35) inset, 0 6px 20px rgba(59, 137, 255, 0.4);
}

/* New Cloud Server V2 - Section5 全新云服务器模块样式 */
/* 云服务器网格样式 */
.cloud-server-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    max-width: 100%;
    background: #F02731;
    padding: 16px 20px;
    border-radius: 12px;
    gap: 15px;
}

/* 云服务器卡片样式 */
.cloud-server-card {
    background: #ffffff;
    border: 4px solid #FCCDB2;
    border-radius: 12px;
    padding: 0 0 20px 0;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 280px;
    flex: 0 1 calc(33% - 10px);
    overflow: hidden;
}

.cloud-server-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 云服务器标题和描述 - 改为server-header结构 */
.server-header {
    margin-bottom: 16px;
    padding: 21px 20px 16px 20px;
    position: relative;
}

.server-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.server-header-bg img {
    width: 100%
}

/* 服务器标题（第一个p标签） */
.server-header p:first-child {
    font-size: 22px;
    font-weight: 400;
    color: #3F3937;
    margin: 0 0 10px 0;
    font-family: "Microsoft YaHei";
    position: relative;
    z-index: 1;
}

/* 服务器描述（第二个p标签） */
.server-header p {
    color: #6E5A5A;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    position: relative;
    z-index: 1;
    max-width: 270px;

}

/* 配置选项区域 */
.server-config {
    margin-bottom: 20px;
    padding: 0 20px;
}

.config-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: solid 1px #EEE;
}

.config-label {
    color: #6E5A5A;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 6px;
}

.config-select {
    background: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 25px 6px 0px;
    font-size: 14px;
    font-family: "HONOR Sans CN";
    color: #3F3937;
    min-width: 120px;
    width: 100%;
    appearance: none;
    cursor: pointer;
    position: relative;
}

.config-select:focus {
    outline: none;
}

/* 下拉箭头容器 */
.config-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.config-select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url('../images/618jiantou.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.config-select-arrow.rotated {
    transform: translateY(-50%) rotate(180deg);
}

.config-value {
    color: #3F3937;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    margin-top: 6px;
}

/* 标签区域 */
.server-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 0 20px;
}

.server-tag-hot {
    width: 65.976px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #FFEEEB;
    color: #F8454E;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.server-tag-flagship {
    display: flex;
    height: 22px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #E9F2FF;
    color: #3C8DFE;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* 价格信息 */
.server-price-info {
    margin-bottom: 18px;
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 0 20px;
}

.price-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-right {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.price-label {
    color: #666;
    font-family: "HONOR Sans CN";
    font-size: 14px;
    font-weight: 400;
}

.price-amount {
    color: #F8454E;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    font-family: "Microsoft YaHei";
}

.price-unit {
    color: #666;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.price-original {
    color: #888;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    line-height: 1;
}

/* 购买按钮 */
.server-buy-btn {
    display: block;
    font-family: "HONOR Sans CN";
    color: #FFF5EA;
    font-size: 14px;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 348px;
    transition: all 0.3s ease;
    background: linear-gradient(271deg, #3B89FF 1.17%, #45C1FF 148.98%);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.25) inset;
    border: solid 2px #FFE8DA;
    margin: 0 auto;
}

.server-buy-btn:hover {
    background: linear-gradient(271deg, #4B99FF 1.17%, #55D1FF 148.98%);
    transform: translateY(-2px);
    box-shadow: 0.5px 1px 4px 0px rgba(28, 68, 105, 0.35) inset, 0 6px 20px rgba(59, 137, 255, 0.4);
}


/* 悬浮导航样式 */
.float-nav {
    position: fixed;
    padding-top: 5px;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    border-radius: 6px;
    background: linear-gradient(90deg, #FF3C45 0%, #FF5D36 97.85%);
    box-shadow: 0px 2px 10px 0px rgba(86, 23, 12, 0.10);
    z-index: 999;
    display: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-buttons-container {
    padding: 10px;
    width: 171px;
    height: 306px;
    flex-shrink: 0;
    border-radius: 6px;
    border: solid 4px #FCCDB2;
    background: #FFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-btn {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.2;
    border-radius: 4px;
}

.nav-btn:hover {
    background: #F8F9FA;
    color: #F8454E;
}

.nav-btn.act {
    background: #FF3535;
    color: #ffffff;
    font-weight: bold;

}

.back-to-top {
    width: 171px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease
}

/* ===== Section1 简单响应式适配 ===== */

/* 1200px以下：4个变成2个一行 */
@media (max-width: 1199px) {
    .product-section:first-of-type .product-card {
        flex: 0 1 calc(50% - 15px);
        margin-bottom: 10px;
    }

    /* 调整区块间距以匹配装饰元素 */
    .product-section-wrapper {
        margin-bottom: 75px;
    }

    /* 优化装饰元素定位 */
    .product-section-block {
        top: -45px;
    }

    /* 优化连接装饰元素 */
    .product-section-wrapper::before,
    .product-section-wrapper::after {
        height: 75px;
        top: -75px;
        width: 50px;
    }

    .section1.product-section-wrapper::before,
    .section1.product-section-wrapper::after {
        height: 65px;
        top: -65px;
        width: 50px;
    }
}

/* 中等屏幕优化 */
@media (max-width: 992px) {
    .banner-section {
        margin-bottom: 41px;
    }

    .product-section-block {
        top: -40px;
    }

    /* 调整区块间距以匹配装饰元素 */
    .product-section-wrapper {
        margin-bottom: 65px;
    }

    /* 中等屏幕连接装饰元素优化 */
    .product-section-wrapper::before,
    .product-section-wrapper::after {
        height: 65px;
        top: -65px;
        width: 45px;
    }

    .section1.product-section-wrapper::before,
    .section1.product-section-wrapper::after {
        height: 50px;
        top: -50px;
        width: 45px;
    }
}

/* 平板屏幕优化 */
@media (max-width: 768px) {
    .banner-section {
        margin-bottom: 35px;
    }

    .product-section-block {
        top: -35px;
    }

    /* 调整区块间距以匹配装饰元素 */
    .product-section-wrapper {
        margin-bottom: 55px;
    }

    /* 平板屏幕连接装饰元素优化 */
    .product-section-wrapper::before,
    .product-section-wrapper::after {
        height: 55px;
        top: -55px;
        width: 40px;
    }

    .section1.product-section-wrapper::before,
    .section1.product-section-wrapper::after {
        height: 45px;
        top: -45px;
        width: 40px;
    }
}

/* 750px以下：2个变成1个一行，同时调整字体 */
@media (max-width: 749px) {
    .banner-section {
        margin-bottom: 26px;
    }

    .building-header,
    .database-header {
        padding: 10px 20px 10px 20px;
    }

    /* 手机屏幕装饰元素优化 */
    .product-section-block {
        top: -30px;
    }

    /* 调整区块间距以匹配装饰元素 */
    .product-section-wrapper {
        margin-bottom: 45px;
    }

    .section1 .products-grid {
        flex-direction: column;
        align-items: center;
    }

    .section1 .product-card {
        width: 96%;
        flex: none;
    }

    /* 字体调整 */
    .section1 .section-title {
        font-size: 24px;
    }

    .section1 .section-subtitle {
        font-size: 14px;
    }

    .section1 .domain-name-large {
        font-size: 18px;
    }

    .section1 .domain-description-new {
        font-size: 12px;
    }

    .section1 .advantage-text {
        font-size: 12px;
    }

    .section1 .price-large {
        font-size: 22px;
    }

    /* 手机屏幕连接装饰元素优化 */
    .product-section-wrapper::before,
    .product-section-wrapper::after {
        height: 45px;
        top: -45px;
        width: 35px;
    }

    .section1.product-section-wrapper::before,
    .section1.product-section-wrapper::after {
        height: 35px;
        top: -35px;
        width: 35px;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .banner-section {
        margin-bottom: 15px;
    }

    .product-section-block {
        top: -16px;
    }

    /* 调整区块间距以匹配装饰元素 */
    .product-section-wrapper {
        margin-bottom: 30px;
    }

    /* 超小屏幕连接装饰元素优化 */
    .product-section-wrapper::before,
    .product-section-wrapper::after {
        height: 30px;
        top: -30px;
        width: 30px;
    }

    .section1.product-section-wrapper::before,
    .section1.product-section-wrapper::after {
        height: 25px;
        top: -25px;
        width: 30px;
    }
}

/* ===== Section2 简单响应式适配 ===== */

/* 1200px以下：3个变成2个一行 */
@media (max-width: 1199px) {
    .section2 .building-card {
        flex: 0 1 calc(50% - 15px);
        margin-bottom: 10px;
    }
}

/* 750px以下：2个变成1个一行，同时调整字体 */
@media (max-width: 749px) {
    .section2 .building-grid {
        flex-direction: column;
        align-items: center;
    }

    .section2 .building-card {
        width: 96%;
        flex: none;
    }

    /* 字体调整 */
    .section2 .section-title {
        font-size: 24px;
    }

    .section2 .section-subtitle {
        font-size: 14px;
    }

    .section2 .building-header p:first-child {
        font-size: 18px;
        line-height: 1;
    }

    .section2 .building-header p {
        font-size: 12px;
    }

    .section2 .building-feature-item {
        font-size: 12px;
    }
}

/* ===== Section3 简单响应式适配 ===== */

/* 1200px以下：3个变成2个一行 */
@media (max-width: 1199px) {
    .section3 .database-card {
        flex: 0 1 calc(50% - 15px);
        margin-bottom: 10px;
    }
}

/* 750px以下：2个变成1个一行，同时调整字体 */
@media (max-width: 749px) {
    .section3 .database-grid {
        flex-direction: column;
        align-items: center;
    }

    .section3 .database-card {
        width: 96%;
        flex: none;
    }

    /* 字体调整 */
    .section3 .section-title {
        font-size: 24px;
    }

    .section3 .section-subtitle {
        font-size: 14px;
    }

    .section3 .database-header p:first-child {
        font-size: 18px;
        line-height: 1;
    }

    .section3 .database-header p:last-child {
        font-size: 12px;
    }

    .section3 .capacity-item {
        gap: 5px;
    }

    .section3 .capacity-size {
        font-size: 12px;
    }

    .section3 .database-capacity {
        gap: 5px;
    }

    .database-capacity {
        padding: 20px 10px;
    }

    .section3 .database-header p {
        font-size: 12px;
    }

    .section3 .database-feature-item {
        font-size: 12px;
    }

    .section3 .database-price-large {
        font-size: 22px;
    }
}

/* ===== Section4 简单响应式适配 ===== */

/* 1200px以下：变成2个一行 */
@media (max-width: 1199px) {
    .section4 .hosting-card {
        flex: 0 1 calc(50% - 15px);
        margin-bottom: 10px;
    }
}

/* 750px以下：2个变成1个一行，同时调整字体 */
@media (max-width: 749px) {
    .section4 .hosting-grid {
        flex-direction: column;
        align-items: center;
    }

    .section4 .hosting-card {
        width: 96%;
        flex: none;
    }

    /* 字体调整 */
    .section4 .section-title {
        font-size: 24px;
    }

    .section4 .section-subtitle {
        font-size: 14px;
    }

    .section4 .hosting-header p:first-child {
        font-size: 18px;
        line-height: 1;
    }

    .section4 .hosting-header p {
        font-size: 12px;
    }

    .hosting-header p {
        min-height: auto;
    }

    .section4 .hosting-spec-label,
    .section4 .hosting-spec-value {
        font-size: 12px;
    }

    .section4 .price-amount {
        font-size: 22px;
    }

    .hosting-header {
        padding: 10px 20px 10px 20px;
    }

    .hosting-price-info {
        flex-direction: column;
    }
}

/* ===== Section5 简单响应式适配 ===== */

/* 1200px以下：变成2个一行 */
@media (max-width: 1199px) {
    .section5 .cloud-server-card {
        flex: 0 1 calc(50% - 15px);
        margin-bottom: 10px;
    }
}

/* 750px以下：2个变成1个一行，同时调整字体 */
@media (max-width: 749px) {
    .section5 .cloud-server-grid {
        flex-direction: column;
        align-items: center;
    }

    .section5 .cloud-server-card {
        width: 96%;
        flex: none;
    }

    /* 字体调整 */
    .section5 .section-title {
        font-size: 24px;
    }

    .section5 .section-subtitle {
        font-size: 14px;
    }

    .section5 .server-header p:first-child {
        font-size: 18px;
        line-height: 1;
    }

    .section5 .server-header p {
        font-size: 12px;
    }

    .section5 .config-label,
    .section5 .config-value {
        font-size: 12px;
    }

    .section5 .price-amount {
        font-size: 22px;
    }

    .server-header {
        padding: 10px 20px 10px 20px;
    }

    .server-price-info {
        flex-direction: column;
    }
}

/* ===== Section6 简单响应式适配 ===== */

/* 1200px以下：3个变成2个一行 */
@media (max-width: 1199px) {
    .section6 .ssl-card {
        flex: 0 1 calc(50% - 15px);
        margin-bottom: 10px;
    }
}

/* 750px以下：2个变成1个一行，同时调整字体 */
@media (max-width: 899px) {
    html .topbox {
        background: #ffffff !important;
    }
}

@media (max-width: 749px) {
    .section6 .ssl-grid {
        flex-direction: column;
        align-items: center;
    }

    .section6 .ssl-card {
        width: 96%;
        flex: none;
    }

    /* 字体调整 */
    .section6 .section-title {
        font-size: 24px;
    }

    .section6 .section-subtitle {
        font-size: 14px;
    }

    .section6 .ssl-header p:first-child {
        font-size: 18px;
        line-height: 1;
    }

    .section6 .ssl-header p {
        font-size: 12px;
    }

    .section6 .ssl-feature-item {
        font-size: 12px;
    }

    .section6 .ssl-price-large {
        font-size: 22px;
    }

    .ssl-header {
        padding: 10px 20px 10px 20px;
    }

    .ssl-header p:first-child img {
        width: 43%;
    }

    .ssl-price-info {
        flex-direction: column;
    }
}

/* ===== Section7 简单响应式适配 ===== */

/* 1200px以下：适配中等屏幕 */
@media (max-width: 1199px) {
    .section7 .contact-list {
        padding: 80px 50px 35px 50px;
    }
}

/* 750px以下：适配小屏幕，调整字体和布局 */
@media (max-width: 749px) {

    /* 字体调整 */
    .section7 .section-title {
        font-size: 24px;
    }

    .section7 .contact-list {
        padding: 60px 20px 25px 20px;
    }

    .section7 .contact-item {
        font-size: 12px;
        line-height: 1.5;
        padding-left: 15px;
        margin-bottom: 8px;
    }

    .section7 .contact-item strong {
        font-size: 13px;
    }

    .section7 .contact-img {
        margin-top: 15px;
    }

    .section7 .contact-img img {
        width: 80px;
        height: 80px;
    }

    .section7 .contact-img p {
        font-size: 12px;
        margin-top: 8px;
    }
}

/* ===== 悬浮导航响应式隐藏 ===== */

/* 1200px以下隐藏悬浮导航 */
@media (max-width: 1199px) {
    .float-nav {
        display: none !important;
    }
}