@charset "utf-8";

* { box-sizing: border-box; }

img { max-width: 100%; }

.comments__title { font-size: 26px; line-height: 39px; display: flex; align-items: center; margin-bottom: 30px; }

.comments__title img { margin-left: 10px; width: auto; }

.comment-wrap { position: relative; width: 100%; overflow: hidden; }

.comment { font-weight: 400; }

.answer-inc .comment:not(.comment--answer)::before { content: ""; position: absolute; height: calc(100% + 40px); border-left: 1px solid rgba(61, 61, 61, 0.29); width: 100%; border-radius: 26px; left: 25px; z-index: -1; transform: scale(1); opacity: 1; transform-origin: center top; transition: 0.7s; }

.answer-inc .comment:not(.comment--answer)::after { content: ""; position: absolute; left: 0px; top: 0px; height: 53px; width: 53px; background: rgb(255, 255, 255); z-index: 1; }

.comment { display: flex; margin-bottom: 28px; position: relative; z-index: 2; }

.comment__author-pic { width: 50px; min-width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 11px; z-index: 2; }

.comment__author-pic img { width: 100%; object-fit: cover; object-position: center center; }

.comment__body { padding: 20px; max-width: 597px; width: 100%; background: rgb(247, 247, 247); border-radius: 20px; transition: 0.3s; min-width: 320px; }

.comment__author-name { font-weight: 600; font-size: 16px; line-height: 24px; margin-bottom: 10px; }

.comment__text { font-size: 16px; line-height: 24px; }

.comment__footer { display: flex; justify-content: space-between; }

.comment__ui { display: flex; padding-left: 19px; margin-top: 5px; }

.comment__ui-item { font-size: 14px; line-height: 21px; text-decoration: none; color: rgb(0, 0, 0); }

.comment__ui-item:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; background: rgb(196, 196, 196); border-radius: 50%; margin: 0px 8px; transform: translateY(-1px); }

.comment__img { max-width: 320px; width: 100%; margin-top: 10px; display: block; }

.emoji-box { display: flex; align-items: center; height: 32px; background: rgb(242, 242, 242); border-radius: 20px; transform: translateY(-6px); margin-right: 20px; }

.emoji-box__emoji-wrap { display: flex; transition: 0.3s; }

.emoji-box__ico { width: 32px; height: 32px; margin-left: -14px; position: relative; }

.emoji-box__ico:first-child { z-index: 3; }

.emoji-box__ico:nth-child(2) { z-index: 2; }

.emoji-box__ico:last-child { z-index: 1; }

.emoji-box__like-count { font-size: 18px; line-height: 100%; margin-left: 11px; margin-right: 11px; }

.comment--answer { margin-left: 62px; }

.comment--answer .comment__author-pic { min-width: 25px; width: 25px; height: 25px; margin-right: 8px; }

.comment--answer .comment__body { max-width: 459px; min-width: 229px; }

.comment--answer .emoji-box { background: none; transform: translateY(0px); margin-right: 2px; }

.comment--answer .emoji-box__ico { width: 19px; height: 19px; margin-left: -5px; }

.comment--answer .emoji-box__like-count { font-size: 14px; line-height: 21px; }

@media screen and (max-width: 980px) {
  .comments { max-width: 680px; margin: 0px auto; }
}

@media screen and (max-width: 767px) {
  .comments__title { font-weight: 300; font-size: 16px; line-height: 135%; }
  .comments .emoji-box { background: none; transform: translateY(0px); margin-right: 2px; }
  .comments .emoji-box__ico { width: 19px; height: 19px; margin-left: -5px; }
  .comments .emoji-box__like-count { font-size: 14px; line-height: 21px; }
}

@media screen and (max-width: 520px) {
  .comment__body { min-width: 300px; }
}

@media screen and (max-width: 440px) {
  .comment--answer { margin-left: 30px; }
}

@media screen and (max-width: 410px) {
  .comment__author-pic { margin-right: 4px; }
}

@media screen and (max-width: 380px) {
  .comments { overflow: hidden; }
}

@media screen and (min-width: 466px) {
  .comment--answer .comment__body { min-width: 348px; }
}

@media screen and (min-width: 472px) {
  .comment__body { min-width: 400px; }
}

@media screen and (max-width: 472px) {
  .comment__ui { padding-left: 4px; }
  .comment__ui-item { font-size: 12px; }
  .comment__ui-item:not(:last-child)::after { width: 4px; height: 4px; margin: 0px 5px; }
}

@media screen and (max-width: 384px) {
  .comment__body { min-width: 285px !important; }
}

@media screen and (max-width: 364px) {
  .comment__body { min-width: 250px !important; }
}

@keyframes emoji-appear { 
  0% { display: none; transform: scale(0); }
  1% { display: block; transform: scale(0); }
  65% { transform: scale(1); }
  85% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.emoji-box .emoji-box__ico { display: none; }

.emoji-box .emoji-box__ico.active { display: block; }

.emoji-box.active .emoji-box__ico { transform: scale(0); display: none; transition: all; }

.emoji-box.active .emoji-box__ico.active { display: block; transform: scale(1); animation: 0.5s linear 0s 1 normal forwards running emoji-appear; }

@media screen and (max-width: 372px) {
  .comment__ui-item { font-size: 10px; }
  .comments .emoji-box__ico { width: 15px; height: 15px; }
  .emoji-box__like-count { font-size: 12px; }
}