/*******************************************
	폰트 
********************************************/
@import url('../font/NanumBarunGothic/nanumbarungothic.css');
@import url('../font/open_sans_font/font.css');
@import url('../font/icofont/icofont.min.css');

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





/*******************************************
	공통요소
********************************************/
	* {	margin: 0px; padding: 0px; -webkit-overflow-scrolling : touch; font-family: 'NanumBarunGothic', sans-serif; }

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

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



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

	.slow {
		transition: opacity 300ms ease-in-out, transform 300ms ease-in-out, color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out;
	}


	.bold		{ font-weight: bold }
	.bolder		{ font-weight: bold }


	.base { position: relative; display: inline-block; float: left; box-sizing: border-box; }
	.ft_w200 { font-weight: 200; }
	.ft_w300 { font-weight: 300; }
	.ft_w400 { font-weight: 400; }
	.ft_w500 { font-weight: 500; }
	.ft_w600 { font-weight: 600; }
	.ft_w700 { font-weight: 700; }
	.ft_w800 { font-weight: 800; }



	.fly {
		opacity: 0;

		transition: opacity 450ms ease-in-out, transform 450ms ease-in-out;

		transform: translateY(50px) translateX(0px) scale(1) translate3d(0, 0, 0);
		-webkit-transform: -webkit-translateY(50px) -webkit-translateX(0px) -webkit-scale(1) -webkit-translate3d(0, 0, 0);
		-moz-transform: -moz-translateY(50px) -moz-translateX(0px) -moz-scale(1) -moz-translate3d(0, 0, 0);
		-o-transform: -o-translateY(50px) -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;
	}



	/* ===== Colors ===== */
	.text-primary { color: #1BC0C4; }
	.text-black   { color: #000000; }
	.text-gray    { color: #BBBBBB; }
	.text-subtle  { color: #EEEEEE; }

	.bg-primary   { background-color: #1BC0C4; }
	.bg-light     { background-color: #EEEEEE; }
	.bg-highlight { background-color: #DBF6F5; }
	.bg-alert     { background-color: #FF9F40; }
	.bg-success   { background-color: #3ED4BE; }
	.border-gray  { border-color: #DDDDDD; }

	/* ===== Typography ===== */
	.h0 { font-size: 32px; font-weight: 700; }  /* Pretendard Bold */
	.h1 { font-size: 24px; font-weight: 700; }
	.h2 { font-size: 20px; font-weight: 600; }
	.h3 { font-size: 18px; font-weight: 600; }
	.body { font-size: 16px; font-weight: 500; }
	.subtext { font-size: 14px; font-weight: 500; color: #BBBBBB; }
	.caption { font-size: 12px; font-weight: 500; color: #BBBBBB; }

	/* ===== Radius ===== */
	.radius-lg { border-radius: 10px; } /* PC 기준 */
	.radius-md { border-radius: 8px; }
	.radius-sm { border-radius: 6px; }

	/* ===== Shadows ===== */
	.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
	.shadow-md { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
	.shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

	/* ===== Spacing (PC 기준) ===== */
	.section-spacing { margin-bottom: 48px; }
	.component-spacing { margin-bottom: 24px; }
	.element-spacing { margin-bottom: 12px; }

	/* ===== Layout Helpers ===== */
	.page-padding-pc {
	  padding: 120px 140px;
	}
	.page-padding-mobile {
	  padding: 60px 20px;
	}
	.sidebar-pc {
	  width: 198px;
	}



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



#header {
	width: 100%; height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#header > div {
	max-width: 1920px; width: 100%; height: 100%;
	display: flex;
	align-items: center;

	padding: 0px 60px;
}

#header .logo { width: auto; height: auto; }
#header .logo a{ width: auto; height: auto; }
#header .logo a img { width: 148px; height: auto; }

#header.account .nav { display: none; }
#header.tool .nav { display: none; }
#header .nav { width: auto; height: auto; margin-left: 60px; }
#header .nav a:nth-child(1) { margin-left: 0px; }
#header .nav a.on { color: #3ED4BE; }
#header .nav a {
	width: auto; height: auto;
	margin-left: 30px;

	color: #1E1E1E;
	font-size: 18px; font-weight: 500;
}

#header.account .func { display: none; }
#header.tool .func { display: none; }
#header .func { 
	width: auto; height: auto; 
	margin-left: auto;
}

#header .func a { 
	width: 60px; height: 60px; 
	border-radius: 20px;
	background: #FBF9F7;
	
    background-size: 28px;
    background-position: center center;
    background-repeat: no-repeat;
}
#header .func a.before { 
	background-image: url(../images/icon_login.svg);
}




#header.account { height: 80px; background-color: #F2F2F2; }
#header.account > div { padding: 0px 20px;  }
#header.account .logo a img { width: auto; height: 22px; }






#header.tool {
	height: 68px;
	background: #fff;
	border-bottom: 1px solid #ECEFED;
}
#header.tool > div { justify-content: space-between; padding: 0 22px; }
#header.tool .logo a img { width: auto; height: 19px; }
#header:not(.tool) .tools { display: none; }
#header.tool .tools {
	display: flex;
	align-items: center;
	gap: 8px;
}
#header.tool .tools button {
	width: auto; height: 40px; line-height: 1;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 14px; font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#header.tool .tools .view {
	color: #303532;
	background: #fff;
	border: 1px solid #DDE2DF;
}
#header.tool .tools .exit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
	color: #4D5551;
	background: #fff;
	border: 1px solid #DDE2DF;
}
#header.tool .tools .exit i { font-size: 18px; line-height: 1; }
#header.tool .tools .exit:hover { color: #171A18; background: #F5F7F6; border-color: #C9CFCC; }
#header.tool .tools .view:hover { background: #F5F7F6; border-color: #C9CFCC; }
#header.tool .tools .save {
	color: #073B37;
	background: #3ED4BE;
	border: 1px solid #3ED4BE;
	box-shadow: 0 2px 6px rgba(37, 190, 170, .12);
}
#header.tool .tools .save:hover { background: #35C8B3; border-color: #35C8B3; }
#header.tool .tools button:focus-visible {
	outline: 2px solid rgba(24, 171, 155, .4);
	outline-offset: 2px;
}

@media (max-width: 479px) {
	#header.tool > div { padding: 0 12px; }
	#header.tool .logo a img { height: 16px; }
	#header.tool .tools { gap: 6px; }
	#header.tool .tools button { height: 38px; padding: 0 10px; border-radius: 9px; font-size: 13px; }
	#header.tool .tools .exit { width: 38px; padding: 0; }
}


#footer {
	width: 100%; height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #DDD;
}

#footer > div {

	max-width: 860px; width: 100%; height: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	padding: 60px 0px;

}


#footer .ft_nav {
	width: 100%; height: auto;
	display: flex;
	align-items: start;
	justify-content: space-between;
}

#footer .ft_nav .ft_nav_func { width: 130px; height: auto; }
#footer .ft_nav .ft_nav_func .ft_nav_logo { width: 100%; height: auto; }
#footer .ft_nav .ft_nav_func .ft_nav_logo img { width: 100%; height: auto; }
#footer .ft_nav .ft_nav_func .ft_nav_lan { width: 100%; height: auto; margin-top: 35px; }
#footer .ft_nav .ft_nav_func .ft_nav_lan select { 
	width: 100%; height: 50px; 
	padding: 0px 5px 0px 20px;
	border-radius: 5px;
	border: 1px solid #DDD;
	background-color: #00000000;

	background-image: url(../images/icon_select_arrow.svg);
    background-size: 9px;
    background-position: calc(100% - 30px) center;
    background-repeat: no-repeat;


	color: #000; text-align: left;
	font-size: 15px; font-weight: 500;
}

#footer .ft_nav .ft_nav_list { 
	width: calc(100% - 130px); height: auto; 
	padding-left: 100px;

	display: flex;
    justify-content: space-around;
	align-items: start;
	gap: 50px;
}

#footer .ft_nav .ft_nav_list .ft_nav_item { display: grid; gap: 20px; }
#footer .ft_nav .ft_nav_list .ft_nav_item > a {
	color: #1E1E1E; text-align: center;
	font-size: 18px; font-weight: 700;
}

#footer .ft_nav .ft_nav_list .ft_nav_item .sub {
	display: grid; gap: 20px; 
}

#footer .ft_nav .ft_nav_list .ft_nav_item .sub a {
	color: #1E1E1E; text-align: center;
	font-size: 15px; font-weight: 300;
}


#footer .ft_info {
	width: 100%; height: auto;
	display: flex;
	align-items: start;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 90px;
	gap: 10px;
}

#footer .ft_info .ft_info_txt {
	width: 100%; height: auto; line-height: 24px;
	display: flex;
	align-items: center;
	justify-content: end;

	color: #5B5B5B; font-size: 15px;
	font-weight: 300;

}

#footer .ft_info .ft_info_txt .bar {
	width: 1px; height: 14px;
	background: #DDD;
	margin: 0px 10px;
}

#footer .ft_info .ft_info_txt .bold {
	color: #5B5B5B;
	font-weight: 500;
	margin-right: 5px;
}

#footer .ft_info .ft_info_copy {
	width: 100%; height: auto;
	margin-top: 15px;
	color: #5B5B5B; font-size: 15px;
	font-weight: 300;

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




#access_pop {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 100%;
	z-index: 9999999;
	box-sizing: border-box;
}

#access_pop::before {
	content: "";
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-color: #000;
	opacity: 0.5;
	z-index: 1;
	box-sizing: border-box;
}


#access_pop > iframe {
	position: absolute; top: 80px; left: 50%;
    transform: translate(-50%, 0%);

	border-radius: 10px;

	width: 768px; height: calc(100vh - 160px); max-height: 680px;
	background-color: #fff;
	box-sizing: border-box;
	z-index: 2;

	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.legal-dialog { position: fixed; inset: 0; width: min(760px, calc(100vw - 32px)); height: min(820px, calc(100vh - 40px)); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 16px 42px rgba(20, 31, 36, .18); }
.legal-dialog::backdrop { background: rgba(18, 25, 28, .46); }
.legal-dialog__shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.legal-dialog__header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 24px; border-bottom: 1px solid #edf0ef; }
.legal-dialog__header p { margin: 0 0 3px; color: #087f83; font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.legal-dialog__header h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.legal-dialog__close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #1d2328; font-size: 27px; line-height: 1; cursor: pointer; }
.legal-dialog__close:hover { background: #f3f6f5; }
.legal-dialog__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.site-footer__policy { display: flex; justify-content: center; gap: 14px; padding: 0 20px 18px; color: #718087; }
.site-footer__policy a { color: inherit; font-size: 13px; text-decoration: none; }
.site-footer__policy a:hover { color: #087f83; }
@media (max-width: 640px) { .legal-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); border-radius: 12px; } .legal-dialog__header { min-height: 62px; padding: 0 16px; } }


/*
	@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) { 

	}
*/