.content-comment{
  margin-top:70px;
  position:relative;
  z-index:99;
}
.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%;
  display:flex;
  justify-content:space-between;
  background-color:#e20413;
  height:46px;
  border-top-left-radius:3px;
  border-top-right-radius:22px;
  border-bottom-right-radius:22px;
}
.content-comment-tool-left,.content-comment-tool-right{
  display:flex;
  align-items:center;
  flex:none;
}
.content-comment-tool-left{
  position:relative;
}
.upload-picture-white-box{
  position:relative;
  z-index:10;
}
.share-box{
  position:relative;
  z-index:99;
}
.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:17px;
  margin-left:42px;
  flex:none;
  cursor:pointer;
}
.share-icon{
  width:20px;
  flex:none;
}
.share-box{
  position:relative;
  transition:0.5s;
  height:100%;
  width:46px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-left:16px;
  flex:none;
  cursor:pointer;
}
.share-box:hover{
  background:#ca020f;
}
.share-list{
  transition:0.5s;
  transform:scaleX(0) scaleY(0);
  transform-origin:50% 50%;
  position:absolute;
  left:0;
  bottom:100%;
  width:100%;
  background:#ca020f;
  /*transform:scaleX(1) scaleY(1);*/
}
.share-box:hover .share-list{
  transform:scaleX(1) scaleY(1);
}
.share-list-unit{
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:0.5s;
  background:#ca020f;
  position:relative;
  z-index:10;
}
.share-list-unit.wx{
  z-index:99;
}
.share-list-unit svg{
  height:20px;
  color:#ffffff;
  flex:none;
  position:relative;
  transition:0.5s;
}
.share-list-unit:hover svg{
  color:#fcc724;
}
.share-list-unit:hover{
  background:#ad030c;
}
.share-weixin-box{
  padding:5px;
  position:absolute;
  transform:scaleX(0) scaleY(0) translateY(-50%);
  transform-origin:50% 0;
  transition:0.5s;
  left:100%;
  top:50%;
  background:#ad030c;
  border-radius: 5px;
  /*transform:scaleX(1) scaleY(1) translateY(-50%);*/
  opacity: 0;
}
.weixin-qrcode{
  padding: 3px;
  background: #ffffff;
}
.share-list-unit:hover .share-weixin-box{
  transform:scaleX(1) scaleY(1) translateY(-50%);
  opacity: 1;
}
.weixin-qrcode img{
  width:100px;
  position:relative;
  z-index:10;
}
.qrCodeIco{
  position:absolute;
  left:50%;
  top:50%;
  z-index:99;
  transform:translateX(-50%) translateY(-50%);
  width:18%;
}
.content-comment-font-size{
  font-size: 18px;
  height:100%;
  line-height:46px;
  color:#ffffff;
  flex:none;
  cursor:pointer;
}
.content-comment-publish{
  width:148px;
  font-size: 22px;
  height:100%;
  line-height:46px;
  color:#ffffff;
  flex:none;
  margin-left:19px;
  text-align:center;
  background-image: linear-gradient(to left, rgba(255,255,255,0),#f89300);
  border-left:2px solid #ffffff;
  cursor:pointer;
  border-radius:23px;
}
.content-comment-box{
  border-radius: 3px 22.5px 3px 3px;
  border: solid 1px #e20413;
}
.content-comment-textarea-box{
  padding:9px 6px 2px 12px;
}
.content-comment-textarea{
  resize:none;
  width:100%;
  font-size: 16px;
  color: #666666;
  line-height: 22px;
  height:70px;
  background-color:rgba(255,255,255,0);
  outline:none;
  padding-right:6px;
}
.content-comment-textarea::placeholder {
  color: #999999;
  font-size:14px;
}
.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;
}
.comment-form{
  display:flex;
  margin-top:25px;
}
.comment-form:first-of-type{
  margin-top:0;
}
.comment-user-avatar{
  width:40px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
  height:40px;
}
.comment-user-avatar img{
  width:100%;
  height:100%;
}
.comment-body{
  flex:1;
  margin-left:7px;
}
.user-meta{
  display:flex;
  font-size:14px;
}
.user-meta .name{
  color: #e20413;
  flex:none;
}
.user-meta .comment-date{
  color: #999999;
  flex:none;
  margin-left:8px;
}
.comment-message{
  font-size: 16px;
  line-height: 22px;
  margin-top:5px;
}
.comment-operate{
  margin-top:8px;
}
.reply-box{
  display:flex;
  font-size:14px;
  color: #999999;
}
.like-box{
  display:flex;
  align-items:center;
}
.comment-like-icon{
  width:14px;
  cursor:pointer;
}
.like-count{
  margin-left:4px;
  width:42px;
}
.replay{
  cursor:pointer;
}
.delete-replay{
  margin-left:22px;
  display:none;
  cursor:pointer;
}
.view-hide,.view-count{
  flex:none;
}
.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:15px;
  font-size:14px;
  height: 14px;
  line-height: 14px;
  overflow: hidden;
}
.view-replay{
  display:flex;
  align-items:center;
  cursor:pointer;
  position:relative;
  background-color:#f5f5f5;
  z-index:99;
  color: #e20413;
}
.view-replay-box[count="0"]{
  display:none;
}
.view-load{
  color:#999999;
  position:absolute;
  left:0;
  top:0;
  z-index:10;
}
.count-down-icon{
  width:16px;
  flex:none;
  color: #e20413;
  margin-right:6px;
}
.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:7px;
}
.content-comment-list-more-box{
  width: 150px;
  height: 35px;
  margin-top: 7px;
  margin-left: auto;
  margin-right: auto;
  position:relative;
  display:none;
}
.content-comment-list-more,.content-comment-list-load{
  height:100%;
  text-align:center;
  line-height:35px;
}
.content-comment-list-more{
  position:relative;
  font-size: 16px;
  border-radius: 17.5px;
  border: solid 1px #dadada;
  cursor:pointer;
  background-color:#f5f5f5;
  z-index:99;
}
.content-comment-list-load{
  font-size: 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:75px;
  position:relative;
  background-image: linear-gradient(to right, #eeeeee 80%, transparent 80%);
}
.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{
  flex:none;
  height:100%;
  background-image: linear-gradient(to right, #fec26a, #f95159);
  border-radius:75px;
  width:200px;
  color:#ffffff;
  font-size:22px;
  text-align:center;
  line-height:75px;
  position:relative;
  z-index:199;
  cursor:pointer;
  margin-left:10px;
}
.comment-textarea {
  margin-top: 9px;
}
.replay-text-area{
  flex:1;
  position:relative;
  z-index:10;
  resize:none;
  width:100%;
  font-size: 16px;
  color: #666666;
  line-height: 22px;
  height:100%;
  background-color: rgba(0,0,0,0);
  outline:none;
  padding-right:6px;
  padding-left:6px;
  padding-top:4px;
  padding-bottom:4px;
}
.replay-text-area::placeholder {
  color: #999999;
  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;
  color:#999999;
  font-size: 14px;
  margin-top:5px;
}
.upload-picture-box,.upload-picture-white-box{
  position:relative;
  cursor:pointer;
}
.upload-picture-white-box{
  margin-left:27px;
}
.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:20px;
  height:17px;
  flex:none;
  position:relative;
  z-index:10;
}
.upload-picture-box{
  margin-right:22px;
}
@media (max-width:1400px){
  .comment-textarea-inner-top, .comment-textarea-inner-bottom{
    width: calc( 100% - 13vw + 5.5vw / 2 );
  }
  .content-comment-box{
    border-radius: 3px calc( 3.5vw / 2 ) 3px 3px;
  }
  .content-comment{
    margin-top: 5vw;
  }
  .content-comment-tool-title{
    width: 6vw;
    font-size: 1.6vw;
    line-height: 3.3vw;
  }
  .content-comment-tool{
    border-top-right-radius: calc( 3.3vw / 2 );
    border-bottom-right-radius: calc( 3.3vw / 2 );
    height:3.3vw;
  }
  .like-icon{
    width: 1.3vw;
    margin-left: 3vw;
  }
  .share-box{
    width: 3.2vw;
    margin-left: 0.7vw;
  }
  .share-icon{
    width: 1.4vw;
  }
  .upload-picture-white-box{
    margin-left:1.5vw;
  }
  .picture-icon{
    width: 1.5vw;
    height: 1.3vw;
  }
  .share-list-unit svg{
    height:1.4vw;
  }
  .weixin-qrcode img{
    width:8vw;
  }
  .content-comment-font-size{
    line-height:3.3vw;
    font-size: 1.3vw;
  }
  .content-comment-publish{
    width:11vw;
    margin-left: 1.4vw;
    line-height:3.3vw;
    font-size: 1.6vw;
    border-radius:calc( 3.3vw / 2 );
  }
  .content-comment-textarea-box{
    padding:1vw;
  }
  .content-comment-textarea{
    font-size: 1.2vw;
    line-height: 2vw;
    height: 5vw;
    padding-right: 1vw;
  }
  .content-comment-textarea::placeholder {
    font-size:1.1vw;
  }
  .content-comment-list{
    margin-top: 2vw;
  }
  .comment-user-avatar{
    width: 3vw;
    height: 3vw;
  }
  .comment-body{
    margin-left: 0.5vw;
  }
  .user-meta{
    font-size: 1.1vw;
  }
  .user-meta .comment-date{
    margin-left: 0.5vw;
  }
  .comment-message{
    margin-top: 0.2vw;
    font-size:1.2vw;
  }
  .comment-operate{
    margin-top: 0.2vw;
  }
  .comment-like-icon{
    width: 1.1vw;
  }
  .like-count{
    margin-left: 0.1vw;
  }
  .reply-box{
    font-size:1.1vw;
  }
  .like-count{
    width:3vw;
  }
  .delete-replay{
    margin-left: 1.5vw;
  }
  .comment-textarea{
    margin-top: 0.5vw;
  }
  .replay-text-area{
    font-size: 1.2vw;
    line-height: 2vw;
    padding-right: 1vw;
  }
  .replay-text-area::placeholder {
    font-size:1.1vw;
  }
  .submit-btn{
    margin-left:0.5vw;
  }
  .submit-btn{
    width:13vw;
    font-size: 1.5vw;
    border-radius: calc( 5.5vw / 2 );
    line-height: 5.5vw;
  }
  .comment-textarea-inner{
    height:5.5vw;
  }
  .view-replay-box{
    font-size: 1.1vw;
    height: 1.3vw;
    line-height: 1.3vw;
  }
  .upload-picture-box{
    margin-right:1.5vw;
  }
  .comment-textarea-tool{
    font-size:1.1vw;
    margin-top:0.2vw;
  }
  .reply-list{
    margin-top:0.7vw;
  }
  .replay-item{
    margin-top:0.3vw;
  }
  .content-comment-list-more-box{
    margin-top:0.2vw;
    width:11vw;
    height:2.5vw;
  }
  .content-comment-list-more, .content-comment-list-load{
    line-height:2.5vw;
  }
  .content-comment-list-more{
    font-size:1.2vw;
    border-radius: calc( 2.5vw / 2 );
  }
  .content-comment-list-load{
    font-size:1.1vw;
  }
}
@media (max-width:1099px){
  .content-comment-box{
    border-radius: 3px calc( 4vw / 2 ) 3px 3px;
  }
  .content-comment-tool-title{
    font-size: 2vw;
    width: 7vw;
  }
  .content-comment-font-size{
    font-size: 1.7vw;
  }
  .content-comment-publish{
    font-size:2vw;
    border-radius:calc( 3.7vw / 2 );
  }
  .content-comment-tool{
    height:3.7vw;
    border-top-right-radius: calc( 3.7vw / 2 );
    border-bottom-right-radius: calc( 3.7vw / 2 );
  }
  .content-comment-tool-title,.content-comment-publish,.content-comment-font-size{
    line-height:3.7vw;
  }
  .content-comment-textarea{
    font-size: 1.6vw;
  }
  .content-comment-textarea::placeholder {
    font-size:1.5vw;
  }
  .user-meta{
    font-size:1.5vw;
  }
  .comment-message{
    font-size:1.6vw;
  }
  .reply-box{
    font-size:1.5vw;
  }
  .view-replay-box{
    font-size: 1.5vw;
    line-height: 1.7vw;
    height:1.7vw;
  }
  .replay-text-area{
    font-size: 1.6vw;
  }
  .replay-text-area::placeholder {
    font-size:1.5vw;
  }
  .submit-btn{
    font-size:1.9vw;
  }
  .comment-textarea-tool{
    font-size:1.5vw;
  }
  .content-comment-list-more{
    font-size:1.6vw;
    border-radius: calc( 3vw / 2 );
  }
  .content-comment-list-load{
    font-size:1.5vw;
  }
  .content-comment-list-more-box{
    height:3vw;
  }
  .content-comment-list-more, .content-comment-list-load{
    line-height: 3vw;
  }
}
@media (max-width:767px){
  .content-comment-tool{
    height:8vw;
    border-top-right-radius: calc( 8vw / 2 );
    border-bottom-right-radius: calc( 8vw / 2 );
  }
  .content-comment-tool-title, .content-comment-publish, .content-comment-font-size{
    line-height: 8vw;
  }
  .content-comment-tool-title {
    width: 18vw;
    font-size: 4.27vw;
  }
  .like-icon {
    width: 4vw;
  }
  .share-box{
    width:8vw;
    margin-left:1.5vw;
  }
  .share-icon{
    width:4vw;
  }
  .picture-icon {
    width: 4vw;
    height: calc( 4vw * 1.3 / 1.5 );
	}
  .upload-picture-white-box{
    margin-left: 3vw;
  }
  .content-comment-font-size{
    font-size: 3.73vw;
  }
  .content-comment-publish {
    border-radius: calc( 8vw / 2 );
    font-size: 3.73vw;
  }
  .content-comment-publish{
    width:20vw;
  }
  .content-comment-box{
    border-radius: 3px calc( 9vw / 2 ) 3px 3px;
  }
  .content-comment-publish{
    margin-left: 3vw;
  }
  .share-list-unit{
    height:9vw;
  }
  .share-list-unit svg{
    height:4vw;
    width:21vw;
  }
  .content-comment-textarea-box{
    padding:1.5vw 1vw 1vw 1.2vw;
  }
  .content-comment-textarea{
    font-size: 4.27vw;
    height: 20vw;
    line-height: 6vw;
  }
  .content-comment-list{
    margin-top: 5.47vw;
  }
  .comment-user-avatar{
    width: 6.4vw;
    height: 6.4vw;
  }
  .comment-body{
    margin-left:1.2vw;
  }
  .user-meta{
    font-size:3.73vw;
  }
  .user-meta .comment-date{
    margin-left: 3.07vw;
  }
  .comment-message{
    margin-top:1.3vw;
    font-size: 3.73vw;
    line-height: 6vw;
  }
  .reply-box{
    font-size:3.73vw;
  }
  .comment-like-icon{
    width:4vw;
  }
  .like-count{
    width: 11vw;
    margin-left: 1.07vw;
  }
  .delete-replay{
    margin-left: 5vw;
  }
  .view-replay-box{
    margin-top: 3vw;
    font-size: 3.73vw;
    line-height: 6vw;
    height: 6vw;
  }
  .comment-operate,.comment-textarea{
    margin-top:1vw;
  }
  .content-comment-textarea::placeholder,.replay-text-area::placeholder,.replay-text-area {
    font-size:3.73vw;
  }
  .replay-text-area{
    line-height:6vw;
  }
  .comment-textarea-inner{
    height:12vw;
  }
  .submit-btn{
    font-size:3.73vw;
    line-height:12vw;
    border-radius: calc( 12vw / 2 );
    width:22vw;
  }
  .comment-textarea-inner-top, .comment-textarea-inner-bottom{
    width: calc( 100% - 22vw + 12vw / 2 );
  }
  .comment-textarea-tool{
    margin-top:1vw;
    font-size:3.73vw;
  }
  .replay-item,.reply-list{
    margin-top:1vw;
  }
  .upload-picture-box{
    margin-right:5vw;
  }
  .content-comment-list-more-box{
    margin-top:6vw;
    height:5.6vw;
    width: 35.47vw;
  }
  .content-comment-list-more, .content-comment-list-load{
    line-height:5.6vw;
    font-size: 3.2vw;
  }
  .content-comment-list-more{
    border-radius: calc( 5.6vw / 2 );
    color:#666666;
  }
  .weixin-qrcode img{
    width:19vw;/*移動端提示寬度，不能修改，需要在js中修改*/
  }
  .weixin-qrcode{
    height: calc( 19vw + 3px + 3px );
    box-sizing: border-box;
  }
}