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

/*리스트 레이아웃 스타일*/
.list_wrap { width:100%; height:auto; overflow:hidden; }
.list_cont { background:#fff; box-sizing:border-box; overflow:hidden; } 
.list_cont.non_list { width:100%; height:200px !important; padding:0 !important; border:1px solid #ddd; background:transparent !important; color:#777; font-size:14px !important; text-align:center; line-height:200px; } 
.list_cont.list_hidden { display:none !important; } 
.list_cont .cm_badge_wrap { display:block; float:left; }
.list_cont .cm_satisfaction { display:block; float:right; height:25px; line-height:25px; }
.list_cont .cm_mentor_name { font-size:20px; }
.list_cont .cm_mentor_name image { margin-top:-6px; font-size:80%; }
.list_cont .cm_txt{ display:block; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden; }
.list_cont .list_info { float:left; width:100%; height:75px; margin-top:10px; border:1px solid #ddd; border-top:2px solid #222; overflow:hidden; }
.list_cont .list_info .cm_btn_intro { float:right; }
.list_cont .list_info .list_info_tit { float:left; width:calc(100% - 83px); height:100%; padding:13px; border-right:1px solid #ddd; box-sizing:border-box;}

/*웹채팅 리스트*/
.list_cont.horizon01 { position:relative; padding:19px 30px 18px 35px; border-bottom:1px solid #f8f8f8; overflow:hidden; cursor:pointer; }
.list_cont.horizon01:hover { background:#f8f8f8; }
.list_cont.horizon01.on { padding-left:15px !important; border-left:5px solid #ff7500; background:#ebf1f7; box-sizing:border-box; }
.list_cont.horizon01 .cm_thumb_wrap { float:left; width:45px; height:45px; margin-right:20px; border:1px solid #ededed; border-radius:15px; background:#ededed; box-sizing:border-box; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); }
.list_cont.horizon01 .cm_thumb_wrap img { display:block; width:100%; height:auto; }
/*
.list_cont.horizon01 .box_txt { float:left; width:calc(100% - 75px); white-space:nowrap; }
.list_cont.horizon01 .box_txt .cm_mentor_name { height:22px; font-size:15px; line-height:22px; text-overflow:ellipsis; overflow:hidden; }
.list_cont.horizon01 .box_txt .cm_smtxt { height:20px; text-overflow:ellipsis; overflow:hidden; }
*/
.list_cont.horizon01 .box_txt { float:left; height: 40px; width:calc(100% - 65px); white-space:nowrap; display: flex; align-items: center; }
.list_cont.horizon01 .box_txt .cm_mentor_name { height:22px; font-size:15px; line-height:22px; }
.list_cont.horizon01 .box_txt .cm_mentor_name::after { content:''; display: inline-block; width:2px; height:2px; border-radius:50%; margin: 5px; background:#ccc; }
.list_cont.horizon01 .box_txt .cm_txt { height:22px; text-overflow:ellipsis; word-wrap: break-word; overflow:hidden; }