/*공통*/
body {min-height: 100vh}
.clearfix:after {    display: block;    visibility: hidden;    clear: both;    content: "";}
.swal-footer {padding: 0;margin:0}
.swal-modal {padding: 20px}
.swal-text {padding: 10px}
.swal-button {background:#3899ec}
div#layer {    background: #ffffff;}
.mobile-menu {    display:inline-block;    z-index: 500;    width: 30px;    height: 30px;    background-color: #fff0;    border: 0;}
.mobile-menu i {    font-size: 1em;}
.menuwrap {    position: fixed;    bottom: 0;    right: -100%;     z-index: 1000;    overflow: auto;    width: 100%; /* 너비 */ height:   calc( 100% - 65px )  ;  padding: 20px;
    box-sizing: border-box;    transition: right .3s ease-in-out; /* 0.3초 동안 이동 애니메이션 */    background-color: #fff;}
.menuwrap.on {    right: 0;}
ul.category_list li {    border-left: 2px solid #c3d126;    margin: 20px 0;    padding: 0px 10px;}
ul.category_list li a{    color:#74748B; font-weight: 800}
i.fa-bars {color: #fff}
#hd.t2 i.fa-bars{color:#74748B}
/*메인*/
div#header{width: 100%;min-height:65px;padding-top:65px;background: url('../img/common/bg.png') top center;background-size: cover;}
div#header.ty2{background:#fff0;}
div#header .text{text-align: center;color:#fff;padding: 10px 20px 20px}
div#header .text h3{font-size: 1.4em; font-weight: 700;margin-bottom: 10px}
div#header .text h2{font-size: 1.6em; font-weight: 700;margin-top: 10px}
div#header .text p{font-size: 1.1em; font-weight: 500}
div#header .text p span{padding-left: 15px;color: #BFCE18}
div#header .text p span.green{font-size: 0.75em; font-weight: 700;padding: 3px;color: #fff;background:  #BFCE18;}

.now h5 {    font-size: 1.2em;    font-weight: 800;    color: #4B82C3;border-bottom: 1px solid #ececec; padding-bottom: 10px}
p.txt1 {    font-size: 1.1em;    font-weight: 800;    color: #1A1818;}
p.txt2 {    font-size: 0.85em;    font-weight: 800;    color: #1A1818;}
p.txt2 span.blue{   color: #4B82C3;}

.done h5 {    font-size: 1.2em;    font-weight: 800;    color: #9A9A9A;   padding-top: 20px}
.done h6 {    font-size: 0.8em;    font-weight: 800;    color: #000;border-bottom: 1px solid #ececec;  padding-bottom: 5px; padding-top: 10px}
div > .list:first-child {border-top: 1px solid #ececec}
.list {
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
    min-height: 72px;
    overflow: hidden;
    /*justify-content: space-between;*/
    display: grid!important;
    grid-template-columns: calc(100% - 85px) 85px;
    align-items: center;
}
.list > .txt{width: 100%;}
.flex { display: flex;}
.deli1 {margin-left:5px; padding: 3px;font-size: 0.65em; font-weight: 700;} /*배송*/
.deli1.ty1 {background: #BFCE18; color: #fff} /*배송중*/
.deli1.ty2 {background: #B8B8B8; color: #fff} /*완료*/
.deli1.ty3 {background: #f5f5f5; color: #B7B7B7} /*취소*/
.deli3 {margin-left:5px; padding: 3px;font-size: 0.65em; font-weight: 700;} /*배송*/
.now .txt1 .deli3 {margin-left:0px; } /*배송*/
.deli3.ty1 {background: #BFCE18; color: #fff} /*배송중*/
.deli3.ty2 {background: #B8B8B8; color: #fff} /*완료*/
.deli3.ty3 {background: #f5f5f5; color: #B7B7B7} /*취소*/
.deli2 {margin-left:5px;  font-size: 0.75em; font-weight: 700;} /*배송시간*/


.noti1 {margin-left:0px; padding: 3px;font-size: 0.65em; font-weight: 700;} /*긴급*/
.noti1.ty1 {background: #ff0000; color: #fff} /*출고*/
.noti1.ty2 {background: #ff0000; color: #fff} /*배송*/
.noti1.ty3 {background: #ff0000; color: #fff} /*차량*/

.bttn.ty2 {      padding: 0px 0;}
.bttn.ty2 .txt1 {     margin-bottom: 5px;}
.bttn {min-width: 85px;text-align: right;padding: 5px 0;}
.bttn button {margin-left: 5px;    border-radius: 500px;    width: 40px;    height: 40px;     box-shadow: 0px 3px 4px 0px #edebeb;   border: 1px solid;    background: #fff0;    text-align: center;}
.bttn button.green {border-color: #BFCE18;color: #BFCE18}
.bttn button.blue {border-color: #4B82C3;color: #4B82C3}
.bttn button.gray {border-color: none;border:none;background: #F5F5F5;color: #AEAEAE}

.list table th {color:#4B82C3}
.list table td {color:#1A1818}
span.call{font-size: 0.75em; font-weight: 700;    padding: 0px 10px;    float: right;color: #fff;background:  #4B82C3; border-radius: 50px}

.list h6 {    font-size: 1em;    font-weight: 800;    color: #4B82C3;padding-bottom: 10px}
.list select {  width:100%; padding: 10px; border:1px solid #ececec;margin-bottom: 10px}
.list input {  width:100%; padding: 7.5px 10px; border:1px solid #ececec;margin-bottom: 10px; border-radius: 0}

.fixed {position: absolute; bottom: 0px; width: 100%; padding: 20px}
.nofix {width: 100%; padding: 20px}
.btn-submit { background: #BFCE18; color:#fff; text-align: center; padding: 10px; width: 100%; border:none; border-radius: 0}
p.noti { font-size: 0.8em; color:#6F6F6F; text-align: center;padding-bottom: 10px}

#sig-canvas {  width: 100%;border: 1px solid #CCCCCC;   cursor: crosshair;}
table.date {font-size: 1.4em;margin-bottom: 20px}
table.date th{color:#4B82C3}
table.date td{text-align: right;color:#1A1818;font-weight: 800;}
div.table20 {margin-bottom: 15px;padding: 10px 20px;box-shadow: 0px 0px 10px 0px #edebeb;}
table.gray {}
table.gray th{color:#6F6F6F;    padding: 5px 0;}
table.gray td{text-align: right}

h6.tit {    font-size: 1em;    font-weight: 800;    color: #4B82C3;padding-bottom: 10px}
#sig-clearBtn {width: 100%; border-radius: 0px}

.recipt table th{padding: 5px 0;}
.recipt table td{text-align: right}
.recipt {    padding: 20px;    background: #fff;    min-height: 90vh;box-shadow: 0px 5px 10px 0px #edebeb;}
.recipt::before {
    background: url(../img/sub/donebg.svg) no-repeat 0px 0px;    content: "";    display: inline-block;    height: 8px;    width: calc( 100% - 40px);    top: 12px;
    position: absolute;    background-size: cover;    left: 50%;    transform: translate(-50%, 0);}

.prdt {width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;  /* 말줄임 적용 */display: block;}
.elip {  width: 100%;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  /* 말줄임 적용 */}

button.btn-map {color:#4B82C3; width: 30px;    height: 30px;    border-radius: 50px;    border: none;    background: #fff;   box-shadow: 0px 3px 4px 0px #edebeb;  }
#map{width: 100vw;height: 100vh;}
#map .marker{
    display: block;
    background: #50627F;
    color: #fff;
    text-align: center;
    height: 24px;
    line-height:22px;
    border-radius:4px;
    padding:0px 10px;
}
.nowmap {  width: 100vw!important;  height: 100vh!important;  position:absolute;  left:0;  top:0;  margin:0;  padding:0;}
#mapinfo {    position: absolute;    z-index: 50;    width: calc( 100% - 40px );    height: 360px; overflow-y: auto;    bottom: 0;    left: 50%;    margin: 20px auto;    padding: 20px;
    box-shadow: 0px 0px 10px 0px #edebeb;    background: #fff;    transform: translateX(-50%);}
.comments { margin: 10px auto 10px 10px; padding: 0 10px 0 20px; border-left: 1px dotted #ccc}
.comments p {  line-height: 1.5;  padding: 10px;  position: relative;font-weight: 800; }
.comments p span:nth-child(1) {  font-size: 0.8em;color:#4B82C3;font-weight: 500; }
.comments p:before {  content: "";  display: block;  width: 19px;  height: 19px;  border-radius: 50%;  background-color: #4B82C3;  border: 3px solid #e0f7fa;
    position: absolute;  top: 15px;  left: -30px}
.comments p.pin2:before { width: 15px;  height: 15px;  left: -28.5px;  top: 20px; background-color: #ffffff;  border: 2px solid #6E6E6E }

#mapnoti {    position: absolute;    z-index: 50;    width: calc( 100% - 40px );    /*height: 70px;  */  bottom: 385px;    left: 50%;    padding: 10px 20px;    box-shadow: 0px 0px 10px 0px #edebeb;    background: #C30003; border: #ff0000 2px solid;    transform: translateX(-50%);}
#mapnoti p {color:#fff;}
#mapnoti p span:before{  content:'';  display:inline-block;  width:5px;  height:5px;  margin:-2.5px 10px 0 0;  vertical-align:middle;  background:white;  border-radius:50%}
#mapnoti::before {    background: url(../img/sub/mapnoti.svg) no-repeat 0px 0px;    content: "";    display: inline-block;   height: 25px;    width: 27px;
    top: -15px;    position: absolute;    background-size: cover;    left: 10px;}


#nowmapModal .last td,#nowmapModal .last th {padding-bottom: 10px; border-bottom: 1px solid #eee}
#nowmapModal .last + tr td,#nowmapModal .last + tr th {padding-top: 10px;}
#nowmapModal .last:last-child td,#nowmapModal .last:last-child th {padding-bottom: 0px; border-bottom: 0}

@media all and (max-width: 340px){

    body {font-size: 0.9em}
}
@media all and (max-width: 285px){

    div#header .text p span {display: none}
    .flex {display: block}
    .bttn.ty2 {    margin-top: 2px;}
    .deli3 {margin-left:0px; } /*배송*/
}

/*인수증 변경-241113*/


.recipt2 {    padding: 20px;    background: #fff;    box-shadow: 0px 5px 10px 0px #edebeb;}
.recipt2::before {
    background: url(../img/sub/donebg.svg) no-repeat 0px 0px;    content: "";    display: inline-block;    height: 8px;    width: calc( 100% - 40px);    top: 12px;
    position: absolute;    background-size: cover;    left: 50%;    transform: translate(-50%, 0);}

.recipt2 h1{font-size: 1.6em; font-weight: 600; text-align: center; margin-bottom: 20px;}
.recipt2 h2{font-size: 1.2em; font-weight: 600; text-align: center; margin-bottom: 10px; white-space: nowrap;}
.recipt2 .flex{display: flex;}
.recipt2 .ai-c{align-items: center;}
.recipt2 .jc-sb{justify-content: space-between;}

.recipt2 .table {margin-bottom: 20px; margin-top: 10px;}
.recipt2 .table th,
.recipt2 .table td{padding: 5px;}
.recipt2 .table th{text-align: center; background: #eeeeee85;}
.recipt2 .table .vertical{writing-mode: vertical-rl; text-align: center;}
.recipt2 .sign{display: flex; align-items: center; justify-content: right; gap: 20px;}
.recipt2 .sign .img {width:100px; height: 100px;}
.recipt2 .sign .img img{width: 100%; height: 100%; object-fit: contain;}