/*---------------------------------------------------------------------------
	[DIV LAYOUT GUIDE]
	GNB	(Global Navigation Bar)	:	사이트 최상위 전체 공통네비게이션.메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바
	LNB	(Local Navigation Bar)	:	현재 서비스 영역(Local)만 해당되는 네비게이션.서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 메뉴바
	SNB	(Side Navigation Bar)	:	메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바
	FNB	(Foot Navigation Bar)	:	하단메뉴, 하단로고, 주소, 카피라이팅 영역

	#wrapper > #container > (#regin) > #area > #section > #box
	BBDO1	color						: #ef4024;		rgb(239, 64, 36)
	MAIN	color						: #00b6a8;		rgb(0, 182, 168)
	KSA1	color						: #009f94;		rgb(0, 159, 148)
	KSA2	color						: #00978b;		rgb(0, 151, 139)
	KSA3	color						: #009186;		rgb(0, 145, 134)
	KSA4	color						: #00887d;		rgb(0, 136, 125)
	KSA5	color						: #007d74;		rgb(0, 125, 116)
	KSA6	color						: #007168;		rgb(0, 113, 104)
	KDIS1	color						: #03945d;		rgb(3, 148, 93)
	KDIS2	color						: #2c878e;
	KDIS3	color						: #024d31;		rgb(2, 77, 49)
	KDIS5	color						: #00321e;		rgb(0, 50, 30)
	KDIS6	color						: #004b2d;		rgb(0, 75, 45)
	KDIS7	color						: #00643c;		rgb(0, 100, 60)
	KDIS8	color						: #007d4b;		rgb(0, 125, 75)
---------------------------------------------------------------------------*/
@charset "utf-8";
@media (min-width: 861px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/
/*--------------------------------------------------
	LAOUT	MOBILE
--------------------------------------------------*/
	#wrap{
		display: block;
		position: relative;
		width: 100%;
	}
	#header{
		position: fixed;
		display: block;
		top: 0px;
		width: 100%;
		z-index: 100;
		background-color: #ff0000;
		border-bottom: 0px solid #161616;
	}
	#header.header_fix{
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 100;
		/*
		-moz-box-shadow: 0px 5px 5px #7f7f7f, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
		-webkit-box-shadow: 0px 5px 5px #7f7f7f, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
		box-shadow: 0px 5px 5px #7f7f7f, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
		#161616 #ff0000
		*/
	}
	#container{
		clear: both;
		display: block;
		position: relative;
		background-color: #161616;
		padding-top: 0rem;
		padding-bottom: 0rem;
		min-height: 30rem;
		padding-left: 10px;
		padding-right: 10px;
	}
	#container_red{
		clear: both;
		display: block;
		position: relative;
		background-color: #ff0000;
		padding-top: 0rem;
		padding-bottom: 0rem;
		min-height: 30rem;
		padding-left: 10px;
		padding-right: 10px;
	}
	#wrap > #container_white{
		clear: both;
		display: block;
		position: relative;
		background-color: #fff;
		padding-top: 0rem;
		padding-bottom: 0rem;
		min-height: 30rem;
		padding-left: 10px;
		padding-right: 10px;
	}
	#wrap > #container_black{
		clear: both;
		display: block;
		position: relative;
		background-color: #000;
		padding-top: 0rem;
		padding-bottom: 0rem;
		min-height: 30rem;
		padding-left: 10px;
		padding-right: 10px;
	}
	#footer{
		position: relative;
		clear: both;
		display: block;
		width: 100%;
		height: 40px;
		background-color: #000000;
		border-top: 0px solid #ef4024;
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
		bottom: 0px;
		z-index: 100;
	}




/*--------------------------------------------------
	TOP
--------------------------------------------------*/
@media (min-width: 861px){	/*@media	BEGIN	--------------------------*/
	#header > #top{
		clear: both;
		display: block;
		height: 60px;
		padding-top: 0px;
		padding-bottom: 0px;
		background-color: #ff0000;
		/*background-color: #ef4024;*/
		padding-left: 10px;
		padding-right: 10px;
		z-index: 100;
	}
	#top > .top_section{
		display: block;
		position: relative;
		width: 100%;
		height: 60px;
		max-width: 1200px;
		margin: 0 auto;
		z-index: 300;
	}
	#top > .top_section > .top_logo_white{
		clear: both;
		display: inline-block;
		position: relative;
		padding-top: 16px;
	}
	#top > .top_section > .top_logo_white > a > img{
		width: 100px;
		margin-top: -1px;
	}
	#top > .top_section > .top_logo_red{
		display: none;
	}

	#top > .top_section > .top_navi{
		display: none;
	}
}	/*@media	END	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	BEGIN	--------------------------*/
	#header > #top{
		clear: both;
		display: block;
		/*
		width: 100%;
		*/
		height: 60px;
		padding-top: 0px;
		padding-bottom: 0px;
		background-color: #ff0000;
		/*background-color: #ffffff;*/
		padding-left: 10px;
		padding-right: 10px;
	}
	#top > .top_section{
		display: block;
		position: relative;
		width: 100%;
		z-index: 3000;
	}
	#top > .top_section > .top_logo_white{
		clear: both;
		display: inline-block;
		position: relative;
		padding-top: 16px;
	}
	#top > .top_section > .top_logo_white > a > img{
		width: 92px;
	}
	#top > .top_section > .top_logo_red{
		display: none;
	}
	#top > .top_section > .top_navi{
	}
	#top > .top_section > .top_navi > .gnb_btn{
		position: absolute;
		top: 0px;
		right: 0px;
	}
	#top > .top_section > .top_navi > .gnb_btn > a > img{
		width: 50px;
	}

	#top > .top_section > .gnb_sns{
		display: none;
	}



	#top > .top_section > .top_navi > .gnb{
		position: fixed;
		/*
		position: absolute;
		*/
		top: 0px;
		right: 0px;
		display: none;
		z-index: 2400;
		background-color: #ff0000;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu{
		clear: both;
		display: block;
		position: relative;
		width: 18.0rem;
		height: 100%;
		padding-top: 30px;
	}
	.gnb_menu > ul{
		display: block;
		position: relative;
		width: 100%;
	}
	.gnb_menu > ul > li{
		display: block;
		position: relative;
		width: 100%;
		padding-top: 1.0rem;
		padding-bottom: 1.0rem;
		padding-left: 1.5rem;
		padding-right: 0.5rem;
		border-top: 1px solid #f36d56;
		cursor: pointer;
	}
	.gnb_menu > ul > li:last-child{
		border-bottom: 1px solid #f36d56;
	}
	.gnb_menu > ul > li:hover{
		background-color: #c5351c;
	}
	.gnb_menu > ul > li > div >{
		word-wrap: break-word;
	}
	.gnb_menu > ul > li > div > span{
		font-size: 1.0rem;
		color: #ffffff;
		font-weight: lighter;
		text-decoration: none;
		cursor: pointer;
	}
	.gnb_menu > ul > li.current{
		font-weight: bold;
		color: #00321e;
	}



	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_close{
		clear: both;
		display: block;
		position: relative;
		text-align: right;
		/*
		position: absolute;
		top: 17.0rem;
		right: 0.7rem;
		*/
		z-index: 2600;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_close > img{
		margin-top: 1.3rem;
		margin-right: 1.3rem;
		width: 2.1rem;
	}


	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns{
		clear: both;
		display: block;
		position: relative;
		text-align: left;
		z-index: 2600;
		padding-top: 2.0rem;
	}

	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul{
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul > li{
		float: left;
		padding-left: 1.1rem;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul > li:nth-of-type(1){
		padding-left: 1.7rem;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul > li > img{
		width: 70%;
	}




	#top > .top_section > .top_navi > .gnb_bg{
		position: fixed;
		top: 0rem;
		width: 100%;
		height: 100%;
		background-color: #555555;
		opacity: 0.5;
		display: none;
		z-index: 2200;
	}
}	/*@media	END	--------------------------*/
@media (max-width: 480px){	/*@media	BEGIN	--------------------------*/
	#header > #top{
		clear: both;
		display: block;
		/*
		width: 100%;
		*/
		height: 60px;
		padding-top: 0px;
		padding-bottom: 0px;
		background-color: #ff0000;
		/*background-color: #ffffff;*/
		padding-left: 10px;
		padding-right: 10px;
	}
	#top > .top_section{
		display: block;
		position: relative;
		width: 100%;
		z-index: 3000;
	}
	#top > .top_section > .top_logo_white{
		clear: both;
		display: inline-block;
		position: relative;
		padding-top: 16px;
	}
	#top > .top_section > .top_logo_white > a > img{
		width: 92px;
	}
	#top > .top_section > .top_logo_red{
		display: none;
	}




	#top > .top_section > .top_navi{
	}
	#top > .top_section > .top_navi > .gnb_btn{
		position: absolute;
		top: 0px;
		right: 0px;
	}
	#top > .top_section > .top_navi > .gnb_btn > a > img{
		width: 50px;
	}


	#top > .top_section > .gnb_sns{
		display: none;
	}




	#top > .top_section > .top_navi > .gnb{
		position: fixed;
		/*
		position: absolute;
		*/
		top: 0px;
		right: 0px;
		display: none;
		z-index: 2400;
		background-color: #ff0000;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu{
		clear: both;
		display: block;
		position: relative;
		width: 17.0rem;
		height: 100%;
		padding-top: 30px;
	}
	.gnb_menu > ul{
		display: block;
		position: relative;
		width: 100%;
	}
	.gnb_menu > ul > li{
		display: block;
		position: relative;
		width: 100%;
		padding-top: 1.0rem;
		padding-bottom: 1.0rem;
		padding-left: 1.5rem;
		padding-right: 0.5rem;
		border-top: 1px solid #f36d56;
		cursor: pointer;
	}
	.gnb_menu > ul > li:last-child{
		border-bottom: 1px solid #f36d56;
	}
	.gnb_menu > ul > li:hover{
		background-color: #ff0000;
	}
	.gnb_menu > ul > li > div >{
		word-wrap: break-word;
	}
	.gnb_menu > ul > li > div > span{
		font-size: 1.0rem;
		color: #ffffff;
		font-weight: lighter;
		text-decoration: none;
		cursor: pointer;
	}
	.gnb_menu > ul > li.current{
		font-weight: bold;
		color: #00321e;
	}



	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_close{
		clear: both;
		display: block;
		position: relative;
		text-align: right;
		/*
		position: absolute;
		top: 17.0rem;
		right: 0.7rem;
		*/
		z-index: 2600;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_close > img{
		margin-top: 1.3rem;
		margin-right: 1.3rem;
		width: 2.1rem;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns{
		clear: both;
		display: block;
		position: relative;
		text-align: left;
		z-index: 2600;
		padding-top: 2.0rem;
	}

	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul{
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul > li{
		float: left;
		padding-left: 1.1rem;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul > li:nth-of-type(1){
		padding-left: 1.7rem;
	}
	#top > .top_section > .top_navi > .gnb > .gnb_menu > .gnb_sns > ul > li > img{
		width: 70%;
	}



	#top > .top_section > .top_navi > .gnb_bg{
		position: fixed;
		top: 0rem;
		width: 100%;
		height: 100%;
		background-color: #555555;
		opacity: 0.5;
		display: none;
		z-index: 2200;
	}
}	/*@media	end	--------------------------*/






/*--------------------------------------------------
	header_gnb
--------------------------------------------------*/
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#top > .top_section > .top_gnb{
		clear: both;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-65%);

		display: flex;
		flex-direction: row-reverse;
	}
	#top > .top_section > .top_gnb > ul{
	}
	#top > .top_section > .top_gnb > ul > li{
		float: left;
		padding-left: 5.2rem;
	}
	#top > .top_section > .top_gnb > ul > li > div{
		margin-top: 19px;
	}
	#top > .top_section > .top_gnb > ul > li > div > a{
		color: #fff;
		font-size: 1.0rem;
		font-weight: bold;
	}


	#top > .top_section > .gnb_sns{
		float: right;
	}
	#top > .top_section > .gnb_sns > ul{
	}
	#top > .top_section > .gnb_sns > ul > li{
		float: left;
		padding-top: 16px;
		padding-left: 10px;
	}
	#top > .top_section > .gnb_sns > ul > li > img{
		width: 70%;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#top > .top_section > .top_gnb{
		display: none;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------------------------------*/
	#top > .top_section > .top_gnb{
		display: none;
	}
}	/*@media	end	--------------------------*/










/*--------------------------------------------------
	container_body
--------------------------------------------------*/
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#container_body{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding-top: 0.0rem;
		padding-bottom: 0rem;
		padding-left: 0rem;
		padding-right: 0rem;
		/*margin-top: 60px;*/
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#container_body{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		padding-top: 0.0rem;
		padding-bottom: 0rem;
		padding-left: 0rem;
		padding-right: 0rem;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#container_body{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		padding-top: 0.0rem;
		padding-bottom: 0rem;
		padding-left: 0rem;
		padding-right: 0rem;
	}
}	/*@media	end	--------------------------*/




/*--------------------------------------------------
	FOOTER
--------------------------------------------------*/
	#footer > .footer_addr{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		line-height: 1.1;
	}
	#footer > .footer_addr > span{
		color: #a6a6a6;
		font-size: 0.7rem;
		font-weight: lighter;
	}
	#footer > .footer_tel{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		line-height: 1.1;
	}
	#footer > .footer_tel > span{
		color: #a6a6a6;
		font-size: 0.7rem;
		font-weight: lighter;
	}
	#footer > .footer_copy{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		line-height: 1.1;
		padding-top: 0.1rem;
	}
	#footer > .footer_copy > span{
		color: #a6a6a6;
		font-size: 0.62rem;
		letter-spacing: -0.1px;
		font-weight: lighter;
	}