@charset "UTF-8";

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}


/*  CSS reset */
html, body, div span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, b, u, center, dl, dt, dd, ul, ol, li, form, fieldset, legend, label, input, 
select, textarea, header, main, footer, section, article, aside, menu, nav, table, caption, tbody, tfoot, 
thead, tr, th, td, summary, figure, figcaption, hgroup
{ 

	font-family:'Noto Sans Kr',sans-serif !important; /*국문용*/
	font-family: 'Roboto', 'Noto Sans', sans-serif; /*영문용*/
	font-size:16px ;
	color:#323131; 
	font-weight:300;
	}

/*사이트전체감싸는박스 220618 lwy 수정*/
#container { position: relative; background: #fff;border:0px solid blue;top:-10px; }

/* 2banner */
.banner2-5050 {display:flex;width:100%;overflow:hidden;flex-wrap:wrap;box-sizing:border-box}

.banner2-5050_left {width:50%;padding:10px}
.banner2-5050_right {width:50%;padding:10px}

.banner2-5050_left  img {max-width:100%}
.banner2-5050_right img  {max-width:100%}

	@media (max-width: 720px) {
			.banner2-5050_left {width:100%;padding:0;}
			.banner2-5050_right{width:100%;padding:0;margin-top:10px;}
	}








/* flex */
/***** 공용레이아웃 *****/
/* 일반페이지에서 50:50 플렉스 컬럼일때 700이하면 1row 형태로 전환  이미지는 break point 1th ; 700px로 작성 */
.flex2colum_half {display:flex;width:100%;overflow:hidden;flex-wrap:wrap;box-sizing:border-box}

.flex2colum_half .flexleft {width:50%;padding:10px}
.flexleft .content_header {font-size:32px;font-weight:300;margin-top:10px;}
.flexleft .content_desc {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:justify}

.flex2colum_half .flexright {width:50%;padding:10px}
.flexright .content_header {font-size:32px;font-weight:300;margin-top:10px;}
.flexright .content_header2 {font-size:32px;font-weight:300;margin-top:30px;border:0px solid red}
.flexright .content_subheader {font-size:18px;font-weight:500;display:inline-block;width:100%;border:0px solid red}
.flexright .content_subheaderInline {font-size:18px;font-weight:500;}
.flexright .content_subTXT {display:inline-block;width:100%;margin-bottom:15px}
.flexright .content_bold {font-weight:700}
.flexright .content_desc {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:justify}
.flexright .content_descL {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:left}


	@media (max-width: 1000px) {
			.flex2colum_half .flexleft {width:100%}
			.flex2colum_half .flexright {width:100%;margin-top:20px}
	}


/*2컬럼 80% - 20% */

.flex2colum_8020 {display:flex;width:100%;overflow:hidden;flex-wrap:wrap;box-sizing:border-box}

.flex2colum_8020 > .flexleft8020 {width:80%;padding:10px}
.flex2colum_8020 .flexleft .content_header {font-size:32px;font-weight:300;margin-top:10px;}
.flex2colum_8020 .flexleft .content_desc {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:justify}

.flex2colum_8020 > .flexright8020 {width:20%;padding:10px}
.flex2colum_8020 .flexright .content_header {font-size:32px;font-weight:300;margin-top:10px;}
.flex2colum_8020 .flexright .content_header2 {font-size:32px;font-weight:300;margin-top:30px;border:0px solid red}
.flex2colum_8020 .flexright .content_subheader {font-size:18px;font-weight:500;display:inline-block;width:100%;border:0px solid red}
.flex2colum_8020 .flexright .content_subheaderInline {font-size:18px;font-weight:500;}
.flex2colum_8020 .flexright .content_subTXT {display:inline-block;width:100%;margin-bottom:15px}
.flex2colum_8020 .flexright .content_bold {font-weight:700}
.flex2colum_8020 .flexright .content_desc {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:justify}
.flex2colum_8020 .flexright .content_descL {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:left}


/*2컬럼 20% - 80% */

.flex2colum_2080 {display:flex;width:100%;overflow:hidden;flex-wrap:wrap;box-sizing:border-box}

.flex2colum_2080 > .flexleft2080 {width:20%;padding:10px}
.flex2colum_2080 .flexleft .content_header {font-size:32px;font-weight:300;margin-top:10px;}
.flex2colum_2080 .flexleft .content_desc {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:justify}

.flex2colum_2080 > .flexright2080 {width:80%;padding:10px}
.flex2colum_2080 .flexright .content_header {font-size:32px;font-weight:300;margin-top:10px;}
.flex2colum_2080 .flexright .content_header2 {font-size:32px;font-weight:300;margin-top:30px;border:0px solid red}
.flex2colum_2080 .flexright .content_subheader {font-size:18px;font-weight:500;display:inline-block;width:100%;border:0px solid red}
.flex2colum_2080 .flexright .content_subheaderInline {font-size:18px;font-weight:500;}
.flex2colum_2080 .flexright .content_subTXT {display:inline-block;width:100%;margin-bottom:15px}
.flex2colum_2080 .flexright .content_bold {font-weight:700}
.flex2colum_2080 .flexright .content_desc {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:justify}
.flex2colum_2080 .flexright .content_descL {margin-top:20px;letter-spacing:1;line-height:190% !important;text-align:left}







/* 3컬럼 레이아웃 : 추후변경 */
.flexcolumjustify {display:flex;width:100%;overflow:hidden;flex-wrap:wrap;box-sizing:border-box;border:0px solid blue}
.flex3item {width:33.133%;padding:10px;border:0px solid red}


.flex3item  .content_header {font-size:32px;font-weight:300;margin-top:10px;}
.flex3item  .content_subheader {font-size:18px;font-weight:500;display:inline-block;width:100%;border:0px solid red}
.flex3item  .content_desc {margin-top:0px;letter-spacing:1;line-height:170% !important;text-align:justify}
.flex3item  .content_subTXT {display:inline-block;width:100%;margin-top:10px}
.flex3item  .contentRoundWrap {width:98%;border:1px solid #CCCCCC;border-radius:12px;padding:15px}

	@media (max-width: 700px) {
			.flex3item {width:100% }
	}

/* 1row flexbilebox */
.flex1colum100 {width:100%;text-align:justify;overflow:hidden;line-height:180%;padding:10px 0px}
.flex1colum80 {width:80%;margin:0 auto;text-align:justify;overflow:hidden;line-height:180%;padding:20px 5px}






/*범용wrapper, 단독범용이지만, 특정 box 아래에선 상속값이적용됨*/
.wrap { width: 96%; max-width: 1200px; margin: 0 auto;border:0px solid blue;line-height:180%}
.wrap img { width: auto; max-width: 100%; }

	@media all and (max-width: 1024px) { 
		.wrap { width: 94%; margin: 0 3% 0 3%;  } 
		}

/*헤더*/
#header { /* position - index - width - height - x - y - align */
	position: fixed; 
	z-index: 10; /*gnb2보다위에 있어야 상단그림자 없애는 효과 index 5002*/
	width: 100%; 
	height: 100px; 
	top: 50px; /* 상단 로그인외 메뉴 위치만큼 */ 
	left: 0; 
	text-align: center; 
	background-color: #fff; 
	border-bottom: 1px solid #dddddd !important;
	-webkit-transition: background  0.1s; 
	-moz-transition: background  0.1s; 
	-o-transition: background  0.1s; 
	-ms-transition: background  0.1s; 
	transition: background  0.6s; 
}

/*#header .wrap { max-width: 1200px; position: relative; height: 100%;} */
#header .wrap { max-width: 1500px; position: relative; padding-left: 300px; padding-right: 300px; height: 100%;background-color:#FFF} 

#header .wrap::after { display: block; content: ""; clear: both; } 

/* 로고 */
#header #logo { position: absolute; left: 0; max-width: 320px; top:30px;}
#header #logo a { display: block; height:47px}
#header img { width: auto; max-width: 100%; display: block;}

/* 로고 */
/*#header.main.on { background: transparent; border-bottom: rgba(255, 255, 255, 0); box-sizing: content-box; }*/
#header.main.on { background-color:#FFF; box-sizing: content-box; }

#header.main.on #logo { position: absolute; left: 0; max-width: 290px; }
#header.main.on #logo a { display: block; width: 230px !important; height: 47px; background: url(/images/logowhite.png) no-repeat left top; background-size: contain; }
/* #header.main.on #logo a img { display: none; }*/
#header.main.on #gnb ul li a { color: #fff; }

  #header #logo, #header.main.on #logo { width: 230px !important; border:0px solid pink}
  #header #logo img, #header.main.on #logo img { width: 100% !important; }
  #header #logo a, #header.main.on #logo a { background-size: 230px; background-position: left top; }





/* GNB */
#header #gnb { text-align: center; border:0px solid green !important;width:1200px !important;index:8 !important;height:100%; }
#header #gnb ul { display: inline-block; border:0px solid blue; height:100%;}
#header #gnb ul li { display: inline-block; padding: 30px 40px; border:0px solid red !important; height:100%;}
#header #gnb ul li:first-child { }
#header #gnb ul li a { display: inline-block; font-size: 18px; color: #000000; position: relative; font-weight:700 !important}
#header #gnb ul li a:after { content: ''; display: none; background: #0365ee; position: absolute; top: -12px; right: -5px; width: 0px; height: 0px; border-radius: 100%; }
#header #gnb ul li a:hover { color: #0365ee; }
#header #gnb ul li a:hover:after { display: block; }

#header #gnb ul li.on a { color: #0365ee; }
#header #gnb ul li.on a:after { display: block; }



	@media all and (min-width: 2441px) { 
		#header #gnb { text-align: center; border:0px solid black;width:1200px !important }
		#header #gnb ul li { display: inline-block; padding: 0 35px; border:0px solid red; line-height:100px;}
		/*gnb2 도 같이 줄인다*/
		#gnb2 .wrap > ul { display: inline-block;border:0px solid green !important;width:1200px !important }
	}



	@media all and (max-width: 2440px) { 
		#header #gnb { text-align: center; border:0px solid black;width:1200px !important }
		#header #gnb ul li { display: inline-block; padding: 0 35px; border:0px solid red; line-height:100px;}
		/*gnb2 도 같이 줄인다*/
		#gnb2 .wrap > ul { display: inline-block;border:0px solid green !important;width:1200px !important }
	}

	@media all and (max-width: 1700px) { 
		#header #gnb { text-align: center; border:0px solid green;width:1000px !important }
		#header #gnb ul li { display: inline-block; padding: 0 30px; border:0px solid red; line-height:100px;}
		/*gnb2 도 같이 줄인다*/
		#gnb2 .wrap > ul { display: inline-block;border:0px solid green;width:1000px !important }
	}

	@media all and (max-width: 1280px) { 
		#header #gnb { text-align: center; border:0px solid black;width:900px !important }
		#header #gnb ul li { display: inline-block; padding: 0 25px; border:0px solid red; line-height:100px;}
		/*gnb2 도 같이 줄인다*/
		#gnb2 .wrap > ul { display: inline-block;border:4px solid green;width:900px !important }
	}




/* GNB2 : 하단 서브메뉴 index 5000*/
#gnb2 { width: 100%; position: fixed; z-index: 9; background: #FFF; text-align: center; left: 0; top: 134px; display: none; border:0px solid red !important; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1) !important}
#gnb2 .wrap { max-width: 1500px; position: relative; padding-left: 300px; padding-right: 300px; }
#gnb2 .wrap::after { display: block; content: ""; clear: both; } /*gnb2 .wrap class='clearfloat' */

#gnb2 .wrap > ul { display: inline-block;border:0px solid green;width:1000px }
#gnb2 .wrap > ul > li { display: inline-block; min-width: 80px; vertical-align: top; padding-top: 35px; padding-bottom: 20px; border:0px solid red}
#gnb2 .wrap > ul .depth-2 li { margin-bottom: 0.75em; border:0px solid blue }
#gnb2 .wrap > ul .depth-2 a { display: inline-block; padding: 2px 6px; color: #222; font-size: 16px; font-weight: 300; position: relative; }
/* #gnb2 .wrap > ul .depth-2 a { display: inline-block; padding-bottom: 0.15em; color: #222; font-size: 14px; font-weight: 200; position: relative; word-break: keep-all; } */

/*hover시 효과 밑줄 그어지는 애니*/
/*
#gnb2 .wrap > ul .depth-2 a:after { content: ''; display: block; position: absolute; bottom: 0.1em; left: 50%; width: 0; height: 3px; background: #ff6633; -webkit-transition: left 0.2s, width 0.2s; -moz-transition: left 0.2s, width 0.2s; -o-transition: left 0.2s, width 0.2s; -ms-transition: left 0.2s, width 0.2s; transition: left 0.2s, width 0.2s; }
#gnb2 .wrap > ul .depth-2 a:hover { color: #ff6633; }
#gnb2 .wrap > ul .depth-2 a:hover:after { left: 0; width: 100%; }
*/

#gnb2 .wrap > ul .depth-2 a:after { 
	content: ''; 
	display: block; 
	position: absolute; 
	bottom: -0.2em; 
	left: 50%; 
	width: 0; 
	height: 0px;  /*효과없애기 */
	background: #0365ee; 
	-webkit-transition: left 0.2s, width 0.2s; 
	-moz-transition: left 0.2s, width 0.2s; 
	-o-transition: left 0.2s, width 0.2s; 
	-ms-transition: left 0.2s, width 0.2s; 
	transition: left 0.2s, width 0.2s; 
	}
#gnb2 .wrap > ul .depth-2 a:hover { color: #FFFFFF; background-color:#0365ee ;padding:2px 6px}
#gnb2 .wrap > ul .depth-2 a:hover:after { left: 0; width: 100%; }





/*
@media all and (max-width: 1545px) { 
	  #header #gnb ul li, #header.main.on #gnb ul li { padding: 46px 35px; }
	  #header #gnb ul li a, #header.main.on #gnb ul li a { font-size: 19px; }
	}

@media all and (max-width: 1268px) { 
	  #header #gnb ul li, #header.main.on #gnb ul li { padding: 46px 35px; }
	  #header #gnb ul li a, #header.main.on #gnb ul li a { font-size: 17px; }
	}
*/


/* GNB : normal 우측 스몰메뉴 : 로그인(오프)/회원가입/마이페이지영역 */
#header .rightmenu { position: absolute; top: 35px; right: 0; max-width: 100px; padding-right: 73px;border:0px solid pink }
#header .rightmenu ul { width: 100%; display: block; border:0px solid red}
#header .rightmenu ul::after { display: block; content: ""; clear: both; }
#header .rightmenu ul li { float: left; width: 25%; border:0px solid yellow }
#header .rightmenu ul li a { display: block; width: 100%; height: 40px; position: relative; margin-top: 7px; }
#header .rightmenu ul li a:hover i.icon-face { background-image: url(../images/common/sns_icon_on_01.png) !important; }
#header .rightmenu ul li a:hover i.icon-instar { background-image: url(../images/common/sns_icon_on_02.png) !important; }
#header .rightmenu ul li a:hover i.icon-chung { background-image: url(../images/common/sns_icon_on_03.png) !important; }
#header .rightmenu ul li a:hover i.icon-sea { background-image: url(../images/common/sns_icon_on_04.png) !important; }

#header .rightmenu .btn-allMenu, #header .rightmenu .btn-allMenu-m { display: block; position: absolute; top: 0; right: 0; width: 40px; height: 40px; border:0px solid red}
#header .rightmenu .btn-allMenu-m { display: none; }

/* #header.main.on { background: transparent; border-bottom: rgba(255, 255, 255, 0); box-sizing: content-box; } */
#header.main.on { background: #FFF; box-sizing: content-box; }
#header.main.on #logo { position: absolute; left: 0; max-width: 320px; top:30px;border:0px solid blue}



/* mobile에서 로고위치 조정 */
@media all and (max-width: 500px) { 
	#header.main.on #logo { position: absolute; left: 0; max-width: 290px; top:50px;}
	#header.main  #logo { position: absolute; left: 0; max-width: 290px; top:50px;}
}


#header.main.on #logo a { display: block; width: 290px; height: 47px; background: url(/images/logowhite.png) no-repeat left top; background-size: contain; }
/* #header.main.on #logo a img { display: none; }*/
#header.main.on #gnb ul li a { color: #000; }

#header.main.on .rightmenu ul li a i.icon-face { background-image: url(../images/common/sns_icon_main_01.png); }
#header.main.on .rightmenu ul li a i.icon-instar { background-image: url(../images/common/sns_icon_main_02.png); }
#header.main.on .rightmenu ul li a i.icon-chung { background-image: url(../images/common/sns_icon_main_03.png); }
#header.main.on .rightmenu ul li a i.icon-sea { background-image: url(../images/common/sns_icon_main_04.png); }
#header.main.on .rightmenu .btn-allMenu i.icon-menu, #header.main.on .rightmenu .btn-allMenu-m i.icon-menu { 
	background-image: url(../images/common/icon_menu_main.png);
	border:0px solid blue;
	
}




/* 범용 클래스 선언*/
.clearfloat:after { content: ''; display: block; clear: both; }






@media all and (max-width: 1545px) { 
  #header .wrap, #header.main.on .wrap { padding-left: 220px; padding-right: 250px; }
  #header .wrap::after, #header.main.on .wrap::after { display: block; content: ""; clear: both; }
  #header .rightmenu, #header.main.on .rightmenu { top: 32px; max-width: 250px; padding-right: 63px; }
  #header .rightmenu .btn-allMenu, #header .rightmenu .btn-allMenu-m, #header.main.on .rightmenu .btn-allMenu, #header.main.on .rightmenu .btn-allMenu-m { width: 40px; }
  #gnb2 .wrap { padding-left: 220px; padding-right: 250px; } }

@media all and (max-width: 1219px) { /*header*/
  #header .rightmenu, #header.main.on .rightmenu { top: 42px; }
  #header #gnb, #header .rightmenu .sns-menu, #header.main.on #gnb, #header.main.on .rightmenu .sns-menu { display: none; }
  #header .btn-allMenu, #header .btn-allMenu-m, #header.main.on .btn-allMenu, #header.main.on .btn-allMenu-m { position: absolute; top: 0; }
  #header .btn-allMenu i, #header .btn-allMenu-m i, #header.main.on .btn-allMenu i, #header.main.on .btn-allMenu-m i { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
 /* 모바일에서 위치 조정 */
 @media all and (max-width: 500px) { 
  #header .btn-allMenu i, #header .btn-allMenu-m i, #header.main.on .btn-allMenu i, #header.main.on .btn-allMenu-m i { position: absolute; width: 100%; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
 }
  
  
  
  #header .rightmenu .btn-allMenu, #header.main.on .rightmenu .btn-allMenu { display: none; }
  #header .rightmenu .btn-allMenu-m, #header.main.on .rightmenu .btn-allMenu-m { display: block; }
  /*#header.main.on { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }    220529 lwy 삭제*/
  #header, #header.main.on { height: 120px; }
  #header .wrap, #header.main.on .wrap { padding-left: 290px; padding-right: 120px; }
 /* #header .rightmenu .btn-allMenu, #header .rightmenu .btn-allMenu-m, #header.main.on .rightmenu .btn-allMenu, #header.main.on .rightmenu .btn-allMenu-m { height: 120px; } }*/
  #header .rightmenu .btn-allMenu, #header .rightmenu .btn-allMenu-m, #header.main.on .rightmenu .btn-allMenu, #header.main.on .rightmenu .btn-allMenu-m { height: 40px; } }

@media all and (max-width: 768px) { #header, #header.main.on { height: 100px; }
  #header .wrap, #header.main.on .wrap { padding-left: 189px; padding-right: 78px; }
  #header .rightmenu .btn-allMenu, #header .rightmenu .btn-allMenu-m, #header.main.on .rightmenu .btn-allMenu, #header.main.on .rightmenu .btn-allMenu-m { height: 40px; } }




@media all and (max-width: 500px) { 
  #header, #header.main.on { height: 80px;border:0px solid red }
  #header .wrap, #header.main.on .wrap { padding-left: 146px; padding-right: 60px;border:0px solid blue }
  #header .rightmenu .btn-allMenu, #header .rightmenu .btn-allMenu-m, #header.main.on .rightmenu .btn-allMenu, #header.main.on .rightmenu .btn-allMenu-m { 
	border:0px solid green;height: 40px; margin-top:-35px !important;
	}
  #logo {border:0px solid red !important;margin-top:-35px}
}




#allMenu { 
	border:0px solid red;
	position: fixed; 
	z-index: 5010; 
	top: -200%; 
	bottom: auto; 
	opacity: 0; 
	left: 0; 
	right: 0; 
	background-color: #0365ee !important;
	color:#FFFFFF !important  
	background-image:url('/images/fullmenuback.png');background-size:cover;
	}
	.allBG {background-image:url('/images/fullmenuback.png');background-size:cover !important}

#allMenu .menu-logo { position: absolute; top: 50px; left: 100px; }
#allMenu .m-close { position: absolute; top: 50px; right: 100px; }

#allMenu .menu { border:0px solid blue;width: 100%; max-width: 1400px; padding-top: 0; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
#allMenu .menu a { border:0px solid white;vertical-align: top; display: inline-block; color: #FFFFFF !important; font-weight: 300; -webkit-transition: font-size  0.2s; -moz-transition: font-size  0.2s; -o-transition: font-size  0.2s; -ms-transition: font-size  0.2s; transition: font-size  0.2s; }
#allMenu .menu > .depth-1 { display: inline-block; }
#allMenu .menu > .depth-1 > li { color:#FFFFFF !important;vertical-align: top; display: inline-block; padding: 20px 60px 0; background: no-repeat top center; background-size: auto; }
#allMenu .menu > .depth-1 > li.on, #allMenu .menu > .depth-1 > li:hover, #allMenu .menu > .depth-1 > li:focus { background-image: url("../images/common/allMenu_menu_on.png"); }
#allMenu .menu > .depth-1 > li.on a, #allMenu .menu > .depth-1 > li:hover a, #allMenu .menu > .depth-1 > li:focus a { color: #FFFFFF; }
#allMenu .menu > .depth-1 > li > a { color:#FFFFFF !important;font-size: 32px; }
#allMenu .menu > .depth-1 > li > ul { margin-top: 30px; }
#allMenu .menu > .depth-1 > li > ul > li { margin-top: 10px; }
#allMenu .menu > .depth-1 > li > ul > li > a { font-size: 20px; position: relative; outline: 0; color: #FFFFFF !important; }
#allMenu .menu > .depth-1 > li > ul > li > a:after { content: ''; display: block; position: absolute; width: 0; height: 1px; bottom: 0px; left: 50%; background: #fff; -webkit-transition: left 0.2s, width 0.2s; -moz-transition: left 0.2s, width 0.2s; -o-transition: left 0.2s, width 0.2s; -ms-transition: left 0.2s, width 0.2s; transition: left 0.2s, width 0.2s; }
#allMenu .menu > .depth-1 > li > ul > li > a:hover:after, #allMenu .menu > .depth-1 > li > ul > li > a:focus:after { width: 100%; left: 0; }

#allMenu .menu span {color:#FFFFFF !important;font-size:18px !important}
#allMenu .menu .menuName {color:#FFFFFF !important;font-size:32px !important;font-weight:700 !important}

#allMenu .menu .m-sns-menu { margin-top: 180px; }
#allMenu .menu .m-sns-menu li { display: inline-block; padding: 0 10px; }
#allMenu .menu .m-sns-menu li > a i.icon-face-on { background-image: url(../images/common/sns_icon_main_01.png); }
#allMenu .menu .m-sns-menu li > a i.icon-instar-on { background-image: url(../images/common/sns_icon_main_02.png); }
#allMenu .menu .m-sns-menu li > a i.icon-chung-on { background-image: url(../images/common/sns_icon_main_03.png); }
#allMenu .menu .m-sns-menu li > a i.icon-sea-on { background-image: url(../images/common/sns_icon_main_04.png); }

@media all and (max-width: 1441px) { #allMenu .menu-logo { left: 80px; }
  #allMenu .m-close { right: 80px; }
  #allMenu .menu { width: 95%; padding-top: 0px; } /* 원래 112*/
  #allMenu .menu > .depth-1 > li { padding: 16px 48px 0; }
  #allMenu .menu > .depth-1 > li > a { font-size: 25.6px; }
  #allMenu .menu > .depth-1 > li > ul { margin-top: 24px; }
  #allMenu .menu > .depth-1 > li > ul > li { margin-top: 8px; }
  #allMenu .menu .m-sns-menu { margin-top: 144px; } }



@media all and (max-width: 1219px) { #allMenu { display: none; } }







.gnb-m-wrap { display: none; }

@media all and (max-width: 1219px) { 
  .gnb-m-wrap {border:0px solid red; display: block; position: fixed; z-index: 5010; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, 0.75); display: none; overflow: hidden; }
  .gnb-m-wrap .menu-wrap { position: absolute; width: 75%; max-width: 600px; top: 0; bottom: 0; right: -100%; background: #fff; }
  .gnb-m-wrap .menu-wrap .menu-logo { display: block; width: 100%; height: 120px; line-height: 120px; text-align: center; background: #0365ee; }
  .gnb-m-wrap .menu-wrap .menu-logo img { max-width: 50%; vertical-align: middle; }
  .gnb-m-wrap .menu-wrap > .menu { position: absolute; top: 120px; bottom: 0; width: 100%; overflow-y: auto; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li { background: no-repeat right top; background-size: 80px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li.arrow {cover; background-image: url('/images/common/menu_arrow_down.png');}
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li.arrow.on { border-bottom: 1px solid #e0e0e0; background-image: url('/images/common/menu_arrow_up.png'); }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li.home { display: none; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li a { color: #222; position: relative; height: 80px; display: block;border:0px solid red }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li a > span { font-size:24px;font-weight:700;border:0px solid red;position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); }
  .gnb-m-wrap .msubmenu { font-size:24px;font-weight:500 !important;border:1px solid red;position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); }

  
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > a { font-size: 30px !important; font-weight: bold; border-bottom: 1px solid #e0e0e0; padding: 0 40px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 { background: #f9f9f9; display: none; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 > li { width: 90%; margin-left: 5%; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 > li > a { border-bottom: 1px solid #e0e0e0; font-size: 22px; padding: 28px 0 0 28px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 > li:last-child > a { border-bottom: 0; }
  .gnb-m-wrap .menu-wrap .m-close { position: absolute; left: -50px; top: 30px; }
  .gnb-m-wrap .m-sns-menu { display: block; margin: 60px auto; text-align: center; }
  .gnb-m-wrap .m-sns-menu li { display: inline-block; padding: 0; }
  .gnb-m-wrap .m-sns-menu li a { padding: 0 10px; } }

@media all and (max-width: 768px) { /*footer*/
  .gnb-m-wrap .menu-wrap .menu-logo { height: 78px; line-height: 78px; }
  .gnb-m-wrap .menu-wrap > .menu { top: 78px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li { background-size: 72px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li a { height: 85px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > a { font-size: 20px; padding: 0 26px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 > li  { font-size: 20px;font-weight:500;height:50px !important; padding: 10px 0  0 10px ; border:0px solid yellow}
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 > li > a { font-size: 20px;font-weight:500;height:50px !important; padding: 0 ; border:0px solid red}
  .gnb-m-wrap .menu-wrap .m-close { left: -33px; top: 20px; }
  .gnb-m-wrap .m-sns-menu { margin: 39px auto; }
  .gnb-m-wrap .m-sns-menu li a { padding: 0 7px; } }

@media all and (max-width: 520px) { /*footer*/
  .gnb-m-wrap .menu-wrap .menu-logo { height: 60px; line-height: 60px; }
  .gnb-m-wrap .menu-wrap > .menu { top: 60px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li { background-size: 55px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li a { height: 65px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > a { font-size: 15px; padding: 0 20px; }
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 > li  { font-size: 20px;font-weight:500;height:50px !important; padding: 10px 0  0 10px ; border:0px solid yellow}
  .gnb-m-wrap .menu-wrap > .menu > .depth-1 > li > .depth-2 > li > a { font-size: 20px;font-weight:500;height:50px !important; padding: 0; border:0px solid red}
  .gnb-m-wrap .menu-wrap .m-close { left: -25px; top: 25px;border:1px solid red !important }
  .gnb-m-wrap .m-sns-menu { margin: 30px auto; }
  .gnb-m-wrap .m-sns-menu li a { padding: 0 5px; } }

.top_btn { display: none; position: fixed; bottom: 10px; right: 2%; }

@media all and (max-width: 1024px) { .top_btn { display: none !important; } }


/* 추후별로도위 재정의할것 */

/* subpage 공통 + printSN.js 연동 */

/*lnb*/
.lnb { background: #FFFFFF; border: 1px solid #d0d4d6; border-width: 1px 0; margin-bottom: 40px; }
.lnb .container { padding: 0; font-size: 16px; line-height: 1.3em;  border-right:1px solid #d0d4d6 !important }
.lnb .container:after { content: ''; display: block; clear: both; }
.lnb .container > a { display: block; float: left; width: 60px; height: 50px !important; background: url("/images/icon_homenew.png") no-repeat center; border: 1px solid #d0d4d6; border-width: 0 1px; }
.lnb .home {  }
.lnb .container ul { float: left;}

.lnb .container ul > li:first-child { float: left; width: 190px !important; position: relative; border:0px solid red !important}
.lnb .container ul > li { float: left; width: 240px !important; position: relative; border:0px solid red !important}


.lnb .container ul > li > a { height:50px !important;display: block; font-size: 16px; color: #6C6D73; font-weight:300;padding-right: 40px; background: url("/images/icon_lnb_down.png") no-repeat right 15px center; border-right: 1px solid #d0d4d6; line-height: 50px; padding: 0 30px 0 15px; }
.lnb .container ul > li > a:visited { height:50px !important;display: block; font-size: 16px; color: #6C6D73; font-weight:300;padding-right: 40px; background: url("/images/icon_lnb_down.png") no-repeat right 15px center; border-right: 1px solid #d0d4d6; line-height: 50px; padding: 0 30px 0 15px; }

.lnb .container ul > li > a.no_back {background: none;}
.lnb .container ul > li > a.line2 {line-height: 20px; padding: 4px 30px 6px 15px; }
.lnb .container ul > li > span { display: block; font-size: 16px; color: #333; padding-right: 30px; border-right: 1px solid #d0d4d6; line-height: 50px; padding: 0 40px 0 20px; }


/*서브네비게이션*/
.lnb .container ul > li ol {display:none; position: absolute; left: -1px; top: 50px; width: calc(100% + 1px); z-index: 5; background: #FFFFFF; -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); }
.lnb .container ul > li ol li a { display: block; padding: 12px 20px; border: 1px solid #d0d4d6; border-top: none;font-size:16px }
.lnb .container ul > li ol li a:visited { display: block; padding: 12px 20px; border: 1px solid #d0d4d6; border-top: none;font-size:16px }
.lnb .container ul > li ol li a:hover { background: #3366ff; color: #fff; }
.lnb .container ul > li ol li:first-child a { border-top: 1px solid #d0d4d6; }
.lnb .container ul > li.active > a { background: #FFFFFF url("/images/icon_lnb_up.png") no-repeat right 15px center; color: #6C6D73;font-weight:bold }
.lnb .container ul > li.active > a.no_back { background: none; }



@media all and (max-width: 700px) { 

	/*lnb*/
	.lnb { background: #FFFFFF; border: 1px solid #d0d4d6; border-width: 1px 0; margin-bottom: 40px; }
	.lnb .container { padding: 0; font-size: 14px; line-height: 1.3em;  border-right:1px solid #d0d4d6 !important }
	.lnb .container:after { content: ''; display: block; clear: both; }
	.lnb .container > a { display: block; float: left; width: 60px; height: 50px !important; background: url("/images/icon_homenew.png") no-repeat center; border: 1px solid #d0d4d6; border-width: 0 1px; }
	.lnb .home {  }
	.lnb .container ul { float: left}


	/*lnb 첫번째 블럭 사이즈 */
	.lnb .container ul > li:first-child{ float: left; width: 45% !important; position: relative; border:0px solid red !important}
	/*lnb 두번째 블럭 사이즈 */
	.lnb .container ul > li { float: left; width: 45% !important; position: relative; border:0px solid red !important}

	.lnb .container ul > li > a:first-child { 
		border:0px solid blue ;
		width:140px !important;
		height:50px !important;
		display: block; 
		font-size: 13px; 
		color: #6C6D73; 
		font-weight:300;
		background: url("/images/icon_lnb_down.png") no-repeat right 10px center; 
		border-right: 1px solid #d0d4d6; 
		line-height: 50px; 
		padding: 0 40px 0 30px; 
		margin:0;
		}

	.lnb .container ul > li > a:nth-child(2) { 
		width:140px !important;
		height:50px !important;
		display: block; 
		font-size: 13px; 
		color: #6C6D73; 
		font-weight:300;
		padding-right: 30px; 
		background: url("/images/icon_lnb_down.png") no-repeat right 10px center; 
		border-right: 1px solid #d0d4d6;
		line-height: 50px; 
		padding: 0 40px 0 30px; 
		border:1px solid red !important;
		}
	

	/*.lnb .container ul > li > a:visited { border:0px solid red;width:140px !important;height:50px !important;display: block; font-size: 13px; color: #6C6D73; font-weight:300;padding-right: 30px; background: url("/images/icon_lnb_down.png") no-repeat right 15px center; border-right: 1px solid #d0d4d6; line-height: 50px; padding: 0 40px 0 20px; }
	*/
	.lnb .container ul > li > a.no_back {background: none;}
	.lnb .container ul > li > a.line2 {line-height: 20px; padding: 4px 40px 6px 20px; }
	.lnb .container ul > li > span { display: block; font-size: 14px; color: #333; padding-right: 40px; border-right: 1px solid #d0d4d6; line-height: 50px; padding: 0 40px 0 20px; }


	/*lnb 서브네비게이션*/
	.lnb .container ul > li ol {display:none; position: absolute; left: -1px; top: 50px; width: calc(100% + 1px); z-index: 5; background: #FFFFFF; -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); }
	.lnb .container ul > li ol li a { display: block; padding: 12px 20px; border: 1px solid #d0d4d6; border-top: none;font-size:14px }
	.lnb .container ul > li ol li a:visited { display: block; padding: 12px 20px; border: 1px solid #d0d4d6; border-top: none;font-size:14px }
	.lnb .container ul > li ol li a:hover { background: #99780a; color: #fff; }
	.lnb .container ul > li ol li:first-child a { border-top: 1px solid #d0d4d6; }
	.lnb .container ul > li.active > a { background: #FFFFFF url("/images/icon_lnb_up.png") no-repeat right 15px center; color: #6C6D73;font-weight:bold }
	.lnb .container ul > li.active > a.no_back { background: none; }

}



@media all and (max-width: 500px) {  /* 최대 428 iphone pro max size */
	.lnb .container { padding: 0; font-size: 14px; line-height: 1.3em;  border-right:0px solid #d0d4d6 !important } /* 우측 보더 제거 */
	/*lnb 첫번째 블럭 사이즈 */
	.lnb .container ul > li:first-child{ float: left; width: 120px !important; position: relative; border:0px solid red !important;font-size:12px !important}
	/*lnb 두번째 블럭 사이즈 */
	.lnb .container ul > li { float: left; width: 172px !important; position: relative; border:0px solid red !important;font-size:12px !important}
}



/*sub header*/
.subHeader1depth {
    color: #323131;
    width: auto;
    padding: 15px 0;
    border-bottom: 1px solid #EEEEEE;
    font-size: 28px;
    font-weight: 700;
	display:block;
	margin-bottom:30px;
}

.subHeader2depthfirst {
    color: #323131;
    width: auto;
    padding: 15px 0;
    font-size: 24px;
    font-weight: 700;
	display:block;
}

.subHeader2depth {
    color: #323131;
    width: auto;
    padding: 15px 0;
	margin-top:20px;
    font-size: 24px;
    font-weight: 700;
	display:block;
}

.subHeader3depth {
    color: #323131;
    width: auto;
    padding: 15px 0 6px 0;
	margin-top:0px;
    font-size: 18px;
    font-weight: 500;
	display:block;
}


/*범용으로 컨텐츠에 적용하는 wrapbox*/
.normalContentbox {padding:10px;line-height:180%;letter-spacing:0px;text-align:justify}
.hide {display:none}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/*둥글린박스*/
.radiusbox {
	line-height:170%;
	border-radius:15px;
	border:1px solid #DEDEDE;
	margin-top:10px;
	padding:15px;
	width:98%;
	font-size:16px !important;
	}

/*형광펜효과*/
.bold_red{background:linear-gradient(to top, #FF0000 50%, transparent 50%)}
.bold_orange{background:linear-gradient(to top, #FF5E00 50%, transparent 50%)}
.bold_yellow{background:linear-gradient(to top, #FFE400 50%, transparent 50%)}
.bold_green{background:linear-gradient(to top, #1DDB16 50%, transparent 50%)}
.bold_blue{background:linear-gradient(to top, #00D8FF 50%, transparent 50%)}
.bold_pink{background:linear-gradient(to top, #FF007F 50%, transparent 50%)}


/*normal bold*/
.normalbold {font-weight:700;color:#000}
.normalbold_blue {font-weight:700;color:#0066ff}
.normalbold_red {font-weight:700;color:#dd0000}
.normalbold_green {font-weight:700;color:#009933}


/*상단여백*/
.marginT20 {margin-top:20px}
.marginT10 {margin-top:10px}

.marginB20 {margin-bottom:20px}
.marginB10 {margin-bottom:10px}

/*float*/
.float-left { float: left; }
.float-right { float: right; }

/*position*/
.por { position: relative; }
.poa { position: absolute; }


@media all and (max-width: 1024px) { 
  .m-text-center { text-align: center !important; }
  .m-text-left { text-align: left !important; }
  .m-text-right { text-align: right !important; } 
  }


/*스크롤 막기*/
/* .scrollDisable { height: 100%; min-height: 100%; overflow: hidden !important; touch-action: none; } */
/*.scrollDisable { position: absolute; left: 0; height: 100%; min-height: 100%; overflow: hidden !important; touch-action: none; }*/
/*클릭시 햄버거 메뉴에 add됨 단순 스크롤제거면 left heigth 값도 필요없음*/
.scrollDisable { left: 0; height: 100%; min-height: 100%; overflow: hidden !important; touch-action: none; }


/*ani*/
.ani { -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }


@media all and (max-width: 1024px) { .m-float-left { float: left !important; }
  .m-float-right { float: right !important; } }


/*clearfix*/
.clearfix > li { float: left; }
.clearfix::after { display: block; content: ""; clear: both; }
.clearboth { clear: both; }