.intro-box {
	width: 100vw;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	z-index: 10;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

@supports (-webkit-touch-callout: none) {
	.intro-box {
		height: -webkit-fill-available;
	}
}

.intro-box:root {
	--vh: 100%;
}

.intro-box::before {
	content: "";
	display: block;
	background: var(--color-white);
	z-index: -1;
	transition: all 1.2s;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.intro-box .flex-box,
.intro-box .item,
.intro-box .inner {
	width: 100%;
	height: 100%;
}

.intro-box .flex-box {
	display: flex;
	background: transparent;
	position: relative;
	transition: all 0.4s;
}

.intro-box .logo svg {
	overflow: inherit;
}

.intro-box .item {
	position: relative;
	transition: all 0.6s;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.intro-box .bg-box {
	width: 100%;
	height: calc(100% + 2px);
	z-index: -1;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.intro-box .circle {
	width: 2px;
	height: 2px;
	border-radius: 50%;
	backdrop-filter: brightness(2.35);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(800);
	transition: all 0.8s ease;
	clip-path: circle(0% at 50% 50%);
}

.intro-box .inner {
	transition: all 0.8s 0.8s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.intro-box .inner .logo {
	transition: all 0.8s;
}

.intro-box .text {
	height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-100px);
	transition: all 0.6s;
}

.intro-box .text * {
	color: var(--color-white);
}

.intro-box .text p {
	font-size: 2.6rem;
	font-weight: 300;
	padding: 60px 0 80px;
}

.intro-box .text button {
	width: 200px;
	height: 65px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	column-gap: 15px;
}

.intro-box .text button span {
	font-size: 1.8rem;
	font-weight: 700;
}

.intro-box .sc .bg-box {
	background-image: url("/img/main/bg_intro_01_1.jpg");
}

.intro-box .ez .bg-box {
	background-image: url("/img/main/bg_intro_01_2.jpg");
}

.intro-box .sc-logo {
	width: 386px;
	height: 118px;
}

.intro-box .ez-logo {
	width: 166px;
	height: 150px;
}

@media (min-width: 1024px) {
	.intro-box .item.on .circle {
		clip-path: circle(80% at 50% 50%);
	}

	.intro-box .item.on .inner {
		transition: all 0.8s ease;
		filter: brightness();
	}

	.intro-box .item.on .text {
		opacity: 1;
		overflow: inherit;
		transform: translateY(0);
	}
}

.intro-box .logo-move {
	opacity: 0;
	position: absolute;
	pointer-events: none;
	transition: all 1s;
}

.intro-box .logo-move * {
	transition: all 1s;
}

.intro-box .sc-move .sc-ani {
	transition: all 1.8s;
}

.intro-box .sc-move .logo-text {
	fill: var(--color-black);
}

.intro-box .sc-move .sc-ani {
	transform: scale(1);
	transform-origin: center;
	transform-box: content-box;
}

.intro-box .sc-move.on .sc-ani {
	opacity: 0;
	transform: scale(60);
}

.intro-box .sc-move.off path:not(.sc-ani) {
	opacity: 0;
}

.intro-box .ez-move .ez-ani {
	transition: all 1.8s;
}

.intro-box .ez-move .ez-ani {
	transform: scale(1);
	transform-origin: center;
	transform-box: content-box;
}

.intro-box .ez-move.on .ez-ani {
	opacity: 0;
	transform: scale(60);
}

.intro-box .ez-move.off path:not(.ez-ani) {
	opacity: 0;
}

.intro-box.white .flex-box {
	opacity: 0;
}

.intro-box.transparent::before {
	background: transparent;
}

@media (max-width: 1600px) {
	.intro-box .sc-logo {
		width: 286px;
		height: 88px;
	}

	.intro-box .ez-logo {
		width: 126px;
		height: 114px;
	}

	.intro-box .text p {
		font-size: 2.2rem;
		padding: 40px 0 60px;
	}
}

@media (max-width: 1024px) {
	.intro-box .flex-box {
		flex-direction: column;
	}

	.intro-box .circle {
		clip-path: circle(80% at 50% 50%);
	}

	.intro-box .text {
		height: auto;
		opacity: 1;
		transform: translateY(0);
	}

	.intro-box .text p {
		padding: 30px 0 40px;
	}
}

@media (max-width: 768px) {
	.intro-box .sc-logo {
		width: 226px;
		height: 70px;
	}

	.intro-box .ez-logo {
		width: 100px;
		height: 92px;
	}

	.intro-box .text p {
		font-size: 1.8rem;
		padding: 30px 0 50px;
	}

	.intro-box .text button {
		width: 160px;
		height: 55px;
	}
}

@media (max-width: 640px) {
	.intro-box .sc-logo {
		width: 196px;
		height: 60px;
	}

	.intro-box .ez-logo {
		width: 89px;
		height: 80px;
	}
}