File: /www/wwwroot//www.xxlht.com/sh/026/css/css.css
body, div, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, select, table, td, textarea, th, ul {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
color: #000;
font-family: '脦垄脠铆脩脜潞脷',Arial, Helvetica, sans-serif;
background: #f6f6f6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
border: 0px;
color: #000;
}
@media screen and (min-width:320px) {
.main, body, html {
font-size: 13.5px !important;
}
}
@media screen and (min-width:360px) {
.main, body, html {
font-size: 15px !important;
}
}
@media screen and (min-width:375px) {
.main, body, html {
font-size: 15.5px !important;
}
}
@media screen and (min-width:414px) {
.main, body, html {
font-size: 17px !important;
}
}
@media screen and (min-width:600px) {
.main, body, html {
font-size: 25.5px !important;
}
}
@media screen and (min-width:640px) {
.main, body, html {
font-size: 20px !important;
}
}
}
.clf:before, .clf:after {
content: "";
display: table;
}
.clf:after {
clear: both;
}
.clf {
*zoom: 1;
}
.fl {
float: left;
color:#3f3b2c;
}
.fr {
float: right;
}
.pr {
position: relative;
}
.disnone {
display: none;
}
.mg1 {
margin: 1.4rem 0;
}
.mt1 {
margin-top: 1rem;
}
.col_pink {
color: #ff679a;
}
.col_green {
color: #8fc31f !important;
}
.col_deepgreen {
color: #22ac38 !important;
}
.col_yellow {
color: #ffff00 !important;
}
.textIndent2 {
text-indent: 2em !important;
}
.fwb {
font-weight: bold !important;
}
.fz09 {
font-size: .9rem !important;
}
.main,.content {
margin: 0 auto;
max-width: 640px;
min-width: 320px;
padding: 0;
background: #f6f6f6;
}
#Mask{
max-width: 640px;
min-width: 320px;
}
#floatQQ {
position: fixed;
z-index: 10000;
right: 0;
top: 40%;
width: 20%;
max-width: 100px;
cursor: pointer;
display: none;
}
#floatQQ img {
width: 100%;
height: auto;
}
.top {
position: relative;
left: 0;
top: 0;
}
.top_box {
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
}
.top_box .top_l {
position: absolute;
left: 40%;
top: 18%;
width: 6rem;
height: 6rem;
}
.top_box .top_c {
position: absolute;
left: 35%;
top: 60%;
}
.top_c p {
line-height: 1.6rem;
text-align: left;
font-size: 1.1rem;
color: #fff;
width:104%;
}
.top_c p .sex {
width: 14%;
margin-left: .6rem;
}
.top_c p:nth-of-type(2) {
font-size: .9rem;
}
.top_c p .vip {
width: 20%;
margin-top: 0rem;
}
.voice {
background: #fff;
border-radius: .6rem;
display: block;
width: 64%;
height: 2.4rem;
line-height: 1.6rem;
margin-top: .2rem;
position: relative;
left: .3rem;
top: 0;
}
.voice .voice_pic {
width: 13%;
margin-left: -4.7rem;
margin-top: .6rem;
}
.voice span {
position: absolute;
left: 2.4rem;
top: .4rem;
color: #000;
font-size: 1rem;
}
.voice i {
display: block;
position: absolute;
right: .7rem;
top: .3rem;
width: .5rem;
height: .5rem;
background: #ff3d6d;
border-radius: 50%;
animation: shake .5s ease infinite alternate;
-webkit-animation: shake .5s ease infinite alternate;
-moz-animation: shake .5s ease infinite alternate;
-ms-animation: shake .5s ease infinite alternate;
-o-animation: shake .5s ease infinite alternate;
}
.voice .border {
position: absolute;
left: -.4rem;
top: .2rem;
width: 6%;
}
.top_r {
background: #33aa33;
border-top-left-radius: 4rem;
border-bottom-left-radius: 4rem;
position: absolute;
right: 0;
top: 4.5rem;
width: 6.5rem;
height: 2.9rem;
line-height: 2.4rem;
overflow: hidden;
animation: moveleft 1s forwards 0s;
-webkit-animation: moveleft 1s forwards 0s;
-moz-animation: moveleft 1s forwards 0s;
-ms-animation: moveleft 1s forwards 0s;
-o-animation: moveleft 1s forwards 0s;
}
@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;
}
}
@-moz-keyframes moveleft {
0% {
right: -100%;
opacity: 0;
}
100% {
right: 0%;
opacity: 1;
}
}
@-o-keyframes moveleft {
0% {
right: -100%;
opacity: 0;
}
100% {
right: 0%;
opacity: 1;
}
}
@-ms-keyframes moveleft {
0% {
right: -100%;
opacity: 0;
}
100% {
right: 0%;
opacity: 1;
}
}
@keyframes big {
0% {
transform: scale(1);
}
18% {
transform: scale(1.1);
}
32% {
transform: scale(1);
}
48% {
transform: scale(1.1);
}
64% {
transform: scale(1);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes big {
0% {
-webkit-transform: scale(1);
}
18% {
-webkit-transform: scale(1.1);
}
32% {
-webkit-transform: scale(1);
}
48% {
-webkit-transform: scale(1.1);
}
64% {
-webkit-transform: scale(1);
}
80% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes big {
0% {
-moz-transform: scale(1);
}
18% {
-moz-transform: scale(1.1);
}
32% {
-moz-transform: scale(1);
}
48% {
-moz-transform: scale(1.1);
}
64% {
-moz-transform: scale(1);
}
80% {
-moz-transform: scale(1.1);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes big {
0% {
-o-transform: scale(1);
}
18% {
-o-transform: scale(1.1);
}
32% {
-o-transform: scale(1);
}
48% {
-o-transform: scale(1.1);
}
64% {
-o-transform: scale(1);
}
80% {
-o-transform: scale(1.1);
}
100% {
-o-transform: scale(1);
}
}
@-ms-keyframes big {
0% {
-ms-transform: scale(1);
}
18% {
-ms-transform: scale(1.1);
}
32% {
-ms-transform: scale(1);
}
48% {
-ms-transform: scale(1.1);
}
64% {
-ms-transform: scale(1);
}
80% {
-ms-transform: scale(1.1);
}
100% {
-ms-transform: scale(1);
}
}
.top_r .add_top {
width: 2.7rem;
height: 2.7rem;
background: #fff;
border-radius: 4rem;
position: absolute;
left: 0.05rem;
top: 0.08rem;
color: #33aa33;
font-size: 2.6rem;
line-height: 2.5rem;
box-sizing: border-box;
animation: big 2.4s 1.6s infinite;
-webkit-animation: big 2.4s 1.6s infinite;
-moz-animation: big 2.4s 1.6s infinite;
-ms-animation: big 2.4s 1.6s infinite;
-o-animation: big 2.4s 1.6s infinite;
}
.top_r span {
position: absolute;
display: block;
width: 4rem;
font-size: .9rem;
right: -.1rem;
top: 0.3rem;
color: #fff;
line-height: 1.2rem;
}
.top_b {
position: absolute;
bottom: -0.3rem;
left:1.5rem;
width: 100%;
overflow: hidden;
color: #fff;
font-size: .9rem;
padding: .6rem 3.5rem;
box-sizing: border-box;
}
.top_b .top_b_people {
width: 42%;
float: left;
border-right: 1px solid #ffd800;
}
.top_b .top_b_people img {
width: 19%;
}
.top_b .top_b_like img {
margin-left: 0.5rem;
width: 16%;
}
.top_b .top_b_people span, .top_b .top_b_like span {
color:#ffd800;
}
.top_b .top_b_like {
width: 49%;
float: left;
}
.content {
background: #cacaca;
padding-bottom: 0rem;
}
.content .menu {
margin: 0rem 0rem 0;
background-color: #3e3e3e;
padding-top:0.2rem;
line-height: 2rem;
}
.content .menu ul{color:#fff;}
.content .menu li {
float: left;
width: 50%;
text-align: center;
padding-bottom: .2rem;
border-bottom: 4px solid #e4e4e4;
}
.content .menu li.on {
border-bottom-color: #33aa33;
color:#33aa33;
}
.change .tips {
height: 2.2rem;
line-height: 2.2rem;
text-align: right;
font-size: .8rem;
margin-right: .8rem;
color: #3e3e3e;
}
.change .tips1{
margin-top:1.8rem;
}
.change .tops{
width:93%;
margin:0 auto;
background-color: #33aa33;
border-bottom:5px solid #0f840f;
border-radius:1rem;
margin-top:1.5rem;
}
.change .tops h4{text-align:center;color:#fff;font-size: 0.9rem;}
.change .tops h3 {
text-align: center;
margin-top: 0.1rem;
font-weight: bold;
color:#fff;font-size: 1.4rem;
}
.change .tips .spi{
font-size:1.1rem;
color:#ff606c;
}
.change .prev {
margin-left: .8rem;
}
.change .first {
height: 14.2rem;
position: absolute;
left: 0;
top: 0;
background: none;
width: 100%;
}
.change .first .question{
font-size:1.1rem;color:#3e3e3e;text-align: center;
}
.change .first p {
text-align: center;
}
.change .first p:nth-of-type(1) {
color: #64aaff;
margin-top: -1.3rem;
}
.change .first p:nth-of-type(2) {
color: #ff679a;
margin-top: .3rem;
}
.change .first a {
color: #64aaff;
font-size: .7rem;
text-align: center;
display: inline-block;
margin-top: 1.1rem;
}
.change .first #submit_btn {
background: #ff606c;
color: #fff;
border-bottom: 3px solid #ce2c38;
border-radius: 1.5rem;
width:82%;
font-size: .9rem;
padding: .4rem 0rem;
margin-top: 0 !important;
}
/*閫変腑鏁堟灉*/
.change .first li.on {
color: #ce2c38 !important;
}
.change #case .first ul {
padding: 0rem 0 1rem 6%;
}
.change #case .first li {
float: left;
width: 29%;
margin-right: 3%;
background: #ff606c;
border-bottom: 3px solid #ce2c38;
border-radius: 1.5rem;
text-align: center;
padding: 0.2rem 0;
font-size: .9rem;
color: #fff;
margin-top: 0.4rem;
}
.change #second {
padding: 0 5% !important;
}
.change #second li {
width: 30% !important;
margin-left: 3% !important;
margin-right: 0 !important;
margin-top: 1rem !important;
}
.change #case #third ul {
padding: .8rem 4% .3rem;
margin-left:1rem;
}
.change #case #third li {
width: 30%;
margin: 0 auto;
float: inline-block;
margin-bottom: .3rem;
text-align: center;
margin-right:0.5rem;
box-sizing: border-box;
}
.change #case #third .tips {
height: 2.5rem;
}
.change #case #third h3 {
text-align: left;
padding-left: 5.5rem;
}
#case {
padding-top: 1rem;
}
#case .text1,#case .text4 {
font-size: 1.1rem;
padding: 0.3rem 0.3rem;
}
.user .user_Info{
width:40%;
}
/*绮変笣鐣欒█*/
#comment .user_txt .vipText{color:#ff8a08;margin-top:1rem;font-weight: bold;}
#case #swiper_container {
padding: 0 1rem 0;
}
.bottom_float {
position: fixed;
left: 0;
bottom: 0;
z-index: 1000000;
}
.bottom_float .audio_bottom {
width: 8rem;
height: 3rem;
position: absolute;
left: 5.1rem;
top: .4rem;
}
.bottom_float .audio_bottom .bottom_voice {
width: 13%;
margin-left: 1.2rem;
margin-top: .8rem;
}
.bottom_float .audio_bottom span {
margin-top: .7rem;
margin-left: .3rem;
display: inline-block;
}
.bottom_float .audio_bottom em {
width: .4rem;
height: .4rem;
border-radius: 50%;
background: #ff3d6d;
display: inline-block;
position: absolute;
right: 1rem;
top: .6rem;
animation: shake .5s ease infinite alternate;
-webkit-animation: shake .5s ease infinite alternate;
-moz-animation: shake .5s ease infinite alternate;
-ms-animation: shake .5s ease infinite alternate;
-o-animation: shake .5s ease infinite alternate;
}
.bottom_float .bottom_btn {
width: 6rem;
height: 3rem;
position: absolute;
right: .6rem;
top: 1.5rem;
animation: big 1.4s ease infinite alternate;
-webkit-animation: big 1.4s ease infinite alternate;
-moz-animation: big 1.4s ease infinite alternate;
-ms-animation: big 1.4s ease infinite alternate;
-o-animation: big 1.4s ease infinite alternate;
}
.middle_voice .m_voiceTop .icon {
width: 8%;
margin-right: .3rem;
}
.middle_voice .m_voiceTop span {
font-size: 1.1rem;
font-weight: bold;
margin-top: .1rem;
}
.middle_voice .m_voiceBottom {
margin-top: .6rem;
}
.middle_voice .m_voiceBottom p {
font-size: .9rem;
line-height: 1.4rem;
color: #555;
}
.middle_voice .m_voiceBottom a {
font-size: .95rem;
line-height: 1.4rem;
color: #ff6699;
margin: .2rem 0 .5rem;
display: inline-block;
}
#case .M_voice {
padding: 0 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: .4rem;
height: .4rem;
border-radius: 50%;
background: #ff3d6d;
display: inline-block;
position: absolute;
right: 7.6rem;
top: 2.2rem;
animation: shake .5s ease infinite alternate;
-webkit-animation: shake .5s ease infinite alternate;
-moz-animation: shake .5s ease infinite alternate;
-ms-animation: shake .5s ease infinite alternate;
-o-animation: shake .5s ease infinite alternate;
}
#Mask {
position: fixed;
left: 50%;
margin-left:-320px;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.75);
z-index: 1000000000;
display: none;
}
@media only screen and (max-width: 640px) {
#Mask {width:100%;margin-left:0;left:0;}
}
#Mask img {
position: absolute;
left: 0;
top: 7rem;
}
#Mask .Mask_txt {
position: absolute;
left: 1%;
top: 16rem;
font-size: 16px;
}
#Mask .Mask_txt h3 {
font-weight: bold;
margin-bottom: .6rem;
font-size: 0.9rem;
}
#Mask .Mask_txt p:nth-of-type(1) {
margin-bottom: .0rem;
}
#Mask .close_Mask {
width: 3rem;
height: 3rem;
position: absolute;
right: 0;
top: 13.7rem;
}
#comment {
display: none;
padding: 0 1rem;
}
#comment .pspl{background-color:#fff;}
#comment li {
padding-bottom: 1.1rem;
background-color: #fff;
display:inline-block;
height:225px;
border-bottom:1px solid #cacaca;
}
@media only screen and (max-width: 640px){
#comment li {
height:8.325rem;
}
}
@media only screen and (max-width: 320px){
#comment li {
height:8.825rem;
}
}
#comment .user_Info,#comment .user_txt{float: left;}
#comment .user_txt{width:60%;}
#comment .user_Info span {
font-weight: bold;
margin-top: .7rem;
margin-left: .6rem;
}
#comment .user_Info strong {
font-weight: normal;
color: #999;
margin-top: .8rem;
font-size: .9rem;
margin-right: .5rem;
}
#comment .user_txt p {
font-size: .9rem;
color: #555;
line-height: 1.4rem;
margin-top: 0.3rem;
}
#comment .user_Pic li:nth-of-type(1) {
margin-left: 0;
}
#comment .user_Pic li {
float: left;
width: 30%;
padding-bottom: 0;
margin-left: .4rem;
}
.voice_pic.on, .Middle_voice.on, .bottom_voice.on {
animation: shake .35s ease infinite alternate;
-webkit-animation: shake .35s ease infinite alternate;
-moz-animation: shake .35s ease infinite alternate;
-ms-animation: shake .35s ease infinite alternate;
-o-animation: shake .35s ease infinite alternate;
}
@keyframes shake {
0% {
opacity: 1;
}
100% {
opacity: .1;
}
}
@-webkit-keyframes shake {
0% {
opacity: 1;
}
100% {
opacity: .1;
}
}
@-moz-keyframes shake {
0% {
opacity: 1;
}
100% {
opacity: .1;
}
}
@-ms-keyframes shake {
0% {
opacity: 1;
}
100% {
opacity: .1;
}
}
@-o-keyframes shake {
0% {
opacity: 1;
}
100% {
opacity: .1;
}
}
.add_btn {
width: 12rem;
height: 3rem;
position: absolute;
left: 6rem;
top: 23rem;
background: #ff679a;
border-radius: .5rem;
text-align: center;
line-height: 3rem;
color: #fff !important;
font-size: 1.4rem;
text-decoration: none !important;
}
#third p {
margin-top: 0 !important;
}
/*脣玫脗脭脥录*/
#thumb {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: #000;
z-index: 100000000000;
display: none;
}
#thumb .thumb_close {
padding: .4rem;
color: #fff;
position: absolute;
right: 0;
top: 3rem;
font-size: 1.8rem;
font-size: 'Helvetica';
}
.depart {
width: 100%;
height: .4rem;
background: #f2f2f2;
}
.case_main {
padding: 0 1rem 0;
}
.case_main p {
color: #000;
}
.qq_Mask {
position: fixed;
left: 50%;
margin-left:-320px;
top: 0;
width: 640px;
height: 900px;
background: rgba(0,0,0,.75);
z-index: 1000000000;
display: none;
}
@media only screen and (max-width: 640px){
.qq_Mask {
left: 0;
top: 0;
margin-left:0;
width: 100%;
height: 100%;
}
}
.qq_Mask img {
position: absolute;
left: 0;
top: 6rem;
}
.qq_Mask .Mask_txt {
position: absolute;
left: 4.5rem;
top: 17.5rem;
}
.qq_Mask .Mask_txt h3 {
font-weight: bold;
margin-bottom: .6rem;
}
.qq_Mask .close_Mask {
width: 3rem;
height: 3rem;
position: absolute;
right: 0;
top: 14.5rem;
}
.wechat {
background: #ffff00;
text-align: center;
padding: .4rem 0;
margin-bottom: 1rem;
}
.wechat span {
background: #e60012;
color: #000;
padding: .1rem .3rem;
}
.Link {
color: #66b3ff;
text-decoration: underline;
}
.Mask_wechat {
background: #ff679a;
padding: .2rem 0 .2rem;
text-align: center;
color: #fff;
font-size: 1.6rem;
width: 78%;
margin: .6rem auto 0;
border-radius: .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: #fff;
background: #8fc31f;
border-radius: 2rem;
display: inline-block;
padding: 0rem .5rem .3rem;
margin: .4rem 0;
}
.InfoTitle {
text-align: center;
background: #22ac38;
padding: .3rem 0;
margin-bottom: 1.2rem;
}
.InfoTitle h3 {
color: #fff;
}
.box_80 {
width: 80%;
margin: 1rem auto;
}
.case_main .middle_voice {
padding: .6rem .3rem;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.case_main .fit_people {
margin-bottom: 1rem;
}
.case_main .fit_people p {
text-indent: 2em;
}
.case_main .fit_people .fitTitle {
text-align: center;
color: #8fc31f;
font-size: 1.1rem;
margin: .8rem 0 .4rem;
}
.case_main .fit_people .fitTitle img {
width: 4%;
margin-top: .3rem;
margin-right: .2rem;
}