@charset "UTF-8";

/*------------------------------------
date: 2022.09
developed by: smartport
developer url: smartport
------------------------------------*/

/****************
****** lnb ******
****************/
.lnb {
    width: 55px;
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.hover .lnb,
.on .lnb {
    height: 100%;
}
.lnb .menu-button {
    width: 100%;
    height: 30px;
    position: relative;
}

.lnb .menu-button:hover {
    height: 55px;
    background: #201F1F;
    transition:0.6s
}

.hover .lnb .menu-button,
.lnb .menu-button:hover {
    height: 55px;
    background: #201F1F;
}

.hover .lnb .menu-button,
.lnb .menu-button:hover .bi {
    color: #eee;
}

.on .lnb .menu-button {
    height: 55px;
    background:#201F1F;
}

.on .lnb .menu-button .bi {
    color: #eee;
}

.lnb .menu-button >span {
    width: 8px;
    height: 8px;
    display: inline-block;
    position: absolute;
    border: 1px solid #1d70ff;
    border-radius: 2px;
    transition:.3s
}
.on .lnb .menu-button >span,
.hover .lnb .menu-button >span,
.lnb .menu-button:hover >span {
    border: 1px solid #fff;
}
.lnb .menu-button >span:first-of-type {
    top: 6px;
    left: 17px;
}
.lnb .menu-button >span:nth-of-type(2) {
    top: 6px;
    left: 27px;
}
.lnb .menu-button >span:nth-of-type(3) {
    top: 16px;
    left: 17px;
}
.lnb .menu-button >span:last-of-type {
    top: 16px;
    left: 27px;
}
.lnb .depth1 {
    height: 100%;
    display: none;
    background: #201F1F;
}
.hover .lnb .depth1,
.on .lnb .depth1 {
    width:55px;
    display: block;
}
.lnb .depth1 >li {
    width:55px;
    height:55px;
    text-align:center;
}
.lnb .depth1 >li:hover,
.lnb .depth1 >li.cur {
    color: #999;
}
.lnb .depth1 >li.on >a{
    background:#2e2e2e;
    /*box-shadow: 0 0 6px #00000016*/
}
/*.lnb .depth1 >li.on >a:after{
	content: url('../images/bg_dep1_on.png');
	position:absolute;
	top:6px;
	right:-22px
}*/
/*.lnb .depth1 >li.on >a:hover {
    background:#fff
}*/
.lnb .depth1 >li >a {
    width: 55px;
    height: 55px;
    /*margin-top:10px;*/
    text-align: center;
    line-height:55px;
    position: relative;
    /*border-radius:5px;*/
}
.lnb .depth1 >li >a:hover {
    background:#2E2E2E;
}
/*부트스트랩 아이콘*/
nav.lnb .bi {
    font-size:18px;
    text-align:center;
    line-height:18px;
    color:#999;
}
nav.lnb .depth1 a:hover .bi {
    color:#eee;
}

.lnb .depth1 >li >a::before{
    content: "";
    width: 3px;
    height: 0px;
    position: absolute;
    left: 8px;
    bottom: 15px;
    background: linear-gradient(0deg, rgba(34,115,255,1) 0%, rgba(209,226,255,1) 100%);
    transition: 0.5s;
}

.lnb .depth1 >li.on >a::before{
    height: 25px;
}



.lnb .depth1 >li.on >a .bi{
    color:#eee;
    padding-left: 8px;
    transition: 0.5s;
}

.lnb .depth2 {
    width: 150px;
    height: 100%;
    position: absolute;
    top: 30px;
    left: -195px;
    background: #2E2E2E;
    /*   transition: .3s; */
    z-index: -1;
    /*border-left:1px solid #D6D6D6;
    border-right:1px solid #D6D6D6;*/
}
.lnb li.on .depth2 {
    left: 55px;
}
.lnb .depth2 .d1-tit {
    padding: 20px 10px;
    position: relative;
    color: #6BAEFB;
    font-size: 1.4rem;
    font-weight: 500;
}
.lnb .depth2 .d1-tit::after {
    content: "";
    width: 130px;
    height: 2px;
    position: absolute;
    left: 10px;
    bottom: 0;
    background: #5B5B5B;
}
.lnb .depth2 >li {
    position: relative;
    line-height:1;
    text-align:left
}
.lnb .depth2 >li.on >a {
    color: #eee;
    font-weight: 500;
}
.lnb .depth2 >li >a {
    width: 100%;
    padding: 12px 10px;
    color: #999;
}

.lnb .depth2 >li >a.new {
	background-image: url(../images/new.png);
	background-repeat: no-repeat;
	background-size: 5%;
	background-position: 92% 50%;
}
	
.lnb .depth2 .arr {
    width: 6px;
    height: 6px;
    position: absolute;
    top: 14px;
    right: 12px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    transform: rotate(45deg);
    transition: .2s;
}
.lnb .depth2 >li:hover .arr,
.lnb .depth2 >li.on .arr{
    transform: rotate(-135deg);
    border-right: 1px solid #6BAEFB;
    border-bottom: 1px solid #6BAEFB;
}
.lnb .depth2 >li:hover >a {
    color: #eee;
    font-weight: 500;
}
.lnb .depth3 {
    width: calc(100% - 20px);
    margin: 0 auto;
    display: none;
    color: #cbcbcb;
    background: #201F1F;
    border-radius: 3px;
}
.lnb .depth3 >li>a {
	width:130px;
	padding:5px;
    overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all;
}
.lnb .depth3 >li:hover >a{
    color: #6BAEFB;
    font-weight:500
}
/****************
*** main-wrap ***
****************/
.main-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.main-wrap .top-bar {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 65px;
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #eaeaef;
    z-index:5;
}
.top-bar .company-logo {
    max-height: 15px;
    margin-right: 10px;
    margin-left:auto;
}
.top-bar .company-info {
    margin-right: 10px;
}
.top-bar .user-wrap {
    padding-right: 22px;
    display: flex;
    align-items: center;
    position: relative;
}
.top-bar .user-wrap::after {
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    right: 10px;
    background: #cbcbcb;
}
.user-wrap .user-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    font-size: 0;
    background: url('../images/icon_user.png')no-repeat;
    background-size: cover;
    border-radius: 50%;
}
.user-wrap .user-name {
	padding-right: 5px;
	font-weight:500
}
.top-bar .log-btn {
    height: 20px;
    padding: 0 5px;
    color: #1D70FF;
    font-weight:500;
    border-radius: 5px;
    border: 1px solid #1D70FF;
}
.main-wrap >.content {
    width: 100%;
    height: calc(100% - 30px);
    padding:  0;
    float: right;
    transition: .2s;
}
.hover .main-wrap >.content,
.on .main-wrap >.content {
    width: calc( 100% - 55px );
}
.main-wrap >.content.on {
    width: calc( 100% - 205px );
}
.gridCont {
	padding:0 10px;
}
.gridCont.sm{
	padding:0 ;
}

/*비밀번호변경*/
ul, ol, li { list-style:none; margin:0; padding:0; }
ul.myMenu > li { 
    width:120px; 
    padding:5px 10px; 
    position:relative;
    display:inline-block;
    text-align:center;        
}
ul.myMenu > li ul.submenu { 
    position:absolute; 
    top: 30px; 
    left: 9px;
    display:none;   
}
ul.myMenu > li:hover ul.submenu { 
    display:block; 
    /*background: #eaeaef; */
    background: #dedef7;
    border-radius: 0 0 5px 5px;
}
ul.myMenu > li ul.submenu > li { 
    width: 100px; 
    height: 35px;
    display:inline-block;   
    text-align:center; 
    line-height: 35px;
}
ul.myMenu > li ul.submenu > li:hover { 
    color: #1D70FF;
    font-weight:500;
    cursor: pointer;
}
.myMenu .user-wrap .ui-icon {
	background: url(../images/arr_down.png) no-repeat;
	transform: rotate(0);
}
.myMenu .user-wrap:hover .ui-icon {
    transform: rotate(180deg);
    transition: 0.4s;
    background-position-y: -4px;
    background-position-x: -3px;
}






/****************
**** default ****
****************/
body {
/*     min-width: 1200px; **20231102 기쁨 주석처리 */
    overflow: auto;
}
body::after {
    content: "";
    display: block;
    clear: both;
}

/* 페이지 하단 버튼 공통 */
.btnWrap {
    width: 100%;
    height: auto;
    margin: 20px 0;
    display: flex;
    justify-content: center;
}
.btnWrap button {
    width: auto;
    height: 20px;
    padding: 0 5px;
    margin-right: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    background: #1d70ff;
    border-radius: 3px;
    transition: ease 0.2s;
}
.btnWrap button.unimpt {
    color: #666;
    background: #cbcbcb;
    opacity: 1;
}
.btnWrap button:hover {
    background:#30399c;
}
.btnWrap button.unimpt:hover {
    background:#999;
    color:#fff;
}
.btnWrap button:last-child {
    margin-right: 0;
}
.light .btnWrap button {
    background: var(--hubnetPoint);
}
.light .btnWrap button:hover {
    background:var(--hubnetHover);
}
/* file list */
.filLst {
	margin-top: 5px;
    margin-bottom: 5px;
}
.filLst li {
	color: #666;
	display: flex;
    margin-bottom: 2px;
}
.filLst li:hover {
	color: #1d70ff;
}
.filLst li:last-child {
	margin-bottom: 0;
}
.filLst .filBtnWrap {
	margin-left: 5px;
}
.filLst li button {
	width: 16px;
    height: 16px;  
	text-indent: -999em;
}
.filLst li button.btnDown {
	background: url('../images/ico_flDn.png')no-repeat center;
}
.filLst li button.btnDown:hover {
	background: url('../images/ico_flDn_hover.png')no-repeat center;
}
.filLst li button.btnDlt {
	background: url('../images/ico_flUp.png')no-repeat center;
}
.filLst li button.btnDlt:hover {
	background: url('../images/ico_flUp_hover.png')no-repeat center;
}
/* 
삭제예정
.filLst {
    margin: 5px 0;
}
.filLst li {
    margin-left: 5px;
}
.filLst li:first-child {
    margin-top: 0;
}
.filLst li button {
    padding-right: 5px;
    color: #999;
    font-size: 13px;
    font-weight: 300;
    position: relative;
}
.filLst li button::after {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 2px;
    right: -22px;
}
.filLst.dn li button::after {
    background: url('../images/ico_flDn.png')no-repeat;
}
.filLst.dn li button:hover::after {
    background: url('../images/ico_flDn_hover.png')no-repeat;
}
.filLst.up li button::after {
    background: url('../images/ico_flUp.png')no-repeat;
}
.filLst.up li button:hover::after {
    background: url('../images/ico_flUp_hover.png')no-repeat;
}
.filLst.dn li button:hover,
.filLst.up li button:hover {
    color: #E50019;
    background: transparent;
} */

/* 타이틀 */
.tit {
    padding-left:-10px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    transition:.2s
}
.subtit {
    padding-left: 14px;
    position: relative;
    color: #2a2a2a;
    font-size: 13px;
    font-weight: 600;
}
.fx .subtit {
    margin-bottom: 10px;
}
.subtit::before {
    content: '';
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #1d70ff;
    box-shadow:2px 2px 0 #00000030
}
.titWrap .btnAdd:hover {
    color: #333;
    background: #FFBD39;
}

/* 검색영역 */
.schWrap {
    width: 100%;
    height: auto;
    padding: 10px;
    display: inline-block;
    border-bottom:1px solid #cbcbcb;
    background:#f7f7f7
}
.schWrap ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.schWrap ul li {
    width: auto;
    height:26px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.schWrap ul li > label {
    margin-right: 5px;
    font-size: 12px;
    font-weight:400;
}
.schWrap ul li .dateTwin {
    width: auto;
}
.schWrap .rdoWrap {
    padding: 0 5px;
}
.schWrap ul li.separate {
    margin-right:30px;
    position:relative;
}
.schWrap ul li.separate:after {
    width:1px;
    height:28px;
    position:absolute;
    top:0;
    right:-15px;
    content:'';
    background:#cbcbcb;
}
.schWrap .btnWrap {
    margin:0 0 0 auto;
}
.schWrap .btnSch,
button.blue {
    width: auto;
    height: 20px;
    padding: 0 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    background: #1D70FF;
    border-radius: 3px;
    transition: ease 0.2s;
}
.schWrap .btnSch:hover,
button.blue:hover {
    color: #fff;
    background: #30399c;
}
.schWrap ul li input,
.schWrap ul li .slctBoxJq .ui-button {
    width:150px;
    height:22px;
    border: 1px solid #cbcbcb;
    border-radius: 5px;
}
.schWrap ul li.schInput {
    position:relative;
}
.schWrap ul li .schInputBtn {
    width:20px;
    height:22px;
    position:absolute;
    top:3px;
    right:15px;
    background:url('../images/ico_input_search.png')no-repeat ;
    background-size: 20px;
}
.schWrap ul li input.sm {
	width:70px
}

.schWrap > .lst-sch .btnSch {
    margin-top: 32px;
    margin-right: 0;
    margin-bottom: 0;
}
.schWrap .btnSch.thbtn {
    margin-right: 10px;
}
.schSub ul {
    width: auto;
    display: inline-block;
}
.schSub .lstBtnWrap {
    margin-top: 6px;
}
.lstBtnWrap > button.btnWrite {
    color: #fff;
    background: #E60012;
}

.schWrap.file {/*파일 업로드 팝업 내 영역*/
    width: 100%;
    height: auto;
    margin-top:10px;
    padding: 6px 10px;
    display: inline-block;
    border:1px solid #cbcbcb;
    border-radius:5px;
    background:#f7f7f7
}
.asrWrap {
    margin-top: 10px;
}
.asrWrap .subtit {
    margin-bottom: 10px;
}
/* 검색결과 */
.lstCon {
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding:0 10px;
    display:flex;
    /* align-items: center; */
    align-items: baseline;
}
.lstCon .rslt {
    font-weight: 500;
}
.lstCon .rslt > .em {
    font-size: 14px;
    font-weight: 700;
    color:#1D70FF;
}
.lstBtnWrap {
    width:fit-content;
    margin-left:auto;
}
.lstBtnWrap > button,
.inrBtn,
.btnFlSch,
button.gray {
    width: auto;
    min-width:20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 3px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 3px;
    background:#cbcbcb;
    transition: ease 0.2s;
}
.lstBtnWrap > button:hover,
.btnFlSch:hover,
button.gray:hover {
    color:#fff;
    background:#999
}

.lstBtnWrap .lstNew {
    background:#cbcbcb url('../images/tbl_new.png')no-repeat;
}
.lstBtnWrap .lstDlt {
    background:#cbcbcb url('../images/tbl_delete.png')no-repeat;
}
.lstBtnWrap .lstDown {
    background:#cbcbcb url('../images/tbl_download.png')no-repeat;
}
.lstBtnWrap .lstUp {
    background:#cbcbcb url('../images/tbl_upload.png')no-repeat;
}
.lstBtnWrap .lstNew:hover {
    background:#999 url('../images/tbl_new.png')no-repeat;
}
.lstBtnWrap .lstDlt:hover {
    background:#999 url('../images/tbl_delete.png')no-repeat;
}
.lstBtnWrap .lstDown:hover {
    background:#999 url('../images/tbl_download.png')no-repeat;
}
.lstBtnWrap .lstUp:hover {
    background:#999 url('../images/tbl_upload.png')no-repeat;
}
/* pageWrap */
.pageWrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pageWrap .prevPageBtn,
.pageWrap .nextPageBtn {
    width: 20px;
    height: 20px;
    color: #fff;
    background: #1d70ff;
    border-radius: 5px;
}
.pageWrap .prevPageBtn:hover,
.pageWrap .nextPageBtn:hover {
   background: #30399c;
}
.pageWrap .txtWrap {
    height: 25px;
    margin: 0 5px;
    padding: 0 10px;
    line-height: 25px;
    background: #efefef;
    border-radius: 5px;
}
/* tab */
.tabMenu {
	width:100%;
    margin-bottom: 20px;
}
.tabMenu .tabBtn {/*기쁨 수정*/
    display:flex;
    align-items:center;
    border-bottom:1px solid #cbcbcb
}
.tabMenu .tabBtn .btn {
	width:auto;
	height:28px;
	padding:0 10px;
    font-size: 13px;
    font-weight:500;
	border-width:1px;
    border-style: solid;
    border-color: #1D70FF #1D70FF transparent ;
    border-radius:5px 5px 0 0;
    transition: ease 0.2s;
}
.tabMenu .tabBtn .btn:hover,
.tabMenu .tabBtn .btn.on {
	color:#fff;
	background:#1D70FF;
}
.tabMenu .tabBtn .rgt {
    margin-left: auto;
}
.tabMenu .tabCont .cont {
    display: none;
}
.tabMenu .tabCont .cont.on {
    display: block;
}

/* table */
.tbWrap {
    width: 100%;
    height: auto;
    border-top: 1px solid #cbcbcb;
    border-bottom: 1px solid #cbcbcb;
}
.tbWrap table {
    width: 100%;
    height: auto;
}
.tbWrap tr:hover {
    background: #F5F8FC;
}
.tbWrap table th,
.tbWrap table td {
    /* padding: 4px; */
    height:26px;
    padding: 0 10px;
    vertical-align: middle;
}
.tbWrap table th.taL,
.tbWrap table td.taL {
    text-align: left;
}
.tbWrap table td.taL .ntcTit {
    width: 100%;
}
.tbWrap table th.taR,
.tbWrap table td.taR {
    text-align: right;
}
.tbWrap table th.taC,
.tbWrap table td.taC {
    text-align: center;
}
.tbWrap table th {
    font-weight: 500;
    background: #2e2e2e;
    color:#fff
}
.tbWrap table td {
    color: #222;
    font-weight: 300;
    text-align: center;
    word-break: break-all;
    border-bottom: 1px solid #cbcbcb;
}
.tbWrap table td a {
    text-decoration: underline;
}
.tbWrap table .tdl {
    text-align: left;
}
.tbWrap .chkWrap tr td > button {
    width: auto;
    height: 13px;
    padding: 0 10px;
    margin-left: 6px;
    color: #757B85;
    font-size: 13px;
    font-weight: 300;
    line-height: 30px;
    border-radius: 30px;
    background: #DDE1E8;
    transition: ease 0.2s;
}
.tbWrap .chkWrap tr td > button:hover {
    color: #fff;
    background: #05101C;
}
.tbWrap .chkWrap .chkBox,
.tbWrap .chkWrap .rdoBox {
    margin-right: 0;
}
.tbWrap .wrContent textarea {
    height: 200px;
}
.tbWrap .esn {
    color: #EA4335;
}
.tbWrap .content td >img {
    margin-top: 5px;
}
.tbWrap .wrTit input,
.tbWrap input.w100 {
    width: 100%;
}

/* 가로 table */
.tbWrap.vtbWrap {
    border-top:2px solid #2e2e2e;
}
.vtbWrap.tbWrap tr:hover {
    background: transparent;
}
.tbWrap.vtbWrap table th {
    background: #f5f5f5;
    color:#222
}
.vtbWrap table th,
.vtbWrap table td {
    height:26px;
    padding: 0 10px;
    text-align: left;
}
.vtbWrap table th {
    border-bottom: 1px solid #cbcbcb;
}
.vtbWrap table tr:last-child th,
.vtbWrap table tr:last-child td {
    border-bottom: 0;
}
.vtbWrap table td.taL input {
    width: 100%;
}
.vtbWrap table td.taL .input_exception,
.vtbWrap table td.taL .label_text {
    width: unset;
}
.label_text {
    margin-right:5px;
    font-weight: 300;
    vertical-align: middle;
    color:#222;
    cursor: pointer;
}
.vtbWrap table .schfilWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vtbWrap table td .btnFlSch {
    width: 60px;
}

.btnFlSch {
	margin-left: 0;
	margin-right: 3px;
}
::file-selector-button{
    display: none;
}
.vtbWrap table td.taL .iptFl {
    /*width: calc(100% - 140px);*/
    padding-left: 5px;
}
.vtbWrap .btnStr {
	width: auto;
	height: 30px;
	padding: 0 10px;
	margin-left: 10px;
	color: #757885;
	font-size: 13px;
	font-weight: 300;
	line-height: 30px;
	border-radius: 30px;
	background: #DDE1E8;
	transition: ease 0.2s;
}
.vtbWrap .btnStr:hover {
	color: #fff;
	background: #05101C;
}
.vtbWrap .val.schIco {
	background: url(../images/ico_input_search.png) no-repeat right 10px center;
}
.tb-btn-wrap {
	margin-bottom: 10px;
	display: flex;
	justify-content: flex-end;
}
.tb-btn-wrap >button {
    width: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 3px;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
    border-radius: 3px;
    background: #cbcbcb;
    transition: ease 0.2s;
}
.tb-btn-wrap >button:hover {
    color:#fff;
    background:#999
}

/* 재고 상세 */
.popCont .stockWrap {
    max-height: calc(100vh - 140px);
    overflow: auto;
}

/*C/S 총괄표*/
.content.fx {
    height:fit-content;
    display:flex;
    flex-wrap:wrap;
}
.content.fx .lstCon{
    margin: 10px 0 0 0
}
.contLft {
    width:50%;
    padding:10px;
    border-right:1px solid #cbcbcb;
    overflow:auto;
}
.contRgt {
    width:50%;
    padding:10px
}
.content.fx  .gridCont  {
    border:1px solid #cbcbcb
}
.ccInfo .tbWrap {
    min-width:820px;
    margin:0  0 15px 0;
}
.ccInfo .tbWrap.vtbWrap label {
    font-weight:500;
}
.ccStatus .gridCont {
    min-width:820px;
    height:526px;
    overflow:auto
}
.contRgt >div {
    margin-bottom:15px;
}
.contRgt  .rtnStatus {
    margin-bottom:0;
}
.contRgt  .gridCont {
    height:200px;
    overflow: auto;
}
.rtnStatus .gridCont {
    height:300px;
}

/*유니패스-수출입정보-화물통관 진행정보*/
.cusStatus .subtit {
	margin:15px 0 10px 0
}

/* 공지사항 갤러리형 */
.ntcGroup {
    width: 100%;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.ntcBox {
    width: 290px;
    min-height: 345px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
.ntcBox .ntcCont {
    padding: 20px;
}
.ntcBox > img {
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}
.ntcBox .ntcTit {
    font-size: 20px;
    font-weight: 600;
}
.ntcBox .ntcTxt {
    margin: 10px 0px 15px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
}
.ntcBox .ntcDay {
    font-size: 13px;
    font-weight: 300;
    text-align: left;
}
.ntcBox .chkBox {
    position: absolute;
    top: 20px;
    left: 10px;
}


/****************
**** login ****
****************/
.loginWrap {
    width: 100%;
    height: 100%;
    background: url('../images/login_bg.jpg')no-repeat center;
    background-size: cover;
    position: relative;
}
.wcsTitWrap {
    width: calc(100% - 600px);
    height: 100%;
    padding: 100px;
    padding-top: 260px;
    color: #fff;
}
.wcsTitWrap dl {
    padding-bottom: 50px;
    border-bottom: 1px solid #fff;
}
.wcsTitWrap dl dt {
    font-size: 12rem;
    font-weight: 600;
}
.wcsTitWrap dl dd {
    margin-top: 20px;
    font-size: 3rem;
}
.koTxt {
    margin-top: 50px;
    font-size: 6rem;
    font-weight: 600;
}
.logBox {
    width: 600px;
    height: 100%;
    padding: 0 100px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    background: #fff;
}
.logCon > h1 {
    width: 170px;
    height: 90px;
    margin: 0 auto;
    text-indent: -999em;
    background: url('../images/logo_ct.png')no-repeat center;
    background-size: 100%;
}
.logCon .wcTxt {
    margin-top: 25px;
    margin-bottom: 40px;
    color: #041F47;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
}
.logCon input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    margin-bottom: 20px;
    font-size:14px;
    background: #FBFDFF;
    border: 1px solid #CBCBCB;
    border-radius: 5px;
}
.logCon input::placeholder{
    color: #999;
    font-size: 0.9em;
    font-weight: 400;
}
.logCon input::-webkit-input-placeholder{
    color: #999;
    font-size: 0.9em;
    font-weight: 400;
}
.logCon input::-ms-input-placeholder{
    color: #999;
    font-size: 0.9em;
    font-weight: 400;
}
.logCon input::-ms-input-placeholder{
    color: #999;
    font-size: 0.9em;
    font-weight: 400;
}
.logCon input.ip {
    background: #3C3E4D url('../images/ico_id.png')no-repeat 15px center;
}
.logCon input.pw {
    background: #3C3E4D url('../images/ico_pw.png')no-repeat 15px center;
}
.invTxt {
    color: #EB1C23;
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 20px;
}
.lfwTxt {
    color: #EB1C23;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
}
.logCon .logBtn {
    height: 60px;
    color: #fff;
    font-weight: 500;
    background: #041F47;
}
.logCon .keepLogin {
    color: #222;
}
.logCon .chkBox label {
    padding-left: 29px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 36px;
    vertical-align: middle;
    cursor: pointer;
}
.logCon .chkBox>input.ipt {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
    background: none;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.logCon .chkBox:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
    display: block;
}
.logCon .chkBox:before {
    background: url('../images/check.png')no-repeat center;
}
.logCon .chkBox.on:before{
    background: url('../images/check_on.png')no-repeat center;
}

.qaWrap {
	width: 100%;
	padding: 10px 0;
}
.qaConWrap {
	height: auto;
	min-height: 100px;
	max-height: 350px;
	overflow-y: auto;
}
.qaConWrap li {
	padding: 10px;
	margin-bottom: 5px;
	display: flex;
	border-radius: 10px;
	background: #f5f5f5;
}
.qaConWrap li .usIcon {
	width: 30px;
    height: 30px;
    margin-right: 10px;
    display: block;
    text-indent: -999em;
    background: #cbcbcb url('../images/icon_user.png')no-repeat center;
    border-radius: 50%;
}
.qaConWrap li .qaCon {
	width: calc(100% - 40px);
}
.qaConWrap li .qaCon dt {
	margin-bottom: 8px;
	font-size: 1.4rem;
	font-weight: 500;
}
.qaConWrap li .qaCon dt .date {
	margin-left: 5px;
	color: #999;
	font-size: 1.2rem;
	font-weight: 300;
}
.qaConWrap li .qaCon dd {
	line-height: 1.3em;
}



/*PDA*/
.tbWrap.pdaWrap {
    border-top:1px solid #cbcbcb;
}
.vtbWrap.pdaWrap tr:hover {
    background: transparent;
}
.tbWrap.pdaWrap table th {
	height: auto;
	padding:9px 5px;
    background: #2E2E2E;
    color:#fff;
    font-size: 16px;
    text-align: center;
    font-weight: 400;
}
.pdaWrap table td {
    font-size: 18px;
    height: auto;
    padding: 5px;
    text-align: center;
    border-left: 1px solid #cbcbcb;
}
.pdaWrap table th {
    border-bottom: 1px solid #cbcbcb;
}
.pdaWrap table tr:last-child th,
.pdaWrap table tr:last-child td {
    border-bottom: 0;
}
.pdaInput{
    font-size: x-large;
}

/*ztree사용페이지css(metaverse ver)*/
.twconWrap {
    width: 100%;
    height: auto;
    display: flex;
}
.twconWrap li {
    width: calc(100% - 450px);
    margin-right: 30px;
}
.twconWrap li:last-child {
    margin-right: 0;
}
.twconWrap .treeconT {
    width: 420px;
}

/***********게시판상세페이지 내 버튼-이수연(2023-08-22)***********/
.btnInTbl{
    width: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 3px;
    background: #cbcbcb;
    transition: ease 0.2s;
}

.cntnLstBtn {
    width:fit-content;
    margin-left:auto;
    display: flex;
    justify-content: flex-end;
    min-width: 100px;
}
.cntnLstBtn > button {
    width: auto;
    min-width:20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 3px;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
    border-radius: 3px;
    background:#cbcbcb;
    transition: ease 0.2s;
}
.cntnLstBtn > button:hover {
    color:#fff;
    background:#999
}
/***********게시판상세페이지 내 버튼***********/




/***********챗봇**********/
/*top*/
.chat_wrap { 
	 width: 450px;
	 height: 700px;
	 color:#fff;
	 font-size:13px; 	 
}

.chat_wrap .top {
	 width: 100%;
	 height: 72px;
	 background: #222;
}

.chat_wrap .top .profile { 
	 width: 40%;
	 height: 50px;
	 padding-top: 11px;	 
	 float: left;
}

.chat_wrap .top .profile img {
	padding: 2px 0 0 20px;
	float: left;
}

.chat_wrap .top .profile h1{
	padding: 15px 0 0 10px;
	float: left;
	font-size: 18px;
	font-weight: bold;
}

.chat_wrap .top .logo {
	width: 60%;
	height: 50px;
	padding-top: 11px;
	float: left;		 
}

.chat_wrap .top .logo img {
	padding: 12px 20px 0 0;
	float: right;
}


/*inner*/
.chat_wrap .inner {
	height: 450px;
	padding:5px 20px 20px 20px; 
	overflow-y: scroll;
	background-color:#fff; 
}

.chat_wrap .inner .item .box {
	max-width:300px;
	position:relative;
	display: inline-block;
}
 
.chat_wrap .inner .item:first-child {
	margin-top: 15px;
}

.chat_wrap .inner .item.mymsg .box {
	margin:0 20px 0 0;
	transition:all .3s ease-out; 
}

.chat_wrap .inner .item.yourmsg .box {	
	margin:0 0 0 20px;
	opacity:0;
	transition:all .3s ease-out; 
}

.chat_wrap .inner .item.on .box {
	margin:0; 
	opacity: 1;
}
   

/*mymsg*/
.chat_wrap .inner .item.mymsg {
	margin-top: 40px;
	text-align: right;		
}

.chat_wrap .inner .item.mymsg .box .name {
	width: 300px;
	position: absolute;
	float: right;
	top: 0px;
	right: 0;
	color: #222;
	font-size: 14px;
	font-weight: bold;	
}  

.chat_wrap .inner .item.mymsg .box .time {
	width:70px;
	position:absolute; 
	right: 0; 
	bottom:7px; 
	color:#888;
	font-size:11px; 	
}

.chat_wrap .inner .item.mymsg .box .msg {
	max-width: 100%;
	margin-top: 4px;
	padding:8px; 
	position: relative;
	display: inline-block;	
	color: #fff;
	text-align:left; 
	word-break: break-word;		
	background:#1D70FF;	
	border-radius:10px 0 10px 10px; 
} 
     

/*yourmsg*/
.chat_wrap .inner .item.yourmsg {
	margin-top: 15px;
	text-align: left;	
}

.chat_wrap .item.yourmsg .box .icon img {
	width: 30px;
	float: left;
}

.chat_wrap .item.yourmsg .box .name {
	width: 300px;
	position: absolute;
	float: left;
	top: 7px;
	left: 37px;	
	color: #222;
	font-size: 14px;
	font-weight: bold;
}

.chat_wrap .item.yourmsg .box .time {
	padding-left: 20px;
	color:#888;
	font-size:11px; 		
}

.chat_wrap .inner .item.yourmsg .box .msg {
	max-width: 100%;
	margin-top: 4px;
	padding:8px;
	position: relative;
	display: inline-block;
	color: #222;
	text-align:left;
	word-break: break-word;
	background:#eee;
	border-radius:0 10px 10px 10px; 	 		 			
}


/*채팅입력창*/
.chat_wrap .chatting {
	position: relative;	
}

.chatting input[type="text"]{
	width: 405px;
	height:70px;
	margin: 50px 20px;
	padding:0 10px;
	background:#fff; 
	border:1px solid #222; 	
	border-radius:10px; 	 	 
	box-sizing:border-box; 	
}

.chatting input[type="text"]::placeholder{
	color:#aaa;	
}

.chatting button {
	position: absolute;
	top:70px;
	right: 35px;
	background: none;
	border: none;
	cursor: pointer;
}

.chatting button:hover {
	opacity: 0.5;
}


/*-------------------------------------------
    $ Loaders
-------------------------------------------*/
.loader {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 16px;
    left: 28px;  
    display: inline-block;
    border-radius: 50%;     
}

.loader,
.loader:before,
.loader:after {
    animation: 1s infinite ease-in-out;
}

.loader:before,
.loader:after {
    width: 100%; 
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.loader-8:before,
.loader-8:after {
    content: '';
    background-color: #FFAB00;
    transform: scale(0);
    animation: loader8 1.5s infinite ease-in-out;
}

.loader-8:after { animation-delay: 0.75s; }

    @keyframes loader8 {
        0%   { transform: translateX(-100%) scale(0); }
        50%  { transform: translateX(0%)    scale(1); }
        100% { transform: translateX(100%)  scale(0); }
    }

/*매니페스트 상세 20231031-기쁨*/
.mfDetail .row {
	width:100%;
	height:auto;
	display:flex;
	justify-content: space-between;
	gap:10px
}
.mfDetail .row >*,
.mfDetail .eCommerce,
.mfDetail .delivery,
.mfDetail .cgoDetail {
	padding:0 10px
}
.mfDetail .lstCon{
	padding:0
}
.vtbWrap table td.taL input.sm {
    width: 70px;
}
.inTbl.schInput {
    width:fit-content;
    position:relative;
    display: inline-block;
}
.inTbl.schInput .schIco {
    width:20px;
    height:20px;
    position:absolute;
    top:1px;
    right:5px;
    background:url('../images/ico_input_search.png')no-repeat ;
    background-size: 20px;
}
.mfDetail .slctBoxJq.inTbl.sm .ui-button {
	width:100px
}
.mfDetail .eCommerce  input.lg{
	width:calc(100% - 73px);
	margin-left:3px;
}
.mfDetail .cgoDetail  input.dim{
	width:30%;
}
.mfDetail .cgoDetail  span.dim{
	padding:1px;
	vertical-align:middle
}
.mfDetail .tabMenu {
	margin-top:10px;
	padding:0 10px;
}
.mfDetail .itemDetail .lstCon{
	margin-bottom:3px
}
.mfDetail .itemDetail .itemName i {
	padding:5px 4px 0 0;
	font-size:8px;
	color:#888
}
.mfDetail .itemDetail .itemName span {
	padding-left:2px
}
.mfDetail .itemDetail input.lg.left {
	width:calc(100% - 73px);
	margin-right:3px;
}
.mfDetail .itemDetail input.lg.right {
	width:calc(100% - 73px);
	margin-left:3px;
}
.mfDetail .itemDetail .itemImg button{
	margin:0 auto;
	display:block
}

/*매니페스트 상세 - 컨테이너 배경색 주석처리 20231109 -윤지웅*/
.mfDetail .cntrDetail  {
	width:100%;
	height:300px;
	margin-top:10px;
	/*background:#999*/
}
@media(max-width:1200px){
	.on .main-wrap >.content.on.mfDetail  .scrl {
		width:995px;
		overflow-x:scroll
	}
	.hover .main-wrap >.content.mfDetail  .scrl,
	.on .main-wrap >.content.mfDetail  .scrl {
		width:1145px;
		overflow-x:scroll
	}
	.main-wrap >.content.mfDetail  .scrl {
		width:1200px;
		overflow-x:scroll
	}
	.main-wrap >.content.mfDetail  .scrl > *{
		width:1325px;
	}
}

/*다크모드일때 */
body.dark {
    background: #000;
}
.dark .lnb .menu-button {
    background: #0B0C0E;
}
.dark .lnb .menu-button:hover {
    background: #0B0C0E;
}
.dark .hover .lnb .menu-button,
.dark .lnb .menu-button:hover {
    background: #0B0C0E;
}
.dark .on .lnb .menu-button {
    background:#0B0C0E;
}
.dark .on .lnb .menu-button .bi {
    color: #eee;
}
.dark .lnb .depth1 {
    background: #0B0C0E;
}
.dark .lnb .depth1 >li.on >a{
    background:#15181D;
}
.dark .lnb .depth1 >li >a:hover {
    background:#15181D;
}
.dark .lnb .depth1 >li >a::before{
    background: linear-gradient(0deg, rgba(255,171,0,1) 0%, rgba(255,252,245,1) 100%);
}
.dark .lnb .depth1 >li.on >a .bi{
    color:#eee;
}
.dark .lnb .depth2 {
    background: #15181D;
}
.dark .lnb .depth2 .d1-tit {
    color: #FFAB00;
}
.dark .lnb .depth2 .d1-tit::after {
    background: rgb(84, 92, 112);
}
.dark .lnb .depth2 >li:hover .arr,
.dark .lnb .depth2 >li.on .arr{
    border-right: 1px solid #FFAB00;
    border-bottom: 1px solid #FFAB00;
}
.dark .lnb .depth3 {
    background: #20232C
}
.dark .lnb .depth3 >li:hover >a{
    color: #FFAB00;
    font-weight:500
}


.dark .main-wrap .top-bar {
    background: #0B0C0E;
}
.dark .top-bar .log-btn {
    color: #FFAB00;
    border: 1px solid #FFAB00;
}
.dark .top-bar .company-info {
    color: #eee;
}
.dark .top-bar .user-wrap {
    color: #eee;
}
.dark .top-bar .user-wrap::after {
    background: #eee;
}


.dark .tit {
    color: #eee;
}
.dark .subtit {
    color: #eee;
}
.dark .subtit::before {
    background: #FFAB00;
    box-shadow:2px 2px 0 #00000030
}
.dark .titWrap .btnAdd:hover {
    color: #333;
    background: #FFBD39;
}
.dark .schWrap {
    border-bottom: 0px solid #353B47;
    background:#15181D;
}
.dark .schWrap ul li.separate:after {
    background: rgb(84, 92, 112);
}
.dark .schWrap .btnSch {
    color: #222;
    background: #FFAB00;
}
.dark .schWrap .btnSch:hover {
    color: #fff;
}
.dark .schWrap ul li input,
.dark .schWrap ul li .slctBoxJq .ui-button {
    background: #20232c;
    border: 1px solid rgb(84, 92, 112);
}
.dark .lstCon .rslt {
    color: #eee;
}
.dark .lstCon .rslt > .em {
    color:#FFAB00;
}
.dark .lstBtnWrap > button {
    background:#15181D;
    color: #eee;
}
.dark .lstBtnWrap > button:hover {
    color:#FFAB00;
}
.dark .btnWrap button {
    color: #222;
    background: #FFAB00;
}
.dark .btnWrap button.unimpt {
    color: #666;
    background: #cbcbcb;
    opacity: 1;
}
.dark .btnWrap button:hover {
    color: #fff;
}
.dark .btnWrap button.unimpt:hover {
    background:#999;
    color:#fff;
}
.dark .btnWrap button:last-child {
    margin-right: 0;
}
.dark .pageWrap .prevPageBtn,
.dark .pageWrap .nextPageBtn {
    color: #222;
    background: #FFAB00;
}
.dark .pageWrap .prevPageBtn:hover,
.dark .pageWrap .nextPageBtn:hover {
    color: #fff;
}
.dark .pageWrap .txtWrap {
    background: #15181D;
    color: #999;
}
.dark .tbWrap.vtbWrap table th {
    background: #15181D;
    color: #eee;
}
.dark .tbWrap table td {
    color: #eee;
    background: #15181D;
    border-bottom: 1px solid #999;
}
.dark .content.fx  .gridCont  {
    border: 1px solid #999;
}
.dark .top-bar .company-logo {
    display: none;
}
.dark .top-bar .company-logo-w {
    display: block;
    max-height: 15px;
    margin-right: 10px;
    margin-left:auto;
}
.dark .user-wrap .user-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    font-size: 0;
    background: url('../images/icon_user_d_2.png')no-repeat;
    background-size: cover;
}




/*라이트모드일때*/
.light .lnb .menu-button {
    background: #f7f7f7;
}
.light .lnb .menu-button .bi {
    color: #888;
}
.light .on .lnb .menu-button .bi {
    color: #222;
}
.light .hover .lnb .menu-button,
.light .lnb .menu-button:hover {
    background: #f7f7f7;
}
.light .hover .lnb .menu-button,
.light .lnb .menu-button:hover .bi {
    color: #222;
}
.light .lnb .depth1 {
    background: #f7f7f7;
}
.light .lnb .depth1 >li.on >a{
    background:#eee;
}
.light .lnb .depth1 >li >a:hover {
    background:#eee;
}
/*.light .lnb .depth1 >li >a::before{
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgb(255, 255, 255) 100%);
}*/
/*20231213 메뉴선택시 표시 색 변경(이수연)*/
.light .lnb .depth1 >li >a::before{
    background: linear-gradient(0deg, rgba(2,151,118,1) 0%, rgb(255, 255, 255) 100%);
}
.light nav.lnb .depth1 a:hover .bi {
    color:var(--hubnetPoint)
}
.light .lnb .depth2 {
    background: #eeeeee;
}
.light .lnb .depth2 > li > a {
    color: #888;
}
.light .lnb .depth2 > li > a:hover {
    color: #222;
}
.light .lnb .depth2 .d1-tit {
    color: #222;
}
.light .lnb .depth2 .d1-tit::after {
    background: #cbcbcb;
}
.light .lnb .depth1 >li.on >a .bi{
    color:var(--hubnetPoint)
}
.light .lnb .depth2 >li.on >a {
    color: #222;
}
/*20231206 기쁨 추가*/
.light .lnb .depth2 >li:hover .arr,
.light .lnb .depth2 >li.on .arr{
    border-right: 1px solid var(--hubnetPoint);
    border-bottom: 1px solid var(--hubnetPoint);
}
.light .lnb .depth3 {
    background: #f7f7f7;
}
.light .lnb .depth3 >li>a {
	color:#555
}
.light .lnb .depth3 >li:hover >a{
    color: var(--hubnetHover);
    font-weight:500
}
.light .lnb .depth2 >li >a.new {
	background-image: url(../images/newL.png);
}
.light .top-bar .log-btn {
    color: var(--hubnetPoint);
    border: 1px solid var(--hubnetPoint);
}
.light ul.myMenu > li:hover ul.submenu { 
    /* background: #eaeaef;  */
    background: #f7f7f7; 
}
.light ul.myMenu > li ul.submenu > li:hover { 
    color: var(--hubnetHover);
}
.light .schWrap .btnSch {
    background: var(--hubnetPoint);
}
.light .schWrap .btnSch:hover {
    background: var(--hubnetHover);
}
.light .subtit::before {
    background: var(--hubnetPoint);
}
.light .lstCon .rslt > .em {
    color:var(--hubnetHover);
}
.light .dateRgBox .val.ico{
    background: #fff url('../images/ico_dateL.png')no-repeat right 10px center;
}
.light .pageWrap .prevPageBtn,
.light .pageWrap .nextPageBtn {
    background: var(--hubnetPoint);
}
.light .pageWrap .prevPageBtn:hover,
.light .pageWrap .nextPageBtn:hover {
    background: var(--hubnetHover);
}
.light .tabMenu .tabBtn .btn {
    border-color: var(--hubnetPoint) var(--hubnetPoint) transparent ;
}
.light .tabMenu .tabBtn .btn:hover,
.light .tabMenu .tabBtn .btn.on {
	color:#fff;
	background:var(--hubnetPoint) 
}
.light .pageWrap .txtWrap {
	background:#fff
}
/*20231206 기쁨 추가 끝*/
.light .user-wrap .user-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    font-size: 0;
    background: url('../images/icon_user.png')no-repeat;
    background-size: cover;
}
.light .top-bar .company-logo-w {
    display: none;
}
.light .top-bar .company-logo {
    display: block;
}
.light .tit {
    color: #222;
}
.light .main-wrap .top-bar {
    background: #f7f7f7;
}
.light .schWrap {
    border-bottom:0px solid #cbcbcb;
    background:#eee;
}


/*240125 소윤추가 메니페스트콘솔팝업*/
.PopupWrap {
	width: 100vw;
	height: 100vh;
	padding: 20px 0;
	background: #eee;
	overflow: hidden;
}

.PopupIn {
	width: calc(100vw - 25px);
	height: calc(100vh - 25px);
	position: relative;
	left: 50%;
	top: 50%;
	padding: 15px 0;
	transform: translate(-50%, -50%);
	background: #FCFCFC;
	border-radius: 10px;
}

.Popupbox {
	width: 75%;
	height: auto;
	margin: 0 auto;
}

.Popupbox li {
	width: 100%;
	padding: 5px 0;
}

.Popupbox li label {
	display: inline-block;
	width: 20%;
	font-weight: 500;
}

.Popupbox li input {
	width: 80%;
	height: 30px;
	font-weight: 500;
}

.btnPopupWrap {
	width: 90%;
	display: inline-block;
	height: auto;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, 0%);
	text-align: center;
}

.Popup_radioBox {
	width: 90%;
	display: block;
	height: auto;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	text-align: center;
}

.btnPopupWrap img {
	width: 190px;
}

.full-btn {	
	width: 100%;
	height: 30px;
	margin-bottom: 10px;
	color: #fff;
	background: var(--hubnetPoint);
	border-radius: 20px;
}

.full-btn:hover {
	background: var(--hubnetHover);
	transition: 0.2s;
}

.left-btn {	
	float: left;
	width: 49%;
	height: 30px;
	color: #fff;
	background: var(--hubnetPoint);
	border-radius: 20px;
}

.left-btn:hover {
	background: var(--hubnetHover);
	transition: 0.2s;
}

.right-btn {	
	float: right;
	width: 49%;
	height: 30px;
	color: #000;
	background: #cbcbcb;
	border-radius: 20px;
}

.right-btn:hover {
	color:#fff;
    background:#999;
	transition: 0.2s;
}