html,
	body {
		height: 100%;
	}

	a,
	a:link,
	a:visited,
	a:hover,
	a:focus,
	a:active {
		text-decoration: none;
		color: #333;
	}

	.page-home {
		display: flex;

		flex-direction: column;
		height: 100%;

	}

	.page-home .top {

		flex-shrink: 0;

	}

	.page-home .content {
		flex: 1;
		overflow-y: scroll;

	}

	.page-home .footer {
		height: 200px;
	}


	.shops {
		padding: 20px 0;
		margin-left: 8px;
        margin-right: 8px;
        margin-bottom: 20px;
	}

	.shops h2 {
		 font-size: 30px;
        margin-top: 20px;
        text-align: center;
	}

	.shops .desc {
		  font-size: 18px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 30px;
        color: #999;
	}

	.shops .chanpin{
		margin-bottom: 20px;
	}

	.shops .img {
		width: 100%;
		height: 240px;
		background-color: #fff;
		overflow: hidden;
		position: relative; /* 可以根据需要设定定位方式 */
	}


	.shops .img img{
		width: 100%;
		height: auto;
       object-fit: cover; /* 可选，保持图片比例并填充父容器 */
	}
    

	.chanpin:hover .img img {
	  transition: transform 0.3s ease-in-out; /* 添加过渡效果，时间、速度曲线可自定义 */
	  transform: scale(1.2); /* 放大比例，可根据需要调整 */
	}
	.chanpin .img .mask{
		position: absolute;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: none;
/*		text-align: center;*/

	}
	.chanpin .img .mask .layui-btn{
		position: absolute;
		 top: 50%;
		 left: 50%;
		  transform: translateY(-50%); /* 垂直居中 */
		   transform: translateX(-50%); /* 垂直居中 */

	}
	.chanpin:hover .img .mask{
		display: block;
	}

     .shaixuan{
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top:18px;
        overflow: hidden;
        box-sizing: border-box;
        margin-bottom: 16px;
        position: relative;
    }
   .shaixuan .item{
        padding: 12px  21px;
        margin-right: 30px;
        margin-bottom:14px;
        color: #666;
        cursor: pointer;
        line-height: 1;
   }
   .shaixuan .item.active{
        color: #3388ff;
        background-color:#f2f7ff;
        border-radius: 6px;
   }
  .shaixuan .item span{
    font-size: 18px;
    line-height: 1;
   }

	.shops .name {
		
		    text-align: center;

		    -webkit-box-pack: center;
		    -webkit-justify-content: center;
		    -moz-box-pack: center;
		    -moz-justify-content: center;
		    -ms-flex-pack: center;
		    justify-content: center;
		    border-bottom-left-radius: 4px;
		    border-bottom-right-radius:4px;
		    font-size: 18px;
		    box-sizing: border-box;
		    padding: 16px;
		    color: #333;
		    border:#f5f5f5 1px solid;
	}

	.jieshao {
		padding: 10px;
	}

	.footer {
		background-color: rgb(248, 248, 248);
		padding: 0 30px;
	}

	.footer .nav {
		padding: 20px 0 10px 0;
		height: 34px;
		line-height: 34px;
		font-size: 15px;
		text-align: center;
		color: #333;
	}

	.footer .nav li {
		display: inline-block;
		padding: 0 20px;
	}

	.footer .copyright,
	.footer .address {
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
	}

	.footer .links {
		text-align: center;
		height: 30px;
		line-height: 30px;
	}

	.footer .links a {

		padding: 0 12px;

	}

	.beian {
		text-align: center;
		color: #333;
	}

	.footer a {
		color: #333;
	}
	.image{
		padding: 0;
		margin: 0;
	}

	.ltop{
		padding-top: 10px;
		display: flex;
		margin-bottom:40px;
	}
	.ltop .img{
		width:421px;
		height: 315px;
		background-color: #ccc;
		margin-right: 20px;
		overflow: hidden;
		border:1px solid #f2f2f2;
	}
	.ltop .img img{
	  width: 100%;
	  height: auto;
       object-fit: cover; /* 可选，保持图片比例并填充父容器 */
		
	}
	.ltop .miaoshu{
		flex: 1;
	}
	.ltop .miaoshu h1{
			font-size: 30px;
	    font-weight: bold;
	    color: #333;
	    line-height: 45px;
	}
	.ltop .miaoshu .product{
		padding: 36px 20px;
	    margin-top: 16px;
	
	    display: flex;
	    -webkit-box-align: flex-end;
	    -webkit-align-items: flex-end;
	    -moz-box-align: flex-end;
	    -moz-align-items: flex-end;
	    -ms-flex-align: flex-end;
	    align-items: flex-end;
	    background-color: #f5f5f5;
	    font-size: 18px;
	    color: #666;
	}
	.ltop .yuanjia{
		font-size: 20px;
		color: #666;
		 word-wrap: break-word;
	}
	.ltop .yuanjia span,.ltop .zdjia span{
		display: inline-block;
		margin-right: 6px;
		height: 45px;
		line-height: 45px;
	}
	.ltop .price{
		padding-left: 10px;
		color:#e6322e;
		font-size: 30px;
		font-weight: 600;
	}
	.ltop .unit{
		color:#e6322e;
		font-size: 20px;
	}
	.ltop .zdjia{
		font-size: 20px;
		margin-left: 20px;
		color: #999;

	}
	.ltop .zdjia .zhidao{
		text-decoration:line-through;
	}
	.ltop .ltop .miaoshu{
		padding: 10px;
		flex: 1;
	}
	.ltop .miaoshu .desc{
		font-size: 16px;
		color: #666;
		padding: 10px 0;
	}
	.ltop .tag {
		padding: 10px 0;
	}
	.ltop .tag span{

		display: inline-block;
		padding: 5px 15px;
		border-radius: 2px;
		font-size: 16px;
		color: #3388ff;
		background-color: #f2f7ff;
	}
	.ltop .lianxi{
		padding-top: 20px;
	}
    .item-page-con{
       
        border:1px solid #f2f2f2;
        margin-bottom: 40px;
    }

    .item-page-con .tapbar{
       
       height:60px; line-height: 60px; background-color: #f5f5f5;
    }
    .item-page-con .tapbar .name{
    	height: 56px; line-height: 56px; border-top: 4px solid #3388ff;padding:0 40px;display: inline-block;font-size: 20px;color:#3388ff
    }
    .item-page-con img{
      max-width: 100%!important;
    }