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

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





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

	html, body {
		height: 100%;
		margin: 0px; padding: 0px;
		font-size: 14px;
		font-family: 'NotoSansKR', sans-serif;
	}

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

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

	.en { font-family: 'Oswald', sans-serif; }
	.en_medium { font-family: 'Oswald', 'NotoSansKR', sans-serif; font-weight: 700; }
	.en_bold { font-family: 'Oswald', 'NotoSansKR', sans-serif; font-weight: 700;  }


	.bold { font-weight: 700; }
	.medium { font-weight: 500; }

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

#header { top: 0px; left: 0px; width: 100%; height: 150px; z-index: 10; }
#header .header_top {
	width: 100%; height: 50px;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	text-align: center;
	box-sizing: border-box;
}
#header .header_top > div { 
	width: 100%; max-width: 1280px; height: 49px; line-height: 49px; 
	padding: 0px 40px;
	box-sizing: border-box;
}

#header .header_bottom { width: 100%; height: 100px; text-align: center; }
#header .header_bottom > div { 
	width: 100%; max-width: 1280px; height: 100px; line-height: 100px; 
	padding: 0px 40px;
	box-sizing: border-box;
}

#header .header_txt { width: auto; height: auto; color: #ffffff; text-align: left; font-size: 14px; }

#header .header_btn { width: auto; height: 100%; }
#header .header_btn a { width: 50px; height: 100%; border-right: 1px solid rgba(255, 255, 255, .3); }
#header .header_btn a.btn_01 { width: 50px; border-left: 1px solid rgba(255, 255, 255, .3); }

#header .header_btn a.btn_01 { background: url(../images/header_btn_01.svg) center center no-repeat; }
#header .header_btn a.btn_02 { background: url(../images/header_btn_02.svg) center center no-repeat; }
#header .header_btn a.btn_03 { background: url(../images/header_btn_03.svg) center center no-repeat; }
#header .header_btn a.btn_04 { background: url(../images/header_btn_04.svg) center center no-repeat; }

#header .header_logo { width: auto; height: 100%; }
#header .header_logo a { width: auto; height: 100%; }
#header .header_logo a img { max-height: 100%; vertical-align: middle; }

#header .m_header_nav {
	display: none;
	width: 30px; height: 100%;
}

#header .m_header_nav > div {
	top: 50%; 
	width: 30px; height: 20px;
	float: left;

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


#header .m_header_nav > div > div {
	width: 100%; height: 3px;
	background-color: #fff;
}

#header .m_header_nav > div > div:nth-child(2) { margin-top: 5px; }
#header .m_header_nav > div > div:nth-child(3) { margin-top: 5px; }


#header .header_nav { width: auto; height: 100%; }
#header .header_nav > ul, 
#header .header_nav > ul > li,
#header .header_nav > ul > li > a { width: auto; height: 100%; }

#header .header_nav > ul > li > a { font-size: 16px; color: #fff; margin-left: 35px; }
#header .header_nav > ul > li:first-child > a { margin-left: 0px; }

#header .header_nav > ul > li > ul {
	display: none;
	top: 80px; left: 50%;
	width: 130px; height: auto;
	-webkit-transform: translate(-50%, 0px);
	-ms-transform: translate(-50%, 0px);
	transform: translate(-50%, 0px);
}
#header .header_nav > ul > li:hover > ul { display: inline-block; }

#header .header_nav > ul > li > ul > li {
	width: 100%; height: auto;
}

#header .header_nav > ul > li > ul > li > a {
	width: 100%; height: 45px; line-height: 45px;
	margin-left: 17.5px;
	background-color: #fff;
	color: #574d9f; font-size: 14px;
}
#header .header_nav > ul > li:first-child > ul > li > a { margin-left: 0px; }
#header .header_nav > ul > li > ul > li > a:hover {
	background-color: #574d9f; color: #fff;
}

#m_nav_box {
	display: none;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	z-index: 9;
}

#m_nav_box .m_nav_list_bg {
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-color: #000;
	opacity: 0.5;
}

#m_nav_box .m_nav_list_box {
	width: 200px; height: auto;
	box-sizing: border-box;
	background-color: #fff;
	margin-top: 110px;
	margin-right: 5px;
}

#m_nav_box .m_nav_list_item { width: 100%; height: auto; border-top: 1px solid rgba(0, 0, 0, .3); }
#m_nav_box .m_nav_list_item:first-child { border-top: 0px; }
#m_nav_box .m_nav_list_item > a {
	width: 100%; height: 40px; line-height: 40px;
	padding: 0px 15px;
	font-size: 14px; color: #2a2a2a;
	box-sizing: border-box;

    background: url(../images/m_nav_down.svg) no-repeat calc(100% - 15px) center;
    background-size: 15px;

}

#m_nav_box .m_nav_list_item > div { display: none; width: 100%; height: auto; border-top: 1px solid #f0f0f0; }
#m_nav_box .m_nav_list_item > div > a {
	width: 100%; height: 30px; line-height: 30px;
	padding: 0px 20px;
	font-size: 12px; color: #2a2a2a;
	background-color: #f0f0f0;
	box-sizing: border-box;
}


#footer { width: 100%; height: auto; text-align: center; border-top: 1px solid #e2e2e2; }
#footer > div { 
	width: 100%; max-width: 1280px; height: auto; line-height: 1.8; 
	padding: 40px 40px;
	text-align: left; font-size: 14px; color: #6a6a6a;
	box-sizing: border-box;
}


#sub_header { width: 100%; height: 360px; text-align: center; }
#sub_header .sub_header_img {
	top: 0px; left: 0px; 
	width: 100%; height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#sub_header .sub_header_box {
	width: 100%; max-width: 1280px; height: 100%;
	padding: 150px 40px 0px;
	box-sizing: border-box;
	text-align: center;
}

#sub_header .sub_header_box > div { width: 100%; height: 100%; text-align: center; }
#sub_header .sub_header_box .sub_header_txt {
	top: 50%; 
	width: 100%; height: auto;
    -webkit-transform: translate(0%, -75%);
    -ms-transform: translate(0%, -75%);
    transform: translate(0%, -75%);	
}

#sub_header .sub_header_box .sub_header_txt .sub{
	width: 100%; height: auto; line-height: 1.5;
	font-size: 26px; color: #fff; text-align: center;
}

#sub_header .sub_header_box .sub_header_txt .title{
	width: 100%; height: auto; line-height: 1.5;
	font-size: 36px; color: #fff; text-align: center;
}

#sub_nav { width: 100%; height: 60px; background-color: #f0f0f0; text-align: center; }
#sub_nav > div { width: 100%; max-width: 1280px; height: 60px; padding: 0px 40px; box-sizing: border-box; }
#sub_nav > div > div { display: none; background: url(../images/nav_down.svg) no-repeat calc(100% - 15px) center; }
#sub_nav > div > ul { width: 100%; height: 100%; }
#sub_nav > div > ul > li { width: 100%; height: 100%; }
#sub_nav > div > ul > li > a { 
	width: 100%; height: 60px; line-height: 60px; 
	font-size: 16px; color: #2a2a2a; text-align: center;
	border-right: 1px solid #fff; 
	box-sizing: border-box; 
}
#sub_nav > div > ul > li:first-child > a { border-left: 1px solid #fff; }
#sub_nav > div > ul > li > a.active { background-color: #fff; color: #574d9f; }
#sub_nav > div > ul > li > a:hover.active { background-color: #fff; color: #574d9f; }
#sub_nav > div > ul > li > a:hover {  color: #fff; background-color: #574d9f; }


#sub_nav > div > ul.type_01 > li { width: 100%; }
#sub_nav > div > ul.type_02 > li { width: 50%; }
#sub_nav > div > ul.type_03 > li { width: 33.3333%; }
#sub_nav > div > ul.type_04 > li { width: 25%; }
#sub_nav > div > ul.type_05 > li { width: 20%; }
#sub_nav > div > ul.type_06 > li { width: 16.6666%; }


#wrap .containner_box {
	width: 100%; height: auto;
	text-align: center;
	padding: 120px 0px;
	box-sizing: border-box;
}

#wrap .containner_box > div {
	width: 100%; max-width: 1280px; height: auto;
	padding: 0px 40px;
	box-sizing: border-box;
}

#wrap .containner_box .title_box {
	width: 100%; height: auto; line-height: 1.5;
	text-align: center; font-size: 36px; color: #2a2a2a;
	margin-bottom: 60px;
}

#wrap .containner_box .title_box.double { margin-top: 60px; }


#wrap .containner_box .desc_box {
	width: 100%; height: auto; line-height: 1.5;
	text-align: center; font-size: 16px; color: #6a6a6a;
	margin-bottom: 45px;
}
#wrap .containner_box .desc_box.double { margin-bottom: 30px; }


#wrap .paging_box { width: 100%; height: 35px; text-align: center; margin-top: 60px; }
#wrap .paging_box > div { width: auto; height: 35px; line-height: 35px; }
#wrap .paging_box ul { width: auto; height: 35px; line-height: 35px; }
#wrap .paging_box ul li { width: auto; min-width: 35px; height: 35px; line-height: 35px; margin: 0px 3px; }
#wrap .paging_box ul li a { 
	width: auto; min-width: 35px; height: 35px; line-height: 35px; 
	text-align: center; font-size: 16px; color: #2a2a2a;
	
	box-sizing: border-box; 
}
#wrap .paging_box ul li.arrow { margin: 0px 5px; }
#wrap .paging_box ul li.arrow a { line-height: 33px; border: 1px solid #9fa0a0; }
#wrap .paging_box ul li.active a { color: #e63af1; }

br.type_01 { display: none; }
span.type_01 { display: inline-block; }

br.type_02 { display: none; }
span.type_02 { display: inline-block; }

br.type_04 { display: none; }



.lantern_list_contents {
	width: 100%; height: auto;
    padding: 120px 0px;
    box-sizing: border-box;
}


.lantern_list_contents > div {
	left: 50%;
	width: 100%; max-width: 860px; height: auto;

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

}

.lantern_list_contents > div  * {  float: left; }
.lantern_list_contents > div p { display: inline-block; } 
.lantern_list_contents > div p img { float: left !important; }
.lantern_list_contents > div img {
	display: inline-block;
	width: 100%; height: auto;
    box-sizing: border-box;
}





@media (max-width: 479px){ 
	br.type_01 { display: block; }
	span.type_01 { display: none; }

	br.type_02 { display: block; }
	span.type_02 { display: none; }

	br.type_04  { display: block; }

	#header { height: 60px; }
	#header .header_top { display: none; }
	#header .header_nav { display: none; }
	#header .m_header_nav { display: inline-block; }

	#header .header_bottom > div { padding: 0px 15px; border-bottom: 1px solid rgba(255, 255, 255, .5);  }
	#header .header_bottom { height: 60px; }
	#header .header_bottom > div { height: 60px; line-height: 60px; }
	#header .header_logo a img { width: auto; height: 16px; }

	#header .m_header_nav { width: 25px; }
	#header .m_header_nav > div { width: 25px; height: 16px; }
	#header .m_header_nav > div > div { height: 2px; }


	#sub_header { height: 230px; }
	#sub_header .sub_header_box { padding: 60px 15px 0px; }
	#sub_header .sub_header_box .sub_header_txt .sub { font-size: 16px; }
	#sub_header .sub_header_box .sub_header_txt .title { font-size: 20px; }

	#sub_nav { height: auto; }
	#sub_nav > div { height: auto; padding: 0px 0px; float: left; }
	#sub_nav > div > div { 
		display: inline-block; 
		width: 100%; height: 45px; line-height: 45px; 
		font-size: 12px; color: #fff; text-align: left;
		background-color: #574d9f;
		padding: 0px 15px;
		box-sizing: border-box; 
	}
	#sub_nav > div > ul { display: none; height: auto; }
	#sub_nav > div > ul > li { width: 100% !important; height: auto; } 
	#sub_nav > div > ul > li > a { 
		height: 45px; line-height: 45px; 
		font-size: 12px; text-align: left;
		padding: 0px 15px;
		box-sizing: border-box;

	}

	.lantern_list_contents { padding: 45px 0px; }

	#wrap .containner_box { padding: 45px 0px; }
	#wrap .containner_box > div { padding: 0px 15px; }
	#wrap .containner_box .title_box { font-size: 20px; margin-bottom: 30px; }
	#wrap .containner_box .desc_box { font-size: 12px; margin-bottom: 30px; }

	#wrap .paging_box ul li { min-width: 25px; height: 25px; line-height: 23px; }
	#wrap .paging_box ul li.arrow a { line-height: 23px; }
	#wrap .paging_box ul li.arrow a img { width: 5px; height: auto; }
	#wrap .paging_box ul li a { font-size: 12px; min-width: 25px; height: 25px; line-height: 25px; }

	#footer > div { padding: 30px 15px; font-size: 12px; text-align: center; }
	#m_nav_box .m_nav_list_box { margin-top: 60px; }
	#wrap .containner_box .title_box.double { margin-top: 45px; }

}

@media (max-width: 749px) and (min-width: 480px) { 
	br.type_01 { display: block; }
	span.type_01 { display: none; }
	br.type_04  { display: block; }

	#header { height: 60px; }
	#header .header_top { display: none; }
	#header .header_nav { display: none; }
	#header .m_header_nav { display: inline-block; }
	
	#header .header_bottom > div { padding: 0px 15px; border-bottom: 1px solid rgba(255, 255, 255, .5);  }
	#header .header_bottom { height: 60px; }
	#header .header_bottom > div { height: 60px; line-height: 60px; }
	#header .header_logo a img { width: auto; height: 16px; }
	#header .m_header_nav { width: 25px; }
	#header .m_header_nav > div { width: 25px; height: 16px; }
	#header .m_header_nav > div > div { height: 2px; }

	#sub_header { height: 230px; }
	#sub_header .sub_header_box { padding: 60px 15px 0px; }
	#sub_header .sub_header_box .sub_header_txt .sub { font-size: 18px; }
	#sub_header .sub_header_box .sub_header_txt .title { font-size: 24px; }

	#sub_nav { height: 45px; }
	#sub_nav > div { height: 45px; padding: 0px 0px; }
	#sub_nav > div > ul > li > a { height: 45px; line-height: 45px; font-size: 12px; }

	.lantern_list_contents { padding: 45px 0px; }
	#wrap .containner_box { padding: 45px 0px; }
	#wrap .containner_box > div { padding: 0px 15px; }
	#wrap .containner_box .title_box { font-size: 24px; margin-bottom: 30px; }
	#wrap .containner_box .desc_box { font-size: 14px; margin-bottom: 30px; }

	#wrap .paging_box { margin-top: 45px; }
	#wrap .paging_box ul li { min-width: 25px; height: 25px; line-height: 23px; }
	#wrap .paging_box ul li.arrow a { line-height: 23px; }
	#wrap .paging_box ul li.arrow a img { width: 5px; height: auto; }
	#wrap .paging_box ul li a { font-size: 12px; min-width: 25px; height: 25px; line-height: 25px; }

	#footer > div { padding: 30px 15px; font-size: 12px; text-align: center; }
	#m_nav_box .m_nav_list_box { margin-top: 60px; }
		#wrap .containner_box .title_box.double { margin-top: 45px; }

}

@media (max-width: 1023px) and (min-width: 750px) { 
	br.type_04  { display: block; }
	#header { height: 110px; }
	#header .header_top > div { padding: 0px 15px; }
	#header .header_bottom > div { padding: 0px 15px; }
	#header .header_nav { display: none; }
	#header .m_header_nav { display: inline-block; }
 
	#header .header_bottom { height: 60px; }
	#header .header_bottom > div { height: 60px; line-height: 60px; }
	#header .header_logo a img { width: auto; height: 20px; }

	#sub_header { height: 320px; }
	#sub_header .sub_header_box { padding: 110px 15px 0px; }
	#sub_header .sub_header_box .sub_header_txt .sub { font-size: 20px; }
	#sub_header .sub_header_box .sub_header_txt .title { font-size: 26px; }

	#sub_nav { height: 45px; }
	#sub_nav > div { height: 45px; padding: 0px 15px; }
	#sub_nav > div > ul > li > a { height: 45px; line-height: 45px; font-size: 14px; }

	.lantern_list_contents { padding: 60px 0px; }
	#wrap .containner_box { padding: 60px 0px; }
	#wrap .containner_box > div { padding: 0px 15px; }
	#wrap .containner_box .title_box { font-size: 26px; margin-bottom: 45px; }
	#wrap .containner_box .desc_box { font-size: 14px; margin-bottom: 45px; }

	#wrap .paging_box { margin-top: 45px; }
	#wrap .paging_box ul li a { font-size: 14px; }
	#wrap .containner_box .title_box.double { margin-top: 45px; }

	#footer > div { padding: 30px 15px; font-size: 12px; }
}


@media (max-width: 1279px) and (min-width: 1024px) { 
	br.type_04  { display: block; }
	#header .header_top > div { padding: 0px 30px; }
	#header .header_bottom > div { padding: 0px 30px; }
	#header .header_nav > ul > li > a { margin-left: 30px; }
	#header .header_nav > ul > li > ul > li > a { margin-left: 15px; }
	#header .header_nav > ul > li > ul { width: 110px; }
	
	#sub_header .sub_header_box { padding: 150px 30px 0px; }

	#sub_nav > div { padding: 0px 30px; }

	.lantern_list_contents { padding: 90px 0px; }

	#wrap .containner_box { padding: 90px 0px; }
	#wrap .containner_box > div { padding: 0px 30px; }
	#wrap .paging_box ul li a { font-size: 14px; }

	#footer > div { padding: 40px 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) { 
	
}
*/