@charset "UTF-8";
/* Slider */
.slick-loading .slick-list {
 background: #fff url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/common/slick-ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
 font-family: 'slick';
 font-weight: normal;
 font-style: normal;
 src: url("./fonts/slick.eot");
 src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/common/slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev, .slick-next {
 font-size: 0;
 line-height: 0;
 position: absolute;
 top: 50%;
 display: block;
 padding: 0;
 -webkit-transform: translate(0, -50%);
 -ms-transform: translate(0, -50%);
 transform: translate(0, -50%);
 cursor: pointer;
 color: transparent;
 border: none;
 outline: none;
 background: transparent;
 z-index: 15;
}
.slick-prev:hover, .slick-prev:focus {
 color: transparent;
 outline: none;
 background: transparent;
}

.slick-next:hover, .slick-next:focus {
 color: transparent;
 outline: none;
 background: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before {
 color: #b2a593;
}

.slick-next:hover:before, .slick-next:focus:before {
  color: #b2a593;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
 opacity: .25;
}

.slick-prev:before, .slick-next:before {
 /* font-family: 'slick'; */
 font-size: 48px;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color:#6c6153;
 background: transparent;
 text-align: center;
 border-radius:50%;
 display: block;
 -moz-transition: 0.3s;
 -ms-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;
}

@media screen and (max-width:896px) {
 .slick-prev:before, .slick-next:before {
 font-size: 24px;
 }
}

.slick-prev {
 left: 0;
}

[dir='rtl'] .slick-prev {
 right: 0;
 left: auto;
}

.slick-prev:before {
  font-family: "Font Awesome 5 Free";
  content: "\f104";
  font-weight: 900;
}

[dir='rtl'] .slick-prev:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
}

.slick-next {
 right: 0;
}

[dir='rtl'] .slick-next {
 right: auto;
 left: -25px;
}

.slick-next:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
}

[dir='rtl'] .slick-next:before {
  font-family: "Font Awesome 5 Free";
  content: "\f104";
  font-weight: 900;
}

/* Dots */
.slick-dotted.slick-slider {
 /* margin-bottom: 15px; */
}

.slick-dots {
 position: absolute;
 bottom: -25px;
 display: block;
 width: 100%;
 padding: 0;
 margin: 0;
 list-style: none;
 text-align: center;
}
.slick-dots li {
 position: relative;
 display: inline-block;
 width: 20px;
 height: 20px;
 margin: 0 5px;
 padding: 0;
 cursor: pointer;
}
.slick-dots li button {
 font-size: 0;
 line-height: 0;
 display: block;
 width: 20px;
 height: 20px;
 padding: 5px;
 cursor: pointer;
 color: transparent;
 border: 0;
 outline: none;
 background: transparent;
}
.slick-dots li button:hover, .slick-dots li button:focus {
 outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
 opacity: 1;
}
.slick-dots li button:before {
 font-family: 'slick';
 font-size: 6px;
 line-height: 20px;
 position: absolute;
 top: 0;
 left: 0;
 width: 20px;
 height: 20px;
 content: '•';
 text-align: center;
 opacity: .25;
 color: black;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
 opacity: .75;
 color: black;
}

/* slider */
.slider {
 margin: 0 auto ;
}
.slider img {
 max-width: 100%;
 height: auto;
 display: block;
 margin: 0 auto;
 overflow: hidden;

}

.thumb-item {
 max-width: 860px;
 /*  max-height: 480px;*/
 margin: 0 auto 5px;
 padding: 0 5px;
}
.thumb-item li {
 max-width: 860px;
 margin: 0 auto 5px;
 padding: 0 5px;
 text-align: center;
 /*  max-height: 480px;*/
}

.thumb-item-nav {
 max-width: 860px;
 margin: 0 auto 15px;
 cursor: pointer;
}
.thumb-item-nav img {
 overflow: hidden;
 max-height: 240px;
}
.thumb-item-nav li {
 margin: 3px;
}
.thumb-item-nav .slick-next {
 right: -25px;
}
.thumb-item-nav .slick-prev {
 left: -25px;
}

/* .slick-prev:before, .slick-next:before {
  color: #e87330;
} */

.thumb-item-nav .slick-next, .thumb-item-nav .slick-prev {
 z-index: 101;
}

@media screen and (max-width: 768px) {
 .thumb-item-nav .slick-next {
  right: -5px;
 }
 .thumb-item-nav .slick-prev {
  left: -5px;
 }
}