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

}

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

.slider2 img{ 
    width: 100%;
    max-height: 407px;
}

.slideshow2{
    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-slide2{
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
}

.pagination2{
	position: absolute;
	bottom: 2px;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
    height: 15px;
}

.pag-item2{
    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-item2:active {border: 1px solid #ffffff;
	background: rgb(250, 250, 250);}

.pag-item2:hover{ transform: scale(2);}

input[id="1"]:checked ~ .slideshow2{
    animation: none;
    transform: translate3d(cal(-100% * 0),0,0);
}
input[id="1"]:checked ~ .pagination2 .pag-item2[for="1"]{
    background: #FFF;
}
input[id="2"]:checked ~ .slideshow2{
    animation: none;
    transform: translate3d(calc(-100% * 1),0,0);
}
input[id="2"]:checked ~ .pagination2 .pag-item2[for="2"]{
    background: #FFF;
}

@keyframes autoplay{
    50%{ transform: translate3d(calc(-100% * 0), 0, 0); }
    50%{ transform: translate3d(calc(-100% * 1), 0, 0); }
}