@charset "utf-8";

.banner{position:relative;padding: 0rem 0 0}
.banner .banner-l{padding-top: .2rem;width: 22%; margin-right:1%; margin-left:2%;}
.banner .banner-l .slog img{width: 100%}
.banner .banner-l .topSer{margin-top: 30px}
.banner .banner-l .topSer .inp{ padding: 0 .75rem 0 .15rem;border-radius: .1rem;line-height: .5rem; transition: .3s;height: .5rem;background: #fff;width: 100%;box-shadow: 0 .1rem .15rem rgba(2, 30, 47, .1)}
.banner .banner-l .topSer .sub{position: absolute;top: 0;right: 0;bottom: 0;background: transparent;width: .65rem;text-align: center;line-height: .5rem;color: #834798;
  font-size: .24rem;cursor: pointer; }
 .banner .banner-l .topSer .sub:before{content: '';width: 1px;height: .2rem;background: #ddd;top: 50%;margin-top: -.1rem;position: absolute;left: 0}
.banner .banner-l .icoList{margin-top:20px}
.banner .banner-l .icoList li{width: calc(100% - .05rem);margin-bottom:20px}
.banner .banner-l .icoList li a{
	 display: flex;
      align-items: center;
      text-decoration: none;
      color: #0b3954;
    
      border-radius:16px;
      padding:25px 20px;
      box-shadow: 0 8px 22px rgba(0, 105, 148, 0.08);
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
      border: 1px solid rgba(91, 174, 211, 0.2);
     
      background: url(../images/icobg1.jpg) no-repeat center #FFFFFF;background-size: 100% 100% ;;
	
	
	/*display: flex;align-items: center;height: 1.5rem;border: 1px solid #bed6eb;border-radius: .1rem; transition: .3s;flex-direction: column;justify-content: center;background: #fff*/}
.banner .banner-l .icoList li .ico{width: .98rem;height: .78rem;display: flex;align-items: center;justify-content: center;}
.banner .banner-l .icoList li .ico img{width: .48rem}
.banner .banner-l .icoList li p{font-size: .2rem}

 .text-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            flex: 1;
            line-height: 1.3;
        }

        /* 中文主标题 */
        .text-block .zh-title {
            font-weight: 700;
            font-size:18px;
            letter-spacing: 0.03em;
            color: #0a3142;
            margin-bottom: 0.05rem;
            transition: color 0.2s;
        }

        /* 英文副标题 */
        .text-block .en-sub {
            font-weight: 500;
            font-size:16px;
            color: #4f7b94;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.85;
            transition: color 0.2s;
        }


/*.content{width: 100%;overflow: hidden;}*/

@media (min-width:1025px){
.banner .slide-ba .swiper-slide .sc{-webkit-transform:scale(1)}
.banner .slide-ba .swiper-slide-active .sc{-webkit-transform:scale(1.1);-webkit-transition:8s 1s linear;}
}




@media (min-width: 993px){
.content .wp{padding-right: 1.5rem}
.banner .slide-ba{width: 8.3rem;transform: rotate3d(0,0,1,90deg);transform-origin: top right;position: absolute;top: calc(100% + .6rem);right: 0}
.banner .slide-ba .swiper-slide{width: 7.7rem;height: 12.5rem; overflow: hidden;}
.banner .slide-ba .swiper-slide .slideImg{height: 5.7rem;background: #fff; }

.banner .slide-ba .swiper-slide  .item{transform: rotate3d(0,0,1,-90deg);transform-origin:top left;position: absolute;left: 0;top: 100%;width: 12.5rem;height: 7.7rem; }
.banner .banner-r{position: relative;width:100%;width: 75%;}
.banner .banner-r .swiDots{position: absolute;right:-.3rem;top: 0;bottom: 0; display: flex;flex-direction: column;justify-content: center; width: auto;z-index: 5}
.banner .banner-r .swiDots span{width: .07rem;height: .25rem;background: #fff;margin: .06rem 0;opacity: 1;border-radius: 50%}
.banner .banner-r .swiDots span.active{background: #834798;}

.banner .slide-ba .swiper-slide a{display: block;transition: .3s; clip-path: inset(0 round .3rem);;overflow: hidden;position: relative;border-radius: .3rem }
.banner .slide-ba .swiper-slide-next  .item a{transform: translateY(-.1rem);}
.banner .slide-ba .swiper-slide-next .item  .slideImg img{opacity: 0;}
.banner .slide-ba .swiper-slide-next+.swiper-slide .item  .slideImg{background: #bdd5eb}
.banner .slide-ba .swiper-slide-next+.swiper-slide .item  .slideImg img{opacity: 0;}

.banner .slide-ba .swiper-slide-next .slideImg{background: #679ed2}
.banner .banner-l .icoList li a i{ font-size:40px}
.banner .banner-l .icoList li:nth-child(1) a i{color: #ff5670;}
.banner .banner-l .icoList li:nth-child(2) a i{color: #fbb201;}
.banner .banner-l .icoList li:nth-child(3) a i{color: #78deaf;}
.banner .banner-l .icoList li:nth-child(4) a i{color: #5cc3e2;}
.banner .banner-l .icoList li:nth-child(5) a i{color: #4286c7;}
.banner .banner-l .icoList li:nth-child(6) a i{color: #834798;}

.banner .banner-l .icoList li:nth-child(1) a:hover{border-color: #ff5670;color: #ff5670;box-shadow: 0 0 .25rem rgba(255,86,112,.3)}
.banner .banner-l .icoList li:nth-child(6) a:hover{border-color: #834798;color: #834798;box-shadow: 0 0 .25rem rgba(131,71,152,.3)}
.banner .banner-l .icoList li:nth-child(2) a:hover{border-color: #fbb201;color: #fbb201;box-shadow: 0 0 .25rem rgba(251,178,1,.3)}
.banner .banner-l .icoList li:nth-child(5) a:hover{border-color: #4286c7;color: #4286c7;box-shadow: 0 0 .25rem rgba(66,134,199,.3)}
.banner .banner-l .icoList li:nth-child(4) a:hover{border-color: #5cc3e2;color: #5cc3e2;box-shadow: 0 0 .25rem rgba(92,195,266,.3)}
.banner .banner-l .icoList li:nth-child(3) a:hover{border-color: #78deaf;color: #78deaf;box-shadow: 0 0 .25rem rgba(99,189,147,.3)}

.banner .banner-l .icoList li:nth-child(1) a:hover span{color: #ff5670;}
.banner .banner-l .icoList li:nth-child(6) a:hover span{color: #834798;}
.banner .banner-l .icoList li:nth-child(2) a:hover span{color: #fbb201;}
.banner .banner-l .icoList li:nth-child(5) a:hover span{color: #4286c7;}
.banner .banner-l .icoList li:nth-child(4) a:hover span{color: #5cc3e2;}
.banner .banner-l .icoList li:nth-child(3) a:hover span{color: #78deaf;}


}


@media (max-width: 1300px) {
	.banner .banner-l .icoList{margin-top:2px}
	.banner .banner-l .icoList li{margin-bottom:15px}
	  .text-block .en-sub {
           
            font-size:14px;
          
        }
		.banner .banner-l .icoList li a{
	
      padding:18px 20px;
      
}


@media (max-width: 992px){


.banner .banner-l{width: 100%;padding-top:0;order: 2}
.banner .banner-r{width: 100%;order: 1 }
.banner .banner-r .slide-ba .slideImg{height: 55vw;border-radius: .2rem}
.banner .banner-r .swiDots{display: flex;justify-content: center;;margin-top: .3rem}
.banner .banner-r .swiDots span{width: .35rem;height: .09rem;background: #fff;margin: 0 .08rem;opacity: 1;border-radius: 50%;box-shadow: 0 0 5px rgba(0,0,0,.1)}
.banner .banner-r .swiDots span.active{background: #834798;}
.banner .banner-l .slog{display: flex;justify-content: center;}
.banner .banner-l .slog img{max-width: 50%;}

.banner .banner-l .topSer{margin-top: .4rem}
.banner .banner-l .topSer .inp{ padding: 0 .9rem 0 .15rem;border-radius: .1rem;line-height: .7rem;transition: .3s;height: .7rem;background: #fff;width: 100%;box-shadow: 0 .1rem .15rem rgba(2, 30, 47, .1)}
.banner .banner-l .topSer .sub{width: .85rem;line-height: .7rem;color: #834798;font-size: .3rem;cursor: pointer; }
 .banner .banner-l .topSer .sub:before{content: '';width: 1px;height: .3rem;background: #ddd;top: 50%;margin-top: -.15rem;position: absolute;left: 0}

.banner .banner-l .icoList{margin-top: .5rem}
.banner .banner-l .icoList li{width: calc(50% - 20px);margin-bottom:30px}
.banner .banner-l .icoList li a{height:150px;;border-radius:12px;  }
.banner .banner-l .icoList li .ico img{width:100px}
.banner .banner-l .icoList li p{font-size: .28rem}


}

   @media (max-width: 767px) {
          

            /* 列表改为多行网格，一行四个 */
            .icoList {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap:10px;
                flex-direction: row;
            }

            /* 每个列表项宽度自适应网格 */
            .icoList li {
                width: 100%;
                border-radius:12px; box-shadow: none;
            }
			.icoList li a{box-shadow: none;
            }
			
			.banner .banner-l .icoList li{width:100%;margin-bottom:0px}
			.banner .banner-l .icoList li a{box-shadow: none; height:auto }

            /* 链接样式改为垂直排列：图标在上，文字在下 */
            .icoList li a.aniI {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding:10px 20px;;
                border-radius:10px;
                text-align: center;
                gap:10px;
            }

            /* 图标容器去除右边距，添加下边距 */
            .ico {
                margin-right: 0;
                margin-bottom:0px;
            }

            /* 图标适当缩小 */
            .card-icon-wrapper {
                width:50px;
                height:50px;
                border-radius:10px;
                font-size:20px;
            }

            /* 文字区域居中 */
            .text-block {
                align-items: center;
                justify-content: center;
                flex: none;
                width: 100%;
            }

            .text-block .zh-title {
                font-size:16px;
                font-weight: 400;
                margin-bottom: 0;
                white-space: nowrap;
            }

            /* 移动端隐藏英文副标题 */
            .text-block .en-sub {
                display: none;
            }
        }

        /* 更小屏幕微调（如320px宽度） */
        
		
@media (max-width: 597px){
.banner .banner-l .topSer{margin-top:0px}
.banner .banner-l .topSer .inp{ line-height: .8rem;transition: .3s;height: .8rem;font-size: .26rem}
.banner .banner-l .topSer .sub{line-height: .8rem;font-size: .38rem;cursor: pointer; }
 .banner .banner-l .topSer .sub:before{content: '';width: 1px;height: .3rem;background: #ddd;top: 50%;margin-top: -.15rem;position: absolute;left: 0}

.banner .banner-l .icoList li:nth-child(1) a i{color: #ff5670;}
.banner .banner-l .icoList li:nth-child(2) a i{color: #fbb201;}
.banner .banner-l .icoList li:nth-child(3) a i{color: #78deaf;}
.banner .banner-l .icoList li:nth-child(4) a i{color: #5cc3e2;}
.banner .banner-l .icoList li:nth-child(5) a i{color: #4286c7;}
.banner .banner-l .icoList li:nth-child(6) a i{color: #834798;}
}

@media (max-width: 380px) {
            .icoList {
                gap: 0.5rem;
            }
            .icoList li a.aniI {
                padding: 0.6rem 0.2rem;
            }
            .card-icon-wrapper {
                width: 2.4rem;
                height: 2.4rem;
                font-size: 1.1rem;
            }
            .text-block .zh-title {
                font-size:16px;
            }
        }