@charset "UTF-8";
@import url('common.css');

body {min-width: 0;}

/*align*/
.C {text-align: center;}
.L {text-align: left;}
.R {text-align: right;}

.left{float:left !important; font-size: 0;}
.right{float:right !important; font-size: 0;}

.MGTB10{margin:10px 0 !important;}
.MGB5{margin-bottom:5px;}
.MGB6{margin-bottom:6px;}
.MGB10{margin-bottom:10px;}
.MGB15{margin-bottom:15px;}
.MGT6{margin-top:6px;}
.MGT60{margin-top:60px;}
.MGT175{margin-top:175px;}
.MGT20{margin-top:20px;}
.MGT25{margin-top:25px;}
.MGT30{margin-top:30px;}
.MGB30{margin-bottom:30px;}
.MGB40{margin-bottom:40px;}
.MGR10{margin-right:10px;}
.MGR4{margin-right:4px;}
.MGL8{margin-left:8px;}
.MGL4{margin-left:4px;}
.MGL10{margin-left:10px;}
.MGL20{margin-left:20px;}
.MGL70{margin-left:70px;}
.MGT5{margin-top:5px;}
.MGT10{margin-top:10px;}
.MGT40{margin-top:40px;}
.MGnone {margin: 0 !important;}
.mgNone {margin: 0 !important;}

/*width*/
.w60{width:60px;}
.w80{width:80px;}
.w70{width:70px;}
.w84{width:84px;}
.w100{width:100px;}
.w120{width:120px;}
.w125{width:125px;}
.w130{width:130px;}
.w140{width:140px;}
.w150{width:150px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w216{width:216px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w550{width:550px;}
.w600{width:600px;}
.w700{width:700px;}
.w10per{width:10%;}
.w14per{width:14%;}
.w20per{width:20%;}
.w25per{width:25%;}
.w28per{width:28%;}
.w29per{width:29%;}
.w30per{width:30%;}
.w31per{width:31%;}
.w32per{width:32%;}
.w33per{width:33%;}
.w35per{width:35%;}
.w36per{width:36%;}
.w37per{width:37%;}
.w40per{width:40%;}
.w45per{width:45%;}
.w50per{width:50%;}
.w48per{width:48%;}
.w65per{width:65%;}
.w70per{width:70%;}
.w75per{width:75%;}
.w80per{width:80%;}
.w90per{width:90%;}
.w94per{width: 89%;}

.w100per{width:100%; box-sizing: border-box;}
.w100per:after{clear:both; display:block; content:"";}

.Ast::before {content:"* "; color:#e30c0c;}

/*selectbox*/
.selectbox {display: inline-block;height: 34px;line-height: 32px;vertical-align: middle;box-sizing: border-box;border: 1px solid #dedede;padding: 0 14px;background: url('../images/common/arrow_D.svg') right 14px center no-repeat #fff;margin-right: 10px;cursor: pointer;}
.selectbox.sm {height: 30px; line-height: 28px;}
.selectbox.xs {height: 20px; line-height: 18px;}

/* input관련 */
input[type="text"], input[type="radio"], input[type="checkbox"], input[type="password"], select{vertical-align:middle;}
input[type="text"], input[type="password"]{height:30px; line-height:30px; padding:6px 10px;  border:1px solid #dedede; box-sizing:border-box;}
input[type="text"].readonly {background-color: #f8f8f8;}

input[type="radio"]:not(:first-child) {margin-left: 10px;}
input[type="radio"]+label {margin-left: 4px;}

input[type="checkbox"]:not(:first-child) {margin-left: 10px;}
input[type="checkbox"]:checked+label {color: #243674;}
input[type="checkbox"]+label {margin-left: 4px;}

input[type="file"]{height:30px; line-height:30px; padding:2px 0 0 5px; border:1px solid #dedede;}

input.calendar{background:url(../images/board/icon_calendar.png) no-repeat right 10px center;}

/*button*/
.btn {display: inline-block; vertical-align: middle; box-sizing: border-box; border-radius: 5px;}
/*button small*/
.btn.sm {height: 28px; padding: 0 10px;}
.btn.sm span {font-size: 13px; line-height: 28px; font-weight: 400;}
/*button middle*/
.btn.md {height: 30px; padding: 0 14px;}
.btn.md span {line-height: 30px; font-weight: 400;}
/*button large*/
.btn.lg {height: 40px;  padding: 0 16px;}
.btn.lg span {line-height: 40px; font-size: 15px; font-weight: 400;}

.btn.blue {background-color: #243674;}
.btn.blue span {color: #fff;/* padding: 0 10px; */}
.btn.green {background-color: #2a8478;}
.btn.green span {color: #fff;}
.btn.lightgray {background-color:#bfbfbf;}
.btn.lightgray span {color: #fff;}
.btn.white {background-color: #fff; border: 1px solid #e4e4e4;}
.btn.orange {background-color: #fdb741;}
.btn.orange span {color: #fff;}
.btn.skyblue {background-color: #0671B7;}
.btn.skyblue span {color: #fff;}
.btn.darkgray {background-color: #636363;}
.btn.darkgray span {color: #fff;}

/*font color*/
.blue {color: #2c4b8b; font-weight: 700;}
.green {color: #2a8478; font-weight: 700;}
.red {color: #e30c0c; font-weight: 700;}
.gray {color: #636363; font-weight: 700;}
.BB {font-weight: 700;}

/*topArea*/
.topArea {height:100%; background-color: #f9f9f9;  padding: 10px 14px; margin-bottom: 40px;}
.topArea::after {content: ""; clear: both; display: block;}
.topArea fieldset {display: inline-block; font-size: 0;}
.searchInput {display: inline-block; vertical-align: middle; font-size: 0;}
.topArea fieldset input[type="text"] {height:34px; line-height:34px; padding:6px 10px;  border:1px solid #dedede; box-sizing:border-box;}
.topArea fieldset .btn.search {width: 34px;height: 34px;background: url('../images/board/icon_search.gif') center center no-repeat #fff; box-sizing: border-box;border: 1px solid #dedede;border-radius:7px;font-size: 0; margin-left: 10px;}
.btn.search {width: 34px;height: 34px;background: url('../images/board/icon_search.gif') center center no-repeat #fff; box-sizing: border-box;border: 1px solid #dedede; font-size: 0; margin-left: 10px;}

.topArea h2 {font-size: 24px;}
.topBtnArea {margin-bottom: 40px;}

.sb-name {vertical-align: middle; line-height: 32px;}

/*table*/
table {width: 100%; border-top: 2px solid #243674;}
table th, table td {height: 40px;box-sizing: border-box;border-bottom: 1px solid #D1D5E2;border-right: 1px solid #D1D5E2;vertical-align: middle;padding: 5px 14px;}
.Btit{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;max-width: 86%;}
table td{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;max-width: 100%;}
table th:last-child, table td:last-child {border-right: 0;}
table th {font-size: 16px; background-color: #E8ECFB; font-weight: 500;}
table td.tit a {display: inline-block; vertical-align: middle; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%;}
table td.new a::before {content: "N"; display: inline-block; width: 18px; height: 18px; background-color: #FFCB3D; border-radius: 50%; vertical-align: middle; text-align: center; line-height: 18px; font-size: 10px; font-weight: 900; color: #fff; margin-right: 5px;}
table td.lightgray {color: #bfbfbf;}
table td a.file:hover {text-decoration: underline;}
table.th::after {content: ""; clear: both; display: block;}
table.td::after {content: ""; clear: both; display: block;}
table .inlineblock {display: inline-block;}
table .hv:hover {background-color: #fcf3ec; cursor: pointer;}
table .InUse:hover {font-weight: 700;}
table td a.btn.refresh {width: 30px; height: 30px; background: url(../images/board/icon_refresh.gif) center center no-repeat #fff; box-sizing: border-box; border: 1px solid #dedede; font-size: 0;}
table td a.btn.search {width: 30px; height: 30px; background: url(../images/board/icon_search.gif) center center no-repeat #fff; box-sizing: border-box; border: 1px solid #dedede; border-radius:7px; font-size: 0;}
table th a.btn.settings {width: 30px; height: 30px; background: url(../images/board/icon_settings.gif) center center no-repeat #fff; box-sizing: border-box; border: 1px solid #dedede; font-size: 0;}

a.btn.refresh {width: 30px; height: 30px; background: url(../images/board/icon_refresh.gif) center center no-repeat #fff; box-sizing: border-box; border: 1px solid #dedede; font-size: 0;}

.tabletop {background-color: #f7f0dc;}
.tabletop span {font-weight: 700;}

.ud {display: block;}
.udpo {position: relative; top: 2px;}
.upon:hover {background: url(../images/sub/up_on.png);}
.downon:hover {background: url(../images/sub/down_on.png);}

.hidden {display: none;}
/* .show:hover+.hidden {display: block;} */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 20%; /* Could be more or less, depending on screen size */                          
}

/* table nepre */
table.nepre {margin-top:40px;}
table.nepre tr td {border-right:none;}
table.nepre tr td a {color: inherit; display: inline-block; width: 100%;}
table.nepre tr td a.title {display:inline-block; max-width:70%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

/* table detail */
table tbody tr td ul ol::before {content:"· ";}
table tbody tr td.imgWrap div {
    width:200px; height:150px; display:inline-block;
    border:1px solid #dedede;
}

/* S : table comm */
.commIdx {display: inline-block; padding: 0 10px; height: 30px; line-height: 30px; background-color: #EBEDF4; color: #3D5590; font-size: 13px; font-weight: 700; margin-bottom: 15px;}

table.comm td {padding: 20px 26px;}
table.comm td::after {content: ""; clear: both; display: block;}
table.comm .btn.blue {/* float: left; */width: 8%;margin-top: 16px;min-width: 78px;display: block !important;}
.comm_input .name {font-weight: 700;}
.comm_input .comment {margin-top: 10px;}
.comm_input .date {margin-top: 5px; font-size: 12px; color: #B2B2B2;}
.commBtn {font-size: 0; margin-top: 15px;}
.commBtn .btn:first-child {margin-right: 10px;}
/* E : table comm */

/*paging*/
.paging {margin-top: 40px; text-align: center;}
.paging::after {content: ""; clear: both; display: block;}
.paging ul {display: inline-block;}
.paging li {float: left; box-sizing: border-box;}
.paging li a {display: inline-block; width: 28px; height: 28px; text-align: center; line-height: 30px; box-sizing: border-box; vertical-align: middle;}
.paging li.on a {color:#2c4b8b; font-weight:bold;}
.paging li.btn {border: 1px solid #e4e4e4; border-radius:30px; width: 30px; height: 30px; padding: 0;}
.paging li.btn a {font-size: 0;  background: center center no-repeat;}
.paging li.first {margin-right: 10px;}
.paging li.first a { background-image: url('../images/common/arrow_LL.svg');}
.paging li.prev {margin-right: 20px;}
.paging li.prev a {background-image: url('../images/common/arrow_L.svg');}
.paging li.next {margin-left: 20px;}
.paging li.next a {background-image: url('../images/common/arrow_R.svg');}
.paging li.last {margin-left: 10px;}
.paging li.last a {background-image: url('../images/common/arrow_RR.svg');}

/*listTit*/
.listTit {margin-bottom: 10px;}
.listTit::after {content: ""; clear: both; display: block;}
.listTit p {display: inline-block; vertical-align: middle;}
.listTit p span {color: #f7941d;}
.listTit .btn {float: right;}
.listTit .selectbox {margin-left: 10px;}

/* delete */
.delete{ min-height:75px; height:75px; overflow-y:scroll;overflow-x:hidden;  border:1px solid #dedede; padding:10px 0 0 20px; box-sizing:border-box; margin-top: 5px;}
.delete a{display:inline-block; width:100%; line-height:22px;}
.delete a img{padding-left:6px;}
	
/* filelist */
table td div.filelist{position:relative; min-height:75px; height:75px; overflow-y:scroll;overflow-x:hidden;  border:1px solid #dedede; margin-bottom: 5px; padding:10px 0 0 20px; }
table td div.filelist p{color:#ffcb3d; height:20px; line-height:20px;}
fieldset{position:relative;}
.btn_search{position:absolute; top:7px; right:8px; z-index:99; }
table td div.filelist select{width:130%;height:150px; border:0 none; line-height:30px; padding:0;}

/* textarea */
textarea{width:100%; height:100px; margin:10px 0; padding:10px; border: 1px solid #e4e4e4;}

/*tableTit*/
.tableTit {font-size: 18px; line-height: 30px; margin-bottom: 16px;}
.tableTit.plus {background: url('../images/board/icon_notice.png') center left no-repeat; padding-left: 40px;}
.tableTit a span {font-weight: 400;}
.tableTit.plus span {font-weight: 700; font-size: 18px;}
.tableTit .btnArea {display: inline-block; width:100%; vertical-align: middle; float: right;}
.tableTit .btnArea a span {font-weight: 400;}

.btnArea {display: inline-block; width:100%; vertical-align: middle;}
.tableTit .btnArea a span {font-weight: 400;}

/*file btn wrap*/
.fileBtnWrap {display: inline-block; margin-left: 10px; vertical-align: top;}

/*processArea*/
.processArea ol::after {content: ""; clear: both; display: inline-block;}
.processArea ol li {float: left; width: 220px; height: 40px; line-height: 40px; font-size: 16px; text-align: center; color: #231F20; background-color: #F9F9F9; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.processArea ol li.on {background-color: #78787b; color: #fff; font-weight: 700;}

.op0 {opacity: 0;}

.attach select {box-sizing: border-box; border: 1px solid #e4e4e4; background-color: #fff; width: 100%; padding: 10px;}

/*회원가입*/
.desc {font-size: 16px; margin-bottom: 30px;}
.joinDesc p {box-sizing: border-box; height: 142px;  padding: 10px 20px; border: 1px solid #D1D5E2;}
.joinDesc .agree span {vertical-align: middle;}



.find {content: ""; clear: both; display: inline-block; vertical-align: middle;}
.find li {float: left;}
.find li:first-child::after {content: ""; display: inline-block; width: 1px; height: 12px; background-color: #231f20; vertical-align: middle; margin: 0 8px;}

h2 {color: #243674; font-size: 20px; margin-bottom: 10px;}
h2 span {color: #d32b2b; font-size: 20px; margin-bottom: 10px;}

.half {width: 45%;}
.half65 {width: 58%;}
.half30 {width: 40%;}

div.left {float: left; box-sizing: border-box;}
div.right {float: right; box-sizing: border-box;}

div.txtWrap {background:#f7f8fc; padding:20px; line-height:1.6; box-sizing: border-box; font-size:14px; margin-bottom:30px; /*width:100%;*/ border-radius:6px;}
.content {padding: 20px;}
.content {padding: 20px;}

/*period*/
.period { display: none; float: right; /*width: 52%;*/ background-color: #f9f9f9; height:100%; }
.period.on {display: block;}

/*제품등록/수정*/
.product {text-overflow: inherit; white-space: normal;}
.product div {display: inline-block; width: 260px; height: 30px; vertical-align: middle;}

/* 위아래버튼 */
.Btit{float:left; font-size: 16px; font-weight: 500;}
.BbtnArea{float:right; position:relative; width:14%; margin:0 auto;}
.BbtnArea a.up{position:absolute; top:-6px;}
.BbtnArea a.down{position:absolute; bottom:-27px;}
.BbtnArea a.up img:hover{background: url(../images/sub/up_on.png) no-repeat center center; box-sizing:border-box;}
.BbtnArea a.down img:hover{background: url(../images/sub/down_on.png) no-repeat center center; box-sizing:border-box;}

/* 마우스 클릭하고있을때 */
a.overbtn:active{background:#f7f0dc !important;}

a.overbtn:focus{background:#f7f0dc !important;}

/* 마우스 클릭하고있을때 */
table.td:active{background:#f7f0dc !important;}


.translator{padding:2px 0 0 5px;border:1px solid #dedede;box-sizing:border-box;display: block;margin: 0;}

/*210406 김은서 추가*/
.license_list .tableTit::after {content: ""; clear: both; display: block;}
.license_list fieldset {float: right;}
/*.license_list .list_wrap {max-height: 330px; overflow-y: auto;}*/


/*주요 고객사 현황*/
table tr.on {background: #f7f0dc;}

/*210414 김은서 추가*/
.table_th {/*padding-right: 10px;*/}
.table_tb {overflow-y: auto;}
.table_tb table {border-top: none;}
/*20220120 소현진 추가*/
.mCSB_inside > .mCSB_container {margin-right: 0 !important;}

.license_list .table_tb {max-height: 256px;}
.license_list .tableTit {box-sizing: border-box; padding-right: 10px;}

#ui-datepicker-div table td, #ui-datepicker-div table th {
	height: auto;
}
#ui-datepicker-div table th {
	padding: 5px 14px;
}

/*210423 김은서 추가*/
.usage_list .table_tb {max-height: 660px;}
.checkout_list .table_tb {max-height: 560px;}

table td.feature {text-overflow: clip; white-space: normal;}
.feature div {display: inline-block; width: 220px; vertical-align: middle;}