.tem03-sns-comment{padding:20px 0}
.tem03-sns-comment .title{font-size: 18px;color: #333;margin: 30px 0 10px;}
.tem03-sns-comment .item.flexBoxWrap{flex-wrap:nowrap;-webkit-flex-wrap:nowrap;padding:24px 0;border-top:1px solid #ddd}
.tem03-sns-comment .username{width:10vw;color:#909399;font-size:14px;word-break:break-all;margin-right:10px}
.tem03-sns-comment .comdetail{flex:1;-webkit-flex:1}
.tem03-sns-comment .comment{font-size:14px;color:#000000;}
.tem03-sns-comment .date{font-size:14px;color:#909399 ;margin-top:8px}
.tem03-sns-comment .comitem{padding-top:10px;border-top:2px solid #e4e7ed}
.tem03-sns-comment .name{color:#909399;font-size:18px}
.tem03-sns-comment .datebox,
.tem03-sns-comment .comitems .comment{margin-top:8px}
.tem03-sns-comment .datebox .date{margin-top:0}
.tem03-sns-comment .datebox .reply{font-size:16px;color:var(--main-color);margin-left:16px;cursor:pointer}
.tem03-sns-comment .comI{padding:17px 22px;width:100%;border:1px solid #E4E7ED;background-color:#f2f2f2;margin-top:12px;position:relative}
.tem03-sns-comment .comI:after{content:"";width:0px;height:0px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #f7f7f7;position:absolute;left:119px;top:-14px}
.tem03-sns-comment .comI_text{padding:10px 10px 21px;background-color:#fff;border:1px solid #e4e7ed;position:relative}
.tem03-sns-comment .comI_text textarea{border:none;width:100%;height:48px;outline:none}
.tem03-sns-comment .comI_text textarea::-webkit-scrollbar{width:8px;background-color:#F5F5F5}
.tem03-sns-comment .comI_text textarea::-webkit-scrollbar-thumb{border-radius:8px;background-color:#DCDFE6}
.tem03-sns-comment .textnum{position:absolute;bottom:3px;right:24px}
.tem03-sns-comment .commentfoot{justify-content:flex-end;margin-top:10px}
.tem03-sns-comment .commbtn{width:78px;height:32px;line-height:32px;text-align:center;color:#fff;background-color:var(--main-color);border-radius:2px;font-size:14px;cursor:pointer}
.tem03-sns-comment .commbtn.cancel{border:1px solid #dcdfe6;background-color:#fff;color:#595959;margin-right:14px}
.tem03-sns-comment .commbtn.submit.active{opacity:0.6;cursor:not-allowed}
.tem03-sns-comment .commentimg{width:15%;margin-top:10px;cursor:pointer}
.tem03-sns-comment .commentimg.active{border:2px solid var(--main-color);cursor:pointer}
.tem03-sns-comment .commentimg img{width:100%}
.tem03-sns-comment .commentimgbox{display:none;position:relative;padding:26px;margin-top:18px;border:2px solid #e4e7ed}
.tem03-sns-comment .commentimgbox.active{display:inline-block;max-width:100%}
.tem03-sns-comment .commentimgbox img{max-width:100%}
.tem03-sns-comment .commentimgclose{font-size:36px;cursor:pointer;color:#c5c5c5;position:absolute;top:-12px;right:2px;cursor:pointer}
/* 寮圭獥 */
.tem03-sns-comment .closePopup{width: 100%;height:100%;position:fixed;z-index:99999999;display:none;background: rgba(0,0,0,0.5);top: 0;user-select: none;left:0;top:0;}
.tem03-sns-comment .closePopup.active{display: block;}
.tem03-sns-comment .closePopup .main{width:300px;padding:50px 30px;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);background-color:#fff;position: absolute;top:50%;left: 50%;text-align:center;margin-left:-180px;margin-top:-80px;position: relative;border-radius: 4px;transform: translate(-50%,-50%);}
.tem03-sns-comment .closePopup .close{opacity:1;font-size:18px;position: absolute;right: 5px;top:5px;}
.tem03-sns-comment .closePopup .closePopupcon {justify-content: center;align-items: center;}
.tem03-sns-comment .closePopup img{width: 40px;}
.tem03-sns-comment .closePopup .text{text-align: left;padding-left: 15px;}
.tem03-sns-comment .text_title{font-size:1.25rem;color:#333}
.tem03-sns-comment .text_desc{opacity: .5;}
body.designer-body .tem03-sns-comment .designerShow{display:block}
@media (max-width:1200px){
    .tem03-sns-comment .username{width:12vw}
}
@media (max-width:992px){
    .tem03-sns-comment .username{width:16vw}
    .tem03-sns-comment .comI{padding:10px}
    .tem03-sns-comment .commbtn{padding:0 14px}
    .tem03-sns-comment .comI_text{padding:6px 6px 15px}
    .tem03-sns-comment .comI_text textarea{height:60px}
    .tem03-sns-comment .textnum{bottom:2px;right:14px}
}
@media (max-width:768px){
    .tem03-sns-comment{padding:3%;}
    .tem03-sns-comment .username{width:35vw}
    .tem03-sns-comment .commentimg{width:48;margin-right:3.5%}
    .tem03-sns-comment .commentimg:nth-of-type(2n+2){margin-right:0}
}