/* 두스타일 슬라이더 (예전 Revolution Slider 4.6.5 화면을 CSS 로 다시 만든 것)
 * - 화면 너비 구간별 크기는 slider-data.php 의 sizes 로 만든 인라인 CSS 가 정한다(예전 responsitive 방식).
 * - 화살표 모양은 테마 스프라이트(files/images/sprites.png)를 그대로 쓴다.
 *   좁은 화면에서 숨기기·레티나 이미지는 mqueries.css·retina.css 에 있다.
 */

.doo-slider {
	position: relative;
	width: 1200px;
	height: 440px;
	margin: 0 auto;
	overflow: hidden;
	background-color: var(--doo-bg, #e9e9e9);
}

.doo-slider__slides {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doo-slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	visibility: hidden;
	opacity: 0;
	z-index: 0;
	background-color: var(--doo-slide-bg, transparent);
}

.doo-slider__slide.is-active {
	visibility: visible;
	opacity: 1;
	z-index: 2;
}

.doo-slider__slide.is-leaving {
	visibility: visible;
	opacity: 1;
	z-index: 1;
}

/* 예전 bgfit cover, bgposition center top */
.doo-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

/* 장 전환: fade */
.doo-slider__slide--fade.is-active.is-entering {
	animation: doo-slider-fade-in var(--doo-speed, 300ms) linear both;
}

/* 첫 장 등장: slidehorizontal(오른쪽에서 들어옴). 첫 화면 그릴 때 한 번(JS 가 첫 전환 때 is-started 를 붙이면 끝) */
.doo-slider--first-slide-horizontal:not(.is-started) .doo-slider__slide:first-child {
	animation: doo-slider-slide-in var(--doo-first-speed, 300ms) ease-out both;
}

@keyframes doo-slider-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes doo-slider-slide-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

/* 좌우 화살표: 예전 .tp-leftarrow.default / .tp-rightarrow.default (테마 스프라이트, 흰 테두리)
 * 평소에는 숨기고, 슬라이더에 마우스를 올리거나 키보드로 들어오거나 손가락으로 만지면 보인다(예전 hidearrows). */
.doo-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 100;
	width: 40px;
	height: 40px;
	box-sizing: content-box;
	margin: -20px 0 0;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 0;
	background: url(../images/sprites.png) no-repeat;
	box-shadow: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease-out 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.doo-slider__arrow--prev {
	left: 20px;
	background-position: -70px -10px;
}

.doo-slider__arrow--next {
	right: 20px;
	background-position: -10px -10px;
}

.doo-slider__arrow--prev:hover {
	background-position: -190px -10px;
	border-color: #000;
}

.doo-slider__arrow--next:hover {
	background-position: -130px -10px;
	border-color: #000;
}

.doo-slider:hover .doo-slider__arrow,
.doo-slider:focus-within .doo-slider__arrow,
.doo-slider.is-touched .doo-slider__arrow {
	opacity: 1;
	transition-delay: 0s;
}

.doo-slider__arrow:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* 움직임 줄이기: 첫 장 그대로, 자동 넘김 없음(JS), 전환 움직임 없음 */
@media (prefers-reduced-motion: reduce) {
	.doo-slider__slide.is-active,
	.doo-slider__slide.is-entering,
	.doo-slider__slide.is-leaving,
	.doo-slider--first-slide-horizontal:not(.is-started) .doo-slider__slide:first-child {
		animation: none;
	}

	.doo-slider__arrow {
		transition: none;
	}
}