@charset "utf-8";

:root {
	--vh: 100vh;
}

html, body {
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	height: var(--vh);
}

p, a, button {
	/* pretendard */
	/* font-family: Pretendard, Sans-Serif; */

	/* noto sans */
	font-family: "Noto Sans", Sans-Serif;
	font-weight:700;
	text-decoration: none;
}

.slideBox {
	width: 100%;
	height: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	display: flex;
}
.slideBox.quickScroll {
	scroll-behavior: unset !important;
}
.pc .slideBox {
	overflow-x: hidden;
}

.slideBox > * {
	position: relative;
	flex: 0 0 100vw;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	scroll-snap-align: center;
}

.slideBox img.pos-left {
	object-position: left center;
}
.slideBox img.pos-right {
	object-position: right center;
}
.slideBox img.pos-top {
	object-position: center top;
}
.slideBox img.pos-bottom {
	object-position: center bottom;
}
.slideBox img.pos-left-top {
	object-position: left top;
}
.slideBox img.pos-left-bottom {
	object-position: left bottom;
}
.slideBox img.pos-right-top {
	object-position: right top;
}
.slideBox img.pos-right-bottom {
	object-position: right bottom;
}
.slideBox div.pos-left {
	background-position: left center;
}
.slideBox div.pos-right {
	background-position: right center;
}
.slideBox div.pos-top {
	background-position: center top;
}
.slideBox div.pos-bottom {
	background-position: center bottom;
}
.slideBox div.pos-left-top {
	background-position: left top;
}
.slideBox div.pos-left-bottom {
	background-position: left bottom;
}
.slideBox div.pos-right-top {
	background-position: right top;
}
.slideBox div.pos-right-bottom {
	background-position: right bottom;
}

.slideBox img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.slideBox > div {
	display: flex;
	text-align: center;
}

.slideBox > div:not(.to-top) {
	align-items: center;
}
.slideBox > .to-top {
	align-items: start;
}
.slideBox > .to-top > div {
	/* to-top 상단 마진 */
	margin-top:40px;
}
.slideBox > .to-bottom > div {
	/* to-bottom 하단 마진 200px */
	margin: auto 0 200px 0;
}

.slideBox .logo {
	position: absolute;

	/* 로고 투명도 */
	opacity: 1;

	/* 모바일 로고 마진 */
	margin:20px;

	/* 모바일 로고 크기 */
	width: 160px;
	height: auto;
}
.slideBox .logo.logo-top {
	top:0;
	left:50%;
	transform: translateX(-50%);
}
.slideBox .logo.logo-left {
	top:50%;
	left:0;
	transform: translateY(-50%);
}
.slideBox .logo.logo-left-top {
	top:0;
	left:0;
}
.slideBox .logo.logo-right {
	top:50%;
	right:0;
	transform: translateY(-50%);
}
.slideBox .logo.logo-right-top {
	top:0;
	right:0;
}
.slideBox .logo.logo-bottom {
	bottom:0;
	left:50%;
	transform: translateX(-50%);
}
.slideBox .logo.logo-left-bottom {
	bottom:0;
	left:0;
}
.slideBox .logo.logo-right-bottom {
	bottom:0;
	right:0;
}

.slideBox .img-toggle > img:first-child {
	display:block;
}
.slideBox .img-toggle > img:last-child {
	display:none;
}


.slideBox > div > div {
	flex: 1;
}

.slideBox .title {
	/* 모바일 글꼴 크기 */
	font-family: "Noto Sans", Sans-Serif;
	font-weight: 800;
	text-decoration: none;
	font-size: 2em;
}

.slideBox .text {
	font-family: "Noto Sans", Sans-Serif;
	font-weight: 700;
	text-decoration: none;
	font-size: 1.4em;

	/* text 간 간격 */
	/* margin: 20px 0; */
}

.buttonBox {
	position: absolute;
	display: flex;
	left:0;
	bottom:0;
	width:100vw;

	/* 하단 버튼 배경 높이 (슬라이드 클릭 안되는 공간) */
	height:100px;

	opacity:.5;
}
.buttonBox > div {
	/* 하단 버튼 바닥 간격 */
	margin:auto 0 50px 0;

	flex:1;
	text-align: center;
}
.buttonBox > div > a {
	/* 모바일 버튼간 간격 4px + 4px */
	margin:0 4px;

	/* 모바일 버튼 글꼴 크기 */
	font-size:1.2rem !important;
}

.slideButton {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	color:white;
	font-size: 4rem;
	padding:20px;
	opacity:.5;
}
.slideLeft {
	left:0;
}
.slideRight {
	right:0;
}

/* text colors */
.slideBox .color-white {
	color: white;
}
.slideBox .color-pink {
	color: hsl(347, 90%, 96%);
}
.slideBox .color-black {
	color: black;
}

/* https://getcssscan.com/css-buttons-examples */
.linkButton {
  width: 150px;
  background-color: #fff;
  border: 0 solid #e2e8f0;
  border-radius: 1.5rem;
  box-sizing: border-box;
  color: #0d172a;
  cursor: pointer;
  display: inline-block;
  font-family: "Noto Sans";
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 0.5;
  padding: 1rem 1.6rem;
  text-align: center;
  text-decoration: none #0d172a solid;
  text-decoration-thickness: auto;
  transition: all .1s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.linkButton:hover {
  background-color: #1e293b;
  color: #fff;
}


@media screen and (min-width: 768px) {
	.slideBox .title {
		/* pc 글꼴 크기 */
		font-size: 3em;
	}
	.slideBox .text {
		/* pc 글꼴 크기 */
		font-size: 2em;
	}
	.buttonBox > div > a {
		/* pc 버튼간 간격 10px + 10px */
		margin:0 10px;

		/* pc 버튼 글꼴 크기 */
		font-size: 1.6rem !important;
	}

	.slideBox .logo {
		/* pc 로고 마진 */
		margin:50px;

		/* pc 로고 크기 */
		width: 200px;
		height: auto;
	}

	.slideBox .img-toggle > img:first-child {
		display:none;
	}
	.slideBox .img-toggle > img:last-child {
		display:block;
	}
}

/* 높이가 낮을 경우 (모바일 가로보기) */
@media screen and (max-height: 460px) {
	.slideBox > div > div {
		/* 모든 정렬 무시하고 text 하단 마진 200px */
		margin: auto 0 200px 0;
	}
	.buttonBox {
		/* 하단 버튼 배경 높이 줄임 (슬라이드 클릭 안되는 공간) */
		height: 130px;
	}
	.buttonBox > div {
		/* 하단 버튼 바닥 간격 줄임 */
		margin: auto 0 20px 0;
	}
}