@charset "utf-8";

/* 가운데 영역 */
.container {position: relative; width: 1200px; margin: 0 auto; }

/* 로우 영역 */
.row {padding: 0 24px;}

/* 헤더 영역 */
#header {position: fixed; left: 0; top: 0; z-index: 9999; width: 100%;  border-bottom: 1px solid #222;}
/* 모바일 메뉴 */
#mNav { }
.mNav .toggle { display: none;  position: absolute; top: 13px; right: 24px;}
.mNav .toggle i { font-size: 25px; color:#999; line-height: 30px;}
.m_menu {
  display: none;
  position: absolute; top:50px; right: 0;
  width:300px; background: #fff;
}

.m_menu .munu {}
.m_menu .munu p {font-size: 14px; padding: 2px 5px; box-sizing: border-box; background: #222; color:#fff;}
.m_menu .munu ul { }
.m_menu .munu ul li {width:50%; font-size: 12px; padding: 3px 18px; box-sizing: border-box;}
.m_menu:last-child { padding-bottom: 20px;}


/* 헤더 탑영역 */
.header_top { height: 40px; background: #5f8fde;}
.header_top .h_top {margin: 0 auto; width:290px;}

.header_menu {text-align: right; padding-right: 24px; background: #fff;}
.header_menu a {color: #222; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
.header_menu a:hover {color: #ccc;}
.header { background: #fff; }
.header h1 {font-size: 0;} /* 헤더여백없애기 */
.header h1 em {padding: 9px 4px 5px 0; display: inline-block;}
.header h1 em img {width: 240px;}

.header .nav { }
.header .nav ul { display: flex; justify-content: center; align-items: center;}
.header .nav ul li{position: relative; text-align: center; float: left; width: 14%;}
.header .nav ul li a{transition: all 0.4s ease; display: block; padding: 4px 0px 7px 0px; font-size: 18px; font-weight: bold; font-family: nanum cursive; color: #000; letter-spacing: 1px;}

.header .nav ul li ul.submenu{ border:1px solid #c6c6c6; box-sizing: border-box;
  border:0px; background: #fff; display: none; position: absolute; left:0; top:37px; margin-top: 0px; width: 100%; padding-left: 0%;}
.header .nav ul li ul.submenu li {width: 100%; border-bottom:1px dotted #222;}
.header .nav ul li ul.submenu li a {font-size: 13px; padding: 12px 10px;}



/* 메인이미지 */
#bul_main {width: 100%; margin-top: 164px; background: #9696cf;}

.bul_main img{ width: 100%; display: block;}

/* 모집안내 알아보기 */
#mosip {}
.mosip { margin-top: 50px;}
.mosip ul { width: 100%; text-align: center;}
.mosip ul li { display: inline-block; width: 19%; background: #9696cf; border: 1px solid #ccc;}
.mosip ul li a { padding: 10px 0; box-sizing: border-box; display: inline-block; font-size: 16px;}
.mosip ul li a:hover{color:#222;}

/* 벌점표 */
.tt { margin-top: 50px;}
.tt h3 {font-size: 30px; padding: 24px 0 60px 0;text-align: center;}
.ttble  {font-size: 15px; }
.ttble p { font-size: 16px; padding: 8px 0;}
.tt table {border: 1px solid #ccc;}


/* 하위버튼 */
#btn01 {padding: 30px 0; margin-top: 50px;}
.btn01 ul {overflow: hidden; display: flex; justify-content: center; align-items: center; width:100%;}
.btn01 ul li { position: relative; float: left; width: 15%;  text-align: center;}
.btn01 ul li img { width:80px;}

  /* 푸터 */
  #footer { background: #222;  padding-top: }
  .footer_sns {position: absolute; right: 17px; top: 33px; }
  .footer_sns ul { text-align: right; }
  .footer_sns li { display: inline-block; margin-right: 20px; }
  .footer_sns ul li a {color: #fff;}
  .footer_sns ul li a i {color: #fff; font-size:40px;}
  .footer_sns .tel {text-align: right; padding-top: 5px;}
  .footer_sns .tel a {color: #8f8f8f; font-size: 21px;}
  .footer_sns .tel a em {color: #fff;}

  .footer_infor {position: relative; padding: 50px 0; width: 80%;}
  .footer_infor h2 img {width:150px; opacity: .8;}
  .footer_infor ul {padding: 15px 0;}
  .footer_infor li {position: relative; display: inline; padding-right: 16px; white-space: nowrap;}
  .footer_infor li:after {content: ''; position: absolute; right: 5px; top: 5px; width: 1px; height: 11px; background: #8f8f8f;}
  .footer_infor li:last-child:after {width: 0; height: 0;}
  .footer_infor li a {color: #8f8f8f;}
  .footer_infor address p {color: #8f8f8f; padding-bottom: 15px;}


/* 미디어쿼리 */
@media (max-width: 1210px){
  .container {width: 100%;}
}
@media (max-width: 1024px){

}
@media (max-width: 960px){
  #bul_main  {margin-top: 85px;}

  .footer_sns {position: static; text-align: center; background: #352c2c; padding: 15px 0;}
  .footer_sns .tel {display: none;}
  .footer_infor {width: 100%; text-align: center;}

  .header_top {display: none;}
  /*모바일메뉴*/
 .mNav .toggle  {display: block;}
  .header .row {padding: 0 12px;}
  .header .nav ul {display: block;}
  .header .nav ul li {float: none; border-bottom: 1px solid #333; width: 100%;}
  .header .nav { background: #222; width: 100%; display: none;}
  .header .nav ul li a {font-size: 16px; font-weight: 100; text-align: left; color:#fff; padding: 20px 12px;}
  .header .nav ul li ul.submenu {position: relative; top:0;}
  .header .nav ul li ul.submenu li {float: left; width: 100%;}
  .header .nav ul li ul.submenu li a { color:#222;}
  .header .nav ul li ul.submenu li a:hover{background: #f2f2f2; }


}

@media (max-width: 768px){
.tt h3 {font-size: 22px; padding: 0px 0 14px 0;}
}

@media (max-width: 600px){

  .btn01 ul {display: block;}
  .btn01 ul li {
  width: 100%;
  padding: 3px;
  border:1px solid #ccc;
  margin-bottom: 8px;
  box-sizing: border-box;}
}

@media (max-width: 480px){
.row {padding: 0 8px;}
#bul_main  {margin-top: 86px;}
.tt h3 {font-size: 18px;}
.ttble p {font-size: 14px;}
#mosip {display: none;}
}

@media (max-width: 320px){

}