@charset "utf-8";
/**
 * lib2.css
 * Add Share Contents ..
 * 20240911 | @m | 최초작성. 요구반영. 결함개선. 고도화.
 * 20240913 | @m |
 * 20240926 | @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>.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, .5);
}
/* 제목그룹 */
.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:.375em;
	letter-spacing:0;
}
.cp1chat1 .hg1>.w1,
.cp1chat1 .hg1>.w3{
	flex:none;
	width:50px;
}
.cp1chat1 .hg1>.w2{
	flex:1;
}
.cp1chat1 .hg1 .h1{
	margin:0;
	color:#fffe;
	font-weight:500;
	font-size:3.5em;
	/* font-family:'Abhaya Libre'; */
	/* line-height:1; */
	text-align:center;
}
.cp1chat1 .hg1 .tt1{
	margin:0;
	color:#fffc;
	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:calc(.5em + 1%) 2%;
	background:#9ca3af;
}
.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;
	outline:0;
	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:#9ca3af;
	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:.5rem 0 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:#eff6ff;
	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:#eff6ff;
}
/* 나 */
.cp1chat1 .cont>.w1 .tbox{
	background:#f3f4f6;
}
.cp1chat1 .cont>.w1 .tbox:before{content:''; /* ◁ */
	left:auto;right:0;
	border-right-color:#f3f4f6;
	transform:rotate(180deg);
}
/*  */
.cp1chat1 .text1q1,
.cp1chat1 .text1a1{
	margin:0 0 0 .75em;
	font-size:1em;
}
/* ◇◆ */
@media all and (min-width:768px){
	.cp1chat1>.bg{
		display:block;
	}
	.cp1chat1 .hg1{
		height:120px;
		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;
	}
}


/* 말풍선 내용 20240926 */
/* 제목 */
.cp1chat1 .tbox h1{
	color:#333;
	font-size:1.375em;
}
.cp1chat1 .tbox h2{
	color:#333;
	font-size:1.25em;
}
.cp1chat1 .tbox h3{
	color:#333;
	font-size:1.125em;
}
.cp1chat1 .tbox strong{
	font-weight:500;
}
/* 테이블 */
.cp1chat1 .tbox table{
	/* width:100%; */
	margin:.375rem 0;
	border:0;
	border-collapse:collapse;
	border-top:1px solid #eee;
	font-size:.9375em;
}
.cp1chat1 .tbox table>*>tr{}
.cp1chat1 .tbox table>*>tr>th,
.cp1chat1 .tbox table>*>tr>td{
	padding:.5em .75em;
	border:0;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	background:#fff;
}
.cp1chat1 .tbox table>*>tr>th{
	background:none;
	color:#444;
	font-weight:normal
}
.cp1chat1 .tbox table>thead>tr>th{
	padding:.5em .75em;
	border-top:1px solid #eee;
	/* border-bottom:0; */
	background:#f9fafb;
}
.cp1chat1 .tbox table>tbody>tr>th{
	background:none;
	color:inherit;
	font-weight:400;
}
/*  */
.cp1chat1 .tbox table.type2>tbody>tr:last-child>th,
.cp1chat1 .tbox table.type2>tbody>tr:last-child>td{
	border-bottom:1px solid transparent;
}



/* ◇◆ 가져온 UI Component ◇◆◇◆◇◆◇◆◇◆ */


/* 스위치 스타일 추가 20240913 (( 20240913 */
.switch{
	display:inline-block;
	position:relative;
	margin:0 10px 0 0;
	width:40px;
	height:24px;
}
.switch input{
	width:0;
	height:0;
	opacity:0;
}
.slider{
	position:absolute;left:0;right:0;top:0;bottom:0;
	border-radius:34px;
	background-color:#ccc;
	cursor:pointer;
	transition:.4s;
}
.slider:before{
	content:"";
	position:absolute;
	width:16px;
	height:16px;
	left:4px;
	bottom:4px;
	border-radius:50%;
	background-color:white;
	transition:.4s;
}
input:checked + .slider{
	background-color:#2196F3;
}
input:checked + .slider:before{
	transform:translateX(16px);
}
/* 텍스트 (on, off) 추가 */
.switch-label{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:80px;
	margin-left:10px;
}
.switch-label .on-text{
	color:#2196F3;
	font-weight:bold;
}
.switch-label .off-text{
	color:#ccc;
	font-weight:bold;
}
input:checked + .slider ~ .switch-label .on-text{
	color:#2196F3;
}
input:not(:checked) + .slider ~ .switch-label .off-text{
	color:#ccc;
}



/* 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{} */