/* topBtn */
.topBtn { margin-bottom: 10px; text-align: right; }
.topBtn a.add { position: relative; padding: 5px 20px; display: inline-block; border: 1px #ccc solid; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #f68c95; -webkit-box-shadow: 0 2px 0 #cbced0; -moz-box-shadow: 0 2px 0 #cbced0; box-shadow: 0 2px 0 #cbced0; }
.topBtn a.add:hover { background: #f7f7f7; -webkit-box-shadow: inset 0 2px 0 #cbced0; -moz-box-shadow: inset 0 2px 0 #cbced0; box-shadow: inset 0 2px 0 #cbced0; }
.topBtn #search { margin-left: 20px; border: 1px #dddddd solid; display: inline-block; }
.topBtn #search input { margin: 5px 10px; padding: 5px 0; width: 240px; background: none; border-right: 1px #dddddd solid; }
.topBtn #search a { margin-right: 13px; }

/* discussList */
#discussList { overflow: hidden; }
#discussList > div { margin: 10px 0 10px 25px; padding: 10px; float: left; width: calc((100% / 4) - 41px); border: 1px #ccc solid; }
#discussList > div:nth-child(4n +1) { margin-left: 0; }
#discussList > div .Img a.photo { background-size: cover; }
#discussList > div .cImg { overflow: hidden; position: relative; margin: -90px auto 0; width: 70px; border: 2px #fff solid; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 2; }
#discussList > div .cInfo { position: relative; margin: -35px auto 0; padding: 35px 10px 10px; width: 70%; background: #fff; z-index: 1; }
#discussList > div .cInfo p { text-align: center; font-size: 12px; font-weight: bold; color: #757070; }
#discussList > div .cInfo p:first-child { margin-bottom: 5px; height: 20px; -webkit-line-clamp: 1; }
#discussList > div .cInfo article { height: 40px; line-height: 20px; text-align: center; font-size: 14px; -webkit-line-clamp: 2; }

/* discussEdit */
#discussEdit form { padding: 20px; }
#discussEdit form p { margin-bottom: 15px; }
#discussEdit form p label { margin-right: 10px; width: 90px; display: inline-block; }
#discussEdit form p font { width: calc(100% - 105px); display: inline-block; }
#discussEdit form p font input[type="text"] ,
#discussEdit form p font select { padding: 5px 2%; width: 96%; background: transparent; border: 1px #a5a1a1 solid; font-size: 14px; }
#discussEdit form p font select { width: auto; }
#discussEdit form .writList { margin-bottom: 15px; }
#discussEdit form .writList label { margin-bottom: 10px; display: inline-block; }
#discussEdit form .writList b { margin: 5px 15px 5px 0; display: inline-block; }
#discussEdit form .writList b img { margin-left: 5px; width: 50px; }
#discussEdit form p.btn { margin-top: 45px; text-align: right; }
#discussEdit form p.btn a { padding: 5px 15px; display: inline-block; background: #4b494c; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 2px 0 #000; -moz-box-shadow: 0 2px 0 #000; box-shadow: 0 2px 0 #000;  color: #fff; }
#discussEdit form p.btn a:hover { background: #5f5f5f;  -webkit-box-shadow: inset 0 2px 0 #000; -moz-box-shadow: inset 0 2px 0 #000; box-shadow: inset 0 2px 0 #000; }
#discussEdit form p.btn a#btnOK { background: #f16ca1; -webkit-box-shadow: 0 2px 0 #a54d70; -moz-box-shadow: 0 2px 0 #a54d70; box-shadow: 0 2px 0 #a54d70; }
#discussEdit form p.btn a#btnOK:hover { background: #ca5584; -webkit-box-shadow: inset 0 2px 0 #a54d70; -moz-box-shadow: inset 0 2px 0 #a54d70; box-shadow: inset 0 2px 0 #a54d70; }
#discussEdit form p font.Image b.photo { overflow: hidden; width: 50px; background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% auto; display: inline-block; vertical-align: middle; }
#discussEdit form p font.Image a { padding: 2px 20px; display: inline-block; border: 2px #d9d9d9 solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size: 12px; color: #3e9ef8; }

/* discussInfo */
#discussInfo { position: relative; }
#discussInfo .topLikes { position: absolute; right: 15px; top: 15px; }
#discussInfo .topLikes font { margin-left: 10px; padding: 2px 15px 2px 30px; background: url(/images/28/member/icon-heart.png) no-repeat 10px 50%; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; display: inline-block; border: 1px #dcdcdc solid; }
#discussInfo h2 { font-size: 27px; color: #4d4d4d; }
#discussInfo p.topDate { margin-bottom: 10px; font-size: 12px; color: #7d7d7d; }
#discussInfo p.topDate font { overflow: hidden; margin-right: 10px; width: 40px; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align: bottom; }
#discussInfo p.topDate b { font-size: 16px; color: #6cafd9; }

/* message */
/* message */
#message { margin-top: 50px; padding-top: 15px; border-top: 1px #f1f1f1 dashed; }
#message h4 { font-size: 18px; color:#4d4d4d; }
#message ul li { overflow: hidden; margin: 10px 0; }
#message ul li .mssageImg { float: left; padding: 1px; width: 40px; height: 40px; border: 1px #ddd solid; }
#message ul li .mssageInfo { position: relative; padding: 10px 15px; float: right; width: calc(100% - 105px); border: 1px #dfdfdf solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#message ul li .mssageInfo:before ,
#message ul li .mssageInfo:after { position: absolute; border-top: 10px solid transparent; border-right: 11px solid #dfdfdf; border-bottom: 11px solid transparent; content: ""; top: 10px; left: -10px; }
#message ul li .mssageInfo:after { border-right: 11px solid #fff; left: -9px; }
#message ul li .mssageInfo p { font-size: 14px; color: #676767; }
#message ul li .mssageInfo p b { margin-right: 10px; font-size: 16px; color: #195BDF; }
#message ul li .mssageInfo p img { margin-left: 10px; vertical-align: bottom; }
#message ul li .mssageInfo article { overflow: hidden; }
#message .mssageBox { margin: 30px 0; padding: 15px 30px; background: #f5f5f5; border: 1px #dedede solid; -webkit-box-shadow: inset 0 0 4px 0px #d2d2d2; -moz-box-shadow: inset 0 0 4px 0px #d2d2d2; box-shadow: inset 0 0 4px 0px #d2d2d2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#message .mssageBox p { margin-bottom: 10px; }
#message .mssageBox p label { margin-right: 10px; font-size: 14px; color: #6b6b6b; }
#message .mssageBox p.cimg b { margin: 5px 15px 5px 0; display: inline-block; }
#message .mssageBox p.cimg b img { margin-left: 5px; width: 40px; }
#message .mssageBox p input[type="text"] , #message .mssageBox p textarea { padding: 10px 2%; width: 96%; background: #fff; border: 1px #dedede solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#message .mssageBox p input[type="text"] { width: auto; }
#message .mssageBox p.btn { text-align: right; }
#message .mssageBox p.btn a { padding: 5px 10px; display: inline-block; background: #0077b5; font-size: 14px; color: #fff; }