body {
    font-family: pingfang SC,helvetica neue,arial,hiragino sans gb,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important;
    color: var(--text-dark);
    background-color: #f7f7f7;
}
a{text-decoration: none}
div{box-sizing: border-box}
li{list-style: none;}
.clear{*zoom:1}
.clear:after {clear: both;height: 0;overflow: hidden;display: block;visibility: hidden;content: "."}
a{text-decoration: none; cursor: pointer}
a:hover {text-decoration: none}
.container{max-width: 1500px;}

:root {
    --aliyun-blue: #0066ff;
    --aliyun-dark-blue: #0070CC;
    --aliyun-light-blue: #E6F7FF;
    --aliyun-orange: #FF6A00;
    --text-dark: #333;
    --text-gray: #666;
    --text-light: #999;
    --border-color: #E8E8E8;
    --bg-gray: #F5F5F5;
    --white: #FFF;
}


.activity-countdown {
    background: #0066ff;
    color: white;
    padding: 15px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    opacity: 0;
}

.activity-countdown.visible {
    transform: translateY(0);
    opacity: 1;
}

.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}

.countdown-label {
    margin-right: 10px;
}

.countdown-time {
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 15px;
    border-radius: 20px;
    min-width: 150px;
    display: inline-block;
}

/* 顶部导航样式 */
.template-nav {background-color: var(--white);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);padding: 12px 0;}
.template-nav .logo {color: var(--aliyun-blue);font-size: 24px;font-weight: bold;text-decoration: none;}
.template-nav .logo>img{width: 120px;}
.template-nav .nav-link {color: var(--text-dark);font-size: 14px;padding: 8px 15px;margin: 0 5px;border-radius: 4px;}
.template-nav .nav-link:hover {color: var(--aliyun-blue);}
.template-nav .nav-link.active {color: var(--aliyun-blue);}
.template-nav .btn-login {color: var(--aliyun-blue);border: 1px solid var(--aliyun-blue);border-radius: 4px;padding: 5px 15px;margin-left: 10px;}
.template-nav .btn-register {background-color: var(--aliyun-blue);color: white;border-radius: 4px;padding: 5px 15px;margin-left: 10px;}


/* Banner样式 */
.activity-banner {
    padding-top: 100px;
    margin-bottom: 20px;
    background: url('images/template-banner.png') center center no-repeat;
    background-size: cover;
    height: 300px; /* 默认高度 */
}
.activity-center{text-align: center}
.activity-date {
    display: inline-block;
    background-color: var(--aliyun-blue);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 36px;
    margin-bottom: 15px;
}


.activity-subtitle {
    color: var(--text-gray);
    font-size: 18px;
    margin-bottom: 20px;
}
.activity-subtitle>a{font-weight: 600}
@media (max-width: 768px) {
    .activity-banner {
        padding-top: 60px;
        height: 200px; /* 默认高度 */
    }
    .activity-date{
        font-size: 26px;
    }
    .activity-subtitle{
        font-size: 14px;
    }
}
/* 产品卡片样式 */
.remaining-count {
    font-size: 24px;
    color: #0066ff;
    font-weight: bold;
    border-radius: 15px;
    display: inline-block;
    margin-left: 10px;
    margin-top: -12px;
}

.count-number {
    font-size: 26px;
    color: #FF6A00;
}

.product-section {
    margin-bottom: 30px;
    margin-top: 60px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    position: relative;
    padding-left: 12px;
}

.section-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background-color: var(--aliyun-blue);
    border-radius: 2px;
}

.section-more {
    color: var(--aliyun-blue);
    font-size: 14px;
    text-decoration: none;
}

.section-more:hover {
    text-decoration: underline;
}

.product-card {
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    height: 100%;
    transition: all 0.3s;
    padding-bottom: 27px;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 161, 233, 0.1);
    }

.product-card.featured {
    position: relative;
}
.product-card.featured1 {
    position: relative;
}

.product-card.featured:before {
    content: "推荐";
    position: absolute;
    top: 0;
    right: 15px;
    background-color: var(--aliyun-orange);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 0 0 4px 4px;
}
.product-card.featured1:before {
    content: "限时";
    position: absolute;
    top: 0;
    right: 15px;
    background: linear-gradient(90deg, #015eea 0%, #00c0fa 100%);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 0 0 4px 4px;
}
.product-top{background:url("images/template-bg1.png") 100%/100% 100% no-repeat;height: 99px;width: 100%;padding-top: 24px;padding-left: 24px}
.product-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.product-price {
    font-size: 24px;
    font-weight: 600;
    color: var(--aliyun-orange);
    margin-bottom: 15px;
}

.product-price small {
    font-size: 14px;
    color: var(--text-gray);
    font-weight: normal;
}

.product-price .original-price {
    font-size: 14px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-left: 5px;
}

.product-specs {
    margin-bottom: 15px;
    padding-left: 24px;
}

.spec-item {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
    margin-top: 20px;
}

.spec-label {
    color: var(--text-light);
    width: 70px;
}

.spec-value {
    color: #000;
    flex: 1;
}
.spec-value>i{display: inline-block;width: 54px;height: 22px;border: 1px solid #e8e8e8;color: #666;text-align: center;line-height: 22px;font-size: 12px;border-radius: 5px;margin-left: 10px}
.spec-value>.spec-off{display: inline-block;height: 22px;border: 1px solid #ff6a00;color: #ff6a00;text-align: center;line-height: 22px;font-size: 12px;border-radius: 5px;margin-left: 10px;padding: 0 10px}
.btn-buy {
    background-color: var(--aliyun-blue);
    border: none;
    width: 85%;
    font-size: 14px;
    transition: all 0.3s;
    display: block;
    margin: 20px auto 0;
    text-align: center;
    height: 45px;
    line-height: 45px;
   position: relative;
            overflow: hidden;
            z-index: 1;
            transition: all 0.3s ease;
             font-weight: bold;
            background: #fff;
            border: 1px solid #0066ff;
            color: #0066ff;
            border-radius: 100px;
            text-decoration: none;
            cursor: pointer;
}


.btn-buy::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: var(--progress-width, 0%);
            height: 100%;
            background: #d5e4fa;
            transition: width 0.5s ease;
            z-index: -1;
        }

        .btn-buy .progress-text {
            position: relative;
            z-index: 2;
            color: #ff6a00;
        }

        .btn-buy:hover::before {
            filter: brightness(1.1);
        }

        .btn-buy.disabled {
            background-color: #cccccc;
            cursor: not-allowed;
            pointer-events: none;
        }

        .btn-buy.disabled::before {
            width: 100% !important;
        }

        .btn-buy.sold-out::before {
            width: 100% !important;
        }

        /* 已抢完状态 */
        .sold-out-text {
            font-weight: bold;
            color: #fff;
        }

/* 表格样式 */
.product-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.product-table th {
    background-color: var(--aliyun-light-blue);
    color: var(--aliyun-blue);
    font-weight: 600;
    height: 50px;
    text-align: left;
    font-size: 16px;
    padding-left: 15px;
}

.product-table td {
    height: 70px;
    border-bottom: 1px solid #eeeeee;
    font-size: 14px;
    text-align: left;
    padding-left: 15px;
}

.product-table tr:last-child td {
    border-bottom: none;
}

.product-table tr:hover {
    background-color: var(--aliyun-light-blue);
}
.product-table tr.product-2{background: #E6F7FF}
.product-table tr.product-2>td:nth-child(1){position: relative;}
.product-table tr.product-2>td:nth-child(1):after{
    content: "推荐";
    position: absolute;
    top: 0;
    left: 0px;
    background-color: var(--aliyun-orange);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 0 0 4px 4px;
}
.product-table td.table-price {
    color: var(--aliyun-orange);
    font-weight: 600;
    font-size: 22px;
}

.product-table td .btn-buy1 {
    display: block;
    background-color: var(--aliyun-blue);
    color: white;
    border-radius: 4px;
    width: 90%;
    height: 38px;
    font-size: 14px;
    transition: all 0.3s;
    margin: 0px auto;
    text-align: center;
    line-height: 38px;
}
.product-table td .original-price{
    font-size: 12px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-left: 5px;
}
.btn-buy1:hover {
    background-color: var(--aliyun-dark-blue);
    color: white;
}



/* 数据中心地图样式 */
.datacenter-section {
    margin-bottom: 80px;
    margin-top: 60px;
}

.datacenter-map {
    background-color: var(--white);
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.map-container {
    height: 400px;
    background-color: #F1F9FF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #E1F0FF 25%, #F1F9FF 25%, #F1F9FF 50%, #E1F0FF 50%, #E1F0FF 75%, #F1F9FF 75%, #F1F9FF);
    background-size: 20px 20px;
}

.yw_con4{width: 100%;background: #fafafa;box-sizing: border-box;padding: 100px 0;}



.yw_c4Con{margin-top: 80px;position: relative}



.yw_c4_tit{position: absolute;left: 20px;bottom: -51px}



.yw_c4_tit>li{margin-top: 27px;}



.yw_c4_tit>li>p:nth-child(1){font-size: 20px;color: #333;margin-bottom: 5px;font-weight: bold;}



.yw_c4_tit>li>p:nth-child(2){font-size: 14px;color: #666;}



.yw_c4_line{width: 117px;height: 1px;border: 1px dotted #e0e0e0;box-sizing: border-box;}



.map_bg {position: relative;}



.map_bg {width: 1153px;height: 520px;position: relative;margin: 50px auto;background-image: url(https://www.idc10000.net/index-img/qqjd_map.png);background-position: -25px;}



.map_biao1{ width:120px; height:120px; position:relative; top:14px; left:147px;}



.map_biao2{ width:120px; height:120px; position:relative; top:-20px; left:145px;}



.map_biao3{ width:120px; height:120px; position:relative; top:-32px; left:191px;}



.map_bg .map_biao3 p{position: absolute; top: 50px;left:0px;bottom: 0;}



.map_biao4{ width:120px; height:120px; position:relative; top:-138px; left:209px;}



.map_biao5{ width:120px; height:120px; position:relative; top:-197px; left:315px;}



.map_biao6{ width:120px; height:120px; position:relative; top:-538px; left:456px;}



.map_biao7{ width:120px; height:120px; position:relative; top:-639px; left:467px;}



.map_bg .map_biao6 p{position: absolute; top: 52px;left:25px;bottom: 0;}



.map_bg .map_biao7 p{position: absolute; top: 52px;left:15px;bottom: 0;}



.map_biao8{ width:120px; height:120px; position:absolute; top:66px; left:484px;}



.map_bg .map_biao8 p{position: absolute; top:36px;left:43px;bottom: 0;}



.map_biao9{ width:120px; height:120px; position:absolute; top:90px; left:492px;}



.map_biao10{ width:120px; height:120px; position:absolute; top:50px; left:502px;}



.map_biao11{ width:120px; height:120px; position:absolute; top:73px; left:508px;}



.map_biao12{ width:120px; height:120px; position:absolute; top:15px; left:600px;}



.map_biao13{ width:130px; height:130px; position:absolute; top:65px; left:646px;}



.map_biao14{ width:120px; height:120px; position:absolute; top:109px; left:561px;}



.map_biao15{ width:120px; height:120px; position:absolute; top:149px; left:552px;}



.map_biao16{ width:120px; height:120px; position:absolute; top:137px; left:673px;}



.map_biao17{ width:130px; height:130px; position:absolute; top:164px; left:632px;}



.map_bg .map_biao17 p{position: absolute; top:70px;left:43px;bottom: 0;}



.map_biao18{ width:120px; height:120px; position:absolute; top:204px; left:707px;}



.map_biao19{ width:120px; height:120px; position:absolute; bottom:43px; left:536px;}



.map_biao20{ width:120px; height:120px; position:absolute; top:184px; left:772px;}



.map_biao21{ width:120px; height:120px; position:absolute; top:210px; left:774px;}



.map_bg .map_biao20 p{position: absolute; top:38px;left:47px;bottom: 0;}



.map_bg .map_biao21 p{position: absolute; top:63px;left:7px;bottom: 0;}



.map_biao22{ width:120px; height:120px; position:absolute; top:242px; left:787px;}



.map_bg .map_biao22 p{position: absolute; top:63px;left:42px;bottom: 0;}



.map_biao23{ width:120px; height:120px; position:absolute; top:202px; left:804px;}



.map_biao24{ width:120px; height:120px; position:absolute; top:114px; left:866px;}



.map_bg .map_biao24 p{position: absolute; top:40px;left:48px;bottom: 0;}



.map_biao25{ width:120px; height:120px; position:absolute; top:111px; left:904px;}



.map_biao26{ width:120px; height:120px; position:absolute; top:149px; left:829px;}



.map_bg .map_biao26 p{position: absolute; top:40px;left:48px;bottom: 0;}



.map_biao27{ width:120px; height:120px; position:absolute; top:147px; left:856px;}



.map_biao28{ width:120px; height:120px; position:absolute; top:165px; left:843px;}



.map_biao29{ width:130px; height:130px; position:absolute; top:249px; left:837px;}



.map_biao30{ width:130px; height:130px; position:absolute; bottom:58px; left:872px;}



.map_biao31{position:absolute; bottom: 47px;right: 96px;}



.map_biao32{position:absolute; top: 175px;left: 135px;}



.map_biao33{position:absolute; top: 195px;left: 255px;}



.map_biao34{position:absolute; top: 162px;left: 281px;}



a.yuan{ display:block;background-color: #58d6ff;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 10px;height: 10px;margin: auto;-webkit-border-radius: 50%;-webkit-background-clip: padding-box;-moz-border-radius: 50%;-moz-background-clip: padding;border-radius: 50%; z-index:1}



a.yuan:hover{ background:#0FF}



a.yua{ display:block;background-color: #619ffc;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 10px;height: 10px;margin: auto;-webkit-border-radius: 50%;-webkit-background-clip: padding-box;-moz-border-radius: 50%;-moz-background-clip: padding;border-radius: 50%; z-index:1}



.map_bg p {font-size: 12px;color: #333;position: absolute;top: 50px;left: 70px;bottom: 0;}



.map_bg a.yuan {display: block;background-color: #619ffc;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 10px;height: 10px;margin: auto;-webkit-border-radius: 50%;-webkit-background-clip: padding-box;-moz-border-radius: 50%;-moz-background-clip: padding;border-radius: 50%;z-index: 1;}



.yuan2 {width: 100%;height: 100%;margin: auto;-webkit-border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-animation: yuan2 3s linear 0s infinite normal;}



.yuan3 {width: 100%;height: 100%;margin: auto;-webkit-border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-animation: yuan3 3s linear .5s infinite normal;}



@keyframes yuan2 {



    0% {



        width: 10px;



        height: 10px;



        border: 1px solid #58d6ff;



        opacity: 1;



    }



    100% {



        width: 120px;



        height: 120px;



        border: 1px solid #58d6ff;



        opacity: 0;



    }



}



@keyframes yuan3 {



    0% {



        width: 10px;



        height: 10px;



        border: 1px solid #059fff;



        opacity: 1;



    }



    100% {



        width: 120px;



        height: 120px;



        border: 1px solid #58d6ff;



        opacity: 0;



    }



}



.map_bzhu {font-size: 16px;color: #333;position: absolute;bottom: -50px;left: 45%;}



.map_bzhu img {margin-right: 5px;}

@media (max-width: 768px) {
    .product-table td{
        font-size: 12px;
    }
    .product-table td.table-price{
        font-size: 16px;
    }
    .datacenter-map{
        overflow-x: scroll;
    }
    .product-table th{
        font-size: 14px;
    }
}
/* 响应式调整 */
@media (max-width: 992px) {
    .product-card {
        margin-bottom: 15px;
    }
    .datacenter-map{
        overflow-x: scroll;
    }
}

@media (max-width: 768px) {
    .activity-title {
        font-size: 20px;
    }

    .section-title {
        font-size: 16px;
    }

    .product-name {
        font-size: 15px;
    }

    .product-price {
        font-size: 20px;
    }
    .product-table td .btn-buy1{
        width: 150%;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .aliyun-nav .nav-link {
        padding: 8px 10px;
        margin: 0 2px;
        font-size: 13px;
    }

    .activity-banner {
        padding: 60px 0;
    }

    .activity-title {
        font-size: 18px;
    }

    .product-table {
        font-size: 12px;
    }

    .product-table th,
    .product-table td {
        padding: 8px 10px;
    }
}

.qq_con{position: fixed;top: 200px;left: 0px;z-index: 9999;}
.qq_list{float: right;padding-left: 0;}
.qq_list>li{width: 50px;height: 50px;box-sizing: border-box;background: #2a88e0 url("https://www.idcbest.hk//images/qq_icon1.png") no-repeat 0px 0px;cursor: pointer;margin-top: 8px;}
.qq_list>li:nth-child(3) {background:#fff  url("https://www.idcbest.hk//images/qq_icon1.png") no-repeat 0px -58px;}
.qq_list>li:nth-child(2) {background:#fff  url("https://www.idcbest.hk//images/qq_icon1.png") no-repeat 0px -117px;}
.qq_list>li:nth-child(4) {background:#fff  url("https://www.idcbest.hk//images/qq_icon1.png") no-repeat 0px -175px;}
.qq_list>li:nth-child(5) {background:#fff  url("https://www.idcbest.hk//images/qq_icon1.png") no-repeat 0px -233px;}
.qq_list>li:hover{background-position-x: -60px}
.qq_list>li:hover .qq_list_con{display: block}
.qq_list_con{float: right;}
.qq_list_con{display: none;position: absolute;left: 50px;box-sizing: border-box;padding-right: 23px}
.qq_list>li:nth-child(2) .qq_list_con{top:-30%} /* Adjusted this for better positioning with content */
.qq_list_cons{box-sizing: border-box;padding: 30px;border-top: 3px solid #0084ff;border-right: 1px solid #dddddd;border-bottom:1px solid #dddddd;border-left: 1px solid #dddddd; background:#fff}
.qq_list_con1{width: 251px;}
.qq_top{width: 100%;box-sizing: border-box;padding-bottom: 15px;border-bottom: 1px solid #eee}
.qq_top>img{float: left;margin-right: 15px;width: 25px;height: 25px;}
.qq_top>.qq_tit{float: left;}
.qq_top>.qq_tit>p:nth-child(1){font-size: 20px;color: #0084ff;margin-top: -2px;}
.qq_top>.qq_tit>p:nth-child(2){font-size: 20px;color: #666;margin-top: 12px}
.qq_btm{box-sizing: border-box;padding-top: 14px}
.qq_btmTit{font-size: 14px;color: #333}

.qq_btm_kf>a{display: inline-block;width: 100%;height: 29px;line-height: 29px;font-size: 20px;color: #0084ff;margin-right: 30px;vertical-align: middle;}
.qq_btm_kf>a>span{font-size: 14px;color: #999999;display: block;}
.qq_btm_kf>a:last-child{margin-right: 0}
.qq_btm_kf>a:hover{color: #0084ff}
.qq_btm_kf>a>img{vertical-align: middle;margin-right: 7px;margin-top: -7px;}
.qq_list_con2{width: 272px;}
.qq_phone{font-size: 24px;color: #0084ff;text-align: center}
.qq_phone2{font-size: 14px;color: #999999;margin-top: 12px;text-align: center}
.qq_list_con3{width: 350px;}
.qq_ewm{width: 120px;float: left;text-align: center}
.qq_ewm>span{font-size: 12px;color: #0084ff;}
.qq_list_con4{width: 400px;height: 266px;border: none;padding: 0;margin-top: -60px}

.qq-kf{box-sizing: border-box;width: 300px;display: flex;flex-wrap: wrap;padding-left: 0 !important;}
.qq-kfList{margin-top: 20px;width: 140px;cursor: pointer;}
.qq-kf>.qq-kfList:nth-child(2n){margin-left: 20px;}
.qq-kfList>.qq-kfName>img{margin-right: 6px;vertical-align: middle}
.qq-kfList>.qq-kfName>span{font-size: 14px;color: #666}
.qq-kfList>.qq-kfName>span.qq-kfNameAct{color: #1b7edc}
.qq-kfEwm{display: none;width:300px;background: #fff;box-shadow: 0 0 18px rgba(0,0,0,0.08);margin-top: 16px;box-sizing: border-box;padding: 20px 30px;position: relative}
.qq-kf>.qq-kfList:nth-child(2n) .qq-kfEwm{margin-left: -160px} /* Adjusted for centering if needed */
.qq-kfEwm>.cbqq-sj{position: absolute;top:-10px;left: 36px;}
.qq-kf>.qq-kfList:nth-child(2n) .cbqq-sj{position: absolute;top:-10px;left: 197px;} /* Check this positioning */
.qq-kfEwm>.qq-kfzx{float: left;width: 102px;margin-right: 35px;}
.qq-kfEwm>.qq-kfzx:last-child{margin-right: 0}
.qq-kfEwm>.qq-kfzx>p{width: 102px;height: 102px;border: 1px solid #ededed;text-align: center;}
.qq-kfEwm>.qq-kfzx1>p{border: 2px solid #2bc200;}
.qq-kfEwm>.qq-kfzx>p>img{margin-top: 7px;}
.qq-kfEwm>.qq-kfzx>a{display: block;width: 102px;height: 32px;background: #1b7edc;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-radius: 8px;margin-top: 15px;}
.qq-kfList>.qq-kfName{position: relative}
.qq-kfList>.qq-kfName>.cbwz-hd{position: absolute;top: -3px;left: 13px;animation: blink 1s infinite}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.qq_phone>img{margin-top: -3px;margin-right: 8px;}