@charset "UTF-8";
/*
    [제목] 핀업챗 뷰 페이지 CSS
    [생성일] 2021-11-18
    [내용] 핀업챗 뷰 페이지 에 있는 레이아웃 스타일을 포함하고 있음.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/

/*뷰 레이아웃 스타일*/
.webchat_view { position:relative; height:calc((var(--vh, 1vh) * 100) - 75px) !important; overflow:hidden; }
.webchat_view .box_list{ float:left; position:relative; width:360px; height:100%; border-right:1px solid #ededed; background:#fff; overflow:hidden; }
.webchat_view .box_list .box_search { height:auto; padding:20px !important; border-bottom:1px solid #f8f8f8; overflow:hidden; }
.webchat_view .box_list .box_search .cm_txt { display:none; }
.webchat_view .box_list .box_search input { float:left; width:calc(100% - 50px); height:40px; padding:9px 15px 9px 50px !important; border:0; border-radius:25px; background:#f8f8f8 url('/Images/regular-search-nor.png') 15px center no-repeat !important; font-size:15px; line-height:22px; text-overflow:ellipsis; }
.webchat_view .box_list .box_search input::placeholder { font-family: NotoSansCJKKR; font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.47; letter-spacing: -0.25px; text-align: left; color: #999; } 
.webchat_view .box_list .box_search input:hover { border: solid 1px #ededed; }
.webchat_view .box_list .box_search input:focus { border: solid 1px #ff7500; background:#f8f8f8 url('/Images/regular-search-sel.png') 15px center no-repeat !important; }
.webchat_view .box_list .box_search .ic_filter { display:block; float:right; width:30px; height:30px; margin-top:5px; background:url('/Images/regular-sliders-nor.png') no-repeat !important; background-size:contain; cursor:pointer; }
.webchat_view .box_list .box_search .ic_filter:hover { background:url('/Images/regular-sliders-hvr.png') no-repeat !important; } 
.webchat_view .box_list .box_search .ic_filter.on { background:url('/Images/regular-sliders-sel.png') no-repeat !important; } 

.webchat_view .box_list .box_filter { display:none; z-index:2;}
.webchat_view .box_list .box_filter.on { display:block; position:absolute; top:65px !important; right:20px !important; width:100px; padding:16px 15px; border-radius:10px; background:#fff; text-align:center; box-shadow:3px 3px 9px 1px rgba(000,000,000,0.1); }
.webchat_view .box_list .box_filter.on li { margin-top:8px; color:#222 !important; font-size:15px; line-height:22px; cursor: pointer; }
.webchat_view .box_list .box_filter.on li:first-child { margin-top:0; }
.webchat_view .box_list .box_filter.on li.on { color:#ff7500 !important; font-weight:500 !important; }
.webchat_view .box_list .box_filter.on li:hover { color:#ff7500 !important; }

.webchat_view .box_list .list_wrap { height:calc(100% - 151px); overflow-y:auto; }
.webchat_view .box_list .list_wrap .list_cont { padding:20px !important; }

.webchat_view .box_list .box_bn { position:absolute; bottom:0; width:100%; height:80px; background:#fff; }
.webchat_view .box_list .box_bn a { display:block; width:100%; }
.webchat_view .box_list .box_bn a.bn-pc { display:block; }
.webchat_view .box_list .box_bn a.bn-mobile { display:none; }
.webchat_view .box_list .box_bn img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:100%; max-width:450px; max-height:100%; }
@media (max-width:768px){
  .webchat_view .box_list .box_bn a.bn-pc { display:none; }
  .webchat_view .box_list .box_bn a.bn-mobile { display:block; }
}

.webchat_view .box_cont{ display:block; float:right; position:relative; width:calc(100% - 360px); height:100%; background:#ebf1f7 !important; overflow:hidden;  }
.webchat_view .box_cont.on { display:block; }
.webchat_view .box_cont .img_intro { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:80%; max-width:650px; height:auto; }

.webchat_view .box_cont .chat_wrap { height:calc(100% - 100px) !important; padding:20px 40px 20px !important; box-sizing:border-box; overflow-y:auto; }
.webchat_view .box_cont.hide_input .chat_wrap { height:100% !important; }
.webchat_view .box_cont .chat_wrap .box_chat { position:relative; min-height:48px; padding-left:65px !important; overflow:hidden; }
.webchat_view .box_cont .chat_wrap .box_chat + .box_chat { margin-top:0 !important;}
.webchat_view .box_cont .chat_wrap .box_chat .cm_thumb_wrap { position:absolute; top:0 !important; left:0; width:45px !important; height:45px !important; border:solid 1px #ededed !important; border-radius:15px !important; background:#fff; color:#fff; font-size:15px; font-family:'BMJUA'; line-height:42px; text-align:center; box-sizing:border-box; }
/*
.webchat_view .box_cont .chat_wrap .box_chat .cm_thumb_wrap { position:absolute; top:4px; left:0; width:40px; height:40px; border:1px solid #ddd; border-radius:50%; background:#ddd; color:#fff; font-size:15px; font-family:'BMJUA'; line-height:42px; text-align:center; box-sizing:border-box; }
*/
.webchat_view .box_cont .chat_wrap .box_chat .cm_thumb_wrap img { display:block; width:100%; }
.webchat_view .box_cont .chat_wrap .box_chat .box_name { display:block; font-size:15px; font-weight:700; line-height:22px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment { margin-top:12px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li { position:relative; margin-top:5px; overflow:hidden;}
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li.message { position:relative; overflow:hidden; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li p { display:inline-block; max-width:calc(100% - 65px) !important; padding:8px 20px; border-radius:15px; background:#fff url(/Images/bg_mark_gray.png) repeat !important; font-size:13px !important; line-height:20px; }
/* Legacy class compatibility: React components render txt_comment as p/a/span */
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li .txt_comment { display:inline-block; max-width:calc(100% - 65px) !important; padding:8px 20px; border-radius:15px; background:#fff url(/Images/bg_mark_gray.png) repeat !important; font-size:13px !important; line-height:20px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li .txt_comment img { display:block; max-width:100%; height:auto; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li .time { display:inline-block; margin-left:10px; color:#777777 !important; font-size:12px !important; line-height:16px; vertical-align:bottom; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li:first-child { margin-top:0; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li:first-child p { border-radius:0 15px 15px 15px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment > li:first-child .txt_comment { border-radius:0 15px 15px 15px; }

.webchat_view .box_cont .chat_wrap .box_chat.mentor .box_comment > li p { background:#fff; }
.webchat_view .box_cont .chat_wrap .box_chat.mentor .box_comment > li .txt_comment { background:#fff; }

.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img { max-width:230px !important; width:calc(100% - 70px); height:auto; padding:15px; border-radius:0 15px 15px 15px; background:#fff; overflow:hidden; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li { float:left; width:64px; height:60px; margin-top:4px; margin-left:4px; border:1px solid #ededed; border-radius:5px; background:#fff; overflow:hidden; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li:nth-child(1) { margin-top:0px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li:nth-child(2) { margin-top:0px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li:nth-child(3) { margin-top:0px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li:nth-child(3n-2) { margin-left:0px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li a { display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li a img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%,-50%); max-width:100%; max-height:100%; }

.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_2 li { width:98px; margin-top:4px; margin-left:4px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_2 li:nth-child(1) { margin-top:0px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_2 li:nth-child(2) { margin-top:0px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_2 li:nth-child(2n-1) { margin-left:0px; }

.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_1 li:nth-last-child(1) { width:98px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_1 li:nth-last-child(2) { width:98px; }

.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(1) { width:98px; margin-left:4px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(2) { width:98px; margin-left:0; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(3) { width:98px; margin-left:4px; }
.webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(4) { width:98px; margin-left:0; }

.webchat_view .box_cont .chat_wrap .box_division { position:relative; height:16px; color:#bbb; font-size:11px; line-height:16px; }
.webchat_view .box_cont .chat_wrap .box_division:before { display:block; content:''; position:absolute; top:8px; left:0; width:100%; height:1px; background:#ddd; }
.webchat_view .box_cont .chat_wrap .box_division span { position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); padding:0 15px; background:#ebf1f7; }

.webchat_view .box_cont .chat_wrap .box_date { position:relative; height:24px; color:#fff; font-size:13px; line-height:1.54; }
.webchat_view .box_cont .chat_wrap .box_date span { position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); height: 24px; padding: 2px 10px; border-radius: 12px; background-color: rgba(34, 34, 34, 0.3); }

.webchat_view .box_cont .input_wrap { width:100%; height:100px; padding:20px 40px 20px 40px; overflow:hidden; }
.webchat_view .box_cont .input_wrap .box_input { display:block; float:left; width:calc(100% - 70px); height:50px; padding:15px 20px 15px 60px; border:0; border-radius:25px; background:#fff url('/Images/ic_file.png') 15px center no-repeat; font-size:15px; line-height:20px;  text-overflow:ellipsis; }
.webchat_view .box_cont .input_wrap .box_input.no_attach_hint { padding-left:20px; background:#fff !important; }
.webchat_view .box_cont .input_wrap .box_input.no_send_btn { width:100% !important; }
.webchat_view .box_cont .input_wrap .box_btn { float:left; width:50px; height:50px; margin-left:20px; border-radius:50%; background:#ff7500; background-image:-webkit-linear-gradient(left right, #e8373d 0%, #ff7500 100%); background-image:-webkit-gradient(linear, left, right, from(#e8373d), to(#ff7500)); background-image:linear-gradient( to right,#e8373d,#ff7500); }
.webchat_view .box_cont .input_wrap .box_btn i { display:block; width:100%; height:100%; background:url('/Images/ic_send.png') no-repeat center center; cursor:default; }
.webchat_view .box_cont .input_wrap.file_enabled { position:relative; overflow:visible; }
.webchat_view .box_cont .input_wrap.file_enabled .file_toggle_btn { border:0; cursor:pointer; }
.webchat_view .box_cont .input_wrap.file_enabled .file_toggle_btn:disabled { opacity:0.45; cursor:not-allowed; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel { position:absolute; left:40px; right:40px; bottom:74px; max-height:260px; padding:15px 20px; border:1px solid #ddd; border-radius:12px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.08); z-index:5; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_head { display:flex; justify-content:space-between; align-items:center; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_head strong { color:#222; font-size:14px; font-weight:700; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_head .btn_refresh { min-width:82px; height:30px; margin-left:12px; font-size:12px; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list { margin-top:12px; max-height:188px; overflow-y:auto; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list > li { display:flex; align-items:center; gap:12px; min-height:34px; margin-top:6px; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list > li:first-child { margin-top:0; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list > li.empty { display:block; margin-top:0; color:#666; font-size:13px; line-height:20px; text-align:center; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list .file_name { flex:1; color:#222; font-size:13px; line-height:20px; text-align:left; text-decoration:underline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list .btn_download { min-width:92px; height:30px; font-size:12px; line-height:28px; }

@media all and (max-width:1023px ) {
    .webchat_view .box_list { width:35%; }
    .webchat_view .box_cont { width:65%; }

    .webchat_view .box_cont .chat_wrap .box_info .box_txt { padding-right:60px; }
    .webchat_view .box_cont .chat_wrap .box_info .box_align { top:auto; bottom:-60px; right:0; z-index:2; border:0; box-shadow:0px 5px 18px 2px rgba(0, 0, 0, 0.05); }
    .webchat_view .box_cont .chat_wrap .box_info .box_align.on { top:auto; bottom:-90px; }

    .webchat_view .box_cont .chat_wrap .box_chat .box_comment img { max-width:calc(100% - 65px) !important; }
}


@media all and (max-width:767px ) {
    .webchat_view { height:calc((var(--vh, 1vh) * 100) - 75px) !important; }
    .webchat_view.chat-selected { height:calc((var(--vh, 1vh) * 100) - 41px) !important; }
    .webchat_view .box_list .box_search { height:auto; padding:10px 20px !important; border-top:0 !important; }
    .webchat_view .box_list .box_search .cm_txt { display:block; float:left; width:calc(100% - 75px); line-height:30px; font-weight:700; }
    .webchat_view .box_list .box_search .cm_txt small { font-size:11px; font-weight:500; line-height:30px; vertical-align:bottom; }
    .webchat_view .box_list .box_search input { display:none; }
    .webchat_view .box_list .box_search .ic_filter { width:30px; height:30px; margin-top:0px; background-size:100%; }

    .webchat_view .box_list .box_filter.on { top:61px; right:20px; }

    .webchat_view .box_list { float:none; width:100%; border-right:0; z-index:1; }
    
    .webchat_view .box_list .list_wrap { height:calc(100% - 143px) !important; overflow-y:auto; }
    .webchat_view .box_list .list_wrap .list_cont { padding:10px 20px !important; }
    .webchat_view .box_list .list_wrap .list_cont.on { padding-left:15px !important; }
    .webchat_view .box_list .list_wrap .list_cont .cm_thumb_wrap { margin-right:20px; }
    .webchat_view .box_list .list_wrap .list_cont box_txt { width:calc(100% - 65px) }

    .webchat_view .box_list .box_bn { height:64px; }
    .webchat_view .box_list .box_bn img { max-width:auto; max-height:100%; }

    .webchat_view .box_cont { display:none; float:none; position:absolute; top:0; left:0; width:100%; z-index:2; }
    .webchat_view .box_cont .chat_wrap { height:calc(100% - 55px); padding:20px 20px 20px 20px !important; box-sizing:border-box; overflow-y:auto; }
    .webchat_view .box_cont.hide_input .chat_wrap { height:100% !important; }
    .webchat_view .box_cont .chat_wrap .box_chat { padding-left:60px !important; padding-right:0px !important; box-sizing:border-box; }
    .webchat_view .box_cont .chat_wrap .box_chat .cm_thumb_wrap { left:0; }
    .webchat_view .box_cont .chat_wrap .box_chat .box_comment > li p { max-width:calc(100% - 65px); padding: 8px 15px !important;}

    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img { max-height:100%; }

    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img li { width:calc(33% - 2.6px); }
 
    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_2 li { width:calc(50% - 2px); }

    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_1 li:nth-last-child(1) { width:calc(50% - 2px); }
    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width3n_1 li:nth-last-child(2) { width:calc(50% - 2px); }

    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(1) { width:calc(50% - 2px); }
    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(2) { width:calc(50% - 2px); }
    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(3) { width:calc(50% - 2px); }
    .webchat_view .box_cont .chat_wrap .box_chat .box_comment.box_img.width7 li:nth-last-child(4) { width:calc(50% - 2px); }

    .webchat_view .box_cont .input_wrap { height:55px; padding:10px 20px; }
    .webchat_view .box_cont .input_wrap .box_input { width:calc(100% - 55px); height:35px; padding:0 15px 0 52px; line-height:35px; background-size:22px; }
    .webchat_view .box_cont .input_wrap .box_input.no_attach_hint { padding-left:15px; background:#fff !important; }
    .webchat_view .box_cont .input_wrap .box_input.no_send_btn { width:100% !important; }
    .webchat_view .box_cont .input_wrap .box_btn { width:35px; height:35px; }
    .webchat_view .box_cont .input_wrap .box_btn i { display:block; width:19px; height:19px; margin:8px auto; background-size:100%; }
    .webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel { left:20px; right:20px; bottom:46px; max-height:230px; padding:12px 15px; }
    .webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list { max-height:150px; }
    .webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list > li { gap:8px; }
    .webchat_view .box_cont .input_wrap.file_enabled .chat_file_panel .chat_file_panel_list .btn_download { min-width:78px; font-size:11px; }
}