@charset "utf-8";

.estimate-body {
    background-color: #fff;
    margin: 0 auto;
    padding: 0 0 30px;
}
.estimate-wrapper {
    margin: 0 auto;
    color: #333;
    font-size: 14px;
}
.estimate-wrapper .btn-solid,
.estimate-wrapper button{
    cursor: pointer;
}
.estimate-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px 0;
    border-top: 1px solid #333;
    /*border-bottom: 1px solid #ddd;*/
}
.estimate-header__content{
    display: flex;
    align-items: center;
    gap: 20px;
    width: 1200px;
    padding: 0 50px;
    margin: 0 auto;
}
.estimate-header__btn-back,
.estimate-header__btn-close{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #677b8d;
    border-radius: 5px;
}
.estimate-header__btn-back:after{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 1px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transform: rotate(-135deg);
    vertical-align: top;
}
.estimate-header__btn-close:before,
.estimate-header__btn-close:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: #fff;
    transform-origin: center;
}
.estimate-header__btn-close:before{
    transform: translate(-50%, -50%) rotate(45deg);
}
.estimate-header__btn-close:after{
    transform: translate(-50%, -50%) rotate(-45deg);
}
.estimate-header__btn.btn-solid{
    line-height: 28px;
}
.estimate-header__btn-online{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    line-height: 28px;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    border: 1px solid #a83624;
    background-color: #a83624;
    text-align: center;
}
.estimate-header__btn-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.estimate-main{
    width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}
.estimate-main_btn-wrap{
    position: relative;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #ededed;
}
.estimate-main__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
}
.estimate-main__top > div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.estimate-main__top__logo {
    width: 120px;
}
.estimate-main__top__qr{
    width: 70px;
    border: 2px solid #000;
    /*height: 120px;*/
}
.estimate-main__txt-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.estimate-main__txt-wrap span {
    display: block;
}
.estimate-main h2 {
    margin-top: 30px;
    font-size: 30px;
    text-align: center;
}
.estimate-main h3 {
    margin-bottom: 10px;
    font-size: 20px;
}
.estimate-main h3.btn-wrap-style {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.estimate-main h3 .btn-wrap {
    display: flex;
    align-items: center;
    justify-items: center;
    gap: 20px;
}
.estimate-main h3 .btn-wrap select {
    padding: 5px 10px;
    appearance: auto;
}
.estimate-main h3 .btn-wrap span{
    font-size: 18px;
}
.estimate-section {
    margin: 10px 0;
    padding: 20px 0;
}
.estimate-section .wrap-board{
    width: 100%;
}
.estimate-section .form-upload .box-file .txt-drag:before{
    background: url(../../images/img-drag.png) no-repeat;
}
.estimate-section .icon-file-up{
    background: url(../../images/icon-file-up.png) no-repeat;
}
.estimate-section .form-upload .top-upload .link-del:after{
    background: url(../../images/icon-del-r.png) no-repeat;
}
.estimate-section.estimate-section__top {
    border-bottom: 1px solid #ededed;
    margin-bottom: 20px;
    padding-bottom: 30px;
}
.estimate-section__table--column {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 10px;
}
.estimate-section__table {
    flex: 1;
}
.estimate-section__table > em{
    display: inline-block;
    margin-bottom: 10px;
    font-size: 20px;
}
.estimate-section__table + .estimate-section__table:not(li) {
    margin-top: 15px;
}
.estimate-section .contents-form + .contents-form{
    margin-top: 60px;
}
.estimate-table {
    width: 100%;
    border-collapse: collapse;
}
.estimate-table th {
    background-color: #f6f6f6;
}
.estimate-table td,
.estimate-table th {
    padding: 8px;
    border: 1px solid #e8e8e8;
    text-align: center;
}
.estimate-table td.txt-left{
    text-align: left;
}
.estimate-table td input{
    width: 100%;
    height: 24px;
    padding: 0 5px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: #fff;
}
.estimate-table .component-select-r{
    background: url(../../images/arrow-select.png) no-repeat right 10px top 11px #cacaca;
}
.estimate-table td .input-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
}
.estimate-table td .input-wrap > span{
    flex: 1;
    min-width: fit-content;
}
.estimate-table .qr-code {
    width: 80px;
    height: 80px;
    text-align: center;
}
.estimate-total {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
}
.estimate-total dt {
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 700;
}
.estimate-total dd {
    font-size: 22px;
}
.estimate-total dd + dd {
    margin-top: 5px;
}
.estimate-terms li + li {
    margin-top: 4px;
}
.estimate-terms__caution {
    margin: 10px 0;
    color: #BD362F;
}
.js-estimateTable.hide{
    display: none;
}
.estimate-files__content{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* 기본 파일 입력 필드 숨기기 */
.file-upload {
    display: none;
}

.estimate-email b{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 400;
}

.btn-solid {display:inline-flex; align-items: center; justify-content: center; padding:0 7px; line-height: 28px;  border-radius: 5px; font-size: 12px; color: #ffffff; font-weight: bold; background-color:#333; border:1px solid #333; text-align:center;}
.btn-solid.type-red {background-color:rgb(176, 49, 49);; border-color:rgb(176, 49, 49);}
.btn-solid .icon-search {display:inline-block; margin-left:5px; width:12px; height:13px; background:url(../images/icon-search-w.png) no-repeat;}
.btn-solid.type-white {background-color:#fff; border:1px solid #999;color:#000;}
.btn-solid.type-gray {background-color:#999; border:1px solid #999;}
.btn-solid.type-gray2 {background-color:#677b8d; border:1px solid #677b8d;}
.btn-solid.type-s {min-width:100px; padding:0 20px;}
.btn-solid.type-gray-light {background-color:#cacaca; border:1px solid #cacaca; color:#000;}
.btn-solid.type-m {height:40px; line-height:38px; font-size:14px; padding:0 18px; font-weight:500;}
.btn-solid.type-m2 {height:40px; min-width:100px; line-height:38px; font-size:14px; padding:0 18px; font-weight:500;}
.btn-solid.type-blue {background-color:#1966ae; border:1px solid #1966ae;}
.btn-solid.type-search {width:80px;}

/* START : Quotation Request Form */
.quotation-request_btn-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quotation-request_btn-wrap > div{
    display: flex;
    align-items: center;
    gap: 20px;
}

.quotation-request .component-checkbox input:checked + i:before{
    margin: 0;
}
.quotation-request .component-table.type-table tr td{
    position: relative;
    padding: 0;
    font-size: 11px;
}
.quotation-request .component-table tr td .component-select{
    width: 74px;
}
.quotation-request .component-table tr td .component-input,
.quotation-request .component-table tr td .component-calen{
    margin: 0 auto;
}
.quotation-request .estimate-total{
    border-bottom: 0;
}
.quotation-request .component-table thead tr th {
    font-size: 12px;
}
.quotation-request .component-select {
    padding: 0 23px 0 10px;
}
.quotation-request .write-btn {
    display: block;
    width: 70px;
    margin: 0 auto;
    cursor: pointer;
}
.quotation-request .write-pop {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #000;
    padding: 10px;
    border-radius: 8px;
    width: 240px;
}
.quotation-request .write-pop .write-pop_header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.quotation-request .write-pop textarea {
    height: 100px;
    width: 100%;
}
.quotation-request .write-pop .write-pop_save-btn {
    display: inline-flex;
    align-items: center;
    min-width: 72px;
    text-align: center;
    padding: 0 10px;
    line-height: 24px;
    border-radius: 5px;
    background-color: #333333;
    font-size: 12px;
    color: #ffffff;
    justify-content: center;
    font-weight: bold;
}

.quotation-request .component-checkbox input:checked + i:before {
    background-image: none;
.quotation-request }
.write-pop_close-btn {
    position: relative;
    width: 20px;
    height: 20px;
}
.quotation-request .write-pop_close-btn::before,
.quotation-request .write-pop_close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background-color: #000;
    transform-origin: center;
}

.quotation-request .write-pop_close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.quotation-request .write-pop_close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.quotation-request .quotation-container {

}
.quotation-request .quotation-container .row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.quotation-request .quotation-container .row.label-small {
    margin-bottom: 8px;
}
.quotation-request .quotation-container .row .label {
    width: 150px;
    font-weight: bold;
    font-size: 14px;
}
.quotation-request .quotation-container .row .value {
    flex: 1;
    text-align: left;
    font-size: 14px;
}
.quotation-request .quotation-container .row input[type="number"],
.quotation-request .quotation-container .row input[type="text"],
.quotation-request .quotation-container .row select {
    max-width: 200px;
    flex: 1;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.quotation-request .quotation-container select + input {
    margin-left: 10px;
}
.quotation-request .quotation-container .row button.btn {
    margin-left: 8px;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}
.quotation-request .quotation-container .row.last-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
}
.quotation-request .quotation-container .divider {
    border-top: 1px solid #e0e0e0;
    margin: 16px 0;
}
.quotation-request .quotation-container .section-title {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 8px;
}
.quotation-request .quotation-container .payment-terms {
    margin-bottom: 12px;
}
.quotation-request .quotation-container .payment-terms label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #a7a7a7;
}
.quotation-request .quotation-container .payment-terms label:last-child input[type="text"] {
    width: 280px;
}

.quotation-request .quotation-container .payment-terms input[type="radio"] {
    margin-right: 6px;
}
.quotation-request .quotation-container .payment-terms label:has(input[type="radio"]:checked) {
    color: #000;
}
.quotation-request .quotation-container .payment-terms input[type="number"],
.quotation-request .quotation-container .payment-terms input[type="text"] {
    width: 60px;
    padding: 4px 6px;
    margin: 0 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.quotation-request .quotation-container .buttons {
    text-align: center;
    margin-top: 20px;
}
.quotation-request .quotation-container .buttons .btn-primary {
    background-color: #0b4c66;
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 10px;
}
/* END : Quotation Request Form */