@charset "utf-8";

body { min-width: 320px; max-width: 640px; margin: 0px auto; background: rgb(230, 230, 230); }

.g-doc { width: 100%; height: 100%; margin: 0px auto; padding: 0px; font-size: 0.7rem; background: rgb(255, 255, 255); }

.m-nav { width: 100%; }

.m-nav img { width: 100%; }

.m-title { font-size: 1.5rem; font-weight: bolder; color: rgb(0, 0, 0); text-align: center; line-height: 2em; }

.m-footer { font-size: 0.7rem; font-weight: bolder; color: rgb(0, 0, 0); text-align: center; line-height: 5em; }

p { padding: 0.18rem; }

p.text-indent { text-indent: 2em; font-size: 0.7rem; margin: 0.1rem auto; width: 95%; }

strong { color: rgb(174, 3, 139); background-repeat: repeat-x; background-position: center bottom; padding-bottom: 0.3rem; }

p.m-tips { font-weight: 700; color: rgb(255, 255, 255); background: rgb(174, 3, 139); margin: 0.1rem auto; padding-top: 0.6rem; padding-bottom: 0.6rem; }

p.m-tips span { color: rgb(254, 255, 0); }

p.m-border { border: 1px solid rgb(204, 204, 204); padding-top: 0.6rem; padding-bottom: 0.6rem; }

.m-ul li { position: relative; border-top: 0.1rem dotted rgb(204, 204, 204); padding: 0.3rem 1.6rem; }

.m-ul li::after { background: rgb(174, 3, 139); color: rgb(255, 255, 255); content: attr(data-id); position: absolute; left: 1%; top: 15%; border-radius: 50%; padding: 0.1rem; width: 0.8rem; height: 0.8rem; text-align: center; }

.m-message { color: rgb(174, 3, 139); padding: 0.5rem; position: relative; margin: 0.5rem; }

.m-message li { font-weight: 700; width: 98%; }

.m-message::before { border-left: 0.1rem solid rgb(174, 3, 139); border-top: 0.1rem solid rgb(174, 3, 139); width: 2.5rem; height: 2.5rem; background: transparent; content: ""; position: absolute; left: 0px; top: 0px; }

.m-message::after { border-bottom: 0.1rem solid rgb(174, 3, 139); border-right: 0.1rem solid rgb(174, 3, 139); width: 2.5rem; height: 2.5rem; background: transparent; content: ""; position: absolute; right: 0px; bottom: 0px; }

.clf::before, .clf::after { content: ""; display: table; }

.clf::after { clear: both; }

.clf { }

.fl { float: left; }

.fr { float: right; }

.pr { position: relative; }

.disnone { display: none; }

.mg1 { margin: 1.4rem 0px; }

.mt1 { margin-top: 1rem; }

.col_pink { color: rgb(255, 103, 154); }

.col_green { color: rgb(174, 3, 139) !important; }

.col_deepgreen { color: rgb(34, 172, 56) !important; }

.col_yellow { color: rgb(255, 255, 0) !important; }

.textIndent2 { text-indent: 2em !important; }

.fwb { font-weight: bold !important; }

.fz09 { font-size: 0.9rem !important; }

.main { margin: -35px auto 0px; max-width: 640px; min-width: 320px; padding: 0px; background: rgb(246, 246, 246); }

#floatQQ { position: fixed; z-index: 10000; right: 0px; top: 40%; width: 20%; max-width: 100px; cursor: pointer; display: none; }

#floatQQ img { width: 100%; height: auto; }

.top { position: relative; left: 0px; top: 0px; }

.top_box { text-align: center; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; color: rgb(255, 255, 255); }

.top_box .top_l { position: absolute; left: 6%; top: 23%; width: 5rem; height: 5rem; }

.top_box .top_c { position: absolute; left: 29%; top: 26%; }

.top_c p { line-height: 1.6rem; text-align: left; font-size: 1.1rem; color: rgb(255, 255, 255); }

.top_c p .sex { width: 14%; margin-left: 0.6rem; }

.top_c p:nth-of-type(2) { font-size: 0.9rem; }

.top_c p .vip { width: 24%; margin-left: 0.4rem; margin-top: 0.2rem; }

.voice { background: rgb(255, 255, 255); border-radius: 0.6rem; display: block; width: 64%; height: 2.4rem; line-height: 1.6rem; margin-top: 0.2rem; position: relative; left: 0.3rem; top: 0px; }

.voice .voice_pic { width: 13%; margin-left: -4.7rem; margin-top: 0.6rem; }

.voice span { position: absolute; left: 2.4rem; top: 0.4rem; color: rgb(0, 0, 0); font-size: 0.7rem; }

.voice i { display: block; position: absolute; right: 0.7rem; top: 0.3rem; width: 0.5rem; height: 0.5rem; background: rgb(255, 61, 109); border-radius: 50%; animation: 0.5s ease 0s infinite alternate none running shake; }

.voice .border { position: absolute; left: -0.4rem; top: 0.2rem; width: 6%; }

.top_r { background: rgb(255, 103, 154); border-top-left-radius: 4rem; border-bottom-left-radius: 4rem; position: absolute; right: 0px; top: 4.5rem; width: 6.5rem; height: 2.9rem; line-height: 2.4rem; overflow: hidden; animation: 1s ease 0s 1 normal forwards running moveleft; }

@keyframes moveleft { 
  0% { right: -100%; opacity: 0; }
  100% { right: 0%; opacity: 1; }
}

@-webkit-keyframes moveleft { 
  0% { right: -100%; opacity: 0; }
  100% { right: 0%; opacity: 1; }
}

.content { background: rgb(255, 255, 255); }

.content .menu { padding: 1rem 1rem 0px; }

.content .menu li { float: left; width: 50%; text-align: center; padding-bottom: 0.2rem; border-bottom: 4px solid rgb(228, 228, 228); }

.content .menu li.on { border-bottom-color: rgb(255, 141, 179); }

.change .tips { height: 4rem; line-height: 4rem; text-align: right; font-size: 0.8rem; margin-right: 0.8rem; color: rgb(153, 153, 153); }

.change .prev { margin-left: 0.8rem; }

.change .first { height: 14.2rem; position: absolute; left: 0px; top: 0px; background: none; width: 100%; }

.change .first p { text-align: center; }

.change .first p:nth-of-type(1) { color: rgb(100, 170, 255); margin-top: -1.3rem; }

.change .first p:nth-of-type(2) { color: rgb(255, 103, 154); margin-top: 0.3rem; }

.change .first h3 { text-align: center; margin-top: 0.7rem; font-weight: bold; font-size: 1rem !important; }

.change .first a { color: rgb(100, 170, 255); font-size: 0.7rem; text-align: center; display: inline-block; margin-top: 1.1rem; }

.change .first #submit_btn { background: rgb(255, 103, 154); color: rgb(255, 255, 255); font-size: 0.9rem; padding: 0.4rem 3rem; border-bottom: none; border-radius: 0.4rem; margin-top: 0px !important; }

.change .first li.on { background: rgb(255, 103, 154) !important; }

.change #case img { height: 15rem; }

.change #case .first ul { padding: 0.5rem; width: 100%; }

.change #case .first li { float: left; width: 45%; background: rgb(255, 141, 179); text-align: center; padding: 0.4rem 0px; font-size: 0.8rem; color: rgb(255, 255, 255); border-radius: 0.3rem; margin: 1%; line-height: 1rem; }

#case { margin-top: 1rem; }

#case p { font-size: 0.95rem; line-height: 1.4rem; }

#case #swiper_container { padding: 0px 0.7rem; }

.bottom_float { position: fixed; left: 0px; bottom: 0px; z-index: 1000000; width: 100%; }

.bottom_float .audio_bottom { width: 8rem; height: 3rem; position: absolute; left: 5.1rem; top: 0.4rem; }

.bottom_float .audio_bottom .bottom_voice { width: 13%; margin-left: 1.2rem; margin-top: 0.8rem; }

.bottom_float .audio_bottom span { margin-top: 0.7rem; margin-left: 0.3rem; display: inline-block; }

.bottom_float .audio_bottom em { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: rgb(255, 61, 109); display: inline-block; position: absolute; right: 1rem; top: 0.6rem; animation: 0.5s ease 0s infinite alternate none running shake; }

.bottom_float .bottom_btn { width: 6rem; height: 3rem; position: absolute; right: 0.6rem; top: 1.5rem; animation: 1.4s ease 0s infinite alternate none running big; }

.middle_voice .m_voiceTop .icon { width: 8%; margin-right: 0.3rem; }

.middle_voice .m_voiceTop span { font-size: 1.1rem; font-weight: bold; margin-top: 0.1rem; }

.middle_voice .m_voiceBottom { margin-top: 0.6rem; }

.middle_voice .m_voiceBottom p { font-size: 0.9rem; line-height: 1.4rem; color: rgb(85, 85, 85); }

.middle_voice .m_voiceBottom a { font-size: 0.95rem; line-height: 1.4rem; color: rgb(255, 102, 153); margin: 0.2rem 0px 0.5rem; display: inline-block; }

#case .M_voice { padding: 0px 1rem; }

#case .M_voice .Middle_voice { width: 5%; position: absolute; left: 11rem; top: 2.4rem; }

#case .M_voice span { position: absolute; left: 12.8rem; top: 2.4rem; }

#case .M_voice em { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: rgb(255, 61, 109); display: inline-block; position: absolute; right: 7.6rem; top: 2.2rem; animation: 0.5s ease 0s infinite alternate none running shake; }

#Mask, .qq_Mask { position: fixed; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 1000000000; display: none; max-width: 640px; min-width: 320px; }

.pr { position: absolute; left: 0px; width: 100%; height: 20rem; }

.ok_Mask .pr { width: 70%; bottom: 50%; left: 15%; border-radius: 0.5rem; }

.ok_Mask .Mask_txt p { text-align: center; }

.ok_Mask .Mask_txt p:last-child { border-top: 1px solid silver; }

@media screen and (max-width: 500px) {
  .pr { bottom: 0px; }
}

#Mask img, .qq_Mask img { position: absolute; left: 0.2rem; width: 96%; height: 20rem; padding: 0.3rem; }

#Mask .Mask_txt, .qq_Mask .Mask_txt { position: absolute; top: 8rem; font-size: 0.7rem; padding: 0.6rem; }

#Mask .Mask_txt h3, .qq_Mask .Mask_txt h3 { font-weight: bold; margin-bottom: 0.3rem; }

#Mask .Mask_txt p:nth-of-type(1) { margin-bottom: 0.6rem; padding: 0.6rem; }

#Mask .close_Mask { width: 3rem; height: 3rem; position: absolute; right: 0px; top: 8rem; }

#comment { display: none; padding: 0px 1rem; }

#comment li { padding-bottom: 1.1rem; border-bottom: 2px solid rgb(242, 242, 242); margin-top: 1.1rem; }

#comment .user_Info img { width: 12%; }

#comment .user_Info span { font-weight: bold; margin-top: 0.7rem; margin-left: 0.6rem; }

#comment .user_Info strong { font-weight: normal; color: rgb(153, 153, 153); margin-top: 0.8rem; font-size: 0.9rem; margin-right: 0.5rem; }

#comment .user_txt p { font-size: 0.9rem; color: rgb(85, 85, 85); line-height: 1.4rem; margin-top: 0.8rem; }

#comment .user_Pic li:nth-of-type(1) { margin-left: 0px; }

#comment .user_Pic li { float: left; width: 30%; padding-bottom: 0px; margin-left: 0.4rem; }

.voice_pic.on, .Middle_voice.on, .bottom_voice.on { animation: 0.35s ease 0s infinite alternate none running shake; }

@keyframes shake { 
  0% { opacity: 1; }
  100% { opacity: 0.1; }
}

@-webkit-keyframes shake { 
  0% { opacity: 1; }
  100% { opacity: 0.1; }
}

.add_btn { width: 5rem; height: 2rem; position: absolute; left: 10rem; top: 17rem; background: rgb(255, 103, 154); border-radius: 0.5rem; text-align: center; line-height: 2rem; font-size: 0.7rem; color: rgb(255, 255, 255) !important; text-decoration: none !important; }

#third p { margin-top: 0px !important; }

.qq_Mask .Mask_txt { position: absolute; top: 9rem; font-size: 0.7rem; padding: 0.6rem; }

.qq_Mask p { font-size: 0.8rem; }

.qq_Mask .Mask_txt h3 { font-weight: bold; font-size: 0.8rem; }

.qq_Mask .close_Mask { width: 3rem; height: 3rem; position: absolute; right: 0px; top: 8rem; }

.wechat { background: rgb(255, 255, 0); text-align: center; padding: 0.4rem 0px; margin-bottom: 1rem; }

.wechat span { background: rgb(230, 0, 18); color: rgb(0, 0, 0); padding: 0.1rem 0.3rem; }

.Link { color: rgb(102, 179, 255); text-decoration: underline; }

.Mask_wechat { background: rgb(255, 103, 154); padding: 0.5rem 0px 0.7rem; text-align: center; color: rgb(255, 255, 255); font-size: 1.6rem; width: 78%; margin: 0.6rem auto 0px; border-radius: 0.5rem; }

.case_main .wechat_txt { text-align: center; font-size: 1.2rem; margin-bottom: 1.6rem; }

.case_main .wechat_txt p { font-size: 1rem !important; }

.case_main .wechat_txt .wechat_txtnum { color: rgb(255, 255, 255); background: rgb(174, 3, 139); border-radius: 2rem; display: inline-block; padding: 0rem 0.5rem 0.3rem; margin: 0.4rem 0px; }

.InfoTitle { text-align: center; background: rgb(34, 172, 56); padding: 0.3rem 0px; margin-bottom: 1.2rem; }

.InfoTitle h3 { color: rgb(255, 255, 255); }

.box_80 { width: 80%; margin: 1rem auto; }

.case_main .middle_voice { padding: 0.6rem 0.3rem; box-sizing: border-box; border: 1px solid rgb(229, 229, 229); }

.case_main .fit_people { margin-bottom: 1rem; }

.case_main .fit_people p { text-indent: 2em; }

.case_main .fit_people .fitTitle { text-align: center; color: rgb(174, 3, 139); font-size: 1.1rem; margin: 0.8rem 0px 0.4rem; }

.case_main .fit_people .fitTitle img { width: 4%; margin-top: 0.3rem; margin-right: 0.2rem; }