* {font-family: 'Pretendard'; color: #222;}

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.5;
  word-break: keep-all;
}

img {width: 100%;}

.swiper-pagination {display: flex; width: fit-content !important; bottom: 20px !important; right: 20px !important; color: #fff; left: auto !important; padding: 3px 20px; background-color: rgb(157 157 157 / 27%); border-radius: 50px; gap: 5px;}
.swiper-pagination span {color: #fff;}
.swiper-pagination-current {font-weight: bold;}

/* 공통 css */

.pd-inner {padding: 0 20px;}
.pd-inner2 {padding: 20px;}
.pd-bt {padding-bottom: 75px;}
.pd-bt2 {padding-bottom: 75px;}
.mt-1 {margin-top: 60px;}
.mt-3 {margin-top: 80px;}
.mt-2 {margin-top: 100px;}
.de-pd {padding-left: 20px; margin: 40px 0;}
.de-pd2 {padding: 0 20px; margin: 40px 0;}
.de-pd3 {padding: 0 20px !important; margin: 30px 0;}
.price {font-weight: bold !important; color: #222 !important;}
.bx-shadow {border-radius: 8px; overflow: hidden; box-shadow: 0 0 13px rgba(155, 155, 155, 18%);}
.btn-wrap {background-color: #fff; padding: 10px 20px; position: fixed; bottom: 0; left: 0; width: 100%;}
.btn-wrap2 {display: flex; flex-direction: column;}

input {width: 100%; height: 50px; border: 1px solid #ddd !important; border-radius: 5px; font-size: 15px;}
input::placeholder {color: #aaa; font-weight: 300;}

.comu-list .meet-wrap {padding: 20px 0 40px 20px; border-bottom: 1px solid #eee;}
.meet-wrap2 {border-bottom: none !important;}

.comu-list .chat-wrap {padding: 20px 0 40px 20px; border-bottom: 1px solid #eee;}
.chat-wrap2 {border-bottom: none !important;}

/* 버튼 css */

button {height: 50px; text-align: center;}
.main-btn {width: 100%; height: 50px; text-align: center; color: #fff; background-color: #5F00B2; color: #fff;}

.tab {margin-bottom: 20px;}
.tab ul {display: flex; align-items: center; gap: 10px;}
.tab ul li {font-size: 15px; padding: 6px 15px; border-radius: 50px; border: 1px solid #eee; color: #525252;}
.tab ul li.on {border-color: #5F00B2; background-color: #5F00B2; color: #fff;}

.bold {font-weight: bold !important;}


.main-visual {position: relative;}

.tit {font-size: 20px; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; padding-right: 20px;}
.tit span {font-weight: bold; display: inline-block;}
.tit em {font-weight: bold; display: inline-block; color: #5F00B2;}
.tit p {font-size: 14px; color: #a1a1a1;}


.meet-con .meet-img {height: 130px; position: relative;}
.tag {padding: 3px 5px; border-radius: 3px; background-color: #e2d1ff; color: #5F00B2; font-size: 14px; font-weight: bold; width: fit-content;}
.meet-img .tag {position: absolute; top: 10px; left: 10px; }
.meet-con .meet-txt {padding: 12px 10px;}
.meet-con .meet-txt h3 {text-align: left; font-weight: bold; font-size: 18px; margin-bottom: 10px;}
.meet-con .meet-txt ul {display: flex; flex-direction: column; gap: 8px;}
.meet-con .meet-txt ul li {display: flex; align-items: center; justify-content: space-between;}
.meet-con .meet-txt ul li span {font-size: 14px; color: #949494;}
.meet-con .meet-txt ul li p {font-size: 15px; color: #555; font-weight: 500;}
.banner {width: 100%; height: 100px;}
.banner2 { border-radius: 5px; overflow: hidden;}

.chat-con {display: flex; flex-direction: column; gap: 10px; padding: 20px 15px; align-items: flex-start;}
.chat-con h4 {font-size: 20px; font-weight: bold;}
.mem-wrap {display: flex; width: 100%; align-items: center; justify-content: space-between;}
.mem-wrap .mem-img {display: flex;}
.mem-wrap .mem-img em {width: 25px; height: 25px; border-radius: 50%; overflow: hidden; border: 1px solid #eee; margin-left: -10px; position: relative;}
.mem-wrap .mem-img em:first-child {margin: 0;}
.mem-wrap .mem-img em:last-child::after {content: ""; display: block; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); top: 0; left: 0; }
.mem-wrap .mem-img em:last-child::before {content: ""; display: block; background: url(../img/dot.png) no-repeat; width: 11px; height: 3px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.mem-wrap .mem-num {font-size: 15px; color: #666;}
.chat-in {padding: 10px; border-radius: 5px; background-color: #fff4ff; display: flex; align-items: center; justify-content: space-between; width: 100%;}
.chat-in .chat-txt {width: 77%; display: flex; align-items: center;}
.chat-in .chat-txt em {width: 13px; height: 13px; display: inline-block; margin-right: 6px; flex-shrink: 0;}
.chat-in .chat-txt p {font-size: 14px; color: #555; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: calc(100% - 20px); text-align: left;}
.chat-in .chat-time {font-size: 10px; color: #998399;}

footer {padding: 20px; background: #f9f9f9;}
footer .foot-top {display: flex; flex-direction: column; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee;}
footer .foot-logo {width: 100px;}
.foot-center span {font-size: 12px; color: #565656; font-weight: 600;}
.foot-center p {font-size: 18px; color: #333; font-weight: bolder;}
.foot-bt {padding-top: 15px;}
.foot-bt > p {font-size: 12px; color: #555; font-weight: 600; margin-bottom: 8px;}
.foot-bt ul {display: flex; flex-direction: column; gap: 3px;}
.foot-bt ul li {display: flex; gap: 15px;}
.foot-bt ul li span {color: #979797; font-size: 12px; width: 75px;}
.foot-bt ul li p { font-size: 12px; color: #666;}