@charset "utf-8";

* { margin: 0px; padding: 0px; }

ul { list-style: none; }

body, html { padding: 0px; margin: 0px; }

.warp { margin: 0px auto; max-width: 640px; }

.content-img { width: 100%; }

.chuiniu { overflow: hidden; width: 80%; margin-left: 10%; line-height: 50px; font-size: 16px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 5px 0px; border-radius: 25px; margin-top: 1em; margin-bottom: 2em; text-align: center; position: relative; }

.chuiniu svg { width: 20px; height: 20px; padding: 0px 6px; vertical-align: middle; }

.form { padding: 0px 20px; box-sizing: border-box; line-height: 2em; }

.form .q-item { margin-bottom: 1em; color: rgb(119, 119, 119); }

.form .q-item .answer { color: rgb(51, 51, 51); }

.form .q-item input[type="text"] { outline: none; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(220, 220, 220); padding: 6px; width: 80%; }

.form .q-item .answer span { display: inline-block; width: 50%; margin-right: -1em; color: rgb(85, 85, 85); font-size: 0.9em; }

.form .q-item .question span { font-size: 0.8em; }

.submit { line-height: 50px; font-size: 20px; color: rgb(255, 255, 255); border-radius: 25px; width: 80%; margin: 1em 0px 1em 10%; background: rgb(252, 161, 179); text-align: center; }

.baoming { box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 5px 0px; width: 280px; margin: 0px auto; text-align: center; font-size: 14px; line-height: 40px; height: 198px; overflow: hidden; color: rgb(51, 51, 51); }

.footer-nav { width: 100%; max-width: 640px; background: rgb(252, 161, 179); line-height: 60px; font-size: 20px; color: rgb(255, 255, 255); text-align: center; position: fixed; bottom: 0px; }

.icon { width: 1em; height: 1em; }

.scroller p { margin: 0px; }

.scroller { position: relative; transition: bottom 300ms; margin: 0px; }

.active { visibility: visible; }

.normal { visibility: hidden; }

.photo_img { position: relative; }

.luck_draw { position: absolute; left: 7%; bottom: 21.5%; width: 64px; transition: width 0.5s; }

@media (min-width: 400px) and (max-width: 450px) {
  .luck_draw { width: 71px; }
}

@media (min-width: 451px) and (max-width: 500px) {
  .luck_draw { width: 76px; }
}

@media (min-width: 501px) and (max-width: 525px) {
  .luck_draw { width: 81px; }
}

@media (min-width: 526px) and (max-width: 550px) {
  .luck_draw { width: 86px; }
}

@media (min-width: 551px) and (max-width: 575px) {
  .luck_draw { width: 91px; }
}

@media (min-width: 576px) and (max-width: 600px) {
  .luck_draw { width: 96px; }
}

@media (min-width: 601px) and (max-width: 625px) {
  .luck_draw { width: 101px; }
}

@media (min-width: 626px) {
  .luck_draw { width: 106px; }
}

.mm-comment, .mm-comment * { box-sizing: border-box; }

.mm-comment { display: none; width: 95%; max-width: 640px; padding: 18px; margin: 10px auto; font-size: 18px; box-shadow: rgb(238, 238, 238) 0px 0px 5px; line-height: 1.6; text-align: left; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); box-sizing: border-box; }

.mm-comment .m-commentForm { display: none; position: fixed; left: 0px; top: 0px; z-index: 500; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }

.mm-comment .m-commentFormMain { position: absolute; left: 5%; top: 20%; width: 90%; padding: 4%; border-radius: 10px; background-color: rgb(255, 255, 255); }

.mm-comment .m-commentFormHead { font-weight: 700; font-size: 18px; color: rgb(128, 122, 122); }

.mm-comment .m-commentFormBody { }

.mm-comment .f-field { margin-top: 10px; }

.mm-comment .m-commentInput { width: 100%; padding: 10px; border: 1px solid rgb(149, 149, 149); border-radius: 10px; resize: none; outline: none; font-weight: 400; }

.mm-comment .f-fieldBtn { text-align: right; }

.mm-comment .f-fieldBtn button { display: inline-block; padding: 5px 15px; margin-right: 10px; text-align: center; border: none; border-radius: 5px; background-color: rgb(119, 131, 143); color: rgb(255, 255, 255); }

.mm-comment .f-fieldBtn .f-submitBtn { background-color: rgb(249, 103, 104); }

.mm-comment .m-commentResult { }

.mm-comment .m-commentResultHead { margin-top: 0px; border-bottom: 2px solid rgb(246, 246, 246); font-size: 22px; color: rgb(0, 0, 0); }

.mm-comment .m-conmentList { }

.mm-comment .m-conmentList::after, .mm-comment .m-discussFoot::after { content: ""; display: block; clear: both; height: 0px; overflow: hidden; }

.mm-comment .m-discuss { position: relative; padding: 15px 0px 0px 54px; border-bottom: 1px solid rgb(246, 246, 246); }

.mm-comment .m-discussThumbnail { position: absolute; left: 0px; top: 20px; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; }

.mm-comment .m-discussThumbnail img { width: 100%; height: 100%; }

.mm-comment .m-discussHead { margin-right: 5px; margin-top: 5px; }

.mm-comment .m-discussNickname { color: rgb(98, 155, 250); margin-right: 10px; }

.mm-comment .m-discussAddress { color: rgb(204, 200, 200); }

.mm-comment .m-discussContent { }

.mm-comment .m-discussContent img { margin-top: 10px; max-width: 100%; }

.mm-comment .m-discussContent a { color: rgb(159, 200, 245); }

.mm-comment .m-discussFoot { font-size: 16px; line-height: 40px; color: rgb(102, 102, 102); }

.mm-comment .m-discussTime { float: left; color: rgb(79, 77, 77); }

.mm-comment .m-discussPraise { line-height: 35px; float: right; color: rgb(81, 81, 81); }

.mm-comment .icon { float: left; width: 15px; height: 15px; margin-top: 10px; margin-right: 5px; background: url("../images/unlike.png") 0% 0% / 15px 15px no-repeat; }

.mm-comment .icon.active { background: url("../images/like.png") 0% 0% / 15px 15px no-repeat; }

.mm-comment .m-sendComment { margin-top: 25px; text-align: right; font-size: 18px; color: rgb(102, 101, 101); }