@charset "UTF-8";

/*
	AUTHOR : Lee.Hye.Jun
	E-MAIL : service@sibizi.com
	DATE : 2019.09.10
	EDIT : 2019.09.19
	File : css/layout.css
*/

/* ===========================
		 	layout
=========================== */

/* library */
html,
body {
  background: #eceff1;
  min-width: 1280px;
  margin: 0;
}
/*#wrap{}*/
#dim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.no_scroll {
  overflow: hidden;
}
.inner {
  max-width: 1280px;
  margin: 0 auto;
}
.infit {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
}
.hidden {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  font-size: 0;
  line-height: 0;
  clip: rect(0, 0, 0, 0);
}
.lt {
  float: left;
}
.rt {
  float: right;
}
.w100 {
  width: 100% !important;
}
.m0 {
  margin: 0 !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.p0 {
  padding: 0 !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.tl {
  text-align: left !important;
}
.tr {
  text-align: right !important;
}
.tc {
  text-align: center !important;
}
.vt {
  vertical-align: top !important;
}
.ls0 {
  letter-spacing: 0 !important;
}
.ani {
  visibility: hidden;
}
.ani.on {
  visibility: visible;
}
.ovh {
  overflow: hidden;
}
.st_wd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

/* font */
.blw {
  font-family: 'Barlow', sans-serif;
}
.nanumg {
  font-family: 'Nanum Gothic', sans-serif !important;
}

/* color */
.c_point {
  color: #027cc2 !important;
}
.c_bk {
  color: #222 !important;
}
.c_wt {
  color: #fff !important;
}
.c_red {
  color: #fd0000 !important;
}
.c_blue {
  color: #00428e !important;
}
.b_wt {
  border-color: #fff !important;
}

/* input, select, textarea, file, checkbox,*/
.input_basic {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d5d7d8;
  font-weight: 500;
  font-size: 14px;
  box-sizing: border-box;
}
.input_file {
  display: none;
  width: 60%;
  height: 36px;
  margin-left: 10px;
  padding: 0 24px;
  background: #fff url(../../img/input_file.png) no-repeat center left;
  font-weight: 500;
  font-size: 14px;
  color: #88949c;
  box-sizing: border-box;
}
.input_file:focus {
  outline: 0;
}
.select_basic {
  width: 100%;
  height: 36px;
  padding: 0 35px 0 10px;
  border: 1px solid #d5d7d8;
  background-color: #fff;
  background-image: url(../../img/select_arrow.png);
  background-repeat: no-repeat;
  background-position: center right 10px;
  font-size: 14px;
  box-sizing: border-box;
}
.text_basic {
  width: 100%;
  min-height: 200px;
  padding: 10px;
  border: 1px solid #d7d7d7;
  font-size: 16px;
  line-height: 20px;
  box-sizing: border-box;
}
.file_input {
  position: relative;
}
.file_basic {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.file_basic + .file_label {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 6px;
  border-radius: 2px;
  background: #88949c url(../../img/file_label.png) no-repeat center center;
  font-size: 0;
  vertical-align: top;
  cursor: pointer;
}
.chk {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.chk + .chk_label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 19px;
  color: #444;
  cursor: pointer;
}
.chk + .chk_label span {
  font-size: 14px;
  color: #ff4c66;
}
.chk + .chk_label:after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 19px;
  height: 19px;
  margin-top: -10px;
  background: url(../../img/chk_off.png) no-repeat center center;
  content: '';
}
.chk:checked + .chk_label:after {
  background: url(../../img/chk_on.png) no-repeat center center;
}
.chk.bchk + .chk_label {
  padding-left: 44px;
  font-size: 16px;
  line-height: 34px;
}
/*.chk.bchk+.chk_label:after{width: 34px;height: 34px;margin-top: -17px;background: url(../../img/bchk_off.png) no-repeat center center}
.chk.bchk:checked+.chk_label:after{background: url(../../img/bchk_on.png) no-repeat center center}*/
.chk.rdo + .chk_label.rdo {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-right: 30px;
  font-size: 16px;
  line-height: 20px;
  color: #444;
  cursor: pointer;
  font-weight: 500;
}
.chk.rdo + .chk_label.rdo span {
  font-size: 16px;
  color: #444;
}
.chk.rdo + .chk_label.rdo:after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url(../../img/radio_off.png) no-repeat center center;
  content: '';
}
.chk.rdo:checked + .chk_label.rdo:after {
  background: url(../../img/radio_on.png) no-repeat center center;
}

/* btn */
.btn_norm {
  display: inline-block;
  width: 80px;
  background: #ff4c66;
  font-weight: 500;
  font-size: 14px;
  line-height: 34px;
  color: #fff;
  letter-spacing: -0.2px;
  text-align: center;
  box-sizing: border-box;
}
.btn_norm.bd {
  border: 1px solid #ff4c66;
  background: #fff;
  line-height: 32px;
  color: #ff4c66;
}
.btn_norm.bk {
  background: #444;
  color: #fff;
}
.btn_norm.gy {
  background: #dfe3e6;
  color: #888;
}
.btn_norm.sky {
  background: #7c8faf;
  color: #fff;
}

/* table */
/*.tbl_type1{}*/
.tbl_type1 table {
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid #ced6db;
  border-bottom: 1px solid #d7dee2;
}
.tbl_type1 table thead {
  background: #eceff1;
}
.tbl_type1 table thead th {
  padding: 23px 0;
  font-weight: 500;
  font-size: 14px;
  color: #88949c;
}
.tbl_type1 table tbody tr {
  border-top: 1px solid #d7dee2;
}
.tbl_type1 table tbody td {
  padding: 23px 24px;
  font-size: 14px;
  text-align: center;
}
.tbl_type2 table {
  width: 100%;
}
.tbl_type2 table tbody tr {
  border-top: 5px solid #eceff1;
  background: #fff;
}
.tbl_type2 table tbody tr:first-of-type {
  border-top: 0;
}
.tbl_type2 table tbody tr th {
  width: 144px;
  padding: 20px 0 20px 30px;
  font-size: 14px;
  color: #888;
  text-align: left;
  box-sizing: border-box;
  vertical-align: top;
}
.tbl_type2 table tbody tr th label {
  color: #888;
}
.tbl_type2 table tbody tr th .required {
  color: #ff4c66;
}
.tbl_type2 table tbody tr td {
  padding: 0 30px;
  font-size: 16px;
}
.tbl_type2 table tbody tr td .input_basic {
  max-width: 680px;
}
.tbl_type2 table tbody tr td .select_basic {
  max-width: 200px;
}
.tbl_type2 table tbody tr td .caution {
  margin-left: 18px;
  font-size: 14px;
  color: #ff4c66;
}
.tbl_type2 table tbody tr td .general {
  margin-left: 18px;
  font-size: 14px;
  color: #888;
}
.tbl_type2 table tbody tr.view td {
  padding: 67px 50px 42px;
}
.tbl_type2 table tbody tr.write td {
  padding: 50px;
}
.tbl_type2 table tbody tr.cmt td {
  padding: 30px 50px;
  background: #f8fafb;
}

/* tit */
.b_tit {
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
}
.r_tit {
  position: relative;
  padding-left: 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}
.r_tit:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  margin-top: -1px;
  border-radius: 50%;
  background: #444;
  content: '';
}
.r_tit strong {
  font-weight: 500;
  color: #ff4c66;
}

/* search_form */
.search_form {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 60px;
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
}
/* .search_form .select_basic{width: 130px;height: 34px;margin-right: 10px;} */
.search_form .select_basic {
  width: 130px;
  height: 34px;
  margin-right: 7px;
  color: #888;
} /* 십이지 2007 수정*/
.search_form .input_basic {
  width: 200px;
  height: 34px;
  border: 0;
  vertical-align: top;
}
/* border-radius 추가, span style 추가(react button 안의 text 색상 변경) - mangosystem 김근배 */
/* .search_form .search_btn{position: absolute;top: 0;right: 0;width: 60px;height: 34px;background: #7c8faf;font-weight: 500;font-size: 14px;color: #fff;text-align: center;} */
.search_form .search_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 34px;
  background: #7c8faf;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  text-align: center;
  border-radius: 0px;
}
.search_form .search_btn span {
  color: #fff;
}

/* pager */
.pg_wrap {
  position: relative;
  margin-top: 50px;
  text-align: center;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 0;
}
.pg_wrap .pg_page {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
}
.pg_wrap .pg_page a {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  line-height: 30px;
  color: #888;
}
/* :not(.pg_arrow) 추가 - mangosystem 김근배 */
.pg_wrap .pg_current:not(.pg_arrow) a {
  display: block;
  background: #7c8faf;
  font-weight: 500;
  color: #fff;
}
.pg_wrap .pg_arrow {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1px;
}
.pg_wrap .pg_arrow a {
  display: block;
  width: 30px;
  height: 30px;
}
.pg_wrap .pg_start {
  background: url(../../img/pg_start.png) no-repeat center center;
}
.pg_wrap .pg_prev {
  margin-right: 12px;
  background: url(../../img/pg_prev.png) no-repeat center center;
}
.pg_wrap .pg_next {
  margin-left: 12px;
  background: url(../../img/pg_next.png) no-repeat center center;
}
/* pg_end -> last 변경 및 a 추가, pg_arrow css 추가 - mangosystem 김근배 */
.pg_wrap .last {
  background: url(../../img/pg_end.png) no-repeat center center;
  display: inline-block;
  vertical-align: middle;
  margin: 0 1px;
}
.pg_wrap .last a {
  display: block;
  width: 30px;
  height: 30px;
}

/* layer popup */
.lypopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  min-width: 320px;
  height: 100%;
}
.lypopup .lypop_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #f5f5f5;
  background: #fff;
  transform: translate(-50%, -50%);
  border: 1px solid #ebebeb;
  box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.lypopup .lypop_inner .lypop_tit {
  position: relative;
  width: 100%;
  padding: 22px 40px;
  border-bottom: 1px solid #e1e1e1;
  box-sizing: border-box;
}
.lypopup .lypop_inner .lypop_tit h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
}
.lypopup .lypop_inner .lypop_tit .pop_close {
  position: absolute;
  right: 40px;
  top: 23px;
}
.lypopup .lypop_inner .lypop_con {
  position: relative;
  width: 100%;
  padding: 38px 40px;
  box-sizing: border-box;
}

/* ===========================
		 	skipnav
=========================== */
#skipToContent {
  width: 100%;
}
#skipToContent a {
  position: absolute;
  left: -3000px;
}
#skipToContent a:focus {
  display: block;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 30px;
  background: #039;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
  text-align: center;
}

/* ===========================
		 	header
=========================== */
/* 고정 옵션 추가 - mangosystem 김근배 */
.header {
  height: 60px;
  background: #444;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 3;
} /* .header{height: 60px;background: #244579;} */

.header .inner {
  position: relative;
  height: 100%;
} /* 십이지 2007 수정*/
/* 20200122 - 십이지 수정(로고수정) - 시작 */
/* .header .logo{position: relative;margin-top: -18px;font-size: 0;}
.header .logo2{position: relative;left:5px} */
.header .logo {
  position: absolute;
  left: 0;
  margin-top: 15px;
} /* 망고 2007 수정*/
.header .logo2 {
  position: absolute;
  left: 160px;
  margin-top: 20px;
}
/*20200918 - 텍스트 로고 위치, 크기 수정 - 시작 */
/* .header .logo2 span{position: relative;font-weight: 400;font-size: 20px;line-height: 18px;color: #fff;left:5px;} .header .logo{position: absolute;top: 50%;left: 0;margin-top: -9px;font-size: 0;} */
/*텍스트 로고 위치, 크기 수정 - 끝 */
/* 20200122 - 십이지 수정(로고수정) - 끝 */
/* .header .hd_menu{display: inline-block;} */
/* .header .hd_menu{position: absolute;transform: translateX(620px);} */
.header .hd_menu {
  position: absolute;
  transform: translateX(620px);
}
/*.header .hd_menu .gnb{}*/
.header .hd_menu .gnb {
  padding-right: 240px;
} /* 십이지 2007 수정*/
.header .hd_menu .gnb > li {
  display: inline-block;
  position: relative;
}
.header .hd_menu .gnb > li > a {
  display: inline-block;
  padding: 18px 0;
} /* 십이지 2007 수정*/
.header .hd_menu .gnb > li > a span {
  position: relative;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
}
.header .hd_menu .gnb > li > a span:after {
  position: absolute;
  top: 50%;
  right: -17px;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  background: url(../../img/gnb_arrow.png) no-repeat center center;
  content: '';
  transition: all 0.3s;
}
.header .hd_menu .gnb > li > button {
  display: block;
  width: 120px;
  padding: 18px 0;
}
.header .hd_menu .gnb > li > button span {
  position: relative;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
}
.header .hd_menu .gnb > li > button.arrow span:after {
  position: absolute;
  top: 50%;
  right: -17px;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  background: url(../../img/gnb_arrow.png) no-repeat center center;
  content: '';
  transition: all 0.3s;
}
/* .header .hd_menu .gnb>li>button span:after{position: absolute;top: 50%;right: -17px;width: 7px;height: 4px;margin-top: -2px;background: url(../../img/gnb_arrow.png) no-repeat center center;content: '';transition: all 0.3s} */
.header .hd_menu .gnb > li > button span:after {
  position: absolute;
  top: 50%;
  right: -17px;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  content: '';
  transition: all 0.3s;
}
.header .hd_menu .gnb > li.on > a span:after {
  transform: rotate(-180deg);
  transition: all 0.3s;
}
.header .hd_menu .gnb_dp2 {
  display: none;
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  width: 125px;
  padding: 17px 0;
  border: 2px solid #244579;
  border-top: 0;
  background: #fff;
  box-sizing: border-box;
} /* 십이지 2007 수정*/
.header .hd_menu .gnb_dp2 > li {
  margin-top: 13px;
}
.header .hd_menu .gnb_dp2 > li:first-of-type {
  margin-top: 0;
}
.header .hd_menu .gnb_dp2 > li > a {
  display: block;
  padding-left: 18px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #777;
  text-align: left;
}
.header .hd_menu .gnb_dp2 > li.on > a {
  color: #ff4c66;
}
/* .header .hd_mem{position: absolute;top: 50%;right: 192px;margin-top: -7px;} */
.header .hd_mem {
  position: absolute;
  top: 50%;
  margin-top: -7px;
  transform: translateX(1000px);
}
.header .hd_mem li {
  display: inline-block;
}
.header .hd_mem li:first-of-type {
  position: relative;
  margin-right: 9px;
  padding-right: 11px;
}
.header .hd_mem li:first-of-type:after {
  position: absolute;
  top: 2px;
  right: 0;
  width: 1px;
  height: 12px;
  background: #fff;
  opacity: 0.2;
  content: '';
}
.header .hd_mem li a {
  display: block;
  font-size: 13px;
  color: #fff;
}
.header .hd_mem li button {
  display: block;
  font-size: 13px;
  color: #fff;
}
.header .hd_search {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -15px;
}
.header .hd_search .search_input {
  width: 170px;
  height: 30px;
  padding-right: 30px;
  border: 0;
  border-radius: 4px;
}
.header .hd_search .search_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: url(../../img/search_btn.png) no-repeat center center;
  font-size: 0;
}
/* 20200128 - 망고시스템 수정(login id 길이 조정) - 시작 */
.header .hd_mem li .login_id {
  max-width: 115px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-height: 17.5px;
  vertical-align: middle;
  line-height: 17px;
}
/* 20200128 - 망고시스템 수정(login id 길이 조정) - 끝 */
/* 20200122 - 십이지 수정(바로가기 버튼추가) - 시작 - 망고시스템 추가수정 */
.header .hd_go {
  position: absolute;
  top: 50%;
  transform: translateX(1220px);
  margin-top: -22px;
} /* .header .hd_go{position: absolute;top: 50%;right: 0;margin-top: -14px;} */
.header .hd_go button {
  font-size: 0;
}
.header .hd_go a {
}
/* 20200122 - 십이지 수정(바로가기 버튼추가) - 끝 */

/* ===========================
		  container
=========================== */
/* 고정 옵션 추가 - mangosystem 김근배 */
.container {
  top: 60px;
  position: relative;
}
.location {
  background: #fff;
}
/*.location ul{}*/
.location ul li {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}
.location ul li:last-of-type {
  margin-right: 0;
}
.location ul li a {
  display: block;
  position: relative;
  padding: 23px 18px;
  font-weight: 500;
  font-size: 14px;
  color: #777;
}
.location ul li.on a {
  font-weight: bold;
  color: #ff4c66;
}
.location ul li.on a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ff4c66;
  content: '';
}
.content {
  padding: 0 0 77px;
}
.content.main {
  padding: 40px 0 77px;
}
.content.sub {
  padding: 0 0 73px;
}
.content.mem {
  padding: 80px 0 160px;
}
.content.data {
  padding: 25px 0 77px;
}

/* ===========================
		 	footer
=========================== */
/* 20200122 - 십이지 수정(footer 수정) - 시작 */
/* footer */
#footer {
  width: 100%;
  height: 300px;
  background: #525252;
}
#footer .inner {
}
#footer .inner:after {
  display: block;
  clear: both;
  content: '';
}
#footer .ft_left {
  float: left;
  margin: 30px 0 0;
}
#footer .ft_left .ft_logo {
}
#footer .ft_left .ft_address {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 18px;
  color: #b7b7b7;
}
#footer .ft_left .ft_tel {
  margin: 16px 0 0;
  font-size: 0;
}
#footer .ft_left .ft_tel dl {
  display: inline-block;
  margin-left: 52px;
}
#footer .ft_left .ft_tel dl:first-of-type {
  margin-left: 0;
}
#footer .ft_left .ft_tel dl dt {
  font-size: 15px;
  line-height: 22px;
  color: #b7b7b7;
}
#footer .ft_left .ft_tel dl dd {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  color: #b7b7b7;
}
#footer .ft_left .ft_policy {
  margin: 29px 0 0;
  font-size: 0;
}
#footer .ft_left .ft_policy li {
  display: inline-block;
}
#footer .ft_left .ft_policy li:first-of-type a {
  border-right: 0;
}
#footer .ft_left .ft_policy li a {
  display: block;
  padding: 0 16px;
  border: 1px solid #636363;
  font-size: 15px;
  line-height: 38px;
  color: #a1a1a1;
}
#footer .ft_left .ft_policy li a.on {
  background: #494949;
  font-weight: bold;
  color: #3e97cd;
}
#footer .ft_left .ft_copy {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 19px;
  color: #b7b7b7;
}
#footer .ft_right {
  float: right;
  margin: 50px 0 0;
}
#footer .ft_right .ft_site {
}
#footer .ft_right .ft_site select {
  width: 200px;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #888;
  background: transparent url(../../img/ft_site.png) no-repeat center right 15px;
  font-size: 15px;
  box-sizing: border-box;
}
#footer .ft_right .ft_site select option {
  font-size: 15px;
  color: #000;
}
#footer .ft_right .ft_site select:not(:checked) {
  color: #fff;
}
/* 20200122 - 십이지 수정(footer 수정) - 끝 */