.carouselDiv{
max-width: 100%;
box-sizing: border-box;
margin: 0px auto;
position: relative;
padding: 0px 40px;
}

.carouselDiv .arrow{
position: absolute;
width: 50px;
top:0px;
display: none;
}


.carouselDiv .arrow:after{
content: '';
display: inline-block;
width: 25px;
height: 25px;
border-style: solid;
border-color: var(--g1-color);
border-width: 0px 5px 5px 0px;
transform: rotate(45deg);
margin-left: 5px;
margin-bottom: 2px;
transition: all 0.5s ease-out 0s;
}

.carouselDiv .arrow.dis{
display: none;
}

.carouselDiv .arrow.dis2{
display: none;
}

.carouselDiv .arrow.prevA{
left: 0px;
transform: rotate(90deg);
}
.carouselDiv .arrow.nextA{
right: 0px;
transform: rotate(-90deg);
}

.carousel{
position: relative;
overflow: hidden;
}
.box_content .carousel ul{
list-style: none;
white-space: nowrap;
z-index: 0;
display: flex;
left: 0px;
position: relative;
padding: 0px;
transition:all 0s ease-out 0s;
overflow: unset;
margin: 0px;
}

.carousel ul.shift{
transition:all 0.5s ease-out 0s;
}

.carousel ul.shift2{
transition:all 3s ease-out 0s;
}

.carousel ul li{
width: 25%;
box-sizing: border-box;
flex: 1 0 auto;
position: relative;
padding: 0px 9px;
}

.productImage .carousel ul li{
width: 27.5%;
}

.carousel ul.onMove a {pointer-events:none;}

@media screen and (max-width:1050px){
.carousel ul li{width: 29%;}
}
@media screen and (max-width:750px){
.carousel ul li{width: 50%;}
}
@media screen and (max-width:650px){
.carousel ul li{width: 100%;}
}