/* 该css文件index.html的样式 */



/* **********2.网页中部********** */
/* ----------2.1.entry-入口---------- */
.entry {
  height: 500px;
  background-color: #F5F5F5;
}

.entry .w {
  height: 100%;
  position: relative;
}

/* ++++++++++2.1.1.轮播栏++++++++++ */
.entry .w .category {
  width: 250px;
  background-color: rgba(0, 0, 0, 0.42);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.category li {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.25s;
}

.category li:hover {
  background-color: #00BE9A;
}

.category p {
  height: 22px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  transition: 0.25s;
}

.category p a {
  color: #ffffff;
  transition: 0.25s;
}

.category p a:hover {
  border-bottom: red 2px solid;
}

.category p a:nth-child(1) {
  font-size: 16px;
  margin-left: 29px;
  margin-right: 9px;
}

.category p a:nth-child(n+2) {
  font-size: 14px;
  margin-left: 5px;
}

.category p:last-child {
  width: 10px;
  height: 10px;
  margin-right: 12px;
}

.category p i {
  font-size: 6.5px;
}

.entry .w .banner {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
}

.banner .picchoose {
  display: flex;
  gap: 25px;
  position: absolute;
  bottom: 25px;
  right: 25px;
}

.banner .picchoose p {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  transition: 0.25s;
}

.banner .picchoose p:hover {
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
}

.banner .direction .left {
  width: 50px;
  height: 75px;
  line-height: 75px;
  position: absolute;
  top: 50%;
  margin-top: -37.5px;
  left: 250px;
}

.banner .direction .right {
  width: 50px;
  height: 75px;
  line-height: 75px;
  position: absolute;
  top: 50%;
  margin-top: -37.5px;
  right: 0;
}

.banner .direction a,
.banner .direction .right::before,
.banner .direction .left::before {
  transition: 0.25s;
}

.banner:hover .direction a {
  background-color: rgba(0, 0, 0, 0.5);
}

.banner:hover .direction .left::before {
  font-family: "iconfont";
  content: "\e685";
  font-size: 50px;
  color: #F5F5F5;
}

.banner:hover .direction .right::before {
  font-family: "iconfont";
  content: "\e687";
  font-size: 50px;
  color: #F5F5F5;
}

/* ----------2.2.新鲜好物---------- */

.freshgoods {
  height: 550px;
}

/* ++++++++++2.2.1.板块头部++++++++++ */
.freshgoods .head {
  height: 110px;
  font-size: 20px;
  line-height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
}

.freshgoods .head small,
.freshgoods .head a {
  font-size: 16px;
  margin-left: 35px;
  color: #A1A1A1;
}

.freshgoods .head a:hover {
  color: #5EB69C;
}

/* ++++++++++2.2.2.板块主体++++++++++ */
.freshgoods ul {
  height: 440px;
  display: flex;
  justify-content: space-between;
}

.freshgoods li[class*=product] {
  width: 300px;
  height: 400px;
  background-color: #EEF9F4;
  transition: 0.25s;
}

.freshgoods li[class*=product]:hover {
  transform: translate(5px, -5px);
  box-shadow: -5px 5px 10px #5EB69C;
  border-radius: 25px;
  overflow: hidden;
}

.freshgoods li[class*=product]>a {
  display: block;
}

.freshgoods .pic {
  width: 300px;
  height: 300px;
  background-position: center;
}

.freshgoods .product1 .pic {
  background-image: url(../uploads/goods1.png);
}

.freshgoods .product2 .pic {
  background-image: url(../uploads/goods2.png);
}

.freshgoods .product3 .pic {
  background-image: url(../uploads/goods3.png);
}

.freshgoods .product4 .pic {
  background-image: url(../uploads/goods4.png);
}

.freshgoods .price {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.freshgoods .price h3 {
  font-size: 20px;
}

.freshgoods .price p {
  color: red;
  font-size: 20px;
}

/* ----------2.3.人气推荐---------- */
.recommends {
  height: 550px;
}

/* ++++++++++2.2.1.板块头部++++++++++ */
.recommends .head {
  height: 110px;
  font-size: 20px;
  line-height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
}

.recommends .head small {
  margin-left: 35px;
  font-size: 16px;
  color: #A1A1A1;
}

/* ++++++++++2.2.2.板块主体++++++++++ */
.recommends ul {
  height: 440px;
  display: flex;
  justify-content: space-between;
}

.recommends li[class*=product] {
  width: 300px;
  height: 400px;
  transition: 0.25s;
}

.recommends li[class*=product]:hover {
  transform: translate3d(0px, -3px, 0px);
  box-shadow: 0px 3px 10px #5EB69C;
}

.recommends li[class*=product]>a {
  display: block;
}

.recommends .pic {
  width: 300px;
  height: 300px;
  background-position: center;
}

.recommends .product1 .pic {
  background-image: url(../uploads/recommend1.png);
}

.recommends .product2 .pic {
  background-image: url(../uploads/recommend2.png);
}

.recommends .product3 .pic {
  background-image: url(../uploads/recommend3.png);
}

.recommends .product4 .pic {
  background-image: url(../uploads/recommend4.png);
}

.recommends .item {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.recommends .price h3 {
  font-size: 20px;
}

.recommends .item p {
  color: #A1A1A1;
  font-size: 16px;
}

/* ----------2.4.热门品牌---------- */
.hotbands {
  height: 450px;
  background-color: #F5f5f5;
}

/* ++++++++++2.4.1.板块头部++++++++++ */
.hotbands .head {
  height: 110px;
  font-size: 20px;
  line-height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
}

.hotbands .head small,
.hotbands .head i {
  margin-left: 35px;
  font-size: 16px;
  color: #A1A1A1;
}

.hotbands .head i {
  font-size: 20px;
  margin-left: 12px;
  transition: 0.25s;
}

.hotbands .head i:hover {
  background-color: #00BE9A;
  color: #ffffff;
}

/* ++++++++++2.4.2.板块主体++++++++++ */
.hotbands ul {
  display: flex;
  justify-content: space-between;
}

.hotbands li a {
  display: block;
  transition: 0.25s;
}

.hotbands li a:hover {
  transform: translate3d(0px, -3px, 0px);
  box-shadow: 0px 3px 10px #5EB69C;
}

.hotbands img {
  width: 240px;
  background-position: center;
}

/* ----------2.5.生鲜---------- */
.foods a {
  display: block;
}

/* ++++++++++2.5.1.板块头部++++++++++ */
.foods {
  height: 760px;
}

.foods .head {
  height: 110px;
  font-size: 20px;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.foods .head .right {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.foods .head ul {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

.foods .head li a {
  color: #333333;
  text-align: center;
  transition: 0.25s;
}

.foods .head ul li:nth-child(1) a {
  color: #ffffff;
  background-color: #00BE9A;
}

/* 鼠标经过ul大盒子时，先让第一个a恢复默认样式 */
.foods .head .right:hover li:nth-child(1) a:not(:hover) {
  color: #333333;
  background-color: transparent;
}

/* 鼠标经过任意a时高亮 (为了防止第一个a被上面的规则覆盖，这里特意加了权重选择器) */
.foods .head ul li:not(:nth-child(1)) a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

.foods .head .right p a {
  width: 100px;
  color: #A1A1A1;
  text-align: center;
  transition: 0.25s;
}

.foods .head .right p a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

/* ++++++++++2.5.2.板块主体++++++++++ */
.foods .mainbody {
  height: 650px;
  display: flex;
  justify-content: space-between;
  ;
}

.foods .mainbody a img {
  width: 250px;
}

.foods .bodyright {
  width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.foods .bodyright li {
  width: 240px;
  height: 300px;
  transition: 0.25s;
  padding: 5px 25px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.foods .bodyright li:hover {
  border: 1px solid #00BE9A;
}

.foods .bodyright li img {
  width: 190px;
  height: 190px;
}

.foods .bodyright li a {
  width: 100%;
  height: 100%;
}

.foods .bodyright li a p:nth-child(2) {
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.foods .bodyright li a p:nth-child(3) {
  height: 16px;
  font-size: 12px;
  color: #A1A1A1;
}

.foods .bodyright li a p:nth-child(4) {
  font-size: 18px;
  color: red;
  text-align: center;
}

.foods .bodyright li .mask {
  position: absolute;
  bottom: -20%;
  left: 0;
  width: 100%;
  height: 20%;
  background-color: #00BE9A;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 30px;
  text-align: center;
  transition: 0.25s;
}

.foods .bodyright li:hover .mask {
  transform: translateY(-100%);
}

.foods .bodyright li .mask a:first-child {
  width: 50%;
  border-bottom: 0.5px solid #ffffff;
  color: #F5F5F5;
}

.foods .bodyright li .mask a:last-child {
  width: 50%;
  color: #F5F5F5;
}

/* ----------2.6.服饰---------- */
/* ++++++++++2.6.1.板块头部++++++++++ */
.clothes {
  height: 760px;
}

.clothes .head {
  height: 110px;
  font-size: 20px;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clothes .head .right {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.clothes .head ul {
  display: flex;
  justify-content: space-between;
  gap: 35px;
}

.clothes .head a {
  display: block;
}

.clothes .head .right ul li a {
  color: #333333;
  text-align: center;
  transition: 0.25s;
}

.clothes .head ul li:nth-child(1) a {
  color: #ffffff;
  background-color: #00BE9A;
}

/* 鼠标经过ul大盒子时，先让第一个a恢复默认样式 */
.clothes .head .right:hover li:nth-child(1) a:not(:hover) {
  color: #333333;
  background-color: transparent;
}

/* 鼠标经过任意a时高亮 (为了防止第一个a被上面的规则覆盖，这里特意加了权重选择器) */
.clothes .head ul li:not(:nth-child(1)) a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

.clothes .head .right a {
  color: #A1A1A1;
  text-align: center;
  transition: 0.25s;
}

.clothes .head .right a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

/* ++++++++++2.6.2.板块主体++++++++++ */
.clothes .mainbody {
  height: 650px;
  display: flex;
  justify-content: space-between;
  ;
}

.clothes .mainbody a img {
  width: 250px;
}

.clothes .bodyright {
  width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.clothes .bodyright li {
  width: 240px;
  height: 300px;
  transition: 0.25s;
  padding: 5px 25px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.clothes .bodyright li:hover {
  transform: translate3d(0px, -3px, 0px);
  box-shadow: inset 2.5px 150px 75px #5EB69C;
  border-radius: 10px;
}

.clothes .bodyright li img {
  width: 190px;
  height: 190px;
}

.clothes .bodyright li a {
  width: 100%;
  height: 100%;
}

.clothes .bodyright li a h3 {
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.clothes .bodyright li a small {
  height: 16px;
  font-size: 12px;
  color: #A1A1A1;
}

.clothes .bodyright li a p {
  font-size: 18px;
  color: red;
  text-align: center;
}

/* ----------2.7.餐厨---------- */
/* ++++++++++2.7.1.板块头部++++++++++ */
.kitchen {
  height: 760px;
}

.kitchen .head {
  height: 110px;
  font-size: 20px;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kitchen .head .right {
  width: 650px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

.kitchen .head ul {
  display: flex;
  justify-content: space-between;
  gap: 1px;
}

.kitchen .head a {
  display: block;

}

.kitchen .head li a {
  color: #333333;
  text-align: center;
  transition: 0.25s;
}

.kitchen .head ul li:nth-child(1) a {
  color: #ffffff;
  background-color: #00BE9A;
}

/* 鼠标经过ul大盒子时，先让第一个a恢复默认样式 */
.kitchen .head .right:hover li:nth-child(1) a:not(:hover) {
  color: #333333;
  background-color: transparent;
}

/* 鼠标经过任意a时高亮 (为了防止第一个a被上面的规则覆盖，这里特意加了权重选择器) */
.kitchen .head ul li:not(:nth-child(1)) a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

.kitchen .head .right a {
  color: #A1A1A1;
  text-align: center;
  transition: 0.25s;
}

.kitchen .head .right a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

/* ++++++++++2.7.2.板块主体++++++++++ */
.kitchen .mainbody {
  height: 650px;
  display: flex;
  justify-content: space-between;
  ;
}

.kitchen .mainbody a img {
  width: 250px;
}

.kitchen .bodyright {
  width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.kitchen .bodyright li {
  width: 240px;
  height: 300px;
  transition: 0.25s;
  padding: 5px 25px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.kitchen .bodyright li:hover {
  transform: translate3d(0px, -3px, 0px);
  box-shadow: inset 2.5px 150px 75px #5EB69C;
  border-radius: 10px;
}

.kitchen .bodyright li img {
  width: 190px;
  height: 190px;
}

.kitchen .bodyright li a {
  width: 100%;
  height: 100%;
}

.kitchen .bodyright li a h3 {
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.kitchen .bodyright li a small {
  height: 16px;
  font-size: 12px;
  color: #A1A1A1;
}

.kitchen .bodyright li a p {
  font-size: 18px;
  color: red;
  text-align: center;
}

/* ----------2.8.居家---------- */
/* ++++++++++2.8.1.板块头部++++++++++ */
.home {
  height: 760px;
}

.home .head {
  height: 110px;
  font-size: 20px;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home .head .right {
  width: 650px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.home .head ul {
  display: flex;
  justify-content: space-between;
  gap: 35px;
}

.home .head a {
  display: block;

}

.home .head .right ul li a {
  color: #333333;
  text-align: center;
  transition: 0.25s;
}

.home .head ul li:nth-child(1) a {
  color: #ffffff;
  background-color: #00BE9A;
}

/* 鼠标经过ul大盒子时，先让第一个a恢复默认样式 */
.home .head .right:hover li:nth-child(1) a:not(:hover) {
  color: #333333;
  background-color: transparent;
}

/* 鼠标经过任意a时高亮 (为了防止第一个a被上面的规则覆盖，这里特意加了权重选择器) */
.home .head ul li:not(:nth-child(1)) a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

.home .head .right a {
  color: #A1A1A1;
  text-align: center;
  transition: 0.25s;
}

.home .head .right a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

/* ++++++++++2.8.2.板块主体++++++++++ */
.home .mainbody {
  height: 650px;
  display: flex;
  justify-content: space-between;
  ;
}

.home .mainbody a img {
  width: 250px;
}

.home .bodyright {
  width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.home .bodyright li {
  width: 240px;
  height: 300px;
  transition: 0.25s;
  padding: 5px 25px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.home .bodyright li:hover {
  transform: translate3d(0px, -3px, 0px);
  box-shadow: inset 2.5px 150px 75px #5EB69C;
  border-radius: 10px;
}

.home .bodyright li img {
  width: 190px;
  height: 190px;
}

.home .bodyright li a {
  width: 100%;
  height: 100%;
}

.home .bodyright li a h3 {
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.home .bodyright li a small {
  height: 16px;
  font-size: 12px;
  color: #A1A1A1;
}

.home .bodyright li a p {
  font-size: 18px;
  color: red;
  text-align: center;
}

/* ----------2.8.最新专题---------- */
/* ++++++++++2.8.1.板块头部++++++++++ */
.news {
  height: 470px;
  margin-bottom: 30px;
}

.news a {
  display: block;
}

.news .head {
  height: 110px;
  font-size: 20px;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news .head a {
  font-size: 16px;
  color: #A1A1A1;
  transition: 0.25s;
}

.news .head a:hover {
  color: #ffffff;
  background-color: #00BE9A;
}

/* ++++++++++2.8.2.板块主体++++++++++ */
.news .mainbody {
  height: 340px;
}

.news .mainbody>ul {
  display: flex;
  gap: 20px
}

.news .mainbody>ul>li {
  flex: 1;
  height: 370px;
}

.news .mainbody ul>li>a {
  width: 400px;
  height: 290px;
  background-color: blue;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
}

.news .topic1>a {
  background-image: url(../uploads/topic1.png);
}

.news .topic2>a {
  background-image: url(../uploads/topic2.png);
}

.news .topic3>a {
  background-image: url(../uploads/topic3.png);
}

.news h4 {
  font-size: 20px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 5px;
  opacity: 0.95;
  margin-left: 15px;
}

.news .price {
  font-size: 18px;
  color: red;
  background-color: #F5F5F5;
  margin-right: 15px;
  margin-bottom: 15px;
}

.news .comment {
  font-size: 14px;
  color: #666666;
  margin: 10px 10px;
  display: flex;
  justify-content: space-between;
}

.news .commentleft {
  display: flex;
  gap: 30px;
}

.news i {
  font-size: 16px;
}

.news .commentleft a span::before {
  font-family: "iconfont";
  font-size: 16px;
  content: "\e66f";
  margin-right: 4px;
}

.news .commentleft a:hover span::before {
  content: "\e721";
  color: #00BE9A;
}

.news .commentleft a:active span::before {
  content: "\e721";
  color: red;
}