@charset "UTF-8";
/* @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 100 200 300 400 500 600 700 800 900;
	font-style: normal;
	font-display: swap;
	src: url('../font/woff2/PretendardVariable.woff2') format('woff2-variations');
}

*{ scroll-behavior: smooth;}
:root{
	--mrgn-half: calc(var(--mrgn) /  2);  /*10px*/
	--mrgn:      20px;
	--mrgn-x2:   calc(var(--mrgn) *  2); /*40px*/
	--mrgn-x3:   calc(var(--mrgn) *  3); /*60px*/
	--mrgn-x4:   calc(var(--mrgn) *  4);
	--mrgn-x6:   calc(var(--mrgn) *  6);
	--mrgn-x8:   calc(var(--mrgn) *  8);
	--mrgn-x16:  calc(var(--mrgn) * 16);/*320px*/
	--mrgn-x32:  calc(var(--mrgn) * 32);/*640px*/

	--basic-width : 1400px;
	--basic-font-size: 14px;


	--color-main:  #96a6c4;
	/* --color-point: rgba(255, 255, 255, .6); */
	--color-sub:   #8a90bc;

	--color-point:  #571df7;
	--color-point-025: rgb(87, 29, 247, .25);
	--color-point-050: rgb(87, 29, 247, .5);
	--color-point-075: rgb(87, 29, 247, .75);
	--color-point-01:  #9961FF;
	--color-point-02:  #ffba58;

	--color-w-000:  rgba(255, 247, 100, 0);
	--color-w-015:  rgba(255, 255, 255, .15);
	--color-w-025:  rgba(255, 255, 255, .25);
	--color-w-035:  rgba(255, 255, 255, .35);
	--color-w-050:  rgba(255, 255, 255, .5);
	--color-w-065:  rgba(255, 255, 255, .65);
	--color-w-075:  rgba(255, 255, 255, .75);
	--color-w-085:  rgba(255, 255, 255, .85);
	--color-w:      #fff;

	--color-k-000:  rgba(10, 10, 10, 0);
	--color-k-015:  rgba(10, 10, 10, .15);
	--color-k-025:  rgba(10, 10, 10, .25);
	--color-k-035:  rgba(10, 10, 10, .35);
	--color-k-050:  rgba(10, 10, 10, .5);
	--color-k-065:  rgba(10, 10, 10, .65);
	--color-k-075:  rgba(10, 10, 10, .75);
	--color-k-085:  rgba(10, 10, 10, .85);
	--color-k:      #000;
	--color-222:    #222;

	--color-g-f9:   #f9f9f9;
    --color-g-f6:   #f6f6f6;
    --color-g-f3:   #f3f3f3;
    --color-g-ee:   #eee;
    --color-g-dd:   #ddd;
    --color-g-bb:   #bbb;
    --color-g-e7:   #e7e7e7;
}
/* 마우스 드래그 시 색상 */
::selection{
	color: #fff;
	text-shadow: none;
	background: var(--color-point)
}

html, body{ position: relative; min-width: var(--basic-width); background: var(--color-k); color: var(--color-w); font-size: var(--basic-font-size); font-family: "Pretendard Variable";}
.fa-solid, .fa-regular, .fa-light, .fa-thin{ line-height: inherit;}
.wrap{ position: relative;}
.sections{ position: relative;}
.sections:nth-child(2n){ background: var(--color-main);}


/* 백그라운드 픽시드 ios 계열 적용 하는 방법 */
.fixed_bg{ position: fixed; top: 0; left: 50%; width: 100%; height: 100vh; transform: translateX(-50%);}
.sections:has(> .fixed_bg){ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
/* 여기까지 픽시드 세팅 */


.sections.near .width_con{ padding-bottom: var(--mrgn-x4);}
.sections.near + .sections .width_con{ padding-top: var(--mrgn-x4);}

.width_con{ position: relative; margin: 0 auto; width: var(--basic-width); padding: var(--mrgn-x8) 0;}

/*//지울 곳---------------------------*/
/* .sections:nth-child(2n), */
/* .width_con{ background: var(--color-k-015);} */
/*---------------------------지울 곳//*/

h1, h2, h3, h4, h5, h6{ position: relative;}
h1, h2, h3{ line-height: .815em;}
h4, h5, h6{ line-height: 1.25em;}
/* 인트로에 대제목 이미지로 할 때 기본 텍스트는 적어놓고 안보이게 세팅 */
/* h1{ font-size:  0; color: transparent; text-indent: -999999px; } */
h1{ font-size:  5.5em; font-weight: 900;}
h2{ font-size: 4.25em; font-weight: 600;}
h3{ font-size:  1.8em; font-weight: 400;}
h4{ font-size: 1.35em; font-weight: 400;}
h5{ font-size:  1.1em; font-weight: 500;}
h6{ font-size:   .9em; font-weight: 600;}

b{ font-size: inherit; font-weight: 700; color: var(--color-point); line-height: inherit;}
p{ font-weight: 500; color: var(--color-w-065);}
hr{ margin: var(--mrgn-x2) auto; border: none; border-top: 1px solid var(--color-k); border-bottom: 1px solid var(--color-w-015); height: 0;}

.center{ text-align: center;}
.sticky { position: sticky !important; top: 100px;}
.line{width: var(--basic-width); height: 1px; box-shadow: 0 -1px 0 0 var(--color-k-035); background: var(--color-w-015); margin: var(--mrgn-x2) auto;}

*:before{ pointer-events: none;}

.no_mgtp{ margin-top: 0 !important;}
.no_mgbt{ margin-bottom: 0 !important;}

.title_con{ position: relative;}
.title_con.drop{ filter: drop-shadow(0 0 2px var(--color-w-050)) drop-shadow(0 0 2px var(--color-w-050)) drop-shadow(0 0 3px var(--color-w-050)) drop-shadow(0 0 3px var(--color-w-050));}

.title_con + *{ margin-top: var(--mrgn-x4) !important;}
.title_con h1{ margin-bottom: var(--mrgn-x2);}
.title_con h2{ margin-bottom: var(--mrgn-x2); line-height: 1em;}
.title_con h3{ margin-bottom: var(--mrgn); color: var(--color-point);}
/* .title_con h3:before{ position: absolute; content: ''; top: calc(var(--mrgn-x2) * -1); left: 0; width: 24px; aspect-ratio: 1/1; background: url(../img/logo_02.svg) no-repeat 50% 50% / cover; } */
.title_con.center h3:before{ left: 50%; margin-left: calc(var(--mrgn) * -1);}
.title_con h4{ margin-bottom: var(--mrgn); color: var(--color-w-085);}
/* .title_con h4:before{ position: absolute; top: calc(var(--mrgn) * -1); left: 0; content: ''; width: var(--mrgn-x2); height: 3px; background: var(--color-point);} */
.title_con.center h4:before{ left: 50%; transform: translateX(-50%);}
.title_con h5{ margin-bottom: var(--mrgn); color: var(--color-w-075);}
.title_con h6{ color: var(--color-w-065);}

.sections .width_con .title_con h2,
.sections .width_con .title_con h3,
.sections .width_con .title_con h4,
.sections .width_con .title_con h5,
.sections .width_con .title_con h6{ opacity: 1; filter: blur(0); transform: translateY(0); transition: all 1200ms ease-out;}
.sections .width_con .title_con h4:before{ transition: inherit;}

.sections .width_con .title_con h1,
.sections .width_con .title_con h2{ transition-delay: 200ms;}
.sections .width_con .title_con h4{ transition-delay: 400ms;}
.sections .width_con .title_con h5{ transition-delay: 600ms;}
.sections .width_con .title_con h6{ transition-delay: 800ms;}

.sections.wait_scroll .width_con .title_con h2,
.sections.wait_scroll .width_con .title_con h3,
.sections.wait_scroll .width_con .title_con h4,
.sections.wait_scroll .width_con .title_con h5,
.sections.wait_scroll .width_con .title_con h6{ opacity: 0; filter: blur(4px); transform: translateY(var(--mrgn-x2));}
.sections.wait_scroll .width_con .title_con h4:before{ width: var(--mrgn-x8);}

ul.v_con{ width: calc(100% + var(--mrgn-x2)); margin: 0 calc(var(--mrgn) * -1) calc(var(--mrgn-x2) * -1);}
ul.v_con > li.cells{ position: relative; display: inline-block; margin: 0 var(--mrgn) var(--mrgn-x2); width: calc(100% - var(--mrgn-x2)); box-sizing: border-box;}
ul.v_con > li.cells.box{ border-radius: var(--mrgn); transition: all 100ms ease-in-out;}
ul.v_con > li.cells.box > .title_con{            padding: var(--mrgn-x4) var(--mrgn-x2);}
ul.v_con > li.cells.box > .text_con{             padding: var(--mrgn-x2) var(--mrgn-x2);}
ul.v_con > li.cells.box > .text_con:has(> .tag){ padding: var(--mrgn-x4) var(--mrgn-x2);}





.sections .width_con ul.v_con > li{ opacity: 1; filter: blur(0); transform: translateY(0); transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;}

.sections .width_con ul.v_con > li:nth-child(1){ transition-delay: 100ms;}
.sections .width_con ul.v_con > li:nth-child(2){ transition-delay: 200ms;}
.sections .width_con ul.v_con > li:nth-child(3){ transition-delay: 400ms;}
.sections .width_con ul.v_con > li:nth-child(4){ transition-delay: 600ms;}

.sections.wait_scroll .width_con ul.v_con > li.cells{ opacity: 0; filter: blur(4px); transform: translateY(var(--mrgn-x2)); transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;}



ul.v_con > li.cells.box:has(> a){ cursor: pointer;}
ul.v_con > li.cells.box:has(> .tag.small){ border-radius: var(--mrgn-x2);}
ul.v_con > li.cells.box:hover:has(> a){}
ul.v_con > li.cells.box:active:has(> a){ transform: scale(.975);}

ul.v_con > li.cells.box > a{ display: block; aspect-ratio: inherit; border-radius: inherit; transition: inherit; box-shadow: 0 10px 30px -10px var(--color-k-065); filter: brightness(1); text-decoration: none;}
/*바뀌는 속성만 적어주세요*/
ul.v_con > li.cells.box:hover > a{ box-shadow: 0 10px 30px -10px var(--color-k); filter: brightness(1.1);}
ul.v_con > li.cells.box:active > a{ box-shadow: 0 1px 3px -1px var(--color-k); filter: brightness(.9);}
ul.v_con > li.cells > img,
ul.v_con > li.cells > a > img{ width: 100%; border-radius: inherit;}


ul.v_con.two_con   > li.cells{ width: calc(    50% - var(--mrgn-x2));}
ul.v_con.three_con > li.cells{ width: calc(33.333% - var(--mrgn-x2));}
ul.v_con.four_con  > li.cells{ width: calc(    25% - var(--mrgn-x2));}
ul.v_con.six_con   > li.cells{ width: calc(16.666% - var(--mrgn-x2));}
ul.v_con.ub_two_con > li.cells:nth-child(2n-1){  width: calc(33.333% - var(--mrgn-x2));}
ul.v_con.ub_two_con > li.cells:nth-child(2n){    width: calc(66.666% - var(--mrgn-x2));}
ul.v_con.rub_two_con > li.cells:nth-child(2n-1){ width: calc(66.666% - var(--mrgn-x2));}
ul.v_con.rub_two_con > li.cells:nth-child(2n){   width: calc(33.333% - var(--mrgn-x2));}

ul.v_con.inrub_two_con > li.cells:nth-child(2n-1){ width: calc(60% - var(--mrgn-x2));}
ul.v_con.inrub_two_con > li.cells:nth-child(2n){   width: calc(40% - var(--mrgn-x2));}
ul.v_con.inub_two_con > li.cells:nth-child(2n-1){  width: calc(40% - var(--mrgn-x2));}
ul.v_con.inub_two_con > li.cells:nth-child(2n){    width: calc(60% - var(--mrgn-x2));}

.text_con{ width: 100%; border-radius: inherit; box-sizing: border-box;  padding: var(--mrgn-x2); }
/* max-width: calc(var(--basic-width) / 2); 전체 길이에 반만큼만 영역 설정 */
/* .text_con h5 + h5 { margin-top: calc(var(--mrgn-half) / 2);} */

/* ul.v_con > li.cells .text_con:has(> h4){ padding: var(--mrgn);} */
ul.v_con > li.cells .text_con h3,
ul.v_con > li.cells .text_con h4,
ul.v_con > li.cells .text_con h5,
ul.v_con > li.cells .text_con h6{ line-height: 1.15em; margin-bottom: var(--mrgn);}
ul.v_con > li.cells .text_con h5:last-child{ margin-bottom: 0;}
ul.v_con > li.cells .text_con h3{ font-size: 1.25em; color: var(--color-w-065);}
ul.v_con > li.cells .text_con h4{ font-size: 2.5em; font-weight: 600; margin-bottom: var(--mrgn-x2);}
ul.v_con > li.cells .text_con h5{ color: var(--color-w-075);}
ul.v_con > li.cells .text_con h6{ color: var(--color-w-065);}
ul.v_con > li.cells .text_con span{ color: var(--color-point); font-size: .8em;}


.sections.dark{}
.sections.dark .title_con h3{ color: var(--color-k);}
.sections.dark .title_con h4{ color: var(--color-k-075);}

.sections.dark .hover_card{ color: var(--color-k);}
.sections.dark .hover_card > .sub_title{ font-size: 1.25em; color: var(--color-k-065); margin-bottom: var(--mrgn); line-height: var(--mrgn);}
.sections.dark .hover_card > .title{ font-size: 2.5em; color: var(--color-k);  font-weight: 600; margin-bottom: var(--mrgn); line-height: var(--mrgn-x2);}
.sections.dark .hover_card > .icon{ color: var(--color-k-085);}
.sections.dark .hover_card > .icon span{ font-size: 50px; font-weight: 700;}
.sections.dark .hover_card > .body{ font-size: 16px; font-weight: 500; color: var(--color-k-075); line-height: 24px;}

.hover_card{ color: var(--color-w);}
.hover_card > .sub_title{ font-size: 1.25em; color: var(--color-w-065); margin-bottom: var(--mrgn); line-height: var(--mrgn);}
.hover_card > .title{ font-size: 2.5em; color: var(--color-w);  font-weight: 600; margin-bottom: var(--mrgn); line-height: var(--mrgn-x2);}
.hover_card > .icon{ color: var(--color-w-085);}
.hover_card > .icon span{ font-size: 50px; font-weight: 700;}
.hover_card > .body{ font-size: 16px; font-weight: 500; color: var(--color-k-075); line-height: 24px;}


.ratio_1x1{  aspect-ratio:  1/1;}
.ratio_1x2{  aspect-ratio:  1/2;}
.ratio_1x3{  aspect-ratio:  1/3;}
.ratio_2x1{  aspect-ratio:  2/1;}
.ratio_3x2{  aspect-ratio:  3/2;}
.ratio_3x4{  aspect-ratio:  3/4;}
.ratio_4x3{  aspect-ratio:  4/3;}
.ratio_16x9{ aspect-ratio: 16/9;}
.ratio_9x16{ aspect-ratio: 9/16;}

/* 구글아이콘 */
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}



.glass{ position: relative; overflow: hidden; background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: inherit; border: 1px solid rgba(255, 255, 255, .2);}
.glass:has(> ul){ border-radius: var(--mrgn-x2) !important;}
.glass:before{ content: ''; position: absolute; border-radius: inherit; width: 100%; height: 100%; top: -1px; left: -1px; border: 1px solid rgba(255, 255, 255, 1); mask-image: radial-gradient(circle at -0% 0%, black 0%, transparent 20%); pointer-events: none;}
.glass > .grdnt{ position: absolute; width:100%; height: 100%; border-radius: inherit; overflow: hidden; pointer-events: none;}
.glass > .grdnt:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -50%; background: linear-gradient(45deg, #9e6dbf 0, #8173cc 100%); mask-image: linear-gradient(135deg, transparent 20%, black 50%, transparent 80%); opacity: 0; animation: grdnt 9000ms linear infinite; pointer-events: none;}

ul > li.cells:first-child .grdnt:before{}
ul > li.cells:nth-child(2) .grdnt:before{ animation-delay: 900ms;}
ul > li.cells:nth-child(3) .grdnt:before{ animation-delay: 400ms;}
.pd{ padding: var(--mrgn-x2); box-sizing: border-box;}
@keyframes grdnt{
	0% {   left: -100%; opacity:  0.1;}
	20% {  left:   50%; opacity: 0.25;}
	40% {  left:  150%; opacity:  0.1;}
	100% { left:  150%; opacity:  0.1;}
}

.glow{ position: relative; border-radius: inherit; width: 100%; height: 100%; box-shadow: 0 0 12px var(--color-k-035); scale: 1; transition: all 150ms ease-out;}
.glow:active{ scale: .975;}
.glow:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -150%; background: var(--color-w-025); opacity: 0.1; mask-image: linear-gradient(135deg, transparent 20%, black 50%, transparent 80%); transition: all 400ms linear; z-index: 1;}
.glow:hover:before{ left: 150%; transition: all 400ms linear;}
.glow > img{ width: 100%; height: 100%;}
.base{ z-index: 2;}

/* 그리드 세팅 */
:root{
	/* 그리드 */
	--total-margin: calc(var(--mrgn-x2) * 11);
	--page-width: calc(var(--basic-width) - var(--total-margin));
	--column: calc(var(--page-width) / 12);
}
/* *{margin: 0; padding: 0;}
ul, ol, li {list-style: none;} */
ul.g_con{ width: var(--basic-width); margin: 0 auto; display: grid; grid-gap: var(--mrgn-x2); grid-template-columns: repeat(6, 1fr); overflow: hidden;}
ul.g_con > li.cells{ background: #fcc; border-radius: 0;}
ul.g_con > li.cells.square{ aspect-ratio: 1/1;}

.g_ratio_1x1{padding-top: 100%;}
.g_ratio_1x2{padding-top: calc(200% + (var(--mrgn) * 2));}
.g_ratio_1x3{padding-top: calc(300% + (var(--mrgn) * 4));}

.g_ratio_2x1{padding-top: calc(50% - var(--mrgn));}
.g_ratio_3x1{padding-top: calc(33.3333% - (var(--mrgn) * 1.3));}
.g_ratio_4x1{padding-top: calc(25% - (var(--mrgn) * 1.5));}
.g_ratio_5x1{padding-top: calc(20% - (var(--mrgn) * 1.6));}
.g_ratio_6x1{padding-top: calc(16.6666% - (var(--mrgn) * 1.666));}

ul.g_con .cells { position: relative; }
ul.g_con .cells .title{ position: absolute; width: 100%; bottom: 0; left: 0; padding: var(--mrgn-half);  box-sizing: border-box; border-radius: inherit; overflow: hidden;}
ul.g_con .cells .title{ padding: var(--mrgn-half); border-radius: inherit; background: linear-gradient(180deg, var(--color-k-000), var(--color-k-015)); color: var(--color-w); text-shadow: 0 0 10px var(--color-k);}
ul.g_con .cells .title:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(30px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 50%); mask-image: linear-gradient(180deg, transparent 0%, #fff 50%);}


#header.sections.section_00,
#header.sections.section_00 .width_con a.btn_home img,
#header.sections.section_00 .width_con ul.nav_lnb,
#header.sections.section_00.scrolled,
#header.sections.section_00.scrolled .width_con a.btn_home img,
#header.sections.section_00.scrolled .width_con ul.nav_lnb{ transition: all 250ms linear;}
#header.sections.section_00{ position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 999; transition: all 200ms ease-in-out; overflow: hidden;}
#header.sections.section_00:hover{}
#header.sections.section_00.scrolled{ width: 100%; height: 60px; background: var(--color-point-050); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px var(--color-k-015); left: 0; margin: 0 0 0 0; margin-top: 0px;}
#header.sections.section_00.scrolled:hover{ background: var(--color-k-025); box-shadow: 0 10px 30px -10px var(--color-k-075);}
#header.sections.section_00 .width_con{ height: 100%; padding: 0; z-index: 1; transition: inherit;}
#header.sections.section_00 .width_con a.btn_home{ position: absolute; transition: inherit; top: 50%; transform: translateY(-50%)}
#header.sections.section_00.scrolled .width_con a.btn_home{}
#header.sections.section_00 .width_con a.btn_home{ color: var(--color-w); font-size: 28px; font-weight: 600; text-decoration: none;}
/* bi image */
/* #header.sections.section_00 .width_con a.btn_home img{ height: 50px;} */


#header.sections.section_00 .width_con > ul{ position: absolute; right: 0;}
#header.sections.section_00 .width_con > ul > li{ display: inline-block; transition: all 100ms ease-in-out; color: var(--color-w-035);}
#header.sections.section_00 .width_con > ul > li > a{ display: block; color: var(--color-w); text-decoration: none; transition: inherit; transform: translateY(0);}
#header.sections.section_00 .width_con > ul:hover > li > a{ color: var(--color-w-050);}
#header.sections.section_00 .width_con > ul > li:hover > a{ color: var(--color-w);}
#header.sections.section_00 .width_con > ul > li:active > a{ transform: translateY(1px);}
#header.sections.section_00.scrolled .width_con > ul > li:hover > a{ color: var(--color-point);}
#header.sections.section_00.scrolled:hover .width_con ul.nav_lnb{ transition: inherit;}

#header.sections.section_00 .width_con ul.nav_lnb{ top: 32px; }
#header.sections.section_00.scrolled .width_con ul.nav_lnb{ top: 22px;}
#header.sections.section_00 .width_con ul.nav_lnb > li{ margin-left: var(--mrgn-x2);}
#header.sections.section_00 .width_con ul.nav_lnb > li > a{ position: relative; font-size: 1.25em; font-weight: 500;}





#footer.sections.section_08{ position: fixed; bottom: 0; left: 0; width: 100%; background: var(--color-k);}
#footer.sections.section_08:before{}
#footer.sections.section_08 .width_con > .logo{ color: var(--color-w-075); font-size: 1.2em; font-weight: 500; line-height: 1.75em; padding-bottom: var(--mrgn-x2);}
#footer.sections.section_08 .width_con > .logo b{ color: var(--color-w); font-size: 2em; font-weight: 700;}
#footer.sections.section_08 .width_con > .copy{ color: var(--color-w-050); font-weight: 300;}
#footer.sections.section_08 .width_con > .copy b{ color: var(--color-w-065);}
#footer.sections.section_08 .width_con ul.v_con > li{ padding-bottom: var(--mrgn-x2);}
#footer.sections.section_08 .width_con ul.v_con > li.info{}
#footer.sections.section_08 .width_con ul.v_con > li.info h6{ display: block; color: var(--color-w-075); font-size: 1em; font-weight: 400; line-height: 1.5em; word-spacing: 0.5em;}
#footer.sections.section_08 .width_con ul.v_con > li.info b{ color: var(--color-w); font-weight: 500;}

#footer.sections.section_08 .width_con ul.v_con > li.legal{ vertical-align: bottom; text-align: right; color: var(--color-w-035); line-height: 1.5em;}
#footer.sections.section_08 .width_con ul.v_con > li.legal > a{ display: inline-block; margin: 0 var(--mrgn); color: var(--color-w-075); line-height: inherit; text-decoration: none; transform: scale(1); filter: brightness(1);}
#footer.sections.section_08 .width_con ul.v_con > li.legal a:hover{ color: var(--color-w); text-decoration: underline;}
#footer.sections.section_08 .width_con ul.v_con > li.legal a:active{ transform: scale(.8); filter: brightness(.8);}