/* === Service Page Styles === */

/* --- Base utility classes --- */
.w100{width:100%}
.h100{height:100%}
.pr{position:relative}
.pa{position:absolute}
.t-0{top:0}
.l-0{left:0}
.tc{text-align:center}
.of-c{object-fit:cover}
.c-white{color:#fff}
.ofh{overflow:hidden}

/* --- Layout utility classes --- */
.df{display:flex}
.df-c{display:flex;align-items:center;justify-content:center}
.df-sb{display:flex;justify-content:space-between}
.mg-a{margin:auto}
.bg-white{background-color:#fff}
.csp{cursor:pointer}
.db{display:block}

/* --- Sizing --- */
.h-200{height:200px}
.h-400{height:400px}
.h-500{height:500px}
.w-292{width:292px}
.w-320{width:320px}
.w-400{width:400px}
.w-1120{width:1120px}
.minw-400{min-width:400px}

/* --- Spacing --- */
.pt-10{padding-top:10px}
.pt-40{padding-top:40px}
.pt-48{padding-top:48px}
.pt-64{padding-top:64px}
.pt-80{padding-top:80px}
.pt-150{padding-top:150px}
.pb-10{padding-bottom:10px}
.pb-40{padding-bottom:40px}
.pb-48{padding-bottom:48px}
.pb-64{padding-bottom:64px}
.pb-80{padding-bottom:80px}
.pl-24{padding-left:24px}
.pl-64{padding-left:64px}
.pr-24{padding-right:24px}
.pr-64{padding-right:64px}
.pd-64{padding:64px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}
.mb-40{margin-bottom:40px}
.mb-48{margin-bottom:48px}
.mr-4{margin-right:4px}
.mr-20{margin-right:20px}
.mr-24{margin-right:24px}
.mr-48{margin-right:48px}
.ml-20{margin-left:20px}

/* --- Typography --- */
.fs-14{font-size:14px}
.fs-16{font-size:16px}
.fs-20{font-size:20px}
.fs-24{font-size:24px}
.fs-36{font-size:36px}
.fs-48{font-size:48px}
.fs-64{font-size:64px}
.lh-22{line-height:22px}
.lh-24{line-height:24px}
.lh-28{line-height:28px}
.lh-32{line-height:32px}
.lh-44{line-height:44px}
.lh-60{line-height:60px}
.lh-80{line-height:80px}

/* --- Appearance --- */
.br-8{border-radius:8px}
.br-12{border-radius:12px}
.bd-FF4610{border:1px solid #FF4610}
.heshu-color-orange6{color:#FF4610}
.op-085{opacity:0.85}

/* --- Font classes --- */
.heshu-Os-Medium{font-family:"Oswald",sans-serif;font-weight:500!important}
.heshu-RHDRegular{font-family:RedHatDisplay-Regular,sf-pro-text_regular,PingFang SC,"Microsoft YaHei"!important;font-weight:400!important}
.heshu-RHDMedium{font-family:RedHatDisplay-Medium,sf-pro-text_medium,PingFang SC,"Microsoft YaHei"!important;font-weight:500!important}

/* --- Service Banner --- */
#banner.h-500{overflow:hidden}
#banner.h-500 .banner{overflow:hidden}
#banner.h-500 .banner > img{display:block;width:100%;height:100%;object-fit:cover}
#banner .banner-text{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Override style.css banner-text animation (opacity:0 by default) */
#banner.h-500 .banner-text > h1,
#banner.h-500 .banner-text > p{
  opacity:1!important;
  transform:none!important;
}
#banner.h-500 .banner-text > p{
  opacity:0.85!important;
}

/* Banner dark overlay */
#banner .banner::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.45);
  z-index:1;
  pointer-events:none;
}
#banner .banner-text{z-index:2;position:absolute}

/* --- Color tokens --- */
.c-balck,.Color-Text-Title{color:#171B25}
.Color-Text-T2{color:#535662}
.Color-Brand-Normal{color:#FF4610}

/* --- Secondly Section --- */
#secondly{background-color:#F6F7F8}
.secondly{box-shadow:0 2px 16px rgba(0,0,0,0.06)}
.secondly-left img{display:block;width:100%;height:100%;object-fit:cover}
.secondly-right ul{list-style:none;margin:0;padding:0}
.secondly-right ul li a{text-decoration:none;transition:background 0.2s}
.secondly-right ul li:hover{background:rgba(255,70,16,0.06)}

/* --- Thirdly Section (Top Services) --- */
#thirdly{background-color:#F6F7F8}
#thirdly ul{list-style:none;margin:0;padding:0;gap:24px}
#thirdly ul li{flex:1;transition:box-shadow 0.25s}
#thirdly ul li:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08)}
#thirdly ul li a{text-decoration:none;color:inherit;display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
#thirdly ul li a svg{flex-shrink:0}

/* --- Fourth Section (Online Service) --- */
#fourth{background-color:#F6F7F8}
.afterSales-Online-card-box{display:grid;grid-template-columns:1fr 1fr;gap:24px;list-style:none;margin:0;padding:0}
.afterSales-Online-card-box li{transition:box-shadow 0.25s}
.afterSales-Online-card-box li:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.afterSales-Online-card-box li a{text-decoration:none;color:inherit}

/* --- Utility additions --- */
.h-776{min-height:776px}
.maxh-1080{max-height:none}
.heshu-bg-gray6{background-color:#F6F7F8}

/* --- Global Service Centers (infom-bottom) --- */
.info-klkj{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.infom-bottom-ij{
  background:#fff;
  border-radius:8px;
  padding:40px 32px;
}
.infom-bottom-title{
  font-size:36px;
  line-height:44px;
  color:#171B25;
  margin-bottom:8px;
}
.infom-bottom-ij>.infom-bottom-info{
  font-size:16px;
  line-height:24px;
  color:#171B25;
  font-weight:500;
  margin-bottom:12px;
}
.infom-bottom-p{
  font-size:14px;
  line-height:22px;
  color:#535662;
  margin:0;
}
.infom-bottom-bt{
  grid-column:span 3;
  display:flex;
  align-items:center;
  padding:40px 48px;
  background:#fff;
  gap:24px;
}
.infom-bottom-bt:nth-child(4){grid-column:1/3}
.infom-bottom-bt:nth-child(5){grid-column:3/4}
/* override: bottom cards are 2-col */
.info-klkj>.infom-bottom-bt:nth-child(4),
.info-klkj>.infom-bottom-bt:nth-child(5){
  grid-column:auto;
}
.info-klkj{
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto;
}
.info-klkj>.infom-bottom-bt:nth-child(4){grid-column:1/2;grid-row:2/3}
.info-klkj>.infom-bottom-bt:nth-child(5){grid-column:2/4;grid-row:2/3}
.iconfo{
  flex-shrink:0;
}
.iconfo svg{
  width:80px;
  height:80px;
}
.infp-bottom-bt-title{
  font-size:20px;
  line-height:28px;
  color:#171B25;
  margin-bottom:8px;
  font-weight:500;
}
.infp-bottom-bt-p{
  font-size:14px;
  line-height:22px;
  color:#535662;
  margin:0;
}

/* --- Responsive --- */
@media(max-width:767px){
  .h-500{height:300px}
  .pt-150{padding-top:80px}
  .fs-64{font-size:32px}
  .lh-80{line-height:40px}
  .fs-20{font-size:14px}
  .lh-28{line-height:22px}
  /* secondly mobile */
  .secondly{flex-direction:column;height:auto!important;width:100%!important}
  .secondly-left{width:100%!important;min-width:0!important;height:200px}
  .secondly-right{padding:24px!important}
  .secondly-right ul{flex-direction:column;gap:12px}
  .secondly-right ul li{margin-right:0!important;width:100%}
  .secondly-right ul li a{justify-content:center}
  .pt-80{padding-top:40px}
  .pb-64{padding-bottom:32px}
  .pb-80{padding-bottom:40px}
  .fs-36{font-size:24px}
  .fs-48{font-size:28px}
  .lh-44{line-height:32px}
  .lh-60{line-height:36px}
  .mb-48{margin-bottom:24px}
  .w-1120{width:100%;padding:0 16px;box-sizing:border-box}
  /* thirdly mobile */
  #thirdly ul{flex-direction:column}
  #thirdly ul li{padding:20px 16px!important;height:auto!important}
  #thirdly ul li a{display:flex;align-items:center;justify-content:flex-start}
  #thirdly ul li a>svg{width:48px;height:48px;flex-shrink:0}
  .w-320{width:auto;flex:1}
  .w-292{width:100%}
  .ml-20{margin-left:12px}
  /* fourth mobile */
  .afterSales-Online-card-box{grid-template-columns:1fr}
  .afterSales-Online-card-box li a{flex-direction:row;align-items:center}
  .afterSales-Online-card-box li a .mr-48{margin-right:12px;flex-shrink:0}
  .afterSales-Online-card-box li a .mr-48 svg{width:48px;height:48px}
  .afterSales-Online-card-box li a .w-292{width:auto;flex:1;min-width:0}
  .afterSales-Online-card-box li a .w-292 h3{font-size:16px;line-height:24px;word-break:break-word}
  .afterSales-Online-card-box li a .w-292 p{font-size:12px;line-height:18px}
  .pl-64,.pr-64{padding-left:16px;padding-right:16px}
  .pt-48,.pb-48{padding-top:20px;padding-bottom:20px}
  .fs-24{font-size:16px}
  .pt-64{padding-top:32px}
  /* infom-bottom mobile */
  .info-klkj{grid-template-columns:1fr}
  .info-klkj>.infom-bottom-bt:nth-child(4),
  .info-klkj>.infom-bottom-bt:nth-child(5){grid-column:auto;grid-row:auto}
  .infom-bottom-ij{padding:24px 16px}
  .infom-bottom-title{font-size:28px;line-height:36px}
  .infom-bottom-bt{flex-direction:row;align-items:center;padding:20px 16px!important}
  .infom-bottom-bt .iconfo svg{width:48px;height:48px}
  .infom-bottom-bt .iconfo{margin-right:16px}
  .h-776{height:auto}
  .pt-80{padding-top:40px}
}
@media screen and (min-width:768px) and (max-width:1023px){
  .h-500{height:400px}
  .pt-150{padding-top:120px}
  .fs-64{font-size:48px}
  .lh-80{line-height:60px}
  .w-1120{width:90%}
  .secondly{height:auto!important}
  .secondly-left{min-width:280px!important;width:280px!important}
  .pd-64{padding:32px}
  #thirdly ul li{padding:24px 32px!important}
  .w-320,.w-292{width:auto}
  .afterSales-Online-card-box li a .mr-48{margin-right:24px}
  /* fourth tablet */
  .afterSales-Online-card-box li a .mr-48 svg{width:60px;height:60px}
  /* infom-bottom tablet */
  .info-klkj{grid-template-columns:1fr 1fr}
  .info-klkj>.infom-bottom-ij:nth-child(3){grid-column:1/3}
  .info-klkj>.infom-bottom-bt:nth-child(4),
  .info-klkj>.infom-bottom-bt:nth-child(5){grid-column:auto}
  .infom-bottom-bt .iconfo svg{width:60px;height:60px}
  .h-776{height:auto}
}