/* common */
#main{ position: relative; }
#top{ display: none; }
.ptH{ padding-top: var(--headerH); }

/* fp-nav */
#nav{ position: fixed; bottom: 60px; right: 30px; z-index: 100; z-index: 100; font-family: var(--engFont); font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; writing-mode: tb; opacity: 1; transition: opacity 0.5s; pointer-events: none; }
#nav span{ transition: color 0.5s; }
#nav .num{ color: rgba(255, 255, 255, 0.5); }
#nav .sec{ display: inline-block; margin-top: 5px; color: #fff; }

#nav.scroll .num{ color: #CCC; }
#nav.scroll .sec{ color: #111; }

#nav.opacity{ opacity: 0; }

/* cursor */
.cursor-wrap{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 800; pointer-events: none; overflow: hidden; }
.cursor{ width: 175px; height: 175px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; position: absolute; z-index: 100; transform: translate(-50%, -50%) scale(0); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); pointer-events: none; transition: transform 0.5s; }
.cursor span{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.3); letter-spacing: 10px; line-height: 1; font-style: italic; opacity: 0; filter: blur(10px); -webkit-filter: blur(10px); transition: opcaity 0.5s, filter 0.5s, letter-spacing 0.5s; }
.cursor span::before, .cursor span::after{ display: inline-block; transform: translateY(-1px);}
.cursor span::before{ content: url("/img/main/cursor_prev.svg"); margin-right: 20px; }
.cursor span::after{ content: url("/img/main/cursor_next.svg"); margin-left: 20px; }

.cursor.active{ transform: translate(-50%, -50%) scale(1); }
.cursor.active span{ letter-spacing: -0.02em; opacity: 1; filter: blur(0); -webkit-filter: blur(0); transition-delay: 0.3s; }

/* title-box */
.title-box h3{ font-family: var(--engFont); font-size: 12rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; }
.title-box p{ font-size: 2.2rem; font-weight: 300; color: #fff; letter-spacing: -0.02em; margin-top: 20px; }

@media screen and (max-height: 800px){
	
}

@media screen and (max-width: 1700px){
	/* cursor */
	.cursor{ width: 140px; height: 140px; }

	/* title-box */
	.title-box h3{ font-size: 9rem; }
	.title-box p{ font-size: 2rem; }
}

@media screen and (max-width: 1280px){
	/* cursor */
	.cursor{ width: 100px; height: 100px; }
	.cursor span{ font-size: 1.5rem; }
	.cursor span::before{ margin-right: 10px; }
	.cursor span::after{ margin-left: 10px; }

	/* title-box */
	.title-box h3{ font-size: 7rem; }
	.title-box p{ font-size: 1.8rem; margin-top: 10px; }
}

@media screen and (max-width: 1200px){
	/* fp-nav */
	#nav{ display: none; }
}

@media screen and (max-width: 900px){
	/* title-box */
	.title-box h3{ font-size: 4.5rem; }
}


/* visual */
#visual{ position: relative; overflow: hidden; }
#visual .visual{ height: var(--vh); position: relative; }
#visual .visual::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; }
#visual .visual video{ width: 100%; height: 100%; object-fit: cover; }

#visual .cover{ position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding-bottom: 60px; }
#visual .cover *{ color: #fff; }
#visual .cover button{ background: none; border: none; }

#visual .slide-box{ display: flex; align-items: center; margin-left: -10px; opacity: 0; transition: opacity 1s; }
#visual .slide-box > button{ padding: 15px; position: relative; z-index: 10; }
#visual .slide-box .slick-dots{ display: flex !important; align-items: center; margin: 0 -15px; }
#visual .slide-box .slick-dots li{ position: relative; }
#visual .slide-box .slick-dots li::after{ content: ""; width: 3px; height: 3px; background: rgba(255, 255, 255, 0.3); position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#visual .slide-box .slick-dots li:last-of-type::after{ display: none; }
#visual .slide-box .slick-dots li button{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; opacity: 0.3; transition: font-size 1s, opacity 1s; padding: 20px 15px; will-change: font-size, opacity; }
#visual .slide-box .slick-dots li.slick-active button{ font-size: 3.2rem; opacity: 1; }

#visual .slide-box.animated{ opacity: 1; }

#visual .text-box ul li{ display: none; }
#visual .text-box ul li.animated{ display: block; }
#visual .text-box h2{ --translate: -200px; --reverse: 200px; font-family: var(--engFont); font-size: 9.4rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 40px; }
#visual .text-box p{ --translate: 200px; --reverse: -200px; font-size: 2.2rem; font-weight: 300; letter-spacing: -0.02em; }

#visual .text-box ul li.animated h2, #visual .text-box ul li.animated p{ animation: textTranslate_x 1.5s both; }

#visual .text-box ul li.hidden h2, #visual .text-box ul li.hidden p{ animation: textTranslate_reverse 1s both; }

@media screen and (max-width: 1700px){
	#visual .slide-box .slick-dots li.slick-active button{ font-size: 2.8rem; }

	#visual .text-box h2{ font-size: 7.5rem; }
	#visual .text-box p{ font-size: 2rem; }
}

@media screen and (max-width: 1280px){
	#visual .slide-box .slick-dots li button{ font-size: 1.7rem; }
	#visual .slide-box .slick-dots li.slick-active button{ font-size: 2.6rem; }

	#visual .text-box h2{ font-size: 5.5rem; margin-bottom: 20px; }
	#visual .text-box p{ font-size: 1.8rem; }
}

@media screen and (max-width: 900px){
	#visual .text-box h2{ --translate: -100px; --reverse: 100px; font-size: 4rem; }
	#visual .text-box p{ --translate: 100px; --reverse: -100px; font-size: 1.7rem; }
}

@media screen and (max-width: 600px){
	#visual .text-box h2 br{ display: none; }
}


/* business */
#business{ position: relative; }
#business .scroll-content{ height: 100vh; position: relative; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; }
#business .bg-box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; mix-blend-mode: difference; pointer-events: none; }
#business .title-box{ height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; position: sticky; top: 0; left: 0;}
#business .title-box .word{ display: inline-block; overflow: hidden; }
#business .title-box .char{ display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity 1s, transform 1s; transition-delay: calc( 30ms * var(--char-index));  }

#business .scroll-items{ background: linear-gradient(to bottom, #121415, #1A2F3A); padding-top: calc(50vh + 12rem + 35px); }
#business .list-box{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 300px 20px; padding: 100px 0 80px; }
#business .item{ max-width: 620px; width: calc((100% - 20px) / 2); position: relative; }
#business .list-box .item:nth-of-type(odd){ top: -100px; }
#business .item .figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 109.679%; }
#business .item .figure figure{ width: 100%; height: 100%; transition: opacity 0.8s 0.5s; }
#business .item .figure figure img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.8s; }

#business .item .figure figure:not(.hover){ opacity: 1; }
#business .item .figure .hover{ opacity: 0; }
#business .item .figure .hover img{ transform: translate(-50%, -50%) scale(1.05); transition-delay: 0.5s; }

#business .item:nth-of-type(3n){ align-self: flex-start; }
#business .item.short .figure{ padding-bottom: 77.42%; }

#business .item .txt{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-top: 30px; }
#business .item .txt *{ font-family: var(--engFont); font-weight: 500; color: #fff; letter-spacing: -0.02em; }
#business .item .txt h6{ width: calc(100% - 200px); font-size: 2.8rem; }
#business .item .txt span{ display: inline-block; font-size: 1.8rem; line-height: 1; padding: 7px 30px; border: 2px solid #FFF; border-radius: 100px; }
#business .item .txt span::after{ content: url("/img/main/business_arrow.svg"); margin-left: 15px; vertical-align: middle; }

#business .title-box.aos-animate .char{ opacity: 1; transform: translateY(0); }

@media screen and (hover: hover){
	#business .item:hover .figure figure:not(.hover){ opacity: 0; }
	#business .item:hover .figure figure:not(.hover) img{ transform: translate(-50%, -50%) scale(1.05); }
	#business .item:hover .figure .hover{ opacity: 1; }
	#business .item:hover .figure .hover img{ transform: translate(-50%, -50%) scale(1); }
}

@media screen and (max-height: 800px){
	#business{ background: linear-gradient(to bottom, #121415, #1A2F3A); padding: 100px 0; }
	#business .bg-box{ position: static; margin-bottom: 60px; pointer-events: auto; }
	#business .title-box{ height: auto; }

	#business .scroll-content{ height: auto; overflow-y: visible; }
	#business .scroll-items{ background: transparent; padding-top: 0; }
}

@media screen and (max-width: 1700px){
	#business .list-box{ gap: 200px 20px; }
	#business .item .txt h6{ font-size: 2.4rem; }
	#business .item .txt span{ font-size: 1.7rem; }
}

@media screen and (max-width: 1280px){
	#business .item .txt{ margin-top: 15px; }
	#business .item .txt h6{ width: calc(100% - 180px); font-size: 2.2rem; }
	#business .item .txt span{ font-size: 1.6rem; padding: 7px 20px; }
}

@media screen and (max-width: 1200px){
	#business{ background: linear-gradient(to bottom, #121415, #1A2F3A); padding: 80px 0; }
	#business .bg-box{ position: static; margin-bottom: 30px; pointer-events: auto; }
	#business .title-box{ height: auto; }

	#business .scroll-content{ height: auto; overflow-y: visible; }
	#business .scroll-items{ background: transparent; padding-top: 0; }
	#business .list-box{ gap: 100px 20px; padding: 0; padding-top: 50px; }
	#business .list-box .item:nth-of-type(odd){ top: -50px; }
}

@media screen and (max-width: 900px){
	#business .item .txt{ flex-direction: column; align-items: flex-end; }
	#business .item .txt h6{ width: 100%; font-size: 2rem; text-align: right; }
	#business .item .txt span{ font-size: 1.5rem; margin-top: 10px; padding: 5px 10px; }
	#business .item .txt span::after{ display: inline-block; transform: scale(0.8); transform-origin: center left; }
}


/* product */
#product{ background: url("/img/main/product_bg.jpg") no-repeat center center / cover; overflow: hidden; }
#product .ptH{ padding-top: calc(var(--headerH) / 2); }
#product .flex-box{ display: flex; align-items: center; }
#product .flex-box > div{ width: 50%; }

#product .slide-box .product-wrap{ width: calc(100% + ((100vw - 100%) / 2)); }
#product .slide-box .product-wrap .slick-list{ margin-right: -40px; }
#product .slide-box .product-wrap .slick-track{ display: flex; }
#product .slide-box .prod{ width: 595px; height: 100%; background: rgba(0, 0, 0, 0.3); padding: 40px; margin: 40px; box-shadow: 20px 20px 30px rgba(15, 32, 108, 0.1); }
#product .slide-box .prod figure{ width: 100%; padding-bottom: 100%; position: relative; }
#product .slide-box .prod figure img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#product .slide-box .prod .txt{ margin-top: 40px; }
#product .slide-box .prod .txt span{ display: block; font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.3); letter-spacing: -0.02em; margin-bottom: 10px; }
#product .slide-box .prod .txt h6{ font-size: 2.6rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; }

#product .slide-box .prod.last{ background: transparent; align-self: center; }
#product .slide-box .prod.last span{ display: block; font-family: var(--engFont); font-size: 6.4rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; text-align: center; }
#product .slide-box .prod.last span::after{ content: ""; display: inline-block; width: 35px; height: 35px; background: url("/img/main/product_arrow.svg") no-repeat center center / contain; margin-left: 30px; }

@media screen and (max-width: 1700px){
	#product .slide-box .prod{ width: 500px; }
	#product .slide-box .prod .txt span{ font-size: 1.7rem; }
	#product .slide-box .prod .txt h6{ font-size: 2.2rem; }

	#product .slide-box .prod.last span{ font-size: 5.5rem; }
}

@media screen and (max-width: 1280px){
	#product .slide-box .product-wrap .slick-list{ margin-right: -20px; }
	#product .slide-box .prod{ width: 450px; padding: 30px; margin: 20px; }
	#product .slide-box .prod figure img{ max-width: calc(100% - 50px); max-height: calc(100% - 50px); }
	#product .slide-box .prod .txt span{ font-size: 1.6rem; }
	#product .slide-box .prod .txt h6{ font-size: 2.2rem; }

	#product .slide-box .prod.last span{ font-size: 4.5rem; }
}

@media screen and (max-width: 1200px){
	#product{ padding: 40px 0; }
	#product .flex-box{ flex-direction: column; }
	#product .flex-box > div{ width: 100%; }

	#product .slide-box{ margin-top: 20px; }
	#product .slide-box .prod{ width: 350px; }
	#product .slide-box .prod figure img{ max-width: calc(100% - 30px); max-height: calc(100% - 30px); }

	#product .slide-box .prod.last span{ font-size: 3rem; }
	#product .slide-box .prod.last span::after{ width: 20px; height: 20px; margin-left: 10px; }
}


/* recruit */
:root{
	--recruit-top: 0;
	--recruit-left: 0;
}

#recruit{ --width: 240px; --height: 84px; --margin: 15px; --transition: 1.5s; }
#recruit .scroll-content{ width: 100%; position: relative; }
#recruit h4{ font-size: 6.8rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.5941; }
#recruit h4 br.m{ display: none; }
#recruit h4 .img{ display: inline-block; height: var(--height); vertical-align: text-top; margin-left: var(--margin); position: relative; z-index: 10; transition: padding var(--transition); }
#recruit h4 .bg{ width: 0; height: var(--height); border-radius: 100px; overflow: hidden; position: absolute; top: 0; left: 0; transition: width var(--transition), height var(--transition), border-radius var(--transition), top var(--transition), left var(--transition); }
#recruit h4 .bg::after{ content: ""; display: inline-block; width: var(--width); height: var(--height); background: url("/img/main/recruit_bg.jpg") no-repeat center center / cover; border-radius: 100px; transition: width var(--transition), height var(--transition), border-radius var(--transition); }
#recruit .text .link{ overflow: hidden; margin-top: 20px; }
#recruit .text a{ display: inline-block; font-family: var(--engFont); font-size: 2.8rem; font-weight: 500; padding: 20px 0; transform: translateY(100%); opacity: 0; transition: opacity 1s, transform 1s; }
#recruit .text a::after{ content: ""; display: inline-block; width: 20px; height: 20px; background: url("/img/main/recruit_arrow.svg") no-repeat center center / contain; margin-left: 15px; opacity: 0.3; }

#recruit .bg-box{ width: 100%; min-height: var(--vh); display: flex; justify-content: center; align-items: center; opacity: 1; text-align: center; }
#recruit .bg-box h4 .word{ white-space: nowrap; }
#recruit .bg-box h4 .char{ display: inline-block; background: linear-gradient(to bottom, #111, #111, #111, #111 50% ,transparent 50%); background-clip: text; background-size: 100% 200%; background-position: 100% 100%; color: transparent; }
#recruit .bg-box .text .link{ display: none; }

#recruit .bg-box.aos-animate h4 .char{ animation: textBg_Top 1s both; }
#recruit .bg-box.aos-animate .img{ padding-right: calc(var(--width) + var(--margin)); transition-delay: 1s; }
#recruit .bg-box.aos-animate .bg{ width: var(--width); transition-delay: 1s; }

#recruit .link-box{ position: absolute; bottom: 0; left: 0; right: 0; z-index: 50; padding-bottom: 40px; pointer-events: none; }
#recruit .link-box h4{ color: #fff; }
#recruit .link-box h4 .char{ display: inline-block; background: linear-gradient(to bottom, #fff, #fff, #fff, #fff 50% ,transparent 50%); background-clip: text; background-size: 100% 200%; background-position: 100% 100%; color: transparent; background-position: 100% 100%; opacity: 0; transform: translateY(100%); transition: background-position 1s, opacity 1s, transform 1s; }
#recruit .link-box .text a{ color: rgba(255, 255, 255, 0.3); }

#recruit.on .bg-box .img{ padding-right: calc(var(--width) + var(--margin));  }
#recruit.on .bg-box .bg{ width: 100vw; height: 100vh; border-radius: 0; transition-delay: unset; }
#recruit.on .bg-box .bg::after{ width: 100%; height: 100%; border-radius: 0; transition-delay: unset; }
#recruit.on .link-box{ pointer-events: auto; }
#recruit.on .link-box h4 .char{ background-position: 0 0; opacity: 1; transform: translateY(0); transition-delay: inherit; }
#recruit.on .link-box .text a{ opacity: 1; transform: translateY(0); transition-delay: inherit; }

@media screen and (max-height: 800px){
	#recruit{ background: url("http://hnjcorp.webmoa21.co.kr/img/main/recruit_bg.jpg") no-repeat center center / cover; }
	#recruit h4 .img{ padding-right: 0 !important; height: 0; overflow: hidden; margin-right: 5px; }
	
	#recruit .bg-box{ justify-content: flex-start; min-height: auto; padding: 130px 0 30px; text-align: left; }
	#recruit .bg-box h4 .char{ background: linear-gradient(to bottom, #fff, #fff, #fff, #fff 50% ,transparent 50%); background-clip: text; background-size: 100% 200%; background-position: 100% 100%; }
	#recruit .bg-box .text .link{ display: block; }

	#recruit .bg-box.aos-animate .text a{ opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
}

@media screen and (max-width: 1700px){
	#recruit{ --width: 200px; --height: 70px; }
	#recruit h4{ font-size: 5.5rem; }
	#recruit .text a{ font-size: 2.4rem; }
	#recruit .text a::after{ width: 15px; height: 15px; }
}

@media screen and (max-width: 1280px){
	#recruit{ --width: 170px; --height: 60px; --margin: 10px; }
	#recruit h4{ font-size: 4.5rem; }
	#recruit .text a{ font-size: 2.2rem; }
	#recruit .text a::after{ width: 15px; height: 15px; margin-left: 10px; }
}

@media screen and (max-width: 1200px){
	#recruit{ background: url("http://hnjcorp.webmoa21.co.kr/img/main/recruit_bg.jpg") no-repeat center center / cover; }
	#recruit h4 .img{ padding-right: 0 !important; height: 0; overflow: hidden; margin-right: 5px; }
	
	#recruit .bg-box{ justify-content: flex-start; min-height: auto; padding: 130px 0 0; text-align: left; }
	#recruit .bg-box h4 .char{ background: linear-gradient(to bottom, #fff, #fff, #fff, #fff 50% ,transparent 50%); background-clip: text; background-size: 100% 200%; background-position: 100% 100%; }
	#recruit .bg-box .text .link{ display: block; }

	#recruit .bg-box.aos-animate .text a{ opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
}

@media screen and (max-width: 900px){
	#recruit h4{ font-size: 3.5rem; }
	#recruit .text a{ font-size: 2rem; }
	#recruit .text a::after{ width: 13px; height: 13px; margin-left: 5px; }
}

@media screen and (max-width: 670px){
	#recruit h4{ font-size: 3rem; }
	#recruit .text .link{ margin-top: 0; }

	#recruit .bg-box .img{ margin-left: 0; }
}