html, body {
    font-size: 100%;
    height: 100%;
    box-sizing: border-box;
    min-height: 100%;
    font-family: "微软雅黑", "Microsoft Yahei", Arial, Helvetica, sans-serif, "宋体";
    -webkit-text-size-adjust: none;
}
main {
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
/*div.ui-content-box {
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, #7654bb, #393387 64%, #21215e);
}*/
div.ui-content {
    height: 100%;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0.5rem;
    background: -webkit-linear-gradient(top, #7654bb, #393387 64%, #21215e);
}
div.ui-content > em {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.ui-left-content {
    display: inline-block;
    width: 30%;
    box-sizing: border-box;
    vertical-align: middle;
    height: 100%;
    font-size: 1rem;
    text-align: center;
}
.ui-left-content > i {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.ui-left-content > div {
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    margin: 0 auto;
}
.ui-left-content p {
    text-align: center;
    line-height: 2;
    color: #fff74a;
    font-size: 1.5rem;
}
.ui-left-content p span {
    color: #fff;
}
.ui-left-content img {
    display: block;
    margin: 0 auto;
    width: 100%;
}
.ui-right-content {
    height: 100%;
    display: inline-block;
    font-size: 1rem;
    width: 66%;
    border-radius: 1.25rem;
    border: 1px solid #f5f5f5;
    background: -webkit-linear-gradient(top, #9c6ee9, #795fce 50%, #5368be);
    vertical-align: middle;
    margin-left: 2%;
}
.ui-right-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0.0841rem;
    border-radius: 1.4375rem;
}
.ui-left-pic {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1rem;
    width: 8%;
    outline: none;
}
.ui-left-pic img, .ui-right-pic img {
    display: block;
    width: 100%;
}
.ui-right-pic {
    display: inline-block;
    vertical-align: middle;
    margin-left: 11rem;
    width: 8%;
}
.ui-notice-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 1.2rem;
    background: -webkit-linear-gradient(bottom, #181a3e, #49348a 70%, #5f4398);
    background-clip: content-box;
}
form {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2rem 1rem 0;
}
form > p {
    color: #edebf0;
    line-height: 1;
}
form > p + p {
    line-height: 1;
    margin: 0.5rem 0;
}
.color-facc26 {
    color: #facc26;
    margin: 0 2rem;
}
form > p > span {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
}
form > p > span:first-child {
    width: 7.5rem;
    text-align: right;
}
form > p > label i {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
form > div {
    text-align: center;
    margin-top: 1rem;
}
form > div > button {
    display: inline-block;
    width: 30%;
    background: none;
    outline: none;
    border: none;
}
form > div > button img {
    display: block;
    width: 100%;
}
form > p > label > img {
    display: inline-block;
    margin: 0 0.625rem;
    vertical-align: middle;
}
.ui-count-box {
    margin-left: 0.3rem;
    width: 50%;
    display: inline-block;
    vertical-align: middle;
    background: #473985;
    height: 2.5rem;
    border-radius: 0.5125rem;
    border: 0.1875rem solid #3b2f5f;
    box-shadow: 0 2px 0 #937fd3 inset, 0 -2px 0 #937fd3 inset, 2px 0 0 #937fd3 inset, -2px 0 0 #937fd3 inset;
    position: relative;
    z-index: 1;
}
span.ui-last {
    margin-left: 0.25rem;
}
#count {
    vertical-align: middle;
    background: none;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: inline-block;
    border-radius: 0.6125rem;
    color: #facc26;
    font-weight: bold;
    text-align: center;
    z-index: -1;
}
form > p + p input {
    margin-left: 0.3rem;
    width: 51%;
    display: inline-block;
    vertical-align: middle;
    background: #473985;
    height: 2.7rem;
    border-radius: 0.5125rem;
    border: 0.1875rem solid #3b2f5f;
    outline: none;
    font-weight: bold;
    box-shadow: 0 2px 0 #937fd3 inset, 0 -2px 0 #937fd3 inset, 2px 0 0 #937fd3 inset, -2px 0 0 #937fd3 inset;
    text-align: center;
    color: #c3c7ef;
}
.ui-address-details select {
    border-radius: 0.3125rem;
    height: 2.5rem;
    border: 0.1875rem solid #3b2f5f;
    outline: none;
    width: 5.5rem;
}
.ui-address-details span:first-child {
    margin: 0.3rem;
}
.ui-address-details span {
    margin: 0 0.5rem;
}
.ui-notice-return {
    text-align: center;
}
.ui-notice-return p {
    color: #e8d7ff;
    text-align: center;
    font-size: 1.875rem;
}
.ui-notice-return a {
    display: inline-block;
    margin-top: 3.0rem;
}
.ui-notice-return a img {
    display: block;
    width: 11.875rem;
    height: 4rem;
}
@media only screen and (max-width: 300px) {
    html { font-size: 40% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
    html { font-size: 40% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
    html { font-size: 40% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 360px) and (min-width: 320px) {
    html { font-size: 40% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
    html { font-size: 45% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 480px) and (min-width: 360px) {
    html { font-size: 45% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 480px) and (min-width: 420px) {
    html { font-size: 45% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 560px) and (min-width: 480px) {
    html { font-size: 45% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 570px) and (min-width: 560px) {
    html { font-size: 55% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 640px) and (min-width: 570px) {
    html { font-size: 65%; !important; }
}
@media only screen and (max-width: 640px) and (min-width: 630px) {
    html { font-size: 65% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 710px) and (min-width: 640px) {
    html { font-size: 65% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 1000px) and (min-width: 710px) {
    html { font-size: 85% !important; -webkit-text-size-adjust: none; }
}
@media only screen  and (max-width: 1400px) and (min-width: 1000px) {
    html { font-size: 115% !important; -webkit-text-size-adjust: none; }
}
@media only screen  and (max-width: 1900px) and (min-width: 1400px) {
    html { font-size: 130% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 2100px) and (min-width: 1900px) {
    html { font-size: 210% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (min-width: 2100px) {
    html { font-size: 250% !important; -webkit-text-size-adjust: none; }
}