.comment-panel{ border: solid 1px transparent;}
.comment-media,
.comment-result,
.comment-alert,
.comment-tab-content .btn-out,
.comment-inputbox-out,
.comment-header,
.comment-textarea-say-out,
.og-content,
.comment-search-dropbox,
.comment-write{ margin: 15px;}

.comment-title{ color: #666; font-size: 20px;}
.stock-share-tit{ padding-top: 7px;}
.stock-share-num{ width: 60%;}
.stock-share-num-msg, .stock-share-num .btn-out{ display: inline-block; vertical-align: middle;}
.stock-share-num-msg{ margin-right: 15px;}
.comment-list-out{ border-top: solid 1px #ddd;}
.comment-list > li{ border-bottom: solid 1px #ddd; padding: 15px 0;}
.comment-list li > a{ width: 50px; height: 50px;}
.comment-list > li > a, .reply-list > li > a{ float: left;}
.comment-list > li > a > img, .reply-list > li > a > img{ width: 100%; height: 100%;}
.comment-list > li > .comment-list-con{ margin-left: 65px;}
.comment-more-out{ border-bottom: solid 1px #fff;}
.comment-more{ margin: 15px;}
.comment-more a{}
.reply-list li .comment-list-con{ margin-left: 45px;}
.comment-list-name a{ font-weight: 600;}
.comment-list .comment-panel{ background: #f1f1f1;}
.comment-textarea-say-out,
.og-content,
.comment-p-out{ margin-bottom: 15px;}
.comment-p-out img{ max-width: 100%; margin-top: 5px;}
.tag-list, .comment-list-name{ margin-bottom: 5px;}
.trade-time{ color: #aaa; font-size: 13px; display: inline-block; line-height: 1;}
.comment-p-out{ word-break: break-all;}

.comment-write > img{ width: 30px; height: 30px;}
.comment-write > div{ margin-left: 45px;}
.comment-write .comment-inputbox{ height: 30px;}
.comment-inputbox, .comment-textarea-say{ display: block; background: #FFFCF0; width: 100%; padding: 10px; resize: none; border: solid 1px #ddd; font-size: 14px;}
.comment-textarea-say{ height: 100px;}
.comment-textarea-say:focus{ border-color: #83B8F3;}

.keyin-word{ color: #807668; font-size: 20px; display: inline-block;}
.comment-close{ background: none; border: none; color: #ccc; font-size: 20px;}

.og-content{ padding: 15px; border: solid 1px #ddd; background: #fff;}
.og-content > img{ float: left; margin: -15px 15px -15px -15px;}
.og-content-text{ font-size: 14px; line-height: 1.5;}
.og-content .comment-close, .comment-usua .comment-close{ position: absolute; z-index: 1;}
.og-content .comment-close{ right: 0; top: 0;}
.comment-usua .comment-close{ right: 10px; top: 10px;}
.og-content-title{ font-weight: 600;}
.og-content-url{ color: #c0c0c0;}

.comment-media .comment-icon-list{ top: 6px;}
.comment-media .comment-icon-list > li{ margin-right: 15px;}
.comment-icon-list > li{ display: inline-block;}
.comment-icon-list > li a, .reply-rm, .comment-more a{ color: #666;}
.comment-icon-list > li a:hover, .comment-more a:hover{ color: #000;}
.comment-icon-list > li a .fa{ margin-right: 5px;}

.comment-media .sort-fn-out,
.comment-submit .btn-out,
.comment-media .sort-now{ display: inline-block; vertical-align: top;}
.comment-submit .sort-fn,
.comment-submit .sort-now{ width: 70px;}
.comment-header .sort-fn,
.comment-header .sort-now{ width: 130px;}

.sort-fn-out > span{ vertical-align: middle; }
.sort-fn-out .comment-inputbox{ display: inline-block; width: auto; vertical-align: middle; padding: 5px 10px;}
.sort-fn{ display: inline-block; vertical-align: middle;}
.sort-fn:hover .sort-fn-slt{ display: block;}
.sort-fn a{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
.sort-fn-slt, .sort-now{ border: solid 1px #ddd; background: #fff; width: 100%;}
.sort-now .fa-angle-down{ position: absolute; right: 10px;}
.sort-fn-slt{ z-index: 1; position: absolute; top: 100%; left: 0; display: none; margin-top: -1px;}
.sort-fn-slt a, .sort-now{ font-size: 14px; color: #333; padding: 6px;}
.sort-fn-slt a{ display: block;}
.sort-fn-slt a:hover{ background: #eee; color: inherit;}
.sort-fn-slt{ max-height: 100px; overflow: auto;}
.sort-now{ display: block; padding-right: 30px;}

.comment-usua{ z-index: 10; position: absolute; top: 30px; left: 0; display: none; width: 370px; border: solid 5px rgba(0,0,0,.4);}
.comment-usua:before, .comment-usua:after{ content: ''; position: absolute; border: solid 10px transparent; left: 13px;}
.comment-usua:before{ border-bottom-color: rgba(0,0,0,.4); top: -25px;}
.comment-usua:after{ border-bottom-color: #eee; top: -17px;}
.comment-tab-list{ background: #eee; padding: 5px 10px 0;}
.comment-tab-list li{ display: inline-block; line-height: 35px; padding: 0 1em; background: #eee; border: solid 1px #ddd; font-size: 14px; color: #666; cursor: pointer;}
.comment-tab-list .selected{ background: #fff; border-bottom-color: #fff; z-index: 1;}
.comment-inputbox{}
.url-inputbox{ width: 80%; vertical-align: top; padding: 6px 10px;}

.btn{ padding: 6px 10px; font-size: 14px; line-height: 1;}
.btn-submit{}

.comment-alert{ font-size: 13px; color: red;}
.comment-result img{ width: 100%; display: block;}

.comment-tab-content{ background: #fff; border-top: solid 1px #ddd; top: -1px; overflow: hidden;}
.comment-search-dropbox{ height: 100px; overflow: auto; border: 1px solid #ddd;}
.comment-search-list li{ padding: 7px 10px; color: #666; font-size: 14px; cursor: pointer;}
.comment-search-list li:hover{ background: #eee;}

.comment-list .comment-panel{ border-color: transparent;}

.say-praise-out{ display: none; position: absolute; right: 0; top: 100%; z-index: 2; width: 140px;}
.say-praise-total{ font-size: 13px; background: #ccc; padding: 5px 10px; text-align: center;}
.say-praise-person{ font-size: 13px; background: #fff; text-align: left; max-height: 180px; overflow: auto; border: solid 1px #ccc;}
.say-praise-person a{ display: block; padding: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.say-praise-person a img{ width: 30px; height: auto; vertical-align: middle; margin-right: 10px;}

.reply-list{ background: #f1f1f1; overflow: hidden;}
.reply-list li{ border-bottom: solid 1px #fff; padding: 15px;}
.reply-list li:hover .reply-rm-out{ display: block;}
.reply-list li > a{ width: 30px; height: 30px;}
.reply-rm-out{ position: absolute; right: 0; bottom: 0; display: none;}
.reply-rm, .praise{ font-size: 13px;}

.reply-rm{ z-index: 1;}
.reply-rm:hover{}
.praise{ margin-left: 15px; display: inline-block; color: #999;}
.praise-ed{}

.reply-panel{ margin-top: -14px; z-index: 1; width: 100%;}
.reply-panel > .comment-icon-list > li{ margin-left: 15px;}
.reply-panel .comment-icon-list li:hover .say-praise-out{ display: block;}
.reply-panel .comment-panel{ background: #f1f1f1; margin-top: 15px;}
.comment-read-more a{ display: block; background: #f1f1f1; line-height: 1; font-size: 30px;}
.trade-time-out{ z-index: 1;}

@media screen and (max-width: 1024px){
	.comment-header,
	.comment-textarea-say-out,
	.og-content,
	.comment-media,
	.comment-result,
	.comment-alert,
	.comment-tab-content .btn-out,
	.comment-inputbox-out,
	.comment-header,
	.comment-search-dropbox,
	.comment-more{ margin: 10px;}
	.comment-list > li{ padding: 10px 0;}
	.og-content{ padding: 10px;}
	.og-content > img{ margin: -10px 10px -10px -10px;}
	.comment-write > div{ margin-left: 40px;}
	.comment-p-out{ margin-bottom: 10px;}
	.reply-panel .comment-panel { margin-top: 10px;}
	.reply-list li{ padding: 10px;}
	.comment-tab-list li{ padding: 0 10px;}
	.stock-share-num-msg{ margin-right: 10px;}
	.og-content{ margin: 0 0 10px;}
	.comment-list > li > .comment-list-con { margin-left: 60px;}
	.reply-list li .comment-list-con{ margin-left: 40px;}
	.comment-media .comment-icon-list > li{ margin-right: 10px;}
	.reply-panel > .comment-icon-list > li { margin-left: 10px;}
}

@media screen and (max-width: 768px){

}

@media screen and (max-width: 414px) {
	.comment-title{ font-size: 18px;}
	.stock-share-tit, .stock-share-num{ float: none;}
	.stock-share-tit{ padding: 0; margin-bottom: 10px;}
	.stock-share-num{ width: auto; text-align: left;}
	.stock-share-num-msg + .btn-out{ margin-bottom: 0;}
	.og-content-text{ line-height: 1.4;}
	.comment-usua{ width: 372px;}
	.url-inputbox{ width: 75%;}
	.comment-inputbox, .comment-textarea-say{ padding: 5px 7px;}
	.comment-icon-list > li{ position: static;}
        .comment-icon-list > li:nth-child(1) .comment-usua:before,
	.comment-icon-list > li:nth-child(1) .comment-usua:after{ left: 15px;}
        .comment-icon-list > li:nth-child(2) .comment-usua:before,
	.comment-icon-list > li:nth-child(2) .comment-usua:after{ left: 70px;}
        .comment-icon-list > li:nth-child(3) .comment-usua:before,
	.comment-icon-list > li:nth-child(3) .comment-usua:after{ left: 130px;}

	.reply-panel .comment-usua{ width: 352px;}
    .reply-panel .comment-icon-list > li:nth-child(1) .comment-usua:before,
	.reply-panel .comment-icon-list > li:nth-child(1) .comment-usua:after{ left: 15px;}
    .reply-panel .comment-icon-list > li:nth-child(2) .comment-usua:before,
	.reply-panel .comment-icon-list > li:nth-child(2) .comment-usua:after{ left: 70px;}
    .reply-panel .comment-icon-list > li:nth-child(3) .comment-usua:before,
	.reply-panel .comment-icon-list > li:nth-child(3) .comment-usua:after{ left: 130px;}

    .comment-list > li > a,
	.comment-list .reply-list li > a{ float: none; display: block; margin-bottom: 5px;}
	.comment-list a img{ width: 40px; height: 40px;}
	.comment-list li .comment-list-con{ margin: auto; position: static;}
	.comment-list-name{ position: absolute; top: 10px; left: 60px;}
	.reply-list .comment-list-name{ left: 50px;}
	.comment-header .sort-fn, .comment-header .sort-now { width: 100px;}
}

@media screen and (max-width: 375px) {
	.comment-usua{ width: 333px;}
	.reply-panel .comment-usua{ width: 312px;}
	.og-content-url{ display: none;}
}

@media screen and (max-width: 360px) {
	.comment-usua{ width: 318px;}
	.reply-panel .comment-usua{ width: 298px;}
	.url-inputbox{ width: 70%;}
}

@media screen and (max-width: 320px) {
	.stock-share-num .btn{ font-size: 12px; padding: 5px;}
	.comment-usua{ width: 278px;}
	.reply-panel .comment-usua{ width: 258px;}
    .comment-submit .sort-fn,
	.comment-submit .sort-now{ width: 65px;}
	.comment-media .comment-icon-list > li{ margin-right: 5px;}
	.comment-icon-list > li a .fa { margin-right: 2px;}
}