.comment-wrap { border: solid 1px #ddd; margin-top: 8%; }

.comment-write-wrap { width: 100%; box-sizing: border-box; padding: 20px; }
.comment-write-top { margin-bottom: 20px; }
.comment-write-top:after { content: ''; display: block; float: none; clear: both; }
.comment-write-top .comment-tr { float: left; }
.comment-write-top .comment-tr .comment-th { font-size: 0.85em; font-weight: 700; margin-bottom: 10px; }
.comment-tr input[type=text], .comment-tr input[type=password] { width: 100%; height: 40px; padding: 0 10px; border-radius: 3px; border: solid 1px #ddd; }
.comment-write textarea { width: 100%; height: 100px; padding: 10px; border-radius: 3px; border: solid 1px #ddd; box-sizing: border-box; }
.comment-write-top .comment-tr.comment-name { width: 40%; }
.comment-write-top .comment-tr.comment-pw { width: 58%; margin-left: 2%; }
.comment-write-btm { text-align: right; margin-top: 20px; }

.comment-list-wrap { width: 100%; box-sizing: border-box; }
.comment-list { padding: 20px; border-top: dashed 1px #ddd; }
.comment-list-top { margin-bottom: 10px; line-height: 150%; }
.comment-list-top:after { content: ''; display: block; float: none; clear: both; }
.comment-list-top .comment-writer { float: left; font-weight: 700; }
.comment-list-top .comment-time { float: left; margin-left: 7px; font-size: 0.85em; color: #aaa; }
.comment-list-top .comment-btn-wrap { float: right; }
.comment-list-top .comment-btn-wrap button { margin-left: 5px; font-size: 0.85em; color: #5a5a5a; }
.comment-list .comment-comment { padding: 10px; background-color: #fdfdfd; min-height: 70px; word-break: break-all; line-height: 180%; }

.comment-re-wrap { background-color: #f8f8f8; }

.comment-list-wrap .comment-write-wrap { border-top: dashed 1px #ddd; }
.comment-list-wrap .comment-list .comment-write-wrap { border-top: none; }