@font-face {
  font-family:HarmonyOS_Sans_SC_Regular;
  font-style:normal;
  font-weight:400;
  src:url("../woff2/harmonyos_sans_sc_regular-2.woff2") format("woff2")
}

/* 中等字重 (500) */
@font-face {
  font-family:HarmonyOS_Sans_SC_Medium;
  font-style:normal;
  font-weight:500;
  src:url("../woff2/harmonyos_sans_sc_medium-2.woff2") format("woff2")
}
/* 加粗字重 (700) */
@font-face {
  font-family:HarmonyOS_Sans_SC_Bold;
  font-style:normal;
  font-weight:700;
  src:url("../woff2/harmonyos_sans_sc_bold-2.woff2") format("woff2")
}
* { padding: 0; margin: 0; list-style: none; font-family: HarmonyOS_Sans_SC_Regular !important;}
body {background-color: #F1F1F1;font: 14px/1.6em HarmonyOS_Sans_SC_Regular,HarmonyOS_Sans_SC_Medium,HarmonyOS_Sans_SC_Bold;}
#subject { max-width: 1600px; padding: 0 20px; margin: 95px auto; }

#box {min-height: 100vh;position: relative;overflow: hidden;}
.container {min-width: 1920px;position: absolute;left: 50%;transform: translateX(-50%);}
.container-footer{ position: relative; max-width: 1920px; height: 100%; }
.phone-Container{display: none;}
.footerList{position: absolute;bottom: 0;right: 50%;transform: translateX(50%);max-width: 1600px;width: 100%;}
.wrapper{/* position: relative; */}
.jgvvvs {background-color1: #262626;padding-bottom: 30px;}
.banner{max-width: 1920px;width: 100%;margin: auto;position: relative;height: 530px;overflow: hidden;}
img { vertical-align: middle; }
#carousel {/* position: relative; */overflow: hidden;}
.banner:hover .btn { opacity: 1; }
.banner:hover .btn.left { left: 20px; }
.banner:hover .btn.right { right: 20px; }

.photo ul { white-space: nowrap; font-size: 0; }
.photo ul li { width: 100%; display: inline-block; }
.photo ul li img {width: 100%;}
.point {position: absolute;right: 20px;bottom: 10px;}
.point ol li {width: 20px;height: 20px;border: 1px solid #ccc;float: left;margin: 0 3px;background-color: #fff;text-align: center;line-height: 20px;font-size: 13px;cursor: pointer;border-radius: 50px;}
.point ol li.active { background-color: #ff0013; color:#fff;}

.btn {opacity: 0;position: absolute;top: 50%;margin-top: -20px;width: 60px;height: 60px;background-color: rgba(0, 0, 0, .3);cursor: pointer;text-align: center;line-height: 40px;border-radius: 50px;transition: all 0.3s;}
.btn.left { left: -20px; }
.btn.right { right: -20px; }
.btn i { display: inline-block; vertical-align: middle; width: 14px; height: 14px; border-bottom: 3px solid #ffffff; }
.btn.left i { border-left: 3px solid #ffffff; transform: rotate(45deg); margin: 15px 0 0 5px; }
.btn.right i { border-right: 3px solid #ffffff; transform: rotate(-45deg); margin: 15px 5px 0 0; }

.recommend-headline { margin: 35px 0; }
.recommend-headline p {font-size: 36px;font-weight: bold;text-align: center;}
.recommend-ul {gap: 1.8rem;display: flex;}
.recommend-li {background-color: #fff;padding: 25px 25px;box-shadow: 7px 8px 10px 0px rgb(0 0 0 / 5%);transition: all 0.3s ease;border-radius: 8px;}
.recommend-li:hover { transform: translate(-2px, -2px); box-shadow: 7px 8px 10px 0px rgb(0 0 0 / 30%); }
.recommend-d { height: 100%; }
.recommend-d a { height: 100%; display: flex; gap: 10px; flex-direction: column; justify-content: space-between; }
.recommend-li-img img { width: 100%; }
.recommend-li-title span {font-size: 20px;font-weight1: bold;}

.recommendation-list-title p::after { content: "探索更多产品";}
@media (max-width: 1024px) { 
    .recommend-list{margin-top: 50px;}
    .recommend-ul{display: grid;grid-template-columns: repeat(3, 1fr);}
    .jgvvvs{padding-bottom: 0px;} 
    .banner{height: 580px;} 
    .footerList{ height: 50px; } 
    .point{ width: max-content; bottom: 15px; right: 50%; left: 50%; transform: translateX(-50%); } 
    .point ol li{ width: 8px; height: 8px; margin: 0 8px; overflow: hidden; border: 2px solid #e4e4e4; background-color: black; color: transparent; }
}
@media (max-width: 719px){
    .recommend-ul{grid-template-columns: repeat(2, 1fr);}
    .btn{ display: none; }
    .banner{height: auto;padding-bottom: 50px;} 
}