﻿/* 自定义样式 */
.card {
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.card img{
width:100%;
border-bottom:1px solid #ddd;
}
.card:hover {
    transform: translateY(-5px);
}
.card-title{
text-decoration:none;
}
.card-title a{
color:#444;text-decoration:none;
}
.card-title a:hover{
color:#f60;
}

    /* 自定义滑块样式 */
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #f3f3f3;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
    }

    /* 自定义导航按钮样式 */
    .swiper-button-next,
    .swiper-button-prev {
      width: 48px; /* 按钮宽度 */
      height: 48px; /* 按钮高度 */
      background-color: rgba(255, 255, 255, 0.5); /* 背景颜色 */
      color: black; /* 文字颜色 */
      border-radius: 50%; /* 圆形按钮 */
      transition: background-color 0.3s ease; /* 鼠标悬停效果 */
	  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);/* 添加黑色半透明投影 */
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
      background-color: rgba(0, 0, 0, 0.8); /* 鼠标悬停时的背景颜色 */
	  color: white; /* 文字颜色 */
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
      font-size: 24px; /* 箭头图标大小 */
      font-weight: bold; /* 加粗箭头图标 */
    }

    /* 自定义分页器样式 */
    .swiper-pagination {
      position: absolute;
      bottom: 0px;
      left: 50%;

    }

    .swiper-pagination-bullet {
      width: 24px; /* 分页点宽度 */
      height: 24px; /* 分页点高度 */
      background-color: rgba(255, 255, 255, 0.3); /* 默认分页点颜色 */
      opacity: 1; /* 去掉默认透明度 */
      margin: 0 6px; /* 分页点间距 */
      transition: background-color 0.3s ease; /* 鼠标悬停效果 */
	  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);/* 添加黑色半透明投影 */
      border-radius: 50%; /* 确保是圆形 */
    }

    .swiper-pagination-bullet-active {
	  background-color: rgba(0, 0, 0, 0.5); /* 当前激活分页点背景颜色变更为透明 */
      border: 5px solid white;/* 白色边框 */
    }
	
	
/*解决方案*/
.x_solutions{ width:100%; max-width:1920px; margin:0px auto; border:0px solid #F60;font-family:microsoft yahei; background-color:#fafbfb;}
.i_title{ text-align:left; overflow:hidden; margin-top:4%; margin-left:26px;}
.i_title .label{display:block;  height:22px; line-height:22px; color:#333333;  font-size:20px;transition:all 0.3s;}
.i_title .h4{  font-weight:bold; font-size:34px;max-height:120px; line-height:1.3; margin-top:8px; overflow:hidden; color:#333333;  transition:all 0.3s;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.i_title .p{margin-top:-10px; overflow:hidden; color:#666;  transition:all 0.3s;  font-size:16px;}
.i_title .rbtn{ float:right; margin-top:-55px;}
.i_solution{ margin-top:0%; overflow:hidden; margin-bottom:0%; }
.i_solution ul li{ float:left; width:13.31%; margin-right:1%;  overflow:hidden; position:relative; -webkit-transition:all 0.6s ease-out 0s; -moz-transition:all 0.6s ease-out 0s; -o-transition:all 0.6s ease-out 0s; transition:all 0.6s ease-out 0s; border-radius:10px;}
.i_solution ul li:nth-child(3n+0){ margin-right:0;}
.i_solution ul li.on{ width:70%;}
.i_solution ul li .imgs{ overflow:hidden;padding-top:500px; background-repeat:no-repeat; background-size:auto 100%; background-position:center center;}
.i_solution ul li .imgs img{ display: block;overflow:hidden; width:100%;opacity:0;filter:Alpha(opacity=0); position:absolute; height:100%; top:0; left:0;}
.i_solution ul li .imgs:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.1);transition:all 0.3s;}
.i_solution ul li.on .imgs:after{ background:rgba(49,49,49,0.1);}
.i_solution ul li .txts{ overflow:hidden; position:absolute; top:0%; left:0; width:100%; height:100%;display: flex; align-items: center; justify-content: left;transition:all 0.6s;opacity:0;filter:Alpha(opacity=0);}
.i_solution ul li.on .txts{opacity:1.0;filter:Alpha(opacity=100); }
.i_solution ul li .txts .boxs{ width:90%;margin:0 auto; max-width:840px; overflow:hidden;border:0px solid #F60; text-align:center;}
.i_solution ul li .txts .h4{overflow:hidden;font-size:40px; line-height:42px; color:#fff; font-weight:600;white-space:nowrap;text-overflow:ellipsis;}
.i_solution ul li .txts .p{overflow:hidden; line-height:32px;font-size:18px; color:#fff;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-top:40px;}
.i_solution ul li .txts .rbtn{ margin-top:40px; font-weight:400;font-size:16px; color:#fff;}
.i_solution ul li .txts2{overflow:hidden; position:absolute; top:0%; left:0; width: 100%; height:100%;display: flex; align-items: center; justify-content: left;transition:all 0.6s;}
.i_solution ul li.on .txts2{opacity:0;filter:Alpha(opacity=0);}
.i_solution ul li .txts2 .p{writing-mode: tb-rl;color:#fff; font-size:24px; line-height:2px; letter-spacing:4px;}
.i_solution ul li .txts2 .cons{ margin:0 auto; text-align:center;}

.i_partner_bg{ background:#efefef; overflow:hidden;}
/* 鼠标跟随 --> */
#c-followDot { position: fixed;top: 0;left: 0; width: 4px;height: 4px;border-radius: 50%; background-color: #e70012; z-index: 999; pointer-events: none;}
#c-followDot .c-default { position: absolute;top: -18px; left: -18px;width: 40px; height: 40px;border: 1px solid #9c9c9c; border-radius: 50%; opacity: .2; box-sizing: border-box;z-index: 99; -webkit-transition: all 0.6s; transition: all 0.6s;}
#c-followDot .c-hover { position: absolute; top: -38px; left: -38px; width: 80px; height: 80px; background-color: #e70012; border-radius: 50%; opacity: .12; z-index: 98;
  box-sizing: border-box; transform: scale(0, 0);-webkit-transform: scale(0, 0);  -webkit-transition: all 0.6s;transition: all 0.6s;}
#c-followDot.c-active .c-default {transform: scale(0, 0);-webkit-transform: scale(0, 0);}
#c-followDot.c-active .c-hover { transform: scale(1, 1); -webkit-transform: scale(1, 1);}
@media screen and (max-width: 1600px) {
/*产品*/
.i_one_ul li .boxs3 .imgs{ width:240px; padding-top:240px;}
.i_one_ul li .boxs3 .cons{ margin-top:7%;}

}
@media screen and (max-width: 1400px) {
/*产品*/
.i_one_ul li .boxs2 .label{ font-size:16px;}
.i_one_ul li .boxs2 .h4{ margin-top:12px; height:36px; line-height:36px;}
.i_one_ul li .boxs2 .p{ line-height:26px; height:78px; font-size:15px; margin-top:20px;}
.i_more2.rbtn{ font-size:15px;}
.i_more2.rbtn span{ height:46px; line-height:46px;}
.i_one_ul li .boxs3 .imgs{ width:200px; padding-top:200px;}
.i_one_ul li .boxs3 .cons{ margin-top:5%;}
.i_one_ul li .boxs3 .cons .p{ font-size:15px;}
/*关于我们*/
.i_about .wrap.bgs2{margin-bottom:100px;}
}

@media screen and (max-width: 1260px) {

}



@media screen and (max-width: 960px) {


/*解决方案*/
.i_title .label{ font-size:18px;}
.i_title .p{ font-size:16px;}
.i_solution ul li{ width:32%; margin-right:2%; margin-bottom:2%;}
.i_solution ul li:nth-child(3n+0){ margin-right:0;}
.i_solution ul li.on{ width:32%;}
.i_solution ul li.on .txts{opacity: 0; filter: Alpha(opacity=0);}
.i_solution ul li.on .txts2{opacity: 1.0; filter: Alpha(opacity=100);}
.i_solution ul li .imgs{ padding-top:122%;background-size:cover;}

}


@media screen and (max-width: 640px) {
/*轮显*/
.i_solution ul li .txts2{overflow:hidden; position:absolute; top:0%; left:0; width: 100%; height:100%;display: flex; align-items: center; justify-content: left;transition:all 0.6s;}
.i_solution ul li.on .txts2{opacity:0;filter:Alpha(opacity=0);}
.i_solution ul li .txts2 .p{writing-mode: tb-rl;color:#fff; font-size:16px; line-height:2px; letter-spacing:0px;}
/*解决方案*/
.i_title .label{ font-size:16px;}
.i_title .p{ font-size:14px;}
.i_solution{ margin-top:2%; overflow:hidden; margin-left:-3%; width:98%;}
.i_solution ul li .imgs{ padding-top:130%;}

.i_solution ul li.on .txts{opacity:1.0;filter:Alpha(opacity=100); }
.i_solution ul li .txts .boxs{ width:90%;margin:0 auto; max-width:840px; overflow:hidden;border:0px solid #F60; text-align:center;}

/* 鼠标跟随 --> */
#c-followDot { display:none;}

.wrapper .footer .contact{display:block;margin-left: 30%;}
}

@media screen and (max-width: 480px) {

/*解决方案*/
.i_title .label{ font-size:14px;}
.i_title .p{ font-size:13px; margin-top:6px;}
.i_title .h4{ margin-top:4px;}
.i_solution ul li{ width:49%; }
.i_solution ul li:nth-child(3n+0){ margin-right:2%;}
.i_solution ul li:nth-child(2n+0){ margin-right:0;}
.i_solution ul li.on{ width:49%;}
.i_solution ul li .imgs{ padding-top:134%;}

}
@media screen and (max-width: 420px) {

/*解决方案*/
.i_title .p{ font-size:12px;}
.i_title .rbtn{ margin-top:-60px;}

}

