/* 查看更多这个a是很多地方都有 */
.more {
    display: flex;
    align-items: center;
    margin-top: 11px;
    color: #999;
}

.more .icon-jinrujiantou {
    font-size: 18px;
}

/* 共同的商品价格样式 */
.price {
    color: #9a2e1f;
    font-size: 23px;
}

.price span {
    font-size: 17px;
}

/* 菜单激活时样式 */
.active {
    background-color: #27ba9b;
    color: #fff;
}





.banner {
    position: relative;
    height: 500px;
}

/* 背景图片 */
.slideshow {
    position: relative;
    height: 100%;
}

/* 背景图片水平排列，超出部分隐藏 */
.slideshow .slideshow-bg {
    display: flex;
    overflow: hidden;
}

/* 方向键 */
.button-left,
.button-right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 44px;
    /* 只给方向键设置透明度 */
    background-color: rgba(0, 0, 0, .2);
    border-radius: 50%;
}

.button-left {
    left: 260px;
}

.button-right {
    right: 10px;
}

.icon-xiangzuojiantou,
.icon-xiangyoujiantou {
    color: #fff;
    font-size: 23px;
}

/* 指示点 */
.slideshow-point {
    display: flex;
    position: absolute;
    left: 680px;
    bottom: 30px;
}

.slideshow-point li {
    width: 10px;
    height: 10px;
    margin-right: 15px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.43;
}

/*侧边栏*/
.sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 255px;
    height: 100%;
    background-color: #9b9b9b;
    opacity: 0.8;
}

.sidebar li {
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding-left: 36px;
    padding-right: 19px;
}

.sidebar a span:first-child {
    margin-left: 15px;
}


.sidebar li a {
    color: #fff;
}

.sidebar li:hover {
    background-color: #27ba9b;
}

/* 新鲜列表 */
/*-----------------标题栏------------------*/
.new-popular-goods .new-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 114px;
}

.new-popular-goods .new-header .new-title {
    display: flex;
    align-items: baseline;
}

.new-popular-goods .new-title h2 {
    margin-right: 34px;
    font-size: 29px;
    color: #333;
    font-weight: 400;
}

.new-popular-goods .new-title h5 {
    color: #999;
    font-weight: 400;
}

/*-----------------商品盒子------------------*/
.new-popular-goods .new-list {
    display: flex;
    justify-content: space-between;
    height: 405px;
    text-align: center;
}

.new-popular-goods .new-list li {
    position: relative;
    top: 0;
    background-color: #f0f9f4;
    box-sizing: border-box;
    transition: all .3s;
}

.new-popular-goods .new-list li:hover {
    /* 盒子阴影 */
    box-shadow: 0 5px 5px #ccc;
    top: -2px;
}


/*------------------【新品】标签------------------*/
.new-popular-goods .new-text {
    position: absolute;
    left: 17px;
    top: 17px;
    width: 28px;
    height: 51px;
    border: 1px solid #27ba9b;
    color: #27ba9b;
    font-size: 18px;
    border-radius: 5px;
    line-height: 1.2;
    padding-top: 4px;
    box-sizing: border-box;
}

/*------------------图片------------------*/
.new-popular-goods .new-list .goods-img {
    width: 305px;
    height: 305px;
}

.new-popular-goods .goods-img img {
    width: 100%;
    height: 100%;
}

.new-popular-goods .goods-list h3 {
    margin: 18px 0 10px 0;
    font-size: 20px;
    font-weight: 400;
}

/* 人气列表 */
/*-----------------标题栏------------------*/
.new-popular-goods .popular-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 114px;
}

.new-popular-goods .popular-header .popular-title {
    display: flex;
    align-items: baseline;
}

.new-popular-goods .popular-title h2 {
    margin-right: 34px;
    font-size: 29px;
    color: #333;
    font-weight: 400;
}

.new-popular-goods .popular-title h5 {
    color: #999;
    font-weight: 400;
}

/*-----------------商品盒子------------------*/
.new-popular-goods .popular-list {
    display: flex;
    justify-content: space-between;
    height: 405px;
    text-align: center;
}

.new-popular-goods .popular-list p {
    font-size: 14px;
    color: #999;
}

.new-popular-goods .popular-list li {
    position: relative;
    top: 0;
    background-color: #d3f8ff;
    box-sizing: border-box;
    transition: all .3s;
}

.new-popular-goods .popular-list li:hover {
    /* 盒子阴影 */
    box-shadow: 0 5px 5px #ccc;
    top: -2px;
}

/*------------------图片------------------*/
.new-popular-goods .popular-list .goods-img {
    width: 305px;
    height: 305px;
}

.new-popular-goods .goods-img img {
    width: 100%;
    height: 100%;
}

.new-popular-goods .goods-list h3 {
    margin: 18px 0 10px 0;
    font-size: 20px;
    font-weight: 400;
}

/*热门品牌*/
.hot-goods {
    background-color: #ececec;
}

/*-----------------标题栏------------------*/
.hot-goods .hot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 114px;
}

.hot-goods .hot-header .hot-title {
    display: flex;
    align-items: baseline;
}

.hot-goods .hot-title h2 {
    margin-right: 34px;
    font-size: 29px;
    color: #333;
    font-weight: 400;
}

.hot-goods .hot-title h5 {
    color: #999;
    font-weight: 400;
}

.hot-goods .hot-header .many1 {
    display: flex;
    /*向左移动880px*/
    margin-left: 880px;
    /*-------------------------------------------------------------------------------*/
}

.hot-goods .hot-header .many1 i {
    color: #000;
    font-size: 14px;
    ;
}

.hot-goods .hot-header .many2 {
    display: flex;
    background-color: #27ba9b;
    /*-------------------------------------------------------------------------------*/
}

.hot-goods .hot-header .many2 i {
    color: #000;
    font-size: 14px;
}

/*-----------------商品盒子------------------*/
.hot-goods .hot-list {
    display: flex;
    justify-content: space-between;
    height: 300px;
    width: 1140px;
    text-align: center;
}

/*------------------图片------------------*/
.hot-goods .hot-list .goods-img {
    width: 122px;
    height: 153px;
}

.hot-goods .goods-img img {
    width: 180%;
    height: 180%;
}

/*生鲜专栏*/
.fresh-goods .fresh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    /* background-color: pink; */
}

.fresh-goods .fresh-header .right {
    display: flex;
    align-items: baseline;
}

.fresh-goods .fresh-header .tabs {
    display: flex;
    align-items: center;
    margin-right: 65px;
}


.fresh-goods .fresh-header h2 {
    font-size: 29px;
    font-weight: 400;
}

.fresh-goods .tabs li {
    margin-left: 21px;
}

.fresh-goods .tabs a {
    padding: 2px 5px;
}

/*-----------------商品盒子------------------*/
.fresh-goods .fresh-list {
    display: flex;
    justify-content: space-between;
}

/* --------左侧商品大图--------- */
.fresh-list .big-pic {
    width: 240px;
    height: 610px;
}

/* --------右侧商品小图--------- */
.fresh-list .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    width: 992px;
    height: 610px;
    /* background-color: pink; */
}

.fresh-list .goods-list li {
    position: relative;
    width: 242px;
    height: 304px;
    border: 2px solid #fff;
    /* 超出部分隐藏 */
    overflow: hidden;
}

.fresh-list .img-box {
    width: 184px;
    height: 184px;
    margin: 0 auto;
}

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

.fresh-list .info {
    padding: 0 30px 13px 30px;
}

.fresh-list .info h3 {
    font-size: 16px;
    font-weight: 400;
}

/* --------------悬浮框-找相似-------------- */
.fresh-list .goods-list li:hover {
    border: 2px solid #27ba9b;
    transition: all .5s;
}
/*---------------使用hover伪类，当鼠标悬浮在商品栏上时激活--------------*/
.fresh-list .goods-list li:hover .find {
    bottom: 0;
}

/* ---------------所有的find都用这个样式-------------- */
.find {
    position: absolute;
    left: 0;
    bottom: -84px;
    width: 242px;
    height: 84px;
    background-color: #27ba9b;
    text-align: center;
    padding: 19px 63px 13px 54px;
    box-sizing: border-box;
    color: #fff;
    font-size: 13px;
    /* 过渡 */
    transition: all .5s;
}

.find p:first-child {
    border-bottom: 1px solid #fff;
    margin-bottom: 2px;
    padding-bottom: 2px;
    font-size: 18px;
}


/*服饰专栏*/
.clothes-goods .clothes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    /* background-color: pink; */
}

.clothes-goods .clothes-header .right {
    display: flex;
    align-items: baseline;
}

.clothes-goods .clothes-header .tabs {
    display: flex;
    align-items: center;
    margin-right: 65px;
}


.clothes-goods .clothes-header h2 {
    font-size: 29px;
    font-weight: 400;
}

.clothes-goods .tabs li {
    margin-left: 21px;
}

.clothes-goods .tabs a {
    padding: 2px 5px;
}

/*-----------------商品盒子------------------*/
.clothes-goods .clothes-list {
    display: flex;
    justify-content: space-between;
}

/* --------左侧商品大图--------- */
.clothes-list .big-pic img{
    width: 240px;
    height: 610px;
}

/* --------右侧商品小图--------- */
.clothes-list .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    width: 992px;
    height: 610px;
    /* background-color: pink; */
}

.clothes-list .goods-list li {
    position: relative;
    width: 242px;
    height: 304px;
    border: 2px solid #fff;
    /* 超出部分隐藏 */
    overflow: hidden;
}

.clothes-list .img-box {
    width: 184px;
    height: 184px;
    margin: 0 auto;
}

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

.clothes-list .info {
    padding: 0 30px 13px 30px;
}

.clothes-list .info h3 {
    font-size: 16px;
    font-weight: 400;
}

/* --------------悬浮框-找相似-------------- */
.clothes-list .goods-list li:hover {
    border: 2px solid #27ba9b;
    transition: all .5s;
}
/*---------------使用hover伪类，当鼠标悬浮在商品栏上时激活--------------*/
.clothes-list .goods-list li:hover .find {
    bottom: 0;
}


/*清洁专栏*/
.clean-goods .clean-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    /* background-color: pink; */
}

.clean-goods .clean-header .right {
    display: flex;
    align-items: baseline;
}

.clean-goods .clean-header .tabs {
    display: flex;
    align-items: center;
    margin-right: 65px;
}


.clean-goods .clean-header h2 {
    font-size: 29px;
    font-weight: 400;
}

.clean-goods .tabs li {
    margin-left: 21px;
}

.clean-goods .tabs a {
    padding: 2px 5px;
}

/*-----------------商品盒子------------------*/
.clean-goods .clean-list {
    display: flex;
    justify-content: space-between;
}

/* --------左侧商品大图--------- */
.clean-list .big-pic img{
    width: 240px;
    height: 610px;
}

/* --------右侧商品小图--------- */
.clean-list .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    width: 992px;
    height: 610px;
    /* background-color: pink; */
}

.clean-list .goods-list li {
    position: relative;
    width: 242px;
    height: 304px;
    border: 2px solid #fff;
    /* 超出部分隐藏 */
    overflow: hidden;
}

.clean-list .img-box {
    width: 184px;
    height: 184px;
    margin: 0 auto;
}

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

.clean-list .info {
    padding: 0 30px 13px 30px;
}

.clean-list .info h3 {
    font-size: 16px;
    font-weight: 400;
}

/* --------------悬浮框-找相似-------------- */
.clean-list .goods-list li:hover {
    border: 2px solid #27ba9b;
    transition: all .5s;
}
/*---------------使用hover伪类，当鼠标悬浮在商品栏上时激活--------------*/
.clean-list .goods-list li:hover .find {
    bottom: 0;
}

/*居家专栏*/
.home-goods .home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    /* background-color: pink; */
}

.home-goods .home-header .right {
    display: flex;
    align-items: baseline;
}

.home-goods .home-header .tabs {
    display: flex;
    align-items: center;
    margin-right: 65px;
}


.home-goods .home-header h2 {
    font-size: 29px;
    font-weight: 400;
}

.home-goods .tabs li {
    margin-left: 21px;
}

.home-goods .tabs a {
    padding: 2px 5px;
}

/*-----------------商品盒子------------------*/
.home-goods .home-list {
    display: flex;
    justify-content: space-between;
}

/* --------左侧商品大图--------- */
.home-list .big-pic img{
    width: 240px;
    height: 610px;
}

/* --------右侧商品小图--------- */
.home-list .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    width: 992px;
    height: 610px;
    /* background-color: pink; */
}

.home-list .goods-list li {
    position: relative;
    width: 242px;
    height: 304px;
    border: 2px solid #fff;
    /* 超出部分隐藏 */
    overflow: hidden;
}

.home-list .img-box {
    width: 184px;
    height: 184px;
    margin: 0 auto;
}

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

.home-list .info {
    padding: 0 30px 13px 30px;
}

.home-list .info h3 {
    font-size: 16px;
    font-weight: 400;
}

/* --------------悬浮框-找相似-------------- */
.home-list .goods-list li:hover {
    border: 2px solid #27ba9b;
    transition: all .5s;
}
/*---------------使用hover伪类，当鼠标悬浮在商品栏上时激活--------------*/
.home-list .goods-list li:hover .find {
    bottom: 0;
}



/* -----------------最新专题----------------- */
.new-topic {
    background-color: #f5f5f5;
}

.new-topic .topic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 114px;
}

.new-topic .topic-header a {
    margin-top: 36px;
}


.new-topic .topic-header .topic-title h2 {
    font-size: 29px;
    font-weight: 400;
}


.new-topic .topic-list {
    display: flex;
    justify-content: space-between;
    height: 356px;
    /* background-color: skyblue; */
}

.new-topic .topic-list li {
    position: relative;
    width: 406px;
    height: 356px;
}

.new-topic .img-box {
    position: relative;
    width: 406px;
    height: 288px;
}

/* -----------渐变背景色----------- */
.new-topic .img-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* ----------------------线性渐变--------------------- */
    background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent);
}


.new-topic .img-box img {
    width: 100%;
    height: 100%;
}

.new-topic .topic-list .info {
    position: absolute;
    top: 222px;
    left: 15px;

}

.new-topic .info h3 {
    height: 33px;
    font-size: 20px;
    color: #fff;
    font-weight: 400;
}

.new-topic .info p {
    color: #999;
}

.new-topic .topic-list .price {
    position: absolute;
    top: 232px;
    right: 18px;
    width: 81px;
    height: 27px;
    text-align: center;
    line-height: 27px;
    background-color: #fff;
    font-size: 17px;
}

.new-topic .price span {
    font-size: 14px;
}

.new-topic .topic-list .social {
    display: flex;
    align-items: center;
    height: 67px;
    padding: 0 18px;
    background-color: #fff;
}

.social .like::before,
.social .view::before,
.social .reply::before {
    content: '';
    display: inline-block;
    background-image: url('../images/sprites.png');
}

.social .like::before {
    width: 15px;
    height: 13px;
    background-position: -120px -110px;
}

.social .view::before {
    width: 16px;
    height: 12px;
    background-position: -160px -110px;
}

.social .reply::before {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-position: -200px -110px;
}

.new-topic .topic-list li:nth-child(2) .social .like::before {
    content: '';
    display: inline-block;
    background-image: url('../images/sprites.png');
    width: 15px;
    height: 13px;
    background-position: -240px -110px;
}

.new-topic  .social .like{
    margin-right: 24px;
}

.new-topic  .social .view{
    margin-right: 187px;
}