@media screen and (max-width: 1365px){
.sps_li{width:25%!important;margin: 0px!important;padding: 0!important;}
.sps_div_2{margin-left:338px;}
.last_div_2{width:82px;margin-right:0px;}
}
@media screen and (min-width:1366px) and (max-width: 1919px){
.sps_li{width:25%!important;margin: 0px!important;padding: 0!important;}
.sps_div_2{margin-left:338px;}
.last_div_2{width:82px;margin-right:0px;}
}
@media screen and (min-width:1920px){
.sps_li{width:26%!important;margin: 0px!important;padding: 0!important;}
.sps_div_2{margin-left:368px;}
.last_div_2{width:96px;margin-right:0px;}
.headdh ul.cf li h6 a{font-size: 20px!important;}
}
.enroll-btn {
    /* 1. 尺寸与布局 */
    padding: 15px 40px;
    /* 上下内边距15px，左右40px，保证按钮足够宽 */
    font-size: 20px;
    /* 字体大小 */
    font-weight: bold;
    /* 字体加粗 */
    color: white;
    /* 文字颜色 */
    text-align: center;
    text-decoration: none;
    /* 如果是a标签，去除下划线 */
    letter-spacing: 2px;
    /* 字间距，让文字不那么拥挤 */
    cursor: pointer;
    /* 鼠标悬停变手型 */
    border: none;
    /* 去除默认边框 */
    outline: none;
    /* 去除点击时的默认轮廓 */

    /* 2. 形状与背景 */
    border-radius: 50px;
    /* 大圆角，形成胶囊/椭圆形状 */
    /* 线性渐变：从上(浅蓝)到下(深蓝)，模拟顶部高光 */
    background: linear-gradient(180deg, #4a90e2 0%, #1a5cc9 100%);

    /* 3. 阴影效果 (核心部分) */
    /* 
第一层：inset 内阴影，模拟按钮顶部的光泽感和底部的暗部，增加立体感
第二层：外发光，模拟图片周围那一圈淡蓝色的辉光
*/
    box-shadow:
        inset 0 4px 10px rgba(255, 255, 255, 0.3),
        /* 顶部内高光 */
        inset 0 -4px 10px rgba(0, 0, 0, 0.2),
        /* 底部内阴影 */
        0 0 15px rgba(74, 144, 226, 0.6);
    /* 外部辉光 */

    /* 4. 过渡动画 (可选，增加交互感) */
    transition: transform 0.1s, box-shadow 0.2s;}

/* 鼠标悬停状态：光晕变强 */
.enroll-btn:hover {
    box-shadow:
        inset 0 4px 10px rgba(255, 255, 255, 0.3),
        inset 0 -4px 10px rgba(0, 0, 0, 0.2),
        0 0 25px rgba(74, 144, 226, 0.9);}

/* 鼠标按下状态：模拟按钮被按下去 */
.enroll-btn:active {
    transform: scale(0.96);
    /* 稍微缩小 */
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.2);}

.text-center{text-align:center;}
.chtitle h1{font-size:32px;padding-top:0px;margin-bottom:20px;font-weight: bold;}


.explore-key{padding:0 10px 20px;}
.explore-key a{font-size:16px;color: white;padding:7px 20px;margin: 8px 18px 15px 0;border:1px solid #ddd;border-radius:50px;position:relative;}
.explore-key a.more{width: 50px;height: 50px;color: #fff;font-size:14px;padding:14px 10px;font-weight:700;background-color:#1b2a60;border-radius:50%;display: inline-block;}
.explore-key a.fade-blue{color:#1b2a60;border-color:#1b2a60;}
.explore-key a.fade-yellow{color:#fdc911;border-color:#fdc911;}
.explore-key a:hover{color:#fff;background-color: #1b2a60;border-color:#1b2a60;}
.explore-key a.fade-yellow:hover{background-color: #fdc911;border-color:#fdc911;}
.explore-key a::after {position: absolute;content: "";width: 100%;height: 100%;left: 0;top: 0;border-radius:50px;opacity: 0.34;z-index: -10;-webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;-ms-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s;}
.explore-key a.fade-blue:hover::after{background:#1b2a60;}
.explore-key a.fade-yellow:hover::after{background:#fdc911;}
.explore-key a:hover::after {z-index: -10;-webkit-animation: outer-ripple 2000ms linear infinite;-moz-animation: outer-ripple 2000ms linear infinite;animation: outer-ripple 2000ms linear infinite;}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    /* font-weight:400; */
    /* line-height:1.42857143; */
    /* text-align:center; */
    /* white-space:nowrap; */
    /* vertical-align:middle; */
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px
;}
  .row {
    margin-right: -10px;
    margin-left: -10px;
    padding-top: 42px;
    overflow: hidden;}
.col-md-3,.col-md-12 {
        float:left
;}
@media (min-width: 992px){
    .col-md-12 {
        width: 100%
    ;}
    .row-20{margin:0 -20px;}
    .col-pd-20{padding:0 20px;}
    .major-page-text{padding-right:10%;}
}
.col-md-3 {
        width: 33%
;}

.media-card2{height:130px;border:1px solid #bbbbbb;background:#f3f3f3;border-radius:10px;margin-bottom:20px;text-align:center;position:relative;}
.media-card2 .pic{width:50px;height:50px;margin:10px auto;background: #218dd5;border-radius:50%;}
.media-card2 .pic img{width:100%;height:auto;}
.media-card2 .pic .img1{display:block;}
.media-card2 .pic .img2,.media-card2 .pic .img3{display:none;}
.media-card2 h4{color:#000;font-size:17px;margin-bottom:5px;}
.media-card2 p{color:#9a9a9a;font-size:12px;font-weight:bold;font-style: italic;}

.media-card2:hover{background: #218dd5 url(images/icon-build.png) right bottom no-repeat;background-size:auto 100%;}
.media-card2:hover .pic{background:#fff;border-radius:5px;padding:3px;width:80px;height:80px;}
.media-card2-last:hover .pic{width:50px;height:50px;}
.media-card2:hover .pic .img1,.media-card2:hover h4{display:none;}
.media-card2:hover .pic .img2,.media-card2:hover .pic .img3{display:block;}
.media-card2:hover h4,.media-card2:hover p{color:#fff;}
.media-card2 .pic .img2,.media-box2 .media-card2 .pic .img3,.media-box2 .media-card-last .span2{display:none;}
.media-card2:hover .pic .img2,.media-box2 .media-card2:hover .pic .img3,.media-box2 .media-card-last:hover .span2{display:block;}
.media-card-last:hover .pic{width:50px;height:50px;border-radius:50%;}
.media-card-last:hover .span1{display:none;}
.media-more{padding:15px;background:#f3f3f3;color:#9a9a9a;font-style: italic;border-radius:10px;letter-spacing:2px;}
.media-card2 .media-tips-btn{width:20px;height:20px;line-height:20px;color:#bbbbbb;font-size:12px;display:block;border:1px solid #bbbbbb;background:#ffffff;text-align:center;position:absolute;top:10px;right:15px;border-radius:50%;cursor:pointer;font-weight:bold;}
.media-card2 .media-tips-text{width:200px;padding:5px 10px;border:1px solid #dddddd;position:absolute;top:0;left:100%;z-index:1;border-radius:5px;text-align:left;background:#dddddd;display:none;}
.media-card2 .media-tips-text:after{width:0;height:0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 8px solid #dddddd;content:"";position: absolute;top:50%;left: -7px;margin-top:-8px;}
.media-active .media-tips-text{display:block;}
.media-tips-text{color: #4d4d4d;font-size: 14px;font-family: "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体";}
a{text-decoration:none;}
a:hover,a:focus {color:#00c7ff;text-decoration:none;}
a:focus{outline:none;}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}

body {
    background: #f5f5f5;
    font-family: "Microsoft YaHei", sans-serif;}

.carousel-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;}

.carousel-inner {
    display: flex;
    transition: transform 0.6s ease-in-out;}

.carousel-slide {
    min-width: 100%;
    position: relative;}

.carousel-slide img {
    width: 100%;
    display: block;
    object-fit: cover;}

.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 10;}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border: 1px solid #2d90ff;
    background: #ffffff;
    margin: 0 7px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;}

.carousel-dots .dot.active {
    background: #00c7ff;
    border-color: #00c7ff;}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s, background 0.3s;}

.carousel:hover .carousel-btn {
    opacity: 1;}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.6);}

.carousel-btn.prev {
    left: 16px;}

.carousel-btn.next {
    right: 16px;}
.m-klink a{float: left; width: 49%;}
.m-klink a img{position: relative;}