@charset 'UTF-8';

/*---------------------------------------------------------------------
 slide1
---------------------------------------------------------------------*/
.slider1 {
}

.slider1 .slick-slide img {
cursor: pointer;
    object-fit: cover;
    height: 300px;
}

/* Arrows */
.slider1 .slick-prev,
.slider1 .slick-next {
z-index: 1;
display: block;
position: absolute;
top: 50%;
width: 40px;
height: 40px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
background-color: transparent;
/*
background-color: rgba(255,255,255,0.5);
*/
background-size: 30px auto;
background-repeat: no-repeat;
background-position: center;
border: none;
outline: none;
}
.slider1 .slick-prev {
left: 0;
background-image: url(../img/slick_prev.png);
}
.slider1 .slick-next {
right: 0;
background-image: url(../img/slick_next.png);
}

/* Dots */
.slider1 .slick-dotted.slick-slider {
}
.slider1 .slick-dots {
display: block;
position: absolute;
width: 100%;
top: 5px;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
  counter-reset:number;
}
.slider1 .slick-dots li {
position: relative;
display: inline-block;
margin: 0 3px;
    background-color: inherit;
}
.slider1 .slick-dots li button {
cursor: pointer;
display: block;
width: 20px;
height: 20px;
font-size: 1.4rem;
color: #fff;
background-color: #ccc;
border-radius: 50%;
}
.slider1 .slick-dots li.slick-active button {
background-color: #cba867;
}
.itemSingle01 .slider1 {
padding-top: 40px;
}
.itemSingle01 .slider1 .slick-dots {
top: 0;
}
.itemSingle01 .slider1 .slick-dots li button {
    width: 30px;
    height: 30px;
    font-size: 1.6rem;
}
.itemSingle01 .slider1 .slick-dots li {
margin: 0 7px;
}
@media screen and (max-width: 1320px) {
	.slider1 .slick-slide img {
			height: 23vw;
	}
}
@media screen and (max-width: 999px) {
}
@media screen and (max-width: 767px) {
.itemSingle01 .slider1 {
	    padding-top: 33px;
	}
.slider1 .slick-prev, .slider1 .slick-next {
	    width: 20px;
	    height: 20px;
			background-size: 15px auto;
	}
	.slider1 .slick-slide img {
	    height: 34vw;
	}
}
@media screen and (max-width: 450px) {
}



/*---------------------------------------------------------------------
 slide2
---------------------------------------------------------------------*/
.slider2 {
}

/* Arrows */
.slider2 .slick-prev,
.slider2 .slick-next {
z-index: 1;
cursor: pointer;
display: block;
position: absolute;
top: 100px;
width: 40px;
height: 40px;
padding: 0;
color: transparent;
background-color: rgba(255,255,255,0.5);
background-size: 30px auto;
background-repeat: no-repeat;
background-position: center;
border: none;
outline: none;
}
.slider2 .slick-prev {
left: 0;
background-image: url(../img/slick_prev.png);
}
.slider2 .slick-next {
right: 0;
background-image: url(../img/slick_next.png);
}

/* Dots */
.slider2 .slick-slide img {
    display: block;
    height: 230px;
    object-fit: cover;
    border: 1px solid #ccc;
}
.slider2 .slick-dots {
display: flex;
display: box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
flex-wrap: wrap;
-webkit-flex-wrap:wrap
-ms-flex-wrap: wrap;
margin: 0 -2px;
}
.slider2 .slick-dots li {
width: 25%;
margin-top: 4px;
padding: 0 2px;
}
.slider2 .slick-dots li img {
cursor: pointer;
    object-fit: cover;
    opacity: 0.6;
    height: 55px;
    border: 1px solid #ccc;
}
.slider2 .slick-dots li button {
}
.slider2 .slick-dots li.slick-active button {
}
.slider2 .slick-dots li.slick-active img {
    opacity: 1;
}
@media screen and (max-width: 1273px) {
	.slider2 {
	}
	.slider2 .slick-slide img {
			display: block;
			height: 18vw;
	}
	.slider2 .slick-dots {
	    bottom: -7.4vw;
	}
	.slider2 .slick-dots li img {
	    height: 4vw;
	}
}
@media screen and (max-width: 999px) {
	.slider2 .slick-slide img {
			height: 26vw;
	}
	.slider2 .slick-dots li img {
			height: 6vw;
	}
}
@media screen and (max-width: 767px) {
	.slider2 .slick-slide img {
			height: 27vw;
	}
	.slider2 .slick-dots li img {
	height: 44px;
	}
	.slider2 .slick-prev, .slider2 .slick-next {
			top: 70px;
	}
}
@media screen and (max-width: 500px) {
	.slider2 .slick-slide img {
			height: 65vw;
	}
	.slider2 .slick-prev, .slider2 .slick-next {
			top: 30vw;
	}
	.slider2 .slick-dots li img {
			height: 15vw;
	}
}