@charset "utf-8";
html { height:100% }
body { font-family: 'Open Sans', 'Noto Sans KR', sans-serif; letter-spacing:-0.03em; color: #1a1a1a; background:#ebebf2; height:100%; }
div.body { min-height:calc(100% - 96px); font-size:13px; }
div.body { margin:0 auto; }
footer { font-size:11px; color:#fff; height:26px; background:#1e1e2d; display: flex; align-items: center; justify-content: center; }
section { margin:0 0 20px 0 }
div.ibox { padding:15px; box-shadow: 0 0 13px 0 rgba(82,63,105,.05); background-color: #fff; border-radius: 3px; overflow: hidden; position: relative; }
div.ibox>.i-head { position: absolute; top: 0; left: 0; width: 100%; padding: 20px 15px; background: #0077fe; display: flex; justify-content: space-between;
  align-items: center; }
div.ibox>.i-head>p { color: #fff; font-size: 22px; font-weight: 600; }
div.ibox>.i-head>p>span { color: #fff680; }
div.ibox>.i-head>p>span::before { content:' - '; }
div.ibox>.i-head>span { color: #fff; font-size: 18px; background: rgb(0 0 0 / 10%); padding: 1px 5px; }
div.ibox>.i-body { margin-top: 75px; min-height: calc(100vh - 315px); }
div.ibox>.i-body p.tit { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
div.ex-guide { padding:5px; font-size:12px; background:#f0f0f0 }
.container { width:100%; min-width:320px; max-width:1600px; padding:0; margin:0 auto; }
img { max-width: 100%; }
/* .imgareaselect-outer { display: none !important; } */
.imgareaselect-outer { width: 100% !important; height: 100% !important; }
.imgareaselect-selection { background: rgb(72 158 255 / 55%); }
.offcanvas-wrapper {
  position: relative;
  background-color: #ebebf2;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 84px);
}
.offcanvas-wrapper>div.inner { flex-grow: 1; }
.offcanvas-wrapper>div.inner>div>div.container { padding: 15px; }


/* header custom */
header { position: relative; top: 0; left: 0; width: 100%; min-height: 84px; border-bottom: 1px solid #e1e7ec; background-color: #ffffff; z-index: 9000; }
header>div.container { padding:0 15px; }
header .site-logo { max-width: 150px; display: block; }
header .site-logo>img { width: 100%; }
header .toolbar .tools .mylog { display: flex; align-items: center; }
header .toolbar .tools .mylog p { font-size: 17px; }
header .toolbar .tools .mylog p.subtxt { border-top: 2px solid #888; text-align: center; font-size: 12px; }
header .toolbar .tools .mylog .subtxt>span { font-size: 13px; font-weight: 800; }
header .toolbar .tools .mylog .bt-wrap { margin-left: 10px; }
header .toolbar .tools .mylog .bt-wrap>a { margin:0 0 0 10px; }


/* func-panel */
div.search .keyword-search button.dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; border-color: #c4b3c7; border-right: 1px dashed #d2dce5; }
div.search .keyword-search>input { vertical-align: top; float: right; border-color: #c4b3c7; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
  font-size: 14px; }
div.search ul>li.search-head, div.search ul>li.filter-head { position: relative; display: flex; align-items: center; }
div.search ul>li.search-head::before, 
div.search ul>li.filter-head::before { position: absolute; left: -45px; top: 0; bottom: 0; margin: auto; width: 38px; height: 38px; line-height: 16px; background: #eee;
  padding: 2px 2px; border-radius: 2px; border: 1px solid #e3e3e3; font-size: 13px; color: #7b5980; text-align: center; word-break: normal; }
div.search ul>li.search-head::before { content: '검색조건'; }
div.search ul>li.filter-head::before { content: '필터선택'; }
div.search ul>li.list-divider { position: relative; padding-right: 60px; }
div.search ul>li.list-divider::after { content:''; width: 1px; height: 80%; display: block; position: absolute; right: 45px; top: 0; border-right: 1px dashed #d5d5d5;
  bottom: 0; margin: auto; }
div.search .idx-list { display: flex; gap:15px; margin-left: 25px; }
div.search .idx-list>span { display: flex; align-items: center; }
div.search .idx-list>span::before { content:''; width: 12px; height: 12px; border-radius: 100%; margin-right: 2px; }
div.search .idx-list>span:nth-child(1)::before { background-color: #cdcdcd; }
div.search .idx-list>span:nth-child(2)::before { background-color: #FFD23D; }
div.search .idx-list>span:nth-child(3)::before { background-color: #030c40; }
div.search .idx-list>span:nth-child(4)::before { background-color: #243bbc; }
/* div.search .idx-list>span:nth-child(3)::before { background-color: #8c1642; } */
div.search+div.list-wrap { margin-top: 15px; }
div.search+div.list-wrap .paging-wrap { margin-top: 20px; margin-bottom: 20px; }


/* login, join, find */
.page-auth .hd-tit { padding: 20px 60px 20px;  margin-bottom: 20px; }
.page-auth .hd-tit>h2 { text-align: center; }
.page-auth .hd-tit>p { text-align: center; font-size: 18px; font-weight: 700; color: #72787d; }
.page-auth p.tit { color: #777; }
.page-auth h3 { text-align: center; font-size: 17px; border-bottom: 2px solid #999; padding-bottom: 10px; margin-bottom: 15px; }
.page-auth label { font-size: 14px; }
.page-auth .noti { font-size: 12px; color: #b17070; }
.page-auth .container { padding: 20px 60px; max-width: 540px; }
.page-auth .bt-findmy { display: inline-block; padding: 7px 5px; font-size: 14px; }
.page-auth div.agreement { margin: 20px 0; }
.page-auth div.agreement .agr-all { padding: 0 8px; background: #eee; }
.page-auth div.agreement .agr-terms { padding: 0 8px; }
.page-auth div.agreement .checkBox>span.ip { font-size: 13px; line-height: 20px; }
.page-auth div.agreement .checkBox.chk-all { width: 100%; }
.page-auth div.agreement .checkBox.chk-all>span.ip { font-size: 15px; line-height: 20px; }
.page-auth div.agreement .sub-chker { padding-left: 25px; position: relative; top: -5px; }
.page-auth div.agreement .sub-chker label { margin-right: 50px; }
.page-auth.find-account ul { padding: 0 2px; }
.page-auth.find-account ul>li { margin-bottom: 10px; font-size: 14px; word-break: keep-all; }
.page-auth.find-account ul>li:last-child { margin-bottom: 0; }
.page-auth .alert { padding: 10px 8px; margin-top: 20px; }
.page-auth .input-group.input-group-lg.email-group>select { height: 48px; font-size: 18px; }
.page-auth .foot-inf>span { background-color: #ddd; }

.page-auth.login { display: flex; align-items: center; width: 100%; height: 100vh; background: url('/images/backgrounds/main_bg.png') center center no-repeat;
  background-size: cover; }
.page-auth.login label>span.ip, .page-auth.login a, .page-auth.login p { color: #fff; text-shadow: 1px 1px 1px #000; font-weight: 600; }

/* main page */
.page-main .list-wrap table.ps-table p.date { font-weight: 500; }
.page-main .list-wrap table.ps-table p.date>span { background: #deeaed; font-size: 90%; border: 1px solid #ddd; margin-left: 5px; padding: 1px 2px; }
.page-main .list-wrap table.ps-table button.btn { background: #cdcdcd; color: #4f4f4f; font-weight: 500; min-width: 100px; }
.page-main .list-wrap table.ps-table button.btn.bt-wait { background: #FFD23D; color: #6d6035; }
.page-main .list-wrap table.ps-table button.btn.bt-mixed { background: #243bbc; color: #fff; }
.page-main .list-wrap table.ps-table button.btn.bt-fit { background: #030c40; color: #fff; }
.page-main .list-wrap table.ps-table button.btn.bt-personal { background: #8c1642; color: #fff; }
.page-main .list-wrap table.ps-table button.btn:hover { border: 1px solid rgba(0,0,0,0.15); font-weight: 600; }

/* page-edit */
.page-edit { 
  /* padding-bottom: 60px;  */
  min-height: calc(100vh - 110px);
}
.page-edit>div.container { max-width: 1200px; }
.page-edit>div.container div.ibox:last-child { margin-bottom: 60px; }
.page-edit .ip-box>* { display: inline-block; max-width: 120px; vertical-align: middle; }
.page-edit .form-control:disabled { background-color: #fdefef; cursor: no-drop; }

.prog-wrap { background: #fff; box-shadow: 0px 1px 5px rgb(0 0 0 / 30%); }
.prog-wrap>.container { max-width: 1200px; padding: 15px 15px; }
.prog-wrap ul {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.prog-wrap ul>li {
  position: relative;
  flex: 0 1 calc(33.33% - 20px);
  text-align: center;
}
.prog-wrap ul>li>span.circle {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #cdcdcd;
  display: inline-block;
  position: relative;
  z-index: 2;
}
.prog-wrap ul>li>div.bar {
  position: absolute;
  width: 100%;
  top: 15px;
  height: 3px;
  background-color: #cdcdcd;
}
.prog-wrap ul>li>p.tit { 
  background: #e0efff;
  width: fit-content;
  margin: 0 auto;
  padding: 1px 3px;
  font-size: 14px; 
  font-weight: 500;
  text-align: center;
  border-radius: 3px;
}
.prog-wrap ul>li>p.sub { font-size: 16px; font-weight: 500; }
.prog-wrap ul>li:first-child .bar,
.prog-wrap ul>li:last-child .bar { width: 50%; }
.prog-wrap ul>li:first-child .bar { right:0; }
.prog-wrap ul>li:last-child .bar { left:0; }

.prog-wrap ul>li>span.circle::after {
  content:'';
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
}
.prog-wrap ul>li.passed>span.circle { background-color: #555; }
.prog-wrap ul>li.current>span.circle { background-color: #0077fe; }
.prog-wrap ul>li.passed>span.circle::after {
  background-image: url('/images/icons/ico_check.svg');
  background-size: 62%;
}
.prog-wrap ul>li.current>span.circle::after {
  background-image: url('/images/icons/ico_process.svg');
  background-size: 80%;
  animation: rotate 2.25s linear infinite;
}
.prog-wrap ul>li.current>p.tit {
  color: #fff;
  background: #0077fe;
  font-weight: 600;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.page-edit .piu-box>label.btn { width: 100%; margin-bottom: 20px; } 
.page-edit .piu-box .img-cont { position: relative; background: #f7f7f7; padding: 20px; text-align: center; }
.page-edit .piu-box .img-cont>img { max-height: 55vh; }
.page-edit .piu-box .img-cont label.label-imgs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.page-edit span.input-group-text { justify-content: center; }

.page-edit .ip-container { padding: 0 15px; }
.page-edit .ip-container>* { margin-bottom: 25px; }
.page-edit .ip-container>h4.stit { font-size: 20px; font-weight: 500;}
.page-edit .ip-container>h4.stit>span { margin-top: 3px; font-size: 15px; font-weight: 400; display: block; }
.page-edit.report .ip-container { padding:0; }

.page-edit.basic-ip .ip-common input[type='date'] { width: 45% !important; height: 40px; }
.page-edit.basic-ip .ip-common select { width: 30% !important; height: 40px; }
.page-edit.basic-ip .ip-wrap .ip-add { position: relative; margin-bottom: 20px; }
.page-edit.basic-ip .ip-wrap .ip-add:first-child button.bt-del { display: none; }
.page-edit.basic-ip .ip-wrap .ip-add button.bt-del { position: absolute; top: 0; right: 0; width: 55px; border:none; background: #f9eded; color: #6d3535; }

.func-panel { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; border-top:1px solid #ddd; padding: 15px 15px; z-index: 999; }
.func-panel div.row>div { display: flex; align-items: center; }
.func-panel div.row>div:nth-child(2) { justify-content: center; }
.func-panel div.row>div:last-child { justify-content: right; gap:15px; }
.func-panel .u-inf {
  text-align: center;
}
.func-panel .u-inf p:nth-child(1) { 
  display: inline-block;
  background: #eee;
  padding: 0 8px;
  font-size: 15px;
}
.func-panel .u-inf p:nth-child(2) {
  font-size: 22px;
  font-weight: 600;
}
.func-panel .u-inf p:nth-child(2)>span { font-size: 20px; font-weight: 500; }

/* .func-panel .prog {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-evenly;
}
.func-panel .prog>li {
  text-align: center;
}
.func-panel .prog::after {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  width: 50%;
  height: 2px;
  background: #eee;
}
.func-panel .prog>li>span {
  background: #eee;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 100%;
} */


.img-container {
  width: 100%;
  position: relative;
}
.imgareaselect-outer { 
  border-width: 0 !important;
  background: #000;
}