/* ===== 重置 & 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: #fff;
    font-family: "pingfang SC", "helvetica neue", arial, "hiragino sans gb", "microsoft yahei ui", "microsoft yahei", simsun, sans-serif !important;
    color: #333;
}
a { text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
ul, li { list-style: none; margin: 0; padding: 0; }
img { vertical-align: middle; }

/* ===== 容器 最大宽度1350px ===== */
.cdn-container {
    max-width: 1350px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* ===== 每部分上下 padding 90px ===== */
.cdn-section {
    padding-top: 90px;
    padding-bottom: 90px;
}
/* ===== 大标题 ===== */
.cdn-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #000;
    margin-bottom: 0;
}
/* ===== 按钮 ===== */
.cdn-btn {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding: 0 30px;
    font-size: 14px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: none;
    color: #fff;
    background: #0066ff;
}
.cdn-btn:hover {
    background: #0066cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 132, 255, 0.3);
}
/* ===== 卡片 hover ===== */
.cdn-card-hover {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cdn-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 132, 255, 0.10);
}

/* ============================================================
   Banner
   ============================================================ */
.cdn-banner {
    width: 100%;
    background: #31217f;
    margin-top: 60px;
    padding: 50px 0;
}
.cdn-banner .cdn-banTxt h1 {
    font-size: 36px;
    color: #fff;
    font-weight: bold;
}
.cdn-banner .cdn-banTxt p {
    font-size: 18px;
    color: #fff;
    margin: 30px 0 35px;
}
.cdn-banner .cdn-banTxt .cdn-btn {
    background: #0066ff;
    border-radius: 10px;
    width: 128px;
    height: 42px;
    line-height: 42px;
    text-align: center;
}
.cdn-banner .cdn-banImg {
    text-align: right;
}
.cdn-banner .cdn-banImg img {
    max-width: 100%;
}

/* ============================================================
   产品架构 - 标签在左上角
   ============================================================ */
.cdn-arch-wrap {
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
    margin-top: 45px;
    text-align: center;
    border-radius: 10px;
    position: relative;
}
.cdn-arch-wrap .cdn-arch-label {
    display: inline-block;
    background: #eeeeee;
    font-size: 14px;
    color: #333;
    padding: 0 20px;
    height: 43px;
    line-height: 43px;
    border-radius: 10px;
    position: absolute;
    left: 30px;
}
.cdn-arch-wrap img {
    max-width: 100%;
    margin-top: 20px;
}

/* ============================================================
   产品介绍
   ============================================================ */
.cdn-con2 {
    background: #f9faff;
}
.cdn-intro-card {
    background: #fff;
    padding: 30px 25px;
    height: 100%;
    min-height: 149px;
    border-radius: 10px;
    transition: 0.3s;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 8px 20px rgba(0,102,255,0.08);
}
.cdn-intro-card img { flex-shrink: 0; }
.cdn-intro-card .cdn-intro-txt h4 {
    font-size: 18px;
    color: #000;
    font-weight: bold;
}
.cdn-intro-card .cdn-intro-txt p {
    font-size: 14px;
    color: #666;
    line-height: 24px;
    margin-top: 10px;
    text-align: justify;
}
.cdn-intro-card.cdn-card-hover:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); }

/* ============================================================
   产品优势 - 每个图标独立样式
   ============================================================ */
.cdn-adv-item {
    text-align: center;
    padding: 10px 5px;
}
.cdn-adv-item .cdn-adv-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #919191;
    margin: 0 auto 15px;
    transition: 0.3s;
}
/* 图标1 - 部署简单 */
.cdn-adv-item.adv-1 .cdn-adv-icon {
    background: url("/css/2019/images/cdn_ic7.png") no-repeat center;
}
.cdn-adv-item.adv-1:hover .cdn-adv-icon {
    background: #0066ff url("/css/2019/images/cdn_ic7_1.png") no-repeat center;
    border-color: #0066ff;
}
/* 图标2 - CC策略 */
.cdn-adv-item.adv-2 .cdn-adv-icon {
    background: url("/css/2019/images/cdn_ic8.png") no-repeat center;
}
.cdn-adv-item.adv-2:hover .cdn-adv-icon {
    background: #0066ff url("/css/2019/images/cdn_ic8_1.png") no-repeat center;
    border-color: #0066ff;
}
/* 图标3 - 自动切换 */
.cdn-adv-item.adv-3 .cdn-adv-icon {
    background: url("/css/2019/images/cdn_ic9.png") no-repeat center;
}
.cdn-adv-item.adv-3:hover .cdn-adv-icon {
    background: #0066ff url("/css/2019/images/cdn_ic9_1.png") no-repeat center;
    border-color: #0066ff;
}
/* 图标4 - 多链路回源 */
.cdn-adv-item.adv-4 .cdn-adv-icon {
    background: url("/css/2019/images/cdn_ic10.png") no-repeat center;
}
.cdn-adv-item.adv-4:hover .cdn-adv-icon {
    background: #0066ff url("/css/2019/images/cdn_ic10_1.png") no-repeat center;
    border-color: #0066ff;
}

.cdn-adv-item h6 {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin: 15px 0 10px;
}
.cdn-adv-item p {
    font-size: 14px;
    color: #666;
    line-height: 24px;
}

/* ============================================================
   应用场景
   ============================================================ */
.cdn-con4 {
    background: #f9faff;
}
.cdn-scene-card {
    background: #fff;
    padding: 25px 28px;
    height: 100%;
    min-height: 250px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}
.cdn-scene-card h6 {
    font-size: 18px;
    color: #191c3d;
    font-weight: bold;
}
.cdn-scene-card .cdn-line {
    width: 54px;
    height: 3px;
    background: #0066ff;
    margin: 16px 0;
}
.cdn-scene-card p {
    font-size: 14px;
    color: #666;
    line-height: 24px;
    text-align: justify;
}
.cdn-scene-card.cdn-card-hover:hover { box-shadow: 0 8px 20px rgba(0, 132, 255, 0.08); }

/* ============================================================
   常见问题 - 去掉横线
   ============================================================ */
.cdn-faq-list { margin-top: 20px; }
.cdn-faq-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    flex-wrap: wrap;
}
.cdn-faq-list li span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #0066ff;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cdn-faq-list li a {
    font-size: 14px;
    color: #333;
    transition: 0.2s;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cdn-faq-list li a:hover { color: #0066ff; }

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 992px) {
    .cdn-banner .cdn-banImg { text-align: center; margin-top: 30px; }
    .cdn-banner .cdn-banTxt { text-align: center; }
    .cdn-banner .cdn-banTxt .cdn-btn { margin: 0 auto; }
    .cdn-intro-card { flex-direction: column; align-items: center; text-align: center; }
    .cdn-intro-card .cdn-intro-txt p { text-align: center; }
    .cdn-scene-card { min-height: 200px; }
    .cdn-arch-wrap .cdn-arch-label {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 20px;
    }
}
@media (max-width: 768px) {
    .cdn-section { padding-top: 60px; padding-bottom: 60px; }
    .cdn-title { font-size: 24px; }
    .cdn-banner { margin-top: 60px; padding: 40px 0; }
    .cdn-banner .cdn-banTxt h1 { font-size: 26px; }
    .cdn-banner .cdn-banTxt p { font-size: 16px; }
    .cdn-adv-item .cdn-adv-icon { width: 50px; height: 50px; background-size: 24px !important; }
    .cdn-adv-item h6 { font-size: 16px; }
    .cdn-arch-wrap { padding: 20px; }
    .cdn-scene-card { min-height: 160px; padding: 20px; }
    .cdn-arch-wrap .cdn-arch-label {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 20px;
    }
}
@media (max-width: 480px) {
    .cdn-section { padding-top: 40px; padding-bottom: 40px; }
    .cdn-title { font-size: 20px; }
    .cdn-banner { margin-top: 60px; padding: 30px 0; }
    .cdn-banner .cdn-banTxt h1 { font-size: 20px; }
    .cdn-banner .cdn-banTxt p { font-size: 14px; margin: 20px 0 25px; }
    .cdn-banner .cdn-banTxt .cdn-btn { height: 36px; line-height: 36px; font-size: 13px; width: 120px; }
    .cdn-adv-item .cdn-adv-icon { width: 44px; height: 44px; background-size: 20px !important; }
    .cdn-adv-item h6 { font-size: 14px; }
    .cdn-adv-item p { font-size: 12px; line-height: 20px; }
    .cdn-intro-card { padding: 20px; min-height: 120px; }
    .cdn-intro-card .cdn-intro-txt h4 { font-size: 16px; }
    .cdn-intro-card .cdn-intro-txt p { font-size: 13px; line-height: 22px; }
    .cdn-scene-card { padding: 16px; min-height: 140px; }
    .cdn-scene-card h6 { font-size: 16px; }
    .cdn-scene-card p { font-size: 13px; line-height: 22px; }
    .cdn-faq-list li a { font-size: 13px; }
    .cdn-faq-list li span { width: 16px; height: 16px; font-size: 11px; line-height: 16px; }
    .cdn-arch-wrap .cdn-arch-label { font-size: 12px; height: 36px; line-height: 36px; }
    .cdn-arch-wrap .cdn-arch-label {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 20px;
    }
}