/* common */
:root{
	--bottom: 60px;
}
body{ background: #000; }
.section{ position: relative; overflow: hidden; clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
.section video{
	min-height: 110vh;
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	width: 100vw;
	height: 60vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%) !important; 
	object-fit: cover;
	pointer-events: none;
}
.ptH{ padding-top: var(--headerH); }


/* floating */
#floating{ 
	--height: 60px;
}
#floating{ padding-bottom: 60px; text-align: right; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; pointer-events: none; }
#floating > div{ display: flex; justify-content: flex-end; position: relative; pointer-events: none; }
#floating > div:not(.plugin) > *{ margin-right: 20px; }
#floating > div:not(.plugin) > *:last-child{ margin-right: calc(var(--height) + 20px); }
#floating a{ height: var(--height); display: inline-flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.15); border-radius: 99px; font-family: var(--engFont); font-size: 22px; font-weight: 500; color: #FFF; padding: 0 30px; pointer-events: auto; position: relative; pointer-events: auto; }
#floating a i{ display: inline-block; width: 12px; height: 12px; background: url("/img/common/icon_floating_arrow.svg") no-repeat center center / contain; margin-left: 10px; }
#floating button{ width: var(--height); height: var(--height); background: linear-gradient(141deg, #E60012 12.98%, #AD0210 87.58%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; padding: 0; pointer-events: auto; }
#floating button i{ display: block; height: 100%; background: url("/img/common/icon_floating_plane.svg") no-repeat center center / contain; }
#floating.opacity{ opacity: 0; pointer-events: none; }
#floating.opacity a,
#floating.opacity button{ pointer-events: none; }

#plugin{ position: absolute !important; bottom: 0 !important; right: 20px !important; }
#ovPluginWrap .ov-tooltip{ margin-right: 0 !important; margin-bottom: 20px !important; pointer-events: auto; }
#ovPluginWrap .ov-iframe{ margin-right: 0 !important; margin-bottom: 20px !important; pointer-events: auto; }
#ovPluginWrap .ov-icon{ width: var(--height) !important; height: var(--height) !important; background: linear-gradient(141deg, #E60012 12.98%, #AD0210 87.58%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50% !important; margin: 0 !important; pointer-events: auto; }
#ovPluginWrap .ov-icon::before{ width: var(--height) !important; height: var(--height) !important; background: none !important; }
#ovPluginWrap .ov-icon::after{ content: ""; width: 100%; height: 100%; background: url("/img/common/icon_floating_ship.svg") no-repeat center center / contain; }

#ovPluginWrap .ov-icon-close::after{ opacity: 0; }


/* fp-nav  */
#fp-nav{ width: 1720px; max-width: calc(100% - 40px); margin-top: 0 !important; top: unset; bottom: 60px; left: 50%; transform: translateX(-50%); pointer-events: none; }
#fp-nav ul{ display: flex; justify-content: center; align-items: center; }
#fp-nav ul li{ width: unset !important; height: unset !important; cursor: pointer; pointer-events: auto; }
#fp-nav ul li{ margin: 0 0 0 15px !important; }
#fp-nav ul li:first-of-type{ margin-left: 0 !important; }
#fp-nav ul li:last-of-type{ display: none; }
#fp-nav ul li a{ width: auto !important; height: auto !important; display: flex; align-items: center; font-family: var(--engFont); font-size: 18px; font-weight: 400; color: #FFF; }
#fp-nav ul li span{ width: auto !important; height: auto !important; display: none; background: transparent !important; padding-right: 15px; margin: 0 !important; position: static !important; }
#fp-nav ul li i{ display: inline-block; width: 8px; height: 8px; background: rgba(217, 217, 217, 0.3); border-radius: 99px; }

#fp-nav ul li .active span{ display: block; }
#fp-nav ul li .active i{ width: 24px; background: #FFF; }

#fp-nav.opacity{ opacity: 0; pointer-events: none; }


/* cover */
.cover{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; padding-top: calc(var(--headerH) / 2); position: absolute; top: 0; left: 0; }
.cover h2{ font-family: var(--engFont); font-size: 12rem; font-weight: 500; transform: scale(0.8); transition: transform 1s; }
.cover h3{ font-size: 7rem; font-weight: 500; color: transparent; line-height: 1.5857; }


/* title-box */
.title-box span{ display: block; font-family: var(--engFont); font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; }
.title-box h3{ font-family: var(--engFont); font-size: 12rem; font-weight: 500; color: #FFF; margin-bottom: 60px; }
.title-box p{ font-size: 22px; font-weight: 300; color: rgba(255, 255, 255, 0.8); line-height: 1.1; }


/* viewmore */
.viewmore{ display: inline-flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.15); border: none; border-radius: 999px; font-family: var(--engFont); font-size: 22px; font-weight: 400; color: #FFF !important; -webkit-text-stroke: 0.015em transparent; -webkit-text-stroke: 0.015em transparent; padding: 15px 30px; transition: background 0.4s, color 0.4s, text-stroke-color 0.4s; }
.viewmore i{ display: flex; justify-content: center; align-items: center; background: transparent; margin-left: 10px; transition: background 0.4s, border-color 0.4s; }
.viewmore i::before{ content: ""; display: inline-block; width: 12px; height: 12px; background: url("/img/main/viewmore.svg") no-repeat center center / contain; filter: grayscale(1) brightness(6); -webkit-filter: grayscale(1) brightness(6); transition: filter 0.4s; }

.viewmore.border{ font-size: 17px; padding-block: 10px; padding-right: 10px; }
.viewmore.border i{ width: 40px; height: 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; margin-left: 15px; }

@media screen and (hover: hover) and (pointer: fine){
	/* viewmore */
	.viewmore:hover{ background: #FFF; color: var(--mainColor) !important; text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); }
	.viewmore:hover i::before{ filter: unset; -webkit-filter: unset; }

	.viewmore.border:hover{ color: #111 !important; text-stroke-color: #111; -webkit-text-stroke-color: #111; }
	.viewmore.border:hover i{ background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); }
	.viewmore.border:hover i::before{ filter: grayscale(1); -webkit-filter: grayscale(1); }
}

@media screen and (max-height: 800px){
	/* common */
	.ptH{ display: none; }

	/* cover */
	.cover{ padding-top: 0; }
}

@media screen and (max-width: 1700px){
	/* floating */
	#floating{ 
		--height: 55px;
	}
	#floating{ padding-bottom: 40px; }
	#floating a{ font-size: 20px; padding: 0 25px; }
	#floating a i{ width: 10px; height: 10px; }

	/* fp-nav  */
	#fp-nav{ bottom: 40px; }
	#fp-nav ul li a{ font-size: 17px; }

	/* cover */
	.cover h2{ font-size: 10rem; }
	.cover h3{ font-size: 6.5rem; }

	/* title-box */
	.title-box span{ font-size: 18px; margin-bottom: 20px; }
	.title-box h3{ font-size: 10rem; margin-bottom: 40px; }
	.title-box p{ font-size: 20px; }

	/* viewmore */
	.viewmore{ font-size: 20px; padding: 12px 25px; }

	.viewmore.border i{ width: 37px; height: 37px; }
}

@media screen and (max-width: 1280px){
	/* floating */
	#floating{ 
		--height: 50px;
	}
	#floating{ padding-bottom: 30px; }
	#floating > div:not(.plugin) > *{ margin-right: 10px; }
	#floating > div:not(.plugin) > *:last-child{ margin-right: calc(var(--height) + 10px); }
	#floating a{ font-size: 18px; padding: 0 20px; }
	#floating a i{ width: 10px; height: 10px; }

	/* fp-nav  */
	#fp-nav{ bottom: 30px; }
	#fp-nav ul li a{ font-size: 16px; }

	/* cover */
	.cover h2{ font-size: 8rem; }
	.cover h3{ font-size: 6rem; }

	/* title-box */
	.title-box span{ font-size: 16px; margin-bottom: 15px; }
	.title-box h3{ font-size: 9rem; margin-bottom: 30px; }
	.title-box p{ font-size: 18px; }

	/* viewmore */
	.viewmore{ font-size: 18px; padding: 10px 20px; }
	.viewmore.border i{ margin-left: 10px; }
	.viewmore i::before{ width: 10px; height: 10px; }

	.viewmore.border{ padding-block: 7px; padding-right: 7px; }
	.viewmore.border i{ width: 35px; height: 35px; }
}

@media screen and (max-width: 1200px){
	/* common */
	.ptH{ display: none; }

	/* cover */
	.cover{ padding-top: 0; }
}


/* visual */
#visual::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, #000, transparent); opacity: 0.2; position: absolute; top: 0; left: 0; z-index: 10; }

#visual .text-box{ height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 100; overflow: hidden; }
#visual .txt h2{ font-family: var(--engFont); font-size: 12rem; font-weight: 500; color: #FFF; }
#visual .txt h2 em{ margin-right: 25px; }
#visual .txt h2 span{ display: inline-block; transform: translateY(-100%); opacity: 0; }

#visual .txt.animated h2 span{ animation: letterFadeDown 1.5s both; }

#visual .scrolldown{ padding-bottom: 160px; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; }

@media screen and (max-height: 800px){
	#visual{ height: 100vh; }
}

@media screen and (max-width: 1700px){
	#visual .txt h2{ font-size: 10rem; }
	#visual .txt h2 em{ margin-right: 20px; }

	#visual .scrolldown{ padding-bottom: 130px; }
}

@media screen and (max-width: 1280px){
	#visual .txt h2{ font-size: 8rem; }
	#visual .txt h2 em{ margin-right: 15px; }

	#visual .scrolldown{ padding-bottom: 100px; }
}

@media screen and (max-width: 1200px){
	#visual{ height: 100vh; }
}

@media screen and (max-width: 900px){
	#visual .txt h2 em{ margin-right: 10px; }
}


/* business */
#business{
	--gap: 160px;
}
#business *{ color: #FFF; }
#business .inner{ height: 100%; display: flex; flex-direction: column; justify-content: center; background: url("/img/main/business_bg.jpg") no-repeat center center / cover; opacity: 1 !important; clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); transition: clip-path 2s 5s; }

#business .cover01{ background: #000; opacity: 1 !important; }
#business .cover01 h3 span{ background: linear-gradient(to right, #FFF 50%, rgba(255, 255, 255, 0.3) 50%); color: transparent; background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: 100%; transition: background-position 5s; }
#business .cover02{ opacity: 1; transition: opacity 1s 6s; }
#business .cover02 h2{ transition-delay: 5s; }  

#business .fadeUp{ opacity: 0; transform: translateY(var(--aosP)); transition: opacity 1s 7s, transform 1s 7s; }
#business .business-wrap{ display: flex; }
#business .business-wrap::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; visibility: visible; transition: visibility 0.3s 7.5s; }
#business .business-wrap .slick-track{ display: flex; }
#business .business{ width: calc((100% - 20px) / 5); min-height: 540px; margin-right: 5px; position: relative; z-index: 10; overflow: hidden; float: unset; transition: width 0.5s; }
#business .business:last-of-type{ margin-right: 0; }
#business .business a{ height: 100%; display: block; padding: 50px; }
#business .business .bg{ width: calc(100% + var(--gap)); height: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: width 0.5s; }
#business .business .bg img{ width: 100%; height: 100%; object-fit: cover; }
#business .business .dl{ height: 100%; display: flex; flex-direction: column; justify-content: flex-end; clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#business .business .dl div{ position: relative; }
#business .business dl{ font-weight: 400; position: relative; }
#business .business dl:first-of-type{ opacity: 0; pointer-events: none; } 
#business .business dl:last-of-type{ position: absolute; top: 0; left: 0; right: 0; transform: translateY(0); will-change: top, transform; transition: top 0.5s, transform 0.5s; }
#business .business dl dt{ --after: 5.2rem; font-size: 32px; transition: font-size 0.5s; }
#business .business dl dd{ width: calc(100% + var(--gap)); font-size: 20px; color: rgba(255, 255, 255, 0.8); margin-top: 25px; transition: width 0.5s; }

#business .cover01.aos-animate h3 span{ background-position: 0; }
#business .inner.aos-animate{ clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%); }
#business .inner.aos-animate .fadeUp{ opacity: 1; transform: translateY(0); }
#business .inner.aos-animate .business-wrap::after{ visibility: hidden; }
#business .inner.aos-animate .cover02{ opacity: 0; }
#business .inner.aos-animate .cover02 h2{ transform: scale(1); }


#business .slide-info{ display: none; align-items: center; margin-top: 20px; }
#business .bar{ flex: 1 0 auto; height: 2px; background: rgba(255, 255, 255, 0.6); border-radius: 99px; }
#business .bar div{ width: 0; height: 4px; background: #FFF; border-radius: 99px; transform: translateY(-1px); }

#business .btns{ display: flex; margin-left: 20px; }
#business .btns button{ width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; position: relative; }
#business .btns button:not(:last-of-type){ margin-right: 10px; }
#business .btns button::before{ content: ""; width: 100%; height: 100%; background: #FFF; border-radius: 50%; position: absolute; top: 0; left: 0; transform: scale(0); transition: transform 0.3s; }
#business .btns button i{ width: 20px; height: 20px; display: inline-block; transition: filter 0.3s; }
#business .btns button.prev i{ background: url("/img/main/icon_prev.svg") no-repeat center center / contain; }
#business .btns button.next i{ background: url("/img/main/icon_next.svg") no-repeat center center / contain; }

@media screen and (hover: hover) and (pointer: fine){
	#business.hover .business{ width: calc(((100% - 20px) / 5) - (var(--gap) / 4)); }
	#business.hover .business:hover{ width: calc(((100% - 20px) / 5) + var(--gap)) !important; }
	#business.hover .business:hover .bg{ width: 100%; }
	#business.hover .business:hover dl:last-of-type{ top: 100%; transform: translateY(-100%); }
	#business.hover .business:hover dl dt{ font-size: var(--after); }
	#business.hover .business:hover dl dd{ width: 100%; }

	#business .btns button:hover::before{ transform: scale(1); }
	#business .btns button:hover i{ filter: invert(1); -webkit-filter: invert(1); }
}

@media screen and (max-height: 800px){
	#business .inner{ padding: 100px 0; }
}

@media screen and (max-width: 1700px){
	#business{
		--gap: 120px;
	}
	#business .business a{ padding: 40px; }
	#business .business dl dt{ --after: 5rem; font-size: 28px; }
	#business .business dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#business{
		--gap: 80px;
	}
	#business .business a{ padding: 30px; }
	#business .business dl dt{ font-size: 26px; }
	#business .business dl dd{ font-size: 17px; margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	#business .inner{ padding: 100px 0; }

	#business .business, 
	#business.hover .business, 
	#business.hover .business:hover{ width: 330px !important; }

	#business .business{ min-height: 450px; display: flex; flex-direction: column; }
	#business .business .bg{ width: 100%; }
	#business .business a, 
	#business .business .dl{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; }
	#business .business dl dt{ --after: 26px; }
	#business .business dl dd{ width: 100%; }

	#business .business.slick-active dl, 
	#business .business.slick-now dl{ top: 100%; transform: translateY(-100%); }

	#business .slide-info{ display: flex; }
}

@media screen and (max-width: 900px){
	#business .business dl dt{ --after: 23px; font-size: 23px; }
	#business .business dl dd{ margin-top: 10px; }
}


/* network */
#network{
	--side: 400px;
	--x: 20px;
}
#network .cover{ opacity: 1 !important; }
#network .cover h2{ color: #FFF; }
#network .cover + .w1820{height: 100%; padding-block: calc(var(--headerH) + 15px) 50px; } 

#network .content{ height: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 20px; overflow: hidden; padding: 70px; position: relative; z-index: 10; }
#network .content video{ min-width: unset; min-height: unset; width: 100%; height: 100%; object-fit: cover; }
#network .inner{ position: relative; }

#network .center{ width: calc(100% - (var(--side) * 2)); padding: 0 130px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#network .center .circle{ position: relative; padding-bottom: 100%; }
#network .center .circle::before, 
#network .center .circle::after{ content: ""; border-radius: 50%; opacity: 0.6; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); box-sizing: border-box; pointer-events: none; }
#network .center .circle::before{ width: 100%; height: 100%; border: 2px dashed #FFF; animation: rotate360 25s linear infinite; }
#network .center .circle::after{ width: 200%; height: 200%; border: 2px dashed rgba(255, 255, 255, 0.3); animation: rotate360 50s linear infinite; }

#network .center .text{ text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#network .center .text > i{ height: 30px; display: block; background: url("/img/main/icon_marker.svg") no-repeat center center / contain; }
#network .center .text h6{ font-family: var(--engFont); font-size: 26px; font-weight: 400; color: #FFF; line-height: 1.5; margin: 30px 0 40px; }
#network .center .text a{ margin: 0 auto; }

#network .grid-box{ display: grid; grid-template-columns: var(--side) calc(100% - (var(--side) * 2)) var(--side); margin: -17px 0; position: relative; z-index: 100; pointer-events: none; }
#network .grid-box::after{ content: ""; width: 100%; height: 100%; visibility: visible; position: absolute; top: 0; left: 0; transition: visibility 0.3s 4s; }
#network .grid-box > *:nth-of-type(odd){ grid-column: 1 / 2; }
#network .grid-box > *:nth-of-type(even){ grid-column: 3 / 4; }
#network dl{ display: flex; justify-content: space-between; background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 30px; padding-bottom: 10px; margin: 17px 0; opacity: 1 !important; transform: translateX(0); pointer-events: auto; transition: background 0.4s, transform 0.4s; }
#network dl dt{ font-family: var(--engFont); font-size: 20px; font-weight: 400; color: #FFF; -webkit-text-stroke: 0.02em transparent; -webkit-text-stroke: 0.02em transparent; transition: color 0.4s, text-stroke-color 0.4s; }
#network dl dd{ flex: 1 0 auto; font-family: var(--nanum); font-size: 10rem; font-weight: 600; color: rgba(255, 255, 255, 0.3); line-height: 1.3; text-align: right; margin-top: 10px; overflow: hidden; position: relative; transition: color var(--aosT) calc(var(--delay) + 3700ms); }
#network dl dd *{ line-height: inherit; letter-spacing: -0.04em; }
#network dl dd em{ color: transparent; }
#network dl dd .num{ display: flex; position: absolute; top: 2.6em; right: 0; transform: translateY(-100%); }
#network dl dd .num div{ display: flex; flex-direction: column; align-items: flex-end; position: relative; top: 0; transform: translateY(0); }
#network dl dd .num span{ transition: color 0.4s; }


#network .cover.aos-animate h2{ transform: scale(1); }

#network .aos-animate .grid-box::after{ visibility: hidden; }
#network dl.aos-animate dd{ color: #FFF; }
#network dl.aos-animate dd .num{ animation: numCount01 1s 1.4s both; }
#network dl.aos-animate dd .num div{ animation: numCount02 1.3s calc(var(--delay) + 2700ms) cubic-bezier(0.25, 1.3, 0.5, 1) both; }

@media screen and (hover: hover) and (pointer: fine){
	#network dl:nth-of-type(odd):hover{ transform: translateX(var(--x)); }
	#network dl:nth-of-type(even):hover{ transform: translateX(calc(var(--x) * -1)); }
	#network dl:hover{ background: #FFF; }
	#network dl:hover dt{ color: #111; text-stroke-color: #111; -webkit-text-stroke-color: #111; }
	#network dl:hover dd span{ color: #000 !important; }
}

@media screen and (max-height: 800px){
	#network{ padding: 20px 0; }
	#network .cover + .w1820{ padding-block: 30px; }
}

@media screen and (max-width: 1700px){
	#network .cover + .w1820{ padding-bottom: 30px; }
	#network .content{ padding: 50px; }

	#network .center{ padding: 0 80px; }
	#network .center .text h6{ font-size: 23px; margin: 20px 0 30px; }

	#network dl{ padding: 25px; }
	#network dl dt{ font-size: 18px; }
}

@media screen and (max-width: 1400px){
	#network{
		--side: 350px;
	}
	#network .center{ padding: 0 30px; }
}

@media screen and (max-width: 1280px){
	#network{
		--side: 300px;
	}
	#network .cover + .w1820{ padding-bottom: 20px; }
	#network .content{ padding: 30px; }

	#network .center .circle::after{ width: 200%; height: 200%; }
	#network .center .text h6{ font-size: 21px; margin: 15px 0 25px; }

	#network dl{ padding: 20px; }
	#network dl dt{ font-size: 17px; }
}

@media screen and (max-width: 1200px){
	#network{ padding: 20px 0; }
	#network .cover + .w1820{ padding-block: 20px; }
	#network .content::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; }

	#network .center{ width: 370px; position: static; transform: unset; margin: 0 auto 30px; }

	#network .grid-box{ grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; }
	#network dl{ grid-column: unset !important; flex-direction: column; transform: unset !important; margin: 10px; }
}

@media screen and (max-width: 900px){
	#network .content{ padding: 40px 20px 0; }
	#network .grid-box{ grid-template-columns: repeat(2, 50%); }
	#network dl{ padding: 15px; }
}


/* tracking */
@media screen and (max-height: 800px){
	#tracking{ min-height: 650px; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; }
	#tracking video{ min-width: 100%; min-height: 100%; }
}

@media screen and (max-width: 1200px){
	#tracking{ min-height: 650px; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; }
	#tracking video{ min-width: 100%; min-height: 100%; }
}


/* insight */
#insight{
	--gap: 30px;
	--defalut: 380px;
	--active: 540px;
}
#insight::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity var(--aosT); }
#insight video{ opacity: 1 !important; }
#insight .grid-box{ display: grid; grid-template-columns: 650px calc(100% - 650px); position: relative; z-index: 100; }
#insight .title-box{ padding-top: 30px; }
#insight .slide-box{ position: relative; }

#insight .slide-info{ display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; right: 0; z-index: 100; }
#insight .slide-info span{ font-family: var(--engFont); font-size: 19px; font-weight: 400; color: #FFF; }

#insight .slide-info .dots{ margin: 0 20px; }
#insight .slide-info .dots ul{ display: flex; align-items: center; }
#insight .slide-info .dots ul li{ width: 5px; height: 5px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer; }
#insight .slide-info .dots ul li.on{ width: 9px; height: 9px; background: #FFF; }
#insight .slide-info .dots ul li:not(:last-of-type){ margin-right: 10px; }
#insight .slide-info .dots ul li button{ display: none; }

#insight .btns{ display: flex; margin-left: 30px; }
#insight .btns button{ width: 55px; height: 55px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; position: relative; }
#insight .btns button:not(:last-of-type){ margin-right: 10px; }
#insight .btns button::before{ content: ""; width: 100%; height: 100%; background: #FFF; border-radius: 50%; position: absolute; top: 0; left: 0; transform: scale(0); transition: transform 0.3s; }
#insight .btns button i{ width: 20px; height: 20px; display: inline-block; transition: filter 0.3s; }
#insight .btns button.prev i{ background: url("/img/main/icon_prev.svg") no-repeat center center / contain; }
#insight .btns button.next i{ background: url("/img/main/icon_next.svg") no-repeat center center / contain; }

#insight .insight-wrap{ width: calc(((100vw - 1720px) / 2) + 100%); }
#insight .insight-wrap .slick-list{ margin-right: calc(var(--gap) * -1); }
#insight .insight-wrap .slick-track{ display: flex; align-items: flex-end; }

#insight .insight{ width: var(--active); margin-right: var(--gap); transform: translateX(calc((var(--active) - var(--defalut)) * -1)); float: unset; pointer-events: none; transition: transform 0.7s; }
#insight .insight a{ width: var(--defalut); display: block; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 20px; transition: width 0.7s, padding 0.7s; pointer-events: auto; }
#insight .insight figure{ display: block; border-radius: 10px; position: relative; padding-bottom: 66.57%; overflow: hidden; }
#insight .insight figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#insight .insight .txt{ margin-top: 30px; }
#insight .insight .txt h6{ font-size: 20px; font-weight: 400; color: #FFF; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 20px; transition: font-size 0.7s; }
#insight .insight .txt p{ height: 3.2em; display: -webkit-box; font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.8); line-height: 1.6; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 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); transition: transform 0.4s, clip-path 0.4s; }
#insight .insight .txt span{ display: block; font-family: var(--engFont); font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, 0.5); margin-top: 0; transition: margin 0.7s; }

#insight .insight.slick-prev,
#insight .insight.slick-now, 
#insight .insight.slick-active{ transform: translateX(0); }
#insight .insight.slick-prev a,
#insight .insight.slick-now a, 
#insight .insight.slick-active a{ width: 100%; padding: 30px; margin-right: 0; }
#insight .insight.slick-prev .txt h6, 
#insight .insight.slick-now .txt h6, 
#insight .insight.slick-active .txt h6{ font-size: 26px; }
#insight .insight.slick-prev .txt p, 
#insight .insight.slick-now .txt p, 
#insight .insight.slick-active .txt p{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
#insight .insight.slick-prev .txt span, 
#insight .insight.slick-now .txt span, 
#insight .insight.slick-active .txt span{ margin-top: 75px; }

#insight .insight.slick-now + .insight, 
#insight .insight.slick-active + .insight{ transform: translateX(0); }

#insight .link{ margin-top: 25px; }
#insight .roundBtn{ color: rgba(255, 255, 255, 0.8); }


#insight.on::before{ opacity: 1; }

@media screen and (hover: hover) and (pointer: fine){
	#insight .btns button:hover::before{ transform: scale(1); }
	#insight .btns button:hover i{ filter: invert(1); -webkit-filter: invert(1); }
}

@media screen and (max-height: 800px){
	#insight{ padding: 80px 0; }
	#insight::before{ opacity: 1; }
}

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

@media screen and (max-width: 1700px){
	#insight{
		--defalut: 340px;
		--active: 450px;
	}
	#insight .grid-box{ grid-template-columns: 500px calc(100% - 500px); }
	#insight .slide-info span{ font-size: 18px; }
	#insight .btns button{ width: 50px; height: 50px; }

	#insight .insight.slick-prev .txt span, 
	#insight .insight.slick-now .txt span, 
	#insight .insight.slick-active .txt span{ margin-top: 60px; }
	#insight .insight.slick-prev .txt h6, 
	#insight .insight.slick-now .txt h6, 
	#insight .insight.slick-active .txt h6{ font-size: 24px; }
}

@media screen and (max-width: 1280px){
	#insight{
		--defalut: 300px;
		--active: 400px;
	}

	#insight .grid-box{ grid-template-columns: 450px calc(100% - 450px); }
	#insight .slide-info span{ font-size: 17px; }
	#insight .btns button{ width: 45px; height: 45px; }

	#insight .insight .txt{ margin-top: 20px; }
	#insight .insight .txt h6{ font-size: 19px; margin-bottom: 10px; }
	#insight .insight .txt p{ font-size: 17px; }
	#insight .insight .txt span{ font-size: 16px; }

	#insight .insight.slick-prev a,
	#insight .insight.slick-now a, 
	#insight .insight.slick-active a{ padding: 20px; }
	#insight .insight.slick-prev .txt h6, 
	#insight .insight.slick-now .txt h6, 
	#insight .insight.slick-active .txt h6{ font-size: 22px; }
	#insight .insight.slick-prev .txt span, 
	#insight .insight.slick-now .txt span, 
	#insight .insight.slick-active .txt span{ margin-top: 40px; }
}

@media screen and (max-width: 1200px){
	#insight{
		--gap: 20px;
		--defalut: 300px;
		--active: 300px;
	}
	#insight{ padding: 80px 0; }
	#insight::before{ opacity: 1; }
	#insight .grid-box{ grid-template-columns: repeat(1, 100%); }
	#insight .title-box{ padding-top: 0; padding-bottom: 30px; }
	#insight .title-box h3{ margin-bottom: 20px; }
	#insight .title-box br{ display: none; }

	#insight .slide-box{ display: flex; flex-direction: column-reverse; }
	#insight .slide-info{ position: static; margin-top: 15px; }

	#insight .insight{ transform: translateX(0); }
	#insight .insight a{ padding: 15px; }
	#insight .insight .txt h6{ font-size: 18px; }
	#insight .insight .txt p{ font-size: 16px; }
	#insight .insight .txt p{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	#insight .insight .txt span{ font-size: 15px; margin-top: 20px; }

	#insight .insight.slick-prev a,
	#insight .insight.slick-now a, 
	#insight .insight.slick-active a{ padding: 15px; }
	#insight .insight.slick-prev .txt h6, 
	#insight .insight.slick-now .txt h6, 
	#insight .insight.slick-active .txt h6{ font-size: 18px; }
	#insight .insight.slick-prev .txt span, 
	#insight .insight.slick-now .txt span, 
	#insight .insight.slick-active .txt span{ margin-top: 20px; }
}


/* contact */
#contact{ text-align: right; }
#contact video{ object-position: left top; }
#contact::after{ content: ""; width: 100%; height: 30%; background: linear-gradient(to bottom, transparent, #000); position: absolute; bottom: 0; left: 0; }

#contact .title-box{ position: relative; z-index: 100; }
#contact .viewmore{ font-size: 22px; }
#contact .viewmore.border i{ width: 50px; height: 50px; }

@media screen and (max-height: 800px){
	#contact{ min-height: 600px; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; }
	#contact video{ min-height: 600px; }
}

@media screen and (max-width: 1700px){
	#contact .viewmore{ font-size: 20px; }
	#contact .viewmore.border i{ width: 45px; height: 45px; }
}

@media screen and (max-width: 1280px){
	#contact .viewmore{ font-size: 18px; }
	#contact .viewmore.border i{ width: 40px; height: 40px; }
}

@media screen and (max-width: 1200px){
	#contact{ min-height: 650px; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; }
	#contact::after{ height: 20%; }
	#contact video{ min-height: 650px; }
}


/* footer */
.footer{ overflow: visible; }
.footer::before{ content: ""; width: 100%; height: 20px; background: #000; position: absolute; top: 0; left: 0; transform: translateY(-50%); }
.footer .pt{ padding-top: 60px; position: relative; }
.footer .pt::before{ content: ""; max-width: 1720px; width: calc(100% - 40px); height: 1px; background: rgba(255, 255, 255, 0.15); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

@media screen and (max-width: 1280px){
	.footer .pt{ padding-top: 30px; }
}