@charset "utf-8";

/* --- font --- */
@font-face {
  font-family: 'SCD-4'; 
  /* src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); */
  src: url('../font/S-CoreDream-4Regular.woff') format('woff');
  font-weight: normal; 
  font-style: normal;
}
@font-face {
  font-family: 'SCD-5'; 
  /* src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); */
  src: url('../font/S-CoreDream-5Medium.woff') format('woff');
  font-weight: normal; 
  font-style: normal;
}
@font-face {
  font-family: 'SpoqaHanSansNeo-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard-Bold';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}


/* --- icon --- */
@font-face {
  font-family: "unifont";
  src: url('../font/fontello.eot?25674547');
  src: url('../font/fontello.eot?25674547#iefix') format('embedded-opentype'),
        url('../font/fontello.woff?25674547') format('woff'),
        url('../font/fontello.ttf?25674547') format('truetype'),
        url('../font/fontello.svg?25674547#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
.unicon {
  font-family: "unifont";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="ico-"]:before, [class*=" ico-"]:before {
  font-family: "unifont";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  /* line-height: 1em; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* - icon-list - */
.ico-uni-close:before { content: '\e80b'; } /* '' */


/* --- reset --- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
button,
fieldset, form, label, legend, select, option,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, nav, nav, section, summary,
time, mark, audio, video {
  font-family: "Pretendard-Regular", "Roboto", "Helvetica Neue", Helvetica, Sans-serif;
  margin:0;
  padding:0;
  border:0 none;
  outline:0;
  background:transparent;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}
dl, ul, ol, nav, li {list-style:none;}
img {
  border: 0;
  vertical-align: middle;
}
a:link, a:visited {
  color: #222;
  text-decoration: none;
}
a:hover {
  color: #0551db;
  text-decoration: none;
}
a:focus {outline: 0;}
button {cursor: pointer;}
input[disabled], 
input[readonly], 
input.disabled, 
input.readonly, 
fieldset[disabled],
fieldset.disabled,
select[disabled],
select.disabled,
textarea[disabled],
textarea.disabled,
.cont-box.disabled {
  background-color: #eee;
  opacity: 1;
}
textarea {resize: none;}
fieldset {border: 0;}
legend {display: none;}
select {
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
  appearance:none;
}
select::-ms-expand{display:none;}
input,
textarea {font-family: Sans-serif !important;}


/* --- body --- */
body {
  min-height: 500px;
  font: 16px "Pretendard-Regular", "Roboto", "Helvetica Neue", Helvetica, Sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
  letter-spacing: -0.025em;
  background-color: #f6f6f8;
  -webkit-font-smoothing: subpixel-antialiased;
}
.wrap {
  position: relative;
  min-height: calc(100vh - 70px);
  margin: 0 auto;
  padding-bottom: 70px;
}
::selection {
  background: rgba(30,136,227,.15);
  text-shadow: none;
}


section {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}
.content-area {
  position: relative;
  padding: 60px 0;
}


/* --- 로그인 --- */
.login-area {
  display: inline-block;
  width: 100%;
  height: 91vh;
  padding-top: 9vh;
}
.login-area-in {
  overflow: hidden;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 60px 40px 50px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 15px 15px rgba(0,0,0,.02);
}
.login-area .logo-img {
  display: block;
  text-align: center;
}
.login-area .logo-img img {
  width: 160px;
  height: 59px;
}
.login-area-in .tab-area {
  overflow: hidden;
  margin-top: 40px;
}
.login-area-in .tab-area ul li {
  float: left;
  width: 50%;
  padding-bottom: 8px;
  text-align: center;
  color: #999;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.login-area-in .tab-area ul li + li {margin-left: 0;}
.login-area-in .tab-result {margin-top: 20px;}
.login-area-in .tab-result .login-noti {
  padding: 10px 20px 10px 25px;
  line-height: 22px;
  text-indent: -12px;
  border: 1px solid rgba(255,37,58,.5);
}
.login-area-in .tab-result .inp {
  width: calc(100% - 2px);
  height: 38px;
  margin-top: 10px;
  line-height: 38px;
  font-size: inherit;
}
.login-area-in .tab-result .checkbox-area {margin-top: 20px;}
.login-area-in .tab-result .radio-area {margin-bottom: 10px;}
.login-area-in .btn-area .btn-login {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  border-radius: 50px;
  background-color: #0551db;
}
.login-area-in .btn-area .btn-login:hover {background-color: #004bd3;}
.join-find {
  overflow: hidden;
  margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid #ddd;
}
.join-find .join {float: left;}
.join-find .find {float: right;}

/* 업체 로그인 추가 */
.login-area.comp .login-area-in {padding-top: 80px;}
.login-area.comp .login-area-in .tab-result {margin-top: 30px;}
.login-area.comp .login-area-in .logo-comp {
  position: absolute;
  top: 20px;
  left: 40px;
}
.login-area.comp.bizmeka .login-area-in .logo-comp img {
  width: 115px;
  height: auto;
}
.login-area.comp .login-area-in .btn-area .btn-login {background-color: #333;}
.login-area.comp .login-area-in .btn-area .btn-login:hover {background-color: #222;}
.login-area-in .link-login {
  width: calc(100% + 80px);
  margin: 40px -40px -50px;
}
.login-area-in .link-login a {
  display: inline-block;
  width: 100%;
  height: 52px;
  text-align: center;
  line-height: 52px;
  font-size: 16px;
  color: #fff;
  background-color: #a6afc1;
}
.login-area-in .link-login a:hover {background-color: #9da6b7;}
.login-area.comp .login-area-in .tab-result .login-noti {
  margin: 50px -40px -40px;
  padding: 15px 20px 15px 35px;
  text-indent: -10px;
  line-height: 22px;
  font-size: 15px;
  color: #999;
  border: 0;
  background-color: rgba(166,175,193,.2);
}

/* 로그인 내 약관 동의 팝업 추가 */
.modal-body .agree-area {margin: 10px 0;}
.modal-body .agree-area:first-child {margin-top: 0;}
.modal-body .agree-area:last-child {margin-bottom: 0;}
.modal-body .agree-area h3 {margin-bottom: 15px;}
.modal-body .agree-area .agree-cont {
  max-height: 85px;
  padding: 20px;
}

/* - 아이디/비번찾기 - */
.find .login-area-in .tab-area ul li {width: 50%;}
.login-area-in .tab-result .btn-certify {
  position: relative;
  margin-top: 30px;
}
.login-area-in .tab-result .btn-certify::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #ddd, #ddd 3px, transparent 0, transparent 5px);
}
.login-area-in .tab-result .btn-certify span {
  display: inline-block;
  width: calc(50% - 5px);
  height: 94px;
  text-align: center;
  color: #999;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
}
.login-area-in .tab-result .btn-certify span.on,
.login-area-in .tab-result .btn-certify span.on:hover {
  color: #222;
  border: 1px solid #222;
}
.login-area-in .tab-result .btn-certify span:hover {color: #222;}
.login-area-in .tab-result .btn-certify span::before {
  display: block;
  font-family: "unifont";
  content: '\e845';
  margin-top: 8px;
  font-size: 28px;
  color: #ccc;
}
.login-area-in .tab-result .btn-certify span.on::before,
.login-area-in .tab-result .btn-certify span.on:hover::before {
  color: #222;
}
.login-area-in .tab-result .btn-certify span:hover::before {color: #222;}

/* - 회원가입 - */
.register-area .register-area-in {
  position: relative;
  width: 920px;
  margin: 0 auto;
  padding: 55px 40px 50px;
  border-radius: 0 0 20px 20px;
  background-color: #fff;
  box-shadow: 0 15px 15px rgba(0,0,0,.02);
}
.register-area .logo-img {
  display: block;
  text-align: center;
}
.register-area .logo-img img {
  width: 160px;
  height: 59px;
}
.register-area .step-box {
  margin: 30px auto;
  text-align: center;
  color: #fff;
}
.register-area .step-box-in {display: inline-block;}
.register-area .step-box-in li {
  position: relative;
  float: left;
  padding: 7px 22px;
  border-radius: 15px;
  background-color: #bbb;
}
.register-area .step-box-in li.on {
  color: #fff;
  background-color: #222;
}
.register-area .step-box-in li::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 50%;
  left: -25px;
  width: 25px;
  height: 1px;
  background-color: #bbb;
}
.register-area .step-box-in li:first-child::before {display: none;}
.register-area .step-box-in li + li {margin-left: 25px;}
.register-area .step-box-in li .step-num {
  letter-spacing: 0.05em;
  font-family: 'Pretendard-Bold';
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.register-area .step-box-in li .step-num + p {margin-top: 2px;}
.register-area .step-in {position: relative;}
.register-area .step-in::before {
  display: inline-block;
  overflow: hidden;
  font-family: "unifont";
  content: '\e87a';
  position: absolute;
  top: -125px;
  right: 0;
  height: 125px;
  font-size: 160px;
  color: #f5f5f5;
}
.register-area .step-in.fin::before {display: none;}
.agree-area {
  position: relative;
  margin: 50px 0;
}
.agree-area h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  padding-left: 15px;
  font-size: 18px;
}
.agree-area h3::before {
  position: absolute;
  top: 6px;
  left: 0;
  display: inline-block;
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #04223c;
}
.agree-area h3 span {margin-left: 5px;}
.agree-area .checkbox-area {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.agree-area .radio-area {
  width: 100%;
  margin-top: 20px;
  text-align: right;
}
.agree-area .agree-cont {
  /* white-space: pre-wrap; */
  overflow: auto;
  max-height: 160px;
  padding: 30px;
  line-height: 24px;
  border: 1px solid #ddd;
}
.agree-area .agree-cont * {font-family: 'SpoqaHanSansNeo-Regular';}
.board-area dl.op-stamp dd img {
  width: 34px;
  height: 34px;
}
.register-fin {
  margin: 70px 0 50px;
  text-align: center;
}
.register-fin img {
  width: 376px;
  height: 213px;
}
.register-fin .fin-msg p {
  line-height: 24px;
  font-size: 16px;
}
.register-fin .fin-msg .fin-msg-tt {
  margin: 30px 0 15px;
  font-size: 32px;
  letter-spacing: -0.02em;
}
.register-fin .fin-msg .fin-msg-tt,
.register-fin .fin-msg .fin-msg-tt span {
  font-family: "Pretendard-SemiBold";
}
.register-fin .btn-area {margin-top: 30px;}

/* 이용약관 / 개인정보처리방침 내용 */
.content-area-in .uni-agreement::before {
  content: '\e87d';
  font-size: 144px;
}
.content-area-in .uni-agreement h2 span {
  margin-left: 10px;
  font-size: 18px;
  color: #999;
}
.content-area-in .uni-agreement .agree-area {margin: -1px 0 0 0;}
.content-area-in .uni-agreement .agree-area .agree-cont {
  height: 600px;
  max-height: inherit;
}
.agree-area .agree-cont .previous-version {
  margin-bottom: 20px;
  font-family: 'Pretendard-Bold';
  font-size: 16px;
  color: #00318b;
}
.agree-area .agree-cont a.previous-version {
  font-family: inherit;
  font-size: inherit;
}
.agree-area .agree-cont .previous-version + h4 {margin-top: 0;}
.agree-area .agree-cont h4 {
  display: inline-block;
  margin: 40px 0 10px;
  padding-bottom: 5px;
  font-family: 'Pretendard-Bold';
  font-size: 16px;
  border-bottom: 1px solid #999;
}
.agree-area .agree-cont h4:first-child {margin-top: 0;}
.agree-area .agree-cont > p + p {margin-top: 10px;}
.agree-area .agree-cont > p.end-line {margin-top: 40px;}
.agree-area .agree-cont dl dt,
.agree-area .agree-cont dl.indent dd {
  padding-left: 20px;
  text-indent: -19px;
}
.agree-area .agree-cont dl .no-indent {
  padding-left: 0 !important;
  text-indent: 0 !important;
}
.agree-area .agree-cont .in-dash,
.agree-area .agree-cont dl .in-dash {
  padding-left: 18px;
  text-indent: -10px;
}
.agree-area .agree-cont dt {
  margin: 15px 0 5px;
  font-family: 'Pretendard-Bold';
  color: #555;
}
.agree-area .agree-cont.privacy h4 + dl dt {margin-top: 0;}
.agree-area .agree-cont dd {color: #555;}
.agree-area .agree-cont dl.indent .no-indent {
  padding-left: inherit;
  text-indent: inherit;
}
.agree-area .agree-cont dl .none {display: none;}
.agree-area .agree-cont dl dd + dd {margin-top: 10px;}
.agree-area .agree-cont dl.indent dd p {
  margin-top: 5px;
  padding-left: 35px;
}
.agree-area .agree-cont dl.indent dd p span {
  display: block;
  padding-left: 18px;
}

/* 로그인/회원가입 footer */
.login-area .footer .footer-menu ul,
.register-area .footer .footer-menu ul {
  display: inline-block;
  width: 100%;
}
.login-area .footer .footer-menu ul:first-child li,
.register-area .footer .footer-menu ul:first-child li {
  position: relative;
  float: left;
}
.login-area .footer,
.register-area .footer {
  min-width: inherit;
  margin: 0 auto;
  line-height: 26px;
  background-color: transparent;
}
.login-area .footer {width: 380px;}
.register-area .footer {width: 1000px;}
.login-area .footer *,
.register-area .footer * {
  font-family: 'Pretendard-Regular';
  font-size: 14px;
  color: #777;
}
.login-area .footer .footer-menu,
.register-area .footer .footer-menu {
  padding: 25px 0 10px;
}
.login-area .footer .footer-menu ul li:first-child {margin-left: 40px;}
.register-area .footer .footer-menu ul li:first-child {margin-left: 320px;}
.login-area .footer .footer-menu ul li + li,
.register-area .footer .footer-menu ul li + li {
  margin-left: 24px;
}
.login-area .footer .footer-menu ul li + li::before,
.register-area .footer .footer-menu ul li + li::before {
  position: absolute;
  top: 6px;
  left: -12px;
  display: inline-block;
  width: 1px;
  height: 13px;
  content: '';
  background-color: #bbb;
}
.login-area .footer .footer-menu ul li:last-child,
.register-area .footer .footer-menu ul li:last-child {
  width: 100%;
  margin-left: 0;
  text-align: center;
}
.login-area .footer .footer-menu ul li:last-child::before,
.register-area .footer .footer-menu ul li:last-child::before {
  display: none;
}
.login-area .footer .footer-menu ul li a,
.register-area .footer .footer-menu ul li a {
  color: #777;
}
.login-area .footer .footer-menu ul li .copyright,
.register-area .footer .footer-menu ul li .copyright {
  color: #bbb;
}


/* --- 기본 테이블 --- */
.tbl-area {margin-top: 20px;}
.tbl-area table {border-top: 1px solid #999;}
.tbl-area.align-c table th,
.tbl-area.align-c table td {
  vertical-align: inherit;
  text-align: center;
}
.tbl-area table th,
.tbl-area table td {
  /* height: 48px; */
  padding: 5px 10px;
  vertical-align: top;
  text-indent: 0;
  font-weight: normal;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.tbl-area table th:last-child,
.tbl-area table td:last-child {
  border-right: 0;
}
.tbl-area table th.bo-r,
.tbl-area table td.bo-r {
  border-right: 1px solid #eee;
}
.tbl-area table th {
  text-align: center;  
  background-color: #fcfcfc;
}
.tbl-area table td {
  /* padding-left: 10px; */
  color: #555;
}
.tbl-area table th.empty,
.tbl-area table td.empty {
  background-image: linear-gradient(to top left,white 50%,#eee,white 51%);
}
.tbl-basic + .tbl-basic {margin-top: 20px;}
.tbl-basic .tbl-area:first-child {margin-top: 0;}
.tbl-basic .tbl-area table th,
.tbl-basic .tbl-area table td {
  height: 48px;
  padding: 0 8px;
  vertical-align: inherit;
  box-sizing: border-box;
}
.tbl-center .tbl-area table th,
.tbl-center .tbl-area table td {
  text-align: center;
}
.tbl-th-left .tbl-area table th {
  padding-left: 30px;
  text-align: left;
}


/* --- tab --- */
/* tab 1 */
.tab-area.tab-01 ul li,
.tab-area.tab-01 ul li a {
  display: inline-block;
  font-size: 17px;
  color: #999;
  cursor: pointer;
}
.tab-area.tab-01 ul li.on {
  padding-bottom: 7px;
  color: #222;
  border-bottom: 2px solid #222;
}
.tab-area.tab-01 ul li.on a,
.tab-area.tab-01 ul li:hover,
.tab-area.tab-01 ul li:hover a {
  color: #222;
}


/* --- btn --- */
/* - 기본효과 - */
.btn-hover {position: relative;}
.btn-hover::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(255,255,255,.15);
  opacity: 0;
  -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
  transition: opacity 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
}
.btn-hover:hover::after {opacity: 1;}
.btn-area {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.btn-area::after {
  display: block;
  content: '';
  clear: both;
}
.btn-area.right {position: absolute;top: 0;right: 0;}
.btn-area button + button {margin-left: 10px;}
.btn-fl-left {float: left;}
.btn-fl-right {float: right;}
.btn-fl-left *,
.btn-fl-right * {vertical-align: middle;}
.btn-center {display: inline-block;}
.btn-po-left {position: absolute;top: 0;left: 0;}
.btn-po-right {position: absolute;top: 0;right: 0;}

/* size */
.btn-s {
  height: 34px;
  padding: 0 20px;
  font-family: "Pretendard-Regular";
  line-height: 34px;
  font-size: 15px;
  color: #fff;
  border-radius: 34px;
}
.modal .btn-s {
  height: 31px;
  padding: 0 18px;
  line-height: 31px;
  font-size: 16px;
}
.btn-m {
  height: 38px;
  padding: 0 35px;
  font-family: "Pretendard-Regular";
  line-height: 38px;
  font-size: 16px;
  color: #fff;
  border-radius: 38px;
}
.btn-tbl {
  display: inline-block;
  height: 34px;
  padding: 1px 12px 0;
  /* font-size: 14px; */
  line-height: 32px;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 32px;
  box-sizing: border-box;
}

/* color */
.btn-red {
  color: #fff;
  background-color: #ff253a;
  border: 1px solid #ff253a;
}
.btn-red:hover {
  background-color: #f22337;
  border: 1px solid #f22337;
}
.btn-333 {
  color: #fff;
  background-color: #333;
  border: 1px solid #333;
}
.btn-333:hover {
  color: #fff;
  background-color: #222;
  border: 1px solid #222;
}
.btn-555 {
  color: #fff;
  background-color: #555;
  border: 1px solid #555;
}
.btn-555:hover {
  color: #fff;
  background-color: #444;
  border: 1px solid #444;
}
.btn-999 {
  color: #fff;
  background-color: #999;
  border: 1px solid #999;
}
.btn-999:hover {
  color: #fff;
  background-color: #888;
  border: 1px solid #888;
}
.btn-red-line {
  color: #ff253a;
  border: 1px solid #ff253a;
}
.btn-red-line:hover {
  color: #f22337;
  border: 1px solid #f22337;
}
.btn-555-line {
  color: #555;
  border: 1px solid #555;
}
.btn-555-line:hover {
  color: #222;
  border: 1px solid #222;
}
.inp-area .inp + i {
  width: 34px;
  height: 34px;
  margin-top: -4px;
  text-align: center;
  line-height: 34px;
  font-size: 22px;
  color: #fff;
  background-color: #999;
  cursor: pointer;
  border-radius: 34px;
}
.inp-area .inp + i:hover {background-color: #555;}


/* --- form --- */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder {color: #aaa;}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border: 1px solid rgba(34,34,34,.5);
}
input.error,
select.error,
textarea.error,
input.error:focus,
select.error:focus,
textarea.error:focus {
  color: #ff253a;
  border: 1px solid #ff253a;
  background-color: rgba(255,37,58,.05);
}
.inp-area,
.slt-area {
  display: inline-block;
  position: relative;
}
.inp,
.slt {
  font-family: "Pretendard-Regular";
  height: 32px;
  padding: 0 8px;
  line-height: 32px;
  font-size: 14px;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;

  /* border-box 수정 */
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
}
.slt {
  position: relative;
  padding: 0 30px 0 8px;
  z-index: 20;
}
.slt + i {
  position: absolute;
  top: calc(50% - 8px);
  right: 8px;
  color: #222;
  z-index: 20;
  pointer-events: none;
}

/* checkbox */
.checkbox-area {
  display: inline-block;
  margin: 0 8px 0 -10px;
}
.checkbox-area * {
  float: left;
  margin-left: 10px;
}
.checkbox-area::after {
  display: block;
  content: '';
  clear: both;
}
input[type=checkbox] { 
  opacity: 0; 
  position: absolute; 
  width: 16px; 
  height: 16px; 
}
input[type=checkbox] + .check-label {
  position: relative; 
  height: 16px;
  padding-left: 22px;
  line-height: 18px;
  cursor: pointer;
}
input[type=checkbox] + .check-label::before, 
input[type=checkbox] + .check-label::after,
input[type=checkbox]:checked + .check-label::before, 
input[type=checkbox]:checked + .check-label::after {
  content: '';
  left: 0;
  position: absolute;
}
input[type=checkbox] + .check-label::before,
input[type=checkbox]:checked + .check-label::before {
  top: 0;
  left: 0;
  width: 4px;
  height: 10px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background-color: transparent;
  z-index: 10;
  transform: rotate(39deg);
  -webkit-transform: rotateZ(39deg);
  transform: rotateZ(39deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.checkbox-area.check-w-line input[type=checkbox] + .check-label::before {border-color: transparent;}
.checkbox-area.check-w-line input[type=checkbox]:checked + .check-label::before {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
input[type=checkbox] + .check-label::after {
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background-color: #ddd;
  z-index: 0;
}
.checkbox-area.check-red input[type=checkbox] + .check-label::after {
  border: 1px solid #999;
  border-radius: 0;
  background-color: #fff;
}
.checkbox-area.check-w-line input[type=checkbox] + .check-label::after {
  border: 1px solid #999;
  border-radius: 0;
  background-color: transparent;
}
input[type=checkbox]:checked + .check-label::after {
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #222;
  border-radius: 16px;
  background-color: #222;
  z-index: 0;
}
.checkbox-area.check-red input[type=checkbox]:checked + .check-label::after {
  border: 1px solid #ff253a;
  background-color: #ff253a;
}
input[type=checkbox] + .check-label.disabled::before, 
input[type=checkbox] + .check-label.readonly::before,
input[type=checkbox] + .check-label.disabled::after, 
input[type=checkbox] + .check-label.readonly::after {
  border: 1px solid transparent;
  background-color: #eee;
}
input[type=checkbox]:checked + .check-label.disabled::before, 
input[type=checkbox]:checked + .check-label.readonly::before {
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
input[type=checkbox]:checked + .check-label.disabled::after, 
input[type=checkbox]:checked + .check-label.readonly::after {
  border: 1px solid transparent;
  background-color: #eee;
}

/* radio */
.radio-area {
  display: inline-block;
  margin-right: 8px;
}
.radio-area .radio-label {margin-right: 10px;}
.radio-area .radio-label:last-child {margin-right: 0;}
input[type=radio] { 
  opacity: 0; 
  position: absolute;
}
input[type=radio] + .radio-label {
  display: inline-block;
  position: relative;
  padding-left: 22px;
  line-height: 18px;
  cursor: pointer;
}
input[type=radio]:checked + .radio-label::before, 
input[type=radio]:checked + .radio-label::after {
  content: '';
  top: 0;
  left: 0;
  position: absolute;
}
input[type=radio]:checked + .radio-label::before {background-color: transparent;}
input[type=radio]:checked + .radio-label::after {
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #222;
  background-color: #222;
  z-index: 0;
}
input[type=radio] + .radio-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  z-index: 0;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 50%;
}
input[type=radio] + .radio-label.disabled::before, 
input[type=radio] + .radio-label.readonly::before,
input[type=radio] + .radio-label.disabled::after, 
input[type=radio] + .radio-label.readonly::after {
  background-color: #eee;
}
input[type=radio]:checked + .radio-label.disabled::before, 
input[type=radio]:checked + .radio-label.readonly::before {
  border-color: #eee;
  background-color: #eee;
}
input[type=radio]:checked + .radio-label.disabled::after, 
input[type=radio]:checked + .radio-label.readonly::after {
  border: 1px solid #bbb;
  background-color: #bbb;
}


/* --- etc --- */
/* - 효과 - */
@-webkit-keyframes opacity {
  0% {opacity: 0;} 
  100% {opacity: 1;}
} 
@keyframes opacity {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}
.opacity {
  -webkit-animation-name: opacity;
  animation-name: opacity;
}
@-webkit-keyframes fadeInR {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
} 
@keyframes fadeInR {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInR {
  -webkit-animation-name: fadeInR;
  animation-name: fadeInR;
}
@-webkit-keyframes widthLeft {
  0% {
    opacity: 1;
    width: 0;
  } 
  100% {
    opacity: 1;
    width: 100%;
  }
} 
@keyframes widthLeft {
  0% {
    opacity: 1;
    width: 0;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}
.widthLeft {
  -webkit-animation-name: widthLeft;
  animation-name: widthLeft;
}


/* --- etc --- */
.c1 {color: #0551db;}
.c-999 {color: #999;}
.m-hgt-600px {min-height: 600px !important;}


/* --- modal --- */
.modal .modal-dialog {
  /* overflow: hidden; */
  border-radius: 15px;
}
.modal.wid-1100 .modal-dialog {width: 1100px;}
.modal.wid-1000 .modal-dialog {width: 1000px;}
.modal.wid-900 .modal-dialog {width: 900px;}
.modal.wid-800 .modal-dialog {width: 800px;}
.modal.wid-700 .modal-dialog {width: 700px;}
.modal.wid-600 .modal-dialog {width: 600px;}
.modal.wid-500 .modal-dialog {width: 500px;}
.modal.wid-400 .modal-dialog {width: 400px;}
.modal.wid-300 .modal-dialog {width: 300px;}
.modal-content {
  overflow: hidden;
  border: 1px solid #232b33;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,.2);
}
.modal-header {
  position: relative;
  padding: 14px 30px;
  color: #fff;
  border-bottom: 0;
  background-color: #232b33;
}
.modal-title {
  margin: 0;
  font-size: 18px;
  line-height: inherit;
}
.modal-header i {
  position: absolute;
  top: 13px;
  right: 13px;
  font-size: 22px;
  cursor: pointer;
}
i.btn-close:hover::before {font-weight: bold;}
.modal-body {
  overflow: hidden;
  padding: 30px;
}
.modal-body .pagination-area {margin-top: 20px;}
.modal-footer {
  padding: 0 0 30px 0;
  text-align: center;
  border-top: 0;
}
.modal-header:after, .modal-header:before,
.modal-footer:after, .modal-footer:before {
  display: initial;
}
.modal-video .modal-content {overflow: inherit;}
.modal-video .modal-body {border-radius: 20px;}

/* - modal-in-modal - */
.modal-in {background-color: rgba(0,0,0,.2);}
.modal-in .modal-dialog {width: 600px;}
.modal-in .modal-content {border: 3px solid #222;}

/* 배경색 변경 */
.modal-open .modal-backdrop.in {
  filter: alpha(opacity=70);
  opacity: .7;
}


/* --- dialog --- */
body .ui-dialog {
	padding: 1em;
	box-shadow: 0 10px 5px rgba(85,85,85,.05), 
							0 20px 10px rgba(85,85,85,.05), 
							0 40px 30px rgba(85,85,85,.2);
}
body .ui-dialog.ui-corner-all,
body .ui-dialog .ui-corner-all {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
body .ui-dialog .ui-widget-header {
	font-weight: normal;
	color: #222;
	border: 0;
	border-bottom: 1px solid #ddd;
	background: #fff;
}
body .ui-dialog .ui-dialog-titlebar {padding: .6em;}
body .ui-dialog .ui-dialog-title {font-size: 18px;}
body .ui-dialog .ui-widget-content {
	padding: 1em .6em;
	font-size: 14px;
	border: 0;
}
body .ui-dialog button {outline: 0;}
body .ui-dialog .ui-dialog-buttonpane {
  margin: 0;
  padding: 1em 0;
}
body .ui-dialog .ui-dialog-buttonpane button:last-child {margin: 0;}
body .ui-dialog .ui-button {
	top: .6em;
	right: 0;
	border: 0;
	background: transparent;
}
body .ui-dialog .ui-dialog-buttonpane button {
	height: 29px;
	padding: 0 12px;
	line-height: 29px;
	color: #777;
	border: 1px solid transparent;
	border: 1px solid rgba(119,119,119,.3);
}
body .ui-dialog .ui-dialog-buttonpane button:hover {border: 1px solid rgba(119,119,119,1);}
body button.ui-button.ui-dialog-titlebar-close {
  top: 1.5em;
  right: 0.5em;
}
body button.ui-button.ui-dialog-titlebar-close::after {
  display: inline-block;
  font-family: "unifont";
  content: '\e80b';
  font-size: 22px;
  font-weight: 600;
  color: #222;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 1;
}
body .ui-state-default span.ui-icon-closethick {background: none;}
body .ui-dialog pre {
  font-size: 16px;
  white-space: normal;
  color: #555;
}
body .ui-dialog.ui-widget.ui-widget-content {border: 5px solid #222;}
body .ui-dialog .ui-dialog-buttonpane button:first-child,
body .ui-dialog .ui-dialog-buttonpane button.c1 {
	color: #222;
	border: 1px solid rgba(34,34,34,.3);
}
body .ui-dialog .ui-dialog-buttonpane button:first-child:hover,
body .ui-dialog .ui-dialog-buttonpane button.c1:hover {
	border: 1px solid rgba(34,34,34,1);
}
body .ui-widget-overlay {z-index: 1060 !important;}


/* 클라우드 컬러 반영 */
.register-area .step-in .btn-area .btn-red {
  background-color: #333;
  border-color: #333;
}
.register-area .step-in .btn-area .btn-red:hover {
  background-color: #222;
  border-color: #222;
}
.content-area-in .board-basic .btn-area .btn-red {
  background-color: #0551db;
  border-color: #0551db;
}
.uni-noti.qna .add-explain.tt a.uni-red {color: #0551db;}
.uni-noti.qna .btn-area.right .btn-red {
  background-color: #0551db;
  border-color: #0551db;
}
.uni-noti.qna .btn-area.right .btn-red:hover {
  background-color: #004bd3;
  border-color: #004bd3;
}
#agree-pop .modal-footer .btn-red {
  background-color: #0551db;
  border-color: #0551db;
}


/* bootstrap 상속 없애기 */
body * {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
body *:before,
body *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
body label {font-weight: inherit;}
body dt {font-weight: inherit;}
body dd, 
body dt {line-height: inherit;}
/* body h1, body h2, body h3, body h4, body h5, body h6 {line-height: inherit;} */
body .ui-datepicker {z-index: 1052 !important;}
body .btn-link:focus,
body .btn-link:hover {
  text-decoration: none;
}