﻿html { font-size: 100%; }
body { padding: 0; margin: 0; font-size: 14px; /*background-color: #B80A0A;*/ background-size: 100%; font-family: "微软雅黑"; color: #333; }
ul, ol, li { padding: 0; margin: 0; }
img { max-width: 100%; }

.PCh5 { max-width: 450px; margin: 0 auto; }
.jcdiv { background-color: #FFF; border-radius: 4px; width: 90%; margin: 0 auto; padding: 10px; overflow: hidden; min-height: 430px; }
#top { max-width:450px; position: relative; margin: 0 auto; }
.l-tool { position: absolute; left: 10px; top: 8px }
.r-tool { position: absolute; right: 10px; top: 8px }
.r-tool a, .r-tool a:visited, .l-tool a, .l-tool a:visited { color: #FFF; text-decoration: none; display: inline-block; background-color: #870C0C; border-radius: 4px; padding: 1px 6px; font-size: 13px; }
.title { text-align: center; margin: 5px 0 10px 0 }
.title img { width: 32% }
.topbin { overflow: hidden; display: flex; flex-direction: row; }
.topbin li { flex: 1; list-style-type: none; text-align: center; align-items: center; margin: 0 9px; font-weight: bold; justify-content: flex-end; }

@media screen and (max-width: 320px) {
    .topbin li { margin: 0 7px; }
}
.topbin li { cursor:pointer;}
.topbin li .tcnt { position: relative; margin-bottom: 3px; }
.topbin li .userimg { border-radius: 50%; z-index: 1; width: 60%; height: 60%; }
.topbin li .ps { position: absolute; z-index: 99; bottom: -15px; }
.topbin li .ps img { width: 100%; }
.topbin li span { color: #F8483F; display: inline-block; clear: both; font-weight: normal; }

.mynav { height: 37px; text-align: center; line-height: 37px; clear: both; margin-top: 10px; border-bottom: 1px solid #eaeaea; }
.mynav li.on { color: #F8483F; border-bottom: 2px solid #F8483F; }
.mynav li { display: inline-block; line-height: 35px; padding: 0 10px; margin: 0 3px; font-size: 16px; cursor: pointer }

.uslist li {cursor:pointer; background-color: #FFF; width: 100%; list-style-type: none; overflow: hidden; font-size: 14px; margin-bottom: 10px; position: relative; border-bottom: 1px solid #F3F3F3; padding-bottom: 15px; }
.uslist li:last-child { border-bottom: 0 }
.uslist li .userimg { width: 40px; height: 40px; border-radius: 50%; position: absolute; left: 7px; top: 13px; }
.uslist li a { float: left; overflow: hidden; height: 55px; }
.uslist li .ts1 { left: 54px; top: 9px; }
.uslist li .ts2 { top: 32px; left: 54px; overflow: hidden; position: absolute; line-height: 18px; }
.uslist li .ts2 em { font-size: 10px; color: #F8483F; border-radius: 4px; font-style: normal; margin-right: 5px; padding: 1px 6px; overflow: hidden; border: 1px solid #FC9B96; display: inline-block; }
.uslist li span { position: absolute; }
.uslist li .zz { color: #999; font-size: 11px; display: block; float: right; text-align: center; margin-top: 14px; height: 30px; }
.uslist li .zz em { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #F8483F; clear: both; display: block; font-style: normal; margin-top: -5px; margin-bottom: -1px; }
.uslist li .ts3 { clear: both; padding: 3px; overflow: hidden; word-break: break-all; word-wrap: break-word; }
.uslist li .ts4 { clear: both; background-color: #FDF7EC; border: 1px solid #FBE7BD; color: #9B8479; border-radius: 3px; height: 25px; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; }
.uslist li .ts4 .btn { color: #FFF; background-color: #F8483F; float: right; padding: 2px 12px; border-radius: 20px; }


/*.jzlist li { border-bottom: 1px solid #F3F3F3; overflow: hidden; line-height: 35px; padding: 8px 0 }
.jzlist li .userimg { width: 35px; height: 35px; border-radius: 50%; float: left; left: 7px; top: 13px; margin-right: 5px; }
.jzlist li .n1 { width: 15px; float: left; padding: 0 5px }
.jzlist li .n2 { float: left }*/


.jzlist li { border-bottom: 1px solid #F3F3F3; overflow: hidden; padding: 8px 0; position: relative; }
.jzlist li .userimg { width: 40px; height: 40px; border-radius: 50%; float: left; left: 7px; top: 13px; margin-right: 5px; cursor:pointer;}
.jzlist li .n1 { width: 15px; float: left; padding: 0 5px; line-height: 40px; font-weight: bold; color: #F8483F; }
.jzlist li .n2 { float: left; margin-left: 3px;cursor:pointer; }
.jzlist li .n2 .ine { background-color: #F8483F; color: #FFF; font-size: 10px; display: inline-block; line-height: 14px; padding: 0 4px; border-radius: 20px; margin-left: 3px; }
.jzlist li .n2s { color: #CCC; font-size: 10px; padding-top: 2px; }
.jzlist li .n2s span { color: #F8483F }
.jzlist li .n3 { color: #999; float: right; margin-right: 15px; text-align: center; position: absolute; right: 67px; top: 8px; }
.jzlist li .n3 span { color: #F8483F }
.jzlist li .n4 {cursor:pointer; color: #F8483F; float: right; border: 1px solid #F8483F; border-radius: 20px; margin-top: 9px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; text-align: center; }

/*.jzlist li .n3 { color: #F8483F; float: right }*/

#top2 { height: 45px; line-height: 45px; font-size: 14px; color: #FFF; text-align: center; position: relative; font-size: 16px; background-color: #b80a0a; background-size: 100%; max-width: 450px; margin: 0 auto; }
#top2 .backBtn { position: absolute; left: 12px; }
#top2 .backBtn::before { content: ""; transform: translateY(16px) rotate(45deg); display: block; width: 12px; height: 12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transition: all .2s linear; }
.tmenu { position: absolute; right: 8px; top: 11px; width: 22px; height: 22px; background-image: url(/Content/images/focusGuess/sh.png); background-size: 22px 22px; }
.mydata { position: relative; z-index: 9; background-color: #FFF; height: 70px; }
.ar1 { height: 40px; width: 40px; border-radius: 30px; position: absolute; left: 10px; top: 14px; overflow: hidden; }
.ar1 img { width: 40px; height: 40px; }
.ar2 { font-size: 16px; position: absolute; left: 60px; top: 12px; }
.ar3 { font-size: 10px; color: #F30; border-radius: 4px; font-style: normal; margin-right: 5px; padding: 0 4px; position: absolute; left: 60px; top: 36px; line-height: 16px; }

.ar5 { font-size: 12px; line-height: 28px; color: #FFF; background-color: #F8483F; height: 28px; width: 60px; position: absolute; top: 20px; right: 10px; text-align: center; border-radius: 4px; cursor:pointer;}
.k-title { margin-bottom: 10px; font-weight: bold; }
.red-bf { font-size: 16px; font-weight: bold; color: #F8483F; }
.red-game { font-weight: bold; color: #F8483F; width: 60px; margin: 0 auto; text-align: center; display: inline-block; }
.cj { position: absolute; width: 40px; height: 40px; right: 11px; top: 4px; }
.mline { background-color: #E7E7E7; height: 5px; }
.wdiv { background-color: #FFF; min-height: 650px; max-width: 450px; margin: 0 auto; }
.reason { padding: 10px; }
/*.lock { line-height: 25px; text-align: center; position: relative; width: 90px; margin: 0 auto; background-image: url(/Content/images/focusGuess/lock.png); background-repeat: no-repeat; background-position: left; background-size: 14px 14px; color: #F8483F; }
.lock i::before { content: ""; transform: translateY(6px) rotate(-45deg); display: block; width: 7px; height: 7px; border-left: 1px solid #FC9B96; border-bottom: 1px solid #FC9B96; transition: all .2s linear; position: absolute; right: 0; top: 0 }*/

.pguess { position: relative; border-radius: 4px; margin-bottom: 10px; padding: 15px 20px; overflow: hidden; }
.p_div { float: left; width: 33%; text-align: center; }
.p_div_img { border-radius: 20px; height: 40px; width: 40px; overflow: hidden; margin: 0 auto; }
.p_name { clear: both; }
.p_btn_off { line-height: 30px; color: #828282; background-color: #FFF; border: 1px solid #D0D0D0; border-radius: 4px; }
.p_btn_on { line-height: 32px; color: #fff; background-color: #F8483F; border-radius: 4px; position: relative; overflow: hidden; }
.p_btn_on i { position: absolute; right: 0; background-image: url(/Content/images/focusGuess/tt.png); background-repeat: no-repeat; height: 20px; width: 20px; background-size: 20px 20px; }
.p_mid { float: left; width: 33%; margin: 0 auto; text-align: center; }
.p_mid_1 { font-size: 12px; height: 62px; color: #828282; }
.p_mid_2 { color: #828282; }
.red-game { font-weight: bold; color: #F8483F; }
.guessbtn { color: #FFF; background-color: #F8483F; text-align: center; margin: 5px auto; line-height: 36px; border-radius: 4px; }

#footer { text-align: center; color: #909090; font-size: 12px; float: left; overflow: hidden; clear: both; width: 100%; }
#footer a { padding-right: 3px; padding-left: 3px; display: inline; color: #f1d5d5; }
.hk { float: left; overflow: hidden; width: 78%; height: 25px; line-height: 25px; }

.lock { line-height: 24px; text-align: center; width: 95%; color: #999; background-color: #F1F1F1; padding: 10px; margin-top: 15px; margin-right: auto; margin-bottom: 15px; margin-left: auto; }
.lock p { display: block; height: 50px; width: 50px; margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; }
#footer1 { position: fixed; bottom: 0; width: 100%; text-align: center; margin: 0 auto; }
.footer2 { height: 48px; line-height: 48px; background-color: #E7E1E0; max-width: 450px; margin: 0 auto; }
.f-btn { color: #FFF; background-color: #F8483F; text-align: center; width: 30%; float: right;cursor:pointer; }
.note { font-size: 10px; color: #999; background-color: #F3F3F3; line-height: 24px; max-width: 450px; margin: 0 auto; }

@media screen and (max-width: 414px) {
    .hk { width: 74%; }
}
