/* freightInfo-popup */
/* 견적조회 디자인 수정 */
.frm-freight .freightInfo-item {
    position: relative;
}
.frm-freight #freightInfo {
    padding-right: 44px;
}
.frm-freight .freightInfo-item .btn-delete {
    display:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-position:50% 50%;
    background-image:url(/static/assets-new/common/icon-delete.png);
    background-repeat:no-repeat;
    background-size:100% auto;
    right: 18px;
    width: 16px;
    height: 16px;
}
.frm-freight .freightInfo-item .tooltipCont {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%);
    border: 1px solid #8d9291;
    padding: 16px;
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.16);
    background: #fff;
    width: 350px;
    z-index: 1;
}
.frm-freight .freightInfo-item .tooltipCont::after {
    content: '';
    width: 11px;
    height: 11px;
    border-bottom: 1px solid #8d9291;
    border-left: 1px solid #8d9291;
    display: inline-block;
    transform: rotate(135deg);
    position: absolute;
    top: -6px;
    left: 50%;
    background: #fff;
    z-index: 1;
    margin-left: -5.5px;
}
.frm-freight .freightInfo-item .tooltipCont li {
    display: flex;
    color: #424645;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.42px;
}
.frm-freight .freightInfo-item .tooltipCont li::before {
    content: '∙';
    margin-right: 4px;
}
.frm-freight .freightInfo-item.useToolTip:hover .tooltipCont {
    display: block;
}
.frm-freight .item.off {
    background-color: #f7f7f7;
}
.frm-freight .item > input {
    background: inherit;
}
.frm-freight .freightInfo-item {
    width: 59.5%;
}
.frm-freight .freightInfo-item ~ .item[name='freightUnit'] {
    width: 36%;
}
.frm-freight .item span.txt {
    padding-right: 12px;
    letter-spacing: -1px;
}

/* freightInfo-popup 팝업 */
.freightInfo-popup-wrap {
    position: relative;
    margin-left: auto;
    width: max-content;
}
.freightInfo-popup-wrap .more-freightInfo {
    display: block;
    padding-top: 16px;
    padding-right: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.36px;
    text-decoration-line: underline;
    text-underline-offset: 2px;
}
.freightInfo-popup-wrap .more-freightInfo.off {
    color: #8d9291;
}
.freightInfo-popup {
    display: none;
    box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.2);
}
.freightInfo-popup.active {
    display: block;
}
.freightInfo-popup .freightInfo-popup-inner {
    margin-top: 16px;
}
.freightInfo-popup .package-box {
    position: relative;
    background-color: #f7f7f7;
    padding: 0px 24px;
}
.freightInfo-popup .package-box + .package-box {
    margin-top: 12px;
}
.freightInfo-popup .added .btn-popup-close {
    position: absolute;
    top: 13px;
    right: 24px;
}
.freightInfo-popup .added {
    height: 50px;
    display: flex;
    align-items: center;
}
.freightInfo-popup .added::before {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.7916 4.81072L9.1545 1.10413L1 4.81072L10.6371 8.51731V18.8958L18.7916 15.1892V4.81072Z' fill='white' stroke='black' stroke-linejoin='round'/%3E%3Cpath d='M16.3262 9.42896L16.0381 9.56372L14.9258 10.0823L14.2148 10.4143V7.09204L5.43164 3.71509L4.31934 3.28735L5.4043 2.79321L6.62598 2.23657L6.81641 2.14966L7.0127 2.22485L16.0059 5.68384L16.3262 5.80688V9.42896Z' stroke='black'/%3E%3Cpath d='M1 4.81073L10.6371 8.51732V18.8958L1 15.1892V4.81073Z' fill='white' stroke='black' stroke-linejoin='round'/%3E%3Cpath d='M10.6367 8.51732L18.7912 4.81073' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E")
        no-repeat center / 17px 17px;
}
.freightInfo-popup .added .package-name {
    color: #121212;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.48px;
    margin-left: 12px;
}
.freightInfo-popup .added .package-info {
    color: #121212;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.48px;
    margin-left: 16px;

    width: 176px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.freightInfo-popup .edit {
    padding-top: 20px;
    padding-bottom: 20px;
}
.freightInfo-popup .view-wrap {
    text-align: center;
    margin-bottom: 16px;
}
.freightInfo-popup .view-box {
    display: inline-block;
    position: relative;
    max-width: 210px;
}
.freightInfo-popup .view-box img {
    width: 100%;
}
.freightInfo-popup .view-box .view-text {
    position: absolute;
    color: #00a491;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.42px;
}
.freightInfo-popup .view-box .length {
    bottom: 0;
    left: 32px;
}
.freightInfo-popup .view-box .width {
    bottom: 0;
    right: 32px;
}
.freightInfo-popup .view-box .height {
    top: 32px;
    right: 0;
}
.freightInfo-popup .view-box .quantity {
    position: absolute;
    bottom: -4px;
    right: -24px;
    transform: translateX(100%);
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 51px;
    height: 51px;
    border-radius: 50%;
    background-color: #1428a0;
    color: #fff;

    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.54px;
}
.freightInfo-popup .form-wrap .rows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.freightInfo-popup .form-wrap > .rows {
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.freightInfo-popup .form-wrap > .rows .field {
    flex: 1;
}
.freightInfo-popup .form-wrap .field-label {
    color: #121212;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.48px;
    margin-bottom: 8px;
}
.freightInfo-popup .form-wrap .field-label::after {
    content: '*';
    color: #eb0b0b;
    position: relative;
    left: 2px;
    top: 1px;
}
.freightInfo-popup .form-wrap .cm {
    flex-shrink: 0;
    color: #121212;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.48px;
}
.freightInfo-popup .form-wrap .v-message, .freightInfo-popup .form-wrap .v-message-required {
    display: none !important;
    align-items: center;
    column-gap: 4px;
    margin-top: 8px;
    color: #da5359;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.42px;
}
.freightInfo-popup .form-wrap .v-message::before, .freightInfo-popup .form-wrap .v-message-required::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23DA5359'/%3E%3Cpath d='M7.99902 10.4004C8.44085 10.4004 8.79883 10.7584 8.79883 11.2002C8.79872 11.6419 8.44079 12 7.99902 12C7.55735 11.9999 7.19932 11.6419 7.19922 11.2002C7.19922 10.7584 7.55729 10.4005 7.99902 10.4004ZM7.99902 4C8.44079 4 8.79872 4.35807 8.79883 4.7998V8.5C8.79883 8.94183 8.44085 9.2998 7.99902 9.2998C7.55729 9.2997 7.19922 8.94176 7.19922 8.5V4.7998C7.19932 4.35813 7.55735 4.00011 7.99902 4Z' fill='white'/%3E%3C/svg%3E")
        no-repeat center / contain;
}
.freightInfo-popup .quantity-field .rows {
    justify-content: flex-start;
}
.freightInfo-popup .quantity-field button {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    color: #cccccc;
    border: 1px solid #ddd;
}
.freightInfo-popup .quantity-field button.active {
    color: #1428a0;
    border: 1px solid #1428a0;
    background: #fff;
}
.freightInfo-popup .quantity-field input {
    text-align: center;
    max-width: 111px;
}
/* field-error */
.freightInfo-popup .form-wrap .field-error .v-message, .freightInfo-popup .form-wrap .field-error-required .v-message-required {
    display: flex !important;
}
.freightInfo-popup .form-wrap .field-error input {
    border: 1px solid #da5359;
}
.freightInfo-popup .btn-wrap .btn {
    display: block;
    margin-left: 0;
    font-weight: 500;
    line-height: 150%;
}
.freightInfo-popup .btn-wrap .btn + .btn {
    margin-top: 12px;
}
.freightInfo-popup .btn-wrap .btn-gray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
}
.freightInfo-popup .btn-wrap .btn-gray:hover {
    background: #ddd;
}
@media screen and (max-width: 767px) {
    /* 견적조회 디자인 수정 */
    .frm-freight .freightInfo-item .tooltipCont {
        left: 0;
        width: 56vw;
        transform: none;
    }
    .frm-freight .freightInfo-item .tooltipCont::after {
        left: 14%;
    }
    .frm-freight .freightInfo-item .tooltipCont li {
        word-break: break-all;
    }
    .frm-freight .freightInfo-item {
        width: calc(100% - 75px - 12px);
    }
    .frm-freight .freightInfo-item ~ .item[name='freightUnit'] {
        width: 75px;
    }
    /* freightInfo-popup 팝업 */
    .freightInfo-popup-wrap {
        width: 100%;
    }
    .freightInfo-popup-wrap .more-freightInfo {
        font-weight: 700;
        padding-top: 24px;
        margin: 0 auto;
    }
    .freightInfo-popup.auto-search {
        margin-top: 4px;
        padding: 12px 10px 0px;
    }
    .freightInfo-popup .added .btn-popup-close {
        top: 13px;
        right: 10px;
    }
    .freightInfo-popup > .btn-popup-close {
        position: static;
        margin-left: auto;
        margin-bottom: 4px;
    }
    .freightInfo-popup .added {
        padding: 0px 10px;
    }
    .freightInfo-popup .added .package-info {
        flex: 1;
        padding-right: 82px;
    }
    .freightInfo-popup .freightInfo-popup-inner {
        height: 480px;
        overflow-y: scroll;
        margin-top: 4px;
        padding-bottom: 20px;
    }
    .freightInfo-popup .edit.package-box {
        padding: 8px 12px;
    }
    .freightInfo-popup .view-wrap {
        margin-top: 3px;
        margin-bottom: 20px;
    }
    .freightInfo-popup .view-box {
        /* max-width: 129px; */
        max-width: 157px;
    }
    .freightInfo-popup .view-box .view-text {
        font-size: 12px;
        letter-spacing: -0.36px;
    }
    .freightInfo-popup .view-box .length {
        left: 24px;
    }
    .freightInfo-popup .view-box .width {
        right: 18px;
    }
    .freightInfo-popup .view-box .height {
        top: 23px;
        right: -3px;
    }
    .freightInfo-popup .view-box .quantity {
        top: 47px;
        right: -6px;
        width: 33px;
        height: 33px;
        font-size: 11px;
        letter-spacing: -0.351px;
    }
    .freightInfo-popup .form-wrap .rows .rows {
        gap: 4px;
    }
    .freightInfo-popup .form-wrap > .rows {
        margin-bottom: 12px;
    }
    .freightInfo-popup .form-wrap .v-message::before {
        flex-shrink: 0;
    }
    .freightInfo-popup .quantity-field input {
        max-width: none;
    }
    .freightInfo-popup .btn-wrap .btn + .btn {
        margin-top: 10px;
    }
}
/* //freightInfo popup */