input{ border: 1px solid #817f8d; width: clamp(200px,4vw,400px); height: clamp(30px,0.6vw,60px); vertical-align: middle; } p{ color: #52505a; font-family: "Alibaba PuHuiTi"; font-size: clamp(1rem, 1.5vw, 2rem); font-style: normal; color: #52505a; } select{ width: clamp(207px,4.14vw,414px); height: clamp(32px,0.64vw,64px); } input{ padding-left: 5px; } textarea{ resize: none; } button:active{ background-color: #817f8d; } button:hover{ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } /* 第一部分 */ .main>.main-box>.control .a-check>form{ display: flex; } .main>.main-box>.control .a-check div{ flex: 1; padding-top: clamp(20px,0.4vw,40px); padding-bottom: clamp(20px,0.4vw,40px); display: flex; } .main>.main-box>.control .a-check .check1{ justify-content: end; } .main>.main-box>.control .a-check .check2{ justify-content: center; } .main>.main-box>.control .a-check .check3{ justify-content: start; align-items: center; } .main>.main-box>.control .a-check div>button{ width: clamp(70px,1.4vw,140px); height: clamp(32px,1.14vw,64px); border: 1px solid #817f8d; } /* 第二部分 */ /* 2-1 */ .main>.main-box>.control .a-result>form>.box1{ display: flex; } .main>.main-box>.control .a-result .box1>div{ flex: 1; padding-top: clamp(20px,0.4vw,40px); padding-bottom: clamp(20px,0.4vw,40px); display: flex; } .main>.main-box>.control .a-result .box1>.item1{ justify-content: end; } .main>.main-box>.control .a-result .box1>.item2{ justify-content: center; } .main>.main-box>.control .a-result .box1>.item3{ justify-content: start; } /* 2-2 */ .main>.main-box>.control .a-result>form>.box2{ display: flex; } .main>.main-box>.control .a-result .box2>div{ padding-top: clamp(20px,0.4vw,40px); padding-bottom: clamp(20px,0.4vw,40px); display: flex; } .main>.main-box>.control .a-result .box2>.item1{ justify-content: end; flex: 1; } .main>.main-box>.control .a-result .box2>.item2{ flex: 2; } /* 第三部分 */ /* 2-3 */ .main>.main-box>.control .b-check>form>.box3{ display: flex; } .main>.main-box>.control .b-check .box3>div{ flex: 1; padding-top: clamp(20px,0.4vw,40px); padding-bottom: clamp(20px,0.4vw,40px); display: flex; } .main>.main-box>.control .b-check .box3>.item1{ justify-content: end; } .main>.main-box>.control .b-check .box3>.item2{ justify-content: center; } .main>.main-box>.control .b-check .box3>.item3{ justify-content: start; } /* 2-4 */ .main>.main-box>.control .b-check .box4{ text-align: center; } .main>.main-box>.control .b-check .box4>button{ width: clamp(100px,2vw,200px); height: clamp(40px,0.8vw,80px); font-size: clamp(15px,0.3vw,30px); border: 1px solid #817f8d; } /* 第四部分 */ /* 2-5 */ .main>.main-box>.control .b-pay>form>.box5{ display: flex; } .main>.main-box>.control .b-pay .box5>div{ flex: 1; padding-top: clamp(20px,0.4vw,40px); padding-bottom: clamp(20px,0.4vw,40px); display: flex; } .main>.main-box>.control .b-pay .box5>.item1{ justify-content: end; } .main>.main-box>.control .b-pay .box5>.item2{ justify-content: center; } .main>.main-box>.control .b-pay .box5>.item3{ justify-content: start; } /* 2-6 */ .main>.main-box>.control .b-pay>form>.box6{ display: flex; } .main>.main-box>.control .b-pay .box6>div{ flex: 1; padding-top: clamp(20px,0.4vw,40px); padding-bottom: clamp(20px,0.4vw,40px); display: flex; } .main>.main-box>.control .b-pay .box6>.item1{ justify-content: end; } .main>.main-box>.control .b-pay .box6>.item2{ justify-content: center; } .main>.main-box>.control .b-pay .box6>.item3{ justify-content: start; } /* 2-7 */ .main>.main-box>.control .b-pay .box7{ text-align: center; } .main>.main-box>.control .b-pay .box7>button{ width: clamp(130px,2.6vw,260px); height: clamp(60px,1.2vw,120px); font-size: clamp(25px,0.5vw,50px); border: 1px solid #817f8d; color: #434244; }