@charset "UTF-8";

body.web {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}

/* Index */
.web .index           { flex-grow: 1; width: 100%; height:calc(100% - 55px); display: flex; flex-direction: column; justify-content: flex-start; }
.index .screenTabArea { width: 100%; height: 48px; padding-top: 5px; flex-shrink: 0; padding-left: 16px; margin-top: 14px; }
.index .screenArea    { position:relative; flex-grow: 1; flex-basis: 100%; overflow-y: auto; }

.wrap                 { position: relative; width: 100%; height: 100%; background-color: #fff; 
                        display: flex; flex-direction: column; justify-content: flex-start; }

.autoFullSize { width: 100%; height: 100%; }
.autoFullSize.flex { flex-grow: 1; overflow: auto; }

.container.autoFullSize {
   overflow: auto;
}

.myinfo-ico-box {
   color: #fff;
   background-color: #CED0DA;
   height: 35px;
   width: 35px;
   border-radius: 20px;
   
   font-size: 20px;
}

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Page Header Start */
.page-header {
   width: 100%;
   height: 60px;
   flex-shrink: 0;
   border-bottom: 1px solid #C9CBCD;
   box-shadow: 1px 1px 5px 3px #EFF1F3;
}

.top-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;

   width: 100%;
   height: 100%;
   
   padding: 0px 10px;
}

.top-box .logo-box .logo {
   width: 100px;
   margin-left: 20px;
}

.top-box .menu-box {
   flex-grow: 1;
   
   height: 100%;
}

.top-box .menu-box .menu-item {
   position: relative;
   flex-basis: 160px;
   height: 100%;
   text-align: center;
   color: #1F1F1F;
}

.top-box .menu-box .menu-item .title-text {
   cursor: pointer;
   padding: 10px 0px;
}

.top-box .menu-box .sub-menu-box {
   position: absolute;
   display: none;
   top: 59px;
   left: 0;
   
   background: #fff;
   
   width: 100%;
   border: 1px solid #ced0da;
   border-top: none;
   color: #777;
   font-weight: 600;
   cursor: pointer;
   z-index: 500;
   
   padding: 4px 0px;
   line-height: 30px;
   
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   box-shadow: 1px 2px 1px 1px #EFF1F360;
}

.top-box .menu-box .sub-menu-box li:hover { 
   background: #81BC50;
   color: #fff;
}

.top-box .myinfo-ico {
   width: 40px;
   height: 40px;
   
   cursor: pointer;
}

/* Page Header End */


/* .btn-orange { */
/*    display: inline-block; */
/*    margin-top: 10px; */
/*    border: none; */
   
/*    border-radius: 10px; */
/*    background-image: linear-gradient(to right, #a8ce09, #7dc905); */
   
/*    color:#fff; */
/*    cursor: pointer; */
/*    font-weight: 600; */
/*    line-height: normal; */
   
/*    padding: 10px 20px; */
/* } */

/* .btn-white { */
/*    background-color: #fff; */
/*    color: #a6c42a; */
/*    border: 1px solid #ced0da; */
/*    border-radius: 10px; */

/*    cursor: pointer; */
   
/*    font-weight: 600; */
/*    line-height: normal; */
   
/*    padding: 10px 20px; */
/* } */

/* .btn-gray { */
/*    display: inline-block; */
   
/*    border: 1px solid #ced0da; */
   
/*    border-radius: 18px; */
/*    background-image: linear-gradient(to top, #e1e5ea, #f2f6f9); */
   
/*    cursor: pointer; */

/*    line-height: normal; */
   
/*    padding: 5px; */
/* } */


/*--- LAYOUT ------------------------------------------------------------------------*/
.container { padding: 16px;}
.box     {position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: 10px;}

.box.menu{height: 50px; z-index: 1; background-color: #1b2b55; margin: 0px;}

.box.search-single {top:110px; height: 50px; background: #ecf4ff; border: 1px solid #c2d1e8;}

.box.search_50  {top:60px; height: 50px; background: #ecf4ff; border: 1px solid #c2d1e8;}
.box.search_100 {top:60px; height: 100px;background: #ecf4ff; border: 1px solid #c2d1e8;}
.box.search_150 {top:60px; height: 150px;background: #ecf4ff; border: 1px solid #c2d1e8;}
.box.search_200 {top:60px; height: 200px;background: #ecf4ff; border: 1px solid #c2d1e8;}

.box.contents     {top:60px; background-color: white;}
.box.contents_50  {top:120px;background-color: white;}
.box.contents_100 {top:170px;background-color: white;}
.box.contents_150 {top:220px;background-color: white;}
.box.contents_200 {top:270px;background-color: white;}

.tb        {display: table; width: 100%; height:100%;}
.tb_top    {display: table-cell; vertical-align: top;}
.tb_middle {display: table-cell; vertical-align: middle;}
.tb_bottom {display: table-cell; vertical-align: bottom;}

/*--- LAYOUT BOX STYLE --------------------------------------------------------------*/
/*-- menu.do --*/
.logo  {width: 150px; text-align: center; color:white;}
.logout {width: 25%; text-align: right; padding-right: 10px;}
.logout > ul li {display: inline-block; word-break: break-all;}
.logout > ul li:first-child {width: 150px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; color:white;}

/* TAB */
.container.tab { position: relative; padding-bottom: 0px; vertical-align: bottom; }
.container.tab .tabItem { display: inline-block; position: relative; min-width: 150px; height: 17px; border: 1px #C9CBCD solid; background-color:#E0E2E1; margin-right: 1px; margin-bottom: -1px; padding: 8px 15px; text-align: center; cursor: pointer; }
.container.tab .tabItem.active { border-bottom: 1px #FFF solid; background-color: #FFF; }
.container.tab .tabItem label { cursor: pointer; font-size: 15px; }
.container.tab .baseline { position: absolute; bottom:0px; height: 1px; width: calc(100%); background-color: #C9CBCD;  }
.container.tab.inner { padding-left: 0px; padding-right: 0px; }

.container.tabArea { position: relative; border: solid #C9CBCD 1px; border-top: none; overflow-y: auto; padding-bottom: 0px; }

.container.search { width: 100%; padding-bottom: 0px; }
.container.button { padding-top: 0px; text-align: right; }

/*-- manage - auth.do --*/
.container.auth { text-align: center; }
.auth .left_area   { width:300px; height: 100%; display: inline-block; }
.auth .right_area  { width:500px; height: 100%; margin-left: 10px; display: inline-block; }

/*-- manage - code.do --*/
.container.comm_code { text-align: center; }
.comm_code .left_area   { width:300px; height: 100%; }
.comm_code .right_area  { width:500px; height: 100%; margin-left: 10px; }



/* buttons */
.pop .btnGroup    { text-align:right; margin-top:15px;}
button          { padding:5px 15px; border-radius:0px; cursor: pointer; outline: none; border: 1px solid #15181C; background-color: #15181C; color: #fff; border-color: #15181C; }
.btn.red, .btn.btn-red, button.btn.btn-red  { background-color: #FFFFFF; border: 1px solid #FF0000; color: #FF0000; }
.btn.gray, .btn.btn-gray, button.btn.btn-gray { background-color: #FFFFFF; border: 1px solid #E3E3E3; color: #000000; }
.btn.black, .btn.btn-black, button.btn.btn-black { background-color: #15181C; border: 1px solid #15181C; color: #FFFFFF; }
.btn.green, .btn.btn-green, button.btn.btn-green { background-color: #80BC50 !important; border: 1px solid #80BC50 !important; color: #fff !important; }
.btn.btn-xs { padding: 2px 4px; font-size: 12px; }

.pop select, .pop input, .pop textarea {
    font-family: Noto Sans KR;
    border: 1px solid #c0c0c0;
    padding: 6px 10px;
    background-color: white;
    color: #1b2b55;
    outline: 0;
    box-sizing: border-box;
    height: 30px;
}
.pop input[type=radio] {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-bottom: 2px;
}

.searchBox                    { position: relative; padding: 10px 80px 10px 10px; border-radius:5px; background-color:#f7f7f7; border:1px solid #e0e0e0; min-height: 39px; }
.searchBox.button2            { padding-right: 130px; }
.searchBox .row               { height: 40px; display: flex; justify-content: flex-start; align-items: center; gap: 15px; }
.searchBox .row *             { line-height: normal; }
.searchBox .searchItem        { display: flex; justify-content: center; align-items: center; gap: 7px; }
.searchBox .searchItem *      { border-radius:3px; }
.searchBox .searchItem .label { min-width:80px; display: inline-block; text-align: right; font-weight: bold; padding-left: 8px; padding-right: 3px; }
.searchBox .searchItem .infoText { width:240px; display: inline-block; text-align: right; font-weight: 500; padding-left: 8px; color:red;}

.searchBox .rootianCombo .comboArea { padding: 2px 8px 2px 9px; }

.searchBox .buttons        { position: absolute; top: 5px; right: 5px; bottom: 5px; }
.searchBox .buttons button { min-width: 70px; height: 100%; font-size: 15px;}

.input.group                 { display: flex; justify-content: flex-start; align-items: center; }
/* .input.group > *             { vertical-align: middle; } */
.input.group > *             { border-radius: 0px; }
.input.group > *:first-child { border-top-right-radius:0px; border-bottom-right-radius:0px; border-top-left-radius:5px; border-bottom-left-radius:5px; }
.input.group > *:last-child  { border-top-right-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:0px; border-bottom-left-radius:0px; }
.input.group .addon          { display: flex; justify-content: center; align-items: center; border: 1px solid #c0c0c0; background-color:#eeefec; border-left: none; cursor:pointer; height: 32px; width: 38px; }
.input.group button          { height: 33px; border: 1px solid #c0c0c0; background-color:#eeefec; border-left: none; padding: 4px 10px; cursor:pointer; color:#000; vertical-align: top; }
.input.group button:first-child { border: 1px solid #c0c0c0; }
.input.group button.selected { background: #333; color: #fff; }
.input.group.date input      { width: 110px; text-align: center; }
.input.group.date-time input { width: 160px; text-align: center; }

.flexdatalist-area {
   display:inline-block; 
   position:relative;
   width: 220px;
}

.flexdatalist-input {
   position: relative;
   width: 177px !important;
   padding-right: 28px;
}   

.input_goods_nm {
   min-width: 250px;
}

.flexdatalist-cancel-button {
   position:absolute;
   display: none;
   top:9px;
   right:53px;
   width: 14px;
   height: 14px;
   background-image: url('../images/common/ico-popupclose.png');
   background-repeat: no-repeat;
   background-size: 14px;
   cursor: pointer;
}

.flexdatalist-button > i {
   vertical-align: 0px;
}

.edit-form .label {
   width: 90px;
   flex-shrink: 0;
   font-weight: 600;
   text-align: right;
}

.edit-form .input-box {
   flex-grow: 1;
   margin-right: 20px;
}

.edit-form .label button {
   font-size: 12px;
   padding: 3px 5px;
}

.edit-form #TARGET_LIST, .edit-form #TARGET_USER_LIST {
   flex-wrap: wrap;
}

.edit-form .selected-target {
   padding: 3px 5px;
   border: 1px solid #EFF1F3;
   border-radius: 5px;
}

.edit-form .selected-target i, .edit-form .fileItem i {
   color: #F94B50;
   font-size: 16px;
   cursor: pointer;
}

.edit-form .fileItem i.downLoad {
   font-weight: 600;
   margin-right: 5px;
   color: #000;
}

.web {
   letter-spacing: inherit;
}

.web .title-box {
   display: flex;
   justify-content: space-between;
   align-items: center; 
   
   padding: 10px 0px;
   
   width: 100%;
   
   font-size: 18px;
   font-weight: 600;
   line-height: 30px;
   
   border-bottom: 1px solid #000000;
}

.web .title-box .option-title {
   font-size: 14px;
   font-weight: 400;
}

.web .title-box.tab-box {
   justify-content: flex-start;
   padding: 0px;
   padding-bottom: 0px;
   border-bottom: 1px solid #80BC50;
}

.web .title-box.tab-box .tab-item {
   font-size: 14px;
   color: #A6B0BD;
   height: 48px;
   padding: 5px 20px;
   font-weight: 600;
   background-color: #F8F9FA;
   
   border: 1px solid #E3E3E3;
   border-left: none;
   border-bottom: none;
}

.web .title-box.tab-box .tab-item:first-child {
   border-left: 1px solid #E3E3E3;
}

.web .title-box.tab-box .tab-item.selected {
   background-color: #80BC50;
   color: #fff;
   border-color: #80BC50;
}

.web .edit-table {
   width: 100%;
}

.web .edit-table.bd-t {
   border-top: 1px solid #000000;
}

.web .edit-table tr {
   height: 48px;
}

.web .edit-table th, .web .edit-table td {
   vertical-align: middle;
   padding: 8px 20px;
   text-align: left;
   border-bottom: 1px solid #EEEEEE;
}

.web .edit-table th {
   background-color: #F9F9F9;
   width: 170px;
   font-weight: 600;
}

.web-pop .edit-table th {
   width: 120px;
}

.web .edit-table td > * {
   width: 100%;
}
.web .edit-table td input {
   border: 1px solid #EEEEEE;
   border-radius: 0px;
}

.web .btn.save {
   height: 49px;
   font-weight: 600;
   padding: 5px 20px;
   font-size: 14px;
}

.web .title-box .btn.save {
   height: inherit;
   line-height: 18px
}

.web .add-screen .list-area {
   width: 350px;
   flex-shrink: 0;
   height: 100%;
}

.web .add-screen .edit-area {
   flex-grow: 1;
   height: 100%;
}

.web .ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
ul.tabs{
   margin: 10px;
   padding: 0px;
   list-style: none;
   border-bottom: 1px solid #80BC50;
}
ul.tabs .tab-link{
   color: #999;
   display: inline-block;
   padding: 10px 15px;
   cursor: pointer;
   border: #e2e3e3 solid 1px;
   background: #f8f9fa;
   margin-right: 3px;
}
ul.tabs .tab-link.current{
   background: #80BC50;
   color: #f8f9fa;
   border: #80BC50 solid 1px;
}