@charset "utf-8";

@media (max-width:599px) {
    :root {font-size: 12px;}
}

@media (min-width:600px) and (max-width:799px) {
    :root {font-size: 12px;}
}

@media (min-width:800px) {
    :root {font-size: 12px;}
}

/* xeicon */
@import url(/css/fonts/xeicon.otf);
@font-face {font-family: 'xeicon'; font-style: normal;font-weight: 100;src:/* url(../css/fonts/xeicon.woff2) format('woff2'),url(../css/fonts/xeicon.woff) format('woff'),*/url(../css/fonts/xeicon.otf) format('opentype');}

/* 써라운드 */
@font-face {font-family: 'Cafe24Ssurround';font-style: normal; src: url(../font/Cafe24Ssurround.ttf) format('truetype');}

/* 본고딕 */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(../font/NotoSansKR-Thin.woff2) format('woff2'),url(../font/NotoSansKR-Thin.woff) format('woff'),url(../font/NotoSansKR-Thin.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(../font/NotoSansKR-Light.woff2) format('woff2'),url(../font/NotoSansKR-Light.woff) format('woff'),url(../font/NotoSansKR-Light.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(../font/NotoSansKR-Regular.woff2) format('woff2'),url(../font/NotoSansKR-Regular.woff) format('woff'),url(../font/NotoSansKR-Regular.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(../font/NotoSansKR-Medium.woff2) format('woff2'),url(../font/NotoSansKR-Medium.woff) format('woff'),url(../font/NotoSansKR-Medium.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(../font/NotoSansKR-Bold.woff2) format('woff2'),url(../font/NotoSansKR-Bold.woff) format('woff'),url(../font/NotoSansKR-Bold.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(../font/NotoSansKR-Black.woff2) format('woff2'),url(../font/NotoSansKR-Black.woff) format('woff'),url(../font/NotoSansKR-Black.otf) format('opentype');}

* {margin: 0; padding: 0; }
html {height: 100%; position: relative;}
body {margin: 0px; height: 100%;  font-family: 'SEBANG','DAON',"Noto Sans KR", sans-serif; font-weight: 400;background: #fff; }
li {list-style: none;}
a {color: #333; text-decoration: none;}

/* root */
div {box-sizing: border-box; }

input[type=text] { height: 21px;border: 1px solid #c0d2d2; vertical-align: middle; padding: 2px 5px; box-sizing: border-box; width: 120px;color: #909090;}
input[type=number] { height: 22px;border: 1px solid #c0d2d2;vertical-align: middle;padding: 2px 5px; box-sizing: border-box; width: 120px;}
input[type=password] { height: 22px;border: 1px solid #c0d2d2;vertical-align: middle;padding: 2px 5px; box-sizing: border-box; width: 120px;}
input[type=checkbox] { height: 20px;border: #ebebeb;vertical-align: middle; zoom:1.3;}
input[type=radio] { height: 20px;border: #ebebeb;vertical-align: middle;  zoom:1.3;margin-right: 3px; margin-top: -2px;}

a:active {opacity: 0.8;}
a,button:hover {cursor: pointer;}

button:hover {cursor: pointer;}
button:active {opacity: 0.8; }
button, input, select, textarea {background-color: #fff;}
i {vertical-align: middle;}
img {vertical-align: middle;}
select { -webkit-appearance: none;-moz-appearance: none; appearance: none; background: #fff url(../images/select.png) no-repeat 95% 50%; min-width: 10px; padding: 2px 5px 2px 5px; box-sizing: border-box; min-height: 20px; margin: 0px; vertical-align: middle;border-radius: 0px; box-sizing: border-box;text-overflow: ellipsis; border: 1px solid #c0d2d2; width: 120px; color: #909090;}
select::-ms-expand { display: none; color: #909090;}
textarea {height: auto; resize: none; overflow:visible; padding: 10px; box-sizing: border-box; border: 1px solid #eee;}
section {padding: 10px; border-bottom: 1px solid #eee;}
button {border: 0;}
.text_ov {max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space : nowrap;}

a:focus {outline: none; }
button:focus {outline: none; background: none;}
button:focus {-webkit-tap-highlight-color: rgba(0,0,0,0);}


#main_wrap {display: contents;}
#main_wrap {display: contents;}

#wrap { min-height: calc(100% - 110px); padding-top: 50px;}
body.login {width: 100%; background: url(../images/main_bg2.png);background-size:  cover; background-position: center; background-repeat: no-repeat;}
body.login #wrap {width: 100%; height: 100%; padding-top: 0;}
body.main {width: 100%; background: url(../images/main_bg2.png); background-position: center;  background-size: cover 100%;}
body.main #wrap{width: 100%; height: 100%; padding-top: 0;}

#contants {width: 100%; max-width: 1200px; height: 100%; padding: 10px; margin: auto;}


/* 로그인 */
#contants.center {display: flex; flex-direction: column;}
.main_login {width: 100%; max-width: 600px; margin: auto;height: auto;}
.main_login .logo { background: url(../images/logo_w.png);background-size: 100%; background-repeat: no-repeat; background-position: bottom; width: 70%; max-width: 245px; height: 50px; margin: 0 auto; margin-bottom: 20px;}
.main_login input { width: 90%; max-width: 300px; margin: 10px auto 0px; display: block; border-radius: 4px; height: 40px; background: #e9ecf0; font-size: 12px;}
.main_login button { width: 90%; max-width: 300px; margin: 10px auto 0px; display: block; border-radius: 4px; height: 40px; background: #757aa0; color: #fff;}


/* header */
body.main .header {top: 0; left: 0; background: none; box-shadow: none;}

.header {position: fixed; width: 100%; height: 50px; background: #fff; border-bottom: 1px solid #363847; z-index: 99; top: 0; }
.header .logo {width: 60%; display: block; display: inline-block;}
.header .logo img {width: 100%; max-width: 160px; margin: 12px;; display: block;}

.header button.menu_btn {width: 50px; height: 50px; float: right; background: #363847;}
body.main .header button.menu_btn {width: 50px; height: 50px; float: right; background: #343536;}
.header button.menu_btn i {font-size: 32px; color: #fff; }


#area_b {position: fixed; width: 100%; height: 100%; top: 0;left: 0; background: rgba(0, 0, 0, 0.3); z-index: 1000; display: none;;}
#area_b.on {display: block;}
.left_menu {position: fixed; right: -200px; top: 0; width: 200px; height: 100%; background: #f5f5f5; transition: 0.4s; z-index: 1001; }
.left_menu.on {display: block;}
.left_menu .hd {width: 100%; height: 50px;}
.left_menu .close_btn {width: 50px; height: 50px; float: right; background: none;}
.left_menu .close_btn i {font-size: 32px; color: #363847}

.left_menu .box {padding: 10px 20px;border-bottom: 1px solid #363847;}
.left_menu .box.last {border-bottom: 0px solid #363847;}
.left_menu .box.last a {color: #75868f; font-size: 12px;}

.left_menu .box p { padding: 10px 0; font-weight: 500;}
.left_menu .box p.name {font-size: 24px; font-weight: 500; letter-spacing: 4px; padding: 5px 0;}
.left_menu .box p.count {font-size: 12px; color: #929292;padding: 5px 0;}

.left_menu .box.menu {height: calc(100% - 137px);overflow-y: auto; overflow-y: auto;}
.left_menu .box.menu {-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */}
.left_menu .box.menu::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/}

.left_menu .box.menu a { font-size: 15px; color: #6d6d6d;}


.left_menu .box.menu ul { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px;}
.left_menu .box.menu ul li{ padding: 5px 0; }
.left_menu .box.menu ul li a{  font-size: 12px;}

.left_menu button.log_out {font-size: 22px; background: none; color: #7a7a7a; margin-left: 5px; width: 30px; height: 34px;}
.left_menu button.log_out i{ margin-top: -6px;  font-weight: bold;}

@media (max-width:767px) {
    .header {box-shadow:  0 0 5px rgba(130, 130, 130, 0.9); border-bottom: 0px;}
}


/* main */
.main_menu {width: 70%; max-width: 280px; height: auto; margin: auto;padding: 30px 5px 0px;}
.main_menu ul.btn li {float: left; width: 50%; padding-top: 50%; position: relative;}
.main_menu ul.btn li button { position: absolute; top: 5%; left: 5%; height: 90%;width: 90%; border-radius: 10px; border: 1px solid #fff; background: none;color: #fff; font-weight: 600; letter-spacing: 0.5px;}
.main_menu ul.btn li button:active { background: rgba(255, 255, 255, 0.2);}
.main_menu ul.btn li button p { margin: 5px 0 0;}

@media (max-width:380px) {
    .main_menu {width: 70%;}
}


/* 공통 */
p.tit {background: #f4f4f4;padding: 7px; color: #363847; font-weight: 600; font-size: 16px; margin-bottom: 10px;}

/* 검색 */
.box_sel {width: 100%; padding: 10px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); background: #363847; color: #fff; margin-bottom: 10px;}
.box_sel p {line-height: 20px; display: inline-block; margin:0 5px 0 2px; }
.box_sel p i {font-size: 16px; margin-top: -1px; }
.box_sel label {line-height: 20px; display: inline-block; margin-right: 5px;}


.box_sel .full { position: relative; margin: 0px 0px 3px; width: 100%; height:24px;  display: inline-block;}
.box_sel .group {width: 100%; display: inline-block;}
.box_sel .group li {width: 33.3%; float: left; display: inline-block; padding: 2px;    min-height: 25px;}
.box_sel  button {background: #eee; float: right; width: 80px;  right: 0; height: 24px; margin: 0 2px 0 4px; color: #fff; background: #8a8a8a;}
.box_sel .group input[type=text] { margin: 0 0px; width: 100%;}
.box_sel .group select { margin: 0 0px;width: 100%; height: 21px; }

.box_sel .full .plus_btn {background: #b1b1b1; width: 60px;}
.box_sel .group .plus {display: none;}

@media (min-width:768px) {
    .box_sel .group li {width: 20%; padding: 3px;}
}

@media (max-width:320px) {
    .box_sel button { width: 60px;}
}

/* 콘텐츠 박스 */
.box_contants {width: 100%; height: auto; padding: 10px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); background: #fff; color: #363847; margin-bottom: 10px; }

.box_contants p.tit {background: none; padding: 10px 5px 0; font-weight: 500;}
.box_contants p.tit span {font-size: 12px; color: #999; margin-left: 5px;}
.box_contants p.sb_tit {background: none; padding: 10px 0px 10px; font-weight: 500; font-size: 14px; color: #6a6a6a;}
.box_contants p.sb_tit button {color: #999; font-size: 20px; float: right;margin-top: -5px;}
.box_contants p.sb_tit.line {border-bottom: 2px solid #bdbdbd; margin-bottom: 10px;}


#ceri_area {display: flex;}

table.grid { border: 1px; border-collapse: collapse; width: 100%;}
table.grid tr { border-bottom: 1px solid #363847;}
table.grid th {padding: 7px 10px; border: 0px; background: #363847; color: #fff; font-weight: 300; vertical-align: middle;}
table.grid td {padding: 7px 10px; border: 0px; vertical-align: middle;}
table.grid td:first-child {text-align: center;}


table.document { border-collapse: collapse; width: 100%; margin-bottom: 10px;}
table.document tr { border-bottom: 2px solid #363847; border-top: 2px solid #363847; line-height: 1.5}
table.document th {padding: 7px; border: 0px; vertical-align: middle; background: #f4f4f4; color: #333;}
table.document td {padding: 7px; border: 0px; vertical-align: middle; border-right: 2px solid #363847;;}
table.document td:last-child { border-right: 0px solid #363847;;}
table.document td.center {text-align: center;}
table.document td p {padding: 2px;}
table.document td p b {margin-right: 4px}

table.document1 { border-collapse: collapse; width: 100%; margin-bottom: 10px;}
table.document1 tr { border-bottom: 2px solid #cccccc; border-top: 2px solid #363847; line-height: 1.5}
table.document1 th {padding: 7px; border: 0px; vertical-align: middle; background: #f4f4f4; color: #333;}
table.document1 td {padding: 7px; border: 0px; vertical-align: middle; border-right: 2px solid #363847;;}
table.document1 td:last-child { border-right: 0px solid #363847;;}
table.document1 td.center {text-align: center;}
table.document1 td p {padding: 2px;}
table.document1 td p b {margin-right: 4px}

table.document2 { border-collapse: collapse; width: 100%; margin-bottom: 10px; border-top: 2px solid #bdbdbd; border-bottom: 2px solid #bdbdbd;}
table.document2 tr { border-bottom: 1px solid #e8e8e8;; border-top: 1px solid #e8e8e8;; line-height: 1.5}
table.document2 th {padding: 7px; border: 0px; vertical-align: middle; background: #f4f4f4; color: #333;}
table.document2 td {padding: 7px; border: 0px; vertical-align: middle; border-right: 1px solid #e8e8e8;;}
table.document2 td:last-child { border-right: 0px solid #363847;;}
table.document2 td.center {text-align: center;}
table.document2 td p {padding: 2px;}
table.document2 td p b {margin-right: 4px}

@media (min-width:500px) {
    .box_contants {padding: 10px 40px;}
}

table.document2 td .attach {  }
table.document2 td .attach_file { color: #a9a9a9; margin-left: 10px;}
table.document2 td .attach_file i {margin-top: -2px; margin-right: 2px;}


/* 모달 팝업 */
.modal_popup_bg {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); z-index: 100; display: none;}
.modal_popup {position: relative;  margin: auto;  width: 80%; height: auto; max-width: 400px; min-height: 200px; max-height: 338px; border-radius: 5px; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.54); display: flex; flex-direction: column;   overflow: hidden;}
.modal_popup .hd { padding: 10px; border-bottom: 1px solid; height: 38px; background: #d9d9d9; color: #363847; }
.modal_popup .hd .name {width: calc(100% - 40px); float: left; line-height: 18px; font-weight:600; letter-spacing: 0.3px;} 
.modal_popup .hd .close {float: right; font-size: 18px;font-weight: bold;}
.modal_popup .text_area  {flex: 1; height: calc(100% - 78px); padding: 10px;  max-height: 290px; overflow-y: auto;} 
.modal_popup .btn_area {height: 40px; padding: 6px 10px; text-align: right; }
.modal_popup .btn_area button {height: 26px; padding: 0 10px;border-radius: 5px; margin: 0 2px; }
.modal_popup .btn_area button.co { background: #363847; color: #fff;}
.modal_popup .btn_area button.gr { background: #d9d9d9;}


/* Vuetify */
#app {width: 100%; max-width: 1200px; height: 50px; position: relative;}
#app:active button {opacity: 0.8;}
#app .left_btn {position: absolute;z-index: 999; background: none; left: 20px;top: 50%; margin-top: -10px; pointer-events: none;}
#app button {animation: move1 2s infinite;} 
#app .left_btn img {transform: rotate(180deg); height: 20px;}
#app .right_btn img { height: 20px;}
#app .left_btn.none {opacity: 0.2;}
#app .right_btn {position: absolute;z-index: 999; background: none; right: 20px;top: 50%; margin-top: -10px; pointer-events: none;}
#app .right_btn.none {opacity: 0.2;}


@keyframes move1 {
    0% { transform: scale(1)}
    50% { transform: scale(0.9)}
    100% { transform: scale(1)}
}  

#inspire {width: 100%; max-width: 1200px; height: 50px; }
.row {flex: none;}
.v-application--wrap {min-height: 0;}


.ceri_area_left {}
.ceri_area_left table.grid{}
.ceri_area_left table.grid td:last-child {padding-right: 20px;}

.ceri_area {overflow-y: visible;  overflow: auto; white-space: nowrap; vertical-align: text-top; margin: 0 0px; clear: both; border-spacing: 5px; background: #fff; /*touch-action: pan-x;*/ flex: 1;}
.grid_table { width: 100%; height: auto; max-width: 1240px; margin:0 auto 50px; padding: 0px;}

.ceri_area::-webkit-scrollbar {height: 3px; opacity: 0.2; }
.ceri_area::-webkit-scrollbar-thumb {background-color: #dedede; border-radius: 2px; background-clip: padding-box; opacity: 0.2;}
.ceri_area::-webkit-scrollbar-track {background-color: #ffffff; border-radius: 2px; opacity: 0.2;}
.ceri_area::-webkit-scrollbar-track:active {background: #111;}


/* error page */
.error {padding: 30px 0;}
.error .ar_img{width: 50%; max-width: 200px; margin: 10px auto 10px; display: block;}
.error p.f14 {color: #70717d; font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 0px; text-align: center;}
.error p.f10 {color: #707070; font-size: 12px;font-weight: 400; line-height: 1.5; margin-bottom: 10px; text-align: center;}
.error .btn_area {margin: 0 auto; width: 280px; display: flex; padding: 10px 0;}
.error .btn_area button{margin: 0 auto; border: 1px solid #9c9ea8; color: #777985; width: 120px;padding: 6px;  }


/* footer */
footer {position: relative; height: 110px; bottom: 0; width: 100%; margin-top: 0px; background: #f4f4f4; padding: 20px 20px 10px;}
.foot {width: 100%; max-width: 1200px; margin: 0 auto;font-size: 12px;}
footer p {line-height: 1.4; color: #9d9d9d; font-weight: 500; letter-spacing: 0.2px}
footer a {line-height: 1.4; color: #9d9d9d; font-weight: 500; letter-spacing: 0.2px}

a#MOVE_TOP_BTN {position: fixed;right:20px;bottom: 20px;display: none;z-index: 999;background: #fff; width: 40px; height: 40px; box-sizing: border-box; line-height: 35px; text-align: center; font-size: 24px; font-weight: bold; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);}

@media (max-width:310px) {
    .foot { font-size: 10px;}
}


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/*접수일 완료일 달력 */
.theme--light.v-input{
	 height: 30px;
   	 margin-top: -12px;
}
.v-input__control{
	height: 30px;
} 
.theme--light.v-input input{
	 color: #909090;
}

.loading {position: fixed; width: 100%; height: 100%; z-index: 9999; background: rgba(0, 0, 0, 0.2);display: flex;}
.loading i {position: absolute; font-size: 30px; color: #363847; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; font-weight: 600;}

.box_sel .full p.chk {color: #a5a5a5; margin: 0px 0px 0 5px; display: inline-block; font-size: 10px;}
.box_sel .full p.chk input[type=checkbox] {margin-top: -0px;zoom:1.3; vertical-align: middle;}



/* 협정이행 관련 추가 */
.move_btn {display: flex;  align-items: center; border-bottom: 2px solid #bdbdbd; border-top: 2px solid #bdbdbd; padding: 5px 0; flex-wrap: wrap;}
.ba_move {width: 33.33%;  color: #acacac; font-weight: 500; border-radius: 5px; max-width: 400px; text-align: center; }
.ba_move a {background: #fff; color: #c4c4c4; pointer-events: none; padding: 12px; display: block;box-shadow: 0 0 5px rgba(2, 2, 2, 0.2); margin: 8px 8px;}
.ba_move.on {  font-weight: 500;}
.ba_move.on a {color: #36383c; background: #efefef; pointer-events: all; box-shadow: 0 0 5px rgba(2, 2, 2, 0.4);}
.ba_move i {font-size: 14px; margin-top: -2px; margin-right: 3px;}

@media (max-width:767px) {
    .move_btn {display: flex; flex-direction: column;}
    .ba_move {width: 100%;}
    .ba_move a { margin: 5px 0;}
}