@charset "utf-8";

@keyframes fadeInUp{
  0% {transform: translateY(100px) translateX(-50%); opacity: 0;}
  100% {transform: translateY(0) translateX(-50%); opacity: 1;}  
}

@keyframes fadeInUp2{
  0% {transform: translateY(100px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}  
}

@keyframes scr {
  0%		{transform: translate(0, 0) rotate(.001deg); opacity: 0;}
  40%	{opacity: 1;}
  80%	{transform: translate(0, 50px) rotate(.001deg); opacity: 0;}
  100%	{opacity: 0;}
}

@keyframes move_bg {
	from {-ms-transform:translate(-50%, -50%) scale(1.1,1.1); -o-transform:translate(-50%, -50%) scale(1.1,1.1); -moz-transform:translate(-50%, -50%) scale(1.1,1.1); -webkit-transform:translate(-50%, -50%) scale(1.1,1.1); transform:translate(-50%, -50%) scale(1.1,1.1);}
	to {-ms-transform:translate(-50%, -50%) scale(1,1); -o-transform:translate(-50%, -50%) scale(1,1); -moz-transform:translate(-50%, -50%) scale(1,1); -webkit-transform:translate(-50%, -50%) scale(1,1); transform:translate(-50%, -50%) scale(1,1);}
}

/* 비주얼 슬라이더 */
.slick-track						{will-change: transform;}

.main_visual						{position:relative; width: 100%; height: 100dvh; overflow:hidden; background:#000}
.main_silder .slider				{position:relative; width: 100dvw; height: 100dvh; overflow: hidden; transition:0.2s; }
.main_silder .bg					{position:absolute; top:50%; left:50%; width: 100dvw; height: 100dvh; z-index:-1; -ms-transform:translate(-50%, -50%) scale(1.1,1.1); -o-transform:translate(-50%, -50%) scale(1.1,1.1); -moz-transform:translate(-50%, -50%) scale(1.1,1.1) ; -webkit-transform:translate(-50%, -50%) scale(1.1,1.1); transform:translate(-50%, -50%) scale(1.1,1.1);}
.main_silder .video_bg				{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); object-fit: cover; width: 100dvw; height: 100dvh; z-index:-1;}
.main_silder .title					{position:absolute; top:40%; left:50%; transform:translateX(-50%); width:100%; max-width:1680px; padding:0 40px; color:#fff; }
.main_silder .active-item .bg		{animation:move_bg 5s 1.5s ease-in-out alternate ; animation-fill-mode:both;}
.main_silder .slick-active .title	{animation: fadeInUp 1.5s ;}
.main_silder .title .tt				{font-size:clamp(28px, 70px, 5vw); font-weight:800; line-height:1.2; margin-bottom:20px;}
.main_silder .title .st				{font-size:26px; font-weight:400; color:rgba(255, 255, 255, 0.7)}
.main_silder .title .key			{font-size:clamp(24px, 30px, 2.5vw); font-weight:600; margin-top:30px; display:flex; flex-wrap:wrap; gap:50px }
.main_silder .title .key a			{display:inline-block; color:rgba(255, 255, 255, 0.7);}
.main_silder .title .key a:focus,
.main_silder .title .key a:hover	{color:rgba(255, 255, 255, 1)}
.main_silder .slick-active .key a:nth-child(1){animation: fadeInUp2 0.8s ease-in-out;}
.main_silder .slick-active .key a:nth-child(2){animation: fadeInUp2 1.2s ease-in-out ;}
.main_silder .slick-active .key a:nth-child(3){animation: fadeInUp2 1.6s ease-in-out ;}
.main_silder .slick-active .key a:nth-child(4){animation: fadeInUp2 2.1s ease-in-out ;}

.main_silder .count_wrap		{margin-top:50px;}
.main_silder .count				{display:flex; color:rgba(255, 255, 255, 0.8); gap:80px;}
.main_silder .count .tit		{font-size:22px; font-weight:600;}
.main_silder .count .tit span	{font-size:18px; font-weight:100; display:inline-block;}
.main_silder .count .num		{font-size:clamp(38px, 45px, 3vw); font-weight:600; font-family: "Lexend", sans-serif;  opacity:0; transition-delay: 1.0s}
.main_silder .slick-active .count .num{opacity:1;}
.main_silder .count .num::after{content:'+'; font-size:clamp(28px, 42px, 3vw);; vertical-align:top;}
.main_silder .count .num::before{content:'연 '; font-size:18px; font-weight:400;}
.main_silder .count li				{width:170px}
.main_silder .count li:nth-child(2){width:200px;}
.main_silder .count li:nth-child(3){width:230px;}

.main_silder .play_pause			{position:absolute; bottom:100px; width:1600px; left:50%; transform:translateX(-50%); }
.main_silder .slick-dots			{bottom:100px}

.main_silder .slick-dots 				{text-align:left; left:50%; transform:translateX(-50%); width:100%; max-width:1680px; padding:0 50px;}
.main_silder .slick-dots li 			{position:relative; display: inline-block; width: 10px; height: 10px; margin:0 19px; -webkit-transition: all 0.3s ease; border-radius:50%; background:#adadad;}
.main_silder .slick-dots li:first-child {margin-left:0;}
.main_silder .slick-dots li:last-child 	{margin-right:0;}
.main_silder .slick-dots li a 			{position: relative; overflow: visible; display: block; width: 100%; height: 100%;}
.main_silder .slick-dots li a:hover 			{opacity:1; transition:0.5s;}
.main_silder .slick-dots li.slick-active 		{width: 14px; height: 14px;  background:var(--Primary); top:1px;}
.main_silder .slick-dots li.slick-active a 		{opacity:1;}
.main_silder .slick-dots .percent_circle	 	{position: absolute; display: block; text-align: center; width:40px; height: 40px; top: -13px; left: -13px;}
.main_silder .slick-dots .percent_circle svg 	{transform: rotate(-90deg); transform-origin: center center 0px;}
.main_silder .slick-dots li .percent_circle svg {opacity: 0; transition: all .5s;}
.main_silder .slick-dots li.slick-active .percent_circle svg {opacity: 1;} 

.main_silder .btn			{margin-top:60px; display:flex; flex-wrap:wrap; gap:10px;}
.main_silder .btn a			{display:inline-block; border:solid 1px rgba(255, 255, 255, 0.1); position:relative; padding:15px 30px; border-radius:50px; color:#fff; font-size:20px; font-weight:300; min-width:240px; text-align:center; transition:0.2s;}
.main_silder .btn a	img		{display:inline-block; margin-right:-10px;}
.main_silder .btn a:hover,
.main_silder .btn a:focus	{border-color:rgba(255, 255, 255, 1); background:rgba(255, 255, 255, 0.05)}

/* 기본 실행 상태 */
.main_silder .slick-dots li.slick-active .state_bar  { 
  stroke-dasharray: 249; 
  animation: progress 6.3s linear forwards; 
  animation-play-state: running; 
}

/* 멈춤 상태일 때 애니메이션 정지 */
.main_silder.paused .slick-dots li.slick-active .state_bar {
  animation-play-state: paused;
}
@keyframes progress { to { stroke-dashoffset: 0px; } }
@-moz-keyframes progress { to { stroke-dashoffset: 0px; }}
@-webkit-keyframes progress { to { stroke-dashoffset: 0px; }}

.main_silder .slick-dots li.btn-play {background:none;}
.main_silder .slick-dots li.btn-play a {opacity:1;}
.main_silder .slick-dots li.btn-play a img.pause { display: block;}
.main_silder .slick-dots li.btn-play a img.play {display:none;}



/* 비주얼 우측 바로가기 버튼 */
.main_visual .vs_btn					{backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); position:absolute; z-index:1; right:0; top:80px; width:25dvw; height:calc(100dvh - 80px); display:flex; flex-direction: column;}
.main_visual .vs_btn li					{height:100%; border-left:solid 1px #ffffff26;}
.main_visual .vs_btn li:not(:first-child) a	{border-top:solid 1px #ffffff26}
.main_visual .vs_btn li:first-child a	{border-top:solid 1px transparent}
.main_visual .vs_btn a					{display:flex; flex-direction: column; justify-content: center; height:100%; padding:50px; position:relative;  color:#fff; transition: 0.2s;}
.main_visual .vs_btn:has(a:hover) a,
.main_visual .vs_btn:has(a:focus) a		{opacity:0.5}

.main_visual .vs_btn li a:hover,
.main_visual .vs_btn li a:focus			{opacity:1; padding-left:70px; box-shadow:4px 4px 10px rgba(0, 0, 0, 0.2) }
.main_visual .vs_btn a:before			{position:absolute; content:''; z-index:0; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.1); transition: 0.2s;}
.main_visual .vs_btn li a:hover:before,
.main_visual .vs_btn li a:focus:before	{opacity:1;background:rgba(255, 255, 255, 0.25);  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -webkit-mask-size: 200%; animation: shine 2s infinite;}

.main_visual .vs_btn li a:after			{position:absolute; content:''; width:40px; height:40px; right:40px; top:40px; transform:translate(0, 0); background: url('/kpc/_img/main/vs_arr.svg') no-repeat 50% 50%; opacity:0.3; transition: 0.2s; }
.main_visual .vs_btn li a:hover:after,
.main_visual .vs_btn li a:focus:after	{opacity:1; animation: arrowBurst 1.2s ease-in-out infinite;}	

.main_visual .vs_btn a strong			{position:relative; z-index:1; display:block; font-size:24px; font-weight:600; transition: 0.2s;}
.main_visual .vs_btn a span				{position:relative; z-index:1; font-size:24px; font-weight:100; margin-top:5px;}

.main_visual .vs_btn a.etc strong		{font-size:35px;}
.main_visual .vs_btn a.etc span			{margin:0 0 0 2px;}

.main_visual .vs_btn li img				{vertical-align:-12px;}

@keyframes arrowBurst {
	0% {
		transform:translate(0, 0);
	}
	50% {
		transform:translate(5px, -5px);
	}
	100% {
		transform:translate(0, 0);
	}
}

@-webkit-keyframes shine {
	from {
		-webkit-mask-position: 150%;
	}
	to {
		-webkit-mask-position: -50%;
	}
}

.scroll_ani				{position:absolute; bottom:20px; right:calc(20dvw + 20px); writing-mode: vertical-rl;text-orientation: sideways; color:#fff; font-weight:200; display:flex; align-items: center; gap:8px;}
.scroll_ani .scroll		{width:2px; height:67px; background:rgba(255, 255, 255, 0.1); dipplay:block; position:relative; bottom:0;}
.scroll_ani .bar		{display:block; width:100%; height:20px; background:#fff; position:absolute;-webkit-animation: scr 2.5s infinite; animation: scr 2.5s infinite;}

/* @media only screen and (max-width: 1760px) {
	.main_silder .title					{padding:0 40px;}
} */

@media only screen and (max-width: 1500px) {
	.main_silder .count					{gap:60px}
	.main_silder .count li				{width:160px;}
	.main_silder .count li:nth-child(2),
	.main_silder .count li:nth-child(3)	{width:190px;}
	
	.main_visual .vs_btn a			{padding:40px;}
	.main_visual .vs_btn a strong	{font-size:24px;}
	.main_visual .vs_btn a span		{font-size:22px}
	.main_visual .vs_btn li img		{height:40px}
}

/* Tablet */
@media only screen and (max-width: 1024px) {
	.main_silder .title .st			{font-size:22px;}
	.main_silder .title .key		{margin-top:20px;}
	
	
	.main_visual .vs_btn			{opacity: 1 !important; transform: translateZ(0) !important; width:100dvw; height:160px; left:0; top:revert; bottom:0; flex-direction: row; padding:0;}
	.main_visual .vs_btn li			{flex:1;}
	.main_visual .vs_btn li:first-child{border-left:0;}
	.main_visual .vs_btn li a		{border-top:solid 1px #ffffff26 !important; padding:50px 30px 30px !important;}
	.main_visual .vs_btn a,
	.main_visual .vs_btn li a:hover,
	.main_visual .vs_btn li a:focus	{background:url('/kpc/_img/main/vs_arr.svg') no-repeat top 20px right 20px/18px; }
	.main_visual .vs_btn a strong	{font-size:18px;}
	.main_visual .vs_btn a span		{font-size:20px}

	.main_visual .vs_btn a.etc strong		{font-size:27px; margin-top: -7px;}

	.main_visual .vs_btn a:after	{display:none;}
	.main_visual .vs_btn li img		{height:34px;margin-top: -6px; vertical-align: top;}
	
	.main_silder .title				{top:calc(45% - 150px); padding:0 25px;}
	.main_silder .slick-dots 		{bottom:230px; padding:0 25px;}
	
	.main_silder .btn			{margin-top:50px;}
	.main_silder .btn a			{font-size:17px; min-width:220px;}

	.scroll_ani						{right:20px; bottom:180px; overflow:hidden;}
}		

/* Mobile */
@media only screen and (max-width: 720px) {
	.main_silder .title				{padding:0 15px; top:calc(38% - 100px);}
	.main_silder .title .tt			{line-height:1.2;}
	.main_silder .title .st			{font-size:18px;}
	.main_silder .title .key		{font-size:18px; gap:10px 30px; flex-wrap:wrap;}

	.main_silder .count_wrap		{margin-top:30px;}
	.main_silder .count				{gap:20px 45px; flex-wrap:wrap;}
	.main_silder .count .tit		{font-size:17px;}
	.main_silder .count .tit span	{font-size:15px;}
	.main_silder .count .num		{font-size:28px;}
	.main_silder .count .num::after{font-size:30px}
	.main_silder .count li			{width:120px;}
	.main_silder .count li:nth-child(2){width:140px;}
	.main_silder .count li:nth-child(3){width:160px;}

	
	.main_silder .btn			{margin-top:30px;}
	.main_silder .btn a			{font-size:16px; min-width:180px}
	.main_silder .btn a img		{width:20px;}

	.main_silder .slick-dots 		{bottom:110px;}
	.main_silder .slick-dots li		{margin:0 15px;}

	
	.main_visual .vs_btn			{height:revert;}
	/* .main_visual .vs_btn li			{flex:auto} */
	.main_visual .vs_btn li a		{padding:30px 15px !important; height:100%}
	.main_visual .vs_btn a strong	{font-size:13px; font-weight: 500;}
	.main_visual .vs_btn a span		{display:none;}

	.main_visual .vs_btn a.etc strong		{font-size:16px; margin-top:-2px;}
	.main_visual .vs_btn a.etc span			{margin: -3px 0 0 0px;}

	.main_visual .vs_btn li img		{height:21px; margin-top:-5px; vertical-align:-5px;}
	.main_visual .vs_btn a,
	.main_visual .vs_btn li a:hover,
	.main_visual .vs_btn li a:focus	{background:url('/kpc/_img/main/vs_arr.svg') no-repeat top 10px right 10px/10px;}
	
	.scroll_ani						{font-size:14px; bottom: 101px;}
}


/* PC */
.main_content		{width:100%; position:relative; background-size:cover; background-position:50% 0%; background-repeat:no-repeat;}
.m_content			{width:100%; max-width:1680px; padding:140px 40px; margin:0 auto;}

.main_content h2		{font-weight:700; font-size:clamp(24px, 64px, 4.5vw); line-height:1.2; color:#333}
.main_content h2.w		{color:#fff;}
.main_content .h2_cate	{font-size:20px; color:var(--Primary-900); font-weight:600; margin-bottom:15px;}
.main_content .h2_txt	{font-size:24px; line-height:1.5; color:#666;}

/* Safari에서만 fixed 제거 */
@supports (-webkit-hyphens:none) {
	.main_content:has(.service),
	.main_content {background-attachment: scroll !important;}
}

/* Tablet */
@media only screen and (max-width: 1024px) {
	.m_content				{padding:100px 25px;}
	.main_content .h2_cate	{font-size:18px; margin-bottom:12px;}
	.main_content .h2_txt	{font-size:20px;}
}		

/* Mobile */
@media only screen and (max-width: 720px) {
	.m_content				{padding:80px 15px;}
	.main_content .h2_cate	{font-size:15px; margin-bottom:8px;}
	.main_content .h2_txt	{font-size:16px;}
	
}

/* 서비스 */
.m_service .point					{position:absolute;}
.m_service .point_fixed_start_before	{top:-30vh;}
.m_service .point_fixed_start			{top:0;}
.m_service .point_fixed_end				{bottom:100vh;} 

.m_service			{position:relative; min-height:100vh; background:#000 url('/kpc/_img/main/service_bg.jpg') no-repeat 50% 50% / cover; background-attachment:fixed; z-index:1;}
.m_service .bg		{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.m_service .bg li	{position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat 50% 50% / cover; z-index:0; background-attachment:fixed; transition:.2s linear; opacity:0;}
.m_service .bg .bg1 {background-image:url('/kpc/_img/main/service_bg.jpg?=20260202');}
.m_service .bg .bg2 {background-image:url('/kpc/_img/main/service_bg02.jpg');}
.m_service .bg .bg3 {background-image:url('/kpc/_img/main/service_bg03.jpg');}
.m_service .bg .bg4 {background-image:url('/kpc/_img/main/service_bg04.jpg');}
.m_service.list2,
.m_service.list3,
.m_service.list4		{background:#000;}
.m_service.list1 .bg1,
.m_service.list2 .bg2,
.m_service.list3 .bg3,
.m_service.list4 .bg4	{opacity:1;}

.m_service.main_content	{background-attachment: fixed;}
.m_service .m_content	{display:flex; justify-content: space-between; min-height:100dvh; gap:5%;}
.m_service .sticky		{position:sticky; top:150px; width:25%; height:fit-content; padding-bottom:100px;}

.m_service .list_box							{width:70%; max-width:830px; gap:6%;}
.m_service .list_box .point						{position:absolute; top:-40vh;}
.m_service .glassList							{width:100%; display:flex; justify-content: flex-end; align-items: flex-start; flex-wrap:wrap; gap:140px 90px;}
.m_service .glassList > li						{overflow:hidden; width:calc(50% - 45px); position:relative; min-height:430px; padding:45px; display:flex; justify-content: flex-end; flex-direction: column; gap:18px; box-shadow:0px 4px 15px rgba(0,0,0, 0.06); backdrop-filter: blur(11px);  -webkit-backdrop-filter: blur(11px); border:solid 2px rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.1); border-radius: 30px; transition:0.2s;}
.m_service .glassList > li * 					{transition:0.2s;}

.m_service .glassList > li:nth-child(2)			{margin-top:250px;}
.m_service .glassList > li:nth-child(3)			{margin-top:-250px;}

.m_service .glassList > li .tit					{font-size:30px; font-weight:600; color:#fff; position:relative; margin-bottom:15px;}
.m_service .glassList > li .tit:after			{opacity:0; position:absolute; content:''; top:-5px; width:10px; height:10px; border-radius:50%; background:var(--Primary);}
.m_service .glassList > li .txt					{font-size:18px; font-weight:200; color:rgba(255, 255, 255, 0.9);}

.m_service .glassList > li .link_wrap			{overflow:hidden; height:0;}
.m_service .glassList > li .link > li + li 		{margin-top:3px;}
.m_service .glassList > li .link a				{font-size:18px; color:#777; font-weight:400;}
.m_service .glassList > li .link a:hover,
.m_service .glassList > li .link a:focus		{color:var(--Primary) !important;}

.m_service .glassList > li.on,
.m_service .glassList > li:hover,
.m_service .glassList > li:has(a:focus)			{background:rgba(255, 255, 255, 0.8);}

.m_service .glassList > li.on .tit,
.m_service .glassList > li:hover .tit,
.m_service .glassList > li:has(a:focus) .tit	{color:#222;}
.m_service .glassList > li:hover .txt,
.m_service .glassList > li.on .txt,
.m_service .glassList > li:has(a:focus) .txt	{color:#222; font-weight:300}

.m_service .glassList > li.on .tit:after,
.m_service .glassList > li:hover .tit:after,
.m_service .glassList > li:has(a:focus) .tit:after	{opacity:1;}

/* Safari에서만 fixed 제거 */
@supports (-webkit-hyphens:none) {
	.m_service .bg li	{background-attachment: scroll !important;}
}

/* 호버, 목록 진입시 */
@media only screen and (max-width: 1400px) {
	.m_service .glassList				{gap:100px 40px}
}
/* Tablet */
@media only screen and (max-width: 1024px) {
	.m_service .m_content				{flex-direction: column;}
	.m_service .sticky					{width:100%; position:relative; top:revert; padding-bottom:0;}

	.m_service .list_box							{width:100%; margin-top:50px; max-width:revert}
	.m_service .glassList							{gap:25px}
	.m_service .glassList > li:nth-child(2)			{margin-top:0;}
	.m_service .glassList > li:nth-child(3)			{margin-top:0;}
	
	.m_service .glassList > li			{padding:40px; width:100%; min-height:revert;}
	.m_service .glassList > li .tit		{font-size:27px}
	.m_service .glassList > li .tit:after{width:8px; height:8px;}
	.m_service .glassList > li .link_wrap{height:fit-content !important}
	.m_service .glassList > li .link	{height:revert !important;}
	.m_service .glassList > li .link a	{font-size:17px; color:rgba(255, 255, 255, 0.8)}
	.m_service .glassList > li.on .link a,
	.m_service .glassList > li:hover .link a,
	.m_service .glassList > li:has(a:focus) .link a{color:#777}
}

/* Mobile */
@media only screen and (max-width: 720px) {
	.m_service .list_box						{margin-top:30px;}
	.m_service .glassList						{gap:15px}
	.m_service .glassList > li					{padding:30px; min-height:auto; margin-bottom:0; border-radius:15px;}
	.m_service .glassList > li .tit				{font-size:19px; margin-bottom:5px;}
	.m_service .glassList > li .tit:after		{width:6px; height:6px;}
	.m_service .glassList > li .txt				{font-size:16px;}
	.m_service .glassList > li .link > li + li 	{margin-top:5px;}
	.m_service .glassList > li .link a			{font-size:15px;}

}

/* 테마 */
.m_content.theme						{display:flex; flex-direction: column; justify-content: space-between; gap:30px;}
.m_content.theme h2						{margin-bottom:0;}
.m_content.theme .theme_swiper			{width:100%;}
.m_content.theme ul.themeList			{display:flex; justify-content: flex-end;}
.m_content.theme ul.themeList > li		{width:25%; max-width:360px; padding-right:60px;}
/* .m_content.theme ul.themeList .txt_box	{min-height:150px;} */
.m_content.theme ul.themeList .tt		{font-size:34px; font-weight:500; line-height:1.2; color:#fff; margin:20px 0 10px;}
.m_content.theme ul.themeList .tt span	{font-size:30px; vertical-align:top;}
.m_content.theme ul.themeList .st		{font-size:20px; color:#ddd}
.m_content.theme ul.themeList .link		{margin-top:20px; font-size:18px; color:#777}
.m_content.theme ul.themeList .link	a	{font-size:20px; font-weight:500; color:#777; transition:0.2s;}
.m_content.theme ul.themeList .link > li + li{margin-top:10px;}
.m_content.theme ul.themeList .link	a:focus,
.m_content.theme ul.themeList .link	a:hover{color:var(--Primary)}

.m_content.theme ul.themeList > li .img			{width:130px; aspect-ratio: 1/1; position:relative; transition: ease-in-out 0.4s; }
.m_content.theme ul.themeList > li .img.ax		{background:url('/kpc/_img/main/theme_ax_bold.svg') no-repeat 0% 50%/contain}
.m_content.theme ul.themeList > li .img.ax:after{position:absolute; z-index:-1; top:0; right:0; content:''; width:92px; height:100px; background:url('/kpc/_img/main/theme_ax_line.svg') no-repeat 50% 50%/contain; transition: ease-in-out 0.2s;}

.m_content.theme ul.themeList > li .img.mc		{background:url('/kpc/_img/main/theme_mc.svg') no-repeat 50% 50%/contain}

.m_content.theme ul.themeList > li .img.certi		{background:url('/kpc/_img/main/theme_certi_line.svg') no-repeat 0% 50%/contain; transition: ease-in-out 0.2s;}
.m_content.theme ul.themeList > li .img.certi:after	{position:absolute; z-index:-1; bottom:0; left:0; content:''; width:100px; height:52px; background:url('/kpc/_img/main/theme_certi_cir.svg') no-repeat 50% 50%/contain; transition: ease-in-out 0.2s;}


.m_content.theme ul.themeList > li.selected .img.ax,
.m_content.theme ul.themeList > li:hover .img.ax,
.m_content.theme ul.themeList > li:has(.link a:focus) .img.ax	{background-image:url('/kpc/_img/main/theme_ax_bold_on.svg')}
.m_content.theme ul.themeList > li.selected .img.ax:after,
.m_content.theme ul.themeList > li:hover .img.ax:after,
.m_content.theme ul.themeList > li:has(.link a:focus) .img.ax:after	{transform:rotate(180deg); z-index:1; background-image:url('/kpc/_img/main/theme_ax_line_on.svg')}

.m_content.theme ul.themeList > li.selected .img.mc,
.m_content.theme ul.themeList > li:hover .img.mc,
.m_content.theme ul.themeList > li:has(.link a:focus) .img.mc	{transform:rotateY(180deg)}
 
 
.m_content.theme ul.themeList > li.selected .img.certi,
.m_content.theme ul.themeList > li:hover .img.certi,
.m_content.theme ul.themeList > li:has(.link a:focus) .img.certi		{background-image:url('/kpc/_img/main/theme_certi_line_on.svg')}
.m_content.theme ul.themeList > li.selected .img.certi:after,
.m_content.theme ul.themeList > li:hover .img.certi:after,
.m_content.theme ul.themeList > li:has(.link a:focus) .img.certi:after	{bottom:calc(100% - 52px); z-index:1;}
 
.m_content.theme ul.themeList > li.selected,
.m_content.theme ul.themeList:not(:has(.selected)) > li	{filter:grayscale(0); opacity:1;}
.m_content.theme ul.themeList > li					{filter:grayscale(1); opacity:0.2}

.theme_swiper .swiper-slide 			{opacity: 0; transform: translateY(30%); transition: opacity 0.2s ease,  transform 1s ease;}
.theme_swiper .swiper-slide.is-visible 	{opacity: 1; transform: translateY(0); }

@media only screen and (max-width: 1240px) {
	.m_content.theme ul.themeList > li	{width:auto}
}

/* Tablet */
@media only screen and (max-width: 1024px) {
	.m_content.theme					{gap:60px;}
	.m_content.theme ul.themeList		{justify-content: space-between; gap:5%; padding-left:50px;}
	.m_content.theme ul.themeList > li	{min-width:revert; flex:1; padding-right:0;}
	.m_content.theme ul.themeList > li .img				{width:88px;}
	
	.m_content.theme ul.themeList > li .img.ax:after	{width:62px; height: 65px;}
	
	.m_content.theme ul.themeList > li .img.certi:after	{width:68px; height: 36px;}
	.m_content.theme ul.themeList > li:hover .img.certi:after,
	.m_content.theme ul.themeList > li:has(.link a:focus) .img.certi:after	{bottom:calc(100% - 38px)}
	
	/* .m_content.theme ul.themeList .txt_box	{min-height:120px;} */
	.m_content.theme ul.themeList .tt		{font-size:27px;}
	.m_content.theme ul.themeList .tt span	{font-size:24px;}
	.m_content.theme ul.themeList .st		{font-size:17px;}
	.m_content.theme ul.themeList .link	a	{font-size:17px;}
}

/* Mobile */
@media only screen and (max-width: 720px) {
	.m_content.theme						{gap:0;}
	.m_content.theme ul.themeList			{gap:20px; padding-left:0;}
	.m_content.theme ul.themeList .txt_box	{min-height:100px;}
	.m_content.theme ul.themeList .tt		{font-size:19px; margin: 15px 0 5px;}
	.m_content.theme ul.themeList .tt span	{font-size:16px;}
	.m_content.theme ul.themeList .st		{font-size:17px;}
	.m_content.theme ul.themeList .link		{margin-top:10px;}
	.m_content.theme ul.themeList .link > li + li{margin-top:5px;}
	.m_content.theme ul.themeList .link	a	{font-size:16px;}
}

@media only screen and (max-width: 620px) {
	.m_content.theme ul.themeList			{flex-direction: column; gap:15px}
	.m_content.theme ul.themeList > li		{padding:15px; width:100%; max-width:revert;}
	.m_content.theme ul.themeList > li .img	{width:60px;}
	.m_content.theme ul.themeList > li .img.ax:after	{width:45px; height: 48px;}
	.m_content.theme ul.themeList > li .img.certi:after	{width:48px; height: 24px;}
	.m_content.theme ul.themeList > li:hover .img.certi:after,
	.m_content.theme ul.themeList > li:has(.link a:focus) .img.certi:after	{bottom:calc(100% - 24px)}
	.m_content.theme ul.themeList .txt_box	{min-height:revert;}
	.m_content.theme ul.themeList .tt br,
	.m_content.theme ul.themeList .st br	{display:none;}
	.m_content.theme ul.themeList .link		{margin-left:-10px; width:calc(100% + 15px); padding:15px 20px; border-radius:15px; background:rgba(0, 0, 0, 0.2)}
	.m_content.theme ul.themeList .link	a	{font-size:15px;}
}

/* 커서 */
.cursor					{color:#fff; font-size:0; font-weight:400; gap:8px; width:10px; height:10px; position: absolute;  z-index:1;  pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.05s; z-index: 10;}
.cursor::before			{position:absolute; content:''; width:10px; height:10px; background:var(--Primary-OP-80); border-radius:50%; z-index:0; transition: 0.2s; backdrop-filter: blur(2.5px);}
.cursor span			{position:relative; z-index:2;}
.cursor img				{display:none;}
.cursor.on				{display:flex !important; flex-direction: column; justify-content: center; align-items: center; font-size:17px; width:120px; height:120px; }
.cursor.on::before		{z-index:1; content:''; width:110px; height:110px;}
.cursor.on::after		{position:absolute; content:''; width:140px; height:140px; border-radius:50%; background:var(--Primary-OP-20); border-radius:50%; z-index:0; transition: 0.2s; backdrop-filter: blur(2.5px);}
.cursor.on img			{display:block; position:relative;  z-index:1;}
.cursor.big::before		{transform: scale(5); backdrop-filter: blur(0.3px);}

/* Tablet */
@media only screen and (max-width: 1024px) {
	.cursor,
	.cursor.on,
	.cursor.on::before,
	.cursor.on img,
	.cursor.big::before	{display:none !important;}
}

/* 서비스 상세 */
.material_sect .navigation				{position:absolute; right:0; display:inline-flex; gap:20px;}
.material_sect .swiper-pagination		{display:flex; gap:10px; justify-content: center; bottom: 60px; z-index:1;}
.material_sect .navigation span,
.material_sect .swiper-pagination-bullet{opacity:1; position:relative; display:inline-block; width:10px; height:10px; margin-top:-30px; border-radius:50%; background:#ddd; transition:0.2s;}
.material_sect .swiper-pagination-bullet-active,
.material_sect .navigation span.on		{background:var(--Primary); }
.material_sect .swiper-pagination-bullet-active::before,
.material_sect .navigation span.on::before{position:absolute; content:''; width:18px; height:18px; top:50%; left:50%; margin:-10px 0 0 -10px; border-radius:50%; border:solid 1px var(--Primary);}
.material_sect .img_cont 				{opacity: 1; transition: opacity .5s}
.material_sect .img_cont .cont_box 		{perspective: 1000px; margin-top:160px;}
.material_sect .img_cont .cont_box .cont {transform-origin: top;}
.material_sect .img_cont .cont_box.size-fix .cont{transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1) !important; opacity:1 !important;}

.material_sect .img_cont .slide	{display:none;}
.material_sect .img_cont .img 	{position:relative; width:92vw; max-width:2000px; left:50%; transform:translateX(-50%); height:60vh; min-height:fit-content; border-radius:20px; overflow:hidden; padding:120px; display:flex; justify-content:space-between;}
.material_sect .ser_tab			{width:22%; display: flex; flex-direction: column; gap:15px;}
.material_sect .ser_tab a		{font-size:22px; font-weight:500; color:rgba(255, 255, 255, 0.5); transition: color 0.2s;}
.material_sect .ser_tab a:hover,
.material_sect .ser_tab a:focus	{color:#fff}
.material_sect .ser_tab a.on	{font-size:28px; font-weight:700; color:#fff}

.material_sect .tab_wrap		{width:75%;}
.material_sect .tab_cont .txt	{font-size:26px; font-weight:200; line-height:1.5; color:#fff;}
.material_sect .tab_cont a.more	{font-size:18px; font-weight:400; color:#fff; padding:20px 36px; width:200px; display:block; border-radius:50px; margin:30px 0 0 0; background:rgba(255, 255, 255, 0.04) url('/kpc/_img/main/more_arr_w.svg') no-repeat 80% 50%; backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); transition:0.2s;}
.material_sect .tab_cont a.more:hover,
.material_sect .tab_cont a.more:focus{background:#fff url('/kpc/_img/main/more_arr_b.svg') no-repeat 85% 50%; color:#222;}

.material_sect .ser-list 					{width:100%;}
.material_sect .ser-list .swiper-wrapper	{flex-direction: column; gap:15px;}
.material_sect .ser-list .tab_cont			{position:absolute; top:0; left:370px; opacity:0; width: calc(100% - 300px); height:fit-content; transform:translateY(40px); transition:0.5s;}
.material_sect .ser-list .swiper-slide		{width:fit-content; height:auto; position:revert;}
.material_sect .ser-list .swiper-slide[selected] 		{z-index:1;}
.material_sect .ser-list .swiper-slide[selected] .tab_cont{opacity:1; transform:translateY(0); padding-bottom:40px; min-height:240px;}

.material_sect .ser-list a.ser_tab			{display:inline-block; width:fit-content; font-size:22px; font-weight:500; color:rgba(255, 255, 255, 0.5); transition: color 0.2s;}
.material_sect .ser-list .swiper-slide[selected] a.ser_tab{font-size:28px; font-weight:700; color:#fff}

@media only screen and (max-width: 1800px) {
	.material_sect .img_cont .img	{width:calc(100vw - 80px); padding:60px 100px;}
	.material_sect .tab_cont .txt	{font-size:24px;}
	
	.material_sect .ser-list .tab_cont{left:300px;}
	
	.material_sect .ser-list .swiper-slide[selected] .tab_cont{min-height:300px;}
}

/* Tablet */
@media only screen and (max-width: 1024px) {
	.service_detail							{overflow:hidden;}
	.material_sect .h2_wrap					{margin:70px 0 10px;}
	.material_sect .navigation				{display:none;}
	.material_sect .img_cont .slide			{display:block;}
	.material_sect .swiper-slide			{height:revert;}
	
	.material_sect .img_cont .cont_box 		{margin-top:0; display:none;}
	
	.material_sect .img_cont .img	{width:calc(100vw - 50px); padding:60px; height:500px;}
	.material_sect .ser_tab			{width:35%;}
	.material_sect .ser_tab a		{font-size:20px}
	.material_sect .ser_tab a.on	{font-size:24px;}
	
	.material_sect .tab_wrap		{width:60%;}
	.material_sect .tab_cont .txt	{font-size:19px;}
	.material_sect .tab_cont .txt br{display:none;}
	.material_sect .tab_cont a.more	{font-size:17px; padding:18px 32px; width:180px;}
}

/* Mobile */
@media only screen and (max-width: 720px) {
	.material_sect .h2_wrap					{margin:50px 0 20px;}
	
	.material_sect .swiper-pagination		{bottom: 40px;}
	
	.material_sect .img_cont .img		{width:calc(100vw - 30px); padding:30px 15px 15px; flex-direction: column; justify-content:flex-start; gap:30px; height:auto; border-radius:15px;}
	.material_sect .swiper-slide .cont	{height: 100%;display: flex;flex-direction: column;}
	.material_sect .swiper-slide .img	{flex: 1;}
	
	
	.material_sect .ser_tab			{width:100%; flex-direction:row; flex-wrap:wrap; gap:15px 30px; padding:0 15px;}
	.material_sect .ser_tab a,
	.material_sect .ser_tab a.on	{font-size:17px;}
	
	.material_sect .tab_wrap		{width:100%; flex:1}
	.material_sect .tab_wrap .tab_cont{height:100%; min-height:260px; padding:25px; border-radius:10px; background:rgba(0, 0, 0, 0.1); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
	.material_sect .tab_cont .txt	{font-size:16px;}
	.material_sect .tab_cont a.more	{margin-left:-5px; font-size:15px; padding:16px 25px; width:160px; background-color: rgba(255, 255, 255, 0.1); background-position:85% 50%}
	
}

/* 메인팝업 */
.main_pop									{position: absolute; z-index: 99999; overflow: hidden; max-height:fit-content;}
.main_pop .popup_cont						{display:block; width:100%; max-height:calc(100% - 30px);}
.main_pop .popup_cont a,
.main_pop .popup_cont img					{display:block; width:100%; }
.main_pop .popup_bottom						{position: relative; display:flex; justify-content:space-between; align-items:center; padding:0 7px; width:100%; height: 30px; background: #333;}
.main_pop .popup_bottom	.close_check		{margin:0;}
.main_pop .popup_bottom	.close_check label	{cursor:pointer; font-size:14px; color:#f0f0f0;}
.main_pop .popup_bottom	.close_check input:focus + label	{outline:2px}
.main_pop .popup_bottom	.close a			{font-size:0; width:15px; height:15px; display:block; background:url('/kpc/_img/main/cbtn_w.png')no-repeat 50% 50%/12px;}	


/* Tablet */
@media only screen and (max-width: 1024px) {
	.main_pop									{max-width:calc(100vw - 50px); left: 50% !important; right: inherit !important; transform: translateX(-50%); }
	.main_pop .popup_cont a,
	.main_pop .popup_cont a img					{max-width:100%;}
}

/* Mobile */
@media only screen and (max-width: 720px) {
	.main_pop								{max-width:calc(100vw - 30px);}
}

.preloader-wrap			{font-weight: 600; font-family: "Paperlogy", "Pretendard", sans-serif; width: 100%; height: 100%; overflow:hidden; position: fixed; top: 0; bottom: 0; background: #000; z-index: 1800; text-align: center; display: flex; align-items: center; justify-content: center;}
.preloader-wrap video	{position:absolute; top:50%; left:50%;  transform: translate(-50%, -50%); filter: grayscale(1); opacity:0.3; width: 100vw; height: 100vh; object-fit: cover; object-position: center;}
.preloader-wrap .outer	{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}

.preloader-wrap .inner	{position: relative; width: 100%; height: 100%;}
.preloader-wrap .trackbar				{width: 100%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; padding: 20px; opacity: 1; }
.preloader-wrap .since-intro			{position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10;}
.preloader-wrap .since					{font-size: clamp(1vw, 38px, 2vw); margin-bottom:1vw; color: rgba(255, 255, 255, 0.6); font-weight: 300; opacity: 0; transform: translateY(50px);}

.preloader-wrap .year					{font-family: "KoreaInstituteOfMachineryAndMaterials", "Paperlogy", "Pretendard", sans-serif; font-size: 8vw; height: 1em; line-height:1; font-weight:800; overflow: hidden; display:flex; justify-content: center; align-items: center; color: #fff; opacity: 0; transform: translateY(50px); }
.preloader-wrap .year span				{display:inline-block; width:6vw;}
.preloader-wrap .year-digit				{display: inline-block; width: 6vw; height: 1em; overflow: hidden; vertical-align: top; line-height: 1;}
.preloader-wrap .year-digit-wrapper		{display: block; line-height: 1;}

.preloader-intro				{position: absolute; top: 43%; left: 50%; width:90vw; transform: translate(-50%, -50%); display: block; font-size: clamp(3.5vw, 70px, 6vw); color: #fff; overflow: visible; margin: 0; padding: 0; opacity: 0; visibility: hidden; z-index: 5;}
.preloader-wrap .core-intro		{position: absolute; font-size:clamp(1vw, 38px, 2vw); font-weight:400; color:rgba(255, 255, 255, 0.4); top: 39%; left: 50%; transform: translate(-50%, -50%); }
.preloader-wrap .core			{display:flex;opacity: 0; transform: translateY(50px); justify-content: center; align-items: center;}
.preloader-wrap .core-number	{display: inline-flex; align-items: center; justify-content: center; min-width: 1.5vw; text-align: center; position: relative; overflow: hidden;}
.preloader-wrap .core-number-inner {display: block; position: relative; line-height:1;}

ul.flip						{position: relative; margin: 5px; width: 2.4vw; height: 3vw; font-size: clamp(1vw, 45px, 2vw); font-weight: bold; line-height: 3vw; border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, .7);}
ul.flip li					{z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
ul.flip li.active			{z-index: 2;}
ul.flip li a				{display: block; height: 100%; perspective: 200px;}
ul.flip li a div			{z-index: 1; position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden;}
ul.flip li a div .shadow	{position: absolute; width: 100%; height: 100%; z-index: 2;}
ul.flip li a div.up			{transform-origin: 50% 100%; top: 0;}
ul.flip li a div.up:after	{content: ""; position:absolute; top:44px; left:0; z-index: 5; width: 100%; height: 3px; background-color: rgba(0,0,0,.4);}
ul.flip li a div.down		{transform-origin: 50% 0%; bottom: 0;}
ul.flip li a div div.inn	{position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: #ccc; text-shadow: 0 1px 2px #000; text-align: center; background-color: #333; border-radius: 6px;}

ul.flip li a div.up div.inn		{top: 0;}
ul.flip li a div.down div.inn	{bottom: 0;}

/* PLAY */
.play ul li.before {z-index: 3;}
.play ul li.active {z-index: 4; animation: asd .5s .5s linear both;}

@keyframes asd {
    0% {
        z-index: 2;
    }
    5% {
        z-index: 4;
    }
    100% {
        z-index: 4;
    }
}

.play ul li.active .down {z-index: 2; animation: turn .5s .5s linear both;}

@keyframes turn {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

.play ul li.before .up {z-index: 2; animation: turn2 .5s linear both;}

@keyframes turn2 {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}

/* SHADOW */
.play ul li.before .up .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: show .5s linear both;
}
.play ul li.active .up .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: hide .5s .3s linear both;
}

/*DOWN*/
.play ul li.before .down .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    animation: show .5s linear both;
}

.play ul li.active .down .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    animation: hide .5s .3s linear both;
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.preloader-list		{color: #fff; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform-style: preserve-3d; perspective: 1000px; transition:0.2s;}
.main_copy			{position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); font-size: 4.8vw; line-height:1.2; color: #fff; opacity: 0; visibility: hidden; text-align: center; z-index: 1;}
.main_copy-line		{display: block; overflow: hidden;}
.main_copy-line span {display: inline-block;}

.skip-hint {font-family:"Pretendard"; font-weight:300; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.4); font-size: 17px; opacity: 0; animation: fadeInOut 2s ease-in-out infinite;}

@keyframes fadeInOut {
	0%, 100% { opacity: 0; }
	50% { opacity: 0.8; }
}

@media only screen and (max-width: 1024px) {
	.preloader-wrap .core-intro,
	.preloader-wrap .since				{font-size: 3.5vw;}
	ul.flip								{width: 5vw; height: 6vw; font-size: 4vw; line-height: 6.2vw;}
}

@media only screen and (max-width: 720px) {
	.preloader-wrap .core-intro,
	.preloader-wrap .since				{font-size: 5vw; margin-bottom:10px;}
	.preloader-wrap .year				{font-size: 12vw;}
	.preloader-wrap .year span			{width:8.8vw;}
	.preloader-intro,
	.main_copy							{font-size:7.5vw}
	ul.flip								{width: 6.2vw; height: 7.8vw; font-size: 5.4vw; line-height: 8vw;}

	.skip-hint					{font-size:14px}
}






/* 비주얼 우측 바로가기 버튼 v05*/
.main_visual.v05 .main_silder .play_pause			{bottom:190px}
.main_visual.v05 .main_silder .slick-dots			{bottom:190px}
.main_visual.v05 .main_silder .title				{top:37%;}

.main_visual.v05 .vs_btn					{overflow: hidden; border-top-left-radius: 20px; border-top-right-radius: 20px; border-left: solid 1px #ffffff40; border-top: solid 1px #ffffff40; backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); position:absolute; opacity: 1 !important; width:92dvw; height:160px; left:50%; transform:translateX(-50%); top:revert; bottom:0; display:flex; flex-direction: row; padding:0; justify-content: center;}
.main_visual.v05 .vs_btn li					{height:100%;  flex:1; position:relative;}
.main_visual.v05 .vs_btn li:before			{position:absolute; content:''; width:1px; height: 100%; right:0px; top:0px; background:#ffffff40;}
.main_visual.v05 .vs_btn li:not(:first-child) a	{border-top:none}
.main_visual.v05 .vs_btn li:first-child a		{border-top:none}
.main_visual.v05 .vs_btn li a					{display:flex; flex-direction: row;  justify-content: flex-start; align-items: center; height:100%; padding:50px; position:relative;  color:#fff; transition: 0.2s; gap: 20px;}

.main_visual.v05 .vs_btn:has(a:hover) a,
.main_visual.v05 .vs_btn:has(a:focus) a		{opacity:0.5}
.main_visual.v05 .vs_btn li a:hover			{opacity: 1 !important;}

.main_visual.v05 .vs_btn li a:after			{position:absolute; content:''; width:40px; height:40px; right:40px; top:55px; transform:translate(0, 0); background: url('/kpc/_img/main/vs_arr.svg') no-repeat 50% 50%; opacity:0.3; transition: 0.2s; }
.main_visual.v05 .vs_btn li a:before		{position:absolute; content:''; z-index:0; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.1); transition: 0.2s;}
.main_visual.v05 .vs_btn li a:hover:before,
.main_visual.v05 .vs_btn li a:focus:before	{opacity:1;background:rgba(255, 255, 255, 0.25);  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -webkit-mask-size: 200%; animation: shine 2s infinite;}

.main_visual.v05 .vs_btn li a:hover:after,
.main_visual.v05 .vs_btn li a:focus:after	{opacity:1; animation: arrowBurst 1.2s ease-in-out infinite; background-image: url('/kpc/_img/main/vs_arr_on.svg')}	
.main_visual.v05 .vs_btn li a strong		{position:relative; z-index:1; display:block; font-size:24px; font-weight:600; transition: 0.2s;}
.main_visual.v05 .vs_btn li a strong span	{display:inline-block; margin-top:3px; font-weight: 600;}
.main_visual.v05 .vs_btn li a span			{position:relative; z-index:1; font-size:24px; font-weight:100; margin-top:0px; opacity: 0.7}
.main_visual.v05 .vs_btn li img				{vertical-align:-12px; height:auto;margin-top: -6px; vertical-align: top;}

.main_visual.v05 .scroll_ani				{right:20px; bottom:160px; overflow:hidden;}
.main_visual.v05 .scroll_ani				{position:absolute; right:20px; bottom:390px; overflow:hidden; writing-mode: vertical-rl;text-orientation: sideways; color:#fff; font-weight:200; display:flex; align-items: center; gap:8px;}
.main_visual.v05 .scroll_ani .scroll		{width:2px; height:50px; background:rgba(255, 255, 255, 0.1); dipplay:block; position:relative; bottom:0;}
.main_visual.v05 .scroll_ani .bar			{display:block; width:100%; height:20px; background:#fff; position:absolute;-webkit-animation: scr 2.5s infinite; animation: scr 2.5s infinite;}

/**/
.main_visual:has(.vs_btn_bt) .title .tt,
.main_visual.sm_tit	.title .tt	{font-size: clamp(28px, 60px, 5vw);}
.main_visual.sm_tit	.title .st	{font-size: 22px;}
.main_visual.sm_tit	.title .key	{font-size: clamp(18px, 24px, 2.5vw);}
.main_visual.sm_tit	.count .num	{font-size: clamp(28px, 42px, 3vw);}
.main_visual.sm_tit	.main_silder .count	{gap:50px;}

.main_visual.sm_tit	.title .tt span		{color: var(--Primary-900);}

.main_visual.sm_tit .vs_btn				{width:19vw;}
.main_visual.sm_tit .vs_btn a:before	{background: rgba(255, 255, 255, 0.01);}
.main_visual.sm_tit .vs_btn li:not(:first-child) a{border-color:rgba(255, 255, 255, 0.1)}

.main_visual:has(.vs_btn_bt) .main_silder .play_pause			{bottom:250px}
.main_visual:has(.vs_btn_bt) .main_silder .slick-dots			{bottom:250px}
.main_visual:has(.vs_btn_bt) .main_silder .title				{top:29%;}

.main_visual.sm_tit .main_silder .title				{top:35%;}

.main_visual .vs_btn_bt							{overflow: hidden; border-radius: 20px; border-left: solid 1px #ffffff40; border-top: solid 1px #ffffff40; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position:absolute; z-index:1; width:calc(100% - 120px); height:130px; left:60px; bottom:70px; display:flex; flex-direction: row; padding:0; justify-content: center;}
.main_silder .slick-dots 						{animation: fadeInUp 1.5s ;}
.main_visual .vs_btn_bt							{transform: translateY(100px); opacity: 0;}
.main_visual .vs_btn_bt.active					{animation: fadeInUp2 1.5s ; animation-delay: 1s; animation-fill-mode: forwards;}

.main_visual .vs_btn_bt li						{height:100%;  flex:1; position:relative;}
.main_visual .vs_btn_bt li:not(:last-child):before				{position:absolute; content:''; width:1px; height: 100%; right:0px; top:0px; background:rgba(255, 255, 255, 0.1);}
.main_visual .vs_btn_bt li:not(:first-child) a	{border-top:none}
.main_visual .vs_btn_bt li:first-child a		{border-top:none}
.main_visual .vs_btn_bt li a					{display:flex; flex-direction: row;  justify-content: flex-start; align-items: center; height:100%; padding:50px; position:relative;  color:#fff; transition: 0.2s; gap: 20px;}

.main_visual .vs_btn_bt:has(a:hover) a,
.main_visual .vs_btn_bt:has(a:focus) a		{opacity:0.5}
.main_visual .vs_btn_bt li a:focus,
.main_visual .vs_btn_bt li a:hover			{opacity: 1 !important;}

.main_visual .vs_btn_bt li a:before			{position:absolute; content:''; z-index:0; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.1); transition: 0.2s;}
.main_visual .vs_btn_bt li a:hover:before,
.main_visual .vs_btn_bt li a:focus:before	{opacity:1; background:rgba(255, 255, 255, 0.25);  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%); -webkit-mask-size: 200%; animation: shine 2s infinite;}

.main_visual .vs_btn_bt li a:after			{position:absolute; content:''; width:40px; height:40px; right:40px; top:50%; margin-top:-20px; transform:translate(0, 0); background: url('/kpc/_img/main/vs_arr.svg') no-repeat 50% 50%/19px; opacity:0.3; transition: 0.2s; }
.main_visual .vs_btn_bt li a:hover:after,
.main_visual .vs_btn_bt li a:focus:after	{opacity:1; animation: arrowBurst 1.2s ease-in-out infinite;}	

.main_visual .vs_btn_bt li a strong			{position:relative; z-index:1; display:block; font-size:24px; font-weight:600; transition: 0.2s;}
.main_visual .vs_btn_bt li a strong span	{display:inline-block; margin-top:3px; font-size:24px; font-weight: 600; opacity: 1}
.main_visual .vs_btn_bt li a span			{position:relative; z-index:1; font-size:22px; font-weight:200; margin-top:0px; opacity: 0.7}
.main_visual .vs_btn_bt li img				{vertical-align:-12px; height:auto;margin-top: -6px; vertical-align: top;}

.main_visual:has(.vs_btn_bt) .scroll_ani	{right:70px;z-index:1;bottom: 250px;height: fit-content;}


/* Tablet */
@media only screen and (max-width: 1400px) {
	.main_visual.v05 .main_silder .title .st		{font-size:22px;}
	.main_visual.v05 .main_silder .title .key		{margin-top:20px;}
	
	
	.main_visual.v05 .vs_btn			{opacity: 1 !important; transform: translateZ(0) !important; width:100dvw !important; height:160px; left:0; top:revert; bottom:0; flex-direction: row; padding:0;}
	.main_visual.v05 .vs_btn li			{border-radius:0 !important;}
	.main_visual.v05 .vs_btn li a		{flex-direction: column; align-items: flex-start; gap: 3px; justify-content: center;}
	.main_visual.v05 .vs_btn li a:hover,
	.main_visual.v05 .vs_btn li a:focus	{background:url('/kpc/_img/main/vs_arr.svg') no-repeat top 20px right 20px/18px; }
	.main_visual.v05 .vs_btn li a strong		{display: flex;}
	.main_visual.v05 .vs_btn li a strong span	{margin-top: -1px; margin-left: 5px;}

	.main_visual.v05 .vs_btn a span		{font-size:20px !important;}
	.main_visual.v05 .vs_btn a:after	{display:none;}

	.main_visual.v05 .vs_btn a,
	.main_visual.v05 .vs_btn li a:hover,
	.main_visual.v05 .vs_btn li a:focus	{background:url('/kpc/_img/main/vs_arr.svg') no-repeat top 20px right 20px/18px; }
	.main_visual.v05 .vs_btn li img		{height:34px;}
	
	.main_visual.v05 .slick-dots			{display:none;}
	.main_silder.v05 .title				{top:calc(45% - 150px); padding:0 25px;}
	/* .main_silder .slick-dots 		{bottom:230px; padding:0 25px;} */

	/**/
	.main_visual.sm_tit	.title .st	{font-size: 20px;}

	.main_visual.sm_tit	.title .tt	{font-size: clamp(28px, 62px, 5vw);}
	.main_visual:has(.vs_btn_bt) .main_silder .title .st		{font-size:22px;}
	.main_visual:has(.vs_btn_bt) .main_silder .title .key		{margin-top:20px;}
	.main_visual:has(.vs_btn_bt) .slick-dots		{display:none;}
	
	
	.main_visual .vs_btn_bt				{width:calc(100% - 50px) !important; bottom:25px; left:25px}
	.main_visual .vs_btn_bt li a		{flex-direction: column; align-items: flex-start; gap: 3px; justify-content: center; padding:40px;}
	
	.main_visual .vs_btn_bt li a strong span,
	.main_visual .vs_btn_bt li a span	{font-size:20px;}
	.main_visual .vs_btn_bt li a:after	{margin-top:0; top: 20px; right: 20px;}
	.main_visual .vs_btn_bt li img		{height:34px; margin-top: -3px;}
	
}		

/* Mobile */
@media only screen and (max-width: 1024px) {
	.main_visual.sm_tit .vs_btn				{width:100%;}
}

@media only screen and (max-width: 720px) {
	.main_visual.sm_tit .main_silder .title				{top:calc(38% - 100px);}
	.main_silder .title				{padding:0 15px; top:calc(38% - 100px);}
	.main_silder .title .tt			{line-height:1.2;}
	.main_silder .title .st			{font-size:18px;}
	.main_silder .title .key		{font-size:18px; gap:10px 30px; flex-wrap:wrap;}

	.main_silder .count_wrap		{margin-top:30px;}
	.main_silder .count				{gap:20px 45px; flex-wrap:wrap;}
	.main_silder .count .tit		{font-size:17px;}
	.main_silder .count .tit span	{font-size:15px;}
	.main_silder .count .num		{font-size:28px;}
	.main_silder .count .num::after{font-size:30px}
	.main_silder .count .num::before{font-size:15px}
	.main_silder .count li			{width:120px;}
	.main_silder .count li:nth-child(2){width:140px;}
	.main_silder .count li:nth-child(3){width:160px;}
	
	.main_visual.v05 .main_silder .slick-dots 		{bottom:130px;}
	.main_visual.v05 .main_silder .slick-dots li		{margin:0 15px;}
	
	.main_visual.v05 .vs_btn				{height:revert; width: 100dvw; left:0;}
	.main_visual.v05 .vs_btn li			{flex:auto}
	.main_visual.v05 .vs_btn li a		{padding:30px 15px !important; height:100%}
	.main_visual.v05 .vs_btn a strong span	{font-size:13px !important; font-weight: 400 !important;}
	.main_visual.v05 .vs_btn a span		{font-size:15px !important; margin-top:0;}
	.main_visual.v05 .vs_btn li img		{height:24px !important; margin-top:-5px; vertical-align:top;}
	.main_visual.v05 .vs_btn a,
	.main_visual.v05 .vs_btn li a:hover,
	.main_visual.v05 .vs_btn li a:focus	{background:url('/kpc/_img/main/vs_arr.svg') no-repeat top 10px right 10px/10px;}
	
	.scroll_ani						{font-size:14px; bottom: 101px;}

	/**/
	.main_visual.sm_tit	.title .st	{font-size: 17px;}
	.main_visual.sm_tit	.main_silder .count	{gap:20px 40px;}

	.main_visual:has(.vs_btn_bt) .main_silder .play_pause		{bottom:140px}
	.main_visual:has(.vs_btn_bt) .main_silder .slick-dots		{bottom:140px}
	.main_visual:has(.vs_btn_bt) .main_silder .title			{top:calc(38% - 100px)}
	.main_visual:has(.vs_btn_bt) .main_silder .title .st		{font-size:20px;}
	.main_visual:has(.vs_btn_bt) .main_silder .title .key		{margin-top:20px;}

	.main_visual.no_dots .slick-dots		{display:none;}
	
	
	.main_visual .vs_btn_bt				{width:100% !important; bottom:0; left:0; border-radius:0; height:100px; border-left:0; border-right:0;}
	.main_visual .vs_btn_bt li a		{flex-direction: column; align-items: flex-start; gap: 3px; justify-content: center; padding:30px 15px;}
	.main_visual .vs_btn_bt li a strong,
	.main_visual .vs_btn_bt li a strong span	{font-size:15px; margin-top:0;}
	.main_visual .vs_btn_bt li a span	{font-size:14px;}
	.main_visual .vs_btn_bt li a:after	{margin-top:0; top: 0; right: 0; background-size:12px;}
	.main_visual .vs_btn_bt li img		{height:24px; margin-top: -5px;}

	.main_visual:has(.vs_btn_bt) .scroll_ani	{bottom: 101px; right:20px; top:revert; transform:revert;}
}




/* 메인 영상07 */
.main_visual.no_dots .slick-dots			{display:none !important;}