@charset "utf-8";
/*font*/
@font-face {font-family:"icomoon";src:url("font/icomoon.ttf");}
/*var*/
:root{--main-color:#365cdb;--hover-color:#284fd2;}
/*global style*/
ul,li,p,span,em,i,div,img,h1,h2,h3,h4,h5,h6,a,input,textarea,body{padding:0px;margin:0px;border:none;}
body{font:16px 'Manrope-Regular', 'Arial';font-weight:400;color:#333;width:100vw;overflow-x:hidden;background-color:#fff;margin:0;}
body::-webkit-scrollbar{width:4px;height:4px;background-color:#000;}
body::-webkit-scrollbar-thumb{width:4px;height:4px;border-radius:2px;background-color:var(--main-color);}
table{border-collapse:collapse;}
em,i{font-style:normal;}
a{color:#333;text-decoration:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
a:hover{color:var(--main-color);}
ul,li{list-style:none;}
img{vertical-align:top;}
hr{display:none;}
figure{margin:0;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none !important;}
input{outline:none;vertical-align:middle;}
input[type='number']{-moz-appearance:textfield;}
input[type="submit"],button{cursor:pointer;}
textarea{vertical-align:top;resize:none;outline:none;overflow:hidden;font-family:"Manrope-Regular";}
p{line-height:25px;font-size:16px;}
h1{font-size:60px;line-height:70px;font-weight:normal;font-family:"Manrope-Bold";}
h2{font-size:48px;line-height:55px;font-weight:normal;font-family:"Manrope-Bold";}
h3{font-size:30px;line-height:40px;font-weight:normal;font-family:"Manrope-Bold";}
h4{font-size:18px;line-height:20px;font-weight:normal;font-family:"Manrope-Bold";}
/* backToTop */
html{margin-top:0 !important;}
#wpadminbar{display:none;}
.hidden{display:none;}
.m-Top{margin-top:7.75vw;}
.main-width{width:74vw;margin:0 auto;}
.secd-width{width:82vw;margin:0 auto;}
.flex-box{display:flex;}
.flex-wrap{flex-wrap:wrap;}
.flex-space-bwn{justify-content:space-between;}
.flex-align-center{align-items:center;}
.other-banner img{width:100%;height:auto;}
.loadico{display:none;position:relative;width:60px;height:30px;margin:10px auto;}
.loadico:before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;background-color:var(--main-color);border-radius:50%;animation:loadl 1s linear infinite;}
.loadico:after{content:"";position:absolute;right:0;top:5px;width:20px;height:20px;background-color:#ccc;border-radius:50%;animation:loadr 1s linear infinite;}
@keyframes loadl{
0% {transform:translateX(0) scale(1);z-index:9;}
25% {transform:translateX(20px) scale(1.1);z-index:99;}
50% {transform:translateX(40px) scale(1);z-index:9;}
75% {transform:translateX(20px) scale(0.4);z-index:9;}
100% {transform:translateX(0) scale(1);z-index:9;}
}
@keyframes loadr{
0% {transform:translateX(0) scale(1);z-index:9;}
25% {transform:translateX(-20px) scale(0.4);z-index:9;}
50% {transform:translateX(-40px) scale(1);z-index:9;}
75% {transform:translateX(-20px) scale(1.1);z-index:99;}
100% {transform:translateX(0) scale(1);z-index:9;}
}

header{position:fixed;left:0;top:0;display:flex;justify-content:space-between;align-items:center;width:100%;height:4vw;padding:0 2.3vw;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.2);box-sizing:border-box;z-index:9999;}
header .logo{height:2vw;}
header .logo img{width:auto;height:100%;}
header h1,header p{line-height:1.3vw;font-size:1vw;}

.imgbase{position:fixed;left:-1200px;top:0;display:flex;align-items:center;width:1190px;/*height:1684px;*/padding:50px 75px;background-color:#fff;box-sizing:border-box;}
.imgbase .box{width:100%;}
.imgbase .box .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.imgbase .box .title img{width:328px;transform:translateX(-30px);object-fit:contain;}
.imgbase .box .title .invoice{display:flex;flex-direction:column;align-items:center;justify-content:center;width:590px;text-align:center;}
.imgbase .box .title .invoice h2{line-height:70px;margin-bottom:10px;font-size:55px;font-weight:bold;color:#000;}
.imgbase .box .title .invoice ul{display:inline-block;}
.imgbase .box .title .invoice ul li{position:relative;min-height:30px;line-height:30px;padding-left:240px;font-size:24px;text-align:left;}
.imgbase .box .title .invoice ul li label{position:absolute;left:0;top:0;width:226px;text-align:right;}
.imgbase .box .info{display:flex;justify-content:space-between;}
.imgbase .box .info .item{width:49%;border:3px solid #ced0d0;border-radius:3px;box-sizing:border-box;}
.imgbase .box .info .item h2{line-height:36px;font-size:24px;font-weight:bold;background-image:linear-gradient(#dfe0e0,#fff);border-bottom:3px solid #ced0d0;text-align:center;}
.imgbase .box .info .item .ibox{padding:16px;}
.imgbase .box .info .item .ibox p{line-height:30px;}
.imgbase .box .info .item .ibox strong{font-size:24px;}
.imgbase .box .info .item .ibox span{display:block;line-height:22px;margin-bottom:10px;font-size:18px;}
.imgbase .box .products{margin:30px 0;}
.imgbase .box .products h2{line-height:35px;margin-bottom:15px;font-size:29px;font-weight:600;text-align:center;}
.imgbase .box .products table{width:100%;}
.imgbase .box .products table td{line-height:25px;padding:5px;font-size:18px;border:1px solid #999;text-align:center;}
.imgbase .box .products table td img{width:auto;height:auto;max-width:145px;max-height:100px;object-fit:contain;}
.imgbase .box .products table td:nth-child(1){width:15.2%;}
.imgbase .box .products table td:nth-child(2){width:26.4%;}
.imgbase .box .products table .total{border:1px solid #999;border-top:none;}
.imgbase .box .products table .total td{border:none;}
.imgbase .box .products table .total td:nth-last-child(1),.imgbase .box .products table .total td:nth-last-child(2),.imgbase .box .products table .total td:nth-last-child(3){border:1px solid #999;}
.imgbase .box .shipping{margin:30px 0 15px;}
.imgbase .box .shipping h2{line-height:35px;margin-bottom:15px;font-size:29px;font-weight:600;text-align:center;}
.imgbase .box .shipping table{width:100%;}
.imgbase .box .shipping table td{line-height:25px;padding:5px;font-size:18px;border:1px solid #999;text-align:center;}
.imgbase .box .shipping table td img{width:auto;height:auto;max-width:145px;max-height:100px;object-fit:contain;}
.imgbase .box .shipping table td:nth-child(1){width:15.2%;}
.imgbase .box .shipping table td:nth-child(2){width:26.4%;}
.imgbase .box .shipping table .total{border:1px solid #999;border-top:none;}
.imgbase .box .shipping table .total td{border:none;}
.imgbase .box .shipping table .total td:nth-last-child(1){border:1px solid #999;}
.imgbase .box .shiptotal{margin-bottom:30px;}
.imgbase .box .shiptotal table{width:100%;}
.imgbase .box .shiptotal table td{width:50%;line-height:25px;padding:5px 35px;font-size:18px;border:1px solid #999;}
.imgbase .box .shiptotal table td:last-child{padding:5px;text-align:center;}
.imgbase .box .total{margin-bottom:30px;}
.imgbase .box .total h2{line-height:35px;margin-bottom:15px;font-size:29px;font-weight:600;text-align:center;}
.imgbase .box .total table{width:100%;}
.imgbase .box .total table td{width:33.33%;line-height:25px;padding:5px;font-size:18px;border:1px solid #999;text-align:center;}
.imgbase .box .tips p{line-height:40px;font-size:24px;}


.page-order{position:absolute;left:0;top:0;width:100%;padding-top:4vw;}
.main-order{padding-bottom:4vw;}
.main-order h1{line-height:4.5vw;font-size:1.4vw;text-align:center;background-color:#f2f2f2;}
.main-order h1 span{font-size:0.94vw;}
.main-order .total{margin-top:2.4vw;text-align:center;}
.main-order .total p{line-height:2vw;font-size:1.8vw;}
.main-order .total p span{color:red;}
.main-order .btn{display:flex;justify-content:center;column-gap:1vw;margin:2.4vw 0 4vw;}
.main-order .btn a,.main-order .btn span{display:block;width:15vw;line-height:3vw;text-align:center;border-radius:0.4vw;font-size:1vw;}
.main-order .btn a{background-color:#f2f2f2;}
.main-order .btn a:hover{background-color:var(--hover-color);color:#fff;}
.main-order .btn span{background-color:var(--main-color);color:#fff;cursor:pointer;}
.main-order .btn span:hover{background-color:var(--hover-color);}
.main-order .btn .download{background-color:#606060;}
.main-order .btn .download:hover{background-color:var(--hover-color);}
.main-order .pic{width:1120px;max-width:90vw;margin:0 auto;}
.main-order .pic img{width:100%;height:auto;border:2px solid #ccc;box-sizing:border-box;}
.main-error{position:fixed;left:0;top:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;}
.main-error h1{display:flex;column-gap:10px;align-items:center;line-height:50px;font-size:40px;font-weight:bold;}
.main-error h1:before{content:"\f10f";color:#ff6d6d;transform:rotate(45deg);font-family:dashicons;}

.flow-pay{display:none;position:fixed;left:0;top:0;align-items:center;justify-content:center;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:9999;}
.flow-pay .box{position:relative;width:770px;max-width:90vw;background-color:#fff;border-radius:10px;overflow:hidden;}
.flow-pay .box h2{line-height:50px;padding:0 30px;font-size:18px;font-weight:normal;background-color:#ececec;}
.flow-pay .box .close{position:absolute;right:0;top:0;width:50px;height:50px;line-height:50px;font-size:24px;cursor:pointer;text-align:center;}
.flow-pay .box .close:before{content:"\f335";font-family:dashicons;}
.flow-pay .box .payinfo{padding:30px;}
.flow-pay .box .payinfo p{line-height:30px;margin-bottom:15px;font-size:24px;}
.flow-pay .box .payinfo p span em{font-size:16px;color:#999;}
.flow-pay .box .payinfo p .wp-total{color:#ff0000;}
.flow-pay .box .payinfo p .wp-type{position:relative;display:inline-block;width:140px;line-height:30px;padding:7px;box-sizing:border-box;border:1px solid #999;font-size:18px;text-align:center;cursor:pointer;}
.flow-pay .box .payinfo p .wp-type.wechat{margin-right:15px;}
.flow-pay .box .payinfo p .wp-type.on{border-color:var(--main-color);}
.flow-pay .box .payinfo p .wp-type.on:before{content:"";position:absolute;right:0;top:0;width:30px;height:30px;background-color:var(--main-color);clip-path:polygon(0% 0%, 100% 100%, 100% 0%);}
.flow-pay .box .payinfo p .wp-type.on:after{content:"\f147";position:absolute;right:0;top:0;width:18px;height:18px;line-height:18px;text-align:center;font-family:dashicons;font-size:16px;color:#fff;}
.flow-pay .box .payinfo .qrcode{display:none;width:200px;padding:20px 40px 10px;margin:0 auto;border:1px solid #ccc;border-radius:4px;}
.flow-pay .box .payinfo .qrcode p{line-height:20px;margin:10px 0 0;font-size:14px;text-align:center;}
.flow-pay .box .payinfo .qrcode .qrbox{position:relative;width:200px;height:200px;}
.flow-pay .box .payinfo .qrcode .qrbox img{width:100%;height:100%;}
.flow-pay .box .payinfo .qrcode .qrbox .refresh{display:none;position:absolute;left:0;top:0;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;line-height:22px;font-size:16px;background-color:rgba(0,0,0,.6);color:#fff;text-align:center;cursor:pointer;}
.flow-pay .box .payinfo .qrcode .qrbox .refresh:before{content:"\f463";font-family:dashicons;line-height:50px;font-size:40px;}
.flow-pay .box .payinfo .qrcode .qrbox .refresh.expired{display:flex;}
.flow-pay .box .payinfo .qrcode .ltp{display:flex;justify-content:center;align-items:center;column-gap:10px;margin-bottom:10px;}
.flow-pay .box .payinfo .qrcode .ltp img{width:auto;height:34px;}
.flow-pay .box .payinfo .qrcode .ltp p{line-height:25px;margin:0;font-size:18px;color:#333;text-align:left;}
.flow-pay .box .payinfo .qrcode .ltp p em{display:block;line-height:20px;font-size:13px;color:#999;}
.flow-pay .box .payinfo .pbox{display:none;justify-content:center;align-items:center;min-height:100px;}
.flow-pay .box .payinfo .pbox .paybtn{display:block;line-height:50px;padding:0 40px;background-color:var(--main-color);color:#fff;border-radius:5px;cursor:pointer;}
.flow-pay .box .payinfo .pbox .paybtn:before{content:"获取支付二维码";}
.flow-pay .box .payinfo .pbox .paybtn:hover{background-color:var(--hover-color);}
.flow-pay .box .payinfo .pbox.on{display:flex;}
.flow-pay .box .payinfo .wechatbox.on.done .paybtn{display:none;}
.flow-pay .box .payinfo .wechatbox.on.done .qrcode{display:block;}
.flow-pay.on{display:flex;}

.flow-video{position:fixed;left:0;top:0;display:none;justify-content:center;align-items:center;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:999999;}
.flow-video .box{width:800px;height:450px;background-color:#fff;}
.flow-video .box iframe{width:100%;height:100%;border:none;}
.flow-video .close{position:absolute;right:0;top:0;width:80px;height:80px;line-height:80px;font-size:40px;cursor:pointer;text-align:center;color:#fff}
.flow-video .close:before{content:"\f335";font-family:dashicons;}
.flow-video .close:hover{background-color:#000;}
.flow-video.on{display:flex;}


.page-custom{position:fixed;left:0;top:0;display:flex;width:100vw;height:100vh;box-sizing:border-box;transition:all 1s;}
.page-custom.step-2{top:-100vh;}

.main-custom{position:absolute;left:0;top:0;width:100vw;height:100vh;padding-top:4vw;background-color:#fff;box-sizing:border-box;}
.main-custom .show{position:relative;;display:flex;flex-direction:column;justify-content:space-between;width:72%;height:100%;padding:2.3vw;background-color:#f2f2f2;box-sizing:border-box;z-index:2;transition:all 1s;}
.main-custom .show h2{height:1.5vw;line-height:1.5vw;font-size:1.35vw;}
.main-custom .show p{line-height:1.3vw;font-size:1vw;text-align:center;}
.main-custom .show p .model{font-weight:bold;}
.main-custom .show p .size{padding-left:0.5vw;margin-left:0.6vw;border-left:0.1vw solid #999;color:#868686;}
.main-custom .show .pic{width:100%;height:calc(100% - 10vw);text-align:center;background-color:#fff;}
.main-custom .show .pic img{width:100%;height:100%;object-fit:contain;background-color:#fff;}
.main-custom .show .back{display:none;position:absolute;top:2.3vw;right:2.3vw;align-items:flex-start;line-height:1.5vw;font-size:1.35vw;color:#868686;cursor:pointer;}
.main-custom .show .back:after{content:"\f345";display:block;line-height:1.7vw;font-family:dashicons;}
.main-custom .show .back:hover{color:var(--hover-color);}
.main-custom .show .btns{display:flex;justify-content:center;align-items:center;column-gap:1.3vw;margin-top:1vw;}
.main-custom .show .btns span,.main-custom .show .btns a{display:flex;justify-content:center;align-items:center;column-gap:0.3vw;line-height:1.2vw;padding:0.6vw 1.3vw;font-size:0.95vw;border-radius:3vw;background-color:#fff;cursor:pointer;}
.main-custom .show .btns span:hover,.main-custom .show .btns a:hover{background-color:var(--main-color);color:#fff;}
.main-custom .show .btns span:after{content:"\f235";font-family:dashicons;font-size:1.2vw;}
.main-custom .show .btns a:after{content:"\f190";font-family:dashicons;font-size:1.2vw;}
.main-custom .option{position:absolute;right:0;top:0;width:28%;height:100%;padding:6.3vw calc(2.3vw - 4px) 2.3vw 2.3vw;box-sizing:border-box;overflow-y:auto;transition:all 1s;}
.main-custom .option .title{margin-bottom:2vw;text-align:center;}
.main-custom .option .title h2{line-height:1.8vw;margin-bottom:0.5vw;font-size:1.5vw;}
.main-custom .option .title p{line-height:1.3vw;font-size:0.83vw;color:#868686;}
.main-custom .option .covertab span{display:flex;justify-content:center;align-items:center;line-height:3vw;margin-top:1vw;padding:3vw 1.5vw;font-size:3vw;font-weight:bold;border:1px solid #d0d1d2;border-radius:0.4vw;box-sizing:border-box;cursor:pointer;}
.main-custom .option .covertab span.on{border:3px solid var(--main-color);padding:calc(3vw - 2px) calc(1.5vw - 2px);}
.main-custom .option .cont{display:none;}
.main-custom .option .cont li{margin-top:3vw;}
.main-custom .option .cont h3{line-height:1.5vw;margin-bottom:1.5vw;font-size:1.35vw;font-weight:bold;}
.main-custom .option .cont h3 span{margin-left:0.5vw;color:#868686;font-weight:normal;}
.main-custom .option .cont dl{margin:0;}
.main-custom .option .cont .size{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:0.63vw;}
.main-custom .option .cont .size dd{width:48.7%;padding:0.4vw 1vw;margin:0;border:1px solid #d0d1d2;border-radius:0.4vw;box-sizing:border-box;cursor:pointer;text-align:center;}
.main-custom .option .cont .size dd label{display:block;line-height:1.3vw;font-size:0.9vw;color:#000;cursor:pointer;}
.main-custom .option .cont .size dd p{display:block;line-height:1vw;font-size:0.75vw;color:#868686;}
.main-custom .option .cont .size dd:hover{background-color:#f5f5f5;}
.main-custom .option .cont .size dd.on{padding:calc(0.4vw - 2px) calc(1vw - 2px);border-width:3px;border-color:var(--main-color);}
.main-custom .option .cont .lid{display:flex;column-gap:1.6vw;}
.main-custom .option .cont .lid dd{width:6vw;margin:0;text-align:center;}
.main-custom .option .cont .lid dd i{display:block;width:4.5vw;height:4.5vw;margin:0 auto;padding:0.3vw;border:0.15vw solid #fff;cursor:pointer;border-radius:50%;}
.main-custom .option .cont .lid dd i em{display:block;width:4.5vw;height:4.5vw;line-height:4.5vw;border-radius:50%;background-color:#000;color:#fff;font-size:2.5vw;}
.main-custom .option .cont .lid dd span{display:block;line-height:1vw;margin-top:0.3vw;font-size:0.8vw;}
.main-custom .option .cont .lid dd.on i{border-color:var(--main-color);}
.main-custom .option .cont .lid dd.disabled i em{background-color:#aaa;cursor:not-allowed;}
.main-custom .option .cont .part{display:flex;flex-wrap:wrap;column-gap:1.6vw;row-gap:1vw;}
.main-custom .option .cont .part dd{width:6vw;margin:0;text-align:center;}
.main-custom .option .cont .part dd i{display:block;width:4.5vw;height:4.5vw;margin:0 auto;padding:0.3vw;border:0.15vw solid #fff;cursor:pointer;border-radius:50%;}
.main-custom .option .cont .part dd i em{display:block;width:4.5vw;height:4.5vw;line-height:4.5vw;border-radius:50%;background-color:#000;color:#fff;font-size:2.5vw;}
.main-custom .option .cont .part dd span{display:block;line-height:1vw;margin-top:0.3vw;font-size:0.8vw;}
.main-custom .option .cont .part dd.on i{border-color:var(--main-color);}
.main-custom .option .cont .part dd.disabled i em{background-color:#aaa;cursor:not-allowed;}
.main-custom .option .cont .color{display:flex;flex-wrap:wrap;column-gap:1.6%;row-gap:1vw;}
.main-custom .option .cont .color dd{width:23.8%;margin:0;text-align:center;}
.main-custom .option .cont .color dd figure{display:block;width:100%;padding:0.3vw;border:0.15vw solid #fff;border-radius:0.4vw;box-sizing:border-box;cursor:pointer;}
.main-custom .option .cont .color dd figure img{width:100%;height:auto;object-fit:cover;border:1px solid #d0d1d2;border-radius:0.4vw;box-sizing:border-box;}
.main-custom .option .cont .color dd span{display:block;line-height:1.3vw;margin-top:0.3vw;font-size:1vw;}
.main-custom .option .cont .color dd.on figure{border-color:var(--main-color);}
.main-custom .option .cont .choose h2{line-height:2vw;padding-bottom:2vw;font-size:1.8vw;font-weight:bold;text-align:center;}
.main-custom .option .cont .choose h2 span{position:relative;border-bottom:1px solid #999;}
.main-custom .option .cont .choose h2 span:before{content:"";position:absolute;left:50%;top:100%;width:1px;height:1vw;background-color:#999;}
.main-custom .option .cont .choose h2 span:after{position:absolute;left:50%;top:calc(100% + 1vw);width:1vw;line-height:0.8vw;font-size:0.7vw;font-weight:normal;;color:#999;transform:translateX(-50%);}
.main-custom .option .cont .choose h2 .k:after{content:"Type";}
.main-custom .option .cont .choose h2 .m:after{content:"Model";}
.main-custom .option .cont .choose h2 .l{margin-right:3px;}
.main-custom .option .cont .choose h2 .l:after{content:"Lid";}
.main-custom .option .cont .choose h2 .p:before{height:2vw;}
.main-custom .option .cont .choose h2 .p:after{content:"Base shell";top:calc(100% + 2vw);width:auto;white-space:nowrap;}
.main-custom .option .cont .choose h2 .c{margin-left:3px;}
.main-custom .option .cont .choose h2 .c:after{content:"Color";}
.main-custom .option .cont .choose .tips{display:flex;justify-content:center;line-height:1.3vw;font-size:0.83vw;margin-top:1.5vw;text-align:center;color:#868686;}
.main-custom .option .cont .choose .tips figure{position:relative;text-decoration:underline;cursor:pointer;}
.main-custom .option .cont .choose .tips figure p{display:none;position:absolute;left:50%;bottom:calc(100% + 20px);transform:translateX(-50%);padding:1vw;border-radius:0.4vw;background-color:#fff;box-shadow:0 0.2vw 1vw rgba(0,0,0,.2);}
.main-custom .option .cont .choose .tips figure p img{width:15.6vw;height:auto;}
.main-custom .option .cont .choose .tips figure p:before{content:"";position:absolute;left:50%;top:100%;margin-left:-0.5vw;border:0.5vw solid transparent;border-top-color:#fff;;}
.main-custom .option .cont .choose .tips figure:hover p{display:block;}
.main-custom .option .cont .choose .goon{display:block;width:100%;line-height:3vw;margin-top:2.5vw;border:none;border-radius:0.4vw;background-color:var(--main-color);color:#fff;font-size:1vw;;text-align:center;}
.main-custom .option .cont .choose .goon:hover{background-color:var(--hover-color);}
.main-custom .option .cont.on{display:block;}
.main-custom .option::-webkit-scrollbar{width:4px;height:4px;}
.main-custom .option::-webkit-scrollbar-thumb{width:4px;height:4px;border-radius:2px;background-color:var(--main-color);}
.main-custom.step-2 .show{width:100%;}
.main-custom.step-2 .show .back{display:flex;}
.main-custom.step-2 .option{transform:scale(.6);}

.main-preview{position:absolute;left:0;top:100vh;width:100vw;height:100vh;padding:7vw 2.3vw 3vw;background-color:#fff;box-sizing:border-box;overflow-y:auto;}
.main-preview section{padding-bottom:3vw;margin-bottom:3vw;border-bottom:1px solid #eee;}
.main-preview section h3{display:flex;align-items:center;line-height:1.5vw;margin-bottom:1.5vw;font-size:1.35vw;font-weight:bold;}
.main-preview section h3 span{display:flex;align-items:flex-start;margin-left:0.5vw;color:#868686;font-weight:normal;}
.main-preview .configure h3{justify-content:space-between;}
.main-preview .configure h3 span{cursor:pointer;}
.main-preview .configure h3 span:after{content:"\f345";display:block;line-height:1.7vw;font-family:dashicons;}
.main-preview .configure h3 span:hover{color:var(--hover-color);}
.main-preview .configure ul{display:flex;column-gap:7.5vw;}
.main-preview .configure ul li{position:relative;padding:0.3vw 0 0.3vw 3.9vw;}
.main-preview .configure ul li strong{display:block;line-height:1.3vw;margin-bottom:0.3vw;font-size:1vw;color:#000;}
.main-preview .configure ul li p{display:flex;align-items:center;line-height:1vw;font-size:0.83vw;color:#868686;}
.main-preview .configure ul li p i{color:#000;margin-right:0.7vw;padding-right:0.7vw;border-right:2px solid #aaa;}
.main-preview .configure ul li p .mm{margin-right:0.5vw;}
.main-preview .configure ul li em{position:absolute;left:0;top:0;width:3.2vw;height:3.2vw;border-radius:50%;overflow:hidden;}
.main-preview .configure ul li.model em{display:flex;justify-content:center;align-items:center;line-height:0.85vw;padding:0 0.5vw;font-size:0.75vw;background-color:var(--main-color);color:#fff;box-sizing:border-box;text-align:center;}
.main-preview .configure ul li.lid em{display:block;line-height:3.2vw;text-align:center;background-color:#000;color:#fff;font-size:1.5vw;}
.main-preview .configure ul li.part em{display:block;line-height:3.2vw;text-align:center;background-color:#000;color:#fff;font-size:1.5vw;}
.main-preview .configure ul li.color em img{width:100%;height:100%;object-fit:cover;}
.main-preview .settlement .pic{width:10.4vw;height:7.8vw;box-sizing:border-box;}
.main-preview .settlement .pic img{width:100%;height:100%;border-radius:0.6vw;border:1px solid #d0d1d2;object-fit:contain;box-sizing:border-box;}
.main-preview .settlement .setnum{position:relative;display:inline-block;height:2vw;padding:0 2vw;border:1px solid #d0d1d2;border-radius:0.2vw;overflow:hidden;}
.main-preview .settlement .setnum input{width:3.5vw;height:100%;line-height:2.5vw;text-align:center;font-size:1vw;color:#000;}
.main-preview .settlement .setnum i{position:absolute;top:0;width:2vw;height:2vw;line-height:2vw;text-align:center;color:#333;font-size:1vw;cursor:pointer;}
.main-preview .settlement .setnum i:hover{background-color:#f5f5f5;}
.main-preview .settlement .setnum .cut{left:0;}
.main-preview .settlement .setnum .add{right:0;}
.main-preview .settlement .setnum.disabled input,.main-preview .settlement .setnum.retinue input{color:#ccc;}
.main-preview .settlement .setnum.disabled i,.main-preview .settlement .setnum.retinue i{background-color:rgba(239,239,239,.3);color:#ccc;cursor:default;}
.main-preview .settlement .setnum.disabled i:hover,.main-preview .settlement .setnum.retinue i:hover{background-color:rgba(239,239,239,.3);}
.main-preview .settlement .product{display:flex;align-items:center;margin-bottom:2vw;}
.main-preview .settlement .product span{display:block;line-height:1vw;margin-right:0.5vw;font-size:0.83vw;color:#868686;}
.main-preview .settlement .product .text{margin:0 20vw 0 1vw;}
.main-preview .settlement .product .text p{line-height:1.3vw;font-size:1vw;}
.main-preview .settlement .product .text .model{margin-bottom:0.3vw;color:#000;}
.main-preview .settlement .product .text .size{color:#868686;}
.main-preview .settlement .tips{line-height:1vw;margin:1.5vw 0 3vw;font-size:0.83vw;color:#868686;}
.main-preview .settlement .order p{line-height:1.5vw;font-size:0.83vw;color:#000;}
.main-preview .settlement .order span{display:block;line-height:1.5vw;font-size:1.2vw;}
.main-preview .settlement .order table{width:100%;text-align:center;}
.main-preview .settlement .order table td{width:14.3%;padding:1.5vw 0.5vw;box-sizing:border-box;}
.main-preview .settlement .order table tr{border-bottom:1px solid #d0d1d2;}
.main-preview .settlement .order table tr:nth-last-child(1),.main-preview .settlement .order table tr:nth-last-child(2){border-bottom:none;}
.main-preview .settlement .order table .head{line-height:1.3vw;font-size:0.83vw;border-bottom:none;color:#868686;background-color:#f2f2f2;}
.main-preview .settlement .order table .head td{padding:0.5vw;}
.main-preview .settlement .order table .total{background-color:#f2f2f2;}
.main-preview .settlement .order .mutli .pic{display:none;position:relative;width:10.4vw;height:7.8vw;cursor:pointer;}
.main-preview .settlement .order .mutli .pic img{border-radius:0.5vw;}
.main-preview .settlement .order .mutli .pic:nth-last-child(1){margin-bottom:0;}
.main-preview .settlement .order .mutli .pic:before{/*content:"";*/position:absolute;left:-1.4vw;top:50%;width:1vw;height:1vw;margin-top:-0.5vw;border:1px solid #aaa;border-radius:0.2vw;box-sizing:border-box;}
.main-preview .settlement .order .mutli .pic.on{display:block;}
.main-preview .settlement .order .mutli .pic.on:before{border-color:var(--hover-color);}
.main-preview .settlement .order .mutli .pic.on:after{/*content:"\f15e";*/position:absolute;left:-1.4vw;top:50%;width:1vw;height:1vw;line-height:1vw;margin-top:-0.5vw;text-align:center;font-family:dashicons;color:var(--hover-color)}
.main-preview .settlement .order .selspec{position:relative;width:6.4vw;height:2vw;margin:0.5vw auto 0;z-index:2;}
.main-preview .settlement .order .selspec span{display:block;line-height:calc(2vw - 2px);padding:0 2vw 0 1vw;font-size:0.85vw;box-sizing:border-box;border:1px solid #aaa;text-align:left;color:#888;cursor:pointer;}
.main-preview .settlement .order .selspec span:before{content:"\f140";position:absolute;right:0;top:0;width:2vw;line-height:2vw;text-align:center;font-family:dashicons;}
.main-preview .settlement .order .selspec .ops{display:none;position:absolute;left:0;top:100%;width:100%;background-color:#fff;border:1px solid #aaa;border-top:none;box-sizing:border-box;}
.main-preview .settlement .order .selspec .ops em{display:block;line-height:1.6vw;padding:0 1vw;font-size:0.75vw;cursor:pointer;text-align:left;}
.main-preview .settlement .order .selspec .ops em:hover{background-color:#f5f5f5;}
.main-preview .settlement .order .selspec.open .ops{display:block;}

.main-preview .subinfo{padding-bottom:0;margin-bottom:0;border-bottom:none;}
.main-preview .subinfo .fillInfo{display:flex;justify-content:space-between;flex-wrap:wrap;}
.main-preview .subinfo .enter{display:flex;flex-wrap:wrap;column-gap:1%;row-gap:0.5vw;width:50%;}
.main-preview .subinfo .enter input,.main-preview .subinfo .enter select,.main-preview .subinfo .enter textarea{width:100%;height:2.2vw;padding:0 1vw;border:1px solid #d0d1d2;border-radius:0.4vw;box-sizing:border-box;font-size:0.83vw;}
.main-preview .subinfo .enter textarea{width:100%;height:8vw;padding:0.8vw 1vw;}
.main-preview .subinfo .enter button{width:100%;height:3vw;border:none;background-color:var(--main-color);color:#fff;font-size:1vw;border-radius:0.4vw;}
.main-preview .subinfo .enter button:hover{background-color:var(--hover-color);}
.main-preview .subinfo .orderInfo{width:46.4%;padding:0.5vw 2.2vw 2.2vw;border-radius:0.4vw;border:1px solid #d0d1d2;box-sizing:border-box;}
.main-preview .subinfo .orderInfo ul li{display:flex;justify-content:space-between;align-items:center;padding:1.5vw 0;border-bottom:1px solid #d0d1d2;}
.main-preview .subinfo .orderInfo ul li label{display:block;line-height:1.5vw;font-size:1.3vw;}
.main-preview .subinfo .orderInfo ul li p{line-height:1.5vw;font-size:1.2vw;}
.main-preview .subinfo .orderInfo .suborder{width:100%;height:3vw;margin-top:1.5vw;border:none;background-color:var(--main-color);color:#fff;font-size:1vw;border-radius:0.4vw;}
.main-preview .subinfo .orderInfo .suborder:hover{background-color:var(--hover-color);}
.main-preview::-webkit-scrollbar{width:4px;height:4px;}
.main-preview::-webkit-scrollbar-thumb{width:4px;height:4px;border-radius:2px;background-color:var(--main-color);}

.main-success{padding:5vw 0;text-align:center;}
.main-success img{width:530px;max-width:100%;height:auto;}
.main-success h1{line-height:2.5vw;margin:1vw 0;font-size:2vw;color:#333;}
.main-success p{margin-top:0.3vw;}
.main-success p a{color:var(--main-color);text-decoration:underline;}

.prompt,.loading{position:fixed;left:50%;top:50%;padding:1.5vw 2vw;transform:translateX(-50%);background-color:rgba(0,0,0,.5);border-radius:0.5vw;opacity:0;z-index:-1;transition:opacity .5s,z-index .5s;}
.prompt p,.loading p{position:relative;line-height:1.5vw;padding-left:2vw;font-size:1vw;color:#fff;}
.prompt p:before,.loading p:before{position:absolute;left:0;top:0;width:1.5vw;height:1.5vw;line-height:1.5vw;text-align:center;font-family:dashicons;font-size:1.5vw;}
.prompt.warning p:before{content:"\f14c";color:#ffc600;}
.prompt.error p:before{content:"\f10f";color:#ff6d6d;transform:rotate(45deg);}
.prompt.on,.loading.on{opacity:1;z-index:999999;}
.loading p:before{content:"\f463";color:#5af0a8;animation:loadRotate 1s linear infinite;}
@keyframes loadRotate{
0% {transform:rotate(0);}
100% {transform:rotate(360deg);}
}