﻿.carousel-gallery-item__image img {
	--transition-duration: 1s;
	--transition-easing: cubic-bezier(0.25,0.74,0.22,0.99);
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing)
}

.progress-button {
	--progress: 0;
	--progress-reverse: calc(1 - var(--progress));
	--progress-reversed: 1;
	position: relative
}

.progress-button__outline {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	--transition-duration: 0.5s;
	--transition-easing: cubic-bezier(0.25,0.74,0.22,0.99);
	transition-property: opacity;
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing)
}

.progress-button__outline rect {
	fill: none;
	stroke: rgba(var(--t-text-rgb),.15);
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	rx: 50%
}

.progress-button__outline rect+rect {
	stroke: var(--t-primary);
	stroke-dasharray: 1;
	stroke-dashoffset: var(--progress-reverse)
}

.progress-button .btn {
	--button-background-size: 0px
}

.has-hover .btn-container:hover .progress-button .progress-button__outline,.has-hover .progress-button:hover .progress-button__outline {
	opacity: 0
}

.progress-button--secondary .progress-button__outline rect+rect {
	stroke: var(--t-text)
}

.progress-button--animated .progress-button__outline rect+rect {
	--transition-duration: 0.75s;
	--transition-easing: cubic-bezier(0.25,0.74,0.22,0.99);
	transition-property: stroke-dashoffset;
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing)
}

.progress-button--gallery .progress-button__outline rect {
	transform: rotate(180deg);
	transform-origin: 50% 50%
}

.progress-button--gallery .progress-button__outline rect+rect {
	stroke: var(--t-text);
	stroke-dashoffset: var(--progress-reversed);
	--transition-duration: 1.333s;
	--transition-easing: cubic-bezier(0.6,0,0.1,1);
	transition-property: stroke-dashoffset;
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing)
}

.gallery {
	height: var(--viewport-height)
}

.carousel-gallery {
	position: relative
}

.carousel-gallery__list__inner {
	overflow: hidden;
	height: var(--viewport-height);
	align-items: center
}

.carousel-gallery__list__item {
	overflow: visible
}

.carousel-gallery__nav {
	position: static
}

.carousel-gallery__nav__next,.carousel-gallery__nav__prev {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 0 0 var(--spacing)
}

.carousel-gallery__nav__next {
	left: auto;
	right: 0;
	padding: 0 var(--spacing) 0 0
}

.carousel-gallery__counter {
	position: absolute;
	z-index: 1;
	top: calc(50vh + 100vw / 1440 * 480 / 2 + var(--spacing) / 60 * 100);
	left: 50%;
	width: 200px;
	margin-left: -100px;
	text-align: center;
    font-family: 'Pretendard';
}

.carousel-gallery__titles {
	position: absolute;
	top: calc(50vh + 100vw / 360 * 302 / 2 - 60px);
	width: 100%;
	text-align: center;
	pointer-events: none
}

.carousel-gallery__titles__subtitle,.carousel-gallery__titles__title {
	color: var(--t-text)
}

.carousel-gallery__titles__subtitle {
	margin-top: 24px
}

.carousel-gallery__titles__layout {
	padding-top: calc(var(--scale-px) * 10);
	padding-bottom: calc(var(--scale-px) * 10)
}

@media (min-width:568px) and (max-aspect-ratio:13/9),(min-width:668px) and (min-height:416px),(min-width:980px) {
	.carousel-gallery__titles {
		top: auto;
		bottom: calc(50vh - 100vw / 1440 * 480 / 2 - calc(var(--scale-px) * 66.5))
	}

	.carousel-gallery__titles__layout {
		display: flex;
		flex-direction: column-reverse
	}

	.carousel-gallery__titles__title {
		white-space: nowrap;  
	}

	.carousel-gallery__titles__subtitle {
		margin-top: 0;
		margin-bottom: calc(var(--scale-px) * 37)
	}
}


@media (max-width: 1500px) {
	.carousel-gallery__titles__title {
		font-size: 38px;
       
	}
}


.carousel-gallery-item {
	display: block;
	margin: 0 auto;
	position: relative;
	overflow: visible;
	width: var(--md,26.38889vw) var(--n-md,100%);
	width: 35%;
}

.carousel-gallery-item__image {
	position: relative;
	overflow: hidden;
	overflow: clip;
	z-index: 1
}

.carousel-gallery-item__image img {
	transition-property: transform
}

.carousel-gallery-item__image--side-1,.carousel-gallery-item__image--side-2 {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	opacity: .3;
	height: auto
}

.carousel-gallery-item__image--side-1 img,.carousel-gallery-item__image--side-2 img {
	width: auto;
	height: 13.88889vw
}

.carousel-gallery-item__button {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%)
}

.carousel-gallery__list__item--hovered .carousel-gallery-item__image img {
	transform: scale(1.1)
}

picture.carousel-gallery-item__image--side-1,picture.carousel-gallery-item__image--side-2 {
	height: auto;
	overflow: visible
}

.carousel__list__item:nth-child(odd) .carousel-gallery-item__image--side-1 {
	left: calc(var(--scale-px) * -80);
	bottom: calc(var(--scale-px) * 70)
}

.has-hover .carousel__list__item:nth-child(odd) .carousel-gallery-item:hover .carousel-gallery-item__image--side-1 img {
	transform: translateX(calc(var(--scale-px) * -40))
}

.carousel__list__item:nth-child(odd) .carousel-gallery-item__image--side-2 {
	right: calc(var(--scale-px) * -40);
	top: calc(var(--scale-px) * -40)
}

.has-hover .carousel__list__item:nth-child(odd) .carousel-gallery-item:hover .carousel-gallery-item__image--side-2 img {
	transform: translateX(calc(var(--scale-px) * 40))
}

.carousel__list__item:nth-child(2n+2) .carousel-gallery-item__image--side-1 {
	left: calc(var(--scale-px) * -40);
	top: calc(var(--scale-px) * -40)
}

.has-hover .carousel__list__item:nth-child(2n+2) .carousel-gallery-item:hover .carousel-gallery-item__image--side-1 img {
	transform: translateX(calc(var(--scale-px) * -40))
}

.carousel__list__item:nth-child(2n+2) .carousel-gallery-item__image--side-2 {
	right: calc(var(--scale-px) * -80);
	bottom: calc(var(--scale-px) * 70)
}

.has-hover .carousel__list__item:nth-child(2n+2) .carousel-gallery-item:hover .carousel-gallery-item__image--side-2 img {
	transform: translateX(calc(var(--scale-px) * 40))
}

.gallery-inner__list {
	position: relative
}

.gallery-inner__list__inner {
	display: block;
	list-style: none
}

.gallery-inner__list__item+.gallery-inner__list__item {
	margin-top: var(--spacing)
}

@media (max-width:567px) and (max-aspect-ratio:13/9),(max-width:667px) and (min-aspect-ratio:13/9),(max-width:979px) and (max-height:415px) and (min-aspect-ratio:13/9) {
	.gallery-inner__title {
		clip: rect(0 0 0 0);
		-webkit-clip-path: inset(100%);
		clip-path: inset(100%);
		height: 1px;
		overflow: hidden;
		position: absolute!important;
		white-space: nowrap;
		width: 1px;
		margin-top: -1px
	}
}

@media (min-width:568px) and (max-aspect-ratio:13/9),(min-width:668px) and (min-height:416px),(min-width:980px) {
	.gallery-inner {
		height: var(--viewport-height);
		overflow: hidden;
		overflow: clip
	}

	.gallery-inner__title {
		position: absolute;
		z-index: 2;
		left: 50%;
		top: calc((var(--viewport-height) - var(--scale-px) * 100) * .5);
		transform: translate(-50%,-50%);
		pointer-events: none;
		transition-property: opacity;
		transition-delay: var(--transition-delay);
		transition-duration: var(--transition-duration);
		transition-timing-function: var(--transition-easing);
		opacity: 0
	}

	.gallery-inner--nav-hover .gallery-inner__title {
		opacity: 1
	}

	.gallery-inner__list__inner {
		display: flex;
		list-style: none;
		height: calc(var(--viewport-height) - var(--spacing) / 60 * 130)
	}

	.js.has-hover .gallery-inner__list__inner {
		cursor: none
	}

	.gallery-inner__list__item {
		height: 100%;
		max-height: none;
		display: flex;
		align-items: stretch;
		justify-content: center
	}

	.gallery-inner__list__item img,.gallery-inner__list__item picture {
		height: 100%;
		width: auto
	}

	.gallery-inner__list__item+.gallery-inner__list__item {
		margin-top: 0
	}

	.gallery-inner__list:after,.gallery-inner__list:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		background: linear-gradient(180deg,transparent,rgba(0,0,0,.3));
		transition-property: opacity;
		transition-delay: var(--transition-delay);
		transition-duration: var(--transition-duration);
		transition-timing-function: var(--transition-easing)
	}

	.gallery-inner__list:after {
		background: linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.9));
		opacity: 0
	}

	.gallery-inner__list__button {
		position: absolute;
		z-index: 1;
		left: var(--spacing);
		bottom: var(--spacing-sm);
		transition-property: opacity;
		transition-delay: var(--transition-delay);
		transition-duration: var(--transition-duration);
		transition-timing-function: var(--transition-easing)
	}

	.gallery-inner--description-hover .gallery-inner__list:before,.gallery-inner--description-hover .gallery-inner__list__button,.gallery-inner--nav-hover .gallery-inner__list:before,.gallery-inner--nav-hover .gallery-inner__list__button {
		opacity: 0
	}

	.gallery-inner--description-hover .gallery-inner__list:after,.gallery-inner--nav-hover .gallery-inner__list:after {
		opacity: 1
	}

	.gallery-inner__description {
		position: absolute;
		z-index: 1;
		left: var(--spacing);
		right: var(--spacing);
		bottom: var(--spacing);
		max-width: calc(var(--scale-px) * 540);
		pointer-events: none
	}
}

.gallery-inner-nav {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	width: 100%;
	--progress: 0;
	cursor: -webkit-grab;
	cursor: grab;
	--transition-duration: 1s;
	--transition-easing: cubic-bezier(0.25,0.74,0.22,0.99);
	transition-property: transform,opacity;
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing);
	transform: translateY(calc(100% - var(--spacing) * 2));
	opacity: .4
}

.has-hover .gallery-inner-nav:hover,.no-hover .gallery-inner--nav-hover .gallery-inner-nav {
	transform: translateY(0);
	opacity: 1
}

.gallery-inner-nav[data-scrollable-move] {
	cursor: -webkit-grabbing;
	cursor: grabbing
}

.gallery-inner-nav[data-scrollable-move] .gallery-inner-nav__list {
	pointer-events: none
}

.gallery-inner-nav__list {
	justify-content: center;
	padding-top: calc(var(--spacing) / 2);
	padding-bottom: var(--spacing-sm)
}

.gallery-inner-nav__list:before {
	display: none
}

.is-scrollable .gallery-inner-nav__list {
	justify-content: flex-start
}

.gallery-inner-nav__item {
	cursor: pointer;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
	width: auto
}

.gallery-inner-nav__item picture {
	display: block;
	overflow: hidden;
	overflow: clip;
	background-color: var(--c-black)
}

.gallery-inner-nav__item img {
	display: block;
	height: calc(var(--spacing) / 60 * 200);
	width: auto
}

.gallery-inner-nav__item img,.gallery-inner-nav__item picture {
	transition-property: transform opacity;
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing);
	will-change: transform,opacity
}

.gallery-inner-nav__item.is-active picture {
	transform: translateY(calc(var(--spacing-sm) / 2))
}

.gallery-inner-nav__item.is-active img {
	transform: translateY(calc(var(--spacing-sm) / -4));
	opacity: .6
}

.gallery-inner-nav__item+.gallery-inner-nav__item {
	margin-left: calc(var(--scale-px) * 28)
}

.gallery-inner-nav__progress {
	position: absolute;
	pointer-events: none;
	left: 0;
	bottom: 0;
	height: calc(var(--scale-px) * 5);
	background: var(--t-primary);
	width: 100%;
	transform: scaleX(var(--progress));
	transform-origin: 0 0
}

.gallery-inner-cursor {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	transform: translate(-50%,-50%);
	pointer-events: none;
	transition-property: opacity;
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing);
	opacity: 0
}

.with-cursor-left .gallery-inner-cursor,.with-cursor-right .gallery-inner-cursor {
	opacity: 1
}

.gallery-inner-cursor .icon:not(:first-child),.gallery-inner-cursor .icon:not(:last-child) {
	margin-left: 0;
	margin-right: 0
}

.gallery-inner-cursor .icon-nav-next,.with-cursor-left .gallery-inner-cursor .icon-nav-prev {
	display: none
}

.with-cursor-left .gallery-inner-cursor .icon-nav-next {
	display: block
}