.about-banner{ width: 100%; height: 100%; background: #f8f9fa;}
.about-banner-left{ width: 36%;  padding: 182px 70px 0 5%; }


.about-banner-position{ width: 100%; height: 36px; line-height: 29px; border-bottom:1px solid #CCCCCC; padding-bottom: 7px;  font-size: 1.2rem; color: #afafaf;}
.about-banner-position a{color: #afafaf; }
.about-banner-position span{ padding:0 10px;}
.about-banner-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;}



.about-banner-info{ padding: 130px 30px;}
.about-banner-info h1{ color: #111111; font-size: 3.2rem; line-height: 62px; color: #000000;}
.about-banner-info p{ font-size: 1.2rem; line-height: 30px; margin-top: 35px;}


.about-banner-right{ width: 64%; }
.about-banner-right img{ width: 100%; height: 100%; object-fit: cover;}



.about-company{ padding: 100px 0;}
.about-company-left{ width: 60%;}
.about-company-left img{ width: 100%; height: 100%; object-fit: cover;}

.about-company-right{ width: 40%; padding: 45px 100px;}
.about-company-right h2{ color: #000000; font-size: 2.8rem; line-height: 60px;}
.about-company-right h3{ color: #000000; font-size: 1.4rem;  font-family: myFirstFont2; font-weight:500; line-height: 40px; margin-top: 25px; margin-bottom:10px;}
.about-company-right p{ font-size: 1.1rem; line-height: 23px;  font-family: myFirstFont3;  font-weight:300;}


.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 .about-contact-item-pic{
}



/* 标题下边线强化 */
.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);
}


.about-process{ width: 100%;}
.about-process-left{ width: 50%; padding: 45px 120px 45px 14%;}
.about-process-left h2{ color: #000000; font-size: 2.8rem; line-height: 60px;}
.about-process-left h3{ color: #000000; font-size: 1.4rem; font-family: myFirstFont2; font-weight:500; line-height: 40px; margin-top: 35px; margin-bottom:10px;}
.about-process-left p{ font-size: 1.1rem; line-height: 23px;  font-family: myFirstFont3;  font-weight:300;}


.about-process-right{ width: 50%;}
.about-process-right img{width: 100%; height: 100%; object-fit: cover;}


.about-map{ margin-top: 100px; background: #4c4c4c;}
.about-map-left{ width: 50%; padding: 80px 120px 80px 14%; color: #FFFFFF;}
.about-map-left h2{ color: #FFFFFF; font-size: 2.8rem; line-height: 60px; margin-bottom: 25px;}
.about-map-left p{ font-size: 1.1rem; line-height: 28px;}


.about-map-right{ width: 50%;}
.about-map-right img{ width: 100%; height:100%;}


@media (max-width: 1200px) {

.about-banner{  background: #f8f9fa; margin-top: 61px;}
.about-banner-left{ width: 100%;  padding:30px 3%; }


.about-banner-position{  font-size: 1rem; color: #afafaf;}

.about-banner-position a.fa-home{margin-right:5px;}

.about-banner-info{ padding: 30px 0 0 0;}
.about-banner-info h1{font-size: 1.4rem; line-height: 32px; color: #000000;}
.about-banner-info p{ font-size: 1rem; line-height: 26px; margin-top:15px;}


.about-banner-right{ width: 100%; }
.about-banner-right img{ width: 100%; height: 100%;}


.about-company{ padding: 30px 0;}
.about-company-left{ width: 100%;}

.about-company-right{ width: 100%; padding: 25px 3%;}
.about-company-right h2{  font-size: 1.4rem; line-height: 32px;}
.about-company-right h3{ font-size: 1.2rem; line-height: 30px; margin-top: 15px;}
.about-company-right p{ font-size: 0.9rem; line-height: 23px;}

.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;}


.about-process{ width: 100%;}
.about-process-left{ width: 100%; padding: 25px 3%;}
.about-process-left h2{  font-size: 1.4em; line-height:32px;}
.about-process-left h3{ font-size: 1.2rem; line-height: 30px; margin-top: 15px;}
.about-process-left p{ font-size: 0.9rem; line-height: 23px;}


.about-process-right{ width:100%;}
.about-process-right img{ width: 100%; height: auto;}


.about-map{ margin-top:30px; }
.about-map-left{ width: 100%; padding:25px 3%; color: #FFFFFF;}
.about-map-left h2{ font-size: 1.4rem; line-height: 32px; margin-bottom: 15px;}
.about-map-left p{ font-size: 0.9rem; line-height: 23px;}


.about-map-right{ width: 100%;}
.about-map-right img{ width: 100%; height: auto;}

}