@charset "utf-8";
img{
    margin: 0;
    padding: 0;

}
.slider{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.slider img{ 
    width: 100%;
    max-height: 407px;
    
}
.slideshow{
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: all 2500ms;
    animation-name: autoplay;
    animation-duration: 80s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.item-slide{
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
}
.pagination{
	position: absolute;
	bottom: 2px;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
    height: 15px;
}

.pag-item{
    display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #c5931f;
	width: 22px;
	height: 3px;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: rgb(197,147,31);
	margin: 0 10px;
	text-align: center;
	transition: all 300ms;
}
.pag-item:active {border: 1px solid #ffffff;
	background: rgb(250, 250, 250);}
.pag-item:hover{ transform: scale(2);}

input[id="1"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(cal(-100% * 0),0,0);
}
input[id="1"]:checked ~ .pagination .pag-item[for="1"]{
    background: #FFF;
}
input[id="2"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 1),0,0);
}
input[id="2"]:checked ~ .pagination .pag-item[for="2"]{
    background: #FFF;
}
input[id="3"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 2),0,0);
}
input[id="3"]:checked ~ .pagination .pag-item[for="3"]{
    background: #FFF;
}
input[id="4"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 3),0,0);
}
input[id="4"]:checked ~ .pagination .pag-item[for="4"]{
    background: #FFF;
}
input[id="5"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 4),0,0);
}
input[id="5"]:checked ~ .pagination .pag-item[for="5"]{
    background: #FFF;
}
input[id="6"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 5),0,0);
}
input[id="6"]:checked ~ .pagination .pag-item[for="6"]{
    background: #FFF;
}
input[id="7"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 6),0,0);
}
input[id="7"]:checked ~ .pagination .pag-item[for="7"]{
    background: #FFF;
}
input[id="8"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 7),0,0);
}
input[id="8"]:checked ~ .pagination .pag-item[for="8"]{
    background: #FFF;
}
input[id="9"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 8),0,0);
}
input[id="9"]:checked ~ .pagination .pag-item[for="9"]{
    background: #FFF;
}
input[id="10"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 9),0,0);
}
input[id="10"]:checked ~ .pagination .pag-item[for="10"]{
    background: #FFF;
}
input[id="11"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 10),0,0);
}
input[id="11"]:checked ~ .pagination .pag-item[for="11"]{
    background: #FFF;
}
input[id="12"]:checked ~ .slideshow{
    animation: none;
    transform: translate3d(calc(-100% * 11),0,0);
}
input[id="12"]:checked ~ .pagination .pag-item[for="12"]{
    background: #FFF;
}
input[id="13"]:checked ~ .slideshow{
    animation:none;
    transform: translate3d(calc(-100% * 12),0,0);
}
input[id="13"]:checked ~ .pagination .pag-item[for="13"]{
    background: #FFF;
}
input[id="14"]:checked ~ .slideshow{
    animation:none;
    transform: translate3d(calc(-100% * 13),0,0);
}
input[id="14"]:checked ~ .pagination .pag-item[for="14"]{
    background: #FFF;
}
input[id="15"]:checked ~ .slideshow{
    animation:none;
    transform: translate3d(calc(-100% * 14),0,0);
}
input[id="15"]:checked ~ .pagination .pag-item[for="15"]{
    background: #FFF;
}
input[id="16"]:checked ~ .slideshow{
    animation:none;
    transform: translate3d(calc(-100% * 15),0,0);
}
input[id="16"]:checked ~ .pagination .pag-item[for="16"]{
    background: #FFF;
}



@keyframes autoplay{
    6.25%{ transform: translate3d(calc(-100% * 0), 0, 0); }
    12.50%{ transform: translate3d(calc(-100% * 1), 0, 0); }
    18.75%{ transform: translate3d(calc(-100% * 2), 0, 0); }
    25.00%{ transform: translate3d(calc(-100% * 3), 0, 0); }
    31.25%{ transform: translate3d(calc(-100% * 4), 0, 0); }
    37.50%{ transform: translate3d(calc(-100% * 5), 0, 0); }
    43.75%{ transform: translate3d(calc(-100% * 6), 0, 0); }
    50.00%{ transform: translate3d(calc(-100% * 7), 0, 0); }
    56.25%{ transform: translate3d(calc(-100% * 8), 0, 0); }
    62.50%{ transform: translate3d(calc(-100% * 9), 0, 0); }
    68.75%{ transform: translate3d(calc(-100% * 10), 0, 0); }
    75.00%{ transform: translate3d(calc(-100% * 11), 0, 0); }
    81.25%{ transform: translate3d(calc(-100% * 12), 0, 0); }
    87.50%{ transform: translate3d(calc(-100% * 13), 0, 0); }
    93.75%{transform: translate3d(calc(-100% * 14), 0, 0); }
    100%  {transform: translate3d(calc(-100% * 15), 0, 0); }
}