@charset "utf-8"; 

/* 상단메뉴 */
#header { position:fixed; left:0; top:0; width:100%; z-index:200; }

#header_search_area {
  width:1240px; 
  margin:0 auto;
  position:relative;
  z-index:100000
}
#header_search_area #header_search_box {
	position:absolute;
	top:0;
	right:0;
	z-index:10;
	width:100%;
}
#header_search_area #header_search {
	position:relative;
	height:60px;
	border:2px solid #029f49;
	background:#fff url('/images/common/search_icon.png') no-repeat 94% center;
}
#header_search input{
	float:left;
}
#header_search input[type="text"]{
	display:inline-block;
	width:calc(100% - 120px);
	padding:0 14px;
	height:55px;
	line-height:50px;
	font-size:16px;
	font-weight:bold;
	border:none;
	background:transparent;
}
#header_search input[type="submit"]{
	width:60px;
	height:60px;
	display:block;
	opacity:0;
	filter:alpha(opacity = 0);
	cursor:pointer
}
#header_search .btn_search_c {
	position:absolute;
	top:-2px;
	right:-2px;
	display:block;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	background:#029f49;
	color:#fff
}

/* 언어선택 */
.global { position:absolute; top:24px; right:0; width:110px; z-index:30000; 
-webkit-transition:0.4s ease-in-out; -moz-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; transition:0.4s ease-in-out;}
.global a.sel { display:block; position:relative; position:absolute; top:0; left:0; width:110px; height:36px; line-height:36px; 
background:#fff; border:1px solid #000; padding-left:40px; font-size:15px; font-family:'Arial'; font-weight:bold; color:#000; z-index:2; 
-webkit-transition:0.4s ease-in-out; -moz-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; transition:0.4s ease-in-out;}
.global a.sel:hover { background-color:#002b82; color:#fff }
.global a.sel span {
  display: block;
  position: absolute;
  right:0;
  top:0;
  width:30px;
  height:30px;
}
.global a.sel span:after {
  content: " ";
  position: absolute;
  top:2px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  width:0;
  height:0;
  border:5px solid transparent;
  border-top-color:#000;
  border-bottom:none;
 }
.global a.sel:hover span:after {
  border-top-color:#fff;
}
.global ul { position:absolute; width:110px; top:35px; left:0; padding:0; background:#fff; border:1px solid #000; 
border-bottom:none; display:none; z-index:50000;  }
.global ul li { line-height:40px; }
.global ul li a { display:block; width:110px;/*  height:36px; */ line-height:22px; border-bottom:1px solid #000; padding:0; 
padding-left:40px !important; font-family:'Arial'; font-weight:bold; font-size:15px; color:#000; }
.global ul.logout li { line-height:16px; }
.global ul.logout li a { padding-top:15px; }
.global ul li > a:hover { width:108px; border:1px solid #002b82; color:#fff; }

.global a.kor { background:url('../images/common/icon_kor.png') no-repeat 10px center; background-size:18px auto }
.global a.eng { background:url('../images/common/icon_eng.png') no-repeat 10px center; background-size:18px auto }
.global a.chi { background:url('../images/common/icon_chi.png') no-repeat 10px center; background-size:18px auto }
.global a.thai { background:url('../images/common/icon_thai.png') no-repeat 10px center; background-size:18px auto }
.global a.vtn { background:url('../images/common/icon_vtn.png') no-repeat 10px center; background-size:18px auto }

.global a.kor:hover,
.global a.eng:hover,
.global a.chi:hover,
.global a.thai:hover ,
.global a.vtn:hover { background-color:#002b82 }

.active .global { top:13px; }
.active .global a.sel { height:35px; line-height:35px; }
.active .global ul { top:34px }
.active .global ul li { line-height:35px; }
.active .global ul li a { height:35px; }

/* ============================================================================================================================================================== */

/* gnb 전체 감싸는 영역 */
#gnb_wrap { position:relative; width:100%; height:99px; border-bottom:1px solid rgba(255, 255, 255, 0.3); z-index:20000; 
-webkit-transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-o-transition:0.4s ease-in-out;transition:0.4s ease-in-out; }

/* 서브감싸는 영역 */
#sub_wrap #gnb_wrap { background:rgba(255, 255, 255, 1); border-bottom:1px solid #dcdcdc }

/* 메인 스크롤 올렸을때 배경 */
#gnb_wrap.active { background:rgba(255, 255, 255, 1) !important; height:60px; border-bottom:none; box-shadow:2px 2px 8px rgba(0, 0, 0, 0.3); } 

/* 서브페이지 스크롤 올렸을때 배경  */
#sub_wrap #gnb_wrap.active { border-bottom:none }

#gnb_wrap h1 { float:left; padding-top:25px; margin-right:50px;
-webkit-transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-o-transition:0.4s ease-in-out;transition:0.4s ease-in-out; }

#gnb_wrap.active h1 { padding-top:10px; margin-right:100px; }
#gnb_wrap.active h1 img { width:130px; }

/* 검색 메뉴 */
#gnb_wrap.active .top_sm { top:10px; }

/* gnb 메뉴 속성 ==================================================================================*/
#gnb { position:relative; width:1200px; margin:0 auto; height:99px; }

/* gnb ul */
#gnb > ul { float:left; margin-left: 60px; -webkit-transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-o-transition:0.4s ease-in-out;transition:0.4s ease-in-out;}
#gnb_wrap.active > #gnb > ul { padding-top:0; }

/* gnb ul li */
#gnb > ul > li { float:left; width:130px; height:100%; text-align:center; position:relative; }

/* gnb ul li a */
#gnb > ul > li > a { display:block; width:100%; padding:40px 27px 33px; height:100%; font-weight:500; font-size:17px; color:#000; }
#gnb > ul > li:hover a { color:#002b82; }
#gnb_wrap.active > #gnb > ul > li > a { color:#000; padding:16px 27px; height:60px; } /* 스크롤 올렸을때 active */

/* 서브상단 대메뉴 */
#sub_wrap #gnb > ul > li > a { color:#000; }
#sub_wrap #gnb > ul > li:hover a { color:#002b82; background:none }
#sub_wrap #gnb > ul > li > a.on { color:#fff; background:#002b82; -webkit-transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-o-transition:0.4s ease-in-out;transition:0.4s ease-in-out; }

#sub_wrap #gnb_wrap.active > #gnb > ul > li > a { color:#fff; }
#sub_wrap #gnb_wrap.active > #gnb > ul > li > a.on { color:#fff; background:#002b82; }

/* 서브메뉴 속성 -처음에는 안보이게 설정 */
#gnb ul li > ul.sub_menu, 
#gnb.active ul li > ul.sub_menu, 
#sub_wrap #gnb ul li > ul.sub_menu {
  display: none; position:absolute; top:99px; left:0; z-index:99; padding:10px 0;
  width:100%; list-style:none; /* overflow:hidden; */ background:#002b82; border-top:1px solid rgba(255, 255, 255, 0.5); 
  -webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;
  }

/* 서브메뉴 속성 - 스크롤 내렸을때 */
#gnb_wrap.active #gnb ul li ul.sub_menu { top:60px; padding:10px 0; background:#002b82; }
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu { top:60px; padding:10px 0; }

/* 서브메뉴 펼쳐졌을때 */
#gnb ul li ul.sub_menu li,
#sub_wrap #gnb ul li ul.sub_menu li {display:block; width:100%;   height: auto;}

/* 서브메뉴 링크 */
#gnb ul li ul.sub_menu li a:link, 
#gnb ul li ul.sub_menu li a:visited,
#sub_wrap #gnb ul li ul.sub_menu li a:link,
#sub_wrap #gnb ul li ul.sub_menu li a:visited {  	display: block;    width: 100%;  background: none;   color: #fff;  background: #002b82;     font-weight: 400;     font-size: 15px;     line-height: 18px;     height: auto;     padding: 13px 10px;}

/*#gnb ul li ul.sub_menu li a:link, 
#gnb ul li ul.sub_menu li a:visited,
#sub_wrap #gnb ul li ul.sub_menu li a:link,
#sub_wrap #gnb ul li ul.sub_menu li a:visited {display:block; width:100%; background:none; color:#fff; background:#002b82; font-weight:400; 
font-size:15px; line-height:35px; height:35px; padding:0 10px;}*/

/* 서브메뉴 링크 - 스크롤 내렸을때 */
#gnb_wrap.active #gnb ul li ul.sub_menu li a:link, 
#gnb_wrap.active #gnb ul li ul.sub_menu li a:visited,
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu li a:link,
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu li a:visited { background:#002b82; }

/* 서브메뉴 호버했을때 */
#gnb ul li ul.sub_menu li a:hover, 
#gnb ul li ul.sub_menu li a:focus, 
#gnb ul li ul.sub_menu li a:active,
#sub_wrap #gnb ul li ul.sub_menu li a:hover,
#sub_wrap #gnb ul li ul.sub_menu li a:focus, 
#sub_wrap #gnb ul li ul.sub_menu li a:active { color:#fff; text-decoration:none; background:#002b82; }

/* 서브메뉴 호버했을때 - 스크롤 내렸을때 */
#gnb_wrap.active #gnb ul li ul.sub_menu li a:hover, 
#gnb_wrap.active #gnb ul li ul.sub_menu li a:focus, 
#gnb_wrap.active #gnb ul li ul.sub_menu li a:active,
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu li a:hover,
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu li a:focus, 
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu li a:active { background:#002b82; }


/*제품소개 서브메뉴*/
.sub2 .sub_menu > li {position: relative;}
.sub2 .sub_menu ol.top_3dp {position: absolute; display: none; left: 100%; top: -10px; width: 120px; padding: 10px 0; background: #002b82; border-radius: 0 8px 8px 0;}
.sub2 .sub_menu ol.top_3dp li {width: 100%; margin-left: 0;}
.sub2 .sub_menu > li:hover ol.top_3dp {display: block;}
#gnb_wrap.active #gnb ul li ul.sub_menu ol.top_3dp {background: #002b82;}
/*제품소개 서브메뉴 링크*/
#gnb ul li ul.sub_menu ol.top_3dp li a:link, 
#gnb ul li ul.sub_menu ol.top_3dp li a:visited,
#sub_wrap #gnb ul li ul.sub_menu ol.top_3dp li a:link,
#sub_wrap #gnb ul li ul.sub_menu ol.top_3dp li a:visited{ background: #002b82; color:#a6fdcd;}
/* 제품소개 서브메뉴 링크 - 스크롤 내렸을때 */
#gnb_wrap.active #gnb ul li ul.sub_menu ol.top_3dp li a:link, 
#gnb_wrap.active #gnb ul li ul.sub_menu ol.top_3dp li a:visited,
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu ol.top_3dp li a:link,
#sub_wrap #gnb_wrap.active #gnb ul li ul.sub_menu ol.top_3dp li a:visited { background:#002b82; }
/*제품소개 서브메뉴 호버*/
#gnb ul li ul.sub_menu ol.top_3dp li a:hover, 
#gnb ul li ul.sub_menu ol.top_3dp li a:focus, 
#gnb ul li ul.sub_menu ol.top_3dp li a:active,
#sub_wrap #gnb ul li ul.sub_menu ol.top_3dp li a:hover,
#sub_wrap #gnb ul li ul.sub_menu ol.top_3dp li a:focus, 
#sub_wrap #gnb ul li ul.sub_menu ol.top_3dp li a:active { color:#fff; }


/* 모바일 상단메뉴 =============================================================================*/
#gnb_m { display:none; position:relative; z-index:100000; }
.sidemenu_box { position:relative; min-height:100%; height:auto; display:none; z-index:1000000; }
.sidemenu_box_bg { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=70);}

/* 모바일 메뉴 열기 */
a.open_sidemenu { position:relative; position:absolute; display:block; right:15px; top:20px; width:30px; height:21px; font-size:0; 
transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;}
a.open_sidemenu span {display:inline-block;position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:50%;margin-top:-1px;background-color:#002b82;}
a.open_sidemenu span:before {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:-7px;background-color:#002b82;content:"";display:block;}
a.open_sidemenu span:after {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:7px;background-color:#002b82;content:"";display:block;}

a.open_sidemenu.active span {background:none;}
a.open_sidemenu.active span:before {background:#fff;top: 0;transform:rotate(45deg);}
a.open_sidemenu.active span:after {background:#fff;top: 0;transform:rotate(-45deg);}


/* 모바일 메뉴 닫기 */
.close_sidemenu_bg { position:relative; display:block; /*width:100%;*/ height:60px; /*background:#002b82;*/  top: 10px;}
.close_sidemenu_bg .tit { position:absolute; display:block; left:15px; top:18px; }
.close_sidemenu_bg .tit span { font-size:15px; color:#2e7c25; vertical-align:top }

.close_sidemenu_bg .tit a { font-size:15px; color:rgba(255, 255, 255, 0.7); display:inline-block; height:21px; padding-left:24px; margin-right:10px }
.close_sidemenu_bg .tit a.login { background:url('/images/common/quick_icon1.png') no-repeat 0 2px; background-size:14px; }
.close_sidemenu_bg .tit a.join { background:url('/images/common/quick_icon2.png') no-repeat 0 2px; background-size:15px; }
.close_sidemenu_bg .tit a.logout { background:url('/images/common/quick_icon3.png') no-repeat 0 2px; background-size:14px; }
.close_sidemenu_bg .tit a.myinfo { background:url('/images/common/quick_icon4.png') no-repeat 0 2px; background-size:14px; }

a.close_sidemenu { position:relative; position:absolute;  display:block; right:15px; top:10px; width:30px; height:21px; font-size:0; 
transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;}
a.close_sidemenu span {display:inline-block;position:absolute;left:50%;margin-left:-13px;top:50%;margin-top:-1px;width:26px;height:3px;background-color:#fff;}
a.close_sidemenu span:before {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:-7px;background-color:#fff;width:;height:;content:"";display:block;}
a.close_sidemenu span:after {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:7px;background-color:#fff;width:;height:;content:"";display:block;}

a.close_sidemenu.active span {background:none;}
a.close_sidemenu.active span:before {background:#fff;top: 0;transform: rotate(45deg);}
a.close_sidemenu.active span:after {background:#fff;top: 0;transform: rotate(-45deg);}

/* 모바일 메뉴 스크롤 */
#sidemenu_wrap { overflow:auto; position:absolute; width:100%; top:60px; bottom:0; z-index:1;  }
.sidemenu_w { position:fixed; top:0; bottom:0; right:-280px; width:280px; background:#002b82; }

/* 모바일 메뉴 스타일 */
.sidemenu { position:absolute; width:100%; }

.sidemenu a.toggle span { 
	z-index:10000; position:absolute; top:50%; margin-top:-3px; right:15px;
	 width:12px; height:12px; background:url('../images/common/top_plus.gif') no-repeat;
	-webkit-transition:all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	-ms-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out; 
}
.sidemenu a.expanded span { 
	background:url('../images/common/top_minus.gif') no-repeat;
}

.sidemenu ul ul.submenu, 
.sidemenu ul ul.submenu li ul.submenu { display: none; }

.sidemenu ul li a.mm { position:relative; display:block; text-indent:15px; height:43px; line-height:43px; font-weight:bold; text-align:left;
font-size:16px; background:#002b82; color:#fff; border-bottom:1px solid #0f3e9c; }
.sidemenu ul li a.mm.toggle { position:relative; display:block; text-indent:15px; height:43px; line-height:43px; font-weight:bold; text-align:left;
font-size:16px; background:#002b82; color:#fff; border-bottom:1px solid #0f3e9c; }
.sidemenu ul li a.mm.expanded { background:#002b82; border-bottom:1px solid #002b82; color:#fff; }

.sidemenu ul ul.submenu { padding:10px 0; background:#fff; box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .2) }
.sidemenu ul ul.submenu li a { position:relative; display:block; width:100%; height:36px; line-height:36px; background:#fff; 
font-size:14px; font-weight:600; color:#666; text-align:left; text-indent:15px; }
.sidemenu ul ul.submenu li a:hover { color:#002b82; }


/* ============================================================================================================================================================== */

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

#gnb_wrap, 
#gnb, 
#sub_wrap #gnb { height:80px;}
#gnb_wrap h1 { padding-top:15px; }

#gnb ul li { height:80px; }
#gnb ul li a { padding:30px 0; height:80px;}
#sub_wrap #gnb ul li a.on { height:80px; }

#gnb div.global ul li { height:36px; }
#gnb div.global  ul li a { padding:6px 0; height:36px;}
#sub_wrap #gnb div.global  ul li a.on { height:36px; }


#gnb ul li ul.sub_menu, 
#gnb.active ul li ul.sub_menu, 
#sub_wrap #gnb ul li ul.sub_menu { top:80px; }

#gnb_wrap.active > #gnb > ul > li > a { text-shadow:1px 1px 2px rgba(0, 0, 0, 0); padding:16px 27px; height:60px; }

#gnb_wrap.active > #gnb > ul > li.sub6 > a {padding: 17px 0 0 0;}


/* 검색 */
#gnb_wrap .top_sm { top:20px; }

}


/* ============================================================================================================================================================== */

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

	#gnb_wrap.active h1 { margin-right:60px; }

}

/* ============================================================================================================================================================== */

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

	#header_search_area { width:1000px; }
	#gnb_wrap h1 { margin-right:30px; }

	/* gnb 전체 감싸는 영역 */
	#gnb { width:1000px; }
	#gnb ul li { width:100px; }
	#gnb > ul > li:nth-child(3) { width:130px; }
	#gnb > ul > li > a { padding:33px 0; font-size:15px; }
	#gnb ul li ul.sub_menu li a:link, 
	#gnb ul li ul.sub_menu li a:visited,
	#sub_wrap #gnb ul li ul.sub_menu li a:link,
	#sub_wrap #gnb ul li ul.sub_menu li a:visited { font-size:14px;}

	#gnb_wrap.active > #gnb > ul > li > a { padding:18px 0; }
}


/* ============================================================================================================================================================== */

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

.box_pc { display:none; } /* 반응형 PC 부분 */
.box_tb { display:block; } /* 반응형 태블릿 부분 */

/* 검색창 */
.top_sm { position:absolute; top:10px; right:50px; }
.top_sm a:first-child { width:25px; background:url('../images/common/.png') no-repeat center; background-size:18px }
.top_sm a:last-child { width:50px; background:url('../images/common/.png') no-repeat center; background-size:35px }
#header_search_area { width:100% !important; margin:0; }

/* 상단메뉴 */
#header { width:100%; }
#header_search_area #header_search_box { top:60px; }
#header_search_area #header_search { height:45px; background-position:90% center; }
#header_search input[type="text"]{ height:45px; line-height:45px; }
#header_search input[type="submit"]{ width:45px; height:45px; }
#header_search .btn_search_c { width:45px; height:45px; line-height:45px; }

/* 전체메뉴 */
#allMenu { display:none; }

/* gnb 대메뉴 공통속성 */
#gnb_wrap { display:none; }
#gnb_m { display:block; width:100%; background:#fff; border-bottom:1px solid #dcdcdc; height:60px; z-index:20000; }
#gnb_m .wrap { width:95%; margin:0 auto; }

/* 로고 */
#header h1 { position:absolute; left:15px; top:15px; }
#header h1 img { width:100px; }

}

/* ============================================================================================================================================================== */

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

/* 로고 */
#header h1 { left:10px; }
#header h1 img { width:100px; }
#header_search_area #header_search { background-position:86% center; }

}