.wrap {
  margin-top: 20px;
  padding: 0 160px;
}
.cXonbn {
    margin-left: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    transition: all 0.3s ease-out 0s;
    background-color: #29abe2;
    border-radius: 5px;
    padding:3px;
    margin-right: 5px;
}
.gXonbn {
    margin-left: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    transition: all 0.3s ease-out 0s;
    background-color: #ff3939;
    border-radius: 5px;
    padding: 2px 5px;
    margin-right: 5px;
}
.slider{
  display: flex;
  flex-flow: row wrap;
  overflow: auto hidden;
  width: 2859px;
}
.fixedClass{
  position: relative;
}
.products_point {
  width: 100%;
  height: 112px;
  position: relative;
  /* overflow-x: scroll; */
  overflow: hidden;
}
.prev {
    position: absolute;
    display: none;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    color: #f1f1f1;
    border:solid 2px #9e9e9e;
    opacity: .4;
    width: 35px;
    height: 35px;
    font-size: 26px;
    top: 40%;
    left: 0px;
    z-index: 1;
}

.next {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    color: #f1f1f1;
    border:solid 2px #9e9e9e;
    opacity: .4;
    /* padding: 5px 0 5px 5px; */
    width: 35px;
    height: 35px;
    font-size: 26px;
    top: 40%;
    right: 0px;
    z-index: 1;
}

.prevImageStyle {
  width: 20px;
  position: absolute;
  height: 20px;
  transform: translate(-50%, -50%) rotate(0.5turn);
  left: 50%;
  top: 50%;
}

.nextImageStyle {
  width: 20px;
  position: absolute;
  height: 20px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.prev:hover {
    opacity: 0.9;
}
.next:hover {
    opacity: 0.9;
}

.slider_box {
    text-decoration: none;
    height: 44px;
    padding: 10px 16px;
    text-align: center;
    font-size: 16px;
    /* line-height: 24px; */
    font-weight: 500;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 5px;
    margin: 6px 12px 6px 0px;
    transition: all 0.3s ease-out 0s;
    background-color: rgb(244, 245, 247);
    color: rgb(89, 89, 89);
}
.slider_box:hover {
    /* background-color: rgb(0, 108, 255); */
    background-color: #4d4d4d;
    color: rgb(254, 254, 254);
    transition: all 0.3s ease-out 0s;
}
.slider_box:hover .cXonbn{
  background-color: rgb(0, 108, 255);
  background-color: #fff;
  color: #29abe2;
  transition: all 0.3s ease-out 0s;
}
.slider_box:hover .gXonbn{
  background-color: rgb(0, 108, 255);
  background-color: #fff;
  color: #ff3939;
  transition: all 0.3s ease-out 0s;
}

/*모바일 노트북*/
@media (max-width: 1600px) {
  .slider_box {
      font-size: 14px;
      line-height: 20px;
      height: 36px;
      padding: 8px 12px;
  }
  .prev {
    top:30%;
  }
  .next {
    top:30%;
  }
}

/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
##Device = 랩탑, 데스크탑
##Screen = 1025px에서 1280px 사이
*/

@media (max-width: 1280px) {

}

/*
##Device = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/

@media (max-width: 1024px) {
  .products_point {
      overflow-x: scroll;
      overflow-y: hidden;
  }
  .products_point::-webkit-scrollbar {display: none;}
  .slider {
    width: 2280px;
  }
}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/

@media (max-width: 1024px) and (orientation: landscape) {
  .products_point {
      overflow-x: scroll;
      overflow-y: hidden;
  }
  .products_point::-webkit-scrollbar {display: none;}
  .slider {
    width: 2280px;
  }
}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/

@media (max-width: 767px) {
  .products_point {
      overflow-x: scroll;
      overflow-y: hidden;
  }
  .products_point::-webkit-scrollbar {display: none;}
}


/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
##Device = 대부분의 스마트폰 모바일 기기(세로)
##Screen = 320px에서 479px 사이
*/
@media (max-width: 479px) {
  .products_point {
      overflow-x: scroll;
      overflow-y: hidden;
      height: auto;
  }
  .slider {
    width: 2540px;
  }
  .slider_box {
    padding: 8px 12px;
    font-size: 14px;
  }
  .products_point::-webkit-scrollbar {display: none;}
}