/*******************************************
	폰트 
********************************************/

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'HsSaemaul';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/HSSaemaul-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}


/*******************************************
	YELLOW-FINGER
********************************************/





/*******************************************
	공통요소
********************************************/
	* {	margin: 0px; padding: 0px; -webkit-overflow-scrolling : touch; outline: 0 none !important; font-family: 'Pretendard', sans-serif; font-weight: 400; }

	html, body {
		display: inline-block; width: 100%; height: auto;
		margin: 0px; padding: 0px;
		font-size: 14px;
		font-family: 'Pretendard', sans-serif;
		font-weight: 400;
		background-color: #000;
	}
	body { -webkit-overflow-scrolling: touch; float: left; }
	body {
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

	.HsSaemaul { font-family: 'HsSaemaul', sans-serif; }

	::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef; }
	::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
	::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef; }
	::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2); }
	::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1); }


	.ft_w100. .ft_w200, .ft_w300 { font-weight: 300; }
	.ft_w400. .ft_w500, .ft_w600 { font-weight: 400; }
	.ft_w700 { font-weight: 600; }
	.ft_w800 { font-weight: 800; }

	.base { position: relative; display: inline-block; float: left; box-sizing: border-box; }


	h1,h2,h3,h4,h5 { font-weight: normal; }
	a							{ text-decoration: none; }
	li, ul, ol					{ list-style: none; }


	/* float */
	.left						{ float: left;  }
	.right						{ float: right; } 
	.clear						{ clear: both;  }

	/* text-align */
	.text_left					{ text-align: left; }
	.text_right					{ text-align: right; }
	.text_center				{ text-align: center; }

	/* display */
	.display_inline_block		{ display: inline-block; }
	.display_none				{ display: none; }
	.display_block				{ display: block; }
	.display_table				{ display: table; }
	.display_table_cell			{ display: table-cell; }

	/* position */
	.position_relative			{ position: relative; }
	.position_absolute			{ position: absolute; }
	.position_fixed				{ position: fixed; }

	.slow0 {
		transition: all 100ms ease-in-out;
		-webkit-transition: all 100ms ease-in-out;
		-moz-transition: all 100ms ease-in-out;
	}

	.slow {
		transition: all 400ms ease-in-out;
		-webkit-transition: all 400ms ease-in-out;
		-moz-transition: all 400ms ease-in-out;
	}
	.slow2 {
		transition: all 600ms ease-in-out;
		-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
	}
	.slow3 {
		transition: all 1000ms ease-in-out;
		-webkit-transition: all 1000ms ease-in-out;
		-moz-transition: all 1000ms ease-in-out;
	}
	.slow4 {
		transition: all 2300ms ease-in-out;
		-webkit-transition: all 2300ms ease-in-out;
		-moz-transition: all 2300ms ease-in-out;
	}

	.fly {
		opacity: 0;

		transform: translateY(150px) translateX(0px) scale(1) translate3d(0, 0, 0);
		-webkit-transform: -webkit-translateY(150px) -webkit-translateX(0px) -webkit-scale(1) -webkit-translate3d(0, 0, 0);
		-moz-transform: -moz-translateY(150px) -moz-translateX(0px) -moz-scale(1) -moz-translate3d(0, 0, 0);
		-o-transform: -o-translateY(150px) -o-translateX(0px) -o-scale(1) -o-translate3d(0, 0, 0);
	}


	.set {
		opacity: 0;

		transform: translateY(350px) translateX(0px) scale(1) translate3d(0, 0, 0);
		-webkit-transform: -webkit-translateY(350px) -webkit-translateX(0px) -webkit-scale(1) -webkit-translate3d(0, 0, 0);
		-moz-transform: -moz-translateY(350px) -moz-translateX(0px) -moz-scale(1) -moz-translate3d(0, 0, 0);
		-o-transform: -o-translateY(350px) -o-translateX(0px) -o-scale(1) -o-translate3d(0, 0, 0);
	}





	.show-block {
		opacity: 1;

		transform: translateY(0px) translateX(0px) scale(1) translate3d(0, 0, 0);
		-webkit-transform: -webkit-translateY(0px) -webkit-translateX(0px) -webkit-scale(1) -webkit-translate3d(0, 0, 0);
		-moz-transform: -moz-translateY(0px) -moz-translateX(0px) -moz-scale(1) -moz-translate3d(0, 0, 0);
		-o-transform: -o-translateY(0px) -o-translateX(0px) -o-scale(1) -o-translate3d(0, 0, 0);
	}

	input, select, textarea {
		-webkit-appearance: none;
		   -moz-appearance: none;
				appearance: none;
				border-radius: 0px;
	}



/*******************************************
	YELLOW-FINGER
********************************************/

header.base {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: auto;
	padding: 40px;
	z-index: 100;
}

header > section { width: 100%; height: auto; }
header > section > article.base { 
	width: 100%; height: auto; 
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header > section > article .logo { width: auto; height: auto; }

header > section > article .logo img { 
	width: auto; height: 56px;
}

header > section > article .btn { 
	width: 100px; height: 42px;
	border-radius: 42px;
	border: 1px solid rgba(255, 255, 255, 0.60);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background-color: #00000000;
	cursor: pointer;
}

header > section > article .btn .icon { 
	width: 12px; height: auto; 
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px;
}

header > section > article .btn .icon > div { 
	width: 100%; height: 1px; 
	border-radius: 2px;
	background-color: #EAEAEA;
}
header > section > article .btn .txt { 
	width: auto; height: auto; line-height: 1;
	font-size: 16px; color: #EAEAEA;
}


nav {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 100%;
	display: none;
	z-index: 101;
}


nav > div.base {
	width: 100%; height: 100%;

	display: flex;
	align-items: center;
    justify-content: center;

}
nav .bg {
	position: absolute; top: 0px; left: 0px; 
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0.95);
}


nav .box {
	width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
    overflow: auto;

	display: flex;
	padding: 60px 30px 50px;

	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 0 40px;
	flex-shrink: 0;
	flex-wrap: wrap;
	border-radius: 10px;

	background: -webkit-gradient(linear, 100% 0, 0 0, color-stop(28.57, rgba(255, 255, 255, 0.00)), to(rgba(255, 255, 255, 0.20)));
background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
background: -o-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%), rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.2);

}

nav .box .close {
	position: absolute; top: 15px; right: 15px;
	width: 25px; height: 25px;
	border: 0px; background-color: #00000000;
	cursor: pointer;
}

nav .box .close img { width: 100%; height: 100%; }

nav .box .list {
	width: 100%; height: auto;

	display: flex;
	justify-content: start;
	align-items: start;
	flex-direction: column;
	gap: 10px;
}


nav .box .list button{
	width: max-content; height: auto; line-height: 2.3;
	border: 0px;
	background-color: #00000000;

	color: rgba(255, 255, 255, 0.85);
	font-size: 18px; font-weight: 500;

	padding-left: 45px;
	cursor: pointer;



	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
}
nav .box .list button:hover{ color: #FF9345; }

nav .box .list button::before{
	opacity: 0;
	position: absolute; top: 0px; left: 0px;
	content: '';
	width: 5px; height: 42px;
	background-color: #FF9345;

	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
}

nav .box .list button:hover::before{ opacity: 1; }



#news {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 100%;
	display: none;
	z-index: 101;
}


#news > div.base {
	width: 100%; height: 100%;

	display: flex;
	align-items: center;
    justify-content: center;

}
#news .bg {
	position: absolute; top: 0px; left: 0px; 
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0.95);
}


#news .box {
	width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
    overflow: auto;

	display: flex;
	padding: 60px 30px 50px;

	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 0 40px;
	flex-shrink: 0;
	flex-wrap: wrap;
	border-radius: 10px;

	background: -webkit-gradient(linear, 100% 0, 0 0, color-stop(28.57, rgba(255, 255, 255, 0.00)), to(rgba(255, 255, 255, 0.20)));
	background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
	background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
	background: -o-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%), rgba(255, 255, 255, 0.10);

	background: rgba(255, 255, 255, 0.2);

}

#news .box .close {
	position: absolute; top: 15px; right: 15px;
	width: 25px; height: 25px;
	border: 0px; background-color: #00000000;
	cursor: pointer;
}

#news .box .close img { width: 100%; height: 100%; }


.pop_header {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 60px; line-height: 60px;
	padding-right: 55px;
	padding-left: 30px;

	color: #FFF;
	font-size: 18px; font-weight: 600;
	border-bottom: 1px solid #000;
}

#news .box .list {
	width: 100%; height: auto;


	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px; 
}

#news .box .list .list_item {
	width: calc(50% - 9px); height: auto;
	padding: 15px 20px;

	border-radius: 10px;
	border: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.20);
	background: rgba(255, 255, 255, 0.20);

	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;

	cursor: pointer;
}
#news .box .list .list_item:hover { background-color: #FF9F46; }



#news .box .list .list_item .list_title {
	width: 100%; height: auto;

	color: rgba(255, 255, 255, 0.85); text-align: left;
	font-size: 18px; font-weight: 500;
	line-height: 30px; 
	padding-right: 35px;


	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;

}
#news .box .list .list_item:hover .list_title { color: #fff; }

#news .box .list .list_item .list_title::after {
	content: '';
	position: absolute; top: 0px; right: 0px;
	width: 30px; height: 30px;
	background-image: url(../images/link_icon.svg); 
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	opacity: 0.4;

	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
}
#news .box .list .list_item:hover  .list_title::after { opacity: 1; }

#news .box .list .list_item .list_desc {
	width: 100%; height: auto; line-height: 1.5;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.85); text-align: left;
	font-size: 16px; font-weight: 500;
	word-break: keep-all;

	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;

}
#news .box .list .list_item:hover .list_desc { color: #fff; }










#state {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 100%;
	display: none;
	z-index: 101;
}


#state > div.base {
	width: 100%; height: 100%;

	display: flex;
	align-items: center;
    justify-content: center;

}
#state .bg {
	position: absolute; top: 0px; left: 0px; 
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0);
}


#state .box {
	width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
    overflow: auto;

	display: flex;
	padding: 60px 30px 50px;

	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 0 40px;
	flex-shrink: 0;
	flex-wrap: wrap;
	border-radius: 10px;

	background: #fff;
}

#state .box .close {
	position: absolute; top: 15px; right: 15px;
	width: 25px; height: 25px;
	border: 0px; background-color: #00000000;
	cursor: pointer;
}

#state .box .close img { width: 100%; height: 100%; filter: invert(1); }


#state .box .list {
	width: 100%; height: auto;
	margin-top: 20px; 
}

#state .box .list img {
	width: 100%; height: auto;
}

#state .pop_header {
	color: #101010;
	border-bottom: 1px solid #E9E9E9;
}






.pop_bg_txt {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 100%;
	display: none;
	z-index: 101;
}


.pop_bg_txt > div.base {
	width: 100%; height: 100%;

	display: flex;
	align-items: center;
    justify-content: center;

}
.pop_bg_txt .bg {
	position: absolute; top: 0px; left: 0px; 
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0.90);
}


.pop_bg_txt .box {
	width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
    overflow: auto;

	display: flex;
	padding: 60px 30px 50px;

	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 0 40px;
	flex-shrink: 0;
	flex-wrap: wrap;
	border-radius: 10px;

	background: -webkit-gradient(linear, 100% 0, 0 0, color-stop(28.57, rgba(255, 255, 255, 0.00)), to(rgba(255, 255, 255, 0.20)));
	background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
	background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
	background: -o-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 28.57, rgba(255, 255, 255, 0.20) 100%), rgba(255, 255, 255, 0.10);


	background: rgba(255, 255, 255, 0.2);

}

.pop_bg_txt .box .close {
	position: absolute; top: 15px; right: 15px;
	width: 25px; height: 25px;
	border: 0px; background-color: #00000000;
	cursor: pointer;
}

.pop_bg_txt .box .close img { width: 100%; height: 100%; }



.pop_bg_txt .box .list {
	width: 100%; height: auto;


	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px; 
}

.pop_bg_txt .box .list .list_item {
	width: 100%; height: auto;
	padding: 15px 20px;

	border-radius: 10px;
	border: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.20);
	background: rgba(255, 255, 255, 0.20);

	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;

	cursor: pointer;
}


.pop_bg_txt .box .list .list_item .list_title {
	width: 100%; height: auto;

	color: rgba(255, 255, 255, 0.85); text-align: left;
	font-size: 18px; font-weight: 500;
	line-height: 30px; 


	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;

}

.pop_bg_txt .box .list .list_item .list_desc {
	width: 100%; height: auto; line-height: 1.5;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.85); text-align: left;
	font-size: 16px; font-weight: 500;
	word-break: keep-all;

	transition: all 400ms ease-in-out;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;

}





#tag {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 100%;
	display: none;
	z-index: 101;
}


#tag > div.base {
	width: 100%; height: 100%;

	display: flex;
	align-items: center;
    justify-content: center;

}
#tag .bg {
	position: absolute; top: 0px; left: 0px; 
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0);
}


#tag .box {
	width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
    overflow: auto;

	display: flex;
	padding: 60px 30px 50px;

	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 0 40px;
	flex-shrink: 0;
	flex-wrap: wrap;
	border-radius: 10px;

	background: #fff;
}

#tag .box .close {
	position: absolute; top: 15px; right: 15px;
	width: 25px; height: 25px;
	border: 0px; background-color: #00000000;
	cursor: pointer;
}

#tag .box .close img { width: 100%; height: 100%; filter: invert(1); }



#tag .box .list {
	width: 100%; height: 400px;


	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px; 
}

#tag .pop_header {
	color: #101010;
	border-bottom: 1px solid #E9E9E9;
}


#cloud {
	width: 100%;
	height: 100%;
	background: #00000000;

	opacity: 0;
	transition: opacity 0.8s ease-in-out;

}

#cloud-license-text { pointer-events: none; opacity: 0.1 !important; }

#cloud-menu-area {  display: none !important; pointer-events: none; opacity: 0 !important;  }
#cloud-exit {  display: none !important; pointer-events: none; opacity: 0 !important;  }
#cloud-tools { pointer-events: none; opacity: 0 !important;  }

.fp-scroller { min-height: 100%; }

@media (max-width: 479px){ 
	header.base { padding: calc((20 / 480) * 100vw); }
	header > section > article .logo img { height: calc((45 / 480) * 100vw); }
	header > section > article .btn { 
		width: calc((100 / 480) * 100vw); height: calc((45 / 480) * 100vw);
		border-radius: calc((45 / 480) * 100vw);
		gap: calc((8 / 480) * 100vw);
	}

	header > section > article .btn .icon { 
		width: calc((14 / 480) * 100vw); 
		gap: calc((3 / 480) * 100vw);
	}

	header > section > article .btn .icon > div { 
		border-radius: 2px;
	}
	header > section > article .btn .txt { 
		width: auto; height: auto; line-height: 1;
		font-size: calc((16 / 480) * 100vw); color: #EAEAEA;
	}

	nav .box {
		width: 100%; height: auto; max-height: calc(100vh - ((20 / 480) * 100vw));
		max-width: calc(100% - ((40 / 480) * 100vw)); 
		padding: calc((60 / 480) * 100vw) calc((20 / 480) * 100vw) calc((50 / 480) * 100vw);

		gap: 0 calc((40 / 480) * 100vw);
		border-radius: calc((10 / 480) * 100vw);

	}

	nav .box .close {
		top: calc((15 / 480) * 100vw); right: calc((15 / 480) * 100vw);
		width: calc((25 / 480) * 100vw); height: calc((25 / 480) * 100vw);
	}

	nav .box .list {
		gap: calc((5/ 480) * 100vw);
	}


	nav .box .list button{
		font-size: calc((15 / 480) * 100vw); 
		padding-left: calc((20 / 480) * 100vw);
	}
	nav .box .list button:hover{ color: #FF9345; }

	nav .box .list button::before{
		width: calc((3 / 480) * 100vw); height: calc((37 / 480) * 100vw);
	}


	#news .box {
		width: 100%; max-width: calc(100% - ((40 / 480) * 100vw));; height: auto; max-height: calc(100vh - ((100 / 480) * 100vw));
		padding: calc((60 / 480) * 100vw) calc((20 / 480) * 100vw) calc((50 / 480) * 100vw);

		gap: 0 calc((40 / 480) * 100vw);
		border-radius: calc((20 / 480) * 100vw);
	}

	#news .box .close {
		top: calc((15 / 480) * 100vw); right: calc((15 / 480) * 100vw);
		width: calc((25 / 480) * 100vw); height: calc((25 / 480) * 100vw);
	}


	.pop_header {
		height: calc((60 / 480) * 100vw); line-height: calc((60 / 480) * 100vw);
		padding-right: calc((55 / 480) * 100vw);
		padding-left: calc((30 / 480) * 100vw);
		font-size: calc((16 / 480) * 100vw); font-weight: 600;
	}

	#news .box .list {
		width: 100%; height: auto;
		gap: calc((16 / 480) * 100vw);
		margin-top: calc((30 / 480) * 100vw); 
	}

	#news .box .list .list_item {
		width: calc(50% - ((8 / 480) * 100vw)); 
		padding: calc((15 / 480) * 100vw) calc((20 / 480) * 100vw);
		border-radius: calc((8 / 480) * 100vw);
	}



	#news .box .list .list_item .list_title {
		font-size: calc((16 / 480) * 100vw); 
		line-height: calc((25 / 480) * 100vw); 
		padding-right: calc((35 / 480) * 100vw);


	}

	#news .box .list .list_item .list_title::after { width: calc((30 / 480) * 100vw); height: calc((30 / 480) * 100vw); }
	#news .box .list .list_item .list_desc {
		margin-top: calc((10 / 480) * 100vw);
		font-size: calc((14 / 480) * 100vw);
	}

	#state .box {
		width: 100%; max-width: calc(100% - ((40 / 480) * 100vw));; height: auto; max-height: calc(100vh - ((100 / 480) * 100vw));
		max-width: calc(100% - 40px);
		padding: calc((60 / 480) * 100vw) calc((20 / 480) * 100vw) calc((50 / 480) * 100vw);

		gap: 0 calc((40 / 480) * 100vw);
		border-radius: calc((10 / 480) * 100vw);
	}

	#state .box .close {
		top: calc((15 / 480) * 100vw); right: calc((15 / 480) * 100vw);
		width: calc((25 / 480) * 100vw); height: calc((25 / 480) * 100vw);
	}

	#state .box .list { margin-top: calc((20 / 480) * 100vw); }


	.pop_bg_txt .box {
		width: 100%; max-width: calc(100% - ((40 / 480) * 100vw)); height: auto; max-height: calc(100vh - ((100 / 480) * 100vw));
		max-width: calc(100% - ((40 / 480) * 100vw));
		padding: calc((60 / 480) * 100vw) calc((20 / 480) * 100vw) calc((50 / 480) * 100vw);

		gap: 0 calc((40 / 480) * 100vw);
		border-radius: calc((10 / 480) * 100vw);
	}

	.pop_bg_txt .box .close {
		top: calc((15 / 480) * 100vw); right: calc((15 / 480) * 100vw);
		width: calc((25 / 480) * 100vw); height: calc((25 / 480) * 100vw);
	}


	.pop_bg_txt .box .list {
		gap: calc((15 / 480) * 100vw);
		margin-top: calc((30 / 480) * 100vw); 
	}

	.pop_bg_txt .box .list .list_item {
		padding: calc((15 / 480) * 100vw) calc((20 / 480) * 100vw);
		border-radius: calc((10 / 480) * 100vw);
	}


	.pop_bg_txt .box .list .list_item .list_title {
		font-size: calc((16 / 480) * 100vw);
		line-height: calc((20 / 480) * 100vw); 
	}

	.pop_bg_txt .box .list .list_item .list_desc {
		margin-top: calc((10 / 480) * 100vw);
		font-size: calc((16 / 480) * 100vw); 
	}


	#tag .box {
		width: 100%; max-width: calc((680 / 480) * 100vw); height: auto; max-height: calc(100vh - ((100 / 480) * 100vw));
		max-width: calc(100% - ((40 / 480) * 100vw));

		padding: calc((60 / 480) * 100vw) calc((20 / 480) * 100vw) calc((50 / 480) * 100vw);
		gap: 0 calc((40 / 480) * 100vw);
		border-radius: calc((10 / 480) * 100vw);
	}

	#tag .box .close {
		top: calc((15 / 480) * 100vw); right: calc((15 / 480) * 100vw);
		width: calc((25 / 480) * 100vw); height: calc((25 / 480) * 100vw);
	}


	#tag .box .list {
		height: calc((300 / 480) * 100vw);
		gap: calc((15 / 480) * 100vw);
		margin-top: calc((30 / 480) * 100vw); 
	}


}

@media (max-width: 749px) and (min-width: 480px) { 
	header.base { padding: 20px; }
	header > section > article .logo img { height: 35px; }
	header > section > article .btn { 
		width: 80px; height: 35px;
		border-radius: 35px;
		gap: 8px;
	}

	header > section > article .btn .icon { 
		width: 12px; 
		gap: 3px;
	}

	header > section > article .btn .icon > div { 
		border-radius: 2px;
	}
	header > section > article .btn .txt { 
		width: auto; height: auto; line-height: 1;
		font-size: 16px; color: #EAEAEA;
	}

	nav .box {
		width: 100%; height: auto; max-height: calc(100vh - 100px);
		max-width: calc(100% - 40px); 
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;

	}

	nav .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}

	nav .box .list {
		gap: 5px;
	}


	nav .box .list button{
		font-size: 15px; 
		padding-left: 20px;
	}
	nav .box .list button:hover{ color: #FF9345; }

	nav .box .list button::before{
		width: 3px; height: 37px;
	}


	#news .box {
		width: 100%; max-width: calc(100% - 40px); height: auto; max-height: calc(100vh - 100px);
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	#news .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	.pop_header {
		height: 60px; line-height: 60px;
		padding-right: 55px;
		padding-left: 30px;
		font-size: 16px; font-weight: 600;
	}

	#news .box .list {
		width: 100%; height: auto;
		gap: 16px;
		margin-top: 30px; 
	}

	#news .box .list .list_item {
		width: calc(50% - 8px); 
		padding: 15px 20px;
		border-radius: 8px;
	}



	#news .box .list .list_item .list_title {
		font-size: 16px; 
		line-height: 25px; 
		padding-right: 35px;


	}

	#news .box .list .list_item .list_title::after { width: 30px; height: 30px; }
	#news .box .list .list_item .list_desc {
		margin-top: 10px;
		font-size: 14px;
	}

	#state .box {
		width: 100%; max-width: calc(100% - 40px);; height: auto; max-height: calc(100vh - 100px);
		max-width: calc(100% - 40px);
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	#state .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}

	#state .box .list { margin-top: 20px; }


	.pop_bg_txt .box {
		width: 100%; max-width: calc(100% - 40px); height: auto; max-height: calc(100vh - 100px);
		max-width: calc(100% - 40px);
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	.pop_bg_txt .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	.pop_bg_txt .box .list {
		gap: 15px;
		margin-top: 30px; 
	}

	.pop_bg_txt .box .list .list_item {
		padding: 15px 20px;
		border-radius: 10px;
	}


	.pop_bg_txt .box .list .list_item .list_title {
		font-size: 16px;
		line-height: 20px; 
	}

	.pop_bg_txt .box .list .list_item .list_desc {
		margin-top: 10px;
		font-size: 16px; 
	}


	#tag .box {
		width: 100%; max-width: calc(100% - 40px); height: auto; max-height: calc(100vh - 100px);
		max-width: calc(100% - 40px);

		padding: 60px 20px 50px;
		gap: 0 40px;
		border-radius: 10px;
	}

	#tag .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	#tag .box .list {
		height: 300px;
		gap: 15px;
		margin-top: 30px; 
	}


}

@media (max-width: 1023px) and (min-width: 750px) { 
	header.base { padding: 20px; }
	header > section > article .logo img { height: 45px; }
	header > section > article .btn { 
		width: 100px; height: 40px;
		border-radius: 40px;
		gap: 8px;
	}

	header > section > article .btn .icon { 
		width: 12px; 
		gap: 3px;
	}

	header > section > article .btn .icon > div { 
		border-radius: 2px;
	}
	header > section > article .btn .txt { 
		width: auto; height: auto; line-height: 1;
		font-size: 16px; color: #EAEAEA;
	}

	nav .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;

	}

	nav .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}

	nav .box .list {
		gap: 10px;
	}


	nav .box .list button{
		font-size: 16px; 
		padding-left: 30px;
	}
	nav .box .list button:hover{ color: #FF9345; }

	nav .box .list button::before{
		width: 3px; height: 37px;
	}


	#news .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	#news .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	.pop_header {
		height: 60px; line-height: 60px;
		padding-right: 55px;
		padding-left: 30px;
		font-size: 16px; font-weight: 600;
	}

	#news .box .list {
		width: 100%; height: auto;
		gap: 16px;
		margin-top: 30px; 
	}

	#news .box .list .list_item {
		width: calc(50% - 8px); 
		padding: 15px 20px;
		border-radius: 8px;
	}



	#news .box .list .list_item .list_title {
		font-size: 16px; 
		line-height: 25px; 
		padding-right: 35px;


	}

	#news .box .list .list_item .list_title::after { width: 30px; height: 30px; }
	#news .box .list .list_item .list_desc {
		margin-top: 10px;
		font-size: 14px;
	}

	#state .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	#state .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}

	#state .box .list { margin-top: 20px; }


	.pop_bg_txt .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 20px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	.pop_bg_txt .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	.pop_bg_txt .box .list {
		gap: 15px;
		margin-top: 30px; 
	}

	.pop_bg_txt .box .list .list_item {
		padding: 15px 20px;
		border-radius: 10px;
	}


	.pop_bg_txt .box .list .list_item .list_title {
		font-size: 16px;
		line-height: 20px; 
	}

	.pop_bg_txt .box .list .list_item .list_desc {
		margin-top: 10px;
		font-size: 16px; 
	}


	#tag .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 20px 50px;
		gap: 0 40px;
		border-radius: 10px;
	}

	#tag .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	#tag .box .list {
		height: 400px;
		gap: 15px;
		margin-top: 30px; 
	}


}


@media (max-width: 1279px) and (min-width: 1024px) { 

	header.base { padding: 30px; }
	header > section > article .logo img { height: 50px; }
	header > section > article .btn { 
		width: 100px; height: 42px;
		border-radius: 42px;
		gap: 10px;
	}

	header > section > article .btn .icon { 
		width: 12px; 
		gap: 3px;
	}

	header > section > article .btn .icon > div { 
		border-radius: 2px;
	}
	header > section > article .btn .txt { 
		width: auto; height: auto; line-height: 1;
		font-size: 16px; color: #EAEAEA;
	}

	nav .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 30px 50px;

		gap: 0 40px;
		border-radius: 10px;

	}

	nav .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}

	nav .box .list {
		gap: 10px;
	}


	nav .box .list button{
		font-size: 16px; 
		padding-left: 30px;
	}
	nav .box .list button:hover{ color: #FF9345; }

	nav .box .list button::before{
		width: 3px; height: 37px;
	}


	#news .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 30px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	#news .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	.pop_header {
		height: 60px; line-height: 60px;
		padding-right: 55px;
		padding-left: 30px;
		font-size: 16px; font-weight: 600;
	}

	#news .box .list {
		width: 100%; height: auto;
		gap: 16px;
		margin-top: 30px; 
	}

	#news .box .list .list_item {
		width: calc(50% - 8px); 
		padding: 15px 20px;
		border-radius: 8px;
	}



	#news .box .list .list_item .list_title {
		font-size: 16px; 
		line-height: 25px; 
		padding-right: 35px;


	}

	#news .box .list .list_item .list_title::after { width: 30px; height: 30px; }
	#news .box .list .list_item .list_desc {
		margin-top: 10px;
		font-size: 14px;
	}

	#state .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 30px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	#state .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}

	#state .box .list { margin-top: 20px; }


	.pop_bg_txt .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 30px 50px;

		gap: 0 40px;
		border-radius: 10px;
	}

	.pop_bg_txt .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	.pop_bg_txt .box .list {
		gap: 15px;
		margin-top: 30px; 
	}

	.pop_bg_txt .box .list .list_item {
		padding: 15px 20px;
		border-radius: 10px;
	}


	.pop_bg_txt .box .list .list_item .list_title {
		font-size: 16px;
		line-height: 20px; 
	}

	.pop_bg_txt .box .list .list_item .list_desc {
		margin-top: 10px;
		font-size: 16px; 
	}


	#tag .box {
		width: 100%; max-width: 680px; height: auto; max-height: calc(100vh - 100px);
		padding: 60px 30px 50px;
		gap: 0 40px;
		border-radius: 10px;
	}

	#tag .box .close {
		top: 15px; right: 15px;
		width: 25px; height: 25px;
	}


	#tag .box .list {
		height: 400px;
		gap: 15px;
		margin-top: 30px; 
	}


}




/*
	@media (max-width: 479px){ 

	}

	@media (max-width: 749px) and (min-width: 480px) { 

	}

	@media (max-width: 1023px) and (min-width: 750px) { 

	}


	@media (max-width: 1279px) and (min-width: 1024px) { 

	}
*/