#wrap header,
#wrap main .visual .text-box,
#wrap main .visual .option-box,
#wrap .fullpage-nav {
	opacity: 0;
}

#wrap header {
	transform: translateY(-40px);
	transition: transform 1.2s var(--slow);
}

#wrap main .visual .text-box {
	transition: opacity 1.2s var(--slow);
}

#wrap main .visual .text-box h2 {
	font-size: 2.77777em;
	transition: font 1.2s var(--slow);
}

#wrap main .visual .option-box,
#wrap .fullpage-nav {
	bottom: 5px;
	transition: bottom 1.2s var(--slow);
}

#wrap.on header,
#wrap.on main .visual .text-box,
#wrap.on main .visual .option-box,
#wrap.on .fullpage-nav {
	opacity: 1;
}

#wrap.on header {
	transform: translateY(0);
}

#wrap.on main .visual .text-box h2 {
	font-size: 2.2222em;
}

#wrap.on main .visual .option-box {
	bottom: 25px;
}

#wrap.on .fullpage-nav {
	bottom: 30px;
}

.fullpage-nav {
	position: fixed;
	right: 50px;
	bottom: 30px;
	z-index: 2;
}

.fullpage-nav .row {
	align-items: center;
	column-gap: 18px;
}

.fullpage-nav button {
	display: flex;
	width: 12px;
	height: 7px;
}

.fullpage-nav .text {
	height: 1.3em;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.8rem;
	overflow: hidden;
	transition: all 0.2s;
}

.fullpage-nav span {
	display: inline-block;
	color: var(--color-white);
	font-weight: 700;
	text-align: center;
	position: relative;
	transition: all 0.6s;
	white-space: nowrap;
}

.fullpage-nav.color .angle-cls {
	fill: var(--color-gray);
}

.fullpage-nav.color span {
	color: var(--color-gray);
}

main .section .box {
	width: 100%;
	height: 100%;
}

main p {
	color: #333;
	font-family: var(--font-pretendard);
}

main h2 {
	color: #111;
	font-size: var(--font64);
	font-weight: 700;
	overflow: hidden;
}

main h2 span {
	display: block;
	transform: translateY(100%);
	transition: all 1.2s var(--slow);
}

main h2.on span {
	transform: translateY(0);
}

main .title {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
	text-align: center;
}

main .title p {
	color: #333;
	font-size: 2.1rem;
	font-weight: 300;
	line-height: 1.7;
	opacity: 0;
	transform: translateY(40px);
	transition: all 1.2s var(--slow);
}

main .title p.on {
	opacity: 1;
	transform: translateY(0);
}

main .visual {
	width: 100%;
	height: 100vh;
}

main .visual .box,
main .visual .slide-wrap,
main .visual .slide-box {
	position: relative;
	width: 100%;
	height: 100%;
}

main .visual .slide-box {
	z-index: -1;
}

main .visual .video-box {
	position: relative;
	width: 100%;
	height: 100%;
}

main .visual .video-box video {
	min-width: calc(100% + 2px);
	min-height: calc(100% + 2px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .visual .option-box {
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translateX(-50%);
}

main .visual .text-box {
	width: 100%;
	font-size: var(--font54);
	text-align: center;
	padding: 0 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .visual .text-box * {
	color: var(--color-white);
	font-weight: 600;
}

main .visual .text-box h2 {
	font-size: 2.22222em;
	font-weight: 700;
	margin-bottom: 20px;
}

main .visual .text-box .p-box {
	height: 1.3em;
	font-size: 2.4rem;
	overflow: hidden;
}

main .visual .text-box p {
	font-family: var(--font-pretendard);
	position: relative;
	transition: all 1.2s var(--slow);
}

main .visual .text-box p br {
	display: none;
}

main .company .box,
main .news .box {
	padding: calc(var(--header-height) + 60px) 0 60px;
}

main .company .title {
	margin-bottom: 80px;
}

main .company .item-box {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 20px;
}

main .company .item {
	width: 100%;
	font-size: 4rem;
	text-align: center;
	position: relative;
	aspect-ratio: 0.78095/1;
}

main .company .item * {
	color: var(--color-white);
}

main .company .item a,
main .company .item .inner,
main .company .item .hover {
	transition: all 0.8s var(--slow);
}

main .company .item a {
	display: block;
	width: 100%;
	height: 100%;
}

main .company .item .inner,
main .company .item .hover {
	position: relative;
	width: 100%;
	height: 100%;
}

main .company .item .inner::before,
main .company .item .hover::before {
	content: "";
	display: block;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .company .item:nth-child(1) .inner::before {
	background-image: url("/img/main/img_company_01_1.jpg");
}

main .company .item:nth-child(2) .inner::before {
	background-image: url("/img/main/img_company_01_2.jpg");
}

main .company .item:nth-child(3) .inner::before {
	background-image: url("/img/main/img_company_01_3.jpg");
}

main .company .item:nth-child(4) .inner::before {
	background-image: url("/img/main/img_company_01_4.jpg");
}

main .company .item:nth-child(5) .inner::before {
	background-image: url("/img/main/img_company_01_5.jpg");
}

main .company .item .inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

main .company .item .inner h4 {
	display: none;
}

main .company .item .hover {
	row-gap: 30px;
	padding: 0 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

main .company .item .hover::before {
	background: linear-gradient(135deg, #1A243E 0%, #374A7A 100%);
}

main .company .item .plus {
	position: absolute;
	top: 30px;
	right: 30px;
	opacity: 0;
}

main .company .item h4 {
	font-weight: 700;
}

main .company .item b {
	display: block;
	font-size: 1.8rem;
	margin-bottom: 10px;
	opacity: 0.6;
}

main .company .item .small {
	font-size: 0.75em;
}

main .company .item .big {
	font-size: 1em;
}

main .company .item p {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.5;
}

main .company .item.on:nth-child(1) {
	transition-delay: 0.1s;
}

main .company .item.on:nth-child(2) {
	transition-delay: 0.2s;
}

main .company .item.on:nth-child(3) {
	transition-delay: 0.3s;
}

main .company .item.on:nth-child(4) {
	transition-delay: 0.4s;
}

main .company .item.on:nth-child(5) {
	transition-delay: 0.5s;
}

@media screen and (hover: hover) and (min-width: 1024px) {
	main .company .item .inner h4 {
		display: block;
	}

	main .company .item .hover {
		opacity: 0;
		transform: translate(-50%, -50%) rotateY(180deg);
	}

	main .company .item:hover a,
	main .company .item:hover .inner {
		transform: rotateY(180deg);
	}

	main .company .item:hover .hover {
		opacity: 1;
	}
}

main .business .scroller {
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	z-index: 1;
	scrollbar-width: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

main .business .scroller::-webkit-scrollbar {
	display: none;
}

main .business .scroller .scale {
	height: 100vh;
}

main .business .scroller .empty {
	height: 25vh;
}

main .business .box {
	background: var(--color-black);
	position: relative;
}

main .business .box * {
	text-align: center;
	font-family: var(--font-pretendard);
}

main .business .box span,
main .business .box b {
	display: block;
}

main .business .title,
main .business .content {
	width: 100%;
	height: 100%;
}

main .business .title {
	transition: all 0.4s;
	pointer-events: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

main .business .title .column {
	transition: all 0.4s;
}

main .business .title h2 {
	color: var(--color-white);
	font-size: var(--font74);
	white-space: nowrap;
	overflow: revert;
	transition: all 0.4s;
}

main .business .title h2 b {
	opacity: 0;
	transform: scale(1.05405);
	transition: all 0.8s ease-in;
}

main .business .title.on h2 b {
	opacity: 1;
	transform: scale(1);
}

@media screen and (min-width: 1200px) {
	main .business .content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

main .business .content {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	opacity: 0;
	transition: all 0.6s;
}

main .business .content::after {
	content: "";
	display: block;
	background: var(--color-white);
	opacity: 0;
	transition: all 0.8s;
	pointer-events: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .business .content.cover::after {
	animation: on-off 2s var(--slow);
}

@keyframes on-off {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

main .business .bg {
	width: 100vw;
	height: 100%;
	clip-path: circle(0% at 50% 50%);
	pointer-events: none;
	transition: all 1.2s var(--slow);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .business .bg img {
	min-width: 100%;
	max-width: inherit;
	min-height: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .business .text-box {
	margin: auto;
	position: relative;
}

main .business .text-box h3 {
	color: #111;
	font-size: var(--font64);
}

main .business .text-box h3>* {
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.4s ease-in;
}

main .business .text-box h3 span {
	font-weight: 500;
}

main .business .text-box.on h3>* {
	opacity: 1;
	transform: translateY(0);
}

main .business .text-box.on h3:nth-child(1)>* {
	transition-delay: 0.1s;
}

main .business .text-box.on h3:nth-child(2)>* {
	transition-delay: 0.2s;
}

main .business .text-box.on h3:nth-child(3)>* {
	transition-delay: 0.3s;
}

main .business .text-box a {
	z-index: 1;
	position: absolute;
	top: calc(100% + 80px);
	left: 50%;
	transform: translateX(-50%);
}

main .business .more-button {
	display: inline-flex;
	align-items: center;
	column-gap: 20px;
	opacity: 0.3;
}

main .business .more-button em {
	color: var(--color-white);
	font-size: 2rem;
	font-weight: 700;
	font-family: var(--font-redhatdisplay);
}

main .business .more-button .plus {
	width: 12px;
	height: 12px;
}

main .news .title {
	margin-bottom: 60px;
}

main .news .row>div {
	width: calc(50% - 20px);
}

main .news .top {
	border-bottom: 1px solid var(--color-black);
	padding-bottom: 20px;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}

main .news .top h4 {
	color: #222;
	font-size: var(--font32);
	font-weight: 500;
}

main .news .slide-box {
	margin: 40px 0 60px;
	overflow: hidden;
}

main .news .item .img {
	padding: 29.875% 0;
	position: relative;
	overflow: hidden;
}

main .news .item .img img {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	transition: all 0.6s var(--slow);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .news .item h5 {
	height: 3em;
	color: #111;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
	font-family: var(--font-pretendard);
	margin: 30px 0 20px;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-wrap: break-word;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

main .news .item .date {
	color: var(--color-gray);
	font-size: 1.8rem;
	font-weight: 700;
}

main .news .item:hover .img img {
	transform: translate(-50%, -50%) scale(1.0975);
}

main .sustainability .box,
main .inquiry .box {
	padding: calc(var(--header-height) + 100px) 0 150px;
	position: relative;
}

main .sustainability .box::before,
main .inquiry .box::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%) scale(1.21772475);
	transition: all 3s 0.1s linear;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

main .sustainability .box.on::before,
main .inquiry .box.on::before {
	transform: translate(-50%, -50%) scale(1);
}

main .sustainability .column,
main .inquiry .column {
	justify-content: space-between;
	width: 100%;
	height: 100%;
}

main .sustainability .item-box,
main .inquiry .item-box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
}

main .sustainability .point-text,
main .inquiry .point-text {
	font-size: 15rem;
	font-weight: 900;
	font-style: italic;
	position: absolute;
	bottom: -0.3em;
}

main .sustainability .box::before {
	background-image: url("/img/main/bg_sustainability.jpg");
}

main .sustainability .box * {
	color: var(--color-white);
}

main .sustainability .title p {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
}

main .sustainability .item {
	background: rgba(255, 255, 255, 0.05);
	height: 120px;
	position: relative;
}

main .sustainability .item::before {
	content: "";
	display: block;
	transition: all 0.6s var(--slow);
	width: 100%;
	height: 100%;
	background: linear-gradient(93deg, #1A243E 0%, #374A7A 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .sustainability .item a,
main .sustainability .item h5 {
	display: flex;
	align-items: center;
}

main .sustainability .item a {
	justify-content: space-between;
	padding: 0 45px;
	position: relative;
	transition: all 0.6s var(--slow);
	width: 100%;
	height: 100%;
}

main .sustainability .item h5 {
	column-gap: 20px;
	font-size: 2.3rem;
	font-weight: 700;
}

@media screen and (hover: hover) and (min-width: 1024px) {
	main .sustainability .item::before {
		opacity: 0;
	}

	main .sustainability .item a {
		opacity: 0.3;
	}

	main .sustainability .item:hover::before {
		opacity: 1;
	}

	main .sustainability .item:hover a {
		padding: 0 60px;
		opacity: 1;
	}
}

main .sustainability .point-text {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

main .inquiry .box::before {
	background-image: url("/img/main/bg_inquiry.jpg");
}

main .inquiry .item {
	background: var(--color-white);
	position: relative;
	transition: all 0.6s var(--slow);
}

main .inquiry .item::before {
	content: "";
	display: block;
	opacity: 0;
	transition: all 0.6s var(--slow);
	width: 100%;
	height: 100%;
	background: linear-gradient(152deg, #1A243E 0%, #374A7A 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

main .inquiry .item::before * {
	transition: all 0.6s var(--slow);
}

main .inquiry .item a {
	padding: 60px;
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}

main .inquiry .item dl dt {
	color: #111;
	font-size: calc(var(--font32) - 0.2rem);
	font-weight: 600;
	margin-bottom: 40px;
}

main .inquiry .item dl b {
	display: block;
	color: var(--color-gray);
	font-size: 1.8rem;
	margin-top: 15px;
}

main .inquiry .item dl dd {
	color: #555;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.5;
}

main .inquiry .item:hover {
	background: transparent;
	transform: translateY(-40px);
}

main .inquiry .item:hover::before {
	opacity: 1;
}

main .inquiry .item:hover dl * {
	color: var(--color-white);
}

main .inquiry .item:hover dl b {
	opacity: 0.3;
}

main .inquiry .item:hover .icon {
	filter: brightness(0) invert(1);
}

main .inquiry .point-text {
	background: linear-gradient(90deg, rgba(204, 204, 204, 0.3) 0%, rgba(204, 204, 204, 0.05) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}