/* ===============================header_start================================ */
a {
  color: #333;
}
a:hover {
  color: #1f1f82;
}

.conmmon_title {
  font-size: 46px;
  font-family: var(--fontArialBold);
}

header {
  width: 100%;
}

.head_top {
  width: 100%;
  padding: 0 110px;
  height: 112px;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.3s linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  /* box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 8%); */
}

.head_top > .logo {
  flex-shrink: 0;
}

.head_top > .logo > a > img {
  width: 136px;
  height: 40px;
}

.nav {
  font-family: var(--fontHanSansCN);
  height: 100%;
}

.nav > li,
.nav > li > a {
  height: 100%;
}

.nav > li > a {
  display: block;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
}

.nav > li > a:hover {
  color: #1f1f82;
}

/* 鼠标移入之后导航的下划线的样式_start */
.nav > li > a::after {
  display: block;
  content: "";
  width: 0%;
  height: 3px;
  background-color: #1f1f82;
  position: absolute;
  bottom: 0;
  transition: all 0.2s linear;
  left: 0;
}
.nav > li > a:hover::after {
  width: 100%;
}
/* 鼠标移入之后导航的下划线的样式_end */

.nav > li > a:active {
  color: #1f1f82;
}

.nav > li > .active {
  color: #1f1f82;
  position: relative;
}

.nav > li > .active::after {
  display: block;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #1f1f82;
  position: absolute;
  bottom: 0;
}

/* 子菜单及展示图 */
.nav > li {
  position: relative;
  padding: 0 46px;
}

.nav > li > a {
  white-space: nowrap;
  --webkit-white-space: nowrap;
}

.nav .menu_farent {
  display: none;
  opacity: 0;
  transition: all 0.1s linear;
}

.nav .menu {
  position: absolute;
  top: 113px;
  left: 50%;
  transform: translateX(-50%);
  /* width: 410px;
        height: 224px; */
  /* display: none; */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 13px;
  padding: 14px 20px;
  box-sizing: border-box;
}

.menu .menu_item {
  margin: 15px 25px 0 0;
}

.menu > img {
  width: 258px;
  border-radius: 13px;
}

.menu .menu_item > li {
  margin-bottom: 15px;
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.nav > li:hover > .menu_farent {
  display: block;
  flex-direction: row;
  opacity: 1;
}

#products > li:nth-child(n + 2):before {
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  background-color: #666666;
  border-radius: 50%;
  margin-right: 10px;
}

#products > li:hover:nth-child(n + 2):before {
  background-color: #1c2088;
}

#products > li:nth-child(1) {
  font-size: 16px;
}

.lange > div {
  width: 46px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  border: solid 2px #1f1f82;
  text-align: center;
  font-size: 15px;
  color: #1f1f82;
  cursor: pointer;
}

.ch {
  margin-right: 13px;
}

.lange .active {
  color: #fefeff;
  background-color: #1f1f82;
}

.head_bottom {
  padding-top: 112px;
  position: relative;
  height: 590px;
}
.head_bottom > .banner {
  width: 100%;
  height: 100%;
}
.banner_title {
  position: absolute;
  right: 50%;
  bottom: 0;
  font-size: 76px;
  color: var(--color_bule);
  font-family: var(--fontArialBold);
  text-align: left;
  transform: translate(-263px, -128px);
}
.banner_title_3c {
  font-size: 25px;
  font-family: var(--fontArial);
  margin-top: 36px;
  position: relative;
}
.banner_title_3c::before {
  display: block;
  content: "";
  width: 42px;
  height: 3px;
  background-color: var(--color_bule);
  position: absolute;
  left: 0;
  top: -20px;
}
/*==========================================header_end========================================*/

/*==========================================main_start=======================================*/
.main_container {
  padding-top: 120px;
}

.main_container .type > .boxpack > h3 {
  text-align: center;
  font-size: 46px;
  font-family: var(--fontArialBold);
  color: var(--color_bule);
  margin-bottom: 54px;
}

.main_container .type > .morebox > h4 {
  text-align: center;
  font-size: 35px;
  font-family: var(--fontArialBold);
  padding: 60px 0;
}

.main_container .type {
  padding-bottom: 120px;
  position: relative;
}
.main_container .type::before {
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #888888;
}

.wineImg {
  width: 100%;
  height: 100%;
}

.wineBox {
  width: 100%;
  height: 800px;
  overflow: hidden;
  position: relative;
}

.swiper-pagination {
  bottom: 30px !important;
}

.my-bullet {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.my-bullet:nth-child(2) {
  margin: 0 40px;
}

.my-bullet-active {
  background: #fff;
}

.moreboxMain {
  position: relative;
}

.moreboxSwiper {
  width: 100%;
  height: 706px;
  overflow: hidden;
}

.moreboxSwiper .swiper-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.flex-container {
  flex-wrap: wrap;
  gap: 20px;
  row-gap: 25px;
}
.flex-container > .flex-item {
  width: 340px;
  height: 340px;
  background-color: #f3f4f3;
  flex: 1 1 calc(25% - 20px); /* 每行 4 列，减去间距 */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.flex-item > img {
  height: 100%;
  display: block;
}

.prev-btn > .iconfont,
.next-btn > .iconfont {
  font-size: 36px;
}

.prev-btn,
.next-btn {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  box-shadow: 0px 2px 17px 1px rgba(165, 165, 165, 0.27);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #b9b9b9;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: var(--color_bule);
  color: #fff;
}

.prev-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-115px, -50%);
}

.next-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(115px, -50%);
}

/*==========================================main_end=======================================*/

/*========================================footer_start========================================= */
.email {
  width: 665px;
  padding: 121px 0 109px;
}
.email_main {
  height: 95px;
}
.email_input {
  width: 508px;
  height: 100%;
  padding: 0 20px;
  border: none;
  outline: none;
  font-size: 30px;
  color: #9292da;
  border-radius: 22px 0px 0px 22px;
  border: solid 2px #1f1f82;
  font-family: var(--fontArial);
}
::-webkit-input-placeholder {
  color: #9292da;
  text-align: center;
  letter-spacing: 4px;
}
.email_btn {
  width: 157px;
  height: 100%;
  background-color: #1f1f82;
  border: solid 2px #1f1f82;
  border-radius: 0 22px 22px 0;
  cursor: pointer;
}
.email_btn > img {
  width: 42px;
  height: 40px;
}
.footer_container {
  position: relative;
}
.footer_container::before {
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #1f1f82;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.list {
  width: 1200px;
  padding-top: 101px;
  padding-bottom: 183px;
}
.list > .footer_item:nth-child(1) {
  margin-right: 297px;
}
.list > .footer_item:nth-child(2) {
  margin-right: 129px;
}
.footer_item > .title {
  font-size: 23px;
  margin-bottom: 44px;
  letter-spacing: 3px;
  font-family: var(--fontArialBold);
  font-weight: 700;
  white-space: nowrap;
  --webkit-white-space: nowrap;
}
.footer_item > ul > li {
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 27px;
  white-space: nowrap;
}
.footer_item > ul > li > a {
  color: #949393;
}
.footer_item > ul > li > a:hover {
  color: #1f1f82;
}
.footer_item > ul > li > img {
  margin-right: 9px;
}
/*=============================================footer_end======================================= */