.content-comment{
  margin-top:clamp(15px,4.3vw,43px);
  position:relative;
  z-index:99;
}
.content-comment-tool-fixed-box .content-comment{
  margin-top:0;
  cursor:pointer;
  padding-bottom:0;
}
.content-comment-box-line{
  width:100%;
  height:7px;
  background-color:#e20413;
}

.content-comment-box{
  border-left: solid 2px #d1d1d1;
  border-right: solid 2px #d1d1d1;
  background-color: #fafafa;
  border-bottom: solid 2px #d1d1d1;
  padding:clamp( 10px,2vw,20px ) 0;
}
.content-comment-tool-fixed-box .content-comment-box{
  border-bottom: 0;
}
.content-comment-inner{
  width:calc( 100% - clamp( 20px,4vw,40px ) );
  margin: 0 auto;
}
.content-cmment-up{
  width:clamp(5px,2.2vw,22px);
  margin-bottom:-1px;
  margin-left:auto;
  margin-right:auto;
}
.content-comment-tool-fixed-box{
  position:fixed;
  left:0;
  bottom:0;
  z-index:99;
  width:100%;
  display:none;
}
.content-comment-tool-fixed-box .content-comment-tool-title{
  cursor:pointer;
}
.content-comment-tool-fixed-box .content-comment-tool{
  padding-right:20px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.content-comment-tool-fixed-box .upload-picture-white-box,.content-comment-tool-fixed-box .content-comment-publish{
  display:none;
}

.content-comment-tool-fixed-box .flex-between{
  padding-top:0;
  padding-bottom:0;
}
.comment-picture-list{
  display:flex;
  margin-top:5px;
}
.comment-picture-list-unit{
  flex:none;
  position:relative;
  margin-left:8px;
}
.comment-picture-list-unit:first-of-type{
  margin-left:0;
}
.comment-picture-list-unit-img{
  width:150px;
  height:150px;
  position:relative;
  z-index:10;
  object-fit: cover;
  border-radius:5px;
  display:block;
}
.comment-picture-list-unit-close{
  background-image: url(https://tkww-static.tkww.hk/index-HKTKWW/close.png);
  width: 21px;
  height: 21px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 99;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  cursor: pointer;
  display:none;
}
.upload-publish-img-list .comment-picture-list-unit-close{
  display:block;
}
.like-count-hide{
  display:none;
}
.content-comment-tool{
  width:100%;
}
.content-comment-tool-left{
  position:relative;
  width: clamp(40px,6.4vw,64px);
  height: clamp(40px,6.4vw,64px);
  filter:drop-shadow( 0px 0px 5px 
		#a2a2a2);
  object-fit: contain;
}
.upload-picture-white-box{
  position:relative;
  z-index:10;
  width:clamp( 15px,2.2vw,22px );
}

.content-comment-tool-title{
  background-image: linear-gradient(to bottom, rgba(255,255,255,0),#f89300);
  width:84px;
  line-height:46px;
  height:100%;
  font-size:23px;
  text-align:center;
  color:#ffffff;
  border-top-right-radius:22.5px;
  border-right:1px solid #ffffff;
  flex:none;
}
.like-icon{
  width:clamp(15px,2.1vw,21px);
  margin-left:6px;
  flex:none;
  cursor:pointer;
}

.content-comment-font-size{
  font-size: 18px;
  height:100%;
  line-height:46px;
  color:#ffffff;
  flex:none;
  cursor:pointer;
}
.content-comment-publish{
  font-size: clamp(10px,1.8vw,18px);
  line-height:clamp( 18px,2.9vw,29px );
  color:#ffffff;
  flex:none;
  padding:0 clamp( 10px,1.8vw,18px );
  cursor:pointer;
  border-radius:clamp( 18px,2.9vw,29px );
  background-color: #e20413;
}
.content-comment-tool-right{
  margin-left:clamp( 10px,1.8vw,18px );
}
.content-comment-tool-right-bottom{
  margin-top:10px;
  justify-content:space-between;
}
.content-comment-textarea-box{
  height:clamp( calc( 40px - 4px ),calc( 6.4vw - 4px ),calc( 64px - 4px ) );
  margin-top:2px;
}
.content-comment-textarea{
  resize:none;
  width:100%;
  font-size: clamp(10px,1.8vw,18px);
  color: #797979;
  line-height: clamp(13px,2vw,22px);
  background-color:#ffffff;
  outline:none;
  padding:clamp(10px,1.5vw,15px) 10px;
  border-radius: 7px;
  border: solid 1px #9a9a9a;
  height:100%;
}
.content-comment-textarea::placeholder,.content-comment-tool-fixed-box .content-comment-textarea {
  color: #797979;
  font-size:clamp(10px,1.8vw,18px);
}

.content-comment-textarea::-webkit-scrollbar{
  width: 3px;
}
.content-comment-textarea::-webkit-scrollbar-thumb{
  background-color: #dadada;
  border-radius:3px;
}
.content-comment-list{
  margin-top:30px;
  display:none;
  border-top:2px solid #c9c9c9;
}
.comment-form{
  padding-top:clamp(10px,2.5vw,25px);
  padding-bottom:10px;
  border-bottom:2px solid #c9c9c9;
}
.comment-form:first-of-type{
  margin-top:0;
}
.comment-user-avatar{
  width: clamp(40px, 6.4vw, 64px);
  height: clamp(40px, 6.4vw, 64px);
}
.comment-user-avatar img{
  width:100%;
  height:100%;
  object-fit: contain;
  filter: drop-shadow(0px 0px 5px #a2a2a2);
  transform: translateZ(0);
  -webkit-transform: translateZ(0); /* 适配Safari兼容 */
}
.comment-body{
  flex:1;
  margin-left: clamp(10px, 1.8vw, 18px);
}
.user-meta{
  display:flex;
  font-size:clamp(8px,1.4vw,14px);
}
.user-meta .name{
  color: #e20413;
  flex:none;
  font-weight:bold;
}
.user-meta .comment-date{
  color: #999999;
  flex:none;
  margin-left:8px;
}
.comment-message{
  font-size: clamp( 10px,1.6vw,16px );
  line-height:clamp( 18px,2.2vw,22px );
  margin-top:5px;
}
.comment-replay{
  margin-top:9px;
}
.comment-replay .comment-message{
  margin-top:0;
  color: #c9c9c9;
}
.comment-operate{
  margin-top:10px;
}
.reply-box{
  display:flex;
  font-size:14px;
  align-items:center;
  color: #999999;
}
.like-box{
  display:flex;
  align-items:center;
}
.comment-like-icon{
  width:clamp(15px,1.8vw,18px);
  cursor:pointer;
}
.like-count{
  margin-left:4px;
  width:42px;
}
.replay{
  cursor:pointer;
  width: 15px;
}
.delete-replay{
  margin-left:auto;
  display:none;
  width:clamp( 15px,2.3vw,23px );
  cursor:pointer;
}
.view-hide,.view-count{
  flex:none;
  margin-left:3px;
}
.view-hide{
  display:none;
}
.view-replay-show .view-hide{
  display:block;
}
.view-replay-show .view-count{
  display:none;
}
.view-replay-show .count-down-icon{
  transform: rotateZ(180deg);
}
.view-replay-box{
  position:relative;
  margin-top:10px;
  font-size:clamp(8px,1.4vw,14px);
  height: clamp(8px,1.4vw,14px);
  line-height: clamp(8px,1.4vw,14px);
  overflow: hidden;
}
.view-replay{
  display:flex;
  align-items:center;
  cursor:pointer;
  position:relative;
  z-index:99;
  color: #e20413;
  background-color: #fafafa;
}
.view-replay-box[count="0"]{
  display:none;
}
.view-load{
  color:#999999;
  position:absolute;
  left:0;
  top:0;
  z-index:10;
}
.count-down-icon{
  width:10px;
  flex:none;
  color: #e20413;
}
.reply-list{
  margin-top:12px;
}
.reply-list-hide{
  display:none;
}
.replay-item{
  margin-top:8px;
}
.reply-item-inner{
  display:flex;
}
.replay-item:first-of-type{
  margin-top:0;
}
.replay-right-area{
  flex:1;
  margin-left:clamp(10px, 1.8vw, 18px);;
}
.content-comment-list-more-box{
  margin-top: clamp(10px,2vw,20px);
  position:relative;
  display:none;
  height:clamp(20px,3.5vw,35px);
}
.content-comment-list-more,.content-comment-list-load{
  text-align:center;
  line-height:clamp(20px,3.5vw,35px);
}
.content-comment-list-more{
  position:relative;
  font-size: clamp(10px,1.6vw,16px);
  cursor:pointer;
  z-index:99;
  color: #e20413;
  background-color: #fafafa;
}
.content-comment-list-load{
  font-size: clamp(8px,1.4vw,14px);
  color: #999999;
  z-index:10;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.name-to{
  color:#999999;
  margin-right:5px;
}
.comment-textarea-inner{
  display:flex;
  width:100%;
  height:clamp(40px,4.9vw,49px);
  position:relative;
}
.comment-textarea-inner-left{
  width:1px;
  height:100%;
  position:absolute;
  z-index:99;
  left:0;
  top:0;
  background:#cdcdcd;
}
.comment-textarea-inner-top,.comment-textarea-inner-bottom{
  width:calc(100% - 200px + 75px / 2 + 5px);
  height:1px;
  position:absolute;
  z-index:99;
  left:0;
  background:#cdcdcd;
}
.comment-textarea-inner-top{
  top:0;
}
.comment-textarea-inner-bottom{
  bottom:0;
}
.submit-btn{
  font-size: clamp(10px, 1.5vw, 15px);
  line-height: clamp(18px, 2.4vw, 24px);
  color: #ffffff;
  flex: none;
  padding: 0 clamp(10px, 1.3vw, 13px);
  cursor: pointer;
  border-radius: clamp(18px, 2.4vw, 24px);
  background-color: #e20413;
}
.comment-textarea {
  margin-top: 9px;
}
.comment-replay-line{
  width:4px;
  background-color: #c9c9c9;
  margin-right:7px;
}
.replay-text-area{
  position:relative;
  background-color: #f3f3f3;
  z-index:10;
  resize:none;
  width:100%;
  font-size: clamp(10px,1.6vw,16px);
  color: #797979;
  line-height: clamp(18px,2.2vw,22px);
  height:100%;
  outline:none;
  padding:clamp(10px,1.2vw,12px);
  border-radius: 5px;
  border: solid 1px #9a9a9a;
}
.replay-text-area::placeholder {
  color: #797979;
  font-size:14px;
}
.replay-text-area::-webkit-scrollbar{
  width: 3px;
}
.replay-text-area::-webkit-scrollbar-thumb{
  background-color: #dadada;
  border-radius:3px;
}
.comment-textarea-tool{
  display:flex;
  align-items:center;
  margin-top:7px;
}
.upload-picture-box,.upload-picture-white-box{
  position:relative;
  cursor:pointer;
}
.upload-picture-box{
  margin-left:auto;
  width:clamp(15px,2.2vw,22px);
}
.upload-picture-white-box{
  margin-left:clamp(10px,1.4vw,14px);
}
.upload-picture-input{
  position:absolute;
  z-index:99;
  width: 100%;
  height: 140%;
  bottom:0;
  font-size:0;
  cursor:pointer;
  left:0;
  opacity: 0;
}
.picture-icon{
  width:100%;
  flex:none;
  position:relative;
  z-index:10;
}
.upload-picture-box{
  margin-right:22px;
}
@media (max-width:576px){
  .content-comment-textarea{
    font-size:clamp( 1px,4.86vw,22px );
    line-height: clamp(1px, 5vw, 25px);
  }
  .content-comment-textarea::placeholder,.content-comment-tool-fixed-box .content-comment-textarea {
    color: #797979;
    font-size:clamp( 1px,4.86vw,22px );
  }
  .content-comment-textarea-box{
    height: clamp(calc(1px - 4px), calc(12.5vw - 4px), calc(72px - 4px));
  }
  .content-comment-tool-left,.comment-user-avatar{
    height: clamp(1px, 12.5vw, 72px);
    width: clamp(1px, 12.5vw, 72px);
  }
  .content-comment-publish{
    font-size:clamp(1px,4.17vw,18px);
    line-height: clamp(1px, 6vw, 29px);
  }
  .user-meta{
    font-size:clamp( 1px,4.5vw,22px );
  }
  .comment-message{
    font-size:clamp( 1px,4.5vw,22px );
    line-height:clamp( 1px,5vw,26px );
  }
  .view-replay-box{
    font-size: clamp( 1px,4.17vw,18px );
    height: clamp( 1px,4.17vw,18px );
    line-height: clamp( 1px,4.17vw,18px );
  }
  .replay-text-area{
    font-size:clamp( 1px,4.5vw,22px );
    line-height:clamp( 1px,5vw,26px );
  }
  .comment-textarea-inner{
    height: clamp(1px, 12vw, 60px);
  }
  .submit-btn{
    font-size: clamp(1px, 4.17vw, 18px);
    line-height: clamp(1px, 6vw, 29px);
  }
  .content-comment-list-more, .content-comment-list-load{
    font-size: clamp(1px, 4.17vw, 18px);
    line-height: clamp(1px, 6vw, 29px);
  }
}