#container{margin:48px 1% 48px 1%; background-color:#fff; border-radius:3px; min-height:500px; padding:2px 15px 5px 15px;}

.note {font-size:0.8em; color:#999; margin-top:38px; text-align:center}

.article_info {color:#555;}
.article_info font{color:#008000}
.article_idea {color:#808040;margin:8px 0 10px 0;}
.article_idea font{font-style:italic; color:#111}
.article_con{line-height:32px; color:#888; font-size:1.2em;}

.advert{text-align:center}
.advert img {width:88%; height:82px;}

.web-top{height:30px;position:fixed; top:0px; width:90%; max-width:640px; padding:9px 5% 5px 5%; background-color:#fff;  z-index:101; }
.web-goback {float:left; }
.web-goback:after { position: absolute; top: 12px; left: 18px; width: 12px; height: 12px; border: #888 solid; border-width: 1.5px 1.5px 0 0; content: ' '; -webkit-transform: rotate(-135deg); }
.web-title {float:left; margin-left:23px; color:#555; font-weight: bold;}
.web-top-r {float:right; color:#ff3366; font-size:0.9em;}

.web-bottom {height:42px;bottom:0px; padding:3px 2%; border-top:1px solid #f2f2f2; width:96%; max-width:640px; background-color:#fff;position:fixed; z-index:101;}
.web-bottom li{float:left; text-align:center; color:#999; width:16%; margin-top:2px; padding:0 3px; font-size: 0.8em;}
.web-bottom a {color:#888; position:relative;}
.web-bottom li a img{width:18px; height:18px;}
.web-bottom font{position:absolute; top:-9px; right:-2px; color:#ff3333; padding:1px; font-weight:bold; background-color:#fff; border-radius:5px;}

.web-comment {width:41%; margin:5px 5px; text-align:left; height:38px; background-color:#f2f2f2; color:#fff; border-radius:17px;}
.web-comment img {float:left;width:30px; height:30px; margin-top:4px; border-radius:15px;}
.web-comment span {float:left; margin:7px 0 0 5px;}

.theme{margin:32px 0 15px 0; text-align:center; font-size:1.1em; font-weight:bold; color:#666;}
.con{clear:both; border-bottom:1px dotted #666;margin:0 8px 16px 8px; padding-bottom:3px;}
.con-img{float:right;width:32%}
.con-img img{width:98%;padding-top:5px;}
.con-info{float:left; color:#555; width:65%}
.con-info font a {color:#39A9F1;}
.con-info font a:hover {color:#E45057}
.con-info p{color:#888; font-size:0.9em }

.con-msg {clear:both;}
.con-msg span {color:#ccc; font-size:0.9em; margin-right:12px;}
.con-msg font {color:#ff8000; font-size:0.9em }

/* login */
.my-login {max-width:640px; width: 86%; min-height: 280px; margin: 5px 0; padding: 0px 5px 0 5px; background-color: #fff; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); position: absolute; z-index: 308; transform-origin: center top 0px; transition: all 0.3s; will-change: top, left; position:fixed; top: 150px; left: 8%; transform: translateY(-100%); opacity: 0;}

.my-login h2{text-align:center; }

.login-form {margin:8px 2% 26px 2%; background-color:#fff; border-radius:5px;}
.my-col font {float:left; margin:8px 0; padding:10px 8px; border:0; color:#999;}
.login-phone, .login-xincode {float:left; margin:12px 0; padding:7px 8px; border:0; font-size:1.1em; width:50%; color:#666; border-radius:5px; background-color:#f9f9f9;}
.login-phone {width:58%;}
.login-xincode {width: 22%;}

.login-code {float:left; margin:18px 0 8px 7px; color:#339933; font-size:0.9em; border:0; background-color:#fff;}
.login-btn {padding:6px 0; width:68%; text-align:center; border:0; margin:0 16%; font-size:1.1em; background-color:#f2f2f2; color:#555; border-radius:16px;}

.login-protocol {margin:26px 0 21px 12px; font-size:0.8em;}
.login-protocol font {padding:0 6px; color:#888;}
.login-protocol a {color:#339933;}

.login-bottom {margin:32px 10% 0 12%;}
.login-bottom div {padding:6px 0; color:#555; font-size:0.8em;}
.login-bottom img {width:45px; height:45px; margin:0 36%;}

.btn {float:left; margin:52px 0 0 15%; width:70%; text-align:center; background-color:#eee; color:#888; height:30px; padding:8px 0 8px 0; font-size:1.3em;}
.btn:hover {background-color:#99eaf2; color:#fff;}

/* дÆÀÂÛ */
#write {margin:35px 0 21px 0;}
.write-com {position:fixed; bottom: 0; left: 0; z-index:100; width:90%; max-width:640px; height:125px; background-color:#f6f6f6; border-top-left-radius:5px; border-top-right-radius:5px; border-top:1px solid #f1f1f1; padding:2% 5%; transform-origin: center bottom 0px; transition: all 0.5s; will-change: top, left;  transform: translateY(100%); opacity: 0;}

.write-com textarea {height:65px; width:96%; padding:5px 2%; margin-top:2px; border:0;}
.write-com textarea:focus{
  outline:0;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 4px rgba(82,168,236,0.8);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 4px rgba(82,168,236,0.8);
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 4px rgba(82,168,236,0.8)
}

.write-com input {float:right; margin:12px 0 6px 0; padding:5px 15px; text-align:center; border:0 none; outline:none; border-radius:5px; cursor:pointer; letter-spacing:3px; background:#33cc66; color:#fff;}

/* ÆÀÂÛ */
.my-bar {margin:32px 0; padding:8px 5px; background-color:#fafafa; border-radius:3px; }
.bar-title {margin: 3px 0;}

.bar-more {margin:15px 0; text-align:center; font-size:0.9em;}
.bar-more a {color:#33cccc;}

.bar-div {margin:21px 0; padding-bottom:2px; border-bottom:1px solid #eee;}
.bar-top {color:#555; font-size:0.9em;}
.bar-top font {color:#888; font-size:0.9em;}
.bar-top img{float:left; width:28px; height:28px; margin-right:6px; border-radius:15px;}

.bar-div p {color:#555; margin:12px 5px; font-size:0.9em;}

.bar-bottom ul:nth-child(1) {float:left; font-size:0.8em; color:#777;}
.bar-bottom ul:nth-child(2) {float:right;}

.bar-bottom a {color:#888; font-size:0.7em; margin:0 5px;}
.bar-bottom a:nth-child(1) {background: url(../../png/praise16.png) no-repeat 0 0px; padding-left:13px;}
.bar-bottom a:nth-child(3) {background: url(../../png/reply16.png) no-repeat 0 1px; margin-left:15px; padding-left:15px;}

.bar-bottom ul:nth-child(1) font{padding:0 7px; font-size:0.9em;}
.bar-bottom ul:nth-child(2) font{color:#666; font-size:0.8em;}

.bar-min {background-color:#fff; margin:2px 0; padding:2px 3px;}
.bar-div-min {margin:8px 0; padding-bottom:2px; border-bottom:1px dotted #33cc33;}

.bar-number { margin:5px 0; background-color:#fff; padding:2px 6px; font-size:0.9em;}
.bar-number a {color:#33cccc;}

.small-win {width: 72%; height: 560px; margin: 5px 0; padding: 5px 0; background-color: #fff; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); position: absolute; z-index: 308; transform-origin: center top 0px; transition: all 0.3s; will-change: top, left; position:fixed; top: 21px; left: 15%; transform: scale(1, 0); opacity: 0;}
.small-div{height: 520px; padding: 8px 6px; overflow: auto; position: relative;}

.supervise {margin:5px 15px; text-align:center;}
.supervise-top {padding:6px 0; }
.supervise-style a{float:left; margin:5px 6px; padding: 2px 10px; font-size:0.8em; color:#888; border:1px solid #ddd; border-radius:5px;}
#supervise-btn {border-radius:3px; margin:16px 12px 0 0; text-align:center;line-height:26px;border:0; outline:none; background-color:#0099e3;color:#fff;width:80px;}
.supervise-p {color:#666; font-size:0.9em; padding: 3px 18px;}