@charset 'UTF-8';

/* Slider */
.slick-loading .slick-list{/* background: #fff url('./ajax-loader.gif') center center no-repeat; */}

/* Arrows */
.slick-prev,
.slick-next{font-size: 0; line-height: 0; position: absolute;  display: block;  padding: 0;  cursor: pointer; color: transparent; border: none; outline: none;  background-size: 100% auto;  background-position: center; background-repeat: no-repeat; z-index: 10;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus{ }

@media all and (max-width:1024px) {
	.slick-prev,
	.slick-next { top: unset; bottom:8%} 
}
@media all and (max-width:976px) {
	.slick-prev,
	.slick-next {  bottom:3%} 
}
@media all and (max-width:860px) {
  .slick-prev,
  .slick-next { width: 55px; height: 55px; }
  .slick-prev { right: 59px;}	
}
@media all and (max-width:767px) {	
}
@media all and (max-width:750px) {	
}
@media all and (max-width:580px) {	
}
@media all and (max-width:480px) {
  .slick-prev,
  .slick-next { width: 45px; height: 45px;   }
  .slick-prev { right: 49px; }
}

.slick-prev,
.slick-next { top:50%; width: 80px; height: 80px;  background-color:#e12020; border-radius:80px }
.slick-prev { left:-40px; background-image: url("/images/main/haccpWrap-arrow-prev.png");}
.slick-next { right: -40px; background-image: url("/images/main/haccpWrap-arrow-next.png");  }

.menuWrap .slick-prev,
.menuWrap .slick-next { top:40%; }
.menuWrap .slick-prev { left:-30px; }
.menuWrap .slick-next { right: -30px; }


.main7Wrap .slick-prev,
.main7Wrap .slick-next { top:90%; width: 80px; height: 24px; background-color:transparent; background-position:center; border-radius:0 }
.main7Wrap .slick-prev { left:calc(50% - 160px); background-image: url("/images/main/main7-arrow-prev.png"); }
.main7Wrap .slick-prev:before { content:''; width:1px; height:100%; background:#DDD; position:absolute; right:0; top:0}
.main7Wrap .slick-next { right: 50%; background-image: url("/images/main/main7-arrow-next.png");  }

@media all and (max-width:1530px) {
	.main7Wrap .slick-prev { left:calc(40% - 160px);}
	.main7Wrap .slick-next { right: 60%; }
}
@media all and (max-width:1280px) {
	.main7Wrap .slick-prev,
	.main7Wrap .slick-next { top:98%; }
	.main7Wrap .slick-prev { left:calc(20% - 160px);}
	.main7Wrap .slick-next { right: 80%; }
}
@media all and (max-width:1024px) {
	.main7Wrap .slick-prev,
	.main7Wrap .slick-next { top:104%; }
	.main7Wrap .slick-prev { left:calc(50% - 80px);}
	.main7Wrap .slick-next { right: calc(50% - 80px); }
}
@media all and (max-width:978px) {
	.slick-prev,
	.slick-next { width: 60px; height: 60px;}
	.slick-prev { left:-30px; }
	.slick-next { right: -30px; }

	.menuWrap .slick-prev { left:-20px; }
	.menuWrap .slick-next { right: -20px; }
}

@media all and (max-width:480px) {
	.slick-prev,
	.slick-next { width: 50px; height: 50px;}
	.slick-prev { left:-25px; }
	.slick-next { right: -25px; }

	.menuWrap .slick-prev { left:-15px; }
	.menuWrap .slick-next { right: -15px; }
}





/* Dots */
.slick-dotted.slick-slider { margin-bottom:0px; }
.slick-dots { position: absolute; bottom: 20px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block;  width:10px; height:10px; margin:0 2px; padding: 0; cursor: pointer; border-radius:20px;
                   box-sizing:border-box;  border:1px solid #FFF}
.slick-dots li button { font-size:0; }
.slick-dots li.slick-active { background: #fff;}


/**/

.dot_wh .slick-dots li{width:12px; height:12px; border-radius:100%; border:2px solid rgba(255,255,255,0.5); margin:0 4px;}
.dot_wh .slick-dots li.slick-active{background:#FFF}
.dot_wh .slick-dots li:hover{border:2px solid rgba(255,255,255,1);}

.dot_or .slick-dots li{width:10px; height:10px; border-radius:100%; border:1px solid rgba(255, 114, 20, 0.5); margin:0 4px;}
.dot_or .slick-dots li.slick-active{background:#FF7214}
.dot_or .slick-dots li:hover{border:1px solid #FF7214;}

@media all and (max-width:850px) {
	.dot_wh .slick-dots li{width:8px; height:8px; margin:0 3px;}
	.dot_or .slick-dots li{width:8px; height:8px; margin:0 3px;}
}