.chat_list {
	padding: 16px;
}
.chat_list .item {
	margin-bottom: 32px;
}
.chat_list .item .thumb {
	position: relative;
	width: 48px;
	height: 48px;
	background: #2C2C35;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	margin-right: 12px;
	box-sizing: border-box;
	overflow: hidden;
}
.chat_list .item .thumb img {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat_list .item .info {
	flex: 1;
}
.chat_list .item .info p {
	font-size: 12px;
	color: #9F9EA3;
}
.chat_list .item .info h3 {
	font-size: 13px;
	color: #FEFEFE;
	font-weight: 400;
	margin-top: 5px;
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
.chat_list .item .time {
	font-size: 12px;
	color: #9F9EA3;
	margin-left: 10px;
	text-align: right;
}
.chat_list .item .time .num {
	display: inline-block;
	background: #E86F00;
	border-radius: 100px;
	font-size: 13px;
	color: #FEFEFE;
	text-align: center;
	padding: 0px 6px;
	margin-top: 5px;
}



.chat_read .title_area {
	position: relative;
	align-items: center;
	background: #222128;
	margin-bottom: 0;
	z-index: 25;
}
.chat_read .title_area .tit {
	flex: 1;
	align-items: center;
    font-size: 14px;
    color: #E3E3E3;
    padding-left: 35px;
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
.chat_read .title_area .tit .thumb {
	margin-right: 5px;
}
.chat_read .title_area .more ul {
	display: none;
    position: absolute;
    background: #2C2C35;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
    border-radius: 8px;
    width: 135px;
    right: 20px;
    top: 45px;
	z-index: 1;
}
.chat_read .title_area .more:hover > button + ul {
	display: block;
}
.chat_read .title_area .more ul li button {
	display: block;
	width: 100%;
	color: #FEFEFE;
	font-size: 14px;
	padding: 13px 0;
}
.message ul {
    position: relative;
    padding: 0 16px 16px;
    height: calc(100vh - 105px);
    overflow: auto;
	margin-bottom: 45px;
    box-sizing: border-box;
}
.message ul li {
	position: relative;
	padding: 8px 0;
	width: 100%;
	font-size: 12px;
}
.message ul li:after {
	content: '';
	display: block;
	clear: both;
}
.message ul li.date_tit {
	width: 150px;
	height: 30px;
	line-height: 30px;
	background: #242328;
	border-radius: 50px;
	text-align: center;
	font-size: 10px;
	color: #9F9EA3;
	padding: 0;
	margin: 16px auto 8px;
}
.message ul li .box {
	display: flex;
	align-items: end;
}
.message ul li .box .date {
	font-size: 8px;
	color: #9F9EA3;
	line-height: 1.2;
	margin-left: 5px;
}
.message ul li .box .date span {
	display: block;
	color: #F6E979;
}
.message .txt {
	display: inline-block;
    color: #000;
	max-width: 260px;
    padding: 10px 16px;
    box-sizing: border-box;
	font-size: 13px;
	border-radius: 4px;
}
.message .txt .photo {
	display: flex;
	flex-wrap: wrap;
	margin: -6px -12px;
	font-size: 0;
}
.message .txt .photo > div {
	flex: 1;
}
.message .txt .photo > div img {
	width: 100%;
}
.message .txt .photo > div:first-child {
	margin-left: 0;
}
.message .txt .photo.grid4 > div {
    flex: none;
    width: 50%;
    margin: 0;
}
.message .txt .photo.grid5 > div:nth-child(1),
.message .txt .photo.grid5 > div:nth-child(2),
.message .txt .photo.grid5 > div:nth-child(3) {
	flex: none;
	width: 33.333%;
}
.message .txt .photo.grid5 > div:nth-child(4),
.message .txt .photo.grid5 > div:nth-child(5) {
	flex: none;
	width: 50%;
}
.message .txt .photo.grid6 > div {
    flex: none;
	width: 33.333%;
}
.message .date {
	font-size: 12px;
	font-weight: 350;
	color: #8F8F8F;
}
.message .date p {
    color: #2851E8;
    font-size: 12px;
}
.message .left .txt {
    word-break: break-all;
	background: #2C2C35;
	color: #E3E3E3;
}
.message .left .txt a {
	display: block;
    word-break: break-all;
}
.message .left a {
	color: #2851E8;
	text-decoration: underline;
}
.message .left ~ .left {
	padding: 3px 0;
}
.message .left ~ .left + .right {
	padding-top: 8px;
}
.message .right ~ .right {
	padding: 3px 0;
}
.message .right ~ .right + .left {
	padding-top: 8px;
}
.message .right .date {
	text-align: right;
}
.message .right .box {
	float: right;
}
.message .right .box .date {
	margin-left: 0;
	margin-right: 5px;
}
.message .right .txt {
    background: #F8A000;
	color: #18171C;
}
.message .right .txt a {
	display: block;
	word-break: break-all;
}
.message .right a {
	color: #fff;
	text-decoration: underline;
}
#sc_down {
	display: none;
    position: absolute;
    right: 16px;
    top: -60px;
    z-index: 2;
}
.cmt-write {
	position: fixed;
	bottom: 0;
	box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 1160px;
	padding: 10px 16px;
	box-sizing: border-box;
	background: #222128;
}
.cmt-write .box {
	width: 100%;
	box-sizing: border-box;
	font-size: 0;
}
.cmt-write textarea {
    flex: 1;
    resize: none;
    font-size: 15px;
    color: #FEFEFE;
    height: 24px;
    border: 0;
    background: #222128;
    box-sizing: border-box;
    line-height: 1.2;
	caret-color: #F8B303;
}
.cmt-write .file_btn {
	width: 25px;
	height: 25px;
	background: url("../images/ico-pict.svg")no-repeat 50% 50%;
	margin-right: 8px;
}
.cmt-write .send_btn {
	width: 24px;
	height: 24px;
	background: url("../images/ico-send.svg")no-repeat 50% 50% / 21px;
}



#file_pop h3 {
	margin-bottom: 30px;
}
#file_pop .flex > div {
	flex: 1;
	text-align: center;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.8);
}
#file_pop .flex > div input[type=file] {
	display: none;
}
#file_pop .flex > div input[type=file] + label {
	display: block;
}
#file_pop .flex > div img {
	display: block;
	margin: 0 auto;
}
#file_pop .flex > div button {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.8);
}



#thumb_slide .black_bg {
	background: rgba(0, 0, 0, 0.8);
}
#thumb_slide .scroll {
    max-height: calc(100vh - 35px);
}
#thumb_slide .modal_cont {
	width: 92%;
	background: transparent;
	text-align: center;
	padding: 0;
}
#thumb_slide .modal_cont img {
	max-width: 500px;
}
#thumb_slide .swiper-wrapper {
	align-items: center;
}
#thumb_slide .slide {
	position: relative;
	width: 100%;
	overflow: hidden;
}
#thumb_slide .slide .gallery-top {
	width: 100%;
	margin-bottom: 6px;
	overflow: hidden;
}
#thumb_slide .slide .gallery-thumbs .swiper-slide {
	border-radius: 2px;
	width: 42px;
	height: 42px;
	overflow: hidden;
}
#thumb_slide .slide .gallery-thumbs .swiper-slide-active {
	border: 1px solid #FEFEFE;
	box-sizing: border-box;
}
#thumb_slide .slide .gallery-thumbs img {
	width: 100%;
	height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
}
#thumb_slide .slide .swiper-pagination {
	position: static;
	font-size: 12px;
	color: #E3E3E3;
}
.modal h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.8);
}
.modal p {
	font-size: 13px;
	color: #C3C2C7;
}
.modal .btn_area {
	margin-top: 16px;
}
.modal .btn_area button {
	flex: 1;
	text-align: center;
	color: #62626D;
	font-size: 13px;
	font-weight: 700;
	padding: 14px 0;
}
.modal .btn_area button.y_txt {
	color: #F8B303;
}