﻿.home-service{ padding: 70px 0;}
.home-service h2{ font-size: 2.2rem; text-align: center; line-height: 52px; margin-bottom: 30px;}
.home-service-list{gap: 30px; grid-template-columns: repeat(3, 1fr); /* 3 列 */  display: grid;}
.home-service-list dl{ background: #f2f3f6; border-radius: 8px; padding: 30px; width: 100%;   transition: all .35s ease; cursor: pointer;}
.home-service-list dl dd{ margin-top: 25px;}
.home-service-list dl dd a.homeserlinks1{ display: block;  font-family: myFirstFont1; font-size: 1.5rem; color: #111111; line-height: 36px;}
.home-service-list dl dd p{ font-size: 1rem; line-height: 24px; height: 48px; overflow: hidden; margin-top: 15px;}
.home-service-list dl dd a.homeserlinks2{ display: block; margin-top: 25px;  width: 48px; height: 24px; line-height: 24px; text-align: center; border-radius: 4px; background: #111;  font-size: 1.1rem; color: #FFFFFF;}

/* hover 整体效果 */
.home-service-list dl:hover{
    background: #ffffff;
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(234,0,27,0.12);
}
/* hover 标题变主色 */
.home-service-list dl:hover dd a.homeserlinks1{
    color: #ea001b;
}

/* hover 按钮变主色 */
.home-service-list dl:hover dd a.homeserlinks2{
    background: #ea001b;
}


.home-service-btn{ width: 100%; text-align: center; margin-top: 40px;}
.home-service-btn a{ display: inline-block; background: #EA001B; height: 46px; line-height: 46px; padding: 0 25px; font-size: 1rem; transition: all .35s ease; color: #FFFFFF; border-radius:30px;}
.home-service-btn a i{ margin-left: 15px;}
.home-service-btn a:hover{  background: #111; transform: translateY(-8px); box-shadow: 0 15px 40px rgba(234,0,27,0.12);}


.home-brand{ width: 100%; height: auto; background: url(../images/homebrandbg.jpg) no-repeat center; background-size:cover; padding: 70px 0;}
.home-brand-left{ width: 45%; color: #FFFFFF;}
.home-brand-left em{ display: block; color: #EA001B; line-height: 36px;}
.home-brand-left h2{ color: #FFFFFF; font-size: 2.2rem; line-height: 48px;}
.home-brand-left p{ font-size: 1rem; line-height: 26px; margin-top: 20px;}
.home-brand-left a{ display: inline-block; background: #DC1818; height: 40px; line-height: 40px; color: #FFFFFF; border-radius:30px; padding: 0 20px; margin-top: 40px;}
.home-brand-left a i{ margin-left: 10px;  transition: all .35s ease; }
.home-brand-left a:hover{ background: #111111;}
.home-brand-left a:hover i{ margin-left: 20px; }

.home-brand-right{ width: 45%;}
.home-brand-right a{ display: block; width: 31.3%; margin: 1%; transition: all .35s ease; background:#fff;  border-radius: 8px; padding:10px;}
.home-brand-right a img{ width: 100%; height: auto;}
.home-brand-right a:hover{ transform: translateY(-5px);}
.home-brand-right a:nth-child(1){ margin-left: 16%;}
.home-brand-right a:nth-child(6){ margin-left: 16%;}


.home-hotstock{width: 100%; height: auto; padding: 70px 0;}

.home-hotstock-title{ line-height: 40px; margin-bottom: 30px;}
.home-hotstock-title h2{ font-size: 2.2rem;}
.home-hotstock-title a{ color: #FFFFFF; background: #EA001B; height: 40px; line-height: 40px; border-radius:30px; padding: 0 20px;}
.home-hotstock-title a i{ margin-left: 10px;  transition: all .35s ease; }
.home-hotstock-title a:hover{ background: #111111;}
.home-hotstock-title a:hover i{ margin-left: 20px; }

.home-hotstock-box{}
.home-hotstock-box-left{ width: 332px; background: url(../images/home-hotstockleft.jpg) no-repeat center; background-size:cover; border-radius: 8px; padding: 50px 30px;}
.home-hotstock-box-left h3{ color: #FFFFFF; font-size: 1.4rem; line-height: 30px;}
.home-hotstock-box-left h3 span{ color: #FFCC00;}
.home-hotstock-box-left h4{ color: #FFFFFF;  font-family: myFirstFont; line-height: 32px; margin-top: 15px; font-size: 1rem;}
.home-hotstock-box-left a{ display: inline-block; background: #FFFFFF; height: 50px; line-height: 50px; border-radius:25px; margin-top: 25px; padding: 0 20px;}
.home-hotstock-box-left a:hover{ background: #111111; color: #FFFFFF; padding: 0 30px;}
.home-hotstock-box-left img{ max-width: 100%; height: auto; margin-top: 70px; text-align: right;}

.home-hotstock-box-right{ width: calc(100% - 347px); gap: 12px; grid-template-columns: repeat(3, 1fr); /* 3 列 */  display: grid;}

.home-hotstock-item{ width: 100%; border:1px solid #CCCCCC; border-radius: 8px; padding: 15px; cursor: pointer; transition: all .35s ease;}
.home-hotstock-item-pic{  width: 110px; height: 100%;}
.home-hotstock-item-pic img{ width: 100%; height: auto;}
.home-hotstock-item-info{ width: calc(100% - 110px); padding-left: 15px;}
.home-hotstock-item-info a{ display: block;}
.home-hotstock-item-info a.home-hotstocklinks1{ color: #111111; font-family: myFirstFont1; font-size: 1rem; line-height: 22px; height: 22px; overflow: hidden;}
.home-hotstock-item-info a.home-hotstocklinks1:hover{ color: #EA001B;}
.home-hotstock-item-info p{ color: #666666;}
.home-hotstock-item-price{ margin-top: 5px; line-height: 26px; height: 26px; overflow: hidden;}
.home-hotstock-item-price b{ display: block; color: #EA001B; font-size: 1rem;}
.home-hotstock-item-price em{ display: block;  font-size: 0.8rem;}
.home-hotstock-item-price em span{ color: #EA001B;}
.home-hotstock-item i{ display: block; height: 24px; line-height: 24px; overflow: hidden; font-size: 0.8rem;} 
.home-hotstock-item-info a.home-hotstocklinks2{ width: 100%; background: #F5F5F5; height: 30px; line-height: 30px; border-radius:5px; text-align: center; margin: 3px 0;}
.home-hotstock-item-info a.home-hotstocklinks2 img{ margin-right: 5px;}
.home-hotstock-item:hover{  transform: translateY(-3px);  box-shadow: 0 15px 40px rgba(234,0,27,0.12);}

.home-solution{ width: 100%; height: auto; background: url(../images/homesoubg.jpg) no-repeat center; background-size:cover; padding: 70px 0;}

.home-solution-title{ color: #FFFFFF;}
.home-solution-title h2{ color: #FFFFFF; font-size: 2.2rem; line-height: 48px; width: 30%;}
.home-solution-title p{ font-size: 1.1rem; line-height: 30px; width: 47%;}

.home-application-box{ margin-top: 40px;}

.home-application-box-left{  border-radius: 12px; width: 316px; min-height: 340px; background: url(../images/homesouleft.jpg) no-repeat center; background-size:cover;}
.home-application-box-left a{ display: block; width: 42px; height: 42px; line-height: 42px; font-size: 1.5rem; background: #FFFFFF; border-radius:50%; text-align: center;}
.home-application-box-left a:hover{ background: #EA001B; color: #FFFFFF;}
.home-application-box-left a.fa-angle-left{ margin-right: 30px;}
.home-application-box-left a.fa-angle-right{ margin-left: 30px;}
.home-application-box-left-num{ font-size: 1.8rem;  color: #FFFFFF;}
.home-application-box-left-num b{ padding: 0 10px; color: #FFFFFF;}

.home-application-box-right{
  width: calc(100% - 361px);
  overflow: hidden;            /* 关键：裁切 */
  position: relative;
}

/* 轨道：横向排列 */
.home-application-track{
  display: flex;
  gap: 25px;
  will-change: transform;
  transition: transform .45s ease;
}

/* 每页 3 个：1/3 宽度，减去 gap */
.home-application-box-item{
  flex: 0 0 calc((100% - 50px) / 3); /* 3列，gap=25*2=50 */
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  padding: 50px 30px;
}

.home-application-box-item{ width: 100%; border: 1px solid rgba(255,255,255,0.5); border-radius:12px; background: rgba(0,0,0,0.2); padding: 70px 30px;}
.home-application-box-item a.home-soulinks1{ display: block; color: #FFFFFF; font-size: 1.2rem; line-height: 42px; height: 42px; overflow: hidden; margin-top: 20px;}
.home-application-box-item p{ line-height: 20px; height: 80px; overflow: hidden; margin-top: 10px; color: #FFFFFF;}
.home-application-box-item a.home-soulinks2{ display: block; font-size: 1rem; line-height: 32px; margin-top: 45px; color: #FFFFFF;}
.home-application-box-item:hover{ background: #EA001B;}
.home-application-box-item:hover a{ text-decoration: underline;}

.home-resources{ padding: 70px 0;}
.home-resources-list{gap: 55px; grid-template-columns: repeat(5, 1fr); /* 3 列 */  display: grid;}
.home-resources-list dl{ text-align: center; width: 100%; cursor: pointer; transition: all .35s ease;}
.home-resources-list dl dt img{ width: 100%; height: auto; border-radius:50%;}
.home-resources-list dl dd{ margin-top: 20px;}
.home-resources-list dl dd a{ display: block; color: #111111; font-size: 1rem; line-height: 22px; height: 22px; overflow: hidden;}
.home-resources-list dl dd p{ line-height: 20px; height: 40px; overflow: hidden; margin-top: 10px;}
.home-resources-list dl:hover{  transform: translateY(-8px);}
.home-resources-list dl:hover dd a{ text-decoration: underline;}

.home-blog{ width: 100%; height: auto; background: url(../images/blogbg.jpg) no-repeat center; background-size:cover; padding: 70px 0;}


.home-blog-box{position: relative;  overflow: hidden;}

.home-blog-item{ width: 100%;}
.home-blog-item-left{ width: 50%; background: #FFFFFF; border-radius:8px 0 0 8px;}
.home-blog-item-leftinfo{ width: 100%; padding: 50px;}
.home-blog-item-leftinfo a.bloglinks1{ display: block; font-family: myFirstFont1;  font-size: 1.8rem; line-height: 38px; height: 76px; overflow: hidden;}
.home-blog-item-leftinfo p{ font-size: 1rem; line-height: 22px; height: 22px; overflow: hidden; margin-top: 20px;}
.home-blog-item-leftinfo a.bloglinks2{ width: 50%; border: 1px solid #EA001B; color: #EA001B; padding: 0 20px; border-radius:20px; height: 40px; margin-top: 30px; line-height: 38px;}
.home-blog-item-leftinfo a.bloglinks2:hover{ background: #EA001B; color: #FFFFFF;}
.home-blog-item-right{ width: 50%;}
.home-blog-item-right img{ width: 100%; height: 100%; border-radius:0 8px 8px 0;}

.home-blog-return{ position: absolute; left: 50px; top: 35px; z-index: 333;}
.home-blog-return a{ font-size: 2rem;}
.home-blog-return-num{ padding: 0 15px;}
.home-blog-return-num span{ width: 10px; height: 10px; border-radius:50%; background: #999999; margin: 0 6px;}
.home-blog-return-num span.active{ width: 50px; background: #EA001B; border-radius:10px;}

.home-blog-box{
    position: relative;
    overflow: hidden;
}

/* 所有item默认隐藏 */
.home-blog-item{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateX(50px);
    transition: all .5s ease;
}

/* 当前显示 */
.home-blog-item.active{
    position: relative;
    opacity: 1;
    transform: translateX(0);
}


/* =========================
   Mobile Responsive (<=768px)
   ========================= */
@media (max-width: 768px){

  /* 通用：区块间距缩小 */
  .home-service,
  .home-brand,
  .home-hotstock,
  .home-solution,
  .home-resources,
  .home-blog,
  .home-rfq{
    padding: 44px 0;
  }

  .home-service h2,
  .home-hotstock-title h2,
  .home-brand-left h2,
  .home-solution-title h2,
  .home-rfq-left h2{
    font-size: 1.6rem;
    line-height: 38px;
  }

  /* ========== Service ========== */
  .home-service-list{
    grid-template-columns: 1fr;  /* 移动端单列 */
    gap: 14px;
  }
  .home-service-list dl{
    padding: 18px;
    border-radius: 10px;
  }
  .home-service-list dl dd{ margin-top: 12px; }
  .home-service-list dl dd a.homeserlinks1{
    font-size: 1.15rem;
    line-height: 30px;
  }
  .home-service-list dl dd p{
    height: auto;               /* 移动端不固定高度 */
    overflow: visible;
    margin-top: 10px;
  }
  .home-service-list dl dd a.homeserlinks2{
    width: auto;                /* 按钮更好点按 */
    display: inline-block;
    padding: 6px 14px;
    height: auto;
    line-height: 20px;
    border-radius: 6px;
    font-size: 0.95rem;
  }

  .home-service-btn{ margin-top: 22px; }
  .home-service-btn a{
    height: 44px;
    line-height: 44px;
    padding: 0 18px;
    border-radius: 26px;
  }

  /* ========== Brand ========== */
  .home-brand .container .flex,
  .home-brand .flex{
    flex-wrap: wrap;
  }
  .home-brand-left,
  .home-brand-right{
    width: 100%;
  }
  .home-brand-left{
    margin-bottom: 18px;
  }
  .home-brand-left p{
    margin-top: 12px;
    line-height: 24px;
  }
  .home-brand-left a{
    margin-top: 18px;
    height: 42px;
    line-height: 42px;
  }

  .home-brand-right{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .home-brand-right a{
    width: 100%;
    margin: 0;
  }
  .home-brand-right a:nth-child(1),
  .home-brand-right a:nth-child(6){
    margin-left: 0; /* 去掉PC端特殊偏移 */
  }
  .home-brand-right a img{
    border-radius: 10px;
  }

  /* ========== Hot Stock ========== */
  .home-hotstock-title{
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }
  .home-hotstock-title a{
    height: 38px;
    line-height: 38px;
    padding: 0 16px;
  }

  .home-hotstock-box{
    flex-wrap: wrap;
  }
  .home-hotstock-box-left{
    width: 100%;
    padding: 22px 18px;
    border-radius: 10px;
    margin-bottom: 14px;
  }
  .home-hotstock-box-left img{
    margin-top: 22px;
  }

  .home-hotstock-box-right{
    width: 100%;
    grid-template-columns: 1fr; /* 移动端单列更稳 */
    gap: 12px;
  }

  .home-hotstock-item{
    padding: 12px;
    border-radius: 10px;
  }
  .home-hotstock-item-pic{
    width: 92px;
  }
  .home-hotstock-item-info{
    width: calc(100% - 92px);
    padding-left: 12px;
  }
  .home-hotstock-item-info a.home-hotstocklinks1{
    font-size: 1rem;
    line-height: 22px;
    height: auto;
  }
  .home-hotstock-item-price{
    height: auto;
  }
  .home-hotstock-item-info a.home-hotstocklinks2{
    height: 34px;
    line-height: 34px;
  }

  /* ========== Solution / Application Slider ========== */
  .home-solution-title{
    flex-wrap: wrap;
    gap: 12px;
  }
  .home-solution-title h2,
  .home-solution-title p{
    width: 100%;
  }
  .home-solution-title p{
    font-size: 1rem;
    line-height: 26px;
  }

  .home-application-box{
    flex-wrap: wrap;
    gap: 14px;
  }
  .home-application-box-left{
    width: 100%;
    min-height: 170px;
    border-radius: 12px;
    padding: 16px;
  }
  .home-application-box-left a{
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 1.2rem;
  }
  .home-application-box-left a.fa-angle-left{ margin-right: 18px; }
  .home-application-box-left a.fa-angle-right{ margin-left: 18px; }
  .home-application-box-left-num{
    font-size: 1.3rem;
  }

  .home-application-box-right{
    width: 100%;
  }

  /* 每页 1 个更舒服 */
  .home-application-track{
    gap: 12px;
  }
  .home-application-box-item{
    flex: 0 0 100%;
    padding: 22px 18px;
    border-radius: 12px;
  }
  .home-application-box-item a.home-soulinks1{
    font-size: 1.1rem;
    line-height: 34px;
    height: auto;
    margin-top: 12px;
  }
  .home-application-box-item p{
    height: auto;
    margin-top: 8px;
    line-height: 22px;
  }
  .home-application-box-item a.home-soulinks2{
    margin-top: 18px;
  }

  /* ========== Resources ========== */
  .home-resources-list{
    grid-template-columns: repeat(2, 1fr); /* 两列 */
    gap: 18px;
  }
  .home-resources-list dl dt img{
    border-radius: 50%;
  }
  .home-resources-list dl dd{ margin-top: 12px; }
  .home-resources-list dl dd p{
    height: auto;
    overflow: visible;
  }

  /* ========== Blog Slider ========== */
  .home-blog-return{
    left: 16px;
    top: 14px;
  }
  .home-blog-return a{ font-size: 1.8rem; }
  .home-blog-return-num span{ width: 9px; height: 9px; }
  .home-blog-return-num span.active{ width: 34px; }

  .home-blog-item{
    flex-wrap: wrap;  /* 文字+图改为上下布局 */
    border-radius: 12px;
    overflow: hidden;
  }
  .home-blog-item-left,
  .home-blog-item-right{
    width: 100%;
  }
  .home-blog-item-left{
    border-radius: 12px 12px 0 0;
  }
  .home-blog-item-right img{
    border-radius: 0 0 12px 12px;
    height: auto;
  }

  .home-blog-item-leftinfo{
    padding:50px 18px 18px 18px;
  }
  .home-blog-item-leftinfo a.bloglinks1{
    font-size: 1.25rem;
    line-height: 30px;
    height: auto;
  }
  .home-blog-item-leftinfo p{
    margin-top: 10px;
    height: auto;
  }
  .home-blog-item-leftinfo a.bloglinks2{
    width: auto;
    display: inline-flex;
    padding: 0 16px;
    height: 40px;
    line-height: 38px;
    margin-top: 14px;
  }

  
}

/* 额外小屏 (<=420px) 再紧凑一点 */
@media (max-width: 420px){
  .home-resources-list{
    grid-template-columns: 1fr; /* 超小屏资源单列 */
  }
  .home-hotstock-item-pic{ width: 80px; }
  .home-hotstock-item-info{ width: calc(100% - 80px); }
}
