#slide {
   width: 100%;
}
#slide_list_case{width: 100%;overflow: hidden;position: relative;border-radius: 8px;}
#slide_list {position: absolute;z-index: 1;display:flex;align-items: center;overflow: hidden;object-fit: cover;}
#slide_list .img-case{overflow: hidden;display:flex;align-items: center;overflow: hidden;position: relative;border-radius: 8px;}
#slide_list .img-case>img{width: 100%;height:auto;object-fit: cover;cursor: pointer;border-radius: 8px;}

#buttons {position: absolute;left: 0;right: 0;margin: 0 auto;z-index: 2;display: flex;flex-direction: row;align-items: center;justify-content: center;}
#buttons span {float: left;margin-right: 5px;border-radius: 5px;background: rgba(0, 0, 0, 0.4);cursor: pointer;}
#buttons .on {width: 34px;background: #fff;}

.arrow-box{width: 100%;}
.arrow {position: absolute;top: 50%;z-index: 2;opacity: 0;width: 40px;height: 40px;background-color: RGBA(0, 0, 0, .3);cursor: pointer;border-radius: 50%;display: flex;flex-direction: row;align-items: center;justify-content: center;transform:translateY(-50%);}
.arrow:hover {background-color: RGBA(0, 0, 0, .7);}
#slide:hover .arrow {opacity: 1;}
#prev {left: 20px;padding-left: 6px;}

#next {right: 20px;padding-right: 6px;}
.arrow i{border: solid #fff;border-width: 0 2px 2px 0;display: inline-block; padding: 8px;}
#next i { transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
#prev i{transform: rotate(135deg);-webkit-transform: rotate(135deg);}

@media screen and (min-width:751px){
    #slide_list_case{height: 300px;margin:24px auto;}
    #buttons{bottom:20px;}
    #buttons span{width: 10px;height: 10px;}
}
@media screen and (max-width:750px){
    #slide{padding: 0.2rem;background: #fff;max-width: 750px;margin: 0 auto;}
    #slide_list_case{height: 2.6rem;margin: 0 auto;max-width: 750px;}
    #buttons{bottom:0.2rem;}
    #buttons span{height: 0.14rem;width: 0.14rem;}

    .arrow{width:0.6rem;height:0.6rem;}
    .arrow i{padding: 0.12rem;}
    #slide .arrow {opacity: 1;}
}