@media screen and (max-width:768px){ .rc-button{ display: flex; justify-content: center; font-size: 14px; width: 100%; box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); height: 80px; align-items: center; padding:0 20px 0 20px; span { width: 160px; height: 48px; border: 2px solid #E2001A; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #E2001A; } em{ font-style: normal; width: 164px; height: 48px; background: #E2001A; cursor: pointer; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; margin-left: 40px; } } .usercontend{ align-items: center; justify-content: center; flex-direction: column; min-height: 70vh; .rc-useaddress{ textarea{ display: none; } } .rc-max-width--xl{ h2{ display: none; } } } .rc-max-width--xl{ padding: 24px 20px 0 20px; input{ width: 258px; height: 34px; border: none; border-bottom: 1px solid #808285; color: #999999; font-size: 16px; margin-left: 2px; } span{ font-size: 16px; font-weight: bold; width: 22%; text-align: center; color: #333333; margin-top: 2px; } .rc-people{ width: 100%; display: flex; align-items: center; span{ text-align: left; } } // .rc-phone{ // } // .rc-address{ // } // .rc-useaddress{ // } } } @media screen and (min-width: 769px) { .rc-button{ display: flex; justify-content: center; font-size: 14px; width: 100%; box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); height: 80px; align-items: center; padding:0 20px 0 20px; span { width: 160px; height: 48px; border: 2px solid #E2001A; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #E2001A; } em{ font-style: normal; width: 164px; height: 48px; background: #E2001A; cursor: pointer; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; margin-left: 40px; } } .usercontend{ display: flex; align-items: center; justify-content: center; position: relative; flex-direction: column; .rc-button{ display: flex; justify-content: center; font-size: 14px; width: 100%; box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); height: 80px; align-items: center; padding:0 20px 0 20px; span { width: 160px; height: 48px; border: 2px solid #E2001A; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #E2001A; } em{ font-style: normal; width: 164px; height: 48px; background: #E2001A; cursor: pointer; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; margin-left: 40px; } } h2{ font-size: 26px; color: #333333; text-align: center; font-weight: bold; } .rc-useaddress{ display: flex; align-items: center; textarea{ width: 680px; height: 118px; background: #FFFFFF; border: 1px solid #808285; opacity: 1; border-radius: 0px; padding-top: 12px; padding-left: 16px; } .userinput{ display: none; } } } .rc-max-width--xl{ margin-top: 16px; input{ width: 680px; height: 45px; border: 1px solid #808285; color: #999999; font-size: 16px; margin-left: 2px; padding-left: 16px; } span{ font-size: 16px; font-weight: bold; width: 10%; text-align: center; color: #333333; margin-top: 2px; } .rc-people{ width: 100%; display: flex; align-items: center; } // .rc-phone{ // } .rc-address{ position: relative; } } }