@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);}
}


/* 비주얼 슬라이더 */

.main_visual						{position:sticky; top:0; width: 100%; height: 100dvh; overflow:hidden; background:#000}
.main_visual .video_bg_wrap			{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0; }
.main_visual .video_bg_wrap img		{width:100%; height:100%; position:absolute; top:0; left:0; z-index:1;}
.main_visual #video					{width:100%; height:100%; object-fit:cover; opacity:70%}
.main_visual .video_bg_wrap .overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3);}

.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:35%; left:50%; transform:translateX(-50%); width:100%; max-width:1680px; padding:0 19vw 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-family:'FlightSansTitle'; font-size: clamp(28px, 60px, 5vw); font-weight:800; line-height:1.2; margin-bottom:20px;}
.main_silder .title .tt span		{color: var(--Primary-900);}
.main_silder .title .st				{font-size:22px; font-weight:400; color:rgba(255, 255, 255, 0.7)}
.main_silder .title .key			{font-size: clamp(18px, 24px, 2.5vw); font-weight:600; margin-top:30px; display:flex; flex-wrap:wrap; gap:20px 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 ;}

/* slick 로딩전 */
/* 초기화 전 첫 슬라이드만 표시 */
.main_silder:not(.ani) .slider {opacity: 0;}
.main_silder.ani .slider 		{opacity: 1;}

.main_silder .count_wrap		{margin-top:50px;}
.main_silder .count				{display:flex; color:rgba(255, 255, 255, 0.8); gap:50px;}
.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(28px, 42px, 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:12%}

.main_silder.no_dots .slick-dots		{display:none !important;}
.main_silder .slick-dots 				{text-align:left; left:50%; transform:translateX(-50%); width:100%; max-width:1680px; padding:0 40px;}
.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:.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.3); 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;}

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

/* 비주얼 우측 바로가기 버튼 */
.main_visual .vs_btn					{transform: translateX(100px); opacity: 0; z-index:1; backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); position:absolute; right:0; top:80px; width:19vw; height:calc(100dvh - 80px); display:flex; flex-direction: column;}
.main_visual .vs_btn.active				{animation: fadeInLeft 1.5s ; /* animation-delay: 1s; */ animation-fill-mode: forwards;}
.main_visual .vs_btn li					{height:100%; border-left:solid 1px rgba(255, 255, 255, 0.1);}
.main_visual .vs_btn li:not(:first-child) a	{border-top:solid 1px rgba(255, 255, 255, 0.1)}
.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.01); 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:11%; top:20%; 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;}


.main_visual .vs_btn.active		{animation: fadeInLeft 1.5s ; animation-fill-mode: forwards;}

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

@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				{overflow: hidden; 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:50px; 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: 1500px) {
	.main_silder .count					{gap:60px}
	.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_visual .vs_btn			{width:20vw}
	.main_visual .vs_btn a			{padding:30px;}
	.main_visual .vs_btn a strong	{font-size:24px;}
	.main_visual .vs_btn a span		{font-size:20px}
	.main_visual .vs_btn li img		{height:40px}
}

@media only screen and (max-width: 1400px) {
	.main_silder .title					{padding: 0 20vw 0 40px; top:30%;}
	.main_visual .title .tt				{font-size: clamp(28px, 62px, 5vw);}
	.main_visual .title .st				{font-size: 20px;}
}

/* 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:100%; height:140px; 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: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?v=260211') no-repeat top 20px right 20px/18px; }
	.main_visual .vs_btn a strong	{font-size:18px;}
	.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:25%; padding:0 25px;}
	.main_silder .slick-dots 		{bottom:190px; padding:0 25px;}
	
	.main_silder .btn				{margin-top:40px;}
	.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:17px;}
	.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_silder .round_btn a		{width:auto; min-width:180px}
	
	.main_silder .slick-dots 		{bottom:110px;}
	.main_silder .slick-dots li		{margin:0 15px;}
	
	.main_silder .btn			{margin-top:30px;}
	.main_silder .btn a			{font-size:16px; min-width:180px}
	.main_silder .btn a img		{width:20px;}
	
	.main_visual .vs_btn			{height:revert;}
	.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		{font-size:15px; margin-top:0; 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:24px; margin-top:-5px; vertical-align:top;}
	.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?v=260313');}
.m_service .bg .bg2 {background-image:url('/kpc/_img/main/service_bg02.jpg?v=260313');}
.m_service .bg .bg3 {background-image:url('/kpc/_img/main/service_bg03.jpg?v=260313');}
.m_service .bg .bg4 {background-image:url('/kpc/_img/main/service_bg04.jpg?v=260313');}
.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:700; line-height:1.2; color:#fff; margin:20px 0 10px;}
.m_content.theme ul.themeList .tt span	{font-size:33px; 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); }

.main_content h2,
.m_service .glassList > li .tit,
.m_content.theme ul.themeList .tt	{font-family:'Paperlogy';}

@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);}
}

/* 인트로 */
.intro							{width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 100; background: transparent;}
.intro-bg						{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;}
.intro-mask-svg 				{position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.intro .inner					{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; overflow: hidden; position: relative; z-index: 2;}
.intro .inner .step1			{display: flex; flex-direction: column; align-items: center; margin-top:30px; overflow:hidden;}
.intro .inner .step1 .logo		{width: 100%; opacity: 0; position: relative; display:flex; align-items:center; justify-content: center; gap:20px; overflow:hidden; height:100px; z-index:1;}
.intro .inner .step1 .logo img	{height: 100%;}
.intro .inner .step1 .txt		{font-weight:500; font-size: 36px; letter-spacing:-0.1px; color: rgba(255, 255, 255, 0.7); margin-top: 15px; opacity: 0; transform: translateY(50px);}
.intro .inner .step2			{overflow: visible; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; opacity: 0; display: flex; align-items: center; justify-content: center;}
.intro .inner .step2 .circle	{width: 0px; height: 0px; border-radius: 50%; border: 11px solid var(--Primary-OP-20); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 1 / 1;}

@media screen and (max-width: 1024px) {
	.intro .inner				{padding-bottom:23px;}
	.intro .inner .step1 .logo	{height:80px;}
	.intro .inner .step1 .txt	{font-size:28px;}
	.intro .inner .step2 .circle	{border: 9px solid var(--Primary-OP-20);}
}

@media screen and (max-width: 640px) {
	.intro .inner					{padding-bottom:62px;}
	.intro .inner .step1 .logo		{height:50px; gap:10px}
	.intro .inner .step1 .txt		{font-size: 20px;}
	.intro .inner .step2 .circle	{border: 6px solid var(--Primary-OP-20);}
}