.main {
  width: 100%;
  background: #f7f7f7;
}

.hello-banner {
  width: 100%;
  height: 2.4rem;
  background: url('../img/customer-bg-img.png') no-repeat;
  background-size: 100% 100%;
  float: left;
}

.hello-banner .big-text {
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.38rem;
  color: #ffffff;
  text-align: center;
  margin-top: 0.69rem;
}

.hello-banner .level-block {
  width: 100%;
  height: 0.3rem;
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}

.hello-banner .level-block>.level {
  width: 1.2rem;
  height: 0.3rem;
  line-height: 0.3rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.2rem;
  /* float: left; */
  margin: 0 0.2rem;
  display: inline-block;
}

.hello-banner .level-block>.level.active {
  color: #ffffff;
}

.hello-banner a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.2rem;
}

.hello-banner a:hover {
  color: rgba(255, 255, 255, 1);
}

.modular-title {
  height: 0.4rem;
  line-height: 0.4rem;
  color: #111111;
  font-size: 0.24rem;
  margin-bottom: 0.1rem;
}
.left-nav {
  width: 2.26rem;
  height: 6rem;
  overflow-y: auto;
  margin-top: 0;
    /* 滚动条美化 */
  scrollbar-width: thin;  /* Firefox */
  scrollbar-color: #c1c1c1 #f1f1f1;  /* Firefox: 滑块颜色 轨道颜色 */
}
/* Chrome/Safari/Edge */
.left-nav::-webkit-scrollbar {
  width: 3px;      /* 滚动条宽度 */
  height: 3px;
}

.left-nav::-webkit-scrollbar-track {
  background: #f1f1f1;  /* 轨道背景色 */
  border-radius: 1px;
}

.left-nav::-webkit-scrollbar-thumb {
  background: #c1c1c1;  /* 滑块颜色 */
  border-radius: 1px;
}

.left-nav::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;  /* 鼠标悬停时滑块颜色 */
}
.left-nav .second-nav {
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #F2F2F2;
  position: relative;
}

.left-nav .second-nav p {
  padding: 0.12rem 0.52rem 0.12rem 0.30rem;
}

.left-nav .second-nav .arrow {
  width: 0.11rem;
  height: 0.18rem;
  position: absolute;
  top: 50%;
  right: 0.3rem;
  z-index: 1;
  display: none;
  margin-top: -0.09rem;
}
.left-nav .second-nav img{
  display: none;
}
.left-nav .second-nav.active img{
  display: block;
}

.left-nav .second-nav-text {
  line-height: 0.18rem;
  color: #222222;
  font-size: 0.16rem;
  cursor: pointer;
}

.left-nav .second-nav.active {
  background: #2E5C9A;
  color: #FFFFFF;
}
.left-nav .second-nav.active p{
  color: #FFFFFF;
}

.right-content {
  width: 79%;
  height: 6rem;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0.21rem 0.35rem;
  float: right;
}

.right-content .single-list {
  height: 0.5rem;
  line-height: 0.5rem;
  box-sizing: border-box;
  border-bottom: 1px solid #e8e8e8;
}

.right-content .single-list .serial-number {
  display: block;
  color: #444444;
  font-size: 0.16rem;
  float: left;
  margin-right: 0.1rem;
}

.right-content .single-list .title {
  display: block;
  width: 75%;
  color: #757575;
  font-size: 0.16rem;
  float: left;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.right-content .single-list .title:hover {
  color: #2d5c9a;
}

.right-content .single-list .date {
  display: block;
  width: 19%;
  color: #757575;
  font-size: 0.16rem;
  text-align: right;
  float: right;
}

.right-content .more {
  display: block;
  width: 140px;
  height: 34px;
  margin: 0 auto;
  margin-top: 18px;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  color: #757575;
  font-size: 14px;
  background: #ffffff;
  text-align: center;
  line-height: 34px;
}
/*Ã¦Â Â¹Ã¦ÂÂ®Ã¥Å Å¾Ã¥â€¦Â¬Ã¥Â®Â¤Ã¦â€žÂÃ¨Â§ÂÃ¯Â¼Å’2025Ã¥Â¹Â´2Ã¦Å“Ë†26Ã¦â€”Â¥Ã¥â€¦Â³Ã©â€”Â­Ã¢â‚¬Å“Ã¨Â¡Â¨Ã¦Â Â¼/Ã¦ÂµÂÃ§Â¨â€¹Ã¢â‚¬ÂÃ¦Â ÂÃ§â€ºÂ®Ã¯Â¼Å’Ã¤Â¸Â´Ã¦â€”Â¶Ã¤Â¿Â®Ã¦â€Â¹widthÃ¤Â¸Âº179pxÃ¯Â¼Å’Ã¥Å½Å¸Ã¤Â¸Â¤Ã¤Â¸ÂªÃ¦Â â€¡Ã§Â­Â¾Ã§Å¡â€žÃ¥Â®Â½Ã¥ÂºÂ¦Ã¦ËœÂ¯358px*/
.download-center .tab {
  width: 179px;
  height: 44px;
  box-sizing: border-box;
  border: 3px solid #ffffff;
  border-radius: 22px;
  background: #ffffff;
  margin: 0 auto;
  margin-bottom: 20px;
}

.download-center .tab .single-tab {
  width: 176px;
  height: 38px;
  line-height: 38px;
  border-radius: 19px;
  background: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #333333;
  float: left;
  cursor: pointer;
}

.download-center .tab .single-tab.active {
  background: #2e5c9a;
  color: #ffffff;
}

.download-list {
  width: 100%;
  height: 2.4rem;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0.25rem 0.18rem;
  position: relative;
}

.download-list .single-download {
  width: 48%;
  height: 0.5rem;
  box-sizing: border-box;
  border: 1px dashed #c7c6ce;
  margin: 0.05rem 1%;
  float: left;
  line-height: 0.48rem;
  padding: 0 0.2rem;
  position: relative;
  cursor: pointer;
}

.download-list .single-download .name {
  width: 68%;
  float: left;
  font-size: 0.16rem;
  color: #444444;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.download-list .single-download .date {
  width: 32%;
  float: right;
  text-align: right;
  font-size: 0.16rem;
  color: #757575;
}

.download-list .single-download .download-btn {
  display: none;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #2e5c9a;
  text-align: center;
  color: #ffffff;
  opacity: 0.65;
}

.download-list .single-download:hover .download-btn {
  display: block;
}

.button-block {
  width: 2.8rem;
  height: 0.5rem;
  margin: 0.25rem auto 0;
}

.button-block .line {
  display: block;
  width: 1rem;
  height: 1px;
  background: #e8e8e8;
  margin-top: 0.245rem;
  float: left;
}

.button-block .more {
  width: 0.78rem;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #757575;
  font-size: 0.16rem;
  text-align: center;
  float: left;
  cursor: pointer;
}

.modular-title span {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
}

.modular-title a {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
}

.modular-title a.blue {
  color: #2e5c9a;
  cursor: pointer;
}

.online-training .single-training {
  width: 590px;
  height: 120px;
  margin-right: 20px;
  box-sizing: border-box;
  padding: 26px 30px;
  background: #2c3439;
  float: left;
}

.online-training .single-training:hover {
  background: #2d5c9a;
}

.online-training .single-training.last {
  margin-right: 0;
}

.online-training .single-training .title {
  height: 28px;
  line-height: 28px;
  font-size: 24px;
  color: #ffffff;
}

.online-training .single-training .statistics {
  height: 42px;
  text-align: right;
}

.online-training .single-training .statistics .num {
  display: inline-block;
  height: 42px;
  font-size: 38px;
  color: #ffffff;
}

.online-training .single-training .statistics .unit {
  display: inline-block;
  height: 18px;
  font-size: 16px;
  color: #ffffff;
}

.mechanism-table {
  width: 100%;
  box-sizing: border-box;
  padding: 0 50px;
}

.mechanism-table thead {
  background: #2d5c9a;
  color: #ffffff;
}

.mechanism-table thead tr {
  height: 0.54rem;
  font-size: 0.18rem;
}

.mechanism-table thead tr td {
  height: 0.54rem;
  font-size: 0.18rem;
  width: 33.33%;
}

.mechanism-table thead tr .center {
  text-align: center;
}

.mechanism-table tr td {
  text-align: center;
}


.mechanism-table tr {
  height: 0.6rem;
  font-size: 0.16rem;
}

.mechanism-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.mechanism-table tbody tr:nth-child(even) {
  background: #e7eef7;
}

.branch-mechanism .button-block {
  width: 280px;
  height: 85px;
  margin: 17px auto;
  margin-bottom: 0;
}


