@import url('clenq.css');

.inner{min-width:1300px}
.width{ width: 1300px;margin:0 auto}
.p_menu{background:#F6F6F6;border-radius:8px;margin-top:-35px;height:90px;margin-bottom:50px;display: none;}
.p_menu ul{display:flex;}
.p_menu li{margin:0 50px;line-height:90px;font-size:16px}
.p_menu li.active{
    /* background:url(../images/dot.png) no-repeat left center;
    padding-left:25px; */
    font-weight:bold;}
.p_menu li:hover a{color:var(--clenq-base)}
.p_menu.fixed{position:fixed;top:35px;border-radius:0;left:0;right:0;z-index:9999999;width:100%}
.product {display:flex;justify-content:space-between}

@media only screen and (max-width:750px){
    .p_menu{background:#F6F6F6;border-radius:8px;margin-top:-35px;height:90px;margin-bottom:20px;display: block;width: 100%;min-width: 100%;padding: 0 5px;}
    .p_menu ul{display:flex;width: 100%;}
    .p_menu li{line-height:90px;font-size:16px;margin: 0 6px;}
    .p_menu li.active{
        /* background:url(../images/dot.png) no-repeat left center;
        padding-left:25px; */
        font-weight:bold;}
    .p_menu li:hover a{color:var(--clenq-base)}
    .p_menu.fixed{position:fixed;top:35px;border-radius:0;left:0;right:0;z-index:9999999;width:100%}
    .page{margin:30px 5px;}
    .page a{width:30px;height:30px;line-height:30px;margin-right:5px;margin-bottom:10px}
    .page a:active{width:30px;height:30px;line-height:30px;margin-right:5px;margin-bottom:10px}
    .page span{width:30px;height:30px;line-height:30px;margin-right:5px;margin-bottom:10px}
    .product {display:block;width: 100%; min-width: 100%;}
}

.page{text-align: center;margin:70px 0;}
.page a{width:50px;height:50px;text-align:center;line-height:50px;display: inline-block;background: #EEEEEE;color: #4e4e4e;border-radius:15px;margin-right:15px}
.page span{display: inline-block;width:50px;height:50px;text-align:center;line-height:50px;background:var(--clenq-base);color:#fff;border-radius:2px;margin-right:15px}
.page a:hover,.page span:hover{background:var(--clenq-base);color:#fff;}

/*属性*/
.product .attr_pc{width:270px;}
.product .attr_pc li{margin-bottom:10px}
.product .attr_pc li>a{border-radius: 5px;display:block;height:57px;line-height:57px;font-size:18px;font-weight:bold;background:#F6F6F6 url(../images/down.png) no-repeat 225px center;padding-left:30px;color:#344455}
.product .attr_pc li>a:hover{background-color: var(--clenq-base); color:#fff}
.product .attr_pc li>a.active{background-color: var(--clenq-base);color:#fff}
.product .attr_pc .child{display:none;padding:20px 0}
.product .attr_pc .child a{display:block;background:url(../images/right-1.png) no-repeat 230px center;padding-left:30px;height:40px;line-height:40px;font-size:16px;font-weight:bold}
.product .attr_pc .child a.active,.product .attr_pc .child a:hover{color:var(--clenq-base)}
.product .attr_mobile{display:none}

@media only screen and (max-width:750px){
    .product .attr_pc{display:none}
    .product .attr_mobile{display:block;}
    .product .attr_mobile .row{margin-bottom:10px}
    .product .attr_mobile .row .tit{background:#eee url(../images/up.png) no-repeat 95% center;padding-left:20px;height:50px;line-height:50px;color:#344455;font-weight:bold;}
    .product .attr_mobile .row .tit.down{background:#eee url(../images/down.png) no-repeat 95% center;}
    .product .attr_mobile .con{margin:0 0px;display:none;border:1px #eee solid;border-top:0}
    .product .attr_mobile .child{display:flex;flex-wrap:wrap;padding:15px 15px 5px 15px}
    .product .attr_mobile .child>a{padding:5px 10px;border:1px #344455 solid;border-radius:10px;margin-right:10px;margin-bottom:10px;color:var(--clenq-base)}
    .product .attr_mobile .child>a.active{color:var(--clenq-base);border:1px var(--clenq-base) solid;}
}

/*列表*/
.product .list{width:980px}
.product .tit{display:flex;justify-content:space-between;align-items:center;height:57px;margin-bottom: 30px;}
.product .tit .name{font-size:30px;color:var(--clenq-base);font-weight:bold;}
.product .tit .layui-form{position:relative}
.product .tit .layui-form .icon{background:url(../images/search_active.png);width:23px;height:22px;position:absolute;right:20px;top:15px;cursor:pointer;}
.product .tit .layui-form input{padding:0 50px 0 25px;border-radius:5px 0 0 5px;height:55px;width:300px;}
.product .choose{display:flex;flex-wrap:wrap;margin:20px 0}
.product .choose>div{height:35px;line-height:35px;border-radius:50px;border:1px solid #344455;padding:0 10px;margin:0 10px 10px 0;color:#344455;position:relative}
.product .choose>div span:last-child{position:absolute;right:-8px;top:-8px;width:16px;height:16px;background-size:100% auto;z-index:999;cursor:pointer;}
.product .item{background:#f4f4f4 url(../images/right-1.png) no-repeat 940px center;margin-bottom:15px;border-radius:8px;padding:25px 0 30px 50px;border:1px #f4f4f4 solid}
.product .item:hover{border:1px var(--clenq-base) solid;background:#f4f4f4 url(../images/right-2.png) no-repeat 940px center;}
.product .item a{display:flex;}
.product .item .img{width:160px;height:90px;display:flex;justify-content:center;align-items:center;margin-right:25px}
.product .item .img img{max-width:100%;max-height:100%}
.product .item .info{width:700px;display:flex;justify-content:center;flex-direction:column}
.product .item .name{font-weight:bold;font-size:18px;color:#344455;margin-bottom:10px}
.product .item:hover .name{color:var(--clenq-base)}
.product .item .note{font-size:16px;
    display: -webkit-box; /* 必须指定display属性 */
    overflow: hidden; /* 必须指定overflow属性 */
    text-overflow: ellipsis; /* 显示省略号 */
    line-height: 1.5em; /* 每行的高度 */
    max-height: 3em; /* 最大高度（根据需求调整）*/
    -webkit-line-clamp: 2; /* 最多显示的行数 */
    -webkit-box-orient: vertical; /* 必须指定box-orient属性 */
}

@media only screen and (max-width:750px){
    .product .list{width:auto}
    .product .tit{display:block;height:auto;margin:0 0px}
    .product .tit .name{font-size:24px;text-align:center;padding:20px 0}
    .product .list p{padding:0 20px;line-height:22px}
    .product .tit .layui-form{margin:0 auto 20px}
    .product .tit .layui-form .icon{right:15px;top:9px;}
    .product .tit .layui-form input{height:45px;width:100%;}
    .product .choose{margin:20px}
    .product .choose>div{height:30px;line-height:30px;}
    .product .choose>div span:last-child{right:-8px;top:-8px;}
    .product .item{background:#f4f4f4;border-radius:0;padding:20px;margin:10px 0px;border:0}
    .product .item:hover{border:0;background:#f4f4f4}
    .product .item .img{margin-right:20px}
    .product .item .info{width:calc(100% - 110px);}
    .product .item .name{font-size:16px}
    .product .item:hover .name{color:#344455}
    .product .item .note{font-size:14px;display: -webkit-box; /* 必须指定display属性 */
        overflow: hidden; /* 必须指定overflow属性 */
        text-overflow: ellipsis; /* 显示省略号 */
        line-height: 1.5em; /* 每行的高度 */
        max-height: 3em; /* 最大高度（根据需求调整）*/
        -webkit-line-clamp: 2; /* 最多显示的行数 */
        -webkit-box-orient: vertical; /* 必须指定box-orient属性 */}
}