@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');
*{ scroll-behavior: smooth;}
:root{
	--mrgn-half: calc(var(--mrgn) / 2);  /*9px*/
	--mrgn:      18px;
	--mrgn-x2:   calc(var(--mrgn) * 2); /*36px*/
	--mrgn-x4:   calc(var(--mrgn) * 4); /*72px*/
	--mrgn-x8:   calc(var(--mrgn) * 8);/*144px*/

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

	--color-main:  #f8f8f8;
	--color-point-1: #707070;
	--color-point-2: #1d1d1d;
	--color-sub:   #f6f6f6;

	--color-w-000: rgba(255, 255, 255, 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(0, 0, 0, 0);
	--color-k-005: rgba(0, 0, 0, .05);
	--color-k-015: rgba(0, 0, 0, .15);
	--color-k-025: rgba(0, 0, 0, .25);
	--color-k-035: rgba(0, 0, 0, .35);
	--color-k-050: rgba(0, 0, 0, .5);
	--color-k-065: rgba(0, 0, 0, .65);
	--color-k-075: rgba(0, 0, 0, .75);
	--color-k-085: rgba(0, 0, 0, .85);
	--color-k:   #000;
}
::selection{ color: var(--color-main); text-shadow: none; background: var(--color-point-1);}
html, body{ position: relative; min-width: var(--basic-width); background: var(--color-main); color: var(--color-point-2); font-size: var(--basic-font-size); font-family: "Dosis"; max-width: margin 0 auto;}
/*노이즈/색상 이펙트 커버*/
.effect_cover{position: fixed;top: 0;left: 50%;width: 100%;height: 100%;transform: translateX(-50%);pointer-events: none;z-index: 99999999;}
.flim_grain_cover{transform: translateX(-50%) scale(1.1);background: url(../img/cover_noise.webp) no-repeat 50% 50% / cover;-webkit-mix-blend-mode: overlay;mix-blend-mode: overlay;opacity: .25;}
.flim_color_cover{transform: translateX(-50%) scale(1.1);background: url(../img/cover_color.webp) no-repeat 50% 50% / cover;-webkit-mix-blend-mode: soft-light;mix-blend-mode: soft-light;opacity: .35;}

.fa-solid, .fa-regular, .fa-light, .fa-thin{ line-height: inherit;}
.wrap{ position: relative;}
.sections{ position: relative;}
.width_con{ position: relative; margin: 0 auto; width: var(--basic-width); padding: var(--mrgn-x8) 0; z-index: 2;}
.light{background: var(--color-main);}

/*꾸미는 곳 ----(그라디언트, 공 이미지)*/

h1, h2, h3, h4, h5, h6{ position: relative;}
h1, h2, h3{ font-family: "Dosis"; line-height: .815em; text-transform: uppercase;}
h4, h5, h6{ line-height: 1.25em;}
h1{ font-size:  12.5em; font-weight: 800;}
h2{ font-size:    6em; font-weight: 700;}
h3{ font-size:    2em; font-weight: 600;}
h4{ font-size: 1.45em; font-weight: 500;}
h5{ font-size:    1em; font-weight: 400;}
h6{ font-size:  .85em; font-weight: 500;}

.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-x4) auto;}

.title_con{ position: relative;}
.title_con + *{ margin-top: var(--mrgn-x4) !important;}
.title_con h1{ margin-bottom: var(--mrgn-x2);}
.title_con h2{ margin-bottom: var(--mrgn-x2);}
.title_con h3{ margin-bottom: var(--mrgn); color: var(--color-point-1);}
.title_con h4{ margin-bottom: var(--mrgn);}
.title_con h4:before{ position: absolute; top: calc(var(--mrgn) * -1); left: 0; content: ''; width: var(--mrgn-x2); height: 3px; background: var(--color-point-1);}
.title_con.center h4:before{left: 50%; transform: translateX(-50%);}
.title_con h5{}
.title_con h6{}

/*텍스트 색수차*/
.chromatic_aberration{}
.chromatic_aberration *{position: relative; z-index: 1; font-size: inherit; line-height: inherit;}
.chromatic_aberration > div:before,
.chromatic_aberration > div:after{position: absolute; content: attr(title); font-family: inherit; font-weight: inherit; font-size: inherit; white-space:pre; line-height: inherit; word-break: keep-all; white-space: pre-line; opacity: 0.5; top: 0; left: 0; width: 100%; filter: blur(2px);}
.chromatic_aberration > div:before{ color: #0ff; transform: translateX(2px);}
.chromatic_aberration > div:after{ color: #f00; transform: translateX(-3px);}
.chromatic_aberration_filter{filter: drop-shadow(2px 0 1px rgba(0, 255, 255, .5)) drop-shadow(-1px 0 1px rgba(255, 0, 0, .5)) !important;}
.chromatic_aberration_text{/* text-shadow: 2px 0 2px rgba(0, 255, 255, .5), -3px 0 2px rgba(255, 0, 0, .5) !important; */}

.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)); }
ul.v_con > li.cells.box{ border-radius: var(--mrgn); transform: scale(1); transition: all 100ms ease-in-out;}



ul.v_con > li.cells.box:has(> a){ cursor: pointer;}
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) saturate(0); text-decoration: none; transition: all 200ms ease-in-out;}
ul.v_con > li.cells.box:hover > a{ box-shadow: 0 10px 30px -10px var(--color-k); filter: brightness(1.1) saturate(1); transition: all 200ms ease-in-out;}/*바뀌는 속성만 적어주세요*/
ul.v_con > li.cells.box:active > a{ box-shadow: 0 1px 3px -1px var(--color-k); filter: brightness(.9); transition: all 100ms ease-in-out;}
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));}


.text_con{ position: absolute; bottom: 0; left: 0; padding: var(--mrgn-x2); width: 100%; box-sizing: border-box; border-radius: inherit;}
ul.v_con > li.cells .text_con:has(> h4){text-transform: uppercase;}
ul.v_con > li.cells .text_con h4,
ul.v_con > li.cells .text_con h5,
ul.v_con > li.cells .text_con h6{ color: var(--color-K); line-height: 1.15em; margin-top: var(--mrgn-half);}
ul.v_con > li.cells .text_con h4{}
ul.v_con > li.cells .text_con h5{}
ul.v_con > li.cells .text_con h6{}


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

/*물결*/
.wave_con_1{ position:absolute; left: 0; height: 15px; width: 100%; pointer-events: none;}
.wave_con_1 svg{}
.wave_con_1 .wave { position: absolute; width: inherit; left:0; top:0; right:0; height: auto; pointer-events: none;}
.wave_con_1 .wave.wave_4{ top:-150px;}
.wave_con_1 .wave.wave_3{ top:-145px;}
.wave_con_1 .wave.wave_2{ top:-140px;}
.wave_con_1 .wave.wave_1{ top:-135px;}
.wave_con_1 .wave + .wave { z-index: 1; }

.wave_con_2{ position:absolute; left: 0; height: 15px; width: 100%; pointer-events: none;     bottom: calc(var(--mrgn-x8) - var(--mrgn-half));}
.wave_con_2 svg{}
.wave_con_2 .wave { position: absolute; width: inherit; left:0; top:0; right:0; height: auto; pointer-events: none;}
.wave_con_2 .wave.wave_4{ top:-150px;}
.wave_con_2 .wave.wave_3{ top:-145px;}
.wave_con_2 .wave.wave_2{ top:-140px;}
.wave_con_2 .wave.wave_1{ top:-135px;}
.wave_con_2 .wave + .wave { z-index: 1; }

.link{}
.link > a{}
.link > a > i{position: absolute; top: 0; right: 0; margin: var(--mrgn-x2) var(--mrgn-x2) 0 0; font-size: 22px; color: var(--color-k);}

#header.sections.section_00,
#header.sections.section_00.scrolled:hover{ position: fixed; top: 0; left: 50%; width: 100%; height: 100px; transform: translateX(-50%); z-index: 999; transition: all 200ms ease-in-out; box-shadow: 0 0 0 0 var(--color-k-000); overflow: hidden; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);}
#header.sections.section_00.scrolled{ width: 1400px; height: 80px; box-sizing: border-box; border: 2px solid var(--color-point-1); top: var(--mrgn); border-radius: var(--mrgn-x2)}
#header.sections.section_00:hover{box-shadow: 0 10px 30px -10px var(--color-k);}
#header.sections.section_00.scrolled:hover{ width: 1400px; height: 90px; top: var(--mrgn);box-sizing: border-box; border: 2px solid var(--color-point-1);}

#header.sections.section_00:before,
#header.sections.section_00:after{position: absolute; content: ''; width: 100%; height: 100%; transition: inherit;}
#header.sections.section_00:before{ height: 100%; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);}
#header.sections.section_00:after{ top: -100%; height: 200%; background: var(--color-sub);  opacity: 0;}
#header.sections.section_00:hover:after{ top: -100%; height: 200%; background: var(--color-sub);  opacity: .65;}

#header.sections.section_00.scrolled:before,
#header.sections.section_00.scrolled:after{}
#header.sections.section_00.scrolled:before{-webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);}
#header.sections.section_00.scrolled:after,
#header.sections.section_00:hover:after{ top: 0%; opacity: .65;}
#header.sections.section_00:hover:after{ opacity: 1;}

#header.sections.section_00 .width_con{ position: relative; width: 1200px; margin: 0 auto; padding: 0; z-index: 1; transition: inherit;}
#header.sections.section_00 .width_con a.btn_home,
#header.sections.section_00.scrolled:hover .width_con a.btn_home{ position: absolute; height: 65px; top: 8px; transition: inherit;}
#header.sections.section_00.scrolled .width_con a.btn_home{ height: 50px; top: 10px;}
#header.sections.section_00 .width_con a.btn_home img{ height: 100%;}

#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-point-2);}
#header.sections.section_00 .width_con > ul > li > a{ display: block; color: var(--color-point-2); text-decoration: none; transition: inherit; text-transform: uppercase; transform: translateY(0);}
#header.sections.section_00 .width_con > ul:hover > li > a{ color: var(--color-point-1);}
#header.sections.section_00 .width_con > ul > li:hover > a{ color: var(--color-point-2);}
#header.sections.section_00 .width_con > ul > li:active > a{ transform: translateY(1px);}

#header.sections.section_00 .width_con ul.nav_gnb,
#header.sections.section_00.scrolled:hover .width_con ul.nav_gnb{ top: 16px; transition: inherit; opacity: 1; filter: blur(0); pointer-events: all;}
#header.sections.section_00.scrolled .width_con ul.nav_gnb{ top: 8px; opacity: 0; filter: blur(4px); pointer-events: none;}
#header.sections.section_00 .width_con ul.nav_gnb > li{ margin-left: var(--mrgn);}
#header.sections.section_00 .width_con ul.nav_gnb > li > a{}

#header.sections.section_00 .width_con ul.nav_lnb{ top: 40px; transition: inherit;}
#header.sections.section_00.scrolled:hover .width_con ul.nav_lnb{ top: 35px; transition: inherit;}
#header.sections.section_00.scrolled .width_con ul.nav_lnb{ top: 30px;}
#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.15em; font-weight: 500;}
#header.sections.section_00 .width_con ul.nav_lnb > li a:after{ position: absolute; content: ''; bottom: -6px; left: 0; width: 100%; height: 2px; background: var(--color-point-1); opacity: 0; filter: blur(2px); border-radius: 1px; transition: all 200ms ease-out; }
#header.sections.section_00 .width_con ul.nav_lnb > li:hover a:after{bottom: -2px; opacity: 1; filter: blur(0); }