/* 重置 & 基础 */
body {
    background: #00070e !important;
    font-family:pingfang SC,helvetica neue,arial,hiragino sans gb,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important;
    color: #fff;
}
a { text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
ul, li { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; vertical-align: middle; }
/* 容器最大宽度 1350px */
.sgtg-container {
    max-width: 1350px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* 每部分上下 padding 90px */
.sgtg-section {
    padding-top: 90px;
    padding-bottom: 90px;
}
/* 大标题 30px 居中 */
.sgtg-title {
    font-size: 30px;
    text-align: center;
    color: #fff;
    margin-bottom: 0;
}
.sgtg-subtitle {
    font-size: 14px;
    text-align: center;
    color: #fff;
    margin-top: 15px;
}
.sgtg-subtitle a { color: #06fdfa; }
/* 按钮 & 卡片 hover 效果 */
.sgtg-btn {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border: 1px solid #fff;
    padding: 0 30px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    border-radius: 10px;
}
.sgtg-btn-primary {
    background: #06c9e7;
    border: none;
}
.sgtg-btn-outline { background: transparent; }
.sgtg-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(6, 201, 231, 0.3);
}
.sgtg-btn-primary:hover { background: #05b3cf; border: none; }
.sgtg-btn-outline:hover { background: #06c9e7; border: 1px solid #06c9e7; }
/* 卡片 hover */
.sgtg-card-hover {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.sgtg-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(6, 201, 231, 0.15);
}
/* ---------- banner ---------- */
.sgtg-banner {
    width: 100%;
    background: url("/css/2024/images/sggpu-banner.png") no-repeat top center;
    background-size: cover;
    height: 575px;
    display: flex;
    align-items: center;
}
.sgtg-banTxt { padding-top: 40px; }
.sgtg-banTxt h1 { font-size: 40px; color: #fff; }
.sgtg-banTxt p { font-size: 14px; color: #fff; margin: 30px 0 60px; }
.sgtg-banBtn { display: flex; gap: 30px; flex-wrap: wrap; }
.sgtg-banBtn .sgtg-btn { width: 200px; margin-right: 0; }

/* ---------- 优势区域：标题在外，背景全屏 ---------- */
.sgtg-advantage-wrap {
    padding: 0;
    margin-top: 30px;
}
/* 标题列表 - 在背景色之上 */
.sgtg-tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 30px;
    margin: 0;
    background: transparent;
    position: relative;
    z-index: 2;
}
.sgtg-tab-list .sgtg-tab-item {
    font-size: 16px;
    color: #fff;
    height: 62px;
    line-height: 62px;
    padding: 0 50px;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: 3px solid transparent;
    background: transparent;
    white-space: nowrap;
    position: relative;
}
/* 桌面端：active 状态无边框，避免闪烁 */
.sgtg-tab-list .sgtg-tab-item.active {
    color: #06fdfa;
    border-bottom: 3px solid transparent !important;
}
/* 箭头图片 - 使用背景图，与背景色顶端对齐 */
.sgtg-tab-list .sgtg-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -29px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://www.idcbest.hk/2024/images/sggup-choosed.png) no-repeat center bottom;
}

/* 内容背景全屏 */
.sgtg-tab-content-wrap {
    background: #021414;
    padding: 70px 0;
    min-height: 380px;
    margin-top: 0;
    position: relative;
    z-index: 1;
}
.sgtg-tab-pane { display: none; }
.sgtg-tab-pane.active { display: block; }
.sgtg-tab-pane .row { align-items: center; }
.sgtg-ysTxt p { color: #fff; font-size: 14px; line-height: 30px; margin-bottom: 30px; }
.sgtg-ysTxt-btn { display: flex; gap: 30px; flex-wrap: wrap; }
.sgtg-ysTxt-btn .sgtg-btn { width: 214px; }
/* 图片动画 */
@keyframes shake {
    0% { transform: translateY(0); }
    25% { transform: translateY(-15px); }
    50% { transform: translateY(0px); }
    75% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.sgtg-float-img {
    animation: shake 5s infinite;
}

/* ---------- 应用场景卡片 ---------- */
.sgtg-cj-card {
    background: transparent;
    border: 1px solid #06c9e7;
    padding: 30px 25px;
    height: 100%;
    transition: 0.3s;
}
.sgtg-cj-card h2 { font-size: 18px; color: #06fdfa; }
.sgtg-cj-card p { font-size: 14px; color: #fff; line-height: 30px; margin-top: 10px; }
.sgtg-cj-card .sgtg-cjsl { margin-top: 25px; }
.sgtg-cj-card-dark {
    background: #0f3940;
    border: 1px solid #06c9e7;
    padding: 30px 25px;
    height: 100%;
    transition: 0.3s;
}
.sgtg-cj-card-dark h2 { font-size: 18px; color: #06fdfa; }
.sgtg-cj-card-dark p { font-size: 14px; color: #fff; line-height: 30px; margin-top: 10px; }
.sgtg-cj-card-dark .sgtg-cjsl { margin-top: 25px; }

/* 中间一行间距调整 - 减小上下间距 */
.sgtg-cj-row-middle {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* ---------- 客户案例：标题和背景图是一个整体 ---------- */
.sgtg-con3 {
    background: url("/css/2024/images/sggpu-khal.png") no-repeat center center;
    background-size: cover;
    min-height: 869px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 90px;
    padding-bottom: 90px;
}
.sgtg-con3 .sgtg-title {
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* ---------- 产品推荐 - 还原原样式 ---------- */
.sgtg-prod-card {
    background: url("/css/2024/images/sggup-tj.png") no-repeat top center;
    background-size: contain;
    width: 217px;
    height: 218px;
    padding-top: 76px;
    text-align: center;
    transition: 0.4s;
    cursor: pointer;
    margin: 0 auto;
}
.sgtg-prod-card:hover { transform: translateY(-6px); }
.sgtg-prod-card p { height: 44px; margin: 0; }
.sgtg-prod-card h2 { font-size: 16px; color: #06fdfa; margin-top: 10px; }
.sgtg-prod-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-top: 70px;
}

/* ---------- 底部定制 ---------- */
.sgtg-con5 {
    background: url("/css/2024/images/slyj-bg3.png") no-repeat center center;
    background-size: cover;
    padding: 100px 0;
    text-align: center;
}
.sl-dz { font-size: 30px; color: #fff; }
.sl-ljdz {
    display: inline-block;
    width: 247px;
    height: 70px;
    background: #06c9e7;
    font-size: 14px;
    color: #fff;
    line-height: 70px;
    text-align: center;
    transition: 0.5s;
    margin-top: 50px;
    border-radius: 10px;
}
.sl-ljdz:hover { transform: translateY(-3px); background: #05b3cf; color: #fff; }

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px) {
    /* banner 高度减小 */
    .sgtg-banner {
        height: 420px;
        background-position: center center;
    }
    .sgtg-banTxt { padding-top: 20px; }
    .sgtg-banTxt h1 { font-size: 26px; }
    .sgtg-banTxt p { font-size: 13px; margin: 20px 0 35px; }
    .sgtg-title{font-size: 24px}
    .sgtg-banBtn .sgtg-btn { width: 150px; height: 50px; line-height: 50px; font-size: 13px; }
    .sgtg-tab-list .sgtg-tab-item {
        font-size: 13px;
        padding: 0 16px;
        height: 50px;
        line-height: 50px;
    }
    .sgtg-tab-list { gap: 0 12px; }
    .sgtg-tab-content-wrap { padding: 40px 0; }
    .sgtg-ysTxt-btn .sgtg-btn { width: 170px; height: 50px; line-height: 50px; font-size: 13px; }
    .sgtg-prod-card { width: 150px; height: 170px; padding-top: 56px; background-size: contain; }
    .sgtg-prod-card p { height: 34px; }
    .sgtg-prod-card h2 { font-size: 14px; }
    .sgtg-prod-wrap { gap: 15px; }
    .sgtg-con3 { min-height: 300px; padding-top: 50px; padding-bottom: 50px; }
    /* 移动端隐藏箭头图片，用边框代替 */
    .sgtg-tab-list .sgtg-tab-item.active::after {
        display: none;
    }
    .sgtg-tab-list .sgtg-tab-item.active {
        border-bottom: 3px solid #06fdfa !important;
    }
    .sl-dz{font-size: 24px}
    .sgtg-con5{padding: 60px 0;}
}
@media (max-width: 480px) {
    .sgtg-banner {
        height: 320px;
    }
    .sgtg-banTxt h1 { font-size: 20px; }
    .sgtg-banTxt p { font-size: 12px; margin: 15px 0 25px; }
    .sgtg-banBtn .sgtg-btn { width: 140px; height: 44px; line-height: 44px; font-size: 12px; }
    .sgtg-tab-list .sgtg-tab-item {
        font-size: 12px;
        padding: 0 10px;
        height: 44px;
        line-height: 44px;
    }
    .sgtg-tab-list { gap: 0 6px; }
    .sgtg-ysTxt-btn .sgtg-btn { width: 140px; height: 44px; line-height: 44px; font-size: 12px; }
    .sgtg-prod-card { width: 110px; height: 130px; padding-top: 40px; }
    .sgtg-prod-card p { height: 24px; }
    .sgtg-prod-card h2 { font-size: 11px; }
    .sgtg-prod-wrap { gap: 10px; }
    .sgtg-con3 { min-height: 200px; padding-top: 30px; padding-bottom: 30px; }
    .sgtg-section { padding-top: 50px; padding-bottom: 50px; }
    .sgtg-title { font-size: 20px; }
}