@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")
} 
body{background-color: #F0F0F0;font-family: HarmonyOS_Sans_SC_Regular !important;}
#box {background-color: #262626;/* padding-top: 130px; */}
.container {background-color: #262626;width: 100%;padding: 100px 0 130px;}
.container span {color: #fff;font-size: 50px;font-weight1: bold;padding: 0 10px;}
#filtration{ padding: 20px 0; background-color: #fff; margin-bottom: 20px; display: none; }
.filtration-container{ display: flex; justify-content: space-between; padding: 0 20px; }
.filtration-head{ display: flex; align-items: center; gap: 10px; height: 49px; }
.filtration-head img{ width: 25px; }
.filtration-head span{ text-transform: uppercase; font-size: 16px; font-weight: bold; }
.filtration-ok{display: none;background-color: #ffa509;padding: 10px;}
.filtration-ok i{ font-size: 28px; font-weight: bold; color: #fff; }
#content {padding: 0 20px;}
#primary {display: flex;max-width: 1600px;margin: auto;gap: 2rem;padding: 50px 0;}
#leftMenu {width: 20%;min-width: 200px;}
.leftMenu-d {top: 150px;position: sticky;}

.leftMenu-chunk { border-top: 1px solid #e1e1e1; padding: 15px 0;}
.leftMenu-chunk:last-child { border-bottom: 1px solid #e1e1e1;}
.leftMenu-head { margin: 10px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.leftMenu-p p {font-size: 18px;font-weight: bold;}
.leftMenu-switch { transform: rotate(180deg); transition: all 0.3s;}
.leftMenu-i { width: 20px; height: 20px; border-radius: 20px; display: flex; justify-content: center; align-items: center; position: relative; background-color: black; transition: all 0.3s;}
.leftMenu-i>div { width: 30%; height: 30%; transform: rotate(45deg); border-top-style: solid; border-top-color: #fff; border-left-style: solid; border-left-color: #fff; position: absolute; top: 7px;}
.leftMenu-body {overflow: hidden;transition: all 0.3s;}
.leftMenu-body-hidden { height: 0;}
.leftMenu-item {display: flex;gap: 8px;justify-content: flex-start;margin: 10px 0;align-items: center;}
.leftMenu-item>div {display: flex;cursor: pointer;}
.leftMenu-checkbox input {cursor: pointer;width: 20px;height: 20px;}
.leftMenu-text p {color: #555;font-size: 16px;}
#rightMenu {flex: 1;}
.rightMenu-items {display: grid;gap: 4.5rem 1.8rem;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));margin-bottom:80px;}
.rightMenu-item {background-color: #FFFFFF;padding: 60px 30px;transition: all 0.3s;border-radius: 10px;box-shadow: 0px 0px 25px -10px rgb(0 0 0 / 10%);}
.rightMenu-item:hover { box-shadow: 0px 0px 25px -10px rgb(0 0 0 / 50%);}
.rightMenu-item:hover .rightMenu-img img{ transform: scale(1.05);}
.rightMenu-img {display: flex;justify-content: center;margin-bottom: 60px;}
.rightMenu-img img {transition: transform 0.5s;width: 60%;}
.rightMenu-title {font-size: 20px;font-weight: bold;}
#title>div {display: flex;justify-content: center;margin: auto;}
.rightMenu-desc {font-size: 17px;color: #777;margin: 8px 0 10px 0;}
.rightMenu-color-items { display: flex; gap: 5px;}
.rightMenu-color-item { width: 20px; height: 20px; border: 1px solid #a2a2a2; border-radius: 50px; overflow: hidden; position: relative;}
.rightMenu-color-item>a>img { width: 100%; width: 35px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.rightMenu-frame{ position: relative; }

#empty{ max-width: 500px; margin: auto; text-align: center; display: none; }
#empty .title{ font-size: 30px; }
#empty .remind{ font-size: 20px; color: #565656; line-height: 42px; }
#empty .operation span{ font-size: 22px; color: #FF0013; cursor: pointer; background: linear-gradient(to right, #FF0013, #FF0013) no-repeat right bottom; background-size: 0 2px; padding-bottom: 4px; transition: background-size 800ms cubic-bezier(0.04, 0.13, 0.25, 1); }
#empty .operation span:hover{ background-position-x: left; background-size: 100% 2px; }


@media (max-width: 1400px) { 
    .rightMenu-items {gap: 1.5rem 0.8rem;grid-template-columns: repeat(auto-fill, minmax(255px, 2fr));} 
}
@media (max-width: 1024px) { 
    .leftMenu-d{top: 66px;} 
    .rightMenu-img{ margin-bottom: 40px; } 
    .container { padding: 50px 0 70px; } 
}
@media (max-width: 719px) {
    .container span{font-size: 32px;}
    #filtration{ display: block; }
    .proSecMenus{ display: none; }
    #primary { gap: 0; padding: 0 0 50px 0; }
    #leftMenu {width: 70%;overflow: hidden;position: absolute;min-width: 200px;z-index: 1;padding: 0 25px;transform: translateX(-100%);transition: all 0.3s;}
    #content {position: relative;overflow: hidden;padding: 0 10px;}
}