@charset "utf-8";
/**
 * lib2.css
 * Add Share Contents ..
 * 20240911 | @m | 최초작성. 요구반영. 결함개선. 고도화.
 * 20240913 | @m |
 */

/** Compatible! [EG~] 20230120~ */

/** Table of contents ))
 | Overwrite
 | Add Share Contents
 | Components Library
 | RWD
 */


/* All Device ◆◆◆◆◆◆◆◆◆◆ */


/* ◇◆ 공용 ◇◆ */


/* var() 20240913 */
:root{

	/* radius */
	--radius1:1rem; /* 말풍선 */
	/* --radius2:1.5rem; */ /* 작성박스 */
	--radius3:2.5rem; /* 채팅박스 */

}


/* … lib.css, lib1cp1.css )) Overwrite ◆◆◆ */



/* ◇◆ Added to This Project, Content Styles to Share ◇◆◇◆◇◆◇◆◇◆ */
/* ◇◆ UI Component ◇◆◇◆◇◆◇◆◇◆ */


/* 채팅 20240913 */
.cp1chat1{
	display:flex;
	flex-direction:column;
	position:fixed;left:0;right:0;top:0;bottom:0;
	max-width:1000px;
	margin:0 auto;
	background:#000;
	line-height:1.375;
}
/* 제목그룹 */
.cp1chat1 .hg1{
	flex:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	position:relative;
	height:60px;
	padding:.75em 1.5em;
	color:#fff;
	font-size:.5em;
	letter-spacing:0;
}
.cp1chat1 .hg1>.w1,
.cp1chat1 .hg1>.w3{
	flex:none;
	width:40px;
}
.cp1chat1 .hg1>.w2{
	flex:1;
}
.cp1chat1 .hg1 .h1{
	margin:0;
	color:#cf995e;
	font-weight: 800;
	font-size:3.75em;
	font-family:'Abhaya Libre';
	line-height:1;
	text-align:center;
}
.cp1chat1 .hg1 .tt1{
	margin:0;
	color:#fff4ec;
	font-weight:300;
	font-size:1.3125em;
	text-align:center;
}
.cp1chat1 .hg1 .b1{
	display:inline-block;
	position:relative;
	width:40px;height:40px;
	border-radius:9999px;
	background:none;
	overflow:hidden;
	transition:.2s;
}
.cp1chat1 .hg1 .b1 .ic1{
	display:inline-block;
	position:absolute;left:50%;top:50%;
	width:28px;height:28px;
	margin:-14px;
	background:no-repeat center center / contain;
	transition:.2s;
}
.cp1chat1 .hg1 .b1 .ic1{background-image:url(../../img/lib2/ic56a1left1.png);}
.cp1chat1 .hg1 .b1:hover{
	background:#fff3;
}
.cp1chat1 .hg1 .b1:hover .ic1{
	transform:translate3D(-2px, 0, 0);
}
/* 채팅창 */
.cp1chat1 .cont{
	flex:1;
	position:relative;
	padding:2em 2%;
	border-radius:var(--radius3) var(--radius3) 0 0;
	background:#fff;
	overflow:hidden;
	overflow-y:scroll;
}
/* 푸터(폼)그룹 */
.cp1chat1 .fg1{
	flex:none;
	position:relative;
	padding:14px;
	background:#d0995e;
}
.cp1chat1 .write{
	display:flex;
	border-radius:var(--radius1);
	background:#fff;
}
.cp1chat1 .textarea{
	flex:1;
	height:2.4375em;
	min-height:2.4375em;
	max-height:10em;
	border:0;
	border-radius:var(--radius1);
	background:#fff;
	overflow:auto;
	resize:none;
	transition:0s;
}
.cp1chat1 .button.send{
	flex:none;
	align-self:flex-end;
	display:inline-flex;
	align-items:center;
	height:auto;
	margin:.375rem;
	padding:.5em;
	border:0;
	border-radius:9999px;
	background:#999795;
	color:#fff;
	font-size:14px;
	transition:.2s;
}
.cp1chat1 .button.send.on{
	background:#332f2b;
}
.cp1chat1 .button.send .t1{
	position:absolute;
	left:-9999px;
	margin:0 .5em 0 0;
}
.cp1chat1 .button.send .ic1{
	width:20px;
	height:20px;
	background:url(../../img/lib2/ic40a1send1.png) no-repeat center center / contain;
}
/* 파일업로드 */
.cp1chat1 .file-upload{
	align-self:flex-end;
	margin:0;
}
.cp1chat1 .button.attach{
	display:inline-flex;
	align-items:center;
	height:34px;
	margin:.375rem 0;
	padding:.4375rem;
	border:0;
	border-radius:var(--radius1);
	background:none;
	color:#333;
	box-shadow:none;
}
.cp1chat1 .button.attach .ic1{
	width:24px;
	height:24px;
	background:url(../../img/lib2/ic60a1clip1.png) no-repeat center center / contain;
}
.cp1chat1 .button.attach .t1{
	position:absolute;
	left:-9999px;
}
.cp1chat1 .button.attach:hover{
	background:#fff;
}
.cp1chat1 .button.attach:hover .ic1{
	filter:brightness(.8) contrast(1.6);
}
/*  */
.cp1chat1 .file-list{
	margin:.375rem 0;
	padding:0 .625rem;
	border-radius:var(--radius1);
	background:#fff;
	font-size:.875rem;
	line-height:1.375;
}
.cp1chat1 .file-list .li{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin:0;
	padding:.1875rem 0;
}
.cp1chat1 .file-list .li~.li{
	border-top:1px solid #0001;
}
.cp1chat1 .file-list .li>.t1{
	order:2;
}
.cp1chat1 .file-list .remove-file{
	flex:none;
	order:1;
	margin:0 .375rem 0 0;
	padding:0;
	border:0;
	background:none;
}
.cp1chat1 .file-list .remove-file .ic1:before{
	content:'\e5c9'; /* cancel */
	color:#f55;
	font-size:1.25rem;
	font-family:'Material Symbols Outlined';
}
.cp1chat1 .file-list .remove-file .t1{
	position:absolute;
	left:-9999px;
}
.cp1chat1 .file-list .remove-file:hover .ic1:before{
	font-variation-settings:'FILL' 1;
}
/* 채팅창 */
.cp1chat1 .cont>.w1{
	display:flex;
	flex-direction:row-reverse;
	margin:0 0 2em auto;
}
.cp1chat1 .cont>.w2{
	display:flex;
	margin:0 auto 2em 0;
}
.cp1chat1 .cont>.w1 .ic1,
.cp1chat1 .cont>.w2 .ic1{
	flex:none;
	display:inline-block;
	width:30px;
	height:30px;
	border-radius:9999px;
	background:url() no-repeat center center / contain;
}
.cp1chat1 .cont>.w1 .ic1{background-image:url(../../img/lib2/ic90a1user1.png);}
.cp1chat1 .cont>.w2 .ic1{background-image:url(../../img/lib2/ic90a1bot1.png);}
.cp1chat1 .tbox{
	display:flex;
	align-items:center;
	position:relative;
	margin:0 .75em;
	padding:1em;
	border-radius:var(--radius1);
	background:#f4f4f4;
	color:inherit;
	text-align:left;
}
.cp1chat1 .tbox:before{content:''; /* ◁ */
	display:inline-block;
	position:absolute;left:0;top:15px;
	width:0;height:0;
	margin:-6px -7px;
	border:0 solid transparent;
	border-width:6px 8px 6px 0;
	border-right-color:#f4f4f4;
}
.cp1chat1 .cont>.w1 .tbox{
	background:#f0eae3;
}
.cp1chat1 .cont>.w1 .tbox:before{content:''; /* ◁ */
	left:auto;right:0;
	border-right-color:#f0eae3;
	transform:rotate(180deg);
}
/*  */
.cp1chat1 .text1q1,
.cp1chat1 .text1a1{
	margin:0 0 0 .75em;
	font-size:1em;
}
/* ◇◆ */
@media all and (min-width:768px){
	.cp1chat1>.bg{
		position:absolute;left:0;right:0;top:0;
		height:360px;
		background:#000 url(../../img/lib2/bg1.jpg) no-repeat 50% 0 / cover;
	}
	.cp1chat1>.bg:before{content:'';
		position:absolute;left:0;right:0;top:0;bottom:0;
		background:rgba(0,0,0, .75);
	}
	.cp1chat1 .hg1{
		height:140px;
		font-size:.625em;
	}
	.cp1chat1 .cont{
		border-radius:var(--radius3) 0 0 0;
	}
	.cp1chat1 .cont>.w1 .ic1,
	.cp1chat1 .cont>.w2 .ic1{
		width:45px;
		height:45px;
	}
	.cp1chat1 .button.send{
		margin:.5rem .375rem;
		padding:.5em .9375em;
	}
	.cp1chat1 .button.send .t1{
		position:static;
	}
	.cp1chat1 .button.attach{
		margin:.5rem 0;
	}
}


/* ContentBlockName YYYYMMDD @Writer ◇◆ */



/* ◇◆ RWD ◇◆◇◆◇◆◇◆◇◆ */
/* ◇◆ */
@media all and (max-width:767px){
}
/* ◇◆ */
@media all and (min-width:768px){
}
/* ◇◆ */
@media all and (min-width:1000px){
}
/* ◇◆ */
@media all and (min-width:1260px){
}
/* ◇◆ */
@media all and (min-width:1480px){
}


/* ◇◆ @keyframes ◇◆◇◆◇◆◇◆◇◆ */
/* @keyframes kf1a1{} */