@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); 

#opsbot {
	z-index: 10000;
	box-sizing: border-box;	
	display: none;
	font-family: 'Noto Sans KR', sans-serif;
}

#opsbot-chat {
	z-index: 1000;
	position: fixed;
	right: 20px;
	bottom: 42px;
}

#opsbot-chat[data-state='card'] {
	width: 360px;
	height: 520px;
	border-radius: 24px;
	overflow: hidden; 
	box-shadow: 0 0 28px 6px rgba(0, 0, 0, .1);
}

#opsbot-chat[data-state='button'] {
	right: 20px;
	bottom: 42px;
	position: fixed;
	border-radius: 50%;	
	cursor: pointer;
}

#opsbot-chat[data-state='button'] #opsbot-header {
	all: unset; /* 완전 초기화 */
	position: fixed;
	display: flex;
	align-items: center;
	background: #fff;
	justify-content: center;
	right: 20px;
	bottom: 42px;
	width: 100%;
	height: 45px;
	font-size: 16px;
	box-shadow: 0 0 28px 6px rgb(0 0 0 / 10%);
	border-radius: 50%;
	overflow: hidden;
	z-index: 10;
}

#opsbot-chat[data-state='button'] #opsbot-header #opsbot-name-box { 
	display: block; 
}

#opsbot-chat[data-state='button'] #opsbot-header #opsbot-name {
	display: none
}

#opsbot-chat #opsbot-img-box #opsbot-img { 
	width: 100%; 
	height: 100%; 
}

#opsbot-chat[data-state='button'] #opsbot-header #opsbot-img-box {
	width: 100%; 
	height: 100%; 
}

#opsbot-chat:hover #opsbot-tooltip.hover-type.slide-type #opsbot-preview-box .opsbot-content {
	max-width: 375px;
	box-sizing: border-box;
}
#opsbot-chat:hover #opsbot-tooltip.hover-type.bubble-type #opsbot-preview-box .opsbot-content, #opsbot-chat:hover #opsbot-tooltip.hover-type.bubble-type #opsbot-arrow {
	opacity: 1; 
}
#opsbot-chat #opsbot-tooltip.hover-type.slide-type #opsbot-preview-box .opsbot-content {
	transition: max-width .3s ease-out;
}
#opsbot-chat #opsbot-tooltip.hover-type.bubble-type #opsbot-preview-box .opsbot-content, #opsbot-chat #opsbot-tooltip.hover-type.bubble-type #opsbot-arrow {
	opacity: 0; 
}
#opsbot-chat #opsbot-tooltip.slide-type {
	height: 45px;
	width: 45px; 
}
#opsbot-chat #opsbot-tooltip.slide-type #opsbot-preview-box .opsbot-content {
	position: absolute;
	top: 0px;
	right: 0px;
	white-space: pre-wrap;
	height: 45px;
	max-width: 40px; 
	overflow: hidden;
	border-radius: 5rem;
	box-sizing: border-box; 
	cursor: pointer;
}

#opsbot-chat #opsbot-tooltip.slide-type #opsbot-preview-box .opsbot-content .opsbot-text{
	width: max-content;
	padding: 0 80px 0 30px;
	white-space: normal;
}

#opsbot-chat button:focus {
	outline: 0
}

#opsbot-tooltip {
	display: block; 
}

#opsbot-tooltip.bubble-type #opsbot-preview-box {
	max-width: 250px;
	bottom: 60px;
}

#opsbot-tooltip.bubble-type #opsbot-preview-box .opsbot-content:last-child {
	margin-bottom: 0px;
}

#opsbot-tooltip.bubble-type #opsbot-preview-box .opsbot-content {
	border-radius: 1rem;
	background-color: #fff;
	flex-direction: column;
	margin: 10px 0px;
}

#opsbot-tooltip.bubble-type #opsbot-preview-box .opsbot-content p{
	padding: 15px;
}

#opsbot-tooltip.slide-type #opsbot-preview-box {
	width: auto; 
	border-radius: 5rem; 
}

#opsbot-tooltip.slide-type #opsbot-preview-box #opsbot-arrow {
	display: none; 
}

#opsbot-tooltip.slide-type #opsbot-preview-box #opsbot-close {
	bottom: 30px; 
}

#opsbot-tooltip #opsbot-preview-box {
	width: 100%;
	position: relative;
	cursor: default; 
	box-sizing: border-box;
	padding: 0px;
}

#opsbot-tooltip #opsbot-close {
	background-color: #999;
	display: inline-block;
	width: 25px;
	height: 25px;
	border: none; 
	border-radius: 50% !important;
	padding: 0px;
    position: relative;
	display: flex; 
	margin-left: auto;
	align-items: center; 
	justify-content: center;
	cursor: pointer;
	right: 0; 
	opacity: 0;
}

#opsbot-chat:hover #opsbot-tooltip #opsbot-preview-box #opsbot-close { 
	opacity: 0.5;
}

#opsbot-tooltip #opsbot-close:before,
#opsbot-tooltip #opsbot-close:after {
	content: '';
	position: absolute;
	top: 6px;
	left: 12px;
	background-color: #fff;
	width: 1px;
	height: 12px;
	transform: rotate(45deg);
	transform-origin: center;
}

#opsbot-tooltip #opsbot-close:after {
	transform: rotate(135deg);
}

#opsbot-tooltip #opsbot-close.mobile {
	opacity: 1
}

#opsbot-tooltip #opsbot-close:hover {
	opacity: 1
}

#opsbot-tooltip #opsbot-preview-box .opsbot-content {
	display: flex;
	align-items: center;
	overflow: hidden;
	height: 100%; 
	box-shadow: 0 0 26px -12px rgba(0, 0, 0, 0.25);
}

#opsbot-tooltip #opsbot-preview-box .opsbot-content .opsbot-greeting-img{
	width: 100%;
	max-height: 500px; 
	overflow: hidden; 
}

#opsbot-tooltip #opsbot-preview-box .opsbot-content .opsbot-greeting-img img{
	max-width: 100%;
	vertical-align: middle;
}

#opsbot-tooltip #opsbot-preview-box .opsbot-content p {
	font-size: 14px;
	line-height: 1.5; 
	margin: 0px;
	white-space: pre-line;
	word-break: break-all;
}

#opsbot-tooltip #opsbot-preview-box #opsbot-arrow {
	position: absolute;
	bottom: -3px;
	right: 15px;
	transform: scaleY(1.25) rotate(45deg);
	display: block;
	background-color: #fff;
	width: 8px;
	height: 8px; 
}