@charset "utf-8";

/* reset */
html{height:100%;}
h1,h2,h3,h4,h5,h6,blockquote,fieldset,form,pre,p{margin:0;padding:0}
ul,ol,li,dl,dt,dd{list-style:none;margin:0;padding:0}
img{vertical-align:top;border:0}
form,fieldset{border:0}
textarea{overflow:auto;padding:5px}
input,select,button{vertical-align:middle}
address,em{font-style:normal;font-weight:normal}
a{text-decoration:none}
a:link,a:visited{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
.blind{position:absolute;left:-9999px;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;z-index:-1}
.accessibility, caption, legend, hr {overflow:hidden; visibility:hidden; position:absolute; width:0; height:0; font-size:0;}

.hide{overflow:hidden; visibility:hidden; position:absolute;}
#allround{position:relative; width:100%;}

/* skiptoContent */
#skiptoContent{position:fixed;top:0;left:0;width:100%;z-index:500}
#skiptoContent a {display:block;position:absolute;top:70px;left:-99999px;width:160px;height:24px;background:#ed1c24;color:#fff;font-size:12px;line-height:24px;text-align:center}
#skiptoContent a:focus, #skiptoContent a:active {left:0;text-decoration:none}
#skiptoContent a:hover{text-decoration:underline}

/* Layout */
html,body{font-family:'나눔고딕',dotum,Helvetica,sans-serif;font-size:12px}
html,body{height:100%;margin:0;padding:0;}
body{width:100%; height:100%; min-width:320px; min-height:320px;}
.hidden{display:none;}

body p{padding:0 0 10px 0;} 

p.pstyle01{padding:0 0 10px 0; text-align:justify; line-height:150%;} 

#wrap{position:relative; width:100%; margin:0;}

#head{width:100%; margin:0; padding:0;}
.head{width:100%; margin:0; padding:0;  overflow:hidden; height:85px;}
h1.logo{margin:20px 0 0 25px; text-indent:-9999px; width:230px; height:48px;  background:url("../images/common/logo.png") no-repeat; background-size:100%; float:left;} 
.sns_area{float:right;}
.sns_area ul li{float:left;width:44px; height:44px; padding:0; margin:0;}
.sns_area ul li a.login{display:block; text-indent:-9999px; width:44px; height:44px; background:url("/mobile/common/images/kor/common/btn_login.gif") no-repeat; background-size:100%;}
.sns_area ul li a.logout{display:block; text-indent:-9999px; width:44px; height:44px; background:url("/mobile/common/images/kor/common/btn_logout.gif") no-repeat; background-size:100%;}
.sns_area ul li a.fa{display:block; text-indent:-9999px; width:44px; height:44px; background:url("/mobile/common/images/kor/common/btn_sns_f.gif") no-repeat; background-size:100%;}
.sns_area ul li a.tw{display:block; text-indent:-9999px; width:44px; height:44px; background:url("/mobile/common/images/kor/common/btn_sns_t.gif") no-repeat; background-size:100%;}
.head_02{clear:both; width:100%; height:100%; margin:0; padding:0; overflow:hidden;}
.head_02 ul li{float:left; width:50%;}
.head_02 ul li img{width:100%;}
.main_visual{clear:both; padding:0; margin:0; width:100%;position: relative;}
.main_visual img{width:100%;}

.vr_btn{position: absolute;  right: 0px;  top: 150px; width:45%;}

.main_btn{clear: both;}
.main_btn ul li{float:left;width: 50%;}
.main_btn img{width:100%;}



/*
.month_schedule_btn ul li {  display:inline-block; padding: 0;  margin: 0;  width: 44px;padding-top:10px;  }
.month_schedule_btn ul li img{ width:100%;}
.month_schedule_btn span{margin:0 auto;padding-top: 17px;   padding: 18px 0px 0px 90px;position: absolute; }
.month_schedule_btn span img{width:60%;}
.month_schedule_btn .btn_pre{  float: left;padding-left:10px;  }
.month_schedule_btn .btn_next{  float: right;padding-right:10px;  }
*/


#header_menu {
	z-index: 9998;
	/*position: absolute;
	width: 100%;
	top: -480px;*/

	/*-webkit-transform: translate3d(0,-234px,0);
	-moz-transform: translate3d(0,-234px,0);
	-o-transform: translate3d(0,-234px,0);
	-ms-transform: translate3d(0,-234px,0);
	transform: translate3d(0,-234px,0);

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	*/
}

.csstransforms3d #header_menu {
	top: 0;
}

#header_menu.header_menu_open {
	top:20px;

	-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
	box-shadow: 0 10px 10px rgba(0,0,0,0.5);

	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

#header_menu_open_close {
   position: relative;
   top: -66px;
}

#header_menu_open_close span {
  background: url("../images/common/top_icon.png") no-repeat;
  background-size: 100%;
  border: none;
  width: 28px;
  /*height: 20px;*/
  text-indent: -999px;
  overflow: hidden;
  padding-bottom: 10px;
}

#header_menu_open_close span {
	color: #FFFFFF;
	top: 23px;
	right: 20px;
	
	border-top: none;
	display: block;
	position: absolute;
	z-index: 999;
	text-align: center;
	font-weight: normal;
	cursor: pointer;
}


.header_menu_open #header_menu_open_close span {

}


#home_menu_container {position: relative; display:block;}
#home_menu a {
	
    display: block;
    float: left;
    width: 25%;
    text-align: center;    
	/* background: transparent url('images/icons/svg_icon_test.svg') no-repeat center center; */
	/* background-size: 100% 100%; */
}
/*#home_menu a:active {outline: 1px solid #91FBFF;}*/
#home_menu a img{ width:90%; padding-bottom:15px; }
#home_menu ul {padding:12px;}
#home_menu li { }

/***************************************/
/**************** MENU *****************/
/***************************************/

#main_menu_container {
		/*border-bottom: 8px solid #555;*/
		z-index: 9998;
		/*width: 100%;
		top: -480px;*/
}

/*
#main_menu li ul {
	display: none;
}
*/


#main_menu {
	display: none;
}



#main_menu li {
	clear: both;
	position: relative;
}

/* #main_menu li span {
	 position: absolute;
	 display: block;
	right: 15px;
	 height:  50px;
	 width:  22px;
	 background:  transparent url('images/arrow.png') no-repeat left center scroll;
	 -webkit-background-size:  44px auto;
	 }

 */
 #main_menu li:first-child {
	border-top: #DDD solid 1px;
}

/*#main_menu li:last-child {
  padding-left: 25px;
  height: 50px;
  border-top: white solid 1px;
  line-height: 50px;
  display: block;
  background-color: #333;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
}*/

#main_menu li a.link, #main_menu li A:active {
	padding-left: 25px;
	height: 50px;
	border-top: white solid 1px;
	line-height: 50px;
	border-bottom: #DDD solid 1px;
	display: block;
	background-color: #fff;
	color: #333;
	font-weight: bold;
	font-size: 15px;
}


#main_menu li a.close, #main_menu li A:active {
	padding-left: 25px;
	height: 50px;
	border-top: white solid 1px;
	line-height: 50px;
	display: block;
	background-color: #fff;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
}

/*.month_schedule_btn ul li.btn_pre a:link {  display: block;  text-indent: -10000px;  width: 44px;  height: 72px;  background: url("../images/main/month_btn_L.png") no-repeat;}
.month_schedule_btn ul li.btn_pre a:visited {  display: block;  text-indent: -10000px;  width: 44px;  height: 72px;  background: url("../images/main/month_btn_L.png") no-repeat 0 0;background-size:90%;}
.month_schedule_btn ul li.btn_pre a:hover{display:block; text-indent:-10000px; width:44px; height:72px; background:url("../images/main/month_btn_L.png") no-repeat 0 0; background-size:90%;}
.month_schedule_btn ul li.btn_pre a:active{display:block; text-indent:-10000px; width:44px; height:72px; background:url("../images/main/month_btn_L.png") no-repeat 0 0;background-size:90%;}
.month_schedule_btn ul li.btn_next{padding:0 0 0 0px;}
.month_schedule_btn ul li.btn_next a:link{display:block; text-indent:-10000px; width:44px; height:72px; background:url("/Common/Images/main/next_arrow.png") no-repeat 0 0;}
.month_schedule_btn ul li.btn_next a:visited{display:block; text-indent:-10000px; width:44px; height:72px; background:url("/Common/Images/main/next_arrow.png") no-repeat 0 0;}
.month_schedule_btn ul li.btn_next a:hover{display:block; text-indent:-10000px; width:44px; height:72px; background:url("/Common/Images/main/next_arrow.png") no-repeat 0 0;}
.month_schedule_btn ul li.btn_next a:active{display:block; text-indent:-10000px; width:44px; height:72px; background:url("/Common/Images/main/next_arrow.png") no-repeat 0 0;}
*/
/* 메인메뉴 영역 */
#body{clear:both; overflow:hidden; width:100%;   margin-top: 12px;}
.container{padding:0  0px 0 0px;}
.menu_area{padding:0 0 10px 0; margin:0; clear:both; overflow:hidden; }
.menu_area ul li{float:left; width:33.3%; }
.menu_area ul li img{float:left; width:100%; }

.smenu_area {margin: 0 auto;  clear: both; overflow: hidden;  width: 95%; }
.smenu_area ul {margin-bottom:10px;}
.smenu_area ul li{padding: 0px;}
.smenu_area a{display: block;  float: left;  width: 25%;  text-align: center;letter-spacing: -1px;color:#333;line-height:13px;margin-bottom: 13px; font-size:0.8em;}
.smenu_area a img{display:block;  width: 90%; margin: 0 auto; }
/*.smenu_area ul li img{float:left; width:100%; }*/

/* 내비게이터 */
.navigator{clear:both; width:100%; overflow:hidden; height:36px; background:#b8b8b8;}
.navigator p span.navi01{display:block; float:left; width:40px; padding:10px 0 0 10px; background:#3c3c3c; height:36px; color:#ffffff;}
.navigator p span.navi02{display:block; float:left; width:26%; padding:10px 0 0 10px; background:#757575; height:36px; color:#ffffff;}
.navigator p span.navi03{display:block; float:left; width:36.5%; padding:10px 0 0 10px; background:#b8b8b8; height:36px; color:#ffffff;}
.navigator p span.navi_bg01{display:block; float:left; width:14px; height:36px; text-indent:-9999px; background:url("/mobile/common/images/kor/main/navi_bg01.gif") no-repeat; background-size:100%;}
.navigator p span.navi_bg02{display:block; float:left; width:14px; height:36px; text-indent:-9999px; background:url("/mobile/common/images/kor/main/navi_bg02.gif") no-repeat; background-size:100%;}

/* 하단 카피라이터 */
#footer{clear:both; width:100%; height: 125px;padding:20px 0 0 0;background-color:#2b71ac;}
.control_btn{width:100%; overflow:hidden; height:71px;}
.control_btn img{width:100%;}
.btn_back{width:62px; float:left;}
.btn_top{width:62px; float:right;}

.member_btn{background-color:#30afbd; width:100%; height:40px;}
.member_btn ul li{float:left; width:49%; height:28px; padding:12px 0 0 0; text-align:center; border-left:solid 1px #217983;}
.member_btn ul li a{color:#ffffff; font-weight:bold;}

.footer_btn{ width:100%; height:40px;} 
.footer_btn ul li{width:20%; height:28px; padding:12px 0 0 0; text-align:center; background-color:#fff; margin: 7px;  display: inline-block;}
.footer_btn ul li a{color:#2b71ac; font-weight:bold;}

.copy_area{clear:both; background:#2b71ac; padding:0px 0 30px 0; text-align:center; font-size:0.9em;}
.copy_area p{padding:5px 0 0 0;color:#fff;}

/* 서브메뉴 */
.categorymenu_close{width:100%; padding:10px 0 10px 0; background:#000000;}
.categorymenu_close div.btn{overflow:hidden;}
.categorymenu_close div.btn a.closeNavi{display:block; width:48px; padding:0 10px 0 0;  float:right;}
.categorymenu_close div.btn a.closeNavi img{width:48px;}

.smenu01{position:absolute; top:0; left:-200px; width:50%; height:100%; background:#292929; overflow-y:scroll;}
.smenu01 h2.category{height:30px; background:#515151; padding:15px 0 0 10px; color:#ffffff;}
.smenu01 ul li{border-top:solid 1px #464646; border-bottom:solid 1px #1a1a1a; padding:20px 0 20px 10px;}
.smenu01 ul li a{text-decoration:none; color:#f1f1f1; display:block;}

.smenu02{position:absolute; top:0; left:-200px; width:50%; height:100%; background:#292929; display:hidden;}
.smenu02 h2.category{height:30px; background:#515151; padding:15px 0 0 10px; color:#ffffff;}
.smenu02 ul li{border-top:solid 1px #464646; border-bottom:solid 1px #1a1a1a; padding:20px 0 20px 10px;}
.smenu02 ul li a{text-decoration:none; color:#f1f1f1; display:block;}

.smenu03{position:absolute; top:0; left:-200px; width:50%; height:100%; background:#292929; display:hidden;}
.smenu03 h2.category{height:30px; background:#515151; padding:15px 0 0 10px; color:#ffffff;}
.smenu03 ul li{border-top:solid 1px #464646; border-bottom:solid 1px #1a1a1a; padding:20px 0 20px 10px;}
.smenu03 ul li a{text-decoration:none; color:#f1f1f1; display:block;}

.smenu04{position:absolute; top:0; left:-200px; width:50%; height:100%; background:#292929; display:hidden;}
.smenu04 h2.category{height:30px; font-size:1.3em; background:#515151; padding:15px 0 0 10px; color:#ffffff;}
.smenu04 ul li{border-top:solid 1px #464646; border-bottom:solid 1px #1a1a1a; padding:20px 0 20px 10px;}
.smenu04 ul li a{text-decoration:none; color:#f1f1f1; display:block;}

.smenu05{position:absolute; top:0; left:-200px; width:50%; height:100%; background:#292929; display:hidden;}
.smenu05 h2.category{height:30px; background:#515151; padding:15px 0 0 10px; color:#ffffff;}
.smenu05 ul li{border-top:solid 1px #464646; border-bottom:solid 1px #1a1a1a; padding:20px 0 20px 10px;}
.smenu05 ul li a{text-decoration:none; color:#f1f1f1; display:block;}

.smenu06{position:absolute; top:0; left:-200px; width:50%; height:100%; background:#292929; display:hidden;}
.smenu06 h2.category{height:30px; background:#515151; padding:15px 0 0 10px; color:#ffffff;}
.smenu06 ul li{border-top:solid 1px #464646; border-bottom:solid 1px #1a1a1a; padding:20px 0 20px 10px;}
.smenu06 ul li a{text-decoration:none; color:#f1f1f1; display:block;}


.shadow3 {
  -moz-box-shadow: 0px 0px 20px #0b3150;
  -webkit-box-shadow: 0px 0px 20px #0b3150;
  box-shadow: 0px 0px 20px #0b3150;
  position: relative;
  behavior: url(PIE.htc);
}

/*@media screen and (min-width: 200px) {
.footer_btn{ /*width:200px; height:40px;margin:0 auto;} 

}*/

@media screen and (min-width: 320px) {
.head {  width: 100%;  margin: 0;  padding: 0;  overflow: hidden;  height: 65px;}
h1.logo {  margin: 20px 0 0 15px;  text-indent: -9999px;  width: 135px;  height: 30px;  background: url("../images/common/logo.png") no-repeat;  background-size: 100%;  float: left;}
.footer_btn{ /*height:40px;margin:0 auto;*/} 
.footer_btn ul li {  width: 20%;height: 20px;padding: 6px 0 0 0;text-align: center;background-color: #fff;margin: 4px;display: inline-block;}
.footer_btn ul li a{color:#2b71ac; font-weight:bold;}
.vr_btn{position: absolute;  right: 0px;  top: 80px; width:45%;}
.month_schedule { top: 344px;  margin: 0 auto;  width: 100%;  /* clear: both; */   left: 85px;}
.month_schedule_btn{ height:65px;clear:both; border:1px solid #bdbdbd; background-image:-webkit-linear-gradient(top,white,#f5f5f5,#ededed);}
.month_schedule_btn span{display:block; margin:0 auto; text-align:center; padding:20px 0 0 0;}
.month_schedule_btn span a img{width:70%;}



.smenu_area a{  display: block;  float: left;  width: 25%;  text-align: center;letter-spacing: -1px;font-size:11px;line-height:11px;}

}

@media screen and (min-width: 360px) {
.footer_btn{ width:360px; height:40px;margin:0 auto;} 
.vr_btn{position: absolute;  right: 0px;  top: 80px; width:45%;}
.month_schedule_btn span{display:block; margin:0 auto; text-align:center; padding:20px 0 0 0;}
.month_schedule_btn span a img{width:70%;}
}

@media screen and (min-width: 400px) {
.footer_btn{ width:360px; height:40px;margin:0 auto;} 
.vr_btn{position: absolute;  right: 0px;  top: 100px; width:45%;}
.smenu_area a { display: block; float: left; font-size: 12px; letter-spacing: -1px;  line-height: 11px;  text-align: center;  width: 25%;}
.month_schedule_btn span{display:block; margin:0 auto; text-align:center; padding:20px 0 0 0;}
.month_schedule_btn span a img{width:70%;}
}

@media screen and (min-width: 480px) {
}

@media screen and (min-width: 640px) {
.footer_btn{ width:640px; height:40px;margin:0 auto;} 
}


@media screen and (min-width: 800px) {
.head {  width: 100%;  margin: 0;  padding: 0;  overflow: hidden;  height: 95px;}
h1.logo {  margin: 25px 0 0 25px;  text-indent: -9999px;  width: 220px;  height: 45px;  background: url("../images/common/logo.png") no-repeat;  background-size: 100%;  float: left;}
.vr_btn{position: absolute;  right: 0px;  top: 180px; width:45%;}
.footer_btn{ width:800px; height:40px;margin:0 auto;} 
.smenu_area a { display: block;  float: left;  font-size: 22px;  letter-spacing: -1px;  line-height: 25px;  text-align: center;  width: 25%;}
}