@charset 'utf-8';

@font-face {
 font-family: 'NanumSquareNeoVariable';
 src: url(./Mlang/font/NanumSquareNeo-Variable.eot);
 src: local('☺'),
      url(./Mlang/font/NanumSquareNeo-Variable.eot?#iefix) format('embedded-opentype'),
      url(./Mlang/font/NanumSquareNeo-Variable.woff2) format('woff2'),
      url(./Mlang/font/NanumSquareNeo-Variable.woff) format('woff'),
      url(./Mlang/font/NanumSquareNeo-Variable.ttf) format('truetype');
} 

html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

/* inline */
img {display:inline-block;border:0 none;}
cite, code, dfn, del, ins, label, q, strong {display:inline-block;}
cite, dfn {font-style:normal;}
sub {vertical-align:bottom;font-family:helvetica;}
sup {vertical-align:top;font-family:helvetica;}
hr {display:none;}

/* table */
table { border-spacing:0; border-collapse:separate; border-collapse:collapse; }
caption { display:none; }
th,
td { padding:0; vertical-align:top; text-align:left; font-weight:normal; } /* opara height=18px */

/* list */
dd, dl, ol, ul, li {margin:0;padding:0;}
li {list-style-type:none;}

html, body { margin: 0; padding: 0; font-family:'NanumSquareNeoVariable'; background:#fff; }

main section{ position: relative; min-height: 100vh; overflow: hidden; }
main section canvas{ position: absolute; inset: 0;width: 100%; height: 100%; z-index: 0; }
main section > *:not(canvas){ position: relative;z-index: 1; }

/* 하트 s */
.mouse-heart{ position:fixed; width:12px; height:12px; background:#dc5555; transform:rotate(45deg); pointer-events:none; animation:heart-float 1s ease-out forwards; z-index:9999; }
.mouse-heart::before,
.mouse-heart::after{ content:""; position:absolute; width:12px; height:12px; background:#dc5555; border-radius:50%; }
.mouse-heart::before{ top:-6px; left:0; }
.mouse-heart::after{ left:-6px; top:0; }
@keyframes heart-float{
  0%{ opacity:1; transform:translateY(0) scale(1) rotate(45deg); }
  100%{ opacity:0; transform:translateY(-30px) scale(0.4) rotate(45deg); }
}
/* 하트 e */

.section_box a { color:#fff; }
.section_box a:hover { color:#ff0000; }

section h3::after{
	content:attr(data-text);
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	color:transparent;
	-webkit-text-stroke:2px transparent;
	background:linear-gradient(120deg,transparent 40%,rgba(100,100,100,.95) 50%,transparent 60%);
	-webkit-background-clip:text;
	background-size:200% 100%;
	animation:outlineShine 2.2s linear infinite;
	pointer-events:none;
}
@keyframes outlineShine{
	0%{ background-position:-200% 0; }
	100%{ background-position:200% 0; }
}


.seo-hidden{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ===== PC ===== */
@media (min-width:1024px){

	section h3 {
		text-align:right; font-size:80px; font-weight:bold; letter-spacing:0.05em; line-height:1em;
		color:transparent; color:#fff; position:relative; overflow:hidden;
	}

	header { position: fixed; top:0; left:0; width: 100%; height:85px; z-index:99999991; }
	.header-back { position:absolute;  z-index:999999911; width: 100%; height:85px; background:#000; }
	.header-div {  position:absolute;  z-index:999999921;  width: 100%;  }
	.header-div ul { text-align:left; }
	.header-menu, .header-back{opacity:0; pointer-events:none;transition:.3s}
	.header-menu.show {opacity:1; pointer-events:auto}
	.header-back.show {opacity:0.7; pointer-events:auto}
	.header-li-left { display:inline-block; float:left; width:30%; text-align:left; }
	.header-li-right { display:inline-block; float:left; width:70%;  text-align:right; }
	.header-li-left dl {  text-align:left; display:flex; margin-left:30px; margin-top:20px; }
	.header-li-left dt,  .header-li-left dd { text-align:left; display:inline-block; }
	.header-li-left img { cursor:pointer; height:44px; margin-right:10px; }
	.header-li-left h1  { cursor:pointer; color:#fff; font-size:16px; line-height: 1.3;  letter-spacing: 0.2em; }	
	.header-menu { text-align:right; display:block; margin-top:26px;  margin-right:30px; }
	.menu-pc-text {
		cursor:pointer; color:#fff; font-size:22px; line-height:1;  letter-spacing: 0.01em; 
		margin-left:60px; 
		text-shadow: 1px 1px 1px #000, 0 0 0.1em #000, 0 0 0.1em #000;
	}	
	
	footer { 
		text-align:center; padding-top:30px; padding-left:30px; padding-right:30px;
		background:#181818; height:625px; background-size:100% 625px; 
		background-image: url('../images/foot_pc_back.jpg'); background-repeat: no-repeat; background-position:right top; 
	}
	.layout_foots { text-align:left; width:1300px; }
	.layout_foots_1 {
		 text-align:left; color:#da433e; font-size:18px; font-weight:bold; letter-spacing: 0.05em; line-height:1em; 
	}
	.layout_foots_2 {
		margin-top:30px;
		text-align:left; color:#fff; font-size:30px;  letter-spacing: 0.01em; line-height:1.5em; 
	}
	.layout_foots_2 span { font-size:18px;  }
	.layout_foots_22 {
		margin-top:30px;
		text-align:left; color:#fff; font-size:14px;  letter-spacing: 0.01em; line-height:1.6em; 
	}
	.layout_foots_22 span {  font-size:16px;  font-weight:bold; }
	.layout_foots_3 { margin-top:60px; width:100%; display:inline-block; }
	.layout_foots_3 li { float:left; }
	.layout_foots_box{
		width:250px; height:auto; padding:10px 15px 10px 15px; 
		margin-right:50px; border:1px solid #555; box-sizing:border-box; display:flex; align-items:center; 
	}
	.layout_foots_box:hover { border:1px solid #da433e; cursor:pointer; }
	.layout_foots_box dd { float:left; }
	.layout_foots_box_l { width:80%; text-align:left; color:#fff; font-size:13px;  letter-spacing: 0.01em; line-height:1.2em; }
	.layout_foots_box_r { width:20%; text-align:right; } .layout_foots_box_r img { height:10px; }
	.layout_foots_4 { margin-top:60px; width:100%; display:inline-block; }
	.layout_foots_4 li { float:left; text-align:left; }
	.layout_foots_4_li_1 img { height:40px; }
	.layout_foots_4_li_2, .layout_foots_4_li_3, .layout_foots_4_li_4, .layout_foots_4_li_5 { padding-left:100px; }
	.layout_foots_li_title {  
		margin-bottom:15px;
		color:#fff; font-size:14px;  letter-spacing: 0.01em; line-height:1.0em; 
	} 
	.layout_foots_li_cont1, .layout_foots_li_cont1 a { color:#fff; font-size:24px;  letter-spacing: 0.01em; line-height:1.0em;  }
	.layout_foots_li_cont2, .layout_foots_li_cont2 a { color:#b3b4b3; font-size:12px;  letter-spacing: 0.01em; line-height:1.0em;  }	
	.layout_foots_li_cont22, .layout_foots_li_cont22 a { color:#b3b4b3; font-size:14px;  letter-spacing: 0.01em; line-height:1.3em;  }	
	
	.section_txt { text-align:center; color:#fff; font-size:30px; letter-spacing:0.01em; line-height:1.7em; }
	.section_txt b { font-weight:bold; font-size:36px; }
	.section_txt small { font-size:24px; }
	.section_txt_pink { color:#da433e; }
	.section_txt_red { color:#ff0000; }
	.section_txt_y { color:#ffe958; }
	.section_box{
		padding:15px 30px 15px 30px; border-radius:30px; 
		background:rgba(0,0,0,.5);
		color:#fff; font-size:30px; letter-spacing:0.01em; line-height:1.7em;
	}
	.section_proc { color:#fff; font-size:30px; letter-spacing:0.01em; line-height:1em; }
	.section_proc span {
		padding:15px 30px 15px 30px; border-radius:30px; 
		background:rgba(0,0,0,.5);
		color:#fff; font-size:20px; letter-spacing:0.01em; line-height:1.7em;
	}

	/* section_1 */
	#section_1  { background:#000; }
	#section_1 div { 
		height:100vh;       
		display:flex;
		justify-content:center;  
		align-items:flex-start; 
		flex-direction:column;
		box-sizing:border-box; 
		padding-top:76px; padding-left:30px;
		color: #fff; font-size:100px; letter-spacing: 0.07em; line-height:1.5em;  font-weight:bold;
	}
	#section_1 div h2 { display:none; }
	#section_1 div span { display:block; cursor:pointer; }
	#section_1 div span:hover { transform:scale(1.05); transition: 0.7s;  }
	.swap-text{
	  position:relative;
	  display:inline-block;
	  cursor:pointer;
	  white-space:nowrap;
	}
	.swap-text::after{
	  content:attr(data-text);
	  position:absolute;
	  left:0;
	  top:0;
	  opacity:0;
	  transform:translateY(20px);
	  transition:opacity .9s ease, transform .9s ease;
	}
	.swap-text:hover{ color:transparent;  }
	.swap-text:hover::after{ opacity:1; transform:translateY(0); color:#fff; }

	/* section_2 */
	#section_2  { position:relative;  background: linear-gradient(135deg, #1a050a 0%, #3b0f18 45%, #5a1624 100%); }
	#section_2 div {
		height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; box-sizing:border-box;
		padding-top:50px; padding-right:30px; position:absolute; right:0; top:0; z-index:1;
	}

	/* section_3 */
	#section_3{
		position:relative;
		overflow:hidden;
		background:
			linear-gradient(135deg,
				#01030a 0%,
				#0b1f4a 25%,
				#2566d6 50%,
				#0b1f4a 75%,
				#01030a 100%
			);
	}
	#section_3 div{
		position:absolute;
		inset:0;
		height:100vh;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
		box-sizing:border-box;
		z-index:2;
	}
	/* 네트워크 그리드 */
	#section_3::before{
		content:'';
		position:absolute;
		inset:0;
		background:
			linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
			linear-gradient(rgba(255,255,255,.04) 2px, transparent 2px),
			linear-gradient(90deg, rgba(255,255,255,.04) 2px, transparent 2px);
		background-size:60px 60px,60px 60px,300px 300px,300px 300px;
		opacity:.75;
		pointer-events:none;
		z-index:0;
	}

	/* section_4 */
	#section_4{ 
		position:relative; min-height:100vh; overflow:hidden;
		background:
			url('../images/section_4_back.png') no-repeat right 50px bottom 50px / 30% auto,
			linear-gradient(120deg, #0b0b0b 10%, #1c1c1c 30%, #111111 30%);
	}
	#section_4 div {
		height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; box-sizing:border-box;
		padding-top:50px; padding-left:30px; position:absolute; left:0; top:0; z-index:1;
	}

	/* section_5 */
	#section_5{
		position:relative;
		min-height:100vh;
		background:#021716; /* 차트·마케팅용 딥 청녹 */
		overflow:hidden;
	}
	#section_5 canvas{position:absolute;
		inset:0;
		width:100%;
		height:100%;
		z-index:0;
	}
	#section_5 > *:not(canvas){ position:relative;z-index:1; }
	#section_5 div {
		height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; box-sizing:border-box;
		padding-top:50px; padding-right:30px; position:absolute; right:0; top:0; z-index:1;
	}	
	
	/* 스크롤 이미지 s */
	#scrollArrow{ position:fixed; right:30px; bottom:30px; width:60px; cursor:pointer; z-index:9999; transition:transform 0.2s linear; transform-origin:center; opacity:0.6; }
	#scrollArrow:hover{ opacity:1; }
	#scrollArrow.rotate180{ transform:rotate(180deg); }
	/* 스크롤 이미지 e  */	
	
	.pline {  display:none; }	
	
}

/* ===== MOBILE ===== */
@media (max-width:1023px){	

	section h3 {
		text-align:right; font-size:32px; font-weight:bold; letter-spacing:0.01em; line-height:1em;
		color:transparent; color:#fff; position:relative; overflow:hidden;
	}

	header { position: fixed; top:0; left:0; width: 100%; height:85px; z-index:99999991; }
	.header-back { position:absolute;  z-index:999999911; width: 100%; height:105px; background:#000; }
	.header-div {  position:absolute;  z-index:999999921;  width: 100%;  }
	.header-div ul { text-align:left; }
	.header-menu, .header-back{opacity:0; pointer-events:none;transition:.3s}
	.header-menu.show {opacity:1; pointer-events:auto}
	.header-back.show {opacity:0.7; pointer-events:auto}
	.header-li-left,
	.header-li-right{ width:100%; display:flex; justify-content:center; align-items:center; }
	.header-li-left dl{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; margin:10px 0 0 0; }
	.header-li-left dt,
	.header-li-left dd{ display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0; }
	.header-li-left img{ height:32px; display:block; cursor:pointer; }
	.header-li-left h1{ margin:0; color:#fff; font-size:12px; line-height:1.2; letter-spacing:.2em; cursor:pointer; }
	.header-menu { margin-top:10px; padding-top:10px; border-top:1px solid #666; }
	.menu-pc-text {
		cursor:pointer; color:#fff; font-size:16px; line-height:1;  letter-spacing: 0.01em; 
		margin-left:4px; margin-right:4px; 
		text-shadow: 1px 1px 1px #000, 0 0 0.1em #000, 0 0 0.1em #000;
	}
	
	footer { 
		text-align:center; background:#fff; padding:20px;
		background:#181818; height:800px; background-size:100% 800px; background-image: url('../images/foot_m_back.jpg'); background-repeat: no-repeat; background-position:right top; 
	}
	.layout_foots { }
	.layout_foots_1 {
		 text-align:left; color:#da433e; font-size:14px; font-weight:bold; letter-spacing: 0.05em; line-height:1em; 
	}
	.layout_foots_2 {
		margin-top:20px;
		text-align:left; color:#fff; font-size:18px;  letter-spacing: 0.01em; line-height:1.5em; 
	}
	.layout_foots_2 span { font-size:12px;  }
	.layout_foots_22 {
		margin-top:20px;
		text-align:left; color:#fff; font-size:12px;  letter-spacing: 0.01em; line-height:1.6em; 
	}
	.layout_foots_22 span {  font-size:14px;  font-weight:bold; }
	.layout_foots_3 { margin-top:20px; width:100%; display:inline-block; }
	.layout_foots_3 li { float:left; width:100%; }
	.layout_foots_box {
		width:100%; height:auto; padding:10px 15px 10px 15px; 
		margin-right:50px; border:1px solid #555; box-sizing:border-box; display:flex; align-items:center;  margin-bottom:7px;
	}
	.layout_foots_box:hover { border:1px solid #da433e; cursor:pointer; }
	.layout_foots_box dd { float:left; }
	.layout_foots_box_l { width:80%; text-align:left; color:#fff; font-size:12px;  letter-spacing: 0.01em; line-height:1.3em; }
	.layout_foots_box_r { width:20%; text-align:right; } .layout_foots_box_r img { height:8px; }
	.layout_foots_4 { margin-top:30px; width:100%; display:inline-block; }
	.layout_foots_4 li { float:left; text-align:left; }
	.layout_foots_4_li_1, .layout_foots_4_li_2 { width:50%; }
	.layout_foots_4_li_3, .layout_foots_4_li_4, .layout_foots_4_li_5 { width:100%; padding-top:20px;  }
	.layout_foots_4_li_1 img { height:40px; }
	.layout_foots_li_title {  
		margin-bottom:10px;
		color:#fff; font-size:13px;  letter-spacing: 0.01em; line-height:1.0em; 
	} 
	.layout_foots_li_cont1, .layout_foots_li_cont1 a { color:#fff; font-size:20px;  letter-spacing: 0.01em; line-height:1.0em;  }
	.layout_foots_li_cont2, .layout_foots_li_cont2 a { color:#b3b4b3; font-size:12px;  letter-spacing: 0.01em; line-height:1.0em;  }	
	.layout_foots_li_cont22, .layout_foots_li_cont22 a { color:#b3b4b3; font-size:13px;  letter-spacing: 0.01em; line-height:1.3em;  }	
	
	.section_txt { text-align:center; color:#fff; font-size:16px; letter-spacing:0.01em; line-height:1.7em; }
	.section_txt b { font-weight:bold; font-size:20px; }
	.section_txt small { font-size:14px; }
	.section_txt_pink { color:#da433e; }
	.section_txt_red { color:#ff0000; }
	.section_txt_y { color:#ffe958; }
	.section_box{
		padding:10px 20px 10px 20px; border-radius:20px; 
		background:rgba(0,0,0,.5);
		color:#fff; font-size:20px; letter-spacing:0.01em; line-height:1.7em;
	}
	.section_proc { color:#fff; font-size:18px; letter-spacing:0.01em; line-height:3em; }
	.section_proc span {
		padding:5px 10px 5px 10px; border-radius:20px; display:inline-block;
		background:rgba(0,0,0,.5);
		color:#fff; font-size:18px; letter-spacing:0.01em; line-height:1.7em;
	}

	/* section_1 */
	#section_1  { background:#000; }
	#section_1 div { 
		height:100vh;       
		display:flex;
		align-items:flex-start; 
		flex-direction:column;
		box-sizing:border-box; 
		padding-top:100px; left:10px;
		color: #fff; font-size:44px; letter-spacing: 0.001em; line-height:2em;  font-weight:bold;
	}
	#section_1 div h2 { display:none; }
	#section_1 div span { display:block; cursor:pointer; }
	#section_1 div span:hover { transform:scale(1.05); transition: 0.7s;  }
	.swap-text{
	  position:relative;
	  display:inline-block;
	  cursor:pointer;
	  white-space:nowrap;
	}
	.swap-text::after{
	  content:attr(data-text);
	  position:absolute;
	  left:0;
	  top:0;
	  opacity:0;
	  transform:translateY(20px);
	  transition:opacity .9s ease, transform .9s ease;
	}
	.swap-text:hover{ color:transparent;  }
	.swap-text:hover::after{ opacity:1; transform:translateY(0); color:#fff; }

	/* section_2 */
	#section_2  { position:relative;  background: linear-gradient(135deg, #1a050a 0%, #3b0f18 45%, #5a1624 100%); }
	#section_2 div {
		height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; 
		width:90%; text-align:center; margin: 0 auto; padding-top:50px; 
	}

	/* section_3 */
	#section_3{
		position:relative;
		overflow:hidden;
		background:
			linear-gradient(135deg,
				#01030a 0%,
				#0b1f4a 25%,
				#2566d6 50%,
				#0b1f4a 75%,
				#01030a 100%
			);
	}
	#section_3 div{
		height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; 
		width:90%; text-align:center; margin: 0 auto; padding-top:50px; 
	}
	/* 네트워크 그리드 */
	#section_3::before{
		content:'';
		position:absolute;
		inset:0;
		background:
			linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
			linear-gradient(rgba(255,255,255,.04) 2px, transparent 2px),
			linear-gradient(90deg, rgba(255,255,255,.04) 2px, transparent 2px);
		background-size:60px 60px,60px 60px,300px 300px,300px 300px;
		opacity:.75;
		pointer-events:none;
		z-index:0;
	}

	/* section_4 */
	#section_4{ 
		position:relative; min-height:100vh; overflow:hidden;
		background:
			url('../images/section_4_back.png') no-repeat center bottom 20px / 80% auto,
			linear-gradient(120deg, #0b0b0b 10%, #1c1c1c 30%, #111111 30%);
	}

	#section_4 div {
		height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; 
		width:90%; text-align:center; margin: 0 auto; padding-top:50px; 
	}

	/* section_5 */
	#section_5{
		position:relative;
		min-height:100vh;
		background:#021716; /* 차트·마케팅용 딥 청녹 */
		overflow:hidden;
	}
	#section_5 canvas{position:absolute;
		inset:0;
		width:100%;
		height:100%;
		z-index:0;
	}
	#section_5 > *:not(canvas){ position:relative;z-index:1; }
	#section_5 div {
		height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; 
		width:90%; text-align:center; margin: 0 auto; padding-top:50px; 
	}		
	
	/* 스크롤 이미지 s */
	#scrollArrow{ position:fixed; right:20px; bottom:20px; width:40px; cursor:pointer; z-index:9999; transition:transform 0.2s linear; transform-origin:center; opacity:0.6; }
	#scrollArrow:hover{ opacity:1; }
	#scrollArrow.rotate180{ transform:rotate(180deg); }
	/* 스크롤 이미지 e  */	
	
	.pline {  display:block; border:0; height:1px; background:#fff; opacity: 0.3; }
}

/* scroll event s */
.Mlang_scroll_on {opacity: 0;transition: all 1s;}
.Mlang_scroll_on.active {opacity: 1 !important;transform: translate(0, 0) !important;}
.Mlang_scroll_on.type_top {transform: translate(0, -50px);}
.Mlang_scroll_on.type_bottom {transform: translate(0, 50px);}
.Mlang_scroll_on.type_left {transform: translate(-50px, 0);}
.Mlang_scroll_on.type_right {transform: translate(50px, 0);}
/* scroll event e */