﻿
.archiveSlider {max-width:100%; margin:0 auto;}
.archiveSlider-inner {position:relative; background:#f5f5f5; border-radius:2rem; overflow:hidden; box-shadow:0 0 15px rgba(0,0,0,0.15); margin-bottom:1rem;}
.archiveSlider-track .item img {max-width:100%;max-height:100%;}
.archiveSlider-caption {background:rgba(0,0,0,0.6); color:#fff; text-align:center; padding:0.75rem 1rem;font-size:0.9rem;}
.archiveSlider-control {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;}
.archiveSlider-control input {max-width:3.5rem; height:2.5rem; text-align:center; font-weight:700; }
.archiveSlider-control span {font-size:1rem;font-weight:400; color:#888;}
.archiveSlider-control select {height:2.5rem; min-width:10rem; padding:0 0.5rem;}
.archiveSlider-control button {height:2.5rem; background:#f5f5f5; padding:0 1rem;}
.archiveSlider-control button.active {background:#008CEB; color:#fff;}
.archiveSlider .slick-prev,
.archiveSlider .slick-next {position:absolute;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;border-radius:50%;background:#000;opacity:0.6;z-index:10;cursor:pointer;border:none;font-size:0;display:flex;align-items:center;justify-content:center;}
.archiveSlider .slick-prev:hover,
.archiveSlider .slick-next:hover {opacity:1;}
.archiveSlider .slick-prev, 
.archiveSlider .slick-next {z-index:10;}
.archiveSlider .slick-prev {left:1.5rem;}
.archiveSlider .slick-next {right:1.5rem;}
.archiveSlider .slick-prev:before,
.archiveSlider .slick-next:before {font-family:'remixicon'; font-size:1.2rem; color:#fff;}
.archiveSlider .slick-prev:before {content:"\EA64";} 
.archiveSlider .slick-next:before {content:"\EA6E";} 




/* media query mobile */
@media (max-width: 1440px) {
}



@media (max-width: 1240px) {
}



@media (max-width: 1024px) {
}



@media (max-width: 768px) {
}



@media (max-width: 580px) {
}



@media (max-width: 480px) {
	.archiveSlider-control {flex-wrap:wrap;}
	.archiveSlider-control select {width:100%;	order:1;}
	.archiveSlider-control .btn_play,
	.archiveSlider-control .btn_pause {order:2;	flex:1;}
	.archiveSlider-control input,
	.archiveSlider-control span {order:3;}
	.archiveSlider-control input {margin-left:0;}
	.archiveSlider-control span:first-of-type {	margin:0 0.25rem;}
	.archiveSlider-control input,
	.archiveSlider-control span,
	.archiveSlider-control span + span {display:inline-block;}
	.archiveSlider-control input {flex:none;}
	.archiveSlider-control {justify-content:center;}
	
}



@media (max-width: 380px) {
	.archiveSlider-control button {padding: 0 0.25rem;}
}