.banner {

	position: relative;

	width: 100%;

}



.slideshow {

	position: relative;

	width: 100%;

	margin-top: 1rem;

}



.slideshow::after {

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(0, 0, 0, 0.4);

	z-index: 1000;

	opacity: 0;

	transition: opacity 0.4s;

}



.slideshow--details::after {

	opacity: 1;

}



.slide {

	width: 100%;

	height: 50vh;

	top: 0;

	left: 0;

	position: absolute;

	overflow-x: hidden;

	pointer-events: none;

	opacity: 0;

}



.slide--current {

	opacity: 1;

	z-index: 999;

	pointer-events: auto;

	position: relative;

}



.slide__wrap {

	width: 100%;

	height: 100%;

	overflow: hidden;

	position: relative;

}



.slide__img {

	width: 100%;

	height: 100%;

	left: 0;

	top: 0;

	background-color: white;

	background-size: cover;

	background-position: 50% 50%;

	position: absolute;

	pointer-events: none;

}







.boxnav {

	position: absolute;

	bottom: 0;

	left: 0;

	display: flex;

	z-index: 1000;

	width: 100%;

	height: 100%;

}

 



.boxnav__item--prev:hover,

.boxnav__item--next:hover {

	color: var(--color-nav-hover);

}



.boxnav__item:focus {

	outline: none;

}



.boxnav__label {

	padding: 0 0.5rem;

	font-size: 1.15rem;

	position: relative;

}



.boxnav__label--total::before {

	content: '';

	position: absolute;

	right: 100%;

	top: 0;

	width: 2px;

	height: 1.45rem;

	background: #666;

	transform: rotate(22.5deg);

}



.details-wrap--open .details--current {

	pointer-events: auto;

}



.details__item {

	overflow: hidden;

}



body {

	padding: 0;

}



.slideshow {

	overflow: hidden;

	margin: 0;

	height: auto;

}



.slide {

	height: 722px;

}





.slide__img {

	background-position: 50% 0%;

}

 

.boxnav__item--prev{

	background: url(../images/bannerL.png) no-repeat center;

	position: absolute;

	top: 50%;

	left: 3vw;

	width: 65px;

	height: 65px;

	border: 0;

	background-size: contain;

	transform: translateY(-50%);

}





.boxnav__item--next{

	background: url(../images/bannerR.png) no-repeat center;

	position: absolute;

	top: 50%;

	right: 3vw;

	width: 65px;

	height: 65px;

	border: 0;

	background-size: contain;

	transform: translateY(-50%);

}





.boxnav__item--label{

	position: absolute;

	bottom: 0;

	right: 0;

	background: #fff;

	padding: 20px 20px 20px;

	color: #666;

	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

	font-size: 18px;

}





.boxnav__item--label span{

	color: #666;

	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

	font-size: 18px;

}



.boxnav__item--label span.boxnav__label--total{

	font-size: 20px;

}