@charset "utf-8";

* {margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif; box-sizing:border-box;}
body {min-width: 320px; user-select: none}
html,body{width:100%;height:100%;margin:0;padding:0;font-size:14px; color:#222;letter-spacing: -0.05em;-webkit-text-size-adjust: 100% ; font-weight: 500;}
html,body,div,p,ul,li,ol,dl,dt,dd,input,textarea,select,p,hr,h1,h2,h3,h4,h5{margin:0;padding:0; line-height: 1.5em;;}
ul,li,ol,dl,dd,dt{list-style:none;}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a,a:hover,a:active,a:focus{text-decoration:none;color:#333;}
a, a::after, a::before {transition: all 0.2s; -webkit-transition: all 0.2s;}
caption, legend, fieldset label {width:1px;height:1px;overflow:hidden;display:none}
table{margin:0px;border-collapse:collapse;-ms-word-break: keep-all;word-break: keep-all;}
td,th,p,span {letter-spacing: -0.05em;}/*-ms-word-break: keep-all;word-break: keep-all;*/
.hidden{position: absolute; left:-9999px;}
.overflow{overflow:hidden}
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
input, button, select, textarea {outline: none;}
mark {background: none;}

select,
input[type="text"],
input[type="file"],
input[type="number"],
input[type="password"],
textarea {width: 100%; border: 1px solid #ddd; padding: 1em; transition: all 0.2s; -webkit-transition: all 0.2s; font-weight: 400; background: #fff}
select:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
textarea:focus {border: 1px solid #48a0fa;}
input[type="checkbox"] {vertical-align: top; opacity: 0; width: 0; max-width: 0; height: 0; line-height: 0; font-size: 1px; position: absolute;}
input[type="checkbox"]:checked + label::before {background:#3e97eb; border: 1px solid #3e97eb;}
input[type="checkbox"]:checked + label::after {content: '';}
input[type="checkbox"] + label {content: none; font-size: 14px;}
input[type="checkbox"] + label {position: relative; display: inline-block; padding:3px 0px 2px 27px;}
input[type="checkbox"] + label::before, input[type="checkbox"] + label::after {position: absolute; display: inline-block; vertical-align: top; left:0; top:0; background:#fff;}
input[type="checkbox"] + label::before {border: 1px solid #ddd; border-radius: 3px; content: ''; width: 18px; height: 18px; transition: all 0.2s; -webkit-transition: all 0.2s;}
input[type="checkbox"] + label::after { width: 20px; height: 20px;  background: url("../images/resources/check.png") no-repeat 2px -1px; }
/*{transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 8px; height: 8px; top: 49%; left: 6px;}*/

input[type="radio"] {vertical-align: top; opacity: 0; width: 0; max-width: 0; height: 0; line-height: 0; font-size: 1px; position: absolute;}
input[type="radio"]:checked + label::before {background: #fff;border: 5px solid #426ce3;width: 7px !important;height: 7px !important;}
input[type="radio"]:checked + label::after {content: '';}
input[type="radio"] + label {content: none; font-size: 14px;}
input[type="radio"] + label {position: relative; display: inline-block; padding:3px 0px 1px 27px;}
input[type="radio"] + label::before, input[type="radio"] + label::after {position: absolute; display: inline-block; vertical-align: top; left:0; top:0; background:#fff;}
input[type="radio"] + label::before {border: 1px solid #ddd; content: ''; width: 18px; height: 18px; transition: all 0.2s; -webkit-transition: all 0.2s; border-radius: 10px;}
input[type="radio"] + label::after {transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 8px; height: 8px; top: 50%; left: 6px; border-radius: 10px;}

.float_l {float: left; display: block;}
.float_r {float: right}
.of_hidden{overflow: hidden}

.mt_10 {margin-top: 10px;}
.mb_15 {margin-bottom: 15px;}
/* width */
.wd_10 {width: 10%;}
.wd_15 {width: 15%;}
.wd_20 {width: 20%;}
.wd_25 {width: 25%;}
.wd_30 {width: 30%;}
.wd_40 {width: 40%;}
.wd_70 {width: 70%;}
.wd_85 {width: 85%;}
.wd_100 {width: 100%;}

/* font-weight */
.font_w100 {font-weight: 100;}
.font_w500 {font-weight: 500;}
.font_w600 {font-weight: 600;}
.font_w700 {font-weight: 700;}

/* icon */
.ion-category {background: url("../images/resources/ico_cate.gif") no-repeat 0 1px; display: inline-block; width: 13px; height: 14px; background-size: 13px;}
.ion-siren {background-image: url("../images/resources/ico_siren.png");background-repeat: no-repeat; background-size: cover; display: inline-block; width: 15px; height: 16px; margin-top: -2px}
a:hover .ion-siren ,a.on .ion-siren{background-image: url("../images/resources/ico_siren_over.png");}
.ion-pen {background: url("../images/resources/ico_pencile.png") no-repeat bottom; display: inline-block;width: 12px; height: 19px;}

/* font_color */
.pp {color: #3579f4;}
.necessary::after {content: '*'; padding-left: 3px; color:#fa6767;}

/* paging*/
.paging {margin-top: 30px; text-align: center;}
.paging a {display: inline-block; min-width: 45px; height: 45px; text-align: center; border: 1px solid #ddd; color:#adadad; padding: 12px; transition: all 0.2s; -webkit-transition: all 0.2s;}
.paging a:hover, .paging a.on {border: 1px solid #7026f3; background:#7026f3; color:#fff;}
.paging .front, .paging .back {padding: 16px;}
.paging .front, .paging .prev, .paging .next, .paging .back {font-size: 0; vertical-align: bottom;}
.paging .front i, .paging .back i {font-size: 12px;}
.paging .prev i, .paging .next i {font-size: 17px;}

/* button */
.btn_wrap { -webkit-display:flex;  display:-ms-flex;  display:flex; width: 100%; margin: 40px auto 0;}
.btn_wrap li {-webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 3px; text-align: center;}
.btn_wrap li a {display: block; border: 1px solid #222; padding: 15px; transition: all 0.2s; -webkit-transition:all 0.2s; font-weight: 500; border-radius: 3px; background:#fff; font-size: 13px;}
.btn_wrap li + li a {background:#222; color:#fff;}
.black_btn {display: block; border: 1px solid #222; padding: 10px; transition: all 0.2s; -webkit-transition:all 0.2s; font-weight: 500; border-radius: 3px; background:#222; width: 100%; margin: 0 auto; text-align: center; color:#fff; font-size: 13px;}
.etc_btn ul {overflow: hidden;}
.etc_btn ul li {float: left;}
.etc_btn a {border: 1px solid #bbb; display: inline-block; border-radius: 5px; color:#333; margin: 2px; text-align: center; background:#fff; font-size: 13px; height: 38px; padding: 12px; transition: all 0.2s; -webkit-transition: all 0.2s;}
.etc_btn a.on,
.etc_btn a.black.on
{background: #7026f3; color:#fff; border: 1px solid #7026f3;}
.etc_btn a.black {background:#111; color:#fff; width: auto; padding: 10px 12px; border: 1px solid #111;}
.etc_btn a.black i {padding-right: 6px;}
.etc_btn a.link {background:#f2c22f; border: 1px solid #f2c22f; color:#222; font-weight: 500;}
.etc_btn .fa-heart {font-size: 14px;}
.etc_btn .select i {font-size: 19px; vertical-align: middle;}
.etc_btn .select.on i {color: #f8cf53;}
.reply_btn {
  display: block; width: 35px; height: 35px;
  background:#fff url('../images/resources/ico_reply.png') no-repeat center center;
  background-size: 59%;
  font-size: 0 !important; position: absolute; bottom: 29px; right: -64px; border-radius: 50px;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, .05);
  -moz-box-shadow: -2px 2px 10px rgba(0, 0, 0, .05);
  -webkit-box-shadow: -2px 2px 10px rgba(0, 0, 0, .05);
}


/* form */
.info_form dl {width: 100%; margin-bottom: 30px;}
.info_form dt, .info_form dd {width: 100%; margin: 8px 0;}
.info_form dt {font-weight: 500; margin-top: 29px; font-size: 13px;}
.info_form .desc {font-size: 12px; color:#8f8f8f; font-weight: 400; margin-top: 7px; display: block;}
.info_form input[type="text"] {width: 100%; padding: 14px 10px; border: 1px solid #ddd; font-size: 14px; transition: all 0.2s; -webkit-transition: all 0.2s;background-color:#f6f6f6;}
.info_form input[type="text"]:focus {border: 1px solid #7026f3;}
.info_form textarea {padding: 10px; border: 1px solid #ddd; transition: all 0.2s; -webkit-transition: all 0.2s; width: 100%;}
.info_form textarea:focus {border: 1px solid #7026f3;}
.info_form .input_btn {position: relative;}
.info_form .input_btn input[type="text"] {padding-right: 130px;}
.info_form .input_btn .search_btn {position: absolute; top:0; right:0; width: 90px; background:#222; color:#fff; display: block; font-size: 13px;text-align: center; padding: 15px 0 16px; transition: all 0.2s; -webkit-transition: all 0.2s;}

.info_form input[type="checkbox"] + label {padding: 3px 0px 1px 27px;}
.select_box {width: 100%; position: relative; background: #fff;}
.select_box::after {content: '\f104';  font-family: 'Ionicons'; position: absolute; top: 15px; right: 15px; color:#727272;}
.select_box .hand {border: 1px solid #ddd; padding: 14px 10px; transition: all 0.2s; -webkit-transition: all 0.2s;display: block; font-weight: 500;}
.select_box .hand.on {border: 1px solid #48a0fa;}
.select_box .inner {position: absolute; width: 100%; background: #fff; padding: 9px 10px; border: 1px solid #48a0fa; border-top: 0; top: 35px; z-index: 12; clear: both;display: none;}
.select_box .inner.on {display: block;}
.select_box .inner p {margin: 10px 0;}
.date_box {overflow: hidden;width: 100%;}
.date_box li {float: left; position: relative; width: 47.5%;}
.date_box input[type="text"] {padding: 14px 10px; border: 1px solid #ddd; transition: all 0.2s; -webkit-transition: all 0.2s; width: 100%; background:#f0f0f0;}
.date_box input[type="text"]:focus {border: 1px solid #7026f3;}
.date_box .dash {width: 5%; text-align: center; line-height: 45px;}
.date_box .input::after {content: '\f2d1'; font-family: 'Ionicons'; position: absolute; top: 9px; right: 10px; font-size: 23px; color:#888888;}

.tb_style {width: 100%; overflow-x: auto;}
.tb_style table {width: 100%;border: 1px solid #ddd;}
.tb_style table th,
.tb_style table td {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd; padding: 15px; text-align: left; word-break: keep-all;}
.tb_style table th {font-weight: 500;}
.tb_style table thead th {font-size: 13px;}
.tb_style table tbody tr {transition: all 0.2s; -webkit-transition: all 0.2s;}
.tb_style table tbody tr:nth-child(2n) {background: #f7fafb;}
.tb_style table tbody tr:hover {background:#fcfaff;}

.input_txt {position: relative;}
.input_txt .txt {position: absolute; top: 15px; right: 20px;}

/* 정렬 */
.sort_area {margin-top: 30px; overflow: hidden;}
.sort_area .sort_type01 {float: right;}
.sort_area .sort_type01 > li {float: left; text-align: center; position: relative; margin-left: 15px; padding-left:20px;}
.sort_area .sort_type01 > li + li::before {content: ''; position: absolute; top: 15px; left: 0; display: block; width: 4px; height: 4px; background: #d4d4d4; border-radius: 10px;}
.sort_area .sort_type01 > li > a {font-size: 15px; color:#444444; display: inline-block; padding: 8px 0;}
.sort_area .sort_type01 > li  i {font-size: 30px; vertical-align: middle;  display: none; margin-right: 3px;}
.sort_area .sort_type01 > li.on > a {color:#222;}
.sort_area .sort_type01 > li.on i {display: inline-block;}
.select_type01 select {font-size: 15px; padding: 5px 10px 5px 5px; border: 1px solid #ddd;}
.select_type02 select {font-size: 14px; padding: 5px 10px 5px 5px; border: 1px solid #fff;}

/* 탭 */
.tab_area_depth01 {margin: 0 auto 10px;}
.tab_area_depth01 ul {-webkit-display:flex; display:-ms-flex; display:flex; flex-wrap: wrap; width: 100%; padding: 1px;}
.tab_area_depth01 ul li {-webkit-box-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; align-items: center; width: calc(50% - 10px);}
.tab_area_depth01 ul li:first-child {margin-left:0;}
.tab_area_depth01 ul li:last-child {margin-right: 0;}
.tab_area_depth01 ul li a {display: block; padding: 10px 5px; text-align: center; background:#fff; margin: 0.5px;}
.tab_area_depth01 ul li a:hover, .tab_area_depth01 ul li a.on {background:#f2c22f;}
.tab_area_depth02 {margin: 0 auto;}
.tab_area_depth02 ul {overflow: hidden; width: 100%; padding: 15px;}
.tab_area_depth02 ul li {float: left; padding: 0 7px;}
.tab_area_depth02 ul li a {
  display: block; background:#fff; font-size: 15px;
  font-weight: 500; color: #a2a2a2; text-align: center; padding: 15px; border-radius: 3px;
  -webkit-box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.06);
}
.tab_area_depth02 ul li a:hover,
.tab_area_depth02 ul li a.on {background:#f2c22f; color:#222;}
.my_container .tab_area_depth01 ul li a {font-size: 15px; font-weight: 500;}
.layer_popup .tab_area_depth01 ul li a {padding: 12px;}
.layer_popup .tab_area_depth01 ul li:first-child a {border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
.layer_popup .tab_area_depth01 ul li:last-child a {border-top-right-radius: 30px; border-bottom-right-radius: 30px;}

/*layer_popup*/
.layer_popup {top:0; left:0; right:0; bottom: 0; display: none;}
.layer_popup.on {display: block;}
.layer_popup .layer_box > .box_inner {width: 100%; height: 100%; overflow-y: auto;}

.popup_layer {position: fixed; width: 100%; background: #fff; z-index: 100; transition: all 0.2s; -webkit-transition: all 0.2s;}
.popup_layer .head {padding: 20px; position: relative;}
.popup_layer .head .title {font-size: 20px; position: relative; display: inline-block; padding-right: 15px;}
.popup_layer .head .title mark {position: relative; z-index: 1;}
.popup_layer .head .title::after {content: ''; position: absolute; left:0; bottom: 3px; right: 0px; height: 5px; width: 100%; background: #f7e11a;}
.popup_layer .head .close {font-size: 0; display: block; width: 30px; height: 30px; position: absolute; right: 18px; top: 18px; text-align: center;}
.popup_layer .head .close::before {content: '\f129'; font-family: 'Ionicons'; font-size: 17px; line-height: 30px;}
.popup_layer .btn_area {position: absolute; bottom:0; width: 100%; -webkit-display:flex;  display:-ms-flex;  display:flex; text-align: center;}
.popup_layer .btn_area a {-webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 10px; border: 1px solid #222; background:#fff;}
.popup_layer .btn_area .save {background:#222; color:#fff;}
.popup_layer .ctn {position: absolute; top: 64px; bottom: 0px; left:0; right:0; width: 100%; overflow: auto;}
.popup_layer .ctn .ctn_inner {width: 100%; padding: 20px;}
.form > ul > li + li {margin-top: 15px;}
.form .label {font-size: 13px; margin-bottom: 5px; color: #747474;}

/* alert */
.alert_area {position: fixed; top:0; left:0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 100; display: none;}
.alert_area.on {display: block;}
.alert_area .alert {background:#fff; width: 340px; padding: 50px 20px; border-radius: 5px; position: absolute; top: 50%; left: 50%; margin-left: -170px; margin-top: -86px;}
.alert_area .alert p {text-align: center;}
.alert_area .alert ul {overflow: hidden; width: 200px; margin: 20px auto 0;}
.alert_area .alert ul li {float: left; width: 50%;}
.alert_area .alert ul li:first-child {padding-right: 5px;}
.alert_area .alert ul li:last-child {padding-left: 5px;}
.alert_area .alert ul li a {display: block; background: #d1d1d1; text-align: center; padding: 10px; border-radius: 3px;}


/* datepicker_스타일변경 */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family:-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,"Noto Sans KR",sans-serif,"Apple Color Emoji" !important; padding: 0px 0 2px; font-size: 14px !important; vertical-align: middle;}
.ui-datepicker td span, .ui-datepicker td a {text-align: center !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {border: 1px solid #7026f3 !important; background:#7026f3 !important;}
.ui-datepicker td span, .ui-datepicker td a {padding: 5px 3px 2px !important;}

/*  */