/*******************************************
	폰트 
********************************************/
@import url('../font/icofont/icofont.css');


@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/* font-family: 'Pretendard', sans-serif; */
/*******************************************
	YELLOW-FINGER
********************************************/





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

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

	::-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: all 300ms ease-in-out;
		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;
	}

	.fly {
		opacity: 0;

		transition: all 450ms ease-in-out;
		-webkit-transition: all 450ms ease-in-out;
		-moz-transition: all 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;
	}

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

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


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

#header.on{ background-color: #000; }
#header{ 
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 120px; line-height: 120px;
	z-index: 101;
}

#header > div { 

	max-width: 1660px; width: 100%; height: 100%;
	padding: 0px 40px;


	left: 50%; 
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
	
}


#header .logo_box {  
	position: absolute; top: 50%; left: 40px;
	width: auto; height: auto; 


    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);

}
#header .logo_box a { width: auto; height: auto; }
#header .logo_box img { width: auto; height: 57px; }
#header .logo_box img.open { display: none; }
#header .nav_box {
	float: none;
	width: auto; height: auto; 
	vertical-align: middle;
	left: 50%; 
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

#header .nav_box .nav_item{ width: 120px; height: auto; }
#header .nav_box .nav_item a { 
	width: auto; height: auto; line-height: 1.5;
	font-size: 18px; color: #fff; text-align: center;
	padding: 5px;
	border-bottom: 2px solid #00C3FF00;

	left: 50%; 
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);

}

#header .nav_box .nav_item a:hover { 
	color: #00C3FF; 
}

#header .nav_box .nav_item.on a { 
	color: #00C3FF; 
	border-bottom: 2px solid #00C3FF;

}


#header .btn_box {
	position: absolute; top: 50%; right: 40px;
	width: auto; height: auto; 


    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}


#header .btn_box a:nth-child(1) { margin-left: 0px; }
#header .btn_box > a {
	width: 24px; height: 24px;
	margin-left: 20px;
}
#header .btn_box a img { width: 100%; height: auto; }

#header .btn_box .txt_btn {
	width: auto; height: 24px; line-height: 24px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	gap: 18px;
}

#header .btn_box .txt_btn a:nth-child(1)::after {
	content: '';
	position: absolute; top: 50%; right: -9px;
	width: 1px; height: 18px;
	background-color: #CCCCCC;
	opacity: 0.8;


    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

#header .btn_box .txt_btn a {
	width: auto; height: 24px; line-height: 24px;
	font-size: 14px; color: #fff; text-align: left;
	font-weight: 700;
}


#wrap { width: 100%; height: auto; }


#footer{ 
	width: 100%; height: auto; 
	z-index: 100;
	background-color: #000
}

#footer > div { 
	max-width: 1660px; width: 100%; height: 100%;
	padding: 40px 40px 50px;

	left: 50%; 
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}


#footer .logo_box { width: auto; height: 40px; line-height: 40px; }
#footer .logo_box img { width: auto; height: 100%;}

#footer .link_box { 
	float: right;
	width: auto; height: 40px; 
}

#footer .link_box a:nth-child(1) { color: #fff;  padding-left: 0px; }
#footer .link_box a:nth-last-child(1) { padding-right: 0px; }
#footer .link_box a { 
	width: auto; height: auto; line-height: 1;
	font-size: 18px; color: #A1A1AA; text-align: center;
	padding: 0px 15px;
}

#footer .link_box a:nth-child(1)::before { width: 0px; }
#footer .link_box a::before { 
	content: '';
	width: 1px; height: 10px;
	background-color: #fff;
	opacity: 0.2;

	position: absolute; top: 50%; left: 0px;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}



#footer .info_box { 
	width: 100%; height: auto; 
	margin-top: 80px;
}

#footer .info_box .info_item{ 
	width: 100%; height: auto; line-height: 1.6;
	font-size: 14px; color: #E4E4E7; text-align: left;
	margin-top: 0px;
}

#footer .info_box .info_item:nth-child(1){ margin-top: 0px; }
#footer .info_box .info_item > span:nth-child(1) { margin-left: 0px; }
#footer .info_box .info_item > span { margin-left: 15px; }



.m_nav_btn {
	display: none;
	width: 18px; height: 18px;
	margin-left: 20px;
	cursor: pointer;
}

.m_nav_btn > div:nth-child(1) { margin-top: 1px; }
.m_nav_btn > div {
	width: 100%; height: 2px;
	margin-top: 5px;
	background-color: #fff;
}

#header.on.open { background-color: #fff; }
#header.open{ background-color: #fff; }
#header.open .logo_box img.open { display: inline-block; }
#header.open .logo_box img.close { display: none; }
#header.open .btn_box a { display: none; }
#header.open .m_nav_btn { width: 25px; height: 25px; }
#header.open .m_nav_btn > div { 
	width: 25px;
	background-color: #000; 
}


#header .m_nav { display: none; }
#header.open .m_nav {
	display: inline-block;
	width: 100%; height: calc(100vh - 70px); line-height: 1;
	background-color: #fff;
	padding-top: 0px;
}
#header.open .m_nav > div {
	width: 100%; height: auto; line-height: 1;
	border-top: 1px solid #D9D9D9;
}

#header.open .m_nav_btn > div {
	position: absolute; top: 50%; margin: 0px;
}

#header.open .m_nav_btn > div:nth-child(1) {
	left: -1px;
	-webkit-transform: rotate(45deg) translate(0%, -50%);
	-ms-transform: rotate(45deg) translate(0%, -50%);
	transform: rotate(45deg) translate(0%, -50%);
	
}
#header.open .m_nav_btn > div:nth-child(2) { display: none; }
#header.open .m_nav_btn > div:nth-child(3) { 
	left: 1px;
	-webkit-transform: rotate(-45deg) translate(0%, -50%);
	-ms-transform: rotate(-45deg) translate(0%, -50%);
	transform: rotate(-45deg) translate(0%, -50%);
}




#header.open .m_nav .m_nav_item {
	width: 100%; height: auto; line-height: 1;
	margin-top: 40px;
}
#header.open .m_nav .m_nav_item a {
	width: 100%; height: auto; line-height: 1.5;
	font-size: 32px; color: #333333; text-align: left;
}

#header.open .m_nav .m_nav_item a::after {
	content: '';
	position: absolute; top: 50%; right: 0px;
	width: 12px; height: 25px;
	background-image: url(../images/m_nav_arrow.svg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;


    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

section.max_width,
section.max_width .containner { width: 100%; height: auto; }
section.max_width .containner .contents {
	max-width: 1660px; width: 100%; height: auto;
	padding: 0px 40px;
	left: 50%; 
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}


@media (max-width: 479px){ 
	#header { height: calc((70 / 480)* 100vw); line-height: calc((70 / 480)* 100vw); }
	#header > div { padding: 0px calc((30 / 480)* 100vw); }
	#header .logo_box { left: calc((30 / 480)* 100vw); }
	#header .btn_box { 
		right: calc((30 / 480)* 100vw); 
		display: flex;
		align-items: center;
	}

	#header .logo_box img { height: calc((34 / 480)* 100vw); }
	#header .btn_box .txt_btn { height: calc((24 / 480)* 100vw);  line-height: calc((24 / 480)* 100vw); margin-right: 0px; gap: calc((10 / 480)* 100vw); }
	#header .btn_box .txt_btn a { height: calc((24 / 480)* 100vw);  line-height: calc((24 / 480)* 100vw); font-size: calc((14 / 480)* 100vw); }
	.m_nav_btn { margin-left: calc((18 / 480)* 100vw); }
	#header .btn_box > a { margin-left: calc((15 / 480)* 100vw); }

	#header .btn_box .txt_btn a:nth-child(1)::after {
		right: calc((-5 / 480)* 100vw);
		height: calc((15 / 480)* 100vw);
	}

	#header .nav_box { display: none; }

	#header .btn_box > a { width: calc((18 / 480)* 100vw); height: calc((18 / 480)* 100vw); margin-left: calc((15 / 480)* 100vw); }

	#footer > div { padding: calc((45 / 480)* 100vw) calc((30 / 480)* 100vw) calc((45 / 480)* 100vw);}

	#footer .logo_box { width: 100%; height: calc((34 / 480)* 100vw); text-align: center; }
	#footer .logo_box img { 
		left: 50%; 
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		transform: translate(-50%, 0%);
	}

	#footer .link_box { width: 100%; height: auto; text-align: center; margin-top: calc((0 / 480)* 100vw); }
	#footer .link_box a { float: none; font-size: calc((12 / 480)* 100vw);  }

	#footer .info_box { margin-top: calc((30 / 480)* 100vw); }
	#footer .info_box .info_item { font-size: calc((12 / 480)* 100vw); margin-top: calc((15 / 480)* 100vw); text-align: center; }
	#footer .info_box .info_item > span { 
		display: inline-block; width: 100%; line-height: 1.8;
		text-align: center;
		margin: 0px;
	}



	.m_nav_btn { display: block; }
	.m_nav_btn {
		width: calc((18 / 480)* 100vw); height: calc((18 / 480)* 100vw);
		margin-left: calc((18 / 480)* 100vw);
	}

	.m_nav_btn > div:nth-child(1) { margin-top: calc((1 / 480)* 100vw); }
	.m_nav_btn > div { height: calc((2 / 480)* 100vw); margin-top: calc((5 / 480)* 100vw); 	}

	#header.open .m_nav_btn{ width: calc((25 / 480)* 100vw); height: calc((25 / 480)* 100vw); }
	#header.open .m_nav_btn > div { width: calc((25 / 480)* 100vw); }
	#header.open .m_nav_btn > div:nth-child(1) {
		left: calc((-1 / 480)* 100vw);
		
	}
	#header.open .m_nav_btn > div:nth-child(3) { 
		left: calc((1 / 480)* 100vw);
	}


	#header.open .m_nav { height: calc(100vh - ((70 / 480)* 100vw)); }
	#header.open .m_nav .m_nav_item { margin-top: calc((40 / 480)* 100vw); }
	#header.open .m_nav .m_nav_item a { font-size: calc((32 / 480)* 100vw); }
	#header.open .m_nav .m_nav_item a::after { width: calc((12 / 480)* 100vw); height: calc((25 / 480)* 100vw); }
	section.max_width .containner .contents { padding: 0px calc((30 / 480)* 100vw); }

}

@media (max-width: 749px) and (min-width: 480px) { 
	.m_nav_btn { display: block; }

	#header { height: 70px; line-height: 70px; }
	#header > div { padding: 0px 30px; }
	#header .logo_box { left: 30px; }
	#header .btn_box { right: 30px; }

	.m_nav_btn { margin-left: 18px; }
	#header .logo_box img { height: 34px; }
	#header .btn_box > a { margin-left: 15px; }

	#header .nav_box { display: none; }

	#header .btn_box a { width: 18px; height: 18px; }

	#footer > div { padding: 45px 30px 45px;}

	#footer .logo_box { width: 100%; height: 34px; text-align: center; }
	#footer .logo_box img { 
		left: 50%; 
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		transform: translate(-50%, 0%);
	}

	#footer .link_box { width: 100%; height: auto; text-align: center; margin-top: 0px; }
	#footer .link_box a { float: none; font-size: 12px;  }

	#footer .info_box { margin-top: 30px; }
	#footer .info_box .info_item { font-size: 12px; margin-top: 15px; text-align: center; }
	#footer .info_box .info_item > span { 
		display: inline-block; width: 100%; line-height: 1.8;
		text-align: center;
		margin: 0px;
	}
	section.max_width .containner .contents { padding: 0px 30px; }

}

@media (max-width: 1023px) and (min-width: 750px) { 
	.m_nav_btn { display: block; }

	#header { height: 70px; line-height: 70px; }
	#header > div { padding: 0px 30px; }
	#header .logo_box { left: 30px; }
	#header .btn_box { right: 30px; }

	#header .logo_box img { height: 40px; }
	#header .btn_box > a { margin-left: 15px; }

	#header .nav_box { display: none; }

	#header .btn_box a { width: 18px; height: 18px; }

	#footer > div { padding: 45px 30px 45px;}

	#footer .logo_box { width: 100%; height: 34px; text-align: center; }
	#footer .logo_box img { 
		left: 50%; 
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		transform: translate(-50%, 0%);
	}

	#footer .link_box { width: 100%; height: auto; text-align: center; margin-top: 0px; }
	#footer .link_box a { float: none; font-size: 12px;  }

	#footer .info_box { margin-top: 30px; }
	#footer .info_box .info_item { font-size: 12px; margin-top: 15px; text-align: center; }
	#footer .info_box .info_item > span { 
		display: inline-block; width: 100%; line-height: 1.8;
		text-align: center;
		margin: 0px;
	}

	section.max_width .containner .contents { padding: 0px 30px; }


}


@media (max-width: 1279px) and (min-width: 1024px) { 
	#header > div { 
		display: flex; align-items: center;
	}
	#header .nav_box { display: flex; gap: 30px;}
	#header .nav_box .nav_item { width: auto; }
	#header .nav_box .nav_item a { font-size: 16px; }
	#header .btn_box > a { margin-left: 15px; }
}



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

	}
*/