.msg_wrap { 
 padding-bottom: unset !important; 

 } 

 @media screen and (max-width: 500px) {
    #wrap {
        width: 100%;
        max-width: 500px;
        min-width: 340px;
    }
}
.msg_container { 
 margin-top: unset !important; 
 } 
.msg_container #content { 
 height: 100%; 
 } 
.msg-list-wrap { 
 height: 100%; 
 } 
.msg_container .msg-list-wrap { 
 width: 100%; 
 height: 100%; 

 padding:15px; 
 padding-top:70px;
 } 
.msg-list-wrap .tot-cnt-wrap { 
 font-size: 15px; 
 font-weight: 400; 
 padding: 15px 0; 
 position: fixed; 
 text-align: center; 
 background: #fff; 
 top: 85px; 
 width: 500px; 
 z-index: 1; 
 } 
.msg-list-wrap .sixmsg_list_area { 
 padding-bottom: 52px; 
 } 
.msg-list-wrap .item-list:hover { 
 background: #dddddd40; 
 } 
.msg-list-wrap .item-list { 
 position: relative; 
 padding-top: 15px; 
 padding-bottom: 15px; 
 border-bottom: 1px solid #e6e6e6; 
 display: flex; 
 width: 100%; 
 justify-content: space-between; 
 } 
.msg-list-wrap .item-list a { 
 width: 93%; 
 display: flex; 
 align-items: center; 
 } 
.msg-list-wrap .item-list .profile-wrap { 
 vertical-align: top; 
 padding-left: 10px; 
 } 
.msg-list-wrap .item-list .profile-wrap img { 
 width: 50px; 
 height: 50px; 
 border-radius: 50%; 
 } 
.msg-list-wrap .item-list .msg-wrap { 
 display: inline-block; 
 width: 100%; 
 padding-left: 10px; 
 height: 58px; 
 max-height: 58px; 
 padding-top: 1px; 
 } 
.msg-list-wrap .item-list .msg-wrap2 { 
 display: inline-block; 
 width: 80%; 
 padding-left: 10px; 
 } 
.msg-list-wrap .item-list .msg-wrap .msg_nick_top { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 } 
.msg-list-wrap .item-list .msg-wrap .msg-nick { 
 font-weight: 700; 
 text-overflow: ellipsis; 
 overflow: hidden; 
 -webkit-line-clamp: 1; 
 -webkit-box-orient: vertical; 
 display: -webkit-box; 
 max-width: 76%; 
 font-size: 14px; 
 } 
.msg-list-wrap .item-list .msg-wrap .msg { 
 padding-top: 3px; 
 text-overflow: ellipsis; 
 overflow: hidden; 
 -webkit-line-clamp: 2; 
 -webkit-box-orient: vertical; 
 display: -webkit-box; 
 color: #303038; 
 max-width: 100%; 
 } 
.msg-list-wrap .item-list .msg_nick_top .date { 
 font-size: 12px; 
 color: #a0a0a0; 
 white-space: nowrap; 
 position: unset !important; 
 } 
.msg-list-wrap .item-list .msg-wrap .date { 
 font-size: 12px; 
 color: #a0a0a0; 
 float: right; 
 right: 20px; 
 position: absolute; 
 top: 16px; 
 } 
.msg-list-wrap .item-list .forward-arr { 
 width: 25px; 
 height: 25px; 
 position: absolute; 
 top: calc(50% - 12px); 
 right: 15px; 
 } 
.msg-list-wrap .btn-del { 
 position: absolute; 
 right: 5px; 
 top: 10px; 
 border-radius: 3px; 
 } 

.msg-input-wrap input[type="text"] { 
 border: 1px solid #dadada; 
 height: 40px; 
 line-height: 40px; 
 padding-left: 10px; 
 width: 100%; 
 } 
.msg-input-wrap .btn-send { 
 background-color: #0fc661; 
 color: #fff; 
 border-radius: 4px; 
 font-size: 11px; 
 height: 38px; 
 line-height: 38px; 
 width: 70px; 
 bottom: 10px; 
 position: fixed; 
 } 
.msg-input-wrap .left-wrap { 
 display: inline-block; 
 width: 85%; 
 } 
.msg-input-wrap .right-wrap { 
 display: inline-block; 
 width: 15%; 
 position: absolute; 
 right: 13px; 
 bottom: 10px; 
 float: right; 
 } 

 .othermsg .msg-wrap2 {position: relative;}

.msg-wrap2 .msg { margin-top: 30px; display: flex; flex-direction: column; } 
.msg-wrap2 .msg { border-radius: 20px; padding: 8px 15px; margin-top: 5px; margin-bottom: 5px; display: inline-block; } 
.othermsg .msg-wrap2 .msg { align-items: flex-start; } 
.othermsg .msg-wrap2 .msg { margin-right: 25%; background-color: #eee; position: relative; } 
.othermsg .msg-wrap2 .msg:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: -7px; height: 20px; width: 20px; background: #eee; border-bottom-right-radius: 15px; } 
.othermsg .msg-wrap2 .msg:after { content: ""; position: absolute; z-index: 1; bottom: 0; left: -10px; width: 10px; height: 20px; background: #879da1; border-bottom-right-radius: 10px; } 
.mymsg .msg-wrap2 .msg { align-items: flex-end; } 
.mymsg .msg-wrap2 .msg { color: white; margin-left: 25%; background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%); background-attachment: fixed; position: relative; } 
.mymsg .msg-wrap2 .msg:before { content: ""; position: absolute; z-index: 0; bottom: 0; right: -8px; height: 20px; width: 20px; background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%); background-attachment: fixed; border-bottom-left-radius: 15px; } 
.mymsg .msg-wrap2 .msg:after { content: ""; position: absolute; z-index: 1; bottom: 0; right: -10px; width: 10px; height: 20px; background:var(--main-bg-color); border-bottom-left-radius: 10px; } 
.profile-wrap img { width:30px; height:30px; border-radius: 50%; } 
.msg-wrap2 .date {color: rgba(87,112,114,1);}
 
/* .msg-list-wrap .item-list-new { 
 position: relative; 
 padding-top: 15px; 
 padding-bottom: 0; 
 } 
.msg-list-wrap .item-list-new .profile-wrap { 
 display: inline-block; 
 vertical-align: top; 
 margin-top: 5px; 
 } 
.msg-list-wrap .item-list-new .profile-wrap img { 
 width: 40px; 
 height: 40px; 
 border-radius: 50%; 
 } 

.mymsg .msg:after { 
 border-top: 10px solid #ff9f43; 
 border-left: 0px solid transparent; 
 border-right: 10px solid transparent; 
 border-bottom: 0px solid transparent; 
 content: ""; 
 position: absolute; 
 top: 23px; 
 right: 5px; 
 } 
.mymsg .msg { 
 border-radius: 4px; 
 padding: 5px 8px 8px 8px; 
 display: inline-block; 
 text-align: left; 
 background: #ff9f43; 
 color: #fff; 
 box-shadow: 0px 1px 3px 0px #acacac; 
 font-size: 14px; 
 word-break: break-all; 
 } 
.othermsg .msg { 
 border-radius: 4px; 
 padding: 5px 8px 8px 8px; 
 display: inline-block; 
 text-align: left; 
 background: #fff; 
 box-shadow: 0px 2px 3px 0px #e7e7e7; 
 font-size: 14px; 
 word-break: break-all; 
 } */
/* 말풍선 삼각형 */
/* .othermsg .msg:after { 
 border-top: 10px solid #fff; 
 border-left: 10px solid transparent; 
 border-right: 0px solid transparent; 
 border-bottom: 0px solid transparent; 
 content: ""; 
 position: absolute; 
 top: 40px; 
 left: 45px; 
 } 
.msg-list-wrap .item-list-new .date { 
 padding-top: 5px; 
 color: #a0a0a0; 
 font-size: 11px; 
 padding-left: 2px; 
 } 
.msg-list-wrap .item-list-new .msg-nick { 
 font-size: 13px; 
 padding-bottom: 3px; 
 } 
.msg-list-wrap .item-list-new .msg-wrap2 { 
 display: inline-block; 
 text-align: right; 
 max-width: 85%; 
 margin-top: 5px; 
 margin-left: 11px; 
 margin-right: 12px; 
 } 
.msg-list-wrap .item-list-new .forward-arr { 
 width: 25px; 
 height: 25px; 
 position: absolute; 
 top: calc(50% - 12px); 
 right: 5px; 
 } */

.msg-list-wrap .nav { 
 padding: 10px 0 5px 15px !important; 
 } 

.msg-list-wrap #msg-item-wrap { 
 padding: 0px 6px 80px 6px; 
 overflow-x: hidden !important; 
 overflow-y: auto !important; 
 height: 100%; 
 } 
.msg-list-wrap #msg-item-wrap .no_result { 
 text-align: center; 
 padding: 50px 0; 
 } 
#msg-item-wrap::-webkit-scrollbar { 
 width: 10px; /* 스크롤바의 너비 */
 } 

#msg-item-wrap::-webkit-scrollbar-thumb { 
 height: 30%; /* 스크롤바의 길이 */
 background: #d4d4d4; /* 스크롤바의 색상 */
 border-radius: 10px; 
 } 

#msg-item-wrap::-webkit-scrollbar-track { 
 background: #c5c5c55b; /*스크롤바 뒷 배경 색상*/
 } 

#btn-send-msg::-webkit-scrollbar { 
 width: 6px; /* 스크롤바의 너비 */
 } 

#btn-send-msg::-webkit-scrollbar-thumb { 
 height: 30%; /* 스크롤바의 길이 */
 background: #d4d4d4; /* 스크롤바의 색상 */
 border-radius: 10px; 
 } 

textarea::placeholder { 
 /*placeholder css */
 padding: 10px 0 0 0; 
 } 

.left-wrap textarea { 
 height: 38px; 
 width: 100%; 
 border: 1px solid #dadada; 
 line-height: inherit; 
 padding: 3px 0 0 5px; 
 overflow: hidden; 
 border-radius: 4px; 
 resize: none; /* textarea 우측 하단 세로줄 제거 */
 max-height: 50px; 
 overflow-y: auto; 
 outline: none; 
 } 
.msg_container .nav { 
 position: fixed; 
 width: 500px; 
 background: #fff; 
 z-index: 2; 
 top: 50px; 
 } 
/*메세지 리뉴얼 (리스트 삭제버튼 추가) 시작*/

.msg-list-wrap .item-list .more_btn { 
 width: 7%; 
 background: none; 
 position: relative; 
 height: 30px; 
 } 
.msg-list-wrap .item-list .more_btn img { 
 width: 22px; 
 position: absolute; 
 top: 0; 
 left: 50%; 
 transform: translate(-50%, 0); 
 } 

.msg-list-wrap .item-list .more_del_btn { 
 position: absolute; 
 right: 17px; 
 top: 37px; 
 } 
.msg-list-wrap .item-list .more_del_btn button { 
 padding: 5px 19px; 
 border: 1px solid #a0a0a0; 
 background: #ffffff; 
 } 

/*메세지 리뉴얼 (리스트 삭제버튼 추가) 끝*/

/*메세지 사진 전송 버튼 추가 시작*/
.msg-input-wrap { 
 display: flex; 
 padding: 7px 0; 
 flex-direction: column; 
 position: fixed !important; 
 bottom: 0px !important; 
 width: 500px; /*js로 사이즈 조절이 들어가더라도 기본 사이즈 값은 설정 되어야 함*/
 background: #fff; 
 } 
.msg-input-wrap .msg_input_area { 
 display: flex; 
 } 
.msg-input-wrap .img_btn { 
 width: 8%; 
 position: relative; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 } 
.msg-input-wrap .img_btn label { 
 width: 30px; 
 height: 30px; 
 border-radius: 50px; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 position: absolute; 
 bottom: 8px; 
 cursor: pointer; 
 } 
.msg-input-wrap .img_btn label img { 
 padding: 2px; 
 width: 100%; 
 } 
.msg-input-wrap input[type="file"] { 
 display: none; 
 } 
.msg-input-wrap .left-wrap { 
 width: 92%; 
 display: inline-block; 
 border: 1px solid #dadada; 
 position: relative; 
 border-radius: 10px; 
 margin-right: 5px; 
 min-height: 47px; 
 } 
.left-wrap textarea { 
 width: 90%; 
 padding: 3px 7px 0 5px; 
 border: none; 
 } 
.msg-input-wrap .btn-send { 
background:rgba(65,217,200,1);
box-shadow: 0 3px 0 rgba(56,191,176,1);
 color: #fff; 
 height: 30px; 
 line-height: 30px; 
 width: 30px; 
 border: none; 
 border-radius: 7px; 
 position: absolute; 
 bottom: 6px; 
 right: -3px; 
 } 
.msg-input-wrap .btn-send img { 
 padding: 5px; 
 height: 100%; 
 } 
.left-wrap textarea { 
 border-radius: 20px 0 0 20px; 
 } 
.msg-list-wrap .mymsg_img .msg_img,
.msg-list-wrap .othermsg_img .msg_img { 
 width: 100%; 
 display: flex; 
 padding-bottom: 5px; 
 cursor: pointer; 
 } 
.msg-list-wrap .mymsg_img .msg_img img,
.msg-list-wrap .othermsg_img .msg_img img { 
 width: 120px; 
 height: 120px; 
 object-fit: cover; 
 border-radius: 4px; 
 background: #fff; 
 box-shadow: 0px 1px 3px 0px #acacac; 
 } 
.msg-list-wrap .mymsg_img .msg_img img:not(:first-child),
.msg-list-wrap .othermsg_img .msg_img img:not(:first-child) { 
 margin-left: 3px; 
 } 
.msg-list-wrap .mymsg_img .msg-wrap2,
.msg-list-wrap .othermsg_img .msg-wrap2 { 
 margin-left: unset; 
 max-width: 260px; 
 } 
.msg-list-wrap .mymsg_img .img_more { 
 justify-content: start; 
 display: flex; 
 align-items: center; 
 } 
.msg-list-wrap .othermsg_img .img_more { 
 justify-content: end; 
 display: flex; 
 align-items: center; 
 } 
.msg-list-wrap .mymsg_img .img_more span,
.msg-list-wrap .othermsg_img .img_more span { 
 letter-spacing: 1px; 
 font-size: 13px; 
 } 
.msg-list-wrap .mymsg_img .img_more button,
.msg-list-wrap .othermsg_img .img_more button { 
 background: none; 
 margin-left: 2px; 
 border-bottom: 1px solid; 
 font-size: 13px; 
 } 
.msg-list-wrap .mymsg_img .date,
.msg-list-wrap .othermsg_img .date { 
 padding-top: unset; 
 } 

/*메세지 사진 전송 버튼 추가 끝*/

/*이미지 개별 팝업 시작*/
.msgimg_pop_wrap { 
 position: absolute; 
 top: 0; 
 z-index: 555; 
 width: 500px; 
 height: 100%; 
 } 
.msgimg_pop_wrap .pop_bg { 
 background: black; 
 position: fixed; 
 top: 0; 
 width: 500px; 
 height: 100%; 
 opacity: 1; 
 } 
.msgimg_pop_wrap .msgimg_area { 
 position: fixed; 
 width: 500px; 
 height: 100%; 
 } 
.msgimg_pop_wrap .msgimg_area .msg_img { 
 position: relative; 
 width: 500px; 
 height: calc(100% - 0px); 
 padding-top: 30px; 
 top: 50%; 
 transform: translate(-50%, -50%); 
 left: 50%; 
 overflow-y: auto; 
 overflow-x: hidden; 
 overscroll-behavior: contain; 
 } 
.msgimg_pop_wrap .msgimg_area .msg_img img { 
 width: 500px; 
 top: 0; 
 position: absolute; 
 height: 100%; 
 object-fit: contain; 
 overflow-y: auto; 
 overflow-x: hidden; 
 } 

.msgimg_pop_wrap .pop_close { 
 width: 30px; 
 height: 30px; 
 position: absolute; 
 right: 5px; 
 top: 5px; 
 z-index: 5; 
 background: #00000069; 
 border-radius: 50%; 
 cursor: pointer; 
 } 
.msgimg_pop_wrap .pop_close:before { 
 transform: rotate(45deg); 
 } 
.msgimg_pop_wrap .pop_close:after { 
 transform: rotate(-45deg); 
 } 
.msgimg_pop_wrap .pop_close:before,
.msgimg_pop_wrap .pop_close:after { 
 position: absolute; 
 right: 13px; 
 top: 5px; 
 content: ""; 
 height: 22px; 
 width: 3px; 
 background-color: #fff; 
 border-radius: 5px; 
 } 
.msgimg_pop_wrap .pop_close button { 
 width: 30px; 
 height: 30px; 
 background: none; 
 } 

/*이미지 개별 팝업 끝*/

/*이미지 뷰어 시작*/
.msgimg_slide_wrap { 
 position: fixed; 
 top: 0; 
 z-index: 555; 
 width: 100%; 
 height: 100%; 
 } 
.msgimg_slide_wrap .slide_bg { 
 width: 100%; 
 height: 100%; 
 position: absolute; 
 top: 0; 
 background: black; 
 } 

.msgimg_slide_wrap .slide_area { 
 width: 100%; 
 height: 100%; 
 margin: 0 auto; 
 } 
.msgimg_slide_wrap .slide_list { 
 white-space: nowrap; 
 font-size: 0; 
 overflow: hidden; 
 position: relative; 
 width: 100%; 
 height: 100%; 
 top: 50%; 
 transform: translate(0, -50%); 
 } 
.msgimg_slide_wrap .slide_area .pop_close { 
 width: 40px; 
 height: 40px; 
 position: absolute; 
 right: 7px; 
 top: 20px; 
 z-index: 556; 
 } 
.msgimg_slide_wrap .slide_area .pop_close:before { 
 transform: rotate(45deg); 
 } 
.msgimg_slide_wrap .slide_area .pop_close:after { 
 transform: rotate(-45deg); 
 } 
.msgimg_slide_wrap .slide_area .pop_close:before,
.msgimg_slide_wrap .slide_area .pop_close:after { 
 position: absolute; 
 right: 17px; 
 top: 9px; 
 content: ""; 
 height: 24px; 
 width: 3px; 
 background-color: #fff; 
 border-radius: 5px; 
 } 
.msgimg_slide_wrap .slide_area .pop_close button { 
 width: 40px; 
 height: 40px; 
 background: none; 
 } 

.msgimg_slide_wrap .slide_list .slide_item { 
 display: inline-block; 
 vertical-align: middle; 
 width: 100%; 
 height: 100%; 
 } 
.msgimg_slide_wrap .slide_list .slide_item .item_msgimg { 
 width: 100%; 
 height: 100%; 
 } 
.msgimg_slide_wrap .slide_list .slide_item .item_msgimg img { 
 width: 100%; 
 position: relative; 
 top: 50%; 
 transform: translate(0, -50%); 
 } 

.slide_page { 
 text-align: center; 
 padding: 20px; 
 } 
.slide_page > li { 
 display: inline-block; 
 vertical-align: middle; 
 } 

.msgimg_slide_wrap .slide_control { 
 position: absolute; 
 top: 50%; 
 transform: translate(0, -50%); 
 display: flex; 
 justify-content: space-between; 
 width: 100%; 
 opacity: 0.8; 
 } 

.msgimg_slide_wrap .slide_control .left_btn { 
 background: #fff; 
 width: 35px; 
 height: 35px; 
 border-radius: 50%; 
 box-shadow: 1px 2px 4px #8f8f8f; 
 position: relative; 
 left: 10px; 
 } 
.msgimg_slide_wrap .slide_control .left_btn img { 
 position: relative; 
 right: 1px; 
 } 
.msgimg_slide_wrap .slide_control button img { 
 height: 100%; 
 padding: 10px; 
 } 
.msgimg_slide_wrap .slide_control .right_btn { 
 background: #fff; 
 width: 35px; 
 height: 35px; 
 border-radius: 50%; 
 box-shadow: 1px 2px 4px #8f8f8f; 
 position: relative; 
 right: 10px; 
 } 
.msgimg_slide_wrap .slide_control .right_btn img { 
 position: relative; 
 left: 2px; 
 } 
/*이미지 뷰어 끝*/
/*이미지 미리보기 영역*/
.msg-input-wrap .msg_img_wrap { 
 padding: 0 7px; 
 } 
.msg-input-wrap .msg_img_wrap .msg_img_list { 
 width: 100%; 
 white-space: nowrap; 
 overflow-y: hidden; 
 display: flex; 
 margin-bottom: 10px; 
 border-bottom: 1px solid #eaeaea; 
 padding-bottom: 10px; 
 } 
.msg-input-wrap .msg_img_wrap .msg_img_list .img_list_area { 
 position: relative; 
 display: flex; 
 flex-direction: row; 
 width: inherit; 
 margin-right: 5px; 
 overflow-x: auto; 
 overflow-y: hidden; 
 } 
.msg-input-wrap .msg_img_wrap .msg_img_list .img_list_area::-webkit-scrollbar { 
 height: 10px; /*스크롤바 높이*/
 } 

.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area::-webkit-scrollbar-thumb { 
 height: 10%; /* 스크롤바의 길이 */
 background: #c7c7c7; /* 스크롤바의 색상 */
 border-radius: 10px; 
 } 

.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area::-webkit-scrollbar-track { 
 background: #e4e4e4; /*스크롤바 뒷 배경 색상*/
 } 
.msg-input-wrap .msg_img_wrap .msg_img_list .img_list_area .img_item { 
 width: 70px; 
 min-width: 70px; 
 height: 70px; 
 border: 1px solid #eaeaea; 
 position: relative; 
 border-radius: 5px; 
 margin: 5px 12px 0 0; 
 } 
.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area
 .img_item
 .img_del_btn { 
 width: 21px; 
 height: 21px; 
 position: absolute; 
 right: -8px; 
 top: -6px; 
 z-index: 5; 
 background: #8f8f8fa8; 
 border-radius: 50%; 
 cursor: pointer; 
 } 

.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area
 .img_item
 .img_del_btn:before { 
 transform: rotate(45deg); 
 } 
.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area
 .img_item
 .img_del_btn:after { 
 transform: rotate(-45deg); 
 } 
.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area
 .img_item
 .img_del_btn:before,
.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area
 .img_item
 .img_del_btn:after { 
 position: absolute; 
 right: 9px; 
 top: 3px; 
 content: ""; 
 height: 15px; 
 width: 3px; 
 background-color: #fff; 
 border-radius: 5px; 
 } 
.msg-input-wrap
 .msg_img_wrap
 .msg_img_list
 .img_list_area
 .img_item
 .img_del_btn
 button { 
 width: 25px; 
 height: 25px; 
 background: none; 
 position: relative; 
 right: 2px; 
 top: -2px; 
 } 

.msg-input-wrap .msg_img_wrap .msg_img_list .img_list_area .img_item img { 
 width: 100%; 
 height: 100%; 
 object-fit: contain; 
 } 
/*이미지 미리보기 영역*/
#progress-overlay { 
 display: none; 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background-color: rgba(0, 0, 0, 0.5); 
 z-index: 9999; 
 justify-content: center; 
 align-items: center; 
 flex-direction: column; 
 } 

#progress-text { 
 font-size: 18px; 
 color: white; 
 font-weight: 700; 
 margin-top: 10px; 
 } 

#progress-spinner { 
 width: 40px; 
 height: 40px; 
 border-radius: 50%; 
 border: 3px solid #fff; 
 border-top-color: #3498db; 
 animation: spin 1s infinite ease-in-out; 
 } 

@keyframes spin { 
 0% { 
 transform: rotate(0deg); 
 } 

 100% { 
 transform: rotate(360deg); 
 } 
 } 

.msg-input-wrap .bean_send_btn { 
 width: 8%; 
 position: relative; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 } 
.msg-input-wrap .bean_send_btn label { 
 width: 30px; 
 height: 30px; 
 border-radius: 50px; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 position: absolute; 
 bottom: 8px; 
 cursor: pointer; 
 } 
.msg-input-wrap .bean_send_btn label img { 
 padding: 2px; 
 width: 100%; 
 } 
.msg-list-wrap .golden_bell_set { 
 position: fixed; 
 width: 100%; 
 top: 0; 
 left: 0; 
 z-index: 557; 
 height: 100%; 
 } 
.msg-list-wrap .golden_bell_set .set_bg { 
 background: black; 
 position: absolute; 
 width: 100%; 
 height: 100%; 
 opacity: 0.7; 
 } 

.msg-list-wrap .golden_bell_set .set_wrap { 
 position: relative; 
 width: 100%; 
 height: 100%; 
 } 
.msg-list-wrap .golden_bell_set .set_wrap .set_area { 
 background: #fff; 
 width: 90%; 
 max-width: 400px; 
 left: 50%; 
 position: absolute; 
 transform: translate(-50%, 200px); 
 border-radius: 5px; 
 padding: 30px 15px 20px 15px; 
 } 
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .set_info { 
 text-align: center; 
 font-size: 18px; 
 font-family: "NanumSquareNeo-Variable"; 
 margin-bottom: 20px; 
 line-height: 20px; 
 } 
/* 닫기버튼 */
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_set_clo { 
 width: 30px; 
 height: 30px; 
 right: 2px; 
 position: absolute; 
 border-radius: 50px; 
 top: 1px; 
 } 
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_set_clo
 button { 
 width: 30px !important; 
 height: 30px; 
 position: absolute; 
 top: 0; 
 right: 0; 
 background: none; 
 } 
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_set_clo:before { 
 transform: rotate(45deg); 
 } 
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_set_clo:after { 
 transform: rotate(-45deg); 
 } 
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_set_clo:before,
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_set_clo:after { 
 position: absolute; 
 right: 11px; 
 top: 5px; 
 content: ""; 
 height: 17px; 
 width: 3px; 
 background-color: #393939; 
 border-radius: 10px; 
 } 
/* 닫기버튼 끝 */
.input_div { 
 display: flex; 
 justify-content: center; 
 } 
.i_text { 
 display: flex; 
 font-size: 20px; 
 font-family: "NanumSquareNeo-Variable"; 
 font-weight: 600; 
 align-items: center; /* 수직 가운데 정렬 */
 margin-left: 5px; 
 } 
/* 콩입력 input */
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 input { 
 width: 80%; 
 border: 1px solid #c5b7b7; 
 padding: 10px 0; 
 border-radius: 5px; 
 text-align: center; 
 font-size: 15px; 
 font-family: "NanumSquareNeo-Variable"; 
 color: #393939; 
 appearance: revert; 
 -webkit-appearance: revert; 
 } 
/* 콩입력 input 끝 */
.recv_bean { 
 display: block; 
 background: #03c75b; 
 color: #fff; 
 margin-top: 5px; 
 padding: 5px 7px; 
 border-radius: 3px; 
 font-size: 13px; 
 width: 100%; 
 font-family: "NanumSquareNeo-Variable"; 
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset,
 0 2px 0 -1px rgba(0, 0, 0, 0.13), 0 3px 0 -1px rgba(0, 0, 0, 0.08),
 0 3px 13px -1px rgba(0, 0, 0, 0.21); 
 border: 1px solid #03c75b; 
 } 

.recvd_bean { 
 display: block; 
 pointer-events: none; 
 border: 1px solid #03c75b; 
 background: #fff; 
 margin-top: 5px; 
 padding: 5px 7px; 
 width: 100%; 
 border-radius: 3px; 
 font-size: 13px; 
 } 

.bc { 
 font-size: 13.5px; 
 font-weight: 600; 
 } 

/* 선물하기 버튼 */
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_btn { 
 background: #53d900; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 width: 100%; 
 padding: 8px 0; 
 border-radius: 50px; 
 position: relative; 
 left: 50%; 
 transform: translate(-50%, 0); 
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset,
 0 2px 0 -1px rgba(0, 0, 0, 0.13), 0 3px 0 -1px rgba(0, 0, 0, 0.08),
 0 3px 13px -1px rgba(0, 0, 0, 0.21); 
 border-bottom: 1px solid #43af00; 
 margin-top: 30px; 
 } 
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_btn
 img { 
 margin-right: 15px; 
 width: 32px; 
 } 
.msg-list-wrap
 .golden_bell_set
 .set_wrap
 .set_area
 .bell_btn
 .btn_title { 
 font-size: 20px; 
 color: #fff; 
 font-family: "NanumSquareNeo-Variable"; 
 font-weight: 600; 
 letter-spacing: 0.5px; 
 } 
/* 선물하기 버튼 끝 */