html, body { margin: 0; padding: 0; }
ul, li { list-style: none; margin: 0; padding: 0; }
.container { background-color: #fff; min-height: 100vh; padding: 20px; }
.container .goods-image { text-align: center; max-height: 100vw; padding: 0 20px; margin-bottom: 20px; }
.container .goods-image .image { width: 70%; height: 70%; }
.container .tkl { background-color: #fff1ef; color: #df7162; margin: 5px 0; padding: 6px; border-radius: 5px; border: 2px dashed #df7162; font-size: 15px; }
.container .op { margin: 10px auto; margin-bottom: 0; }
.container .op .copy { background: #df7162; border-radius: 1000px; color: white; font-size: 18px; line-height: 30px; height: 45px; width: 260px; border: 0; margin-bottom: 10px; }
.container .copy-tip { text-align: left; color: #8f8f8f; font-size: 14px; clear: both; margin-top: 10px; }
.container .more-tip { color: #f54d23; margin: 5px; margin-top: 0.5rem; }
.container .more-waimai { margin-top: 1rem; text-align: center; }
.container .qrcode {display: flex; align-items: center; margin-top: 10px; }
.container .qrcode .qrcode-image { width: 200px; height: 200px; margin-right: 10px; }
.container .qrcode .qrcode-image .image { width: 100%; height: 100%; }
.container .qrcode .tips { flex: 1; text-align: center; }
.subject { padding: 10px; color: #333333; }
.subject .title { font-size: 24px; font-weight: bold; color: #df7162; }
.subject .describe { font-size: 14px; color: #8799a3; margin-top: 5px; }
.subject .tips { background-color: #fff1ef; color: #df7162; margin-top: 10px; padding: 10px; border-radius: 5px; border: 2px dashed #df7162; font-size: 13px; }
.subject .step-title { margin-top: 20px; font-weight: bold; color: #f37b1d; font-size: 20px; }
.subject .coupon-content { display: inline-block; margin-top: 5px; color: #8799a3; font-size: 16px; text-decoration: none; border-bottom: 1px solid #8799a3; }
.subject .goodses .goods { display: flex; justify-content: space-between; text-decoration: none; border-bottom: 1px solid #e5e5e5; padding: 10px 0; }
.subject .goodses .goods img { width: 136px; height: 136px; }
.subject .goodses .goods .goods-info { flex: 1; margin-left: 10px; }
.subject .goodses .goods .goods-name { color: #333333; font-size: 16px; }
.subject .goodses .goods .goods-content { color: #df7162; font-size: 14px; margin-top: 10px; }
.subject .goodses .goods .goods-op { background: #f37b1d; border-radius: 1000px; color: white; font-size: 14px; width: 86px; border: 0; padding: 5px 0; text-align: center; margin-top: 10px; }
.user { display: flex; flex-direction: column; margin: 10px; padding: 100px 30px 0 30px; background-color: #fff; height: calc(100vh - 120px) }
.user .title { font-size: 20px;font-weight: bold; }
.user .title-desc { font-size: 14px; margin: 5px 0 5px 0; color: #ff8c00; }
.user .guide-desc { font-size: 18px; font-weight: bold; margin: 50px 0 5px 0; color: #df7162; text-align: center; }
.user .guide-qrcode { margin: 0 auto; margin-top: 10px; width: 200px; height: 200px; }
.user .guide-qrcode .image { display: inline-block; width: 100%; height: 100%; }
.form .form-item { margin-top: 10px; display: flex; align-items: center; width: 100%; }
.form .form-item .form-item-label { width: 70px; text-align: left; }
.form .form-item .form-item-field { margin-left: 10px; width: 66%; }
.form .form-item .form-item-field input { height: 25px; border-radius: 5px; border: 1px solid #8799a3; width: 100%; padding: 3px; }
.form .form-submit { margin-top: 10px; height: 30px; width: 100px; border-radius: 5px; border: 1px solid #8799a3; }
.cluepublish { padding: 10px; color: #333333; }
.cluepublish .title { font-size: 24px; font-weight: bold; color: #df7162; }
.cluepublish .describe { font-size: 14px; color: #8799a3; margin-top: 5px; }
.cluepublish .tips { background-color: #fff1ef; color: #df7162; margin-top: 10px; padding: 0 10px 10px 10px; border-radius: 5px; border: 2px dashed #df7162; font-size: 13px; }
.cluepublish .tips b { display: inline-block; font-size: 14px; margin-top: 10px; }
.cluepublish .tips a { margin-right: 10px; }
.cluepublish .step-title { margin-top: 20px; font-weight: bold; color: #f37b1d; font-size: 20px; }
.cluepublish .coupon-content { display: inline-block; margin: 5px 8px 0 0; color: #8799a3; font-size: 16px; text-decoration: none; border-bottom: 1px solid #8799a3; }
.cluepublish .quick-search {  }
.cluepublish .quick-search a { display: inline-block; margin-right: 10px; color: #df7162; font-size: 15px; }
.cluepublish .clues .clue { display: flex; justify-content: space-between; text-decoration: none; border-bottom: 1px solid #e5e5e5; padding: 20px 0; }
.cluepublish .clues .clue .clue-op { width: 150px; display: flex; flex-direction: column; align-items: center; }
.cluepublish .clues .clue .clue-op img { width: 100%; height: 150px; }
.cluepublish .clues .clue .clue-op .copy { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.cluepublish .clues .clue .clue-info { flex: 1; margin-left: 10px; }
.cluepublish .clues .clue .clue-name { color: #df7162; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.cluepublish .clues .clue .clue-name img { width: 30px; height: 30px; }
.cluepublish .clues .clue .clue-content { color: #333333; font-size: 14px; margin-top: 10px; white-space: pre-line; }
.cluepublish .form { margin: 10px 0; display: flex; flex-direction: row; align-items:flex-end }
.cluepublish .form input { height: 25px; border-radius: 5px; border: 1px solid #8799a3; width: 80%; padding: 3px; margin-right: 5%; }