/*comment*/
.view__bottom{margin: 0 auto; padding: 40px 0;}
.view__bottom .info{display: flex; justify-content: space-between; border-bottom: 1px solid #e9e9e9;padding-bottom: 15px;font-family: Roboto, sans-serif; font-weight: 700; font-size: 16px; color: #000;}
.view__bottom .info .name{font-weight: 700; font-size: 16px; color: #000;}
.view__bottom .info .id{color: #666666; font-size: 14px;}
.view__bottom .warning{font-family: Roboto, sans-serif; font-size: 12px; color: #a2a2a2; font-weight: 400; font-style: italic; padding: 20px 0; line-height: 1.4; text-align: justify;}
.view__comment{ }
.view__comment-header{/*margin-bottom: 30px;*/}
.view__comment-header-name{font-size: 16px; color: #2d8bb3; font-weight: bold; margin-bottom: 10px; display: block;}
.view__comment-header-text{font-size: 14px; color: #999999;}
.view__input{  box-sizing: border-box; margin-bottom: 25px;}
.view__input-question{display: inline-block;padding: 12px;font-size: 14px;color: #363636;border: 1px solid #cdcdcd;margin-bottom: 10px;box-sizing: border-box;}
.view__comment-name{width: 100%; display: block;border: 1px solid #cdcdcd; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; margin-bottom: 10px; box-sizing: border-box;}
.view__comment-textarea{ height: 80px; width: 100%; outline: none; border: none; background-color: #e9eef6; padding-top: 10px; padding-left: 10px; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; margin-bottom: 10px; box-sizing: border-box;}
.view__comment-textarea::placeholder{font-size: 18px; color: #999999; }
.view__comment-name::placeholder{font-size: 14px; color: #363636; }
.view__comments-list{ box-sizing: border-box;}
.sub-comment{margin: 10px 0;}
.comment-item{margin-bottom: 25px; border-left: 1px dashed #eeeeee; padding-left: 20px;}
.comment-item__info{display: flex; margin-bottom: 10px; font-size: 14px;}
.comment-item__info span:after{ content: "•";  padding-left: 3px; padding-right: 5px; color: #999999;}
.comment-item__info span:last-child:after{ content: "";  padding-left: 0; padding-right: 0;}
.comment-item__name{color: #242424; font-size: 14px; font-weight: 700;}
.comment-item__id{color: #b2bfd2; display: block;}
.comment-item__desc{font-size: 14px; color: #363636; font-weight: 400; display: inline-block; margin-bottom: 10px; line-height: 1.4;}
.comment-item__other{}
.comment-item__date{     color: #b2bfd2;font-weight: 700; }
.comment-item__date:after{ content: "•";  padding-left: 10px; padding-right: 5px; color: #999999;}
.comment-item__like-count{font-size: 14px; color: #b2bfd2  }
.comment-item__like-count:hover{color: #54ad3f;}
.comment-item__umlike-count{font-size: 14px; color: #b2bfd2;}
.comment-item__umlike-count:hover{color: #ff4c4c;}
.comment-item__reply-count{font-size: 14px; color: #b2bfd2;}
.comment-item__reply-count:hover{color: #0072bb;}
.comment-item__like-count:after{ content: "• ";  padding-left: 3px; padding-right: 5px; color: #999999;}
.comment-item__umlike-count:after{ content: "• ";  padding-left: 3px; padding-right: 5px; color: #999999;}
.comment-item__reply{font-size: 14px; color: #999999; margin-left: 5px;}

.comment-reply{padding-left: 40px; box-sizing: border-box; margin-top: 20px;}
.comment-reply__name{width: 50%; display: inline-block; padding: 12px 0; font-size: 14px; color: #363636; border: none; border-bottom: 1px solid #cdcdcd; margin-bottom: 10px; box-sizing: border-box;    font-family: 'Roboto', sans-serif;}
.comment-reply__name::placeholder{ font-size: 14px; color: #999999;}
.comment-reply__name:focus{border-bottom-color: rgb(0, 114, 187); transition: 0.5s;}
.comment-reply__name:focus-visible{outline: none}
.comment-reply__textarea{border: none; margin-bottom: 10px; width: 100%;padding-right: 12px; padding-top: 15px; font-family: 'Roboto', sans-serif; font-size: 14px; height: 80px; box-sizing: border-box; border-bottom: 1px solid #cdcdcd}
.comment-reply__textarea::placeholder{font-size: 14px; color: #999999;}
.comment-reply__textarea:focus{border-bottom: 2px solid #0072bb;}
.comment-reply__textarea:focus-visible{outline: none}
.comment-reply__button{display: block; width: 100%; padding: 10px 20px; font-size: 14px; color: #666666; background-color: #e9eef6; border: none; cursor: pointer; transition: .2s;font-family: 'Roboto', sans-serif;}
.comment-reply__button:hover{background-color: #0072bb; color: #fff;}
.view__comment__button{display: inline-block; padding: 15px 20px; font-size: 14px; color: #666666; background-color: #e9eef6;}
.view__comment__button:hover{background-color: #d1d1d1; color: #363636;}
.comment-reply__more{text-align: center; display: block; padding: 10px 0; background-color: #f5f7fb; color: #939393; font-size: 14px;}
.comment-reply__more:hover{background-color: #d1d1d1; color: #363636}

.comment-tab {display: flex; justify-content: center; overflow: hidden; border-bottom: 1px solid #eeeeee;}
.comment-tablinks {font-size: 14px; color: #666666; cursor: pointer; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; padding: 20px;}
.comment-tablinks:hover {border-bottom: 2px solid #00497d;}
.comment-tablinks.active {border-bottom: 2px solid #00497d; color: #00497d;}
.comment-tabcontent {display: none;padding: 20px 0 ;-webkit-animation: fadeEffect 1s;animation: fadeEffect 1s; }
@-webkit-keyframes fadeEffect {from {opacity: 0;}to {opacity: 1;}}
@keyframes fadeEffect {from {opacity: 0;}to {opacity: 1;}}

@media (max-width: 1200px) {
    .comment-item:before{left: 21px;}
}
@media (max-width: 768px) {.comment-item:before{display: block; left: -1px;}}