/* =============================================
   【模块1】顶部工具栏 - site-topbar
   对应HTML: <header class="site-topbar">
   ============================================= */
.site-topbar {
  height: 40px;
  line-height: 40px;
  background: #333;


}

.site-nav {
  display: flex;
  height: 40px;
  justify-content: space-between;
}


.site-nav-left-list {
  display: flex;
  align-items: center;
  height: 40px;

}

.site-nav-left-list li a,
.topbar-left-list li a,
.topbar-right a {
  display: block;
  color: #b0b0b0;
  font-size: 12px;
  height: 40px;
}

.icon-cart {
  font-size: 20px;
  color: inherit;
}

.line {
  font-size: 18px;
  color: #424242;
}

.topbar-left-list {
  display: flex;
  align-items: center;
  height: 40px;

}

.site-nav-right {
  display: flex;
  gap: 30px;
  height: 40px;


}

.topbar-right {
  position: relative;
  width: 120px;
  text-align: center;
  background: #424242;
  transition: all .3s ease-in-out;


}

.topbar-right .topbar-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b0b0;
  background: transparent;
  transition: all .3s ease-in-out;
}

.topbar-right i,
em {
  font-style: normal;
}

.topbar-cart em {
  margin-left: 2px;

}

.menu-content {
  display: none;
  position: absolute;
  top: 40px;
  right: 0px;
  width: 316px;
  height: 80px;
  background: #571414;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  font-size: 12px;
  color: #424242;
  background: #fff;
  z-index: 31;
  transition: all .3s ease-in-out;

}

.msg-empty {

  line-height: 80px;
  text-align: center;
}


.site-nav-left-list li a:hover,
.topbar-left-list li a:hover {
  color: #fff;
}

.topbar-download {
  position: relative;
}


.site-topbar .topbar-download.active:before {
  display: none;
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-width: 0 8px 8px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
}

.site-topbar .topbar-download .appcode {
  display: none;
  position: absolute;
  top: 40px;
  left: 50%;
  width: 124px;
  background: #fff;
  margin-left: -55px;
  box-shadow: 0 1px 5px #aaa;
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 1;
  height: 0;
  transition: height .3s;
  z-index: 32;
}

.site-topbar .topbar-download img {
  display: block;
  margin: 18px auto 12px;

}

.topbar-download:hover .appcode {
  display: block;
  height: 148px;
}

.site-topbar .topbar-download.active:hover::before {
  display: block;
}

.topbar-right:hover .menu-content {
  display: block;
}


.topbar-cart:hover {
  color: #ff6700;
  background: #fff;
}


/* =============================================
   【模块2】主导航栏 - site-header
   对应HTML: <div class="site-header">
   ============================================= */
.site-header {
  height: 100px;
  /* background: #09a7a2; */
}

.site-header .container {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.header-logo {
  width: 62px;
  background-color: #fff;

}

.header-nav {
  width: 850px;
  background-color: #fff;
}

.header-nav .header-list {
  height: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  padding-right: 80px;

}

.header-nav .header-list .nav {
  display: block;
  height: 80px;
  line-height: 80px;
}

.nav-list {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 296px;
  height: 50px;
  border: 1px solid #e0e0e0;
}

.down {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: calc(100% - 44px);
  border: 1px solid #ff6700;
  z-index: 32;
  background-color: #fff;
  font-size: 12px;
  color: #424242;

}


.down-list li {
  width: 100%;
}

.down-list a {

  display: block;
  height: 30px;
  line-height: 30px;
  color: inherit;
  padding-left: 10px;
}

.down-list li:hover {
  background-color: #f7f7f7;
}

.header-list .text {
  font-size: 16px;
  color: #333;
  transition: all .3s;
}


.nav-list.active {
  border: 1px solid #ff6700 !important;
}

.nav-list.active .btu {
  border-left: 1px solid #ff6700 !important;
}

.nav-list:hover {
  border: 1px solid #b0b0b0;
}

.nav-list:hover .btu {
  border-left: 1px solid #b0b0b0;
}

.nav-list .btu:hover {
  background-color: #b0b0b0;

}

.nav-list .btu:hover,
.nav-list .btu:hover .icon-search {
  background-color: #ff6700;
  color: #fff;
}

.header-list li {
  position: relative;

}

.header-list .item-children {
  position: absolute;
  top: 80px;
  width: 100vw;
  z-index: 32;
  background: #fff;
  height: 0;
  overflow: hidden;

}

.header-list .item-children {
  position: absolute;
  top: 80px;
  z-index: 32;
  background: #fff;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}



.header-list li:hover .item-children {
  height: 229px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
  border: 1px solid #e0e0e0;
}

.header-list a:hover .text {
  color: #ff6700;
}

.children-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  position: relative;
  margin-top: 120px;
}

.children-list li {

  width: 180px;
  height: 180px;
  padding-top: 10px;

}


.children-list .children-img {

  width: 160px;
  height: 110px;
  margin: 0 auto;
  margin-bottom: 20px;


}

.children-list .children-img img {
  width: 100%;
  height: 100%;
}

.children-list .title {
  height: 20px;
  text-align: center;
  font-size: 12px;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.children-list .price {

  height: 20px;
  text-align: center;
  font-size: 12px;
  color: #ff6700;
}

.children-list li:before {
  position: absolute;
  left: 0;
  top: 15px;
  z-index: 1;
  width: 1px;
  height: 100px;
  content: "";
  background-color: #e0e0e0;
}

.children-list li:first-child:before {
  width: 0;
}

.search {
  width: 100%;

}

.search input {
  width: 100%;
  height: 40px;
  padding-left: 10px;
  border: none;
  outline: none;
}

.btu {
  width: 52px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-left: 1px solid #e0e0e0;
}

.icon-search {
  font-size: 25px;
  color: #616161;
}

.header-logo a {
  display: block;
  width: 56px;
  height: 56px;
  background: url(../../images/upload/log.png) no-repeat;
  background-size: 100% 100%;


}

.wraps {
  position: absolute;
  height: 50px;
  overflow: hidden;
  padding-top: 10px;

}

.txt-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 10px;
  font-size: 14px;
  color: #1f1e1e;
  animation: scrollUp 8s ease-in-out infinite;
}

@keyframes scrollUp {

  0%,
  18% {
    transform: translateY(0);
  }

  22% {
    transform: translateY(-32px);
  }

  40%,
  58% {
    transform: translateY(-32px);
  }

  62% {
    transform: translateY(-64px);
  }

  80%,
  98% {
    transform: translateY(-64px);
  }

  100% {
    transform: translateY(-96px);
  }
}


/* =============================================
   【模块3】首页Banner区域 - home-hero
   对应HTML: <div class="home-hero">
   ============================================= */
.home-hero .container {
  height: 670px;


}

.swiper-container {
  position: relative;
}

.hero-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 234px;
  height: 460px;
  background: rgba(105, 101, 101, .6);
  z-index: 10;
}

.hero-left ul {
  padding-top: 20px;
}

.hero-left ul li {
  width: 100%;
  height: 42px;
  line-height: 42px;
  padding-left: 25px;
  padding-right: 20px;
}

.hero-left ul li:hover {
  background-color: #ff6700;
}

.hero-left ul li:hover .childres {
  display: flex;

}

.children-item .link:hover .text {
  color: #ff6700;
}

.hero-left ul li a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-left .childres {


  display: none;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
  top: 0px;
  left: 234px;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
  border: 1px solid #e0e0e0;
  z-index: 24;
  height: 460px;



}

.children-col-1 {
  width: 530px;

}

.children-col-3 {
  width: 795px;

}

.children-col-4 {
  width: 992px;
}

.childres .link {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  width: 245px;
  height: 76px;
  padding-left: 20px;

}

.childres .link .text {
  font-size: 14px;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


.icon-right {
  color: #e0e0e0;
  font-size: 20px;
}

.text {
  color: #fff;
  font-size: 14px;
}

.hero-right {

  width: 1226px;
  height: 460px;


}

.swiper-image a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;

}

.swiper-image a img {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: absolute;
  bottom: 20px;
  right: 60px;

}

.swiper-slide ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.swiper-slide ul li {

  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-color: hsla(0, 0%, 100%, .3);
  border-radius: 10px;
  background: rgba(0, 0, 0, .4);
  cursor: pointer;
}


.swiper-slide ul li.active {
  background: hsla(0, 0%, 100%, .4);
  border-color: rgba(0, 0, 0, .4);
}

.swiper-prev,
.swiper-next {
  position: absolute;
  top: 50%;
  display: block;
  width: 41px;
  height: 69px;
  cursor: pointer;
  transform: translateY(-50%);
}

.swiper-prev {

  left: 234px;
  background: url(../../images/upload/Banner/icon-slides.png) no-repeat;
  background-position: -84px 0;



}

.swiper-next {

  right: 0;
  background: url(../../images/upload/Banner/icon-slides.png) no-repeat;
  background-position: -124px 0;


}

.swiper-prev:hover {
  background-position: 0 0;
}

.swiper-next:hover {
  background-position: -41px 0;
}

.swiper-slide ul li:hover {
  background: hsla(0, 0%, 100%, .4);
  border-color: rgba(0, 0, 0, .4);
}

.home-hero-sub {
  display: flex;
  justify-content: space-between;
  height: 170px;
  /* background-color: #d98405; */
  margin-top: 14px;
}


.sub-left {

  width: 234px;
  height: 170px;
  background-color: #5f5750;
}

.sub-left .home-channel-list {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;

}

.home-channel-list li a {
  position: relative;
  padding-left: 12px;
}

.home-channel-list li:before {
  top: 3px;
  left: 8px;
  width: 64px;
  height: 1px;
}

.home-channel-list li:after {
  top: 6px;
  left: 2px;
  width: 1px;
  height: 70px;
}

.home-channel-list li:after,
.home-channel-list li:before {
  position: absolute;
  content: "";
  background: #665e57;
}

.home-channel-list li a {
  display: block;
  width: 70px;
  height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #dedcdc;
}



.sub-img {
  width: 24px;
  height: 24px;
  color: inherit;


}

.sub-img .iconfont {
  font-size: 24px;
  color: inherit;
}



.sub-img img {
  width: 100%;
  height: 100%;
}

.sub-text {
  font-size: 12px;
}

.home-channel-list li a:hover {
  color: #fff;
}

.sub-right {
  display: flex;
  gap: 15px;
  width: 978px;
  height: 170px;
  /* background: #b22e2e; */
}

.sub-right .sub-item a {
  display: block;
  width: 316px;
  height: 170px;
  background-color: #fff;

}


.sub-right .sub-item a img {
  display: block;
  width: 100%;
  height: 100%;
}

.sub-right .sub-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  transition: all .3s;
}


/* =============================================
   【模块4】主页主要内容 - home-main
   对应HTML: <div class="home-main">
   ============================================= */
.home-main {
  padding-top: 4px;
  padding-bottom: 12px;
  background: #f5f5f5;
  min-width: 1226px;
  height: 5194px;
}

.home-banner-box {
  width: 100%;
  margin: 22px 0;
}

.home-banner-box a {
  display: block;
  height: 120px;
}

.home-banner-box a img {
  width: 100%;
  height: 100%;
}


/* =============================================
   【模块5】商品卡片模块 - home-brick-box
   对应HTML: <div class="home-brick-box">
   ============================================= */
.home-brick-box .box-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;
}

.box-hd .title {
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}

.box-hd .more {
  display: flex;
  gap: 12px;
  font-size: 14px;
  margin-right: 10px;
}

.box-hd .more-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 16px;

}

.box-hd .more-link {

  font-size: 16px;
  height: 32px;
  line-height: 32px;

}

.box-hd .more-links i {
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 16px;
  background-color: #b0b0b0;
  color: #fff;
  font-size: 16px;
  transition: all .3s;
}

.box-hd .more .more-link:hover,
.box-hd .more-links:hover {
  color: #ff6700;

}

.box-hd .more-links:hover i {
  background-color: #ff6700;
}

.home-brick-box {
  margin-bottom: 22px;
}

.home-brick-box .box-bd {
  display: flex;
  justify-content: space-between;
  height: 614px;

}

.home-brick-box .box-bd-left {
  width: 234px;
  height: 100%;

}

.home-brick-box .box-bd-left a {
  display: block;
  width: 100%;
  height: 100%;
  transition: all .3s;
}

.box-bd-left a img {
  width: 100%;
  height: 100%;
}

.home-brick-box .box-bd-right {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 978px;
  height: 100%;

}


.bd-item .cat-link {
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 234px;
  height: 300px;
  background-color: #fff;
  transition: all .3s;
}

.bd-img {
  width: 160px;
  height: 160px;
}

.bd-img img {
  width: 100%;
  height: 100%;
}

.cat-link .title {
  width: 214px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  margin-top: 12px;
  margin-bottom: 5px;
}


.cat-link .desc {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #b0b0b0;
}

.cat-link .price {
  margin-top: 12px;
  font-size: 14px;
  color: #ff6700;
}

.box-bd-left a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  transform: translateY(-5px);

}

.box-bd-right .cat-link:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  transform: translateY(-5px);
}

.price .num {
  color: #b0b0b0;
}

.home-brick-box .line {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}

.bd-item .card {
  display: block;
  width: 234px;
  height: 143px;
  background-color: #fff;
  transition: all .3s;
  margin-bottom: 12px;
  padding-top: 40px;


}

.home-brick .box-bd {
  display: none;
}

.home-brick .box-bd.active {
  display: flex;
}

.card .bd-img {
  float: right;
  width: 80px;
  height: 80px;
  margin-right: 22px;



}

.card .bd-img img {
  width: 100%;
  height: 100%;
}


.info {
  width: 140px;
  padding-left: 30px;
}

.card .title {
  font-size: 14px;
  font-weight: 400;
  color: #333;


}

.card .price {
  font-size: 14px;
  color: #ff6700;
}



.bd-item .card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  transform: translateY(-5px);
}

.small {

  font-size: 12px;
  color: #757575;

}

.card .mores {
  font-size: 18px;
  color: #333;
}

.box-bd .box-bd-left .brick-item {
  display: block;
  width: 234px;
  height: 300px;
  background-color: #fff;
  margin-bottom: 12px;
}

.box-bd-left .brick-item img {
  width: 100%;
  height: 100%;
}

.box-bd-left .brick-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  transform: translateY(-5px);
  transition: all .3s;

}


/* =============================================
   【模块6】底部导航 - site-footer
   对应HTML: <div class="site-footer">
   ============================================= */
.site-footer {
  height: 738px;

}

.site-footer .footer-service {
  padding: 27px 0;
  border-bottom: 1px solid #e0e0e0;
}

.footer-service .list-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 70px;
}

.list-service li {
  height: 25px;


}

.footer-service .list-service li a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #616161;

}

.list-service .iconfont {
  font-size: 24px;
  color: inherit;


}

.footer-service .list-service li a:hover {
  color: #ff6700;
}

.border-left {
  border-left: 1px solid #e0e0e0;
}

.list-service li a {
  display: block;
  height: 25px;
  font-size: 16px;
  color: #616161;
}



.col-links {
  display: flex;
  justify-content: flex-start;


}

.col-links dl {
  width: 160px;


}

.col-links dl dt {
  font-size: 14px;
  color: #424242;
}

.col-links dl dd {
  position: relative;
  top: 15px;
  left: -40px;
  margin-bottom: 12px;
}

.col-links dl dd a {
  font-size: 12px;
  color: #757575;
}





.footer-links {

  display: flex;
  justify-content: space-between;
  margin: 40px 0;

}

.footer-links .col-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 251px;
  height: 100%;
  color: #616161;
  font-size: 12px;
  padding: 0 10px;
  margin-top: 20px;


}


.footer-links .col-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 251px;
  border-left: 1px solid #e0e0e0;
}

.btn-line-primary {
  display: block;
  width: 118px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  text-align: center;
  border: 1px solid #ff6700;
  background: #fff;
  color: #ff6700;
  margin-bottom: 12px;
  transition: all .3s;
}

.footer-links .col-contact p {
  margin-bottom: 5px;
}

.contact-info {
  margin-left: 45px;
}

.contact-info p {
  margin-bottom: 3px;
}

.col-contact .phone {
  font-size: 22px;
  line-height: 1;
  color: #ff6700;
}

.btn-line-primary:hover {
  background-color: #ff6700;
  color: #fff;
}


/* =============================================
   【模块7】底部版权信息 - site-info
   对应HTML: <div class="site-info">
   ============================================= */
.site-info {

  background-color: #f5f5f5;
  padding-bottom: 60px;
}

.site-info .container {
  position: relative;
  top: 20px;
}

.site-info .logo {
  width: 56px;
  height: 56px;
  background:
    url(../../images/upload/log.png) no-repeat;
  background-size: 56px;
  position: absolute;
  top: 0;
  left: 0;

}

.ir {
  display: block;
  text-align: left;
  overflow: hidden;
  text-indent: -9999em;
}

.info-text {
  margin-left: 80px;

}

.info-text .copy a,
.info-text .copy span {
  color: #757575;


}

.info-text .copy .sep {
  position: relative;
  top: -2px;
  font-size: 12px;
  font-family: sans-serif;

}

.copyright,
.copyright a {
  color: #b0b0b0;
}

.site-info .info-links {
  margin-top: 4px;
  margin-left: 80px;
}

.site-info .info-links img {
  width: auto;
  height: 28px;


}

.slogan {
  width: 100%;
  height: 19px;
}

.site-info .slogan {
  clear: both;
  margin: 30px auto 0;
  width: 100%;
  height: 19px;
  background: url(../../images/upload/slogan.png) no-repeat center 0;
}

.copy a:hover,
.copyright a:hover,
.col-links dl dd a:hover,
.bar-nav:hover .text {
  color: #ff6700;
}


/* =============================================
   【模块8】侧边工具栏 - home-tool-bar
   对应HTML: <div class="home-tool-bar">
   ============================================= */
.home-tool-bar {
  position: fixed;
  bottom: 70px;
  right: 0;
  z-index: 999;

}

.home-tool-bar .bar-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 90px;
  background-color: #fff;
  border: 1px solid #f5f5f5;

}

.home-tool-bar .bar-nav.active {
  opacity: 0;
  /* 根据你需求调整，不要写0搞反逻辑 */
}

.home-tool-bar .bar-nav.actives {
  opacity: 1;
  /* 根据你需求调整，不要写0搞反逻辑 */
}

.bar-nav {
  border: 1px solid #f5f5f5;
}

.bar-nav .icon {
  width: 30px;
  height: 30px;
}

.bar-nav .icon img {
  width: 100%;
  height: 100%;
}

.bar-nav .hover {
  display: none;
}

.bar-nav:hover .static {
  display: none;
}

.bar-nav:hover .hover {
  display: block;

}

.home-tool-bar .bar-nav:hover .pop-content {
  opacity: 1;
  visibility: visible;



}

.home-tool-bar .text {
  color: #757575;
  transition: color .3s;

}



.pop-content {

  position: absolute;
  top: 0;
  right: 90px;
  padding: 14px;
  background: #fff;
  border: 1px solid #f5f5f5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.1s ease 0.1s;
}

.pop-content img {
  width: 100px;
  height: 100px;
}

.pop-content .desc {

  display: block;
  width: 82px;
  margin: 14px auto 0;
  color: #757575;
  text-align: center;
}