/* 메인 비주얼 이미지 */
/*#visual .bg01{ background: url("/img/main/visual01.jpg") no-repeat center right 25% / cover; }
#visual .bg02{ background: url("/img/main/visual02.jpg") no-repeat center right 65% / cover; }
#visual .bg03{ background: url("/img/main/visual03.jpg") no-repeat center right 20% / cover; }*/


/* common */
#main{
	--arrowBg: url("/img/main/viewmore.svg") no-repeat center center / contain;
	--arrowW: 43px;
	--arrowH: 15px;
}
#main{ background: url("/img/main/main_bg.jpg") no-repeat bottom center / contain; padding-top: var(--headerH); }


/* title-box */
.title-box{ text-align: center; }
.title-box span{ display: block; font-family: var(--engFont); font-size: 24px; font-weight: 500; color: #B5B5B5; margin-bottom: 15px; letter-spacing: 3px; transition: letter-spacing var(--aosT) calc(var(--aosT) / 2); }
.title-box h2{ font-size: 8rem; font-weight: 700; color: #000; }
.title-box h3{ font-size: 7rem; font-weight: 600; color: #000; }
.title-box h4{ font-size: 6rem; font-weight: 400; color: #000; }
.title-box em{ font-weight: 300; }
.title-box strong{ font-weight: 600; }

.title-box.white *{ color: #FFF; }
.title-box.white span{ font-weight: 400; color: rgba(255, 255, 255, 0.5) !important; }
.title-box.white h2{ font-weight: 600; }
.title-box.white h3{ font-weight: 500; }

.aos-animate .title-box span,
.title-box.aos-animate span{ letter-spacing: -0.02em !important; }


/* viewmore */
.viewmore{ max-width: 100%; width: max-content; display: flex; align-items: center; border: 1px solid rgba(21, 21, 21, 0.15); font-family: var(--engFont); font-size: 18px; font-weight: 500; padding: 14px 20px; position: relative; z-index: 10; }
.viewmore::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor); border: 1px solid var(--mainColor); position: absolute; top: -1px; left: -1px; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.viewmore span{ color: #000; transition: color 0.4s; }
.viewmore i{ display: inline-block; width: var(--arrowW); height: var(--arrowH); background: var(--arrowBg); margin-left: 20px; filter: unset; -webkit-filter: unset; transition: filter 0.4s; }

.viewmore.white{ border-color: rgba(255, 255, 255, 0.3); }
.viewmore.white::before{ background: #FFF; border-color: #FFF; }
.viewmore.white span{ color: #FFF; }
.viewmore.white i{ filter: invert(1); -webkit-filter: invert(1); }

@media screen and (hover: hover){
	.viewmore:hover::before{ transform: scaleX(1); }
	.viewmore:hover span{ color: #FFF; }
	.viewmore:hover i{ filter: invert(1); -webkit-filter: invert(1); }
	
	.viewmore.white:hover span{ color: #000 !important; }
	.viewmore.white:hover i{ filter: unset; -webkit-filter: unset; }
}

@media screen and (max-width: 1920px){
	#main{ background-size: auto; }
}

@media screen and (max-width: 1700px){
	/* title-box */
	.title-box span{ font-size: 20px; margin-bottom: 10px; }

}

@media screen and (max-width: 1280px){
	/* common */
	#main{
		--arrowW: 35px;
		--arrowH: 12px;
	}

	/* title-box */
	.title-box span{ font-size: 17px; margin-bottom: 5px; }

	/* viewmore */
	.viewmore{ font-size: 17px; padding: 10px 15px; }
	.viewmore i{ margin-left: 10px; }
}


/* visual */
#visual{ max-height: var(100dvh - var(--headerH)); height: calc(var(--vh) - var(--headerH)); position: relative; overflow: hidden; }
#visual .bg{ max-height: var(100dvh - var(--headerH)); height: calc(var(--vh) - var(--headerH)); transform: scale(1.1); transition: transform linear var(--duration); }
#visual.animated .slick-active .bg{ /* animation: bgScale var(--duration) linear both; */ transform: scale(1); }

#visual .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#visual .text h2{ font-size: 7rem; font-weight: 600; color: #FFF; line-height: 1.3714; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
#visual .text .slick-active h2{ animation: textClip 1s both; }

#visual .btns{ margin-top: 100px; }
#visual .btns .flex{ display: flex; align-items: center; margin: -15px; }
#visual .btns .flex > *{ padding: 15px; }
#visual .btns button{ background: none; border: none; }
#visual .btns button svg{ width: auto; height: auto; }
#visual .btns button svg path{ stroke: rgba(255, 255, 255, 0.3); transition: stroke 0.3s; }

#visual .slick-dots{ display: flex; }
#visual .slick-dots li{ width: 5px; height: 5px; background: rgba(255, 255, 255, 0.3); transition: background 0.3s; }
#visual .slick-dots li.slick-active{ background: #FFF; }
#visual .slick-dots li:not(:last-of-type){ margin-right: 15px; }
#visual .slick-dots button{ display: none; }

#visual .bottom{ padding-bottom: 80px; position: absolute; bottom: 0; left: 0; right: 0; }
#visual .bottom .scrollDown{ display: flex; justify-content: flex-end; align-items: flex-end; margin-bottom: 35px; }
#visual .bottom .scrollDown *{ display: block; }
#visual .bottom .scrollDown span{ font-family: var(--engFont); font-size: 20px; font-weight: 400; color: #FFF; }
#visual .bottom .scrollDown i{ width: 28px; height: 35px; position: relative; }
#visual .bottom .scrollDown i::before{ content: ""; display: inline-block; width: 14px; height: 21px; background: url("/img/main/scrolldown.svg") no-repeat center center / contain; position: relative; top: 0; left: 50%; transform: translate(-50%, 0); will-change: top, transform; animation: scrollDown 2s infinite; }
#visual .bottom .bar{ height: 2px; background: rgba(255, 255, 255, 0.3); }
#visual .bottom .bar div{ width: 0; height: 100%; background: #FFF; }

@media screen and (hover: hover){
	#visual .btns button:hover svg path{ stroke: #FFF; }
}

@media screen and (max-width: 1700px){
	#visual .btns{ margin-top: 70px; }

	#visual .bottom{ padding-bottom: 60px; }
	#visual .bottom .scrollDown{ margin-bottom: 20px; }
	#visual .bottom .scrollDown span{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#visual .btns{ margin-top: 40px; }

	#visual .bottom{ padding-bottom: 40px; }
	#visual .bottom .scrollDown{ margin-bottom: 15px; }
	#visual .bottom .scrollDown span{ font-size: 17px; }
	#visual .bottom .scrollDown i{ width: 20px; height: 27px; }
	#visual .bottom .scrollDown i::before{ width: 10px; height: 17px; }
}


/* group */
#group{ padding-top: 240px; }
#group *{ color: #FFF; }
#group .title-box{ text-align: left; margin-bottom: 70px; }
#group .fixed-bg{ overflow: hidden; clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#group .fixed-bg::before{ content: ""; width: 100%; height: 100%; background: url("/img/main/group_bg.jpg") no-repeat center center / cover; position: fixed; top: 0; left: 0; }
#group .content{ padding: 135px 0; position: relative; z-index: 100; }
#group .content p{ font-size: 24px; font-weight: 400; line-height: 1.925;  }
#group .content a{ margin-top: 60px; }

@media screen and (max-width: 1700px){
	#group{ padding-top: 180px; }
	#group .title-box{ margin-bottom: 40px; }
	#group .content p{ font-size: 22px; }
	#group .content a{ margin-top: 40px; }
}

@media screen and (max-width: 1280px){
	#group{ padding-top: 100px; }
	#group .title-box{ margin-bottom: 30px; }
	#group .content{ padding: 100px 0; }
	#group .content p{ font-size: 20px; }
	#group .content a{ margin-top: 25px; }
}

@media screen and (max-width: 900px){
	#group .content p{ font-size: 18px; }
}

@media screen and (max-width: 650px){
	#group br{ display: none; }
}


/* business */
#business{ padding: 160px 0 190px; overflow: hidden; }
#business .title-box{ margin-bottom: 100px; }
#business .item-wrap,
#business .item-wrap .slick-list{ overflow: visible; }
#business .item-wrap .slick-list{ margin-right: -30px; }
#business .item{ width: calc((100% - 60px) / 3); margin-right: 30px; }
#business .item a{ display: block; transform: translateY(0); transition: transform 0.4s; }
#business .item figure{ display: block; padding-bottom: 100%; position: relative; overflow: hidden; margin-bottom: 30px; }
#business .item figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.4s; }
#business .item h6{ font-size: 28px; font-weight: 600; color: #151515; }
#business .item p{ font-size: 20px; font-weight: 500; color: #353535; margin-top: 15px; }
#business .item p i{ display: inline-block; width: var(--arrowW); height: var(--arrowH); background: var(--arrowBg); margin-left: 5px; transform: translateX(0); opacity: 0; transition: transform 0.4s, opacity 0.4s; }

#business .dots{ display: none; position: relative; z-index: 100; }
#business .slick-dots{ display: flex; }
#business .slick-dots li{ width: 10px; height: 10px; background: transparent; border: 1px solid rgba(var(--mainRGB), 0.5); transition: width 0.4s, background 0.4s, border-color 0.4s; cursor: pointer; }
#business .slick-dots li.slick-active{ width: 40px; background: var(--mainColor); border-color: var(--mainColor); }
#business .slick-dots li:not(:last-of-type){ margin-right: 7px; }
#business .slick-dots button{ display: none; }

@media screen and (hover: hover){
	#business .item:hover a{ transform: translateY(-15px); }
	#business .item:hover figure img{ transform: translate(-50%, -50%) scale(1.03); }
	#business .item:hover p i{ transform: translateX(10px); opacity: 1; }
}

@media screen and (max-width: 1700px){
	#business{ padding: 120px 0 150px; }
	#business .title-box{ margin-bottom: 70px; }
	#business .item figure{ margin-bottom: 20px; }
	#business .item h6{ font-size: 24px; }
	#business .item p{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#business{ padding: 100px 0; }
	#business .title-box{ margin-bottom: 50px; }
	#business .item figure{ margin-bottom: 15px; }
	#business .item h6{ font-size: 22px; }
	#business .item p{ font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 950px){
	#business .title-box{ margin-bottom: 70px; }
	#business .item{ width: 300px; }
	#business .item a{ transform: translateY(0) !important; }
	#business .item.slick-active a{ transform: translateY(-40px) !important; }
	#business .item.slick-active figure img{ transform: translate(-50%, -50%) scale(1.03); }
	#business .item.slick-active p i{ transform: translate(10px); opacity: 1; }

	#business .dots{ display: block; }
}

@media screen and (max-width: 900px){
	#business .item h6{ font-size: 20px; }
}


/* motion */
#motion{
	--gap: 50vh;
}
#motion{ position: relative; }
#motion .item{ padding-top: calc((100vh + var(--gap)) * var(--order)); pointer-events: none; }
#motion .item:not(:last-child){ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#motion .item:not(:last-child) .box{ position: sticky; top: 0; left: 0; }
#motion .item .box{ background: #F9F9F9 url("/img/main/motion_symbol.svg") no-repeat bottom right / auto; position: relative; opacity: 1 !important; pointer-events: auto; }
#motion .flex-box{ display: flex; }
#motion .flex-box > div{ width: 50%; }
#motion .img{ height: 100vh; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path var(--aosT); }
#motion .img img{ width: 100%; height: 100%; object-fit: cover; }
#motion .text{ display: flex; flex-direction: column; justify-content: center; padding: 0 200px; }
#motion .text dl{ transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT) 0.3s, opacity var(--aosT) 0.3s; }
#motion .text dl dt{ font-size: 12rem; font-weight: 400; color: #000; margin-bottom: 25px; }
#motion .text dl dd{ font-size: 24px; font-weight: 500; color: #000; line-height: 1.6; }
#motion .text dl dd p{ line-height: inherit; }
#motion .text dl dd a{ margin-top: 60px; }

#motion .box.aos-animate .img{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#motion .box.aos-animate .text dl{ transform: translateY(0); opacity: 1; }

@media screen and (max-width: 1700px){
	#motion .text{ padding: 0 150px; }
	#motion .text dl dt{ font-size: 10rem; }
	#motion .text dl dd{ font-size: 22px; }
}

@media screen and (max-width: 1280px){
	#motion .text{ padding: 0 100px; }
	#motion .text dl dd{ font-size: 20px; }
	#motion .text dl dd a{ margin-top: 40px; }
}

@media screen and (max-width: 1200px){
	#motion .img{ width: 100% !important; background: transparent; position: relative; }
	#motion .img::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; }
	#motion .text{ width: 100% !important; height: 100%; padding: 0 20px; position: absolute; top: 0; left: 0; }
	#motion .text{ text-align: center; }
	#motion .text dl dt{ color: #FFF; }
	#motion .text dl dd p{ font-weight: 400; color: rgba(255, 255, 255, 0.8); }

	#motion .viewmore{ border-color: rgba(255, 255, 255, 0.3); margin-left: auto; margin-right: auto; }
	#motion .viewmore::before{ background: #FFF; border-color: #FFF; }
	#motion .viewmore span{ color: #FFF; }
	#motion .viewmore i{ filter: invert(1); -webkit-filter: invert(1); }
}

@media screen and (max-width: 1200px) and (hover: hover){
	#motion .viewmore:hover span{ color: #151515; }
	#motion .viewmore:hover i{ filter: unset; -webkit-filter: unset; }
}


/* recruit */
#recruit{ padding: 160px 0 190px; }
#recruit .title-box{ margin-bottom: 45px; }
#recruit .title-box h4{ line-height: 1.4; }
#recruit .viewmore{ padding: 14px 25px; margin: 0 auto; }

#recruit .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); }
#recruit .block{ grid-column: auto / span 2; margin: -1.5% 0 -6%; position: relative; z-index: 100; transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); }
#recruit .item figure{ display: block; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path var(--aosT) var(--aosT); }

#recruit .item01 figure{ padding: 0 12%; padding-bottom: 75px; }

#recruit .item02{ display: flex; flex-direction: column; justify-content: flex-end; }
#recruit .item02 figure{ text-align: right; padding: 0 18%; }

#recruit .item03{ padding-top: 70px; }
#recruit .item03 figure:first-child{ max-width: 30%; }
#recruit .item03 figure:last-child{ text-align: right; margin-top: -5%; margin-left: 20%; }

#recruit .item04 figure{ text-align: right; }
#recruit .item04 figure:first-child{ max-width: 30%; margin-left: auto; }
#recruit .item04 figure:last-of-type{ margin-top: -3%; padding: 0 13%; }

#recruit .aos-animate .block{ transform: translateY(0); opacity: 1; }
#recruit .aos-animate .item figure{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }

@media screen and (max-width: 1700px){
	#recruit{ padding: 120px 0 150px; }
}

@media screen and (max-width: 1400px){
	#recruit .block{ margin: 7% 0 3%; }
}

@media screen and (max-width: 1280px){
	#recruit{ padding: 100px 0 120px; }
	#recruit .title-box{ margin-bottom: 30px; }
	#recruit .viewmore{ padding: 12px 20px; }
}

@media screen and (max-width: 1200px){
	#recruit .item01 figure{ padding-left: 0; padding-right: 24%; padding-bottom: 20px; }
	#recruit .item02 figure{ padding-left: 36%; padding-right: 0; }
	#recruit .item03{ padding-top: 30px; }
}

@media screen and (max-width: 900px){
	#recruit .item01 figure{ padding-right: 18%; }
	#recruit .item02 figure{ padding-left: 25%; }
	#recruit .item03 figure:first-child,
	#recruit .item04 figure:first-child{ max-width: 40%; }
}


/* board */
#board{ padding-bottom: 180px; overflow: hidden; }
#board .title-box{ margin-bottom: 60px; }
#board .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }

#board .tab-menu ul{ display: flex; margin: 0 -20px; }
#board .tab-menu ul li{ font-size: 22px; font-weight: 600; color: rgba(21, 21, 21, 0.3); padding: 0 20px; cursor: pointer; }
#board .tab-menu ul li span{ display: inline-block; padding: 10px 0; position: relative; }
#board .tab-menu ul li span::before{ content: ""; width: 100%; height: 2px; background: var(--mainColor); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transition: transform 0.3s; }
#board .tab-menu ul li.on{ color: #151515; }
#board .tab-menu ul li.on span::before{ transform: scaleX(1); }

#board .tab-content .tab:not(.on){ display: none; }

#board .btns{ display: flex; align-items: center; margin-bottom: -13px; margin-right: -13px; }
#board .btns > *{ padding: 13px; }
#board .btns button{ background: none; border: none; }
#board .btns button svg{ width: auto; height: auto; }
#board .btns button svg path{ stroke: rgba(21, 21, 21, 0.3); stroke-width: 1.5; transition: stroke 0.3s; }
#board .btns a{ display: inline-block; font-family: var(--engFont); font-size: 20px; font-weight: 500; color: rgba(21, 21, 21, 0.3); transition: color 0.3s; }

#board .board-wrap .slick-list{ margin-right: -20px; }
#board .board{ background: #F9F9F9; margin-right: 20px; position: relative; }
#board .board::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor); position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
#board .board a{ display: block; padding: 60px 40px; position: relative; z-index: 10; }
#board .board span{ font-family: var(--engFont); font-size: 17px; font-weight: 500; color: var(--blue); transition: color 0.4s 0.2s; }
#board .board h6, 
#board .board p{ display: -webkit-box; line-height: 1.6; white-space: normal; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; transition: color 0.4s; }
#board .board h6{ height: 3.2em; font-size: 30px; font-weight: 700; color: #151515; -webkit-line-clamp: 2; margin: 20px 0 75px; }
#board .board p{ height: 4.8em; font-size: 17px; font-weight: 500; color: #757575; word-break: break-word; -webkit-line-clamp: 3; }

@media screen and (hover: hover){
	#board .btns button:hover svg path{ stroke: #151515; }
	#board .btns a:hover{ color: #151515; }

	#board .board:hover::before{ transform: scaleX(1); }
	#board .board:hover span{ color: rgba(255, 255, 255, 0.5); transition-delay: unset; }
	#board .board:hover h6{ color: #FFF; }
	#board .board:hover p{ color: rgba(255, 255, 255, 0.7); }
}

@media screen and (max-width: 1700px){
	#board{ padding-bottom: 140px; }
	#board .flex-box{ margin-bottom: 30px; }
	#board .tab-menu ul li{ font-size: 20px; }

	#board .board a{ padding: 40px 30px; }
	#board .board span{ font-size: 16px; }
	#board .board h6{ font-size: 26px; margin: 10px 0 60px; }
}

@media screen and (max-width: 1280px){
	#board{ padding-bottom: 100px; }
	#board .flex-box{ margin-bottom: 20px; }
	#board .title-box{ margin-bottom: 40px; }

	#board .tab-menu ul{ margin: 0 -10px; }
	#board .tab-menu ul li{ font-size: 18px; padding: 0 10px; }
	#board .tab-menu ul li span{ padding: 7px 0; }

	#board .btns{ margin-bottom: 0; margin-right: -10px; }
	#board .btns > *{ padding: 10px; }
	#board .btns button svg{ width: 50px; }
	#board .btns a{ font-size: 18px; }

	#board .board a{ padding: 30px 25px; }
	#board .board span{ font-size: 15px; }
	#board .board h6{ font-size: 22px; margin: 5px 0 40px; }
	#board .board p{ font-size: 16px; }
}

@media screen and (max-width: 900px){
	#board .flex-box{ align-items: center; }
}

@media screen and (max-width: 700px){
	#board .board-wrap{ width: calc(100% + 20px); }
	#board .board{ width: 320px; }
}