@charset "utf-8";
/* -----------------------------------------------
	* 메인 화면 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/

/****************************************************
	메인 레이아웃
****************************************************/

#body {opacity:0;}
#main_body {display: flex; gap:15px}
.mid-layout {position: relative;}
#main_body .theme-box { padding:50px 20px 20px 20px; width: 50%; position: relative;}

.left_area {flex-shrink: 0; display: flex; gap:20px; flex-direction: column;}

#main_body .theme-box::before {
content: "";
width: 100%;
height: 35px;
position: absolute;
top:0;
left:0;
border-radius: 9px 9px 0px 0px;
}

.top-area {display: flex;align-items: center; margin-bottom: 10px;position: relative;}
.top-area .heart-1, .top-area .heart-2, .top-area .heart-3, .top-area .heart-4, .top-area .heart-5 {position: absolute; right:0px;}
.top-area .heart-5 {animation: hearts 3s infinite; animation-delay: 0.5s;}
.top-area .heart-2 {animation: hearts2 3s infinite;}
.top-area .heart-3 {animation: hearts 4s infinite; animation-delay: 0.5s;}
.top-area .heart-4 {animation: hearts2 4s infinite;}

@-webkit-keyframes hearts {
	0% {
	  bottom:0;
	  opacity: 0;
	}
	10% {opacity: 1;}
	50% {right:-10px; opacity: 0.8;}

	100% {
	  bottom:80px;
	  right:10px;
	  opacity: 0;
	}
  }

  @-webkit-keyframes hearts2 {
	0% {
	  bottom:0;
	  opacity: 1;
	}
	10% {opacity: 1;}
	50% {right:10px; opacity: 0.8;}

	100% {
	  bottom:80px;
	  right:-15px;
	  opacity: 0;
	}
  }
.profile-img {width:36px; height: 36px; border-radius: 50%;background-size: cover; background-position: center;}
.profile-name {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	text-align: left;
	margin-left: 11px;
}

.img-slide {text-align: center;}
.slick .item {background-size: cover; background-position: center; width: 100%; height: 300px;}
.slick-list {margin: auto !important;}
.slick-dots li {margin: 0 !important;}

#main_body .img-slide.theme-box {left:0; top:0; width: 450px;}
#main_body .notice-box.theme-box {right:0; top:0; height: 550px; width: 47%; overflow: auto;flex-shrink: 0;}
#main_body .notice-box.theme-box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
#main_body .notice-box.theme-box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
#main_body .chat {position: relative; width:100%; bottom:0; left:20px;}
#main_body .chat-1 {bottom:0; left:-20px; position: relative; display: inline-block; padding:10px 30px; float: left;animation: fadeup 1.5s;}
#main_body .chat-2 {bottom:0; right:20px; position: relative; display: inline-block; padding:10px 30px; float: right; margin-top: 10px;animation: fadeup 2.5s; }
#main_body .chat-2::after {content: ""; display: block; clear: both;}
#main_body .chat-2::after {content: ""; display: block; clear: both;}
#main_body .chat-1  {
	border-radius: 10rem;
}

@-webkit-keyframes fadeup {
	0% {
		opacity: 0;
	  bottom:-20px;
	}
	100% {
	  bottom:0px;
	  opacity: 1;
	}
  }

#main_body .chat-1::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 14px solid transparent;
	border-left: 0;
	border-bottom: 0;
	margin-top: 0px;
	margin-left: -8px;
	z-index: 0;
}

#main_body .chat-2  {
	border-radius: 10rem;
}

#main_body .chat-2::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 14px solid transparent;
	border-right: 0;
	border-bottom: 0;
	margin-right: -8px;
}


@media all and (max-width:1025px) {
	#main_body {    flex-direction: column;}
	#main_body .theme-box {position: relative; width: 98% !important; margin: 15px 0;}
	#main_body .img-slide.theme-box {left: 0;}
	.chat {width: 80% !important; left: 0; position: relative !important;}
 }