.product .l {
    position: relative;
    width: 32%;
    background-color: #F2F2F2;

}

.product .r {
    width: 68%;
    background-color: #fff;
}

.product .l h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #018E9F;
    color: #fff;
    height: 160px;
}

.product .l .all {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    padding: .25rem 0;
    box-sizing: border-box;
    font-weight: 700;
    color: #fff !important;
    background: #018E9F;
    text-align: center;
    width: 100%;
}

.product .r h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    color: #018E9F;
    border-bottom: 1px solid #B6B6B6;
    box-sizing: border-box;
}

.list_box {
    padding: .625rem ;
    box-sizing: border-box;
}

.list_box ul li {
    margin: 0 0 .375rem 0;
    width: 30%;
}

.list_box ul li a {
    display: block;
    font-weight: 600;
}

.list_box ul li a img {
    display: block;
    width: 100%;
}


.list_box ul {
    flex-wrap: wrap;
}

.list_box ul li a .p_box {
    border-radius: 4px 4px 4px 4px;
    border: 2px solid rgba(82, 82, 82, 0.2);
}

.list_box ul li a p {
    margin: .3125rem 0 0 0 !important;
    text-align: center;
     font-weight: lighter;
}

.list_box ul li a:hover .p_box {
    box-shadow: 0 0 10px 2px #018E9F;
    transition: all 0.6s;
}

.list_box ul li a:hover p {
    color: #018E9F;
    transition: all 0.6s;
}

.product .l ul {
    padding: .625rem .25rem 150px .25rem !important;
    box-sizing: border-box;
}

.product .l ul li p {
    display: flex;
    align-items: center;
}

.product .l ul li p::before {
    content: " ";
    display: block;
    margin: 0 .25rem 0 0;
    width: 5px;
    height: 30px;
    background: #018E9F;
}

.product .l ul li a {
    display: block;
    padding: .25rem .375rem;
    box-sizing: border-box;
}

.product .l ul li a:hover {
    background: #018E9F;
    border-radius: 4px 4px 4px 4px;
    transition: all 0.6s;
}

.product .l ul li a:hover p::before {
    background-color: #fff;
}

.product .l ul li a:hover p {
    color: #fff;
}

.product .l ul .li_act a {
    background: #018E9F;
    border-radius: 4px 4px 4px 4px;
    transition: all 0.6s;
}

.product .l ul .li_act a p::before {
    background-color: #fff;
}

.product .l ul .li_act a p {
    color: #fff;
}

.yd_l {
    display: none;
}

/* 新增 */

.product .l h4 {
    font-size: .45rem;
}

.product .r h4 {
    font-size: .3rem;
}

.product .l {
    background-color: #f9f9f9;
}

.product .l h4,
.product .r h4 {
    height: 1.25rem;
}

.product_box {
    background-color: #F2F2F2;
}

.product .l .all {
    font-size: .3rem;
}



@media screen and (max-width: 1680px) {}

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 980px) {

    .product .r h4 {
        display: none;
    }

    .product .l {
        display: none;
    }

    .product .r {
        width: 100%;
    }

    .list_box ul li {
        width: 100%;
    }

    .list_box ul li a .p_box {
        border: none;
    }

    .list_box ul li a {
        display: flex;
        align-items: center;
        border: 2px solid rgba(82, 82, 82, 0.2);
        border-radius: 4px;
    }

    .list_box ul li a .p_box {
        width: 40%;
    }

    .list_box ul li a p {
        width: 60%;
    }

    .list_box {
        padding: 20px 10px;
        box-sizing: border-box;
    }

    .skip_page dt a {
        white-space: nowrap;
    }

    .yd_l {
        display: block;
    }

    .polistat {
        position: relative;
      }
      
      .polistat>a {
        display: block;
        padding: .125rem .625rem;
        color: #fff !important;
        background: #018E9F;
        border-radius: 4px 4px 4px 4px;
        box-sizing: border-box;
        width: 100%;
      }
      
      .polistat>a i {
        margin: 0 0 0 .1875rem;
      }
      
      .polistat_litem {
        position: absolute;
        left: 0;
        top: 100%;
        background-color: #fff;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
        display: none;
        z-index: 998;
      }
      
      .polistat_litem,
      .polistat_litem li {
        width: 100%;
      }
      
      .polistat_litem a {
        display: block;
        padding: .125rem 0;
        box-sizing: border-box;
        text-align: center;
        width: 100%;
      }
      
      .polistat_litem a:hover {
        color: #fff !important;
        background: #018E9F;
        transition: all 0.6s;
      }

      .yd_l {
        width: 100%;
      }

      .product  {
        flex-wrap: wrap;
      }

      .polistat>a {
        text-align: center;
      }
      
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 640px) {}

@media screen and (max-width: 375px) {}