/* 当前项目首页用到的 css 样式 */
.header {
width: 100%;
/* height: 758px; */
/* background-image: linear-gradient(
  to bottom,
  var(--primary-color),
  var(--white-color)
); */
/* opacity: 0.4; 设置元素透明 */
position: relative; /* 相对定位 */
}
.header::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* z-index:auto; */
}
.header-content{
position: relative;
}
.header::before {
content: "";
background-image: linear-gradient(
  to bottom,
  var(--primary-color),
  var(--white-color)
);
opacity: 0.4;
}

.top {
/* width:100%; */
height: 80px;
/* background-color: #ddd; */
/* border: 1px solid red; */
}

.top .top-content {
height: inherit;
/* background-color: red; */
display: flex;
align-items: center;
justify-content: space-between; /* 水平两端对齐 */
}
.top .top-content ul.menu {
display: flex;
}

/* 一级导航样式 */
ul.menu li a {
display: block;
line-height: 80px;
padding-right: 16px;
padding-left: 15px;
color: var(--font-black-color);
font-size: 18px;
/* border: 1px solid red; */
}
ul.menu li a:hover {
color: var(--primary-color);
}
ul.menu li {
position: relative; /* 相对定位 */
}
ul.menu li::after {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
right: 50%;
height: 2px;
background-color: var(--primary-color);
transition: left 0.3s, right 0.3s;
}
ul.menu li:hover::after {
left: 0;
right: 0;
}

/* 二级下拉菜单 */
ul.menu li .menu-dropdown {
position: absolute;
left: 0;
right: 0;
top: 80px;
background-color: var(--white-color);
transform-origin: top center; /* 变换的原点在顶部的中心 */
transform: scaleY(0); /* y轴缩小到0 看不到了*/
transition: transform 0.3s; /* 过渡效果 */
z-index: 2;
}
ul.menu li .menu-dropdown {
padding-top: 2px;
padding-bottom: 8px;
}
ul.menu li .menu-dropdown dd {
overflow: hidden;
}
ul.menu li .menu-dropdown dd a {
line-height: 30px;
padding: 0px;
text-align: center;
/* border: 1px solid red; */
position: relative; /* 相对定位 */
transition: transform 0.5s;
}
ul.menu li:hover .menu-dropdown {
transform: scaleY(1); /* y轴放大到1 显示出正常大小 */
}
/* 绘制小竖线 */
ul.menu .menu-dropdown dd a::before {
content: "";
position: absolute;
top: 7px;
bottom: 7px;
left: 10px;
width: 2px;
background-color: var(--primary-color);
display: none; /*隐藏*/
}
/* 鼠标移入 a标签向右移动 10px */
ul.menu .menu-dropdown dd:hover a {
transform: translateX(10px); 
}
/* 鼠标移入显示竖线 */
ul.menu .menu-dropdown dd:hover a::before {
display: block;
}
.sticky {
width: 100%;
position: fixed;
top: 0; 
background-color: var(--white-color);
box-shadow: 0 2px 5px var(--border-dark-grey-color);
/* 有一个 animation 动画 */
animation: sticky-animation 0.5s ease-out both;
z-index:2;
}

@keyframes sticky-animation {
0% {
  opacity: 0; /* 透明的 */
    transform: translateY(-100%); /* 向上移动自身的高度 */
}
100% {
  opacity: 1; /* 不透明 */
    transform: translateY(0); /* 向下移动到自身的高度 */
}
}
/* 栏目图标样式 */
.nav-button {
width: 34px;
/* background: red; */
margin-right: 30px;
font-size: 30px;
text-align: center;
display: none;
cursor: pointer;
}


/* 黑色半透明遮罩层样式 */
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99; /* 遮罩层在最上层 */
  display: none; /* 隐藏*/
}

/* 垂直导航容器- ipad端或移动端导航*/
nav.mobile-nav {
  /* width: 420px; */
  width: var(--nav-width);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100; /* 导航要在遮罩层的上面 */
  display: none; /*隐藏*/
}
/* 关闭按扭 */
 .close-button {
  display: block;
  width: var(--close-button-width);
  height: var(--close-button-height);
  font-size: var(--close-button-font-size);
  /* width: 50px; */
  /* height: 50px; */
  /* font-size: 50px; */
  line-height: 1;
  /* background-color: red; */
  color: #fff;
  position: absolute;
  /* right: 30px; */
  right: var(--close-button-right);
  /* top: 30px; */
  top: var(--close-button-top);
  cursor: pointer;
}
.nav-list {
  /* padding-top: 92px; */
  padding-top: var(--nav-top);
  /* margin: 0 30px; */
  margin: 0 var(--nav-margin-right) 0 var(--nav-margin-left);
}
.nav-list li h3,
.nav-list li a {
  display: block;
  /* font-size: 32px; */
  font-size: var(--menu-item-font-size);
  /* height:48px; */
  /* 行高 1.5 * 32 = 48px;  (48-32)/2= 8
  32-16=16px
  */
  /* margin-bottom: 16px; */
  margin-bottom: var(--menu-item-margin-bottom);
  color: #fff;
  font-weight: 400;
  cursor: pointer;
}
.nav-list li {
  /* height: 64px; 导航收缩时的高度 */
  height: var(--menu-item-height);
  overflow: hidden;
  transition: height 0.3s; /* 过渡动画 */
}
/*
需要动态的计算当前 li的高度
  收缩时 li高度 = h3 高度 + h3 的margin-bottom   =64px
展开时 li高度=h3 高度 + h3 的margin-bottom + dl可视区高
*/
.nav-list li h3 {
  position: relative;
}
/* 箭头样式 */
.nav-list li h3 span.arrow {
  /* border: 1px solid red; */
  /* font-size: 28px; */
  font-size: var(--arrow-font-size);
  line-height: 1;
  position: absolute;
  /* right: 41px; */
  right: var(--arrow-right);
  top: 50%;
  transform: translateY(-50%);
}
/* 向下箭头的样式 */
.nav-list li h3 span.arrow-down {
  transform: translateY(-50%) rotate(90deg);
}

/* 移动端 二级导航样式 */
.mobile-nav .menu-dropdown dd a {
  display: block;
  /* height: 64px; */
  height: var(--submenu-item-height);
  /* line-height: 64px; */
  line-height: var(--submenu-item-line-height);
  /* text-indent: 60px; */
  text-indent: var(--submenu-item-text-indent);
  font-size: var(--submenu-item-font-size);

  margin-bottom: 0;
}
.mobile-nav .menu-dropdown {
  /* padding-bottom: 12px; */
  padding-bottom: var(--submenu-item-padding-bottom);
}
.mobile-nav .menu-dropdown dd a:hover {
  background-color: var(--primary-color);
}

.banner {
  /* border: 1px solid red; */
  /* min-height: 580px; */
  margin-top: 30px;
  /* padding-top: 30px; */
}
.swiper-slide {
  /* heisght: 580px; */
  /* font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center; */
}
.swiper1 .swiper-button-next,
.swiper1 .swiper-button-prev {
  color: var(--primary-color);
}
.swiper1 .swiper-button-next:after,
.swiper1 .swiper-button-prev:after {
  font-size: 61px;
}
.swiper1 .swiper-button-next {
  right: 5px;
}
.swiper1 .swiper-button-prev {
  left: 5px;
}
/* 分页器的样式 */
.swiper1 .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(rgba(28, 28, 27, 0.22));
}
.swiper1 .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
  position: relative; /* 相对定位 */
}
.swiper1 .swiper-pagination-bullet-active::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid var(--primary-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.swiper1.swiper-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet,
.swiper1.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 15px;
}
.swiper1 .item-content {
  /* 1200 -46 -46 = 1200 - 92 = 1108 */
  /* 
  左边 383+22=405px  36% 
  右边 1108-405=703px  64%
  */
  margin: 0 46px;
  /* border: 1px solid red; */
  /* min-height: 580px; */
  display: flex;
  flex-wrap: wrap; /* 放不下时换行*/
}
.swiper1 .item-content .left {
  /* min-height: 580px; */
  /* background-color: khaki; */
}
.swiper1 .item-content .right {
  /* min-height: 580px; */
  /* background-color: skyblue; */
}
/* 计算得到图片的宽高比为 100:78  */
.swiper1 .item-content .right .img-content {
  width: 100%;
  padding-top: 78%; /* 这个百分比是相对于父元素而言*/
  /* background-color: tomato; */
  overflow: hidden;
  position: relative; /* 相对定位 */
}
.swiper1 .item-content .right .img-content .img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.swiper1 .item-content .right .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左边区域样式 */
.swiper1 .item-content .left .small-title {
  font-size: 24px;
  line-height: 1;
  font-weight: bold;
  color: var(--primary-color);
  padding-top: 161px;
}
.swiper1 .item-content .left .title {
  font-size: 48px;
  /* 48 *1.1=53 */
  line-height: 1.1;
  font-weight: bold;
  margin-top: 18px;
}
.swiper1 .item-content .left .desc {
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
  margin-top: 38px;
  margin-bottom: 61px;
}
.swiper1 .item-content .btn {
  display: block;
  width: 200px;
  height: 50px;
  font-size: 30px;
  background-color: var(--primary-color);
  color: var(--white-color);
  text-align: center;
  line-height: 50px;
  border-radius: 25px;
}
.swiper1 .item-content .btn:hover {
  background-color: var(--sub-deep-orange-color);
}
.banner-btn2 {
  width: 100%;
  display: flex;
  /* border: 1px solid red; */
  justify-content: center;
  padding: 70px 0px 92px 0px;
  display: none;
}


.product-categories {
  margin-top: 39px;
  /* border: 1px solid red; */
  /* min-height: 200px; */
}
.product-categories .title {
  /* 32px 行高 1.5 = 32 * 1.5 = 48px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: red; */
}
.product-categories .title span {
  font-size: 32px;
}
.product-categories .title a {
  display: block;
  width: 150px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  border: 1px solid var(--black-color);
  color: var(--font-black-color);
  border-radius: 6px;
  position: relative; /* 相对定位 */
  overflow: hidden;
}
/* 绘制椭圆 */
.product-categories .title a::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 120%;
  width: 120%;
  height: 240px;
  border-radius: 50%;
  background-color: var(--primary-color);
  /* 过渡效果是加在这里吗？*/
  /* transition: transform 0.5s; */
  z-index: -1;
}

/* 绘制长方形*/
.product-categories .title a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--primary-color);
  transform: translateY(-110%);
  transition: transform 0.4s;
  /* transition-delay: 0.5s; */
  z-index: -1;
}

/* 鼠标移入动画 */
.product-categories .title a:hover::before {
  transition: transform 0.5s;
  transform: translateY(-50%);
}
/* 鼠标移入动画 */
.product-categories .title a:hover::after {
  transition: transform 0s;
  transition-delay: 0.5s;
  transform: translateY(0);
}
.product-categories .title a:hover {
  color: #fff;
}
.product-categories .row {
  /* display: flex;
  flex-wrap: wrap; */
  margin-top: 52px;
  overflow: hidden;
}
.product-categories .row .row-content {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  /* background-color: skyblue; */
}
.product-categories .row .col {
  /* border: 1px solid red; */
  /* box-sizing: border-box; */
  margin-bottom: 20px;
}

.product-categories .row .col .col-content {
  background-color: var(--light-gray-color);
  margin-right: 20px;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
}

.product-categories .col .col-content .icon {
  width: 88px;
  height: 88px;
  /* border: 1px solid red; */
  margin-right: 12px;
  font-size: 56px;
  position: relative;
}
/* 透明图层 */
.product-categories .col .col-content .icon::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--white-color);
  opacity: 0.7;
  border-radius: 50%;
}

.product-categories .col .col-content .icon::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 第一个部分 产品分类 */
.product-categories .col .col-content .categories-title h3 {
  /* 20 *1.5=30  上下 5 */
  /* 16 *1.5= 24 */
  font-size: 20px;
}

/* 鼠标移入动画 */
.product-categories .col .col-content::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  /* left: 0;
  top: 0; */
  height: 100%;
  /* width: 100%; */
  width: 0px;
  background-color: var(--primary-color);
  z-index: -1;
  transition: width 0.5s;
}
.product-categories .col .col-content:hover::before {
  left: 0;
  right: auto;
  width: 100%;
}
.product-categories .col .col-content:hover .categories-title {
  color: var(--font-white-color);
}

/* 第二部分：特色美食推荐 */
.food-recommend {
  /* border: 1px solid red; */
  margin-top: 31px;
}
/* .food-recommend .content {
  min-height: 300px;
  background-color: khaki;
} */


.food-recommend .grid-container {
  display: grid; /* 网格布局 */
  grid-template-rows: repeat(2, auto); /* 两行,行高自动 */
  grid-template-columns: repeat(4, 1fr); /* 四列,每列宽度自动 */
  gap: 30px; /* 网格行列间距 30px*/
  margin-top: 45px;
}
.food-recommend .grid-container .grid-item {
  background-color: red;
}
/* 第一项占两列*/
.food-recommend .grid-container .grid-item:nth-child(1) {
  /* 水平网格线 -行 */
  grid-row: 1/2;
  /* 垂直网格线 - 列*/
  grid-column: 1/3;
  background-color: skyblue;
}

.food-recommend .grid-container .grid-item:nth-child(6) {
  /* 水平网格线 -行 */
  grid-row: 2/3;
  /* 垂直网格线 - 列*/
  grid-column: 3/5;
  background-color: khaki;
}

/* 计算图片 高与宽比  408 / 584 = 70%   高：宽=70：100 */
.bl-70-100 {
  width: 100%;
  padding-top: 70%;
}
.bl-auto {
  width: 100%;
  height: 100%;
  background-color: pink;
}

.bl-70-100,
.bl-auto {
  position: relative;
}

.food-recommend .grid-item-content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* background-color: tomato; */
  overflow: hidden;
  cursor: pointer;
}
.food-recommend .grid-item-content img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比，正好可以全部覆盖整个容器 */
}

/* 文字和黑色半透明动画*/
.food-recommend .grid-item-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* background-color: red; */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.food-recommend .grid-item-content:hover::before {
  opacity: 1;
}
.food-recommend .grid-item-content .text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20px 20px 20px;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out;
}
.food-recommend .grid-item-content .text h4 {
  /* line-height 24 * 1.5=36  上下 6px  */
  font-size: 24px;
  color: var(--font-white-color);
}
.food-recommend .grid-item-content .text p {
  /* line-height 16 * 1.5= 24  上下 4 */
  color: #fff;
}

.food-recommend .grid-item-content .text .bottom {
  margin-top: 11px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
/* 价格按扭样式 */
.food-recommend .grid-item-content .text .bottom span.price {
  font-size: 20px;
  color: var(--font-red-color);
  background-color: #fff;
  height: 32px;
  line-height: 32px;
  padding-right: 7px;
  border-radius: 6px;
  flex-shrink: 0; /* 不缩小 */
  overflow: hidden;
}
/* 价格前面的 团 效果 */
.food-recommend .grid-item-content .text .bottom span.price::before {
  content: "团";
  display: inline-block;
  line-height: 32px;
  padding: 0px 9px;
  color: var(--font-white-color);
  background-color: var(--primary-color);
  margin-right: 8px;
}
/* 按扭样式 */
.food-recommend .grid-item-content .text .bottom a {
  display: block;
  width: 80px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 6px;
  background-color: var(--white-color);
  color: var(--font-black-color);
  flex-shrink: 0;
  margin-top: 5px;
}

.food-recommend .grid-item-content:hover .text {
  transform: translateY(0);
}

/* 公司优势 */
.company-advantages {
  height: 200px;
  margin-top: 60px;
  background: url("../images/big-bg.png") no-repeat center -100px;
  position: relative;
}
.company-advantages::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.company-advantages-content {
  height: inherit;
  /* background-color: red; */
  position: relative;
  z-index: 1;
  display: flex;
}
.company-advantages-content .item {
  flex: 1;
  /* border: 1px solid blue; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.company-advantages-content .item .num {
  font-size: 72px;
  line-height: 1;
  /* border: 1px solid blue; */
  margin-bottom: 20px;
}
.company-advantages-content .item .desc {
  font-size: 20px;
  line-height: 1;
}

/* 美食热销 - 选项卡 */
.hot-food {
  /* border:2px solid red; */
  /* min-height: 600px; */
  position: relative;
  overflow: hidden;
}
.hot-food::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(
    to bottom,
    var(--primary-color),
    var(--white-color)
  );
  opacity: 0.4;
}
.hot-food-content {
  /* background-color: red; */
  position: relative;
  /* min-height: 600px; */
  /* border: 1px solid red; */
  padding-top: 49px;
  overflow: hidden;
}
.tabs-wrap {
  text-align: center;
  padding-top: 36px;
}
ul.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  padding: 12px 11px;
  position: relative;
  z-index: 1; /* 创建自己的层叠上下文 */
  /* background-color: red; */
}
ul.tabs li {
  padding: 8px 22px;
  margin-right: 9px;
  line-height: 1;
  cursor: pointer;
  /* border: 1px solid red; */
  /* border: 1px solid red; */
}
ul.tabs li.active {
  color: #fff;
}
ul.tabs li.slider {
  width: 108px;
  height: 32px;
  background-color: var(--primary-color);
  position: absolute;
  left: 11px;
  top: 12px;
  transition: top 0.3s, left 0.3s, width 0.3s;
  /* left: 11px;
  top: 44px;
  width: 80px; */
  padding: 0;
  border-radius: 6px;
  z-index: -1;
}
.tab-content {
  padding-top: 40px;
}
.tab-content .tab-content-item {
  /* min-height: 200px; */
  /* background-color: khaki; */
  display: none;
  /* background-color: khaki; */
  /* overflow: hidden; */
}
ul.flex-list {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 30px);
  /* border: 1px solid red; */
}
ul.flex-list li {
  box-sizing: border-box;
  margin-bottom: 30px;
  /* min-height: 400px; */
  /* border: 1px solid red; */
}
ul.flex-list li a {
  display: block;
  margin-right: 30px;
  background-color: skyblue;
  /* min-height: 300px; */
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 5px var(--border-dark-grey-color);
  border-radius: 10px;
}
ul.flex-list li a .img-wrap {
  padding-top: 58%;
  /* background-color: khaki; */
  position: relative;
}
ul.flex-list li a .img-wrap .img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 10px 10px 0px 0px;
}
ul.flex-list li a .img-wrap .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;

  /* border-radius: 10px 10px 0px 0px; */
}
ul.flex-list li a .img-wrap .img:hover img {
  transform: scale(1.2);
}

/* 扫光效果 */
ul.flex-list li a .img-wrap .img::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  left: -70%;
  top: 0;
  background-image: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3)
  );
  transform: skewX(-25deg);
}
ul.flex-list li a .img-wrap .img:hover::after {
  transition: left 0.5s;
  left: 100%;
}

ul.flex-list li a .tag {
  position: absolute;
  left: -18px;
  top: 10px;
  padding: 10px 18px;
  line-height: 1;
  background-color: var(--sub-dark-red-color);
  color: var(--font-white-color);
  border-radius: 6px 6px 6px 0;
}
ul.flex-list li a .tag::after {
  content: "";

  border: 9px solid transparent;
  border-top-color: var(--sub-dark-red-color1);
  border-right-color: var(--sub-dark-red-color1);
  position: absolute;
  left: 0;
  bottom: -18px;
}

ul.flex-list li a .title {
  /* line-height:  20 *1.5= 30;  上下 5px */
  font-size: 20px;
  color: var(--font-black-color);
  padding: 20px 20px 0 20px;
  /* padding-top: 20px; */
  /* 单行文溢出显示省略号 */
}
ul.flex-list li a .desc {
  color: var(--font-dark-grey-color);
  padding-left: 20px;
  padding-bottom: 21px;
}

.yeshu {
  width: 329px;
  height: 423px;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: bottom center;
  /*  调用 animation 动画 */
  animation: shake 8s ease-in-out infinite alternate;
}
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

/* 今日特价美食 */
.today-special{
  background: url('../images/big-bg.png') no-repeat center;
  padding:20px 0px;
  position: relative;
  /* border:4px solid red; */
  margin-top:50px;
}
.today-special::before{
  content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.7);

}
.today-special h3.common-title{
  color:#fff;
}
.today-special p.common-desc {
  color:#fff;
  margin-bottom:20px;
}
.product-item {
  /* width:400px; */
  /* height: 500px; */
  background-color: #fff; /* 背景色为白色 */
  border-radius:10px ;/* 圆角半径 10px */
  /*margin-left:150px;  左外边距为150px -- 后面是要删除的 */
  padding:20px; /* 内边距为20px -四个方向 */
}
.product-item p,.product-item h3{
  /* border:1px solid red; */
  display: flex;
  align-items: center; /* 子项在垂直居中 */
  justify-content: space-between; /* 子项在水平两对齐居中 */
}
.product-item p {
  height: 40px;
  color:#73848c;
  font-size: 18px;
}
.product-item h3{
  height:50px;
}
.product-item h3 .title{
  font-size: 20px;
  /* 防御式编程 */
  /* 文本溢出显示省略 */
  white-space: nowrap;  /* 一行放不下时不换 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden; /* 超出部分隐藏 */
}

.product-item h3 .price{
font-size:24px;
color:#ff8900;
}

.product-item .img{
  /* width:100%; */
  /* height: 100px; */
  /* 长方形的宽高比  100:94   200:188 */
  padding-top:94%;
  background-color:red;
  margin-top:20px;
  position: relative;/* 相对定位 */
}
.product-item .img img{
  position: absolute;/* 绝对定位 */
  left:0;
  top:0;
  width:100%;
  height: 100%;
  object-fit: cover;/* 图片以什么样的方式填充 */
}


.container{
  max-width: 1200px;
  /* padding:0px 50px; */
  margin:50px auto;

  position: relative;
}
.mySwiper2{
  margin:0px 40px;
}
.special-wrap{
  position: relative;
}
.special-wrap .swiper-button-prev{
  left:0px;
  color:var(--primary-color)
}
.special-wrap .swiper-button-next{
  right:0px;
  color:var(--primary-color)
}

/* 限时优惠 */

.limited-time-offer {
  padding-top: 20px;
}
.limited-time-offer-body ul {
  display: flex;
  justify-content: space-between;
  gap: 40px; /* 间隙 */
  margin-top: 40px;
}
.limited-time-offer-body ul li {
  flex: 1; /* 1 1 0 */
  /* min-height: 400px; */
  /* background-color: khaki; */
  box-shadow: 0px 0px 6px 0px var(--box-shadow-color);
  border-radius: 8px;
}
.limited-time-offer-body ul li a {
  display: block;
  padding: 20px; /* 内边距 */
  display: flex;
}
/* ( 1200 - 40 )/2=580  - 40 = 540 */
/* 右边图片 290px  290 /580 = 50% 
左边的文字 580 -290= 290px 50% */

/* 
每个 li 宽 ( 1200 - 40 )/2=580 
li 中 a 去掉左右内边距 40px ，则总宽  580 - 40 = 540 
*/
/* 右边图片 290px  290 /540 = 53.7% 
左边的文字 540 -290= 250 px   250 / 540=46.3% */
.limited-time-offer-body .left-text {
  width: 46.3%;
  /* min-height: 300px; */
  /* background-color: skyblue; */
  padding-right: 10px;
  box-sizing: border-box;
}

.limited-time-offer-body .right-img {
  width: 53.7%;

  /* background-color: red; */
  /* min-height: 300px; */
  /* background-color: khaki; */
}

.limited-time-offer-body .left-text .title {
  font-size: 20px;
  color: var(--font-black-color);
  font-weight: bold;
}
.limited-time-offer-body .left-text .desc {
  color: var(--font-dark-grey-color);
  /* line-height: 25px; */
  margin-top: 20px;
}
.limited-time-offer-body .left-text .tag {
  width: 150px;
  height: 36px;
  border: 1px solid var(--sub-deep-orange-color);
  border-radius: 6px 0px 6px 0px;
  color: var(--sub-deep-orange-color);
  text-align: center;
  line-height: 36px;
  margin-top: 25px;
  margin-bottom: 22px;
}
.limited-time-offer-body .left-text .tag:hover {
  background-color: var(--sub-deep-orange-color);
  color: var(--font-white-color);
}

.limited-time-offer-body .left-text p {
  color: var(--font-black-color);
  line-height: 30px;
}

.limited-time-offer-body .right-img .img-wrap {
  width: 100%;
  /* 318 /270 = 1.178 */
  padding-top: 117.8%;
  /* background-color: red; */
  position: relative;
}
.limited-time-offer-body .right-img .img-wrap .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* background-color: khaki; */
}
.limited-time-offer-body .right-img .img-wrap .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* 美食画廊*/

.gallery {
  position: relative;
  margin-top: 60px;
}
.gallery::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  width: 100%;
  /* min-height: 800px; 后面要删除 */
  background-image: linear-gradient(
    to bottom,
    var(--primary-color),
    var(--white-color)
  );
  opacity: 0.4;
}
.gallery-body {
  padding-top: 29px;
  /* height: 800px; */
  /* background-color: red; */
  position: relative;
}
.gallery-body .imglist-wrap {
  /* background-color: blue; */
  overflow: hidden;
}
.gallery-body ul.imglist {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 29px);
  margin-top: 56px;
}
.gallery-body ul.imglist li {
  /* min-height: 200px; */
  /* border: 1px solid red; */
  box-sizing: border-box;
  margin-bottom: 20px;
}
.gallery-body ul.imglist li .img-wrap {
  margin-right: 29px;
  /* min-height: 200px; */
  background-color: khaki;
}
.gallery-body .img-wrap .bl-91-4 {
  /* 高与宽的比 */
  /* 254/278=91.4 */
  padding-top: 91.4%;
  background-color: skyblue;
  position: relative;
}
.gallery-body .img-wrap .bl-91-4 .img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* background-color: red; */
}
.gallery-body .img-wrap .bl-91-4 .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-body .img-wrap .bl-91-4 .img::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s;
}
.gallery-body .img-wrap .bl-91-4 .img:hover::before {
  opacity: 1;
}

.gallery-body .img-wrap .bl-91-4 .img .magnifier {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s;
}
.gallery-body .img-wrap .bl-91-4 .img:hover .magnifier {
  opacity: 1;
}

/* 黑色的半透明的弹出层 */
.gallery .img-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  display: none; /* 隐藏*/
}
.big-img-wrap {
  /* border: 2px solid red; */
  padding: 0px 53px;
  position: relative;
}
.gallery .img-popup .big-img-wrap img {
  width: 100%;
  box-sizing: border-box;
  border: 5px solid #fff;
  display: block;
}
.gallery .img-popup .big-img-wrap .button {
  width: 32px;
  height: 50px;
  background-color: #fff;
  position: absolute;
  /* left: -53px; */
  top: 50%;
  font-size: 32px;
  line-height: 50px;
  transform: translateY(-50%);
  cursor: pointer;
}
.gallery .img-popup .big-img-wrap .prev {
  left: 5px;
}
.gallery .img-popup .big-img-wrap .next {
  right: 5px;
}
.gallery .img-popup .big-img-wrap .close-button2 {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-28px, -50%);
  color: #fff;
  font-size: 22px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

/* 网站底部css样式 */
.footer {
  background-color: var(--footer-bg-color1);
  /* min-height: 216px; 后面要删除 */
  margin-top: 40px;
  color: #fff;
  border-bottom: 1px solid var(--footer-bg-color2);
}
.footer-body {
  display: flex;
}
.footer-link {
  /* min-height: 216px; */
  /* background-color: khaki; */
  display: flex;
  padding-top: 36px;
  padding-bottom: 41px;
}
.footer-logo {
  /* min-height: 216px; */
  /* background-color: skyblue; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.footer-link dl {
  flex: 1;
}
.footer-link dl dt {
  font-size: 20px;
  color: var(--white-color);
  font-weight: bold;
}
.footer-link dl dd {
  margin-top: 32px;
}
.footer-link dl dd a {
  font-size: 20px;
  color: var(--footer-font-color);
}
.footer-link dl dd a:hover {
  color: var(--white-color);
}
/* dt  20px  1.5   行高 20px * 1.5 = 30px  */
.footer-copyright {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  background-color: var(--footer-bg-color2);
  color: var(--white-color);
  border-top: 1px solid var(--footer-border-color);
}

.sider-menu {
  /* min-width: 100px; */
  /* min-height: 320px; */
  position: fixed;
  bottom: 100px;
  right: 0;
  background-color: var(--white-color);
  border-radius: 10px 0 0 10px;
  box-shadow: 0 0 3px var(--box-shadow-color);
  z-index: 97;
}
.sider-menu ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--light-gray-color);
  padding: 10px 10px;
  cursor: pointer;
  position: relative;
}
.sider-menu ul li:first-child {
  border-radius: 10px 0 0 0;
}
.sider-menu ul li:last-child {
  border-radius: 0 0 0 10px;
}
.sider-menu ul li:last-child {
  border-bottom: none;
  padding: 0;
}
.sider-menu ul li span.iconfont {
  font-size: 30px;
  color: var(--font-dark-grey-color);
}
.sider-menu ul li p {
  color: var(--font-dark-grey-color);
}
.sider-menu ul li:hover {
  background-color: var(--primary-color);
}
.sider-menu ul li:hover span.iconfont,
.sider-menu ul li:hover p {
  color: var(--white-color);
}
.sider-menu ul li .weixin-qrcode {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 3px var(--box-shadow-color);
  background-color: var(--white-color);
  padding: 20px;
  display: none;
}
.weixin-qrcode p.title {
  font-size: 24px;
}
.weixin-qrcode p {
  text-align: center;
}
.sider-menu ul li:hover .weixin-qrcode p {
  color: var(--font-dark-grey-color);
}
.sider-menu ul li:hover .weixin-qrcode {
  display: block; /* 显示二维码 */
}
.sider-menu ul li a.back-top {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* background-color: red; */
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 楼梯式导航样式 */
.louti {
  min-height: 200px; /* 后面要删除 */
  min-width: 100px; /* 后面要删除 */
  /* background-color: skyblue; */
  position: fixed;
  top: 200px;
  left: 20px;
  display: none; /* 默认隐藏 */
}

.louti ul li {
  line-height: 30px;
  text-indent: 10px;
  border-left: 2px solid var(--light-gray-color);
  cursor: pointer; /* 鼠标悬停样式 */
  color: var(--font-dark-grey-color);
}

.louti ul li.current {
  color: var(--primary-color);
  border-left-color: var(--primary-color);
}

.skin {
  width: 140px;
  /* min-height: 100px; */
  /* background-color: #fff; */
  position: fixed;
  /* right: 0; */
  right: -100px;
  top: 150px;
  box-shadow: 0 0 2px var(--box-shadow-color);
  z-index: 96;
  /* border-radius: 5px 0 0 5px; */
  display: flex;
  /* 给 right 属性添加过渡效果 */
  transition: right 0.5s;
}
.skin .skin-switch {
  /* width: 40px; */
  width: 20px;
  padding: 10px;
  text-align: center;
  background-color: var(--primary-color);
  color: var(--white-color);
  border-radius: 5px 0 0 5px;
  cursor: pointer;
}
.skin .skin-theme {
  width: 100px;
  min-height: 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.skin .skin-theme span {
  width: 20px;
  height: 20px;
  background-color: var(--skin-color);
  cursor: pointer;
}
.skin .skin-theme span.current {
  outline: 2px solid var(--black-color);
}