@charset "UTF-8";
.bannerQuoteSwiperWrap2 .swiper-slide {
    height: 80px
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 1px
}

.custom-scrollbar.csu1::-webkit-scrollbar {
    height: 50px
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d3d3d3
}

.custom-scrollbar::-webkit-scrollbar-track {
    border-radius: 10px
}

[flex] {
    display: flex
}

[center] {
    align-items: center
}

.wenhaoIcon[data-title] {
    position: relative
}

.wenhaoIcon[data-title]::before {
    content: attr(data-title);
    position: absolute;
    left: 50%;
    visibility: hidden;
    top: 0;
    transform: translate(-50%, -105%);
    padding: 4px;
    line-height: 1.5;
    border-radius: 2px;
    background-color: #000;
    text-align: left;
    color: #fff;
    font-size: 12px;
    width: 200px
}

.wenhaoIcon[data-title]:hover::after, .wenhaoIcon[data-title]:hover::before {
    transition: visibility .1s .1s;
    visibility: visible
}

.quoteBoxHeader .stepBar {
    width: fit-content;
    margin: 0 auto .44em;
    font-size: 14px
}

@media screen and (max-width: 1000px) {
    .quoteBoxHeader {
        display: none
    }

    .stepBar {
        display: none
    }
}

.quoteBoxHeader .stepBar .stepItem b {
    font-size: 1.25em;
    color: #68bd2c
}

.quoteBoxHeader .stepBar .stepItem.active .stepLine {
    border-color: #68bd2c !important
}

.quoteBoxHeader .stepBar .stepItem .stepLine {
    width: 5.5em;
    border: 2px solid transparent
}

.quoteBoxHeader .stepBar .stepItem .stepNum {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.06em;
    height: 1.06em;
    flex-shrink: 0;
    text-align: center;
    border-radius: 50%;
    background-color: #fff
}

b {
    display: inline-block;
    font-weight: inherit !important;
    font-family: modalicon !important
}

b::before {
    display: inline-block;
    font-family: modalicon !important
}

.customCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #afb1b3;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #fff;
    transition: all .3s;
    flex-shrink: 0
}

.customCircle::after {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%
}

.customCircle[isactive] {
    border-color: #d24600;
    background: #d24600
}

.customCircle[isactive]::after {
    background-color: #fff
}

.customCircle1 {
    width: 18px
}

.customCircle1::after {
    width: 6px;
    background: #d4d7d9
}

.customCircle2 {
    width: 18px
}

@media screen and (max-width: 1000px) {
    .customCircle2 {
        width: 16px;
        margin-right: 6px
    }
}

.customCircle2::after {
    width: 6px;
    background: #fff
}

.icon-wenhao3 {
    font-size: 1em
}

@media screen and (max-width: 1000px) {
    .icon-wenhao3 {
        font-size: .91em
    }
}

button[primary] {
    min-width: auto !important;
    height: 2.5em !important;
    background-color: #d24600;
    font-size: 1.12em;
    transition: all .2s;
    cursor: pointer;
    white-space: nowrap
}

@media screen and (max-width: 1000px) {
    button[primary].nextBtn {
        height: 3em !important
    }
}

@media (any-hover: hover) {
    button[primary]:hover {
        transform: scale(1.08)
    }
}

button[disabled] {
    pointer-events: none;
    background: #e2e2e2
}

.nextBtnWrap {
    margin-top: 1em
}

.nextBtnWrap .nextBtn {
    width: 100%
}

.nextBtn {
    width: 10em;
    color: #fff;
    border-radius: 10px
}

@media screen and (max-width: 1000px) {
    .nextBtn {
        width: 9em;
        border-radius: 5px;
        font-size: 1em !important
    }

    .nextBtn b {
        font-size: 9px !important
    }
}

.quoteBoxFooter {
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background-color: #f6f6f6;
    margin: 20px -1em -1em
}

.quoteBoxFooter .finalPrice {
    font-weight: 700;
    color: #d24600;
    font-size: 1.5em
}

.quoteBoxFooter > div:first-child span {
    margin-right: 2em
}

@media screen and (max-width: 1000px) {
    .quoteBoxFooter {
        position: static;
        margin: 0 -10px -10px;
        padding: .8em;
    }

    .quoteBoxFooter .left-box{
        display: flex;
        flex-direction: column;
    }

    .quoteBoxFooter .finalPrice {
        font-size: 1.2em
    }

    .quoteBoxFooter > div:first-child span {
        margin-right: .5em
    }
}

.quoteBox {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 35em;
    background: #fff;
    border-radius: 4px;
    padding: 1em
}

.quoteBox .quoteFinishedDialog {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .25)
}

.quoteBox .quoteFinishedDialog .wrap .quoteFinishedConfirm {
    position: absolute;
    width: 50%;
    height: 40%;
    left: 50%;
    top:50%;
    padding: 20px;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}
.quoteBox .quoteFinishedDialog .wrap .quoteFinishedConfirm button{
    color:#ffffff;
    width: 114px;
    margin-top: 10px;
}

.quoteBox .quoteFinishedDialog .wrap .quoteFinishedConfirm .close{
    position: absolute;
    right: 4px;
    top:4px;
}

.quoteBox .quoteFinishedDialog .wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 37.5em;
    min-height: 20em;
    background-color: #fff
}

@media screen and (max-width: 1000px) {
    .quoteBox .quoteFinishedDialog .wrap {
        width: 29.58em
    }

    .quoteBox .quoteFinishedDialog .wrap .quoteFinishedConfirm {
        width: 80%;
    }
}

.quoteBox .quoteFinishedDialog .wrap .header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    font-size: 1.13em
}

.quoteBox .quoteFinishedDialog .wrap .header .close {
    right: 1em;
    position: absolute;
    cursor: pointer
}

.quoteBox .quoteFinishedDialog .wrap .body {
    flex: 1;
    padding: 0 1em
}

.quoteBox .quoteFinishedDialog .wrap .body .paramItem {
    display: flex;
    align-items: center;
    height: 3.75em;
    padding: 0 1em;
    margin-bottom: .63em;
    background-color: #f2f2f2
}

.quoteBox .quoteFinishedDialog .wrap .body .paramItem:last-child {
    margin-bottom: 0
}

.quoteBox .quoteFinishedDialog .wrap .body .paramItem input {
    flex: 1;
    height: 80%;
    border: none;
    background-color: transparent;
    font-size: 1em
}

.quoteBox .quoteFinishedDialog .wrap .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em
}

@media screen and (max-width: 1000px) {
    .quoteBox {
        height: auto;
        min-height: auto;
        padding: 10px
    }

    .quoteBox .quoteFinishedDialog .wrap .body .paramItem input {
        font-size: 1em !important
    }
}

.quoteBoxHeader {
    display: flex;
    align-items: center;
   
}

.quoteBox .return {
    margin-right: 4px;
    cursor: pointer;
    color: #333;
    margin-bottom: 1em
}

.quoteBox .return b {
    vertical-align: 0;
    margin-right: 4px
}

.quoteBox .stepList {
    flex: 1;
    display: grid;
    align-content: flex-start;
    grid-template-columns:1fr 2.4fr;
    grid-template-areas:"a b";
    gap: 10px
}

@media screen and (max-width: 1000px) {
    .quoteBox .stepList {
        grid-template-columns:1fr 1.6fr;
        align-items: flex-start
    }
}

.quoteBox .stepList .step-item {
    font-size: 1em
}

@media screen and (max-width: 1000px) {
    .quoteBox .stepList .step-item {
        font-size: 1em;
        margin-bottom: 1em
    }
}

.quoteBox .stepList .step-item .step-item-title {
    display: flex;
    align-items: center;
    margin-bottom: .7em;
    font-size: 1em;
    font-weight: 700
}

@media screen and (max-width: 1000px) {
    .quoteBox .stepList .step-item .step-item-title {
        margin-bottom: .8em;
        font-size: 12px;
        white-space: nowrap
    }

    .quoteBox .stepList .step-item .step-item-title span {
        font-size: 12px
    }
}

.quoteBox .stepList .step-item .step-item-title > span:first-child {
    margin-right: 4px;
    color: #d24600;
    font-weight: 700;
    text-transform: uppercase
}

.quoteBox .stepList .step-item .step-item-title > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    margin-right: 4px
}

.quoteBox .stepList .step-item .step-item-params ::v-deep .customCircle {
    position: relative;
    width: 1em;
    margin-right: .63em
}

@media screen and (max-width: 1000px) {
    .quoteBox .stepList .step-item .step-item-params ::v-deep .customCircle {
        width: 1.33em;
        margin-right: .92em
    }
}

.quoteBox .stepList .step-item .step-item-params ::v-deep .customCircle::after {
    width: 40%
}

.quoteBox .stepList .step-item .step-item-params ::v-deep .customCircle[isactive] {
    background-color: #d24600;
    border-color: #d24600
}

.quoteBox .step-size {
    min-width: 0;
    grid-area: a
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-size {
        grid-area: auto;
        background-color: #fafafa;
        padding: 5px
    }
}

.quoteBox .step-size .step-item-params {
    display: grid;
    grid-template-columns:1fr;
    gap: 1.2em;
    padding: 1.25em 1.06em;
    background-color: #fafafa;
    border-radius: 10px
}

.quoteBox .step-size .step-item-params .param-item{
    position: relative;
}

.quoteBox .step-size .step-item-params .tips{
    border-radius: 6px 0 6px 0;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1em;
    padding: 3px 10px;
    position: relative;
    top: 0;
    left: 0;
}

.quoteBox .step-size .step-item-params .tips.type2{
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    left: auto;
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-size .step-item-params {
        grid-template-columns:repeat(1, 1fr);
        background-color: transparent;
        padding: 0
    }
    .quoteBox .step-size .step-item-params .tips{
        display: none;
    }
}

.quoteBox .step-size .step-item-params .param-item {
    display: flex !important;
    align-items: center;
    min-width: 0;
    cursor: pointer
}

.quoteBox .step-qty {
    min-width: 0;
    grid-area: b
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-qty {
        grid-area: auto;
        background-color: #fafafa;
        padding: 5px
    }
}

.quoteBox .step-qty .step-item-params {
    display: grid;
    gap: 1.2em;
    padding: 1.25em 1.06em;
    background-color: #fafafa;
    border-radius: 10px
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-qty .step-item-params {
        padding: 0;
        background-color: transparent;
        white-space: nowrap
    }
}

.quoteBox .step-qty .step-item-params .param-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2px;
    align-items: center;
    cursor: pointer
}

.quoteBox .step-qty .step-item-params .param-item.hideMoldPrice {
    grid-template-columns:1fr 1fr 1fr;
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-qty .step-item-params .param-item.hideMoldPrice {
        display: grid !important;
        gap: 4px;
        grid-template-columns:1fr 1fr 1fr
    }

    .quoteBox .step-qty .step-item-params .param-item {
        grid-template-columns: 1.3fr 1fr 1fr 1fr;
    }

    .quoteBox .step-qty .step-item-params .param-item:first-child {
        display: none
    }

    .quoteBox .step-qty .step-item-params .param-item label {
        text-align: right
    }
}

.quoteBox .step-qty .step-item-params .param-item > div {
    display: flex;
    align-items: center
}

.quoteBox .step-qty .custom-qty input {
    width: 5.63em;
    height: 2.13em;
    background: #fff;
    padding: 0 .4em;
    margin-left: -.3em;
    font-size: 12px !important
}

.custom-qty-mb {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-qty .custom-qty {
        position: absolute;
        clip: rect(0, 0, 0, 0)
    }

    .custom-qty-mb {
        position: static;
        clip: auto;
        display: block !important
    }

    .custom-qty-mb-inputWrap {
        margin-top: 10px
    }

    .custom-qty-mb-inputWrap input {
        width: 80px;
        margin-right: 10px;
        padding: 4px;
        font-size: 12px !important;
        border-radius: 4px
    }
}

.quoteBox .step-edge {
    grid-column: 1/span 2
}

.quoteBox .step-edge .step-item-params {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: .63em
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-edge .step-item-params {
        grid-template-columns:repeat(2, 1fr);
        grid-gap: .42em
    }

    .quoteBox .step-edge .step-item-params .param-item {
        flex-direction: column
    }

    .quoteBox .step-edge .zoom {
        right: auto;
        top: 5px;
        left: 5px
    }
}

.quoteBox .step-edge .step-item-params .param-item {
    overflow: hidden;
    position: relative;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all .3s;
    height: 100px
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-edge .step-item-params .param-item {
        height: auto
    }
}

.quoteBox .step-edge .step-item-params .param-item .textWrap {
    flex: 1;
    padding: 10px
}

.quoteBox .step-edge .step-item-params .param-item .imgWrap {
    flex: 1.5;
    position: relative;
    height: 100%;
    margin-right: 4px
}

.quoteBox .step-edge .step-item-params .param-item .imgWrap video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.quoteBox .step-edge .zoom {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer
}

.quoteBox .step-template {
    grid-column: 1/span 2
}

.quoteBox .step-template .step-item-params {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap: .63em
}

.quoteBox .step-template .zoom {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer
}

.quoteBox .step-template .more {
    background-color: #fff0f1 !important;
    color: #d24600
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-template .step-item-params {
        grid-template-columns:repeat(2, 1fr);
        grid-gap: .42em
    }
}

.quoteBox .step-template .step-item-params .param-item {
    overflow: hidden;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .2em;
    background-color: #fafafa;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all .3s;
    text-align: center;
}

.quoteBox .step-edge .step-item-params .param-item.active, .quoteBox .step-template .step-item-params .param-item.active {
    border-color: #d24600
}

.quoteBox .step-edge .step-item-params .param-item.active::after, .quoteBox .step-template .step-item-params .param-item.active::after {
    content: "\e82c";
    position: absolute;
    width: 1.38em;
    height: 1.38em;
    line-height: 1.38em;
    right: 0;
    top: 0;
    border-bottom-left-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #d24600;
    font-family: modalicon
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-edge .step-item-params .param-item.active::after, .quoteBox .step-template .step-item-params .param-item.active::after {
        width: 1.25em;
        height: 1.25em;
        line-height: 1.25em
    }
}

@media (any-hover: hover) {
    .quoteBox .step-edge .step-item-params .param-item b:hover, .quoteBox .step-template .step-item-params .param-item b:hover {
        color: #d24600
    }

    .quoteBox .step-edge .step-item-params .param-item:hover, .quoteBox .step-template .step-item-params .param-item:hover {
        border-color: #d24600
    }
}

.quoteBox .step-template .step-item-params .param-item img {
    width: 6.94em;
    aspect-ratio: 6.94/7.38;
    object-fit: contain;
    margin: 0 0 .6em
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-template .step-item-params .param-item img {
        width: 6.6em;
        aspect-ratio: 2.25/2.5
    }
}

.quoteBox .step-finished {
    grid-column: 1/span 2
}

.quoteBox .step-finished .step-item-params {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    grid-gap: .63em
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-finished .step-item-params {
        grid-template-columns:repeat(2, 1fr);
        grid-gap: .42em
    }
}

.quoteBox .step-finished .step-item-params .param-item {
    overflow: hidden;
    position: relative;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .2em;
    height: 65px;
    background-color: #fafafa;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all .3s
}

.quoteBox .step-finished .step-item-params .param-item.active {
    border-color: #d24600
}

.quoteBox .step-finished .step-item-params .param-item.active::after {
    content: "\e82c";
    position: absolute;
    width: 1.38em;
    height: 1.38em;
    line-height: 1.38em;
    right: 0;
    top: 0;
    border-bottom-left-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #d24600;
    font-family: modalicon
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-finished .step-item-params .param-item{
        height: auto;
    }
    .quoteBox .step-finished .step-item-params .param-item.active::after {
        width: 1.25em;
        height: 1.25em;
        line-height: 1.25em
    }
}

.quoteBox .step-finished .step-item-params .param-item.active .edit {
    display: block
}

@media (any-hover: hover) {
    .quoteBox .step-finished .step-item-params .param-item b:hover {
        color: #d24600
    }

    .quoteBox .step-finished .step-item-params .param-item:hover {
        border-color: #d24600
    }
}

.quoteBox .step-finished .step-item-params .param-item img {
    width: 5em;
    object-fit: contain;
    margin: 0 .2em 0 0
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-finished .step-item-params .param-item img {
        width: 2.6em;
        aspect-ratio: 2.25/2.5
    }
}

.quoteBox .step-finished .step-item-params .param-item .edit {
    position: absolute;
    left: 4px;
    top: 4px;
    display: none
}

.quoteBox .step-package, .quoteBox .step-ribbon {
    grid-column: 1/span 2
}

.quoteBox .step-ribbon .step-item-params {
    display: grid;
    grid-template-columns:repeat(8, 1fr);
    grid-gap: .63em
}

.quoteBox .step-package .step-item-params {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    grid-gap: .63em
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-ribbon .step-item-params {
        grid-template-columns:repeat(4, 1fr);
        grid-gap: .46em .83em
    }

    .quoteBox .step-package .step-item-params {
        grid-template-columns:repeat(2, 1fr);
        grid-gap: .46em .83em
    }
}

.quoteBox .step-package .step-item-params .param-item, .quoteBox .step-ribbon .step-item-params .param-item {
    overflow: hidden;
    position: relative;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .2em;
    background-color: #fafafa;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all .3s;
    aspect-ratio: 1
}

.quoteBox .step-package .step-item-params .param-item {
    aspect-ratio: auto;
    padding: 0
}

.quoteBox .step-package .step-item-params .param-item img{
    max-width: 40%;
}

.quoteBox .step-package .step-item-params .param-item .textWrap {
    margin-left: 4px;
    font-size: 14px
}

.quoteBox .step-package .step-item-params .param-item.active, .quoteBox .step-ribbon .step-item-params .param-item.active {
    border-color: #d24600
}

.quoteBox .step-package .step-item-params .param-item.active::after, .quoteBox .step-ribbon .step-item-params .param-item.active::after {
    content: "\e82c";
    position: absolute;
    width: 1.38em;
    height: 1.38em;
    line-height: 1.38em;
    right: 0;
    top: 0;
    border-bottom-left-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #d24600;
    font-family: modalicon
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-ribbon .step-item-params .param-item {
        aspect-ratio: 7/4
    }

    .quoteBox .step-ribbon .step-item-params .param-item.active::after {
        width: 1.25em;
        height: 1.25em;
        line-height: 1.25em
    }

    .quoteBox .step-package .step-item-params .param-item .textWrap {
        font-size: 12px
    }
}

@media (any-hover: hover) {
    .quoteBox .step-ribbon .step-item-params .param-item b:hover {
        color: #d24600
    }

    .quoteBox .step-ribbon .step-item-params .param-item:hover {
        border-color: #d24600
    }
}

.quoteBox .step-ribbon .step-item-params .param-item img {
    width: 2.3em;
    aspect-ratio: 2.3/2.8;
    object-fit: contain
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-ribbon .step-item-params .param-item img {
        width: 1.88em;
        aspect-ratio: 1.88/2.33
    }
}

.quoteBox .step-upload {
    grid-column: 1/span 2
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-upload {
        grid-column: 1/span 2
    }
}

.quoteBox .step-upload .step-item-params {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32.88em;
    height: 7em;
    background-color: #fafafa
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-upload .step-item-params {
        width: 100%;
        height: 9em
    }
}

.quoteBox .step-upload .step-item-params input[type=file] {
    position: absolute;
    clip: rect(0 0 0 0)
}

.quoteBox .step-upload .step-item-params .uploadWrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.quoteBox .step-upload .step-item-params .uploadWrap .brow {
    margin: 4px;
    color: #eb7e1a;
    text-decoration-line: underline
}

.quoteBox .step-upload .step-item-params .uploadWrap .uploadIcon {
    font-size: 3em;
    color: #d24600
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-upload .step-item-params .uploadWrap .uploadIcon {
        font-size: 1.5em
    }
}

.quoteBox .step-upload .step-item-params .param-item {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-upload .step-item-params .param-item {
        padding: 0
    }
}

@media (any-hover: hover) {
    .quoteBox .step-upload .step-item-params .param-item b:hover {
        color: #d24600
    }

    .quoteBox .step-upload .step-item-params .param-item:hover {
        border-color: #d24600
    }
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload {
    justify-content: space-between;
    padding: .2em 1em
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left {
    overflow: auto;
    height: 100%;
    position: relative;
    padding: .2em
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 6px;
    background: #ebebeb
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left .icon b {
    color: #888;
    font-size: 12px;
    transform: rotate(90deg)
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left .icon.active b {
    color: #d24600
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left .upload-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    text-decoration: underline;
    vertical-align: middle
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left .upload-name {
        width: 100px
    }
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left b {
    margin: 0 6px;
    cursor: pointer
}

.quoteBox .step-upload .step-item-params.param-item-hasUpload .param-item-hasUpload-left b.icon-Down {
    font-size: 12px
}

.quoteBox .step-time {
    grid-column: 1/span 2;
    min-width: 0
}

.quoteBox .step-time .box-border {
    display: none
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-time {
        grid-column: 1/span 2
    }
}

.quoteBox .step-time .step-item-params {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: .63em;
    width: 80%;
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-time .step-item-params {
        grid-template-columns:repeat(2, 1fr);
        grid-gap: .42em;
        width: 100%;
    }
}

.quoteBox .step-time .step-item-params .param-item-wrap {
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .63em;
    background-color: #fafafa;
    box-sizing: border-box;
    cursor: pointer
}

.quoteBox .step-time .step-item-params .param-item-wrap.active {
    border-color: #d24600
}

.quoteBox .step-time .step-item-params .param-item-wrap.active::after {
    content: "\e82c";
    position: absolute;
    width: 1.38em;
    height: 1.38em;
    line-height: 1.38em;
    right: 0;
    top: 0;
    border-bottom-left-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #d24600;
    font-family: modalicon
}

@media screen and (max-width: 1000px) {
    .quoteBox .step-time .step-item-params .param-item-wrap.active::after {
        width: 1.25em;
        height: 1.25em;
        line-height: 1.25em
    }
}

.quoteBox .step-time .step-item-params .param-item-wrap .param-item {
    position: relative;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: .2em;
    font-weight: 700
}

.quoteContent {
    box-sizing: border-box;
    font-size: 16px;
    color: #333
}

.quoteContent * {
    box-sizing: border-box
}

.quoteContent ::after, .quoteContent ::before {
    box-sizing: border-box
}

.quoteBox .freeTipWrap {
    max-width: 100%;
    min-width: 80%;
    margin: 20px auto 0
}

@media screen and (max-width: 767px) {
    .quoteBox .freeTipWrap {
        width: 100%;
        margin: 0;
    }
}

.quoteBox .freeTip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin: 1em 0
}

.quoteBox .freeTip b {
    color: #68bd2c;
    margin-right: 1vw;
}

.PriceText {
    font-size: 14px
}

.PriceText .normal-text {
    display: flex;
    justify-content: left
}

.PriceText .normal-text, .PriceText .tip-text {
    text-align: left;
    margin: 0
}

.PriceText .tip-text {
    color: #de3500
}

.step-time-tip {
    color: rgb(135 132 132);
    font-size: 14px;
    margin-bottom: .3em;
    position: relative
}

@media screen and (max-width: 1000px) {
    .PriceText .normal-text, .PriceText .tip-text {
        text-align: left;
        font-size: 12px !important
    }

    .step-time-tip {
        font-size: 12px
    }
}

.line-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.2em;
    max-height: 2.4em
}

.templateDialog {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .25)
}

.templateDialog .wrap {
    position: absolute;
    inset: 10px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    background-color: #fff
}
.templateDialog .wrap .body .templateParamsC{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1em;
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .templateDialog .wrap .body .templateParamsC{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 1em;
    }
}
@media screen and (max-width: 750px) {
    .templateDialog .wrap .body .templateParamsC{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1em;
    }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
    .templateDialog .wrap .body .templateParamsC{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 1em;
    }
}

@media screen and (min-width: 320px) and (max-width: 1000px) {
    .templateDialog .wrap {
        inset: 5px
    }
}

.templateDialog .wrap .header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    font-size: 1.13em
}

.templateDialog .wrap .header .close {
    right: 1em;
    position: absolute;
    cursor: pointer
}

.templateDialog .wrap .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 0;
    padding: 0 1em;
    height: 500px;
    overflow: auto;
}
.templateDialog .wrap .body::-webkit-scrollbar {
    width: 3px;
    height: 12px;
}

.templateDialog .wrap .body::-webkit-scrollbar-thumb {
    background-color: #d3d3d3;
    border-radius: 1em;
}
 
.templateDialog .wrap .body::-webkit-scrollbar-track {
    background: #fff;
}

.templateDialog .wrap .body .swiper {
    --swiper-theme-color: #d24600
}

.templateDialog .wrap .body .swiperWrap {
    flex: 1;
    height: 0
}

.templateDialog .wrap .body .control {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1em
}

.templateDialog .wrap .body .control .swiper-button-next, .templateDialog .wrap .body .control .swiper-button-prev {
    position: static;
    margin-top: auto;
    color: #333
}

.templateDialog .wrap .body .control .swiper-button-next::after, .templateDialog .wrap .body .control .swiper-button-prev::after {
    display: none
}

.templateDialog .wrap .body .control .swiper-pagination {
    position: static;
    width: auto;
    margin: 0 10px
}

.templateDialog .wrap .body .control ::v-deep .swiper-pagination-bullet-active {
    background: #fff !important;
    outline: 2px solid #d24600
}

.templateDialog .wrap .body .control .swiper-button-next b, .templateDialog .wrap .body .control .swiper-button-prev b {
    font-size: 2em
}

.templateDialog .wrap .body .ss {
    overflow: hidden;
    position: relative;
    display: flex;
    /* width: 8.75em; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .2em;
    background-color: #fafafa;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all .3s;
    text-align: center
}

.templateDialog .wrap .body .ss.active {
    border-color: #d24600
}

.templateDialog .wrap .body .ss.active::after {
    content: "\e82c";
    position: absolute;
    width: 1.38em;
    height: 1.38em;
    line-height: 1.38em;
    right: 0;
    top: 0;
    border-bottom-left-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #d24600;
    font-family: modalicon
}

@media screen and (min-width: 320px) and (max-width: 1000px) {
    .templateDialog .wrap .body .swiper-slide.active::after {
        width: 1.25em;
        height: 1.25em;
        line-height: 1.25em
    }
}

@media (any-hover: hover) {
    .templateDialog .wrap .body .swiper-slide b:hover {
        color: #d24600
    }

    .templateDialog .wrap .body .swiper-slide:hover {
        border-color: #d24600
    }
}

.templateDialog .wrap .body .swiper-slide img {
    width: 7em;
    aspect-ratio: 1;
    object-fit: contain
}

@media screen and (min-width: 320px) and (max-width: 1000px) {
    .templateDialog .wrap .body .swiper-slide img {
        width: 4em;
        aspect-ratio: .8068669528
    }
}

.templateDialog .wrap .body .templateParamsC .zoom {
    position: absolute;
    top: .5em;
    left: .5em;
    width: 1em
}

.selectedShapeWrap{
    display: flex;
    align-items: center;
    height: 25px;
    overflow: hidden;
    font-weight: 700;
    margin-bottom: 15px;
}

@media screen and (min-width: 320px) and (max-width: 1000px) {
    .selectedShapeWrap {
        margin-bottom: 10px;
    }
}

#color_33765 .PriceText{
    display: none;
}