﻿#casebg{ background: #f5f5f5;}

.case-banner{ padding: 180px 0 100px 0;}
.case-position{ font-size: 1.2rem; height: 36px; line-height: 29px; border-bottom:1px solid #000; padding-bottom: 7px; }
.case-position a{ color: #afafaf;}
.case-position span{ padding:0 10px; color: #afafaf;}
.case-position a.fa-home1{display: inline-block; width: 38px; height: 29px; line-height: 29px; text-align: center; color: #FFFFFF; background: #000000 url(../images/newsicon.jpg) no-repeat center; border-radius:4px;}

.case-top{ padding-bottom: 40px;}
.case-top h1{ color: #000000; font-size: 3.4rem; line-height: 72px; margin-bottom: 20px;}
.case-top p{ font-size: 1.2rem; line-height: 25px; max-width: 850px; margin: 0;}

.case-menu{ height: 28px; padding: 2px; background: #e5e5e5; border-radius:30px; width: auto; display: inline-block;}
.case-menu a{ display: inline-block; height: 24px; border-radius:30px; padding: 0 15px; color: #999999;}
.case-menu a:hover{ background: #FFFFFF; color: #000000;}
.case-menu a.active{background: #FFFFFF; color: #000000;}

.case-list-main{ padding: 60px 0;}

.case-list{
  position: relative;
}

/* 每个 item 交给 JS 计算 left/top */
.case-list-item{
  position: absolute;
  width: 0; /* JS 会设置实际宽度 */
  transition: transform .2s ease; /* 可选 */
}

.case-list-item-pic img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 你原来的 hover 放大需要加 transition */
.case-list-item-pic{
  border-radius:12px;
  overflow:hidden;
  position:relative;
}
.case-list-item-pic img{
  transition: transform .35s ease;
}
.case-list-item-pic:hover img{
  transform: scale(1.06);
}


.case-list-item-pic-wark{ height: 32px; position: absolute; left:20px; bottom: 20px; padding: 0 18px; font-size: 0.7rem; color: #000000; z-index: 666; background: rgba(255,255,255,0.6); border:1px solid #FFFFFF; border-radius:30px;}
.case-list-item-pic-wark img{ width: 23px; height: 16px;  border-radius:0; margin-right: 10px;}

.case-list-item-info{ width: 100%; padding: 15px 10px; overflow: hidden;}
.case-list-item-info b{ display: block; font-size: 1.05rem;  font-family: myFirstFont2; font-weight:500;  color: #000000; height: 30px; line-height: 30px; overflow: hidden;}
.case-list-item-info a{ display: inline-block; line-height: 30px; height: 30px; overflow: hidden; text-decoration: underline; color: #000000; margin-top: 5px; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.case-list-item-info a:hover{ color: #000000;}
.case-list-item-info a img{ margin-left: 5px;}
.case-list-item-info a i{ display:inline-block; background:url(../images/blogjt1.png) no-repeat center; width: 10px; height: 10px; display: inline-block; margin-left: 5px;}
.case-list-item-info a:hover i{ background:url(../images/blogjts1.png) no-repeat center;  width: 11px;}

.case-more{ text-align: center; margin-top: 50px;}
.case-more a{ display: inline-block; background: #000000; color: #FFFFFF; border-radius:10px; font-size: 1.1rem; line-height: 44px; padding: 0 20px; margin-top:40px;}
.case-more a:hover{ color: #000; border:1px solid #000000; background:none; }




.case-show-banner{ width: 100%; color: #FFFFFF; padding: 370px 0 270px 0;}
.case-show-banner-info{ width: 80%; margin: 0 auto;}
.case-show-banner-info a{ display: inline-block; background: rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.3); color: #FFFFFF; height: 36px; line-height: 34px; font-size: 1.25rem; border-radius:30px; padding: 0 20px;}
.case-show-banner-info h1{ font-size: 3.4rem; line-height: 70px; margin-top:30px; max-width: 500px;}

.case-show-info{ padding: 80px 200px;}
.case-show-info p{ margin-bottom: 30px; color: #000000; font-size: 1.1rem; line-height: 36px;}
.case-show-info p a{ color: #004eff; display: inline-block; position:relative; margin:0 3px; text-decoration:underline;  text-decoration-thickness: 1px; text-underline-offset: 6px;}
.case-show-info p a img{ margin: 0 5px; }
.case-show-info a::after{ display:inline-block; content:""; width:14px; height:14px; background:url(../images/casejts.png) no-repeat center; margin:0 5px;}



.case-show-piclist {
    margin-bottom: 80px;
}

.main_visual .owl-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.main_visual .owl-carousel .owl-item {
    width: auto !important;
}

.main_visual .owl-carousel .item {
    width: auto;
    height: 540px;
    overflow: hidden;
    margin: 0 auto;
}

.main_visual .owl-carousel .item a {
    display: block;
    height: 100%;
}

.main_visual .owl-carousel .item img {
    width: auto;
    height: 100%;
    display: block;
    object-fit: contain;
}


.main_visual .owl-prev,.main_visual .owl-next{width:50px;height: 50px; border:1px solid #CCCCCC; border-radius:50%; box-shadow: 0 2px 4px rgba(0,0,0,.2); background-repeat: no-repeat; background-size:cover; background-position: center center; position: absolute;top: 50%;margin-top: -9px;text-indent: -999px; overflow: hidden;}
.main_visual .owl-prev{background-image: url(../images/bl.png);left:-85px; }
.main_visual .owl-next{background-image: url(../images/br.png);right:-85px; }
.main_visual .owl-dots{ display: none; text-indent: -99999em;}


.case-other-title{ padding: 65px 0 15px 0; border-bottom:1px solid #111111;}
.case-other-title-left{}
.case-other-title-left em{ display: block; font-size: 1.4rem; color: #111111; line-height: 36px;}
.case-other-title-left h2{ color: #111111; font-size: 2.8rem; line-height: 48px;}
.case-other-title a{ display: inline-block; color: #FFFFFF; background: #000000;height: 44px; line-height: 44px; border-radius:12px; font-size: 1.1rem; padding: 0 22px; margin-top:40px;}
.case-other-title a:hover{  color: #000000; border:1px solid #000000;  background:none;}


.case-other{ margin-top: 40px !important; padding-bottom: 150px;}

.main_visual1 .owl-carousel,.main_visual1 .owl-stage-outer,.main_visual1 .owl-stage,.main_visual1 .owl-carousel .owl-item{width: 100%;height: 100%; }
.main_visual1 .owl-carousel .item{width: 100%;height: 100%; overflow: hidden; margin: 0 auto;}
.main_visual1 .owl-carousel .home-blog-item-pic{ width: 100%; height: auto; overflow: hidden; border-radius:20px;}
.main_visual1 .owl-carousel .home-blog-item-pic img{ width: 100%; height: auto; border-radius:20px;}
.main_visual1 .owl-carousel .home-blog-item-pic:hover img{  transform: scale(1.06);}

.main_visual1 .owl-carousel .home-blog-item-info{ padding: 20px; text-align: center;}
.main_visual1 .owl-carousel .home-blog-item-info em{ }
.main_visual1 .owl-carousel .home-blog-item-info em img{ width: 30px; height: 21px; display: inline-block; margin-right: 10px;}
.main_visual1 .owl-carousel .home-blog-item-info h3{ font-size: 1.1rem; color: #111111; line-height: 52px; height: 52px; overflow: hidden; font-weight:400; font-family: myFirstFont;}
.main_visual1 .owl-carousel .home-blog-item-info a{ display: inline-block; color: #FFFFFF; background: #000000; height: 30px; line-height: 30px; border-radius:30px; padding: 0 15px;}
.main_visual1 .owl-carousel .home-blog-item-info a i{ display:inline-block; background:url(../images/blogjt.png) no-repeat center; width: 10px; height: 10px; display: inline-block; margin-left: 10px;}
.main_visual1 .owl-carousel .home-blog-item-info a:hover i{ background:url(../images/blogjts.png) no-repeat center;  width:11px;}

.main_visual1 .owl-prev,.main_visual1 .owl-next{width:50px;height: 50px; border:1px solid #CCCCCC; border-radius:50%; box-shadow: 0 2px 4px rgba(0,0,0,.2); background-repeat: no-repeat; background-size:cover; background-position: center center; position: absolute;top: 50%;margin-top: -9px;text-indent: -999px; overflow: hidden;}
.main_visual1 .owl-prev{background-image: url(../images/bl.png);left:-85px; }
.main_visual1 .owl-next{background-image: url(../images/br.png);right:-85px; }
.main_visual1 .owl-dots{ width: 100%; text-align: center; height: 12px; position:absolute; left: 0; bottom: -50px;  z-index: 999;}
.main_visual1 .owl-dots .owl-dot{display: inline-block;  margin:0 5px;}
.main_visual1 .owl-dots .owl-dot span{  display: inline-block; width: 12px; height: 12px;  background:#FFFFFF; border:1px solid #000; border-radius:50%;}
.main_visual1 .owl-dot.active span{  background:#000;}
.main_visual1 .owl-controls{ height: 0;}
.main_visual1 .owl-nav{ height: 0;}

.about-contact{ padding-bottom: 100px;}
.about-contact-title{ height: 88px; line-height: 87px; border-bottom:1px solid #111111;}
.about-contact-title h2{ color: #000000; font-size: 2.8rem;}

.about-contact-list{ width: 100%; padding-top: 50px;  gap: 35px; grid-template-columns: repeat(3, 1fr); /* 3 列 */  display: grid;}
.about-contact-item{ width: 100%; border: 1px solid #CCCCCC; padding: 30px; border-radius:12px; cursor: pointer;}
.about-contact-item-pic{ width: 68px; height: 68px; background: #f5f5f5; border-radius:50%;}
.about-contact-item h3{ color: #000000; font-size: 1.4rem; height: 84px; line-height: 84px; border-bottom:1px solid #111111;}
.about-contact-item-info{ width: 100%; line-height: 22px; min-height: 110px; font-size: 1rem; margin: 25px 0;}
.about-contact-item a{ display: inline-block;  font-family: myFirstFont2; color: #111111; font-size: 1rem; line-height: 32px; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.about-contact-item a::after{ background:url(../images/blogjt1.png) no-repeat; content:""; width:10px; height:10px; display:inline-block; margin-left:10px;}
.about-contact-item a:hover{ text-decoration: underline;}
.about-contact-item a:hover::after{  background:url(../images/blogjts1.png) no-repeat;  width:11px;}

/* ===== hover 基础过渡 ===== */
.about-contact-item{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.about-contact-item h3,
.about-contact-item a{
  transition: color .25s ease;
}

.about-contact-item-pic{
  transition: background .25s ease;
}

/* ===== hover 效果 ===== */
.about-contact-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}





/* 标题下边线强化 */
.about-contact-item:hover h3{
  border-bottom-color: #000000;
  color: #000000;
}

/* 链接更利落 */
.about-contact-item:hover a{
  color: #000000;
}

/* 小箭头微动（细节感） */
.about-contact-item a img{
  transition: transform .25s ease;
}
.about-contact-item:hover a img{
  transform: translateX(4px);
}


@media (max-width: 1200px) {


#casebg{ background: #f8f9fa;}

.case-banner{ padding: 81px 0 50px 0;}
.case-position{ font-size: 1rem; }


.case-top{ padding-bottom: 20px;}
.case-top h1{font-size:1.6rem; line-height: 32px; margin-bottom: 10px;}
.case-top p{ font-size: 1rem; line-height: 25px; max-width: 100%; margin: 0;}


.case-menu a{ padding: 0 5px; }


.case-list-main{ padding: 30px 0;}

  .main_visual .owl-carousel .item {
        height: 200px;
    }

.case-other-title{ padding: 35px 0 15px 0; }
.case-other-title-left em{  font-size: 1.2rem; line-height: 30px;}
.case-other-title-left h2{  font-size: 1.6rem; line-height: 38px;}
.case-other-title a{height: 40px; line-height: 40px;font-size: 1rem; padding: 0 12px; margin-top:15px;}



.case-other{ margin-top: 20px !important; padding-bottom: 100px;}



.case-show-banner{ padding:120px 0;}
.case-show-banner-info{ width: 94%; margin: 0 auto;}
.case-show-banner-info a{ font-size: 1rem; padding: 0 10px;}
.case-show-banner-info h1{ font-size: 1.6rem; line-height: 50px; margin-top:20px; max-width: 100%;}

.case-show-info{ padding: 30px 0;}
.case-show-info p{ margin-bottom: 10px;  font-size: 1rem; line-height: 26px;}

.about-contact{ padding-bottom: 30px;}
.about-contact-title{ height: 48px; line-height: 47px; }
.about-contact-title h2{ font-size:1.4rem;}

.about-contact-list{ padding-top: 20px;  gap: 10px; grid-template-columns: repeat(1, 1fr); /* 3 列 */  display: grid;}
.about-contact-item{ padding: 20px;}
.about-contact-item h3{ font-size: 1.2rem; height:54px; line-height:54px; }
.about-contact-item-info{ min-height: auto; font-size: 0.9rem; margin: 15px 0;}



}


