.xnbg{display:block;transform: scale(1.2);font-weight:bold;text-align:center;animation:myfirst 1s infinite; -moz-animation:myfirst 1s infinite; /* firefox */ -webkit-animation:myfirst 1s infinite; /* safari and chrome */ -o-animation:myfirst 1s infinite;}

@keyframes myfirst
{
    0%   {color:yellow;transform: scale(1.4);}
    100% {color:#f9aa03;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {color:#f9aa03;transform: scale(1.4);}
    100% {color:#fff;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {color:#f9aa03;transform: scale(1.4);}
    100% {color:#fff;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {color:#f9aa03;transform: scale(1.4);}
    100% {color:#fff;}
}
/**
组件样式
*/
  .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;}
        
        .swiper-container {
            width: 100%;
            height: 100vh;
            overflow: hidden;}
        
        .swiper-slide {
            position: relative;
            overflow: hidden;}
        
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;}
        
        /* 效果1: 缩放动画 */
        .effect-zoom img {
            transition: all 8s ease;
            transform: scale(1);}
        
        .swiper-slide-active.effect-zoom img {
            transform: scale(1.2);}
        
         /* 效果2: 缩放动画 */
        .effect-zoom1 img {
            transition: all 8s ease;
            transform: scale(1.2);}
        
        .swiper-slide-active.effect-zoom1 img {
            transform: scale(1);}
        
        /* 效果3: 淡入淡出 */
        .effect-fade img {
            transition: all 1.5s ease;
            opacity: 0.5;}
        
        .swiper-slide-active.effect-fade img {
            opacity: 1;}
        
        /* 效果4: 3D翻转 */
        .effect-flip {
            perspective: 1200px;}
        
        .effect-flip img {
            transition: all 1.2s ease;
            transform: rotateY(90deg);
            opacity: 0.7;}
        
        .swiper-slide-active.effect-flip img {
            transform: rotateY(0deg);
            opacity: 1;}
        
        /* 效果5: 滑动进入 */
        .effect-slide img {
            transition: all 1s ease;
            transform: translateX(100%);}
        
        .swiper-slide-active.effect-slide img {
            transform: translateX(0);}
        
        /* 效果6: 模糊到清晰 */
        .effect-blur img {
            transition: all 1.5s ease;
            filter: blur(10px);}
        
        .swiper-slide-active.effect-blur img {
            filter: blur(0);}
        
        /* 效果7: 黑白到彩色 */
        .effect-color img {
            transition: all 2s ease;
            filter: grayscale(100%);}
        
        .swiper-slide-active.effect-color img {
            filter: grayscale(0%);}
        
        /* 效果8: 旋转缩放 */
        .effect-rotate img {
            transition: all 1.5s ease;
            transform: scale(0.8) rotate(-10deg);
            opacity: 0.7;}
        
        .swiper-slide-active.effect-rotate img {
            transform: scale(1) rotate(0deg);
            opacity: 1;}
        
        /* 效果9: 上下滑动 */
        .effect-slide-up img {
            transition: all 1.2s ease;
            transform: translateY(100%);}
        
        .swiper-slide-active.effect-slide-up img {
            transform: translateY(0);}
        
        .slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.5s ease 0.3s;
                display: none;}
        
        .swiper-slide-active .slide-caption {
            transform: translateY(0);}
        
        .slide-title {color:#fff;
            font-size: 1.5rem;
            margin-bottom: 5px;}
        
        .slide-desc {color:#fff;
            font-size: 0.9rem;
            opacity: 0.9;}
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
             display: none;}
        
        .control-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);}
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);}
        
        .effect-indicator {
            text-align: center;
            margin-top: 15px;
            font-size: 1.1rem;
            height: 30px;
            display:none;}
        
        @media (max-width: 768px) {
            .swiper-container {
                height: auto;}
            
            h1 {
                font-size: 2.2rem;}
            
            .controls {
                flex-wrap: wrap;}
        }
        
        
      
.snum{position:absolute;top:0;left:0;background:#1351ae;color:#fff;border-radius*:100%;width:18px;height:18px;line-height:18px;text-align:center;display:block;}
.miso-slide a:hover .snum{background:#fff;color:#1351ae;}
.rednum{background:red;}
.miso-slide a:hover .rednum{color:red;}

@media (max-width:1100px){
.list_box11 li{width: 10.33%;}
.list_box12 li{width:100%;text-align:center;}

}
@media (max-width:800px){
.list_box11 li{width: 14.33%;}
.list_box12 li{width:100%;text-align:center;}
 
}
@media (max-width:540px){
.list_box11 li{width: 20.33%;}

}

@media (max-width: 400px){
.list_box11 li{width: 28.33%;}

}
  .xmt-ico{ width:100%;  text-align: center;}
 .xmt-ico li {
   display: inline-block;
    margin: 0 7px;
    text-align: center;
        margin-top: 24px;
         cursor: pointer;}

 .xmt-ico li a p {
    margin-top: 6px;
    color: #fff !important;}
  
   .xmt-ico li {
            position: relative;}
 .xmt-ico li .ewm-box {
            display: none;
            position: absolute;
            bottom: 105%;
            right: 0;
            z-index: 9;}

 .xmt-ico li .ewm-box img {
            width: 110px;
            height: 110px;
            max-width: 110px;}