/* to embed a font : https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* overall --------------------------- */
body {background-color: #F9F9FA; overflow: hidden;}

/* login --------------------------- */
#login {width: 100vw; height: 100vh; background-color: #F9F9FA; background-image: url(../img/logo/bg-login-emblem@2x.png); background-repeat: no-repeat; background-size: 520px auto; background-position: right -2rem bottom -6rem;}
.login-wrap {width: 18.75rem; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.login-wrap > img {height: 4.5rem; margin-bottom: 1.5rem;}
.login-wrap .login-cont {width: 100%;}
.login-wrap .login-cont > li.text {text-align: left;}
.login-wrap .login-cont > li > p {font-size: .75rem; line-height: 1.6; margin-bottom: 1.45rem;}
.login-wrap .login-cont > li > input {width: 100%;}
.login-wrap .login-cont > li > button {width: 100%; margin-top: .375rem; height: 2.625rem; background-color: #2d3f64; font-size: .75rem;}
.login-wrap .login-cont > li:not(:first-child) {margin-top: .375rem;}
.login-wrap > h6 {font-size: .75rem; font-weight: 700; text-align: left; margin-top: 1.25rem;}
.login-wrap .login-desc {text-align: left; margin-top: .5rem;}
.login-wrap .login-desc > li {display: inline-block; font-size: .688rem; color: #888;}
.login-wrap .login-desc > li:not(:first-child)::before {content: '|'; display: inline-block; margin: 0 .3rem 0 .125rem;}


/* header --------------------------- */


#header {position: fixed; top: 0; left: 0; width: 100%; min-height: 4.125rem; padding: 12px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #fff; z-index: 200;}
#header .logo {position: relative; background-color: #fff; display: flex; align-items: center; padding-left: 1.875rem;}
#header .logo > img {height: 1.875rem; vertical-align: middle;}
#header .logo > p {font-size: 1.125rem; font-weight: 700; padding-left: .75rem; vertical-align: middle;}
#header .info {display: table; background-color: #fff; padding: 0 1.5rem;}
#header .info > ul {display: table-cell; vertical-align: middle; text-align: right;}
#header .info > ul > li {position: relative; display: inline-block; margin-left: .875rem; font-size: .875rem; cursor: pointer;}
#header .info > ul > li::after {content: '|'; display: inline-block; margin-left: .875rem; }
#header .info > ul > li:last-child::after { display: none;}
#header .info > ul > li:first-child{margin-left: 0}
#header .mo-hide{
    display: none !important;
    @media all and (min-width:768px){
        display: inline-block !important;
    }
}
/* container --------------------------- */
#container {position: relative; height: calc(100vh - 66px); margin-top: 66px; display: flex; overflow: hidden;}

/* left menu */
#left-menu {width: 300px; height: calc(100vh - 66px); background-color: #2d3f64; overflow-y: auto; scrollbar-width: none;}
#left-menu > ul {width: 100%; height: 100%;}
#left-menu > ul > li {position: relative;  cursor: pointer;}
#left-menu > ul > li > a {display: block; padding: 1rem; font-size: .75rem; color: #fff; font-weight: 700;}
#left-menu > ul > li .material-icons {position: absolute; top: .875rem; right: 1rem; font-size: 1rem; color: #fff; transform: rotate(0); transition: transform 0.5s;}

#left-menu > ul > li .sub-menu {display: none; padding: .5rem; background-color: #1F2C46;}
#left-menu > ul > li .sub-menu li > a {display: block; padding: .5rem; font-size: .75rem; font-weight: 500; color: #fff;}
#left-menu > ul > li.on .sub-menu {display: block;}

.left-menu {position: relative; padding-right: 205px; height: calc(100vh - 66px); overflow-y: hidden; background-color: #223D66; scrollbar-width: none}
.left-menu::-webkit-scrollbar {width: 0;}
.left-menu > ul {display: flex; flex-flow: column; height: 100%; overflow: auto; scrollbar-width: none;}
.left-menu > ul > li > div {width: 132px; height: 98px; display: flex; flex-flow: column; row-gap: 8px; font-size: 14px; font-weight: 500; color: #fff; align-items: center; justify-content: center; opacity: .5; cursor: pointer;}
.left-menu > ul > li > ul {display: none;}
.left-menu > ul > li > ul > li {position: relative;}
.left-menu > ul > li > ul > li > a {display: flex; align-items: center; height: 52px; padding: 0 20px; cursor: pointer; font-size: 14px; font-weight: 500;}
.left-menu > ul > li > ul > li > ul {height: 0; overflow: hidden;}
.left-menu > ul > li > ul > li > ul::before {content: ''; width: 16px; height: 16px; display: block; background-image: url(../img/ico/ic-arrow-down-16.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 18px; right: 20px;}

.left-menu > ul > li.active > div {background-color: #071D3D; opacity: 1;}
.left-menu > ul > li.active > ul {padding-bottom: 100px; display: flex; flex-flow: column; width: 205px; position: absolute; top: 0; right: 0; background-color: #fff; height: 100vh;  overflow-y: auto; scrollbar-width: thin}
.left-menu > ul > li.active > ul::-webkit-scrollbar {width: 0;}
.left-menu > ul > li.active > ul > li.active > a {background-color: #EEF3F8; font-weight: 600; color: #142A49;}
.left-menu > ul > li.active > ul > li.active > ul {display: flex; flex-flow: column; height: fit-content;}
.left-menu > ul > li.active > ul > li.active > ul::before {content: ''; background-image: url(../img/ico/ic-arrow-up-16.svg);}
.left-menu > ul > li.active > ul > li.active > ul > li {height: 52px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #E5E5E5;}
.left-menu > ul > li.active > ul > li.active > ul > li > a {font-size: 14px; color: #A4A4A4;}
.left-menu > ul > li.active > ul > li.active > ul > li.active > a {color: #8C6334;}

.ic-menu {width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center;}
.menu1 {background-image: url(../img/ico/ic-menu1.svg);}
.menu2 {background-image: url(../img/ico/ic-menu2.svg);}
.menu3 {background-image: url(../img/ico/ic-menu3.svg);}
.menu4 {background-image: url(../img/ico/ic-menu4.svg);}
.menu5 {background-image: url(../img/ico/ic-menu5.svg);}
.menu6 {background-image: url(../img/ico/ic-menu6.svg);}
.menu7 {background-image: url(../img/ico/ic-menu7.svg);}
.menu8 {background-image: url(../img/ico/ic-menu8.svg);}
/*개발서버 결합상품 아이콘*/
.menu9 {background-image: url(../img/ico/ic-menu9.svg);}
/*실서버 결합상품 아이콘*/
.menu117 {background-image: url(../img/ico/ic-menu9.svg);}
.menu118 {background-image: url(../img/ico/ic-menu118.svg);}
.menu119 {
    width: 64px;
    background-image: url(../img/ico/ic-menu119.svg);
}

/* #left-menu > ul > li .sub-menu li > ul > li > a {display: block; padding: 1rem 1rem 1rem 3.5rem; font-size: .75rem; color: #fff;} */

/* contents */
#contents {padding: 60px; overflow-y: auto; flex: 1;}
#home_contents {padding: 2.25rem 3.75rem; overflow-y: auto; flex: 1;}

/* popup */
#pop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 10000;}
#verticalPop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 10000;}
#horizontalPop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 10000;}
.pop-wrap {background-color: #fff; z-index: 100000;}
.pop-wrap.pop-scroll .pop-cont {height: 70vh; overflow-y: auto;}
.pop-wrap .pop-title {padding: 1rem 1rem 0; display: flex; align-items: center; justify-content: space-between;}
.pop-wrap .pop-title h6 {font-weight: 700;}
.pop-wrap .pop-cont{padding: 1rem; position: relative;}
.pop-wrap .pop-cont table + table {margin-top: 1rem;}
.pop-wrap .pop-cont table {border-right: 0.063rem solid #eeeff2;}
.pop-wrap .pop-cont table th {border-left: 0.063rem solid #fff; padding: .5rem;}
.pop-wrap .pop-cont table th {border-top-color: #eeeff2;}
.pop-wrap .pop-cont table td {border-left: 0.063rem solid #eeeff2; padding: .5rem;}
.pop-wrap .pop-cont input {text-align: center; width: 100%;}
.pop-wrap .pop-cont .thumbnail {width: 31.25rem;}
.pop-wrap .pop-cont .desc {font-size: .75rem; padding: 1rem 0 .5rem; text-align: right;}
.pop-wrap .pop-cont .pop-btn {margin: 1rem 0; text-align: center;}
.pop-wrap .pop-cont .pop-btn:last-child {margin-bottom: 0;}
.pop-wrap .pop-cont .pop-btn button {width: 7rem; height: 2rem; margin: 0 .25rem;}

/* login */
#login {width: 100%; height: 100%; background-color: #fafafa;}
.login-wrap {width: 18rem;}
.login-wrap .logo {margin-bottom: 1.5rem; text-align: center;}
.login-wrap .logo > img {height: 5rem; margin: 0 auto;}
.login-wrap input {width: 100%; height: 2.5rem; padding: 0 .875rem; margin-bottom: .5rem;}
.login-wrap button {width: 100%; height: 2.5rem; padding: 0 .875rem; margin-top: .5rem; background-color: #2d3f64; color: #fff; font-weight: 500; cursor: pointer;}
.login-wrap .text {font-size: .75rem; color: #d32f2f; padding: 0 .25rem; margin: .5rem 0;}

/* error */
#error {width: 100%; height: 100%; background-color: #fafafa;}
.error-wrap {width: 26rem; text-align: center;}
.error-wrap .error-name {font-size: 6rem; font-weight: 900; letter-spacing: .2rem; color: #2d3f64;}
.error-wrap .error-guide {margin-top: 1rem; font-weight: 500;}
.error-wrap .error-msg {margin-top: 1.5rem; font-size: .875rem; line-height: 1.8;}
.error-wrap button {margin-top: 2rem; height: 2rem; line-height: 2rem; padding: 0 1rem; background-color: #2d3f64; color: #fff;}

/* label pop */
.sticker-label {background-color: #fff; position: relative; width: 304px; height: 450px; border: .063rem solid #d0d0d0; margin: 0 auto; padding: 1rem; -webkit-print-color-adjust:exact; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);}
.sticker-label > img {height: 1.5rem;}
.sticker-label > h4 {font-size: 1.25rem; font-weight: 800; margin-top: .25rem;}
.sticker-label .price {font-size: 1.25rem; font-weight: 700; margin-top: 1rem;}
.sticker-label > ul {margin-top: 1rem;}
.sticker-label > ul > li {display: flex; line-height: 1.4; font-weight: 500; font-size: .875rem;}
.sticker-label > ul > li > span:nth-child(1) {width: 50px;}
.sticker-label > ul > li > span:nth-child(2) {width: calc(100% - 50px);}
.sticker-label .barcode {position: absolute; bottom: 1.625rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 4.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.sticker-label .barcode > span {display: block; font-size: .75rem; font-weight: 700; width: fit-content; margin: 0 auto; position: absolute; bottom: -.75rem;  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); text-align: center;}

.sticker-label-hori {background-color: #fff; position: relative; width: 450px; height: 304px; border: .063rem solid #d0d0d0; margin: 0 auto; padding: 1rem; -webkit-print-color-adjust:exact; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);}
.sticker-label-hori > img {height: 1.5rem;}
.sticker-label-hori .title {display: flex; align-items: center; margin-top: .25rem;}
.sticker-label-hori .title > h4 {font-size: 1.25rem; font-weight: 800;}
.sticker-label-hori .title > div {font-size: 1.25rem; font-weight: 700; margin-left: .5rem;}
.sticker-label-hori > ul {margin-top: .5rem;}
.sticker-label-hori > ul > li {display: flex; align-items: center; line-height: 1.4; font-weight: 500; font-size: .875rem;}
.sticker-label-hori > ul > li > span:nth-child(1) {width: 6rem;}
.sticker-label-hori > ul > li > span:nth-child(2) {width: calc(100% - 6rem);}
.sticker-label-hori .barcode {position: absolute; bottom: 1.625rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 4.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.sticker-label-hori .barcode > span {display: block; font-size: .75rem; font-weight: 700; width: fit-content; margin: 0 auto; position: absolute; bottom: -.75rem;  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); text-align: center;}

.care-label {display: grid; grid-template-rows: repeat(2, 450px); background-color: #fff; position: relative; top: -6.875rem; width: 304px; height: 450px; margin: 0 auto; -webkit-print-color-adjust:exact; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);}
.care-label > div {border: .063rem solid #d0d0d0; padding: 1rem;}
.care-label > div > img {height: 3.2rem; margin-top: 1rem;}
.care-label > div > img + p {margin-top: .875rem;}
.care-label > div > p {font-size: .875rem; line-height: 1.2; font-weight: 500;}
.care-label > div > h6 {font-size: 1.125rem; font-weight: 700; line-height: 1.2; margin-top: 1rem;}
.care-label > div > ul {margin-top: 1rem;}
.care-label > div > ul > li {display: flex; align-items: center; line-height: 1.4; font-weight: 500; font-size: .875rem;}
.care-label > div > ul > li > span:nth-child(1) {width: 6rem;}
.care-label > div > ul > li > span:nth-child(2) {width: calc(100% - 6rem);}
.care-label > div:nth-child(2) {border-top: 0;}
.care-label > div:nth-child(2) > h6 {margin-top: 0;}
.care-label > div:nth-child(2) > p {margin-top: .5rem; word-break: keep-all;}
.care-label > div:nth-child(2) > img {width: 100%;}

.sticker-label input, .care-label input {text-align: left!important; padding: 0 .25rem; font-weight: 500; font-size: .875rem; vertical-align: middle; height: fit-content; border: .063rem solid #e4e4e4;}

.notify-cont {width: 100%; padding: 6rem 0; background-color: #fff; text-align: center;}
.notify-cont i {width: 3rem; height: 3rem; margin: 0 auto; display: block; background-repeat: no-repeat; background-size: contain; background-position: center;}
.notify-cont i.icon-search {background-image: url(../img/icon-search.svg);}
.notify-cont i.icon-result-no {background-image: url(../img/icon-result-no.svg);}
.notify-cont p {font-size: 1rem; font-weight: 500; line-height: 1.8; margin-top: 1rem;}
.notify-cont span {font-size: .875rem; margin-top: .625rem; display: block;}


/* loading */
.lds-ellipsis {display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ellipsis div {position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #2d3f64; animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1) {left: 8px; animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2) {left: 8px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3) {left: 32px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4) {left: 56px; animation: lds-ellipsis3 0.6s infinite;}

@keyframes lds-ellipsis1 {0% {transform: scale(0);} 100% {transform: scale(1);}}
@keyframes lds-ellipsis3 {0% {transform: scale(1);} 100% {transform: scale(0);}}
@keyframes lds-ellipsis2 {0% {transform: translate(0, 0);} 100% {transform: translate(24px, 0);}}

/* 24.06.24 */
.ic-drag {width: 20px; height: 20px; margin: 0 auto; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer; background-image: url(../img/ic-drag.svg); display: inline-block;}

.empty {width: calc(100% + 120px); height: calc(100% + 120px); margin: -60px; padding: 60px; display: flex; flex-flow: column; row-gap: 24px; justify-content: center; padding-bottom: 100px; background-image: url(../img/logo/bg-login-emblem@2x.png); background-repeat: no-repeat;  background-repeat: no-repeat; background-size: 520px auto; background-position: right -2rem bottom -6rem;}
.empty > img {width: 164px; margin: 0 auto;}
.empty > p {text-align: center; font-size: 18px; font-weight: 500;}



/* 모달*/
#modalDiv{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

#modalDiv.dim{
    background-color: rgba(0, 0, 0, 0.5);
}

#modalDiv .modal-container{
    width: 90vw;
    max-width: 360px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
    max-height: 75vh;
    overflow: auto;
}

#modalDiv .modal-container.lg{
    width: 90vw;
    max-width: 600px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
}


#modalDiv .modal-container .modal-header{
    background-color: #071D3D ;
    padding: 20px 12px;
}

#modalDiv .modal-container .modal-header h1{
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
}

#modalDiv .modal-container .content{
    padding: 16px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modalDiv .modal-container .content.img {
    box-sizing: content-box;
    height: auto !important;
}

#modalDiv .modal-container .content.img img{
    width: 100%;
    height: auto;
    object-fit:  cover;
}

#modalDiv .modal-container .content p{
    font-size: 14px;
}

#modalDiv .modal-container .content input{
    width: 100%;
    margin-top: 12px;
}


#modalDiv .modal-container .content p{
    text-align: center;
    line-height: 1.5;
}

#modalDiv .modal-container .modal-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0 16px 16px;
}

#modalDiv .modal-container .modal-btn button{
    padding: 0 16px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

#modalDiv .modal-container .modal-btn button.close{
    background-color: #cacaca;
    color: #FFFFFF;
    opacity: 1;
}

#modalDiv .modal-container .modal-btn button.submit{
    background-color: #071D3D;
    color: #FFFFFF;
}


#modalDiv .modal-container .modal-btn.left{
    justify-content: flex-end;
}

#modalDiv .modal-container .modal-btn.sm button{
    padding: 8px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    width: fit-content;
    height: 30px;
}

#modalDiv.confirm-modal{
    z-index: 100 !important;
}

.ticker-dashboard .tit-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ticker-dashboard .tit-flex h4{
    margin-bottom: 0;
}

.ticker-dashboard .tit-flex p{
    font-weight: 600;
}

.ticker-dashboard .tit-flex div{
    margin: 0 !important;
}


.ticker-dashboard .grid-2{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.ticker-dashboard .grid-2 .table{
    width: 100%;
}

.ticker-dashboard .grid-2 .sm{
    width: 100%;
    max-width: 40%;
    margin-top: 0;
}

.ticker-dashboard .search-bar.h-auto li{
    height: auto !important;
}

.ticker-dashboard .search-bar{
    min-height: auto !important;
}
.ticker-dashboard .search-bar::before, .ticker-dashboard .search-bar::after{
    display: none !important;
}


.ticker-dashboard .cont-wrap .table table tr th{
    white-space: nowrap;
}

.mg-0{
    margin: 0 !important;
}
#modalDiv .modal-container.lg .content{
    height: auto;
    padding: 32px 16px 24px;
}

#modalDiv .modal-container .content.col{
    flex-direction: column;
}


#modalDiv .modal-container .content.col .table-tit {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#modalDiv .modal-container .content.col .table-tit button{
    white-space: nowrap;
}

#modalDiv .modal-container .content.col .table-tit h3{
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    text-align: left;
    width: 100%;
}
#modalDiv .modal-container.lg .content{
    height: auto;

    padding: 32px 16px 24px;
}

#modalDiv .modal-container .content.col{
    flex-direction: column;
}


#modalDiv .modal-container .content.col .table-tit {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#modalDiv .modal-container .content.col .table-tit button{
    white-space: nowrap;
}

#modalDiv .modal-container .content.col .table-tit h3{
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    text-align: left;
    width: 100%;
}

#modalDiv .modal-container .content.col td , #modalDiv .modal-container .content.col select {
    width: 100%;
    text-align: left;
}