/* -------------------------------- 

1. Auto-Hiding Navigation - Simple

-------------------------------- */

#header_m {display: none !important}

.headerwrap {
  display: block !important ;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 168px;
  background-color: #ffffff;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.headerwrap::after {
  clear: both;
  content: "";
  display: block;
}
.headerwrap.is-hidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

/* 상단공통 */
.gatewrapper {
  position: relative;
  z-index: 31;
  clear: both;
  width: 100%;
  height: 33px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e9edf3;
	}
	
.gatewrapper .gate {  width: 1300px;  margin: 0 auto;  *zoom: 1;}
.gatewrapper .gate:after {  content: "";  display: block;  clear: both;}
	
.gatewrapper .leftgate ul {  border-right: 1px solid #e9edf3;  *zoom: 1;}
.gatewrapper .leftgate ul:after {  content: "";  display: block;  clear: both;}
.gatewrapper .leftgate ul li {  float: left;  width:70px;  border-left: 1px solid #e9edf3;}
.gatewrapper .leftgate ul li a {  display: block;  padding-top: 9px;  height: 24px;  text-align: center;  font-size: 13px;  line-height: 16px;  color: #777; }
.gatewrapper .leftgate ul li a:hover {  background: #eff1f4;}
.gatewrapper .leftgate ul li.current a {  background: #fff;  height: 25px;  color: #0088d0;}

.gatewrapper .rightgate ul {  border-right: 1px solid #e9edf3;  *zoom: 1;}
.gatewrapper .rightgate ul:after {  content: "";  display: block;  clear: both;}
.gatewrapper .rightgate ul li {  float: left;  width: 80px;  border-left: 1px solid #e9edf3;}
.gatewrapper .rightgate ul li:after {  content: "|"; right: 0px; top: 2px; position: absolute}
.gatewrapper .rightgate ul li:after:last-child {display: none}
.gatewrapper .rightgate ul li a {  display: block;  padding-top: 9px;  height: 24px;  text-align: center;  font-size: 13px;  line-height: 16px;  color: #777;  -webkit-transition: all ease .3s;  transition: all ease .3s;}
.gatewrapper .rightgate ul li a:hover {  background: #eff1f4;}
.gatewrapper .rightgate ul li.current a {  background: #fff;  height: 25px;  color: #0088d0;}
	

.header { width:1300px; height:134px; background:#fff; z-index:21; margin: 0 auto !important}

/*로고*/
.logo { float:left ; width:921px;}
.logo a { display:block; width:284px; height:39px; margin:0 auto; text-align:center; padding-top:47px; padding-left: 379px}
	
/*전화번호*/
.tel { float:right; width:379px; text-align:right; margin-top:38px}


.gnb_contain {
  position: relative;
  z-index: 31;
  clear: both;
  width: 100%;
  height: 55px;
  background-color: #1c2032;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}

.gnb {width:1300px; height:55px; margin:0 auto; cursor:pointer}
.gnb ul{width:1300px; float:left; padding:0;}
.gnb ul li {float:left ; padding-right:3.9rem; }
.gnb ul li:last-child {float:left ; padding-right:0; }
.gnb ul li a{color:#ffffff; font-size:20px;   text-decoration:none; line-height: 52px}
.gnb ul li a:hover { color:#fff;  }

#snb { display: none; width:100%; height:380px; background:#f3f3f3;}
#submenuw {width:100%; margin:0 auto; height:380px; background:#f3f3f3;}
#submenu {width:1300px; height:380px; margin:0 auto; padding-top:10px}
#submenu1 { float:left; text-align:left; width:126px;}
#submenu2 { float:left; text-align:left; width:100px;}
#submenu3 { float:left; text-align:left; width:130px;}
#submenu4 { float:left; text-align:left; width:140px;}
#submenu5 { float:left; text-align:left; width:130px;}
#submenu6 { float:left; text-align:left; width:134px;}
#submenu7 { float:left; text-align:left; width:113px;}
#submenu8 { float:left; text-align:left; width:150px;}
#submenu9 { float:left; text-align:left; width:165px;}
#submenu10 { float:left; text-align:left;  height:350px}
#submenu a { color:#323232; font-size:0.88em; text-align:left; text-decoration:none; line-height:32px; font-weight:500; letter-spacing:-1px}
#submenu a:hover { color:#0088d0}


@media all and (max-width:1300px) and (min-width:768px) {
	
.headerwrap { display: none !important}
#header_m {display: block !important}
	
/*주메뉴_모바일*/
#header_m {width: 100%; border-bottom: 1px solid #d2d2d2; position: fixed; height: 64px; background: #ffffff; z-index: 99999;  }
#header_m h1 {text-align: center; padding-top:20px; padding-bottom: 20px;}
#header_m h1 img {width: 150px}
#header_m h2.seem {left: 10px; top: 10px; display: block; position: absolute; cursor: pointer;}
#header_m h2.seem img {width: 50px}
#header_m .top_tel { right: 10px; top: 10px;display: block; position: absolute; cursor: pointer !important}
#header_m .top_tel img {width: 50px}
	
	
#header_m .login { background:#0088d0; padding:10px 0 10px 10px; color:#ffffff;  width: 100%; text-align:left; font-size: 0.95em; margin-top: 50px; box-sizing: border-box}
#header_m .login a { color:#ffffff; padding:0 5px; font-size: 0.95em}
#header_m #gnb_m {margin: 0px; padding: 0px; width: 250px; box-sizing: border-box}

#header_m .g_close {top: 23px; right: 20px; display: block; position: absolute; width: 20%; }
#header_m .g_close img {width: 18px; float: right}
	
	#header_m .icon{width: 100%; clear: both; position: relative; bottom: 0; z-index: 9999; padding: 40px 20px 10px 20px; box-sizing: border-box; float: left}
	#header_m .icon ul{ display: block !important}
	#header_m .icon li{float: left; }
	#header_m .icon li:nth-child(1){background: #00c63b url("/images/common/menu_icon01.png") no-repeat left 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 5px; border-radius: 50px}
	#header_m .icon li:nth-child(2){background: #ffffff url("/images/common/menu_icon02.png") no-repeat left 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 20px; border-radius: 50px}
	#header_m .icon li:nth-child(3){background: #34bfe4 url("/images/common/menu_icon03.png") no-repeat right 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 5px; border-radius: 50px}
	#header_m .icon li:nth-child(4){background: #de2910 url("/images/common/menu_icon04.png") no-repeat right 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 5px; border-radius: 50px}


#gnbw {background:#ffffff; max-width:600px; width:100%; left: 0; top: 0px; z-index: 999999; color: #181818; height:100%; position: fixed; overflow-y : auto; overflow-x: hidden !important}
	
.accordion {list-style-type:none;padding:0;margin:0; clear: both}
.accordion ul {padding:0;margin:0;width: 100%;}
.accordion li {cursor:pointer;list-style-type:none; margin:0;width:100%; padding: 0; color: #181818; }
.accordion li.active > a { background: url('/images/common/minus.png') no-repeat 94% 50%; background-size: 10px; color: #181818}
.accordion li div {padding:0px;clear:both;float:left;width:100%;}
.accordion a {font-family:'notokr-bold';font-size:0.85rem ;color:#181818;padding: 15px 20px; display:block;cursor:pointer;background:url('/images/common/plus.png') no-repeat 94% 50%; background-size: 10px; border-bottom: 1px solid #dbdbdb;}

.accordion li ul li {background: #efefef;font-size:0.8rem; color: #181818; }
.accordion li ul li a{background:#efefef url('dot.gif') no-repeat 20px 10px;padding-left:30px; color: #181818; border-bottom: 1px dashed #dbdbdb;font-family:'notokr-regular'}	
	
	
/* sns */
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:99;
  background-color:#000;
  display:none;
}
  
.window {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:none;
  z-index:999;
  padding:0;
}

#header_m .menupop{ position:fixed; left:0; top: 0; background:#ffffff; max-width:600px; width:100%; padding:0; z-index:999999; overflow-y: scroll; height: 100%}	
#header_m .menupop_close {top: 23px; right: 20px; display: block; position: absolute; width: 20%; }
#header_m .menupop_close img {width: 18px; float: right}
	
#header_m .login_w {width: 100%; float: left}
	
#header_m .login_bg { background:#1f4392; padding:22px 22px 20px 22px; color:#ffffff;  width: 100%; text-align:left; font-size: 1.1rem;   box-sizing: border-box}
#header_m .login_bg a { color:#ffffff; padding-left: 42px}
#header_m .login_bg img {top: 16px; left: 20px; display: block; position: absolute; width: 35px;}
	
#header_m .join_bg {float: left; width: 100%; background: #f5f5f5; border-bottom: 1px solid #dbdbdb; padding:12px 0}
#header_m .join_bg li { width: 50%; float: left; color: #181818; text-align: center; }
#header_m .join_bg li:nth-child(1)::after{content: '|'; float: right; color: #dbdbdb}

#header_m .menupop_menu {width: 100%; float: left;}
#header_m .menupop_menu ul {width: 90%; float: left; margin: 0 auto; padding: 20px 5% 15px 5%; border-bottom: 1px dashed #dbdbdb;}
#header_m .menupop_menu li { width: 25%; float: left; text-align: center ;font-size: 0.85rem }
#header_m .menupop_menu li:hover {cursor: pointer}
#header_m .menupop_menu li img {width: 70%; margin-bottom: 5px}

#header_m .menupop_menu2 {width: 100%; float: left;}
#header_m .menupop_menu2 ul {width: 90%; float: left; margin: 0 auto; padding: 20px 5% 5px 5%; border-bottom: 1px solid #dbdbdb;}
#header_m .menupop_menu2 li { width: 25%; float: left; text-align: center; padding-bottom: 10px; font-size: 0.85rem }
#header_m .menupop_menu2 li:hover {cursor: pointer}
#header_m .menupop_menu2 li img {width: 70%; margin-bottom: 5px}	

#header_m .menupop_menu_sns {width: 100%; float: left;}
#header_m .menupop_menu_sns h2 { width: 90%; padding: 20px 5% 0 5%; text-align: left; font-size: 1.1rem; font-family: 'notokr-medium' }
#header_m .menupop_menu_sns ul {width: 90%; float: left; margin: 0 auto; padding: 15px 5%; }
#header_m .menupop_menu_sns li { width: 25%; float: left; text-align: center; font-size: 0.85rem }
#header_m .menupop_menu_sns li:hover {cursor: pointer}
#header_m .menupop_menu_sns li img {width: 70%; margin-bottom: 5px}
	
#header_m .map_bg {float: left; width: 100%; background: #1c2032; padding:12px 0; }
#header_m .map_bg li { width: 50%; float: left; color: #ffffff; text-align: center; }
#header_m .map_bg li a {color: #ffffff;}
#header_m .map_bg li:nth-child(1)::after{content: '|'; float: right; color: #ffffff}
	
/* 메인팝업 */	
	#mask3 {
	  position:absolute;
	  width: 100%; height: 100%;
	  left:0;
	  top:0;
	  z-index:9999999;
	  background-color:#000;
	  display: block; 
	  opacity: 70%;
	}
	.mainpop {
	  position: fixed;
	  left:0;
	  bottom:0;
	  width:100%;
	  height:auto;
	  display:none;
	  z-index:99999999 !important;
	  padding:0;		
	}
	.mainpop .mainslide {width:100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; text-align: center}
	.mainpop .popbt { width: 100%; clear: both}
	.mainpop .popbt ul { width: 100%}
	.mainpop .popbt li { width: 50%; border-right: 1px solid #bfbfbf; font-size:1rem; background: #e5e5e5; box-sizing: border-box ; float: left; text-align: center; padding: 20px 0; color: #333333}
	.mainpop .popbt li:last-child { border: none}
	.mainpop .popbt :hover {cursor: pointer}
	.mainpop img {width:50% !important; max-width: 50% !important; text-align: center; margin: 0 auto}
	
}
	

@media all and (max-width:767px) and (min-width:0px) {	
	
.headerwrap { display: none !important}
#header_m {display: block !important}
	
/*주메뉴_모바일*/
#header_m {width: 100%; border-bottom: 1px solid #d2d2d2; position: fixed; height: 64px; background: #ffffff; z-index: 99999;  }
#header_m h1 {text-align: center; padding-top:20px; padding-bottom: 20px;}
#header_m h1 img {width: 150px}
#header_m h2.seem {left: 10px; top: 10px; display: block; position: absolute; cursor: pointer;}
#header_m h2.seem img {width: 50px}
#header_m .top_tel { right: 10px; top: 10px;display: block; position: absolute; cursor: pointer !important}
#header_m .top_tel img {width: 50px}
	
	
#header_m .login { background:#0088d0; padding:10px 0 10px 10px; color:#ffffff;  width: 100%; text-align:left; font-size: 0.95em; margin-top: 50px; box-sizing: border-box}
#header_m .login a { color:#ffffff; padding:0 5px; font-size: 0.95em}
#header_m #gnb_m {margin: 0px; padding: 0px; width: 250px; box-sizing: border-box}

#header_m .g_close {top: 23px; right: 20px; display: block; position: absolute; width: 20%; }
#header_m .g_close img {width: 18px; float: right}
	
	#header_m .icon{width: 100%; clear: both; position: relative; bottom: 0; z-index: 9999; padding: 40px 20px 10px 20px; box-sizing: border-box; float: left}
	#header_m .icon ul{ display: block !important}
	#header_m .icon li{float: left; }
	#header_m .icon li:nth-child(1){background: #00c63b url("/images/common/menu_icon01.png") no-repeat left 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 5px; border-radius: 50px}
	#header_m .icon li:nth-child(2){background: #ffffff url("/images/common/menu_icon02.png") no-repeat left 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 20px; border-radius: 50px}
	#header_m .icon li:nth-child(3){background: #34bfe4 url("/images/common/menu_icon03.png") no-repeat right 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 5px; border-radius: 50px}
	#header_m .icon li:nth-child(4){background: #de2910 url("/images/common/menu_icon04.png") no-repeat right 50%; background-size: 31px 31px; width: 31px; height: 31px; margin-right: 5px; border-radius: 50px}


#gnbw {background:#ffffff; max-width:600px; width:100%; left: 0; top: 0px; z-index: 999999; color: #181818; height:100%; position: fixed; overflow-y : auto; overflow-x: hidden !important}
	
.accordion {list-style-type:none;padding:0;margin:0; clear: both}
.accordion ul {padding:0;margin:0;width: 100%;}
.accordion li {cursor:pointer;list-style-type:none; margin:0;width:100%; padding: 0; color: #181818; }
.accordion li.active > a { background: url('/images/common/minus.png') no-repeat 94% 50%; background-size: 10px; color: #181818}
.accordion li div {padding:0px;clear:both;float:left;width:100%;}
.accordion a {font-family:'notokr-bold';font-size:0.85rem ;color:#181818;padding: 15px 20px; display:block;cursor:pointer;background:url('/images/common/plus.png') no-repeat 94% 50%; background-size: 10px; border-bottom: 1px solid #dbdbdb;}

.accordion li ul li {background: #efefef;font-size:0.8rem; color: #181818; }
.accordion li ul li a{background:#efefef url('dot.gif') no-repeat 20px 10px;padding-left:30px; color: #181818; border-bottom: 1px dashed #dbdbdb;font-family:'notokr-regular'}	
	
	
/* sns */
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:99;
  background-color:#000;
  display:none;
}
  
.window {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:none;
  z-index:999;
  padding:0;
}

#header_m .menupop{ position:fixed; left:0; top: 0; background:#ffffff; max-width:600px; width:100%; padding:0; z-index:999999; overflow-y: scroll; height: 100%}	
#header_m .menupop_close {top: 23px; right: 20px; display: block; position: absolute; width: 20%; }
#header_m .menupop_close img {width: 18px; float: right}
	
#header_m .login_w {width: 100%; float: left}
	
#header_m .login_bg { background:#1f4392; padding:22px 22px 20px 22px; color:#ffffff;  width: 100%; text-align:left; font-size: 1.1rem;   box-sizing: border-box}
#header_m .login_bg a { color:#ffffff; padding-left: 42px}
#header_m .login_bg img {top: 16px; left: 20px; display: block; position: absolute; width: 35px;}
	
#header_m .join_bg {float: left; width: 100%; background: #f5f5f5; border-bottom: 1px solid #dbdbdb; padding:12px 0}
#header_m .join_bg li { width: 50%; float: left; color: #181818; text-align: center; }
#header_m .join_bg li:nth-child(1)::after{content: '|'; float: right; color: #dbdbdb}

#header_m .menupop_menu {width: 100%; float: left;}
#header_m .menupop_menu ul {width: 90%; float: left; margin: 0 auto; padding: 20px 5% 15px 5%; border-bottom: 1px dashed #dbdbdb;}
#header_m .menupop_menu li { width: 25%; float: left; text-align: center ;font-size: 0.85rem }
#header_m .menupop_menu li:hover {cursor: pointer}
#header_m .menupop_menu li img {width: 70%; margin-bottom: 5px}

#header_m .menupop_menu2 {width: 100%; float: left;}
#header_m .menupop_menu2 ul {width: 90%; float: left; margin: 0 auto; padding: 20px 5% 5px 5%; border-bottom: 1px solid #dbdbdb;}
#header_m .menupop_menu2 li { width: 25%; float: left; text-align: center; padding-bottom: 10px; font-size: 0.85rem }
#header_m .menupop_menu2 li:hover {cursor: pointer}
#header_m .menupop_menu2 li img {width: 70%; margin-bottom: 5px}	

#header_m .menupop_menu_sns {width: 100%; float: left;}
#header_m .menupop_menu_sns h2 { width: 90%; padding: 20px 5% 0 5%; text-align: left; font-size: 1.1rem; font-family: 'notokr-medium' }
#header_m .menupop_menu_sns ul {width: 90%; float: left; margin: 0 auto; padding: 15px 5%; }
#header_m .menupop_menu_sns li { width: 25%; float: left; text-align: center; font-size: 0.85rem }
#header_m .menupop_menu_sns li:hover {cursor: pointer}
#header_m .menupop_menu_sns li img {width: 70%; margin-bottom: 5px}
	
#header_m .map_bg {float: left; width: 100%; background: #1c2032; padding:12px 0; }
#header_m .map_bg li { width: 50%; float: left; color: #ffffff; text-align: center; }
#header_m .map_bg li a {color: #ffffff;}
#header_m .map_bg li:nth-child(1)::after{content: '|'; float: right; color: #ffffff}
	
/* 메인팝업 */	
	#mask3 {
	  position:absolute;
	  width: 100%; height: 100%;
	  left:0;
	  top:0;
	  z-index:9999999;
	  background-color:#000;
	  display: block; 
	  opacity: 70%;
	}
	.mainpop {
	  position: fixed;
	  left:0;
	  bottom:0;
	  width:100%;
	  height:auto;
	  display:none;
	  z-index:99999999 !important;
	  padding:0;		
	}
	.mainpop .mainslide {width:100% !important; max-width: 100% !important; padding: 0 !important; margin: 0!important}
	.mainpop .popbt { width: 100%; clear: both}
	.mainpop .popbt ul { width: 100%}
	.mainpop .popbt li { width: 50%; border-right: 1px solid #bfbfbf; font-size:1rem; background: #e5e5e5; box-sizing: border-box ; float: left; text-align: center; padding: 20px 0; color: #333333}
	.mainpop .popbt li:last-child { border: none}
	.mainpop .popbt :hover {cursor: pointer}
	.mainpop img {width:100% !important; max-width: 100% !important;}

	
}