@import url("base.css");

/* layout */
.wrap {
    width: 100%;
}
.bg_wrap, .bg_wrap .content {
    background: #F5F5F5;
}
header {
    width: 100%;
    min-width: 1084px;
    border-bottom: 1px solid #E8E8E8;
    background: #fff;
}
header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1084px;
    margin: 0 auto;
    padding: 20px 0;
}
header h1 {
    font-size:0;
}
header h1 a {
    display: block;
    height: 36px;
    width: 75px;
}
header .right {
    font-size: 0;
    position: relative;
}
header .right a {
    margin-left: 20px;
}
.layer_mypage {
    display: none;
    z-index: 11;
    position: absolute;
    top: 34px;
    left: 138px;
    width: 119px;
    padding: 6px 0;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

header .right .layer_mypage a {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 0;
    padding: 8px 16px;
    color: #333;
    font-size: 13px;
    font-weight: 500;
}
header .right .layer_mypage a:hover {
    background: #f8f8f8;
}
.layer_mypage a:before {
    content: "";
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background-size: 24px 24px;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.layer_mypage .new:after {
    position: absolute;
    top: 8px;
    right: 9px;
    content:"";
    width: 24px;
    height: 24px;
    background: url("../image/icon_layer_new-37bf52c5bf1faef307a0780bde36063c.svg") 0 0 no-repeat;
    background-size: 24px 24px;
}
.layer_mypage a.btn_contract:before {
    background-image: url("../image/icon_layer_contract-c2faa89a46133a2177a0e3f20a1ef4cb.svg");
}
.layer_mypage a.btn_chatting:before {
    background-image: url("../image/icon_chat-0ed20cbe18fea91ab0539368b85f1587.svg");
}
.layer_mypage a.btn_more:before {
    background-image: url("../image/icon_layer_user-5f4440474d2a26286c1a496b01edbc76.svg");
}
.btn_mypage.new:after {
    position: absolute;
    top: -5px;
    right: -5px;
    content:"";
    width: 14px;
    height: 14px;
    background: url("../image/icon_layer_new-37bf52c5bf1faef307a0780bde36063c.svg") 0 0 no-repeat;
    background-size: 14px 14px;
}
.top_search_input {
    display: flex;
    justify-content: space-between;
    width: 532px;
    border: 1px solid #DFDFDF;
    border-radius: 30px;
}
.top_search_input div {
    position: relative;
    padding:17px 20px
}
.top_search_input input {width:180px}

.top_keyword_input span:after {
    position: absolute;
    top: 17px;
    right: 0;
    display: inline-block;
    content: "";
    width: 1px;
    height: 21px;
    background: #D9D9D9;
}
.top_date_select span {
    display: flex;
}

.content {
    position: relative;
    width: 1084px;
    margin: 0 auto;
    padding-top: 60px;
}
.flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.flex_column {
    display: flex;
    flex-direction: column;
}
.flex_right {
    display: flex;
    justify-content: right;
}.relative {
     position: relative;

}
.align_center {
    align-items: center;
}
.align_top {
    align-items: baseline !important;
}
.align_flex_start {
    align-items: flex-start !important;
}
.content.width_full {
    width: 100%;
    min-width: 1084px;
    margin: 0;
}
/* 방 상세 */
.room_detail {
    width: 692px;
}
.room_sticky {
    position: sticky;
    top: 0;
    width: 348px;
    /*height: 403px;*/
    margin-top: 82px;
    padding: 28px 20px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.room_info {
    position: relative;
}
.room_info:nth-child(n+2) {
    margin-top: 70px;
}
.room_info .title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.room_info .title_text {
    font-size: 15px;
    line-height: 22px;
    word-wrap: break-word;
}
.room_info .title strong {
    font-size: 24px;
    line-height: 33px;
}
.room_info .add_text {
    margin-top: -8px;
    color: #777;
    font-size: 18px;
    line-height: 22px;
}
.room_info .group {
    margin-left: 16px;
}
.room_info .group .badge {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 4px;
}

/* 방상세 슬라이드 */
.roomImagesSwiper {
    margin-top: 20px;
}
.roomImagesSwiper .swiper-slide {
    overflow: hidden;
    width: 692px;
    height: 400px;
    border-radius: 4px;
}
.roomImagesSwiper .swiper-button-next,
.roomImagesSwiper .swiper-button-prev {
    color: #fff;
}
.roomImagesSwiper .swiper-button-next:after,
.roomImagesSwiper .swiper-button-prev:after {
    font-size: 24px;
}
.roomImagesSwiper .swiper-pagination-fraction {
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding: 3px 8px 1px;
    background:rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    border-radius: 20px;
}
.roomImagesSwiper .swiper-pagination-fraction span {
    color: #fff;
    font-size: 11px;
    line-height: 16px;
}
.place_box {
    display: flex;
    border: 1px solid #EFEFEF;
    border-radius: 6px;
}
.place_box .place_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 477px;
    padding: 24px 40px;
    width:460px;
}
.place_box .place_list li span{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
}
.place_box .place_list li p {
    color: #5C5C5C;
}

.place_box .place_detail {
    padding: 24px 30px;
    border-left: 1px solid #EFEFEF;
}
.place_box .place_detail li {
    display: flex;
    align-items: center;
}
.place_box .place_detail li:nth-child(n+2) {
    margin-top: 16px;
}
.place_box .place_detail span {
    display: inline-block;
    min-width: 61px;
    margin-right: 10px;
    color: #666;
}
.place_box .place_detail strong {
    color: #333;
}
.keyword_area {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}
.keyword_area span {
    padding: 6px 12px;
    border-radius: 2px;
    background: #F8F8F8;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    color: #333;
}
.room_info .option {
    display: flex;
    flex-wrap: wrap;
}
.room_info .option li {
    display: flex;
    align-items: center;
    width: 20%;
}
.room_info .option li:nth-child(n+6){
    margin-top: 16px;
}
.room_info .option.etc li:nth-child(n+6){
    margin-top: 12px;
}
.room_info .option li span {
    width: 32px;
    height: 32px;
    margin-right: 12px;
}
.room_info .option li p {
    min-width: 52px;
    font-size: 15px;
    color: #333;
}

.room_info .map {
    margin: 16px 0;
}

.icon_info {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 6px;
    background: #FEF6F7;
}
.icon_info strong {
    padding-left: 24px;
    background:url("../image/icon_info-57e1880759faf470b0f5321c1ca30c41.svg") 0 0 no-repeat;
    font-size: 12px;
    line-height: 21px;
    color: #FF495F;
}

/* table */
.tbl_style {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.tbl_style th {
    padding: 16px 0;
    border-bottom: 1px solid #EFEFEF;
}
.tbl_style th span {
    color: #777;
    font-weight: 400;
}
.tbl_style td {
    padding: 16px 0;
}
.tbl_style + .gray_box {
    margin-top: 32px;
}

.border_radius {
    margin-top: 30px;
    border: 1px solid #EFEFEF;
    border-radius:  6px;
}
.tbl_style_02 th {
    padding: 20px;
    background: #F8F8F8;
    color: #111;
    font-weight: 700;
}
.tbl_style_02 td {
    padding: 20px;
    color: #111;
    font-size: 13px;
}
.tbl_style_02 tr + tr td {
    border-top: 1px solid #dfdfdf;
}
.tbl_style_02 .btn_detail {
    display: flex; 
    width:26px; 
    padding: 7px 16px; 
    text-align:center; 
    border-radius: 4px; 
    border: 1px solid #DFDFDF
}

.gray_box {
    padding: 20px 28px;
    border-radius: 6px;
    background: #F8F8F8;
}
.gray_box:nth-child(n+2) {
    margin-top: 20px;
}
.gray_box .title {
    padding-bottom: 12px;
    font-size: 14px;
    line-height: 21px;
    border-bottom: 1px solid #5C5C5C
}
.gray_box .title_02 {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
}
.room_info .gray_box.flex {
    gap: 45px;
}
.discount_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.discount_list li {
    display: flex;
    justify-content: space-between;
    width: 297px;
    background: url("../image/bg_dashed-b7a81d9dc8f509a6deb2a35cbd9d5111.svg") left center repeat-x; ;
}
.onecol .discount_list li:nth-child(even) {
    margin-left: 16px;
}
.onecol .discount_list li:nth-child(n+3) {
    margin-top: 16px;
}
.twocol .discount_list li:nth-child(n+2) {
    margin-top: 16px;
}
.discount_list li p, .discount_list li span {
    background:#F8F8F8;
}
.discount_list li p {
    padding-right:12px;
    color: #5C5C5C;
}
.discount_list li span {
    padding-left:12px;
}
.icon_list {
    display: flex;
}
.icon_list li {
    margin-right: 54px;
}
.icon_list li span{
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
}
.icon_list li p {
    font-size: 13px;
    color: #5C5C5C;
}
.icon_list li.off p {
    color: #B7B7B7;
}
.gray_box .title.border_none {
    margin-bottom: 12px;
    border-bottom:none;
}
.detail_text {
    margin:0 0 6px 0;
    font-size: 13px;
    line-height: 19px;
    color: #777;
}
.refund_list li, .refund_text p {
    color: #777;
    font-size: 13px;
    line-height: 19px;
}
.refund_list li:nth-child(n+2),  .refund_text p:nth-child(n+2) {
    margin-top: 4px;
}
.profile {
    display: flex;
    justify-content: space-between;
    margin: 90px 0 80px;
}
.profile dl {
    display: flex;
}
.profile .profile_img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    border-radius: 100px;
}
.profile .profile_name {
    display: flex;
}
.profile .profile_name strong {
    font-size: 16px;
    line-height: 22px;
}
.profile .profile_name p {
    padding: 3px 6px 3px 18px;
    margin-right: 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}
.profile .icon_green {
    margin-left: 16px;
    color: #0DB08C;
    background:#EFFBF7 url("../image/icon_safe-e0c33686ea33687d26ebaa7ebdd68dbe.svg") 6px 5px no-repeat;
}
.profile .icon_blue {
    color: #4263EB;
    background:#EDF2FF url("../image/icon_like-56e76e8b25badcda6778f0641259c3e3.svg") 6px 6px no-repeat;
}
.profile .introduce {
    margin-top: 10px;
    color: #5C5C5C;
}
.profile .btn {
    display: block;
    height: 44px;
    box-sizing: border-box;
    margin-top:8px
}
.profile .icon_send {
    padding: 0 24px 0 48px;
    background:url("../image/icon_send-26f2b107b850609f50892e0c11b55b0b.svg") 24px 0 no-repeat;
    background-size: 18px auto;
}
.review_list {
    margin-top: 24px;
}
.review_list li {
    font-size: 15px;
    color: #333;
    line-height: 22px;
}
.review_list li:nth-child(n+2) {
    padding-top: 20px;
    border-top: 1px solid #F4F4F4;
}
.room_info .title .font_purple {
    margin-left: 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}
.review_info {
    display: flex;
    align-items: center;
}
.review_info .bg_score {
    position: relative;
    width: 80px;
    height: 16px;
    background: url("../image/icon_star_off-034f2d006c01c97c4d30f1f33021472e.svg") 0 0 repeat-x;
}
.review_info .score {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 16px;
    background: url("../image/icon_star_on-69a292270caf1782d581ef0185004b17.svg") 0 0 repeat-x;
}
.review_info .review_item {
    position: relative;
    top: 1px;
    padding: 0 6px;
    font-size: 13px;
    line-height: 19px;
    color: #757575;
}
.review_info .review_item + .review_item:before {
    position: absolute;
    top: 3px;
    left: 0;
    display: block;
    content: "";
    width: 1px;
    height: 13px;
    background: #757575;
}
.review_text {
    margin: 20px 0;
}
/* 방 상세 - sticky */
.top_icon {
    display: flex;
    justify-content: right;
    align-items: center;
}
.top_icon a {
    width: 18px;
    height: 18px;
    padding: 6px;
    margin-right: 6px;
}
.top_icon .btn_like {
    position: relative;
    top: -3px;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../image/icon_heart-bfc3fcf41d729bdd59ec19dd74ea3b75.svg") 0 0 no-repeat;
}
.top_icon .btn_like.is_active {
    background: url("../image/icon_heart_full-c19f7565870746c2f191ff8ec54ae12c.svg") 0 0 no-repeat;
}
.room_pay {
    margin-top: 6px
}
.room_pay p strong {
    font-size: 26px;
    line-height: 24px;
}
.room_pay p em {
    font-size: 20px;
    line-height: 25px;
}
.room_pay p span {
    color: #777;
    font-size: 20px;
    line-height: 21px;
}
.room_pay .place_list {
    display: flex;
    margin-top: 8px;
}
.room_pay .place_list li {
    color: #777;
    line-height: 19px;
}
.room_pay .place_list li + li:before {
    content:"·";
    margin: 0 4px;
}
.room_pay + .btn_full {
    margin-top:48px;
}
.gray_box_small {
    margin: 23px 0 48px;
    padding: 12px 16px;
    border-radius: 6px;
    background: #F5F5F5;
}
.gray_box_small li .sale_list{
    display: flex;
    justify-content: space-between;
}
.gray_box_small li .sale_list:nth-child(n+2) {
    margin-top: 10px;
}
.gray_box_small li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #D9D9D9;
}

.line_box {
    display: flex;
    margin-bottom: 12px;
    border:1px solid #DFDFDF;
    border-radius: 4px;
}
.line_purple, .line_box.line_purple p:nth-child(n+2) {
    border-color: #5C44E3
}
.line_box p {
    width: 50%;
    padding: 6px 16px;
    color: #999;
    font-size: 12px;
    line-height: 19px;
}
.line_box p:nth-child(n+2) {
    border-left: 1px solid #DFDFDF
}
.line_box span {
    display: block;
    margin-top: 2px;
    line-height: 19px;
}

/* 공통*/
/* badge*/
.badge {
    padding: 6px 6px 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 4px;
}
.badge.green {
    color: #fff;
    background: #0DB08C;
}
.badge.purple {
    color: #fff;
    background: #5C44E3;
}
.badge.black {
    color: #fff;    background: #000;

}
.badge.red {
    color: #fff;
    background: #EF233C;
}
.badge.gray {background:#777; color:#fff;}
.badge.orange {background:#FB6227; color:#fff;}

/* button */
.btn {
    display: inline-block;
    box-sizing: border-box;
}
.small  {
    height: 33px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    color: #5C5C5C;
}
.medium  {
    height: 48px;
    padding: 11px 20px;
    border-radius: 4px;
    border: 1px solid #DFDFDF;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.large {
    height: 56px;
    padding: 17px 24px;
}
.white {
    border-radius: 4px;
    border: 1px solid #DFDFDF;
    background: #fff;
}
.black {
    border-radius: 4px;
    background: #000;
    color: #fff;
}
.black[disabled] {
    opacity: .4;
    cursor: default;
}
.btn_black[disabled] {
    opacity: .4;
    cursor: default;
}
.line_black {
    border-radius: 4px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
}
.purple {
    border-radius: 4px;
    background: #5C44E3;
    color: #fff;
}
.purple[disabled] {
    opacity: .4;
    cursor: default;
}
.btn_full a,
.btn_full button {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.btn_full a:nth-child(n+2) {
    margin-top: 12px;
}
.btn_full button:nth-child(n+2) {
    margin-top: 20px;
}
.btn_flex {
    display: flex;
    gap: 8px;
}
.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.font_000 {
    color: #000 !important;
}
.font_222 {
    color: #222;
}
.font_333 {
    font-size: 13px;
    line-height: 19px;
    color: #333;
}
.font_777 {
    color: #777;
}
.font_999 {
    font-size: 13px;
    line-height: 19px;
    color: #999 !important;
}
.font_orange {
    color: #FB6227;
}
.font_green {
    color: #0DB08C;
}
.font_red {
    color: #EF233C !important;
}
.font_blue {
    color: #5C44E3;
}
.font_purple {
    color: #553AE8 !important;
}
.font_b7b7b7 {
    color: #b7b7b7;
}
.text_bold, .text_bold * {
    font-weight: 700;
}
.mt_24 {
    margin-top: 24px;
}
.mt_20 {
    margin-top: 20px !important;
}
.mt_40 {
    margin-top: 40px;
}
.mt_48 {
    margin-top: 48px;
}
.mt_60 {
    margin-top: 60px;
}
.mt_80 {
    margin-top: 80px !important;
}
.mt_100 {
    margin-top: 100px !important;
}
.font_12 {
    font-size: 12px;
    line-height: 19px;
}
.font_13 {
    font-size: 13px;
    line-height: 19px;
}
.size_105 {
    width: 105px !important;
}
.size_121 {
    width: 121px !important;
}
.size_200 {
    width: 200px !important;
}
.size_256 {
    width: 256px !important;
}
.size_280 {
    width: 280px !important;
}
.bold {
    font-weight: 700 !important;
}

.radius_100 {
    border-radius: 100px !important;
}

/* input */
.width_150 {
    width: 150px !important;
}
.width_236 {
    width: 236px !important;
}
.width_300 {
    width: 300px !important;
}
.width_auto {
    width: auto !important;
}
.style_border {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    line-height: 48px;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    background: #fff;
}
.style_border[disabled],
.style_border.bg_gray {
    background: #F8F8F8;
}
input[type=checkbox]{
    display:none;
}
input[type=checkbox] + label{
    font-size: 13px;
    cursor:pointer;
}
input[type=checkbox] + label:before{
    content:"";
    position: relative;
    top: -2px;
    display:inline-block;
    width:18px;
    height:18px;
    margin-right: 8px;
    background: url("../image/icon_check_default-4ed28d7cd3f10e9e5560e031fcc2aadb.svg") 0 0 no-repeat;
    vertical-align: middle;
}
input[type=checkbox]:checked + label:before{
    content:"";
    display:inline-block;
    width:18px;
    height:18px;
    background: url("../image/icon_check_active-e858a6b80f30a5088051286a565d955d.svg") 0 0 no-repeat;
    background-size: 18px 18px;
}

input.circle_checkbox[type=checkbox] + label{
    font-size: 14px;
    cursor:pointer;
}
input.circle_checkbox[type=checkbox] + label:before{
    width: 24px;
    height: 24px;
    background: url("../image/icon_check_circle_default-3647d72d3746c785954d22a016090545.svg") 0 0 no-repeat;
    background-size: 24px 24px;
}
input.circle_checkbox[type=checkbox]:checked + label:before{
    width: 24px;
    height: 24px;
    background: url("../image/icon_check_circle_active-d75bff2b83239d457e6374a29be22c06.svg") 0 0 no-repeat;
    background-size: 24px 24px;
}
input::placeholder, textarea::placeholder {
    color: #999;
}

.check_button[type=radio] {
    display: none;
}
.check_button + label {
    position:relative;
    display:block;
    margin-bottom:6px;
    padding: 12px 16px;
    border:1px solid #DFDFDF;
    border-radius:6px;
    font-size:13px;
    cursor: pointer;
}
.check_button:checked + label {
    border-color:#000;
}
.check_button:checked + label:after {
    position:absolute;
    top:12px;
    right:16px;
    display:inline-block;
    content:"";
    width:24px;
    height:24px;
    background:url("../image/icon_radio_check-ea29dfd30f5037adc0a1bea39475836e.svg") 0 0 no-repeat;
    background-size:24px auto;
}
.check_button[type=checkbox] + label:before {
    display: none !important;
}

.circle_radio[type=radio]{
    display:none;
}
.circle_radio[type=radio] + label{
    font-size: 14px;
    cursor:pointer;
}
.circle_radio[type=radio] + label:before{
    content:"";
    position: relative;
    top: -2px;
    display:inline-block;
    width:24px;
    height:24px;
    margin-right: 10px;
    background: url("../image/icon_radio_off-01d278d9124be7d526ad10fc4fd2d864.svg") 0 0 no-repeat;
    vertical-align: middle;
}
.circle_radio[type=radio]:checked + label:before{
    content:"";
    display:inline-block;
    width:24px;
    height:24px;
    background: url("../image/icon_radio_active-3baf78bcbb70740d7f4cb856077eaf1e.svg") 0 0 no-repeat;
    background-size: 24px 24px;
}

.radio_box_list .check_radio_button[type=radio] {
    display: none;
}
.radio_box_list .check_radio_button + label {
    position:relative;
    display:block;
    width:190px;
    margin-bottom:6px;
    padding: 12px 16px;
    border:1px solid #DFDFDF;
    border-radius:6px;
    font-size:13px;
    font-weight:400;
    cursor: pointer;
}
.radio_box_list .check_radio_button:checked + label {
    border-color:#000;
    font-weight:700;
}
.radio_box_list .check_radio_button:checked + label:after {
    position:absolute;
    top:12px;
    right:16px;
    display:inline-block;
    content:"";
    width:24px;
    height:24px;
    background:url("../image/icon_radio_check-ea29dfd30f5037adc0a1bea39475836e.svg") 0 0 no-repeat;
    background-size:24px auto;
}
.radio_box_list .check_radio_button[type=checkbox] + label:before {
    display: none !important;
}

/* select box */
.selectbox + .ui-selectmenu-button-closed .ui-selectmenu-text {
    color: #999;
}
.selectbox + .ui-selectmenu-button .ui-selectmenu-text {
    margin-right: 40px;
}
.selectbox + .ui-selectmenu-button.ui-button {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    height: 48px;
    border-color: #dfdfdf;
    background: #fff;
}
.width_348 + .ui-selectmenu-button.ui-button {
    width: 348px;
}
.width_135 + .ui-selectmenu-button.ui-button {
    width: 135px;
}
.selectbox + .ui-selectmenu-button.ui-button .ui-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: url("../image/icon_selectbox-0df47dcffb557dbc6c19dce5dc6ccd9a.svg") 0 0 no-repeat;
}
.selectbox + .ui-selectmenu-button.ui-button.ui-selectmenu-button-open .ui-icon{
    transform: rotate(180deg);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: none;
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
    color: #000;
}
.selectbox.filledbox + .ui-selectmenu-button .ui-selectmenu-text {
    color:#000
}

/* 키워드 검색 */
.search_area {
    position: relative;
    width: 828px;
    margin: 0 auto 80px;
}
.search_area .btn.large {
    position: absolute;
    right: 0;
    bottom: 0;
}
.search_link a {
    display: inline-block;
    margin-right: 20px;
    color: #B7B7B7;
    line-height: 22px;
}
.search_link a.is_active {
    font-weight: 700;
    color: #000;
    line-height: 22px;
    border-bottom: 2px solid #000;
}
.search_input {
    display: flex;
    justify-content: space-between;
    width: 746px;
    margin-top: 20px;
    border: 1px solid #DFDFDF;
    border-radius: 6px;
}
.search_input div {
    position: relative;
    padding:17px 20px
}
.search_area .keyword_input {
    width: 403px;
}
.search_area .date_select {
    width: 342px;
}
.keyword_input span {
    display: flex;
    padding-left:29px;
    background: url("../image/icon_search-6c417269a434546febadcbb11b1cb646.svg") 0 0 no-repeat ;
}
.keyword_input span:after {
    position: absolute;
    top: 17px;
    right: 0;
    display: inline-block;
    content: "";
    width: 1px;
    height: 21px;
    background: #D9D9D9;
}
.date_select span {
    display: flex;
    padding-left:29px;
    background: url("../image/icon_calendar-2f200ebf19740900e2f8388ca03962aa.svg") 0 0 no-repeat ;
}
.search_input span input {
    width: 100%;
    border: none;
}
.option_area {
    position: relative;
}
.option_area .btn_reset{
    position: absolute;
    top: 0;
    right: 0;
}
.option_box {
    width: 232px;
    padding-bottom: 24px;
    border-bottom: 1px solid #D9D9D9;
}
.option_box + .option_box {
    padding-top: 24px;
}
.option_box .title {
    margin-bottom: 20px;
    color: #333;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
}
.option_box .title span {
    padding-left: 14px;
    color: #5C44E3;
    font-weight: 500;
    line-height: 18px;
}
.check_box_list li:nth-child(n+2) {
    margin-top: 10px;
}


/* range slider */
.rs-container .rs-scale span ins {color:#fff}
.rent + .rs-container {
    height:28px;
    margin:40px 0 14px;
}
.rent + .rs-container * {
    color:#000;
    font-size: 12px;
}
.rent + .rs-container .rs-scale span::before {
    display: none;
}
.rent + .rs-container .rs-bg,
.rent + .rs-container .rs-selected {
    top:calc(50% - 2px);
    height:4px;
    background:#dfdfdf;
}
.rent + .rs-container .rs-pointer {
    top:calc(50% - 8px);
    width:16px;
    height:16px;
    border:none;
    border-radius:50%;
    box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
}
.rent + .rs-container .rs-pointer::after,
.rent + .rs-container .rs-pointer::before {
    display: none;
}
.rent + .rs-container .rs-selected {
    border:none;
    background:#000;
}
.rent + .rs-container .rs-scale span:last-child {
    margin:20px 0 0 -34px;
}
.rent + .rs-container .rs-tooltip {
    min-width: 58px;
    height: 20px;
    border: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    transform: translate(-57%, -26px);
    background: transparent;
}

.option_result {
    width: 100%;
    margin-left: 44px;
}
.result_num {
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
}
.btn_sort {
    font-size: 0;
}
.btn_sort button {
    color: #999999;
    font-size: 13px;
    line-height: 16px;
}
.btn_sort .is_active {
    color: #222;
    font-weight: 700;
}
.btn_sort button + button:before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 15px;
    margin: 0 12px;
    background: #D9D9D9;
    vertical-align: middle;
}

.result_room {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 20px;
}
.result_room a {
    display: block;
    width: 256px;
}
.result_room a:nth-child(n+4) {
    margin-top: 20px;
}

/* 방 아이템 */
.room_item dt {
    overflow: hidden;
    position: relative;
    width: 256px;
    height: 162px;
    border-radius: 6px;
}
.room_item .group {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
}
.room_item .group span {
    padding: 4px 6px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
}
.room_item .group span:last-child {
    border-radius: 0px 0px 4px 0px;
}
.room_item .room_name {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}
.room_item .room_address {
    font-size: 13px;
    color: #5C5C5C;
    line-height: 21px;
}
.room_item .room_pay {
    margin-top: 2px;
}
.room_item .room_pay p strong {
    font-size: 18px;
    line-height: 26px;
}
.room_item .room_pay p em {
    font-size: 17px;
    line-height: 24px;
}
.room_item .room_pay p span {
    font-size: 17px;
    color: #5C5C5C;
}
.room_item .room_pay .place_list {
    margin-top: 2px;
}
.tag {
    margin-top: 13px;
}
.tag p:nth-child(n+2) {
    margin-top: 6px
}
.tag p span {
    display: inline-block;
    padding: 4px 6px 2px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}
.tag .tag_purple span{
    color: #6B54ED;
    background: #F7F5FF ;
}
.tag .tag_blue span{
    color: #4263EB;
    background: #EDF2FF ;
}

/* 페이지네이션 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
.pagination a, .pagination strong  {
    display: inline-block;
    width: 24px;
    height: 26px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #999;
}
.pagination .prev {
    pointer-events: none;
    width: 18px;
    height: 18px;
    background: url("../image/icon_page_off-590feb5838e70544d677030672fdfd00.svg") 0 2px no-repeat;
}
.pagination .prev.is_active {
    pointer-events: initial;
    background: url("../image/icon_page_on-e2c2d7a5cf967fbf4b06eff28cf6cac4.svg") 0 -2px no-repeat;
    transform: rotate(-180deg);
}
.pagination .next {
    pointer-events: none;
    width: 18px;
    height: 18px;
    background: url("../image/icon_page_off-590feb5838e70544d677030672fdfd00.svg") 0 -2px no-repeat;
    transform: rotate(-180deg);
}
.pagination .next.is_active {
    pointer-events: initial;
    background: url("../image/icon_page_on-e2c2d7a5cf967fbf4b06eff28cf6cac4.svg") 0 2px no-repeat;
    transform: rotate(0);
}
.pagination strong {
    color: #5C44E3;
    background: #F7F5FF;
}

.host_type.pagination {
    margin-top: 60px;
}
.host_type a {
    min-width: 18px;
    min-height: 18px;
    background-size: 18px 18px;
}
.host_type.pagination .first {
    pointer-events: none;
    background: url("../image/icon_first_off-716acf9adb61134a99d5bcd25be4eed6.svg") center 3px no-repeat;
}
.host_type.pagination .first.is_active {
    pointer-events: initial;
    background: url("../image/icon_end_on-c02394be1387eddf3dbd067c73bd6669.svg") center  5px no-repeat;
    transform: rotate(180deg);
}
.host_type.pagination .end {
    pointer-events: none;
    background: url("../image/icon_first_off-716acf9adb61134a99d5bcd25be4eed6.svg") center 5px no-repeat;
    transform: rotate(180deg);
}
.host_type.pagination .end.is_active {
    pointer-events: initial;
    background: url("../image/icon_end_on-c02394be1387eddf3dbd067c73bd6669.svg") center 2px no-repeat;
    transform: rotate(0);
}
.host_type.pagination .prev {
    pointer-events: none;
    background: url("../image/icon_page_off-590feb5838e70544d677030672fdfd00.svg") center 3px no-repeat;
    transform: rotate(0);
}
.host_type.pagination .prev.is_active{
    pointer-events: initial;
    background: url("../image/icon_page_black-158f8fc32715adb1a557009ba061d2de.svg") center -3px no-repeat;
    transform: rotate(180deg);
}
.host_type.pagination .next {
    pointer-events: none;
    background: url("../image/icon_page_off-590feb5838e70544d677030672fdfd00.svg") center -2px no-repeat;
    transform: rotate(180deg);
}
.host_type.pagination .next.is_active {
    pointer-events: initial;
    background: url("../image/icon_page_black-158f8fc32715adb1a557009ba061d2de.svg") center 2px no-repeat;
    transform: rotate(0deg);
}
.host_type.pagination strong {
    color: #000;
    background: #EFEFEF;
    border-radius: 4px;
}

.btn.edit-mode {
    background-color: white !important;
    border: 1px solid #333 !important;
    color: #333 !important;
}

.btn.disabled-gray {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #adb5bd !important;
    cursor: not-allowed !important;
}

#bank_holder[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

#bank_name[disabled], #bank_account[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

#btn_verify_account:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.bank_holder[readonly], .bank_name[disabled], .bank_account[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

/* 지도로 검색 */
.map_room {
    width: 377px;
    margin:20px 20px 0
}
.map_room .map_room_list {
    overflow-x: hidden;
    overflow-y: auto;
    height:calc(100vh - 195px);
    width:377px; 
    padding-bottom: 100px; 
}
.map_room_list a.is_active dl {
    border-radius: 6px;
    background: #f5f5f5;
}
.map_room .map_room_list > li:nth-child(1) {
    margin:0;
    padding-top:10px;
    padding-bottom: 10px;
}
.map_room .map_room_list > li:nth-child(n+2){
    margin:0;
    padding-top:10px;
    padding-bottom: 10px;
    border-top: 1px solid #DFDFDF;
}
.map_room .map_room_list li:hover {
    background-color: #F5F5F5;
}
.map_room dl {
    position: relative;
    height: 162px;
    padding: 4px 0 0 184px;
}
.map_room dt{
    position: absolute;
    top: 0;
    left: 0;
    width: 164px;
    height: 162px;
}
.map_room .room_item .room_name {
    margin-top: 0;
}
.map_area {
    width:calc(100% - 337px); 
    margin-left:0;
}
.map_detail {
    position: relative;
    margin-top: 12px;
}
.img_map {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  
    height:calc(100vh - 160px);
    border-radius: 6px;
}

.map_overlay_label { position: relative; background-color: #000; color:#fff; padding: 7px 12px; border-radius: 20px; font-weight: 500; font-size: 14px; z-index: 1; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;cursor: pointer;}
.map_overlay_label.viewed {background-color:#777; z-index:2;}
.map_overlay_label.active {background-color: #5C44E3;z-index:3;}
.map_overlay_state  { position: relative; background-color: #0DB08C; color:#fff; padding: 7px 12px; border-radius: 20px; font-weight: 500; font-size: 14px; z-index: 1; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; cursor: pointer;}

.map_list_none {text-align: center; height: calc(100vh - 380px); padding-top:50%; margin: 48px 20px 0; width:337px}
.map_list_none img {width:40px; height:40px;}
.map_list_none p {font-size:16px; line-height:24px; color:#999999; margin-top:20px}


/* 드롭다운 레이어 */
.drop_down_list {
    position: relative;
    display: flex;
    gap: 12px;
}

.drop_down .btn_drop {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #DFDFDF;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: #333;
}
.drop_down.has_applied .btn_drop {
    border-color: #000;
}
.drop_down.is_active .btn_drop:after {
    background: url("../image/icon_dropdown-1b58339606c03b8cfb6d1550f0c426f4.svg") 0 0 no-repeat;
    background-size: 14px 14px;
    transform: rotate(180deg);
}
.drop_down.is_active .btn_drop + .drop_layer {
    visibility: visible;
}
.drop_down .btn_drop span {
    display: inline-block;
    max-width: 160px;
}
.drop_down .btn_drop:after {
    display: inline-block;
    content: "";
    width: 14px;
    height: 14px;
    margin-left: 6px;
    background: url("../image/icon_dropdown-1b58339606c03b8cfb6d1550f0c426f4.svg") 0 0 no-repeat;
    background-size: 14px 14px;
}
.drop_down {
    position: relative;
}
.drop_layer {
    visibility: hidden;
    z-index: 9999;
    position: absolute;
    top: 48px;
    left: 0;
    width: 105px;
    padding: 16px 12px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.drop_layer .option_box {
    padding-bottom: 0;
}
.alert_text {
    margin-top: 10px;
    padding: 4px 0 0 15px;
    background: url("../image/icon_alert-0594711d8dc1cbb2f86d2b13c930f622.svg") 0 6px no-repeat;
    color: #999;
    font-size: 12px;
    line-height: 18px;
    border-top: 1px solid #D9D9D9;
}
.drop_down_list .btn_reset {
    position: absolute;
    top: 8px;
    right:15px
}
.btn_reset span {
    display: inline-block;
    padding-left: 24px;
    background:url("../image/icon_reset-4a8c6780f41f4a2e15c646491ee98fc0.svg") 0 0  no-repeat;
}

/* 지도 금액 표시 */
.circle {
    position: absolute;
    top: 0;
    display: inline-flex;
    padding: 8px 16px;
    border-radius: 40px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.30);
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #fff;
}
.circle.black {
    background: #222;
}
.circle.gray {
    background: #5C5C5C;
}
.circle.purple {
    background: #5C44E3;
}

.map_nav {
    z-index: 10;
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
}
.map_nav a {
    display: block;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    font-size: 0;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.map_nav .icon_target {
    margin-bottom: 12px;;
}

/* 방 목록 슬라이드 */
.roomListSwiper {
    width: 477px;
    margin-top: 646px;
    padding: 16px 50px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
}
.roomListSwiper dl {
    width: 377px;
    height: 162px;
    padding: 18px 0 0 184px;
}
.roomListSwiper dt{
    position: absolute;
    top: 0;
    left: 0;
    width: 164px;
    height: 162px;
    border-radius: 6px 0px 0px 6px;
}
.roomListSwiper .room_item .room_name {
    margin-top: 0;
}
.roomListSwiper .swiper-button-next:after,
.roomListSwiper .swiper-button-prev:after {
    font-size: 24px;
    color: #999;
}
.title_difficult_cert {
    margin:0;
    padding-left: 26px;
    color: #000;
    font-size: 13px; font-weight: 400; line-height: 19px;
    text-decoration-line: underline;
    background: url("../image/icon_alert_black-4df465d5bd948a9b6e44fc5e5ecd0e74.svg") 0 0 no-repeat;
    cursor: pointer;
}

.title_cert_complete {
    margin:0;
    padding-left: 26px;
    color: #4263EB;
    font-size: 13px; font-weight: 400; line-height: 19px;
    background: url("../image/icon_alert_blue-7d1712498033ff83102c378e66145c4a.svg") 0 0 no-repeat;
}

.title_cert_complete span {
    color:#4263EB;
    font-size:13px;
    text-decoration: underline;
    cursor: pointer;
}
/* footer */
footer {
    width: 100%;
    min-width: 1084px;
    margin-top: 86px;
    padding: 30px 0 40px;
    background:#F8F8F8;
}
footer * {
    color: #777;
}
footer .inner {
    width: 1084px;
    margin: 0 auto;
}
.btn_company {
    display: flex;
    padding-right: 18px;
}
footer .inner .flex .footer_left,
footer .inner .flex .footer_right {
    width: 50%;
}
/*
.btn_company:after {
    display: block;
    content:"";
    width: 18px;
    height: 18px;
    background: url("/images/webpc/icon_toggle-da5846c8772b71f11fd1d27db8b62e91.svg") 100% 2px no-repeat;
}
.btn_company.is_active:after {
    background-position: 100% -2px;
    transform: rotate(-180deg);
}
*/

.company_info {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 19px;
}

.company_info p {
    font-size:13px;
}

.style_bar {
    font-size: 0;
    line-height: 0;
}
.style_bar span {
    padding-right: 8px;
    color: #777;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
}
.style_bar + .style_bar {
    margin-top: 16px;
}
.style_bar a {
    font-size: 13px;
    line-height: 19px;
    color: #777;
}
.style_bar a + a:before,
.style_bar a.bar:before {
    display: inline-block;
    content: "";
    position: relative;
    top: 1px;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background: #DFDFDF;
}
.style_bar a.bar:before{
    margin-left:0;
}
.event_none {
    pointer-events: none;
}
.under_line, .under_line:hover {
    text-decoration: underline;
}
.footer_text {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #E8E8E8;
    font-size: 12px;
    line-height: 18px;
}
.sns_list {
    display: flex;
    margin-top: 16px;
}
.sns_list a {
    width: 24px;
    height: 24px;
    margin-right: 16px;
}

/* popup */
.popup {
    display:none;
    z-index:1;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
}
.popup_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 492px;
    padding: 46px 32px;
    background: #fff;
    border-radius: 6px;
}
.popup_inner.type_2 {
    padding: 40px 24px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.popup_contents {
    position: relative;
}
.btn_x {
    position: absolute;
    top: -36px;
    right: -22px;
}

.btn_purple {
    width: 100%;
    padding: 13px 0;
    color: #fff;
    background: #5C44E3;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.btn_black {
    width: 100%;
    padding: 13px 0;
    color: #fff;
    background: #000;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.btn_red {
    width: 100%;
    padding: 13px 0;
    color: #fff;
    background: #EF233C;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.btn_gray {
    width: 100%;
    padding: 13px 0;
    color: #000;
    background: #EFEFEF;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.btn_line_black {
    width: 100%;
    height: 48px;
    color: #000;
    border: 1px solid #000;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.btn_line_gray {
    width: 100%;
    height: 48px;
    color: #777;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.bottom_btn {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    gap: 8px;
}

    /* popup - 계약시작하기 */
.pop_title {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    border-bottom: 2px solid #5C5C5C;
}
.popup_contract .flex {
    align-items: center;
}
.popup_contract .flex strong {
    font-size: 16px;
    line-height: 24px;
}
.popup_contract .flex p {
    line-height: 21px;
    color: #333;
}
.popup_contract .title {
    margin: 20px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.contract_list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.contract_list span {
    color: #5C5C5C;
    line-height: 18px;
}
.contract_list p {
    color: #333;
    line-height: 18px;
}
.popup_contract .border {
    padding-top: 20px;
    margin-bottom: 12px;
    border-top: 1px dashed #DFDFDF;
}
.popup_contract .flex.border span{
    color: #5C5C5C;
    line-height: 18px;
}
.popup_contract .flex.border p{
    color: #333;
    line-height: 18px;
}
.popup_contract .total {
    margin-top: 12px;
}
.popup_contract .total span{
    font-weight: 700;
    line-height: 24px;
}
.popup_contract .total p{
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #EF233C;
}
.alert_red {
    margin-top: 20px;
    background: #FEF6F7;
    padding: 16px;
}
.alert_red p {
    padding-left: 24px;
    background:url("../image/icon_alert_red-caa03d0d2abfccd9af51460a98f02a94.svg") 0 0 no-repeat;
    font-size: 13px;
    line-height: 19px;
    color: #EF233C;
}
/* 달력 */
.calendar_nav {
    display:flex;
    align-items:center;
    justify-content: center;
    margin-bottom:20px;
}
.calendar_nav button {
    width:24px;
    height:24px;
}
.calendar_nav strong {
    padding:0 24px;
    font-size:20px;
    line-height:28px;
}
.calendar_table {
    width:100%;
    margin-top:16px;
    text-align:center;
    border-collapse: collapse
}
.calendar_table th {
    padding:8px 13px;
    color:#999;
    font-size:16px;
    line-height:24px;
    font-weight: 400;

}
.calendar_table td a{
    position:relative;
    display: flex;
    width:40px;
    height:40px;
    margin:0 auto;
    align-items: center;
    justify-content: center;
    font-size:15px;
    line-height:22px;
    color:#000;
}
.calendar_table .one_day a,
.calendar_table .ing.start a {
    background:#000;
    border-radius: 50%;
    color:#fff;
    font-weight:700;
}
.calendar_table .ing.start {
    background-image: linear-gradient(to right, #fff 50%, #EFEFEF 50%)
}
.calendar_table .ing {
    background:#EFEFEF;
}
.calendar_table .ing.last {
    background-image: linear-gradient(to right, #EFEFEF 50%, #fff 50%)
}
.calendar_table .ing.last a{
    background:#000;
    border-radius: 50%;
    color:#fff;
}
.calendar_table .booking {
    background:#EDEAFF;
}
.calendar_table .booking.start {
    border-radius:100px 0 0 100px;
}
.calendar_table .booking.last {
    border-radius:0 100px 100px 0;
}
.calendar_table .pass {
    color:#B7B7B7;
}
.calendar_table .disable {
    text-decoration: line-through;
    text-decoration-color:#EF233C;
}
.calendar_table .disable a {
    color:#B7B7B7;
}
.calendar_table .today a:after {
    position:absolute;
    left:calc(50% - 2px);
    bottom:5px;
    display:block;
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:#000;
}
.calendar_table .today.one_day a:after {
    background: #fff;
}
.calendar_table .past a {
    color: #B7B7B7;
    cursor: default;
}
.guide_text {
    text-align: center;
    padding: 10px 0;
    font-weight: 700;
    color: #5C44E3;
    background: #F7F5FF;
    border-radius: 4px;
}

/* popup - 기간선택 */
.popup_period .title {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}
.select_period {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    gap:10px;
    width: 328px;
    margin:20px 0 14px;
}
.select_period li {
    width:calc(33.3% - 7px);
}
.select_period li a[disabled] {
    background-color: #EFEFEF;
    cursor: default;
    color: #999;
    opacity:0.6;
}
.select_period a {
    display: block;
    width:100%;
    padding:6px 0;
    border:1px solid #DFDFDF;
    border-radius:4px;
    text-align:center;
}
.select_period a:focus {
    border:1px solid #000;
}
.select_period span {
    font-size:12px;
    line-height:18px;
    color:#777;
}
.select_period strong {
    display:block;
    color:#000;
}

/* QR */
.popup_qr .title {
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}
.popup_qr .img_qr {
    width: 200px;
    height: 200px;
    margin: 24px auto;
    background: #D9D9D9;
}
.popup_qr .img_qr img {
    background: #fff;
}
.qr_text {
    padding:12px;
    border-radius: 6px;
    background: #F8F8F8;
}
.qr_text li {
    color: #333;
}
.qr_text li span {
    padding-right: 4px;
    font-weight: 500;
    letter-spacing: -1px;
}
.qr_text li:nth-child(n+2) {
    margin-top: 6px;
}

/* popup - 계약을 거절하는 이유를 알려주세요 */
.pop_title_text {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.radio_group {
    margin-top: 36px;
}
.radio_group p {
    margin: 12px 0;
}
.text_box.length_100 textarea {
    width: 100%;
    height: 69px;
}
.text_box .text_counter {
    margin: 0;
}

/* popup - 퇴실 확인 안내드립니다 */
.leave_text {
    margin-top: 10px;
    color: #5C5C5C;
    font-size: 15px;
}
.popup_contents .notice_box {
    margin-top: 24px;
}
.popup_contents .notice_box .title {
    background-position: 0 2px;
}

/* popup - 계약 취소 관련하여 안내 드립니다 */
.alert_red.bg_none {
    margin-top: 16px;
    padding:0;
    background: #fff;
    color: #EF233C;;
}
.alert_red.bg_none p {
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}
.popup_contents .notice_text li{
    margin-top: 8px;
    font-size: 13px;
    color: #777;
    line-height: 19px;
}
.notice_box + .font_777 {
    margin-top: 8px;
}

/* popup - 계약 상세 현황 팝업 */
.popup_inner.type_2 .btn_x {
    top: -26px;
    right: -12px;
}
.popup_contract_detail {
    max-height: 600px;
    padding: 0 10px;
}
.popup_contract_detail .detail_list {
    margin-top: 0;
    padding: 20px 0 20px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #dfdfdf;
}
.popup_contract_detail .total_pay {
    margin-bottom: 12px;
}
.popup_contract_detail .total_pay span{
    color: #000;
}
.detail_address {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #DFDFDF;
}

.detail_address strong {
    font-size: 20px;
    line-height: 28px;
}
.detail_address p {
    color: #5C5C5C;
    line-height: 21px;
}
.contract_info strong {
    font-size: 20px;
    line-height: 28px;
}
.contract_info ul {
    margin-top: 20px;
    padding-bottom: 26px;
    border-bottom: 1px solid #dfdfdf;
}
.contract_info li {
    margin-bottom: 8px;
}
.contract_info .flex span {
    color: #5C5C5C;
    font-size: 15px;
}
.contract_info .flex p {
    color: #333;
    font-size: 15px;
}

/* popup - 대금 수령 정보 */
.price_info .title {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.price_info .border_line {
    padding-top: 12px;
    border-top: 1px solid #dfdfdf;
}
.price_info li {
    margin-bottom: 12px;
}
.price_info .flex span {
    color: #5c5c5c;
    line-height: 18px;
}
.price_info .flex p {
    color: #333;
    line-height: 18px;
}
.price_info .total_price {
    padding: 20px 0;
}
.price_info .font_red {
    font-size: 18px;
}
.blue_box {
    margin-top: 20px;
    padding: 10px 0px;
    color: #4263EB;
    font-size: 13px;
    line-height: 18px;
    border-radius: 4px;
    background: #EDF2FF;
    text-align: center;
}
.price_info .flex span.font_777 {
    padding-left: 20px;
}
.price_info li.font_777 {
    font-size: 13px;
    line-height: 18px;
}
.price_info li.font_777 .font_red{
    font-size: 13px;
    line-height: 18px;
}

.cert_info_box {
    display: flex;
    padding: 16px 20px;
    margin-bottom: 24px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #F8F8F8;
}
.cert_alert p {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cert_info_box ul {
    padding-left: 24px; !important;
}
.cert_info_box li {
    list-style-type: disc !important;
}
.cert_info_box span {
    cursor: pointer;
    text-decoration: underline;
}
.cert_info_title {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: -0.1px;
}
.cert_info_title.red_title {
    color: #EF233C;
}
.cert_info_title.blue_title {
    color: #5C44E3;
}
span.btn_pass_reg {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 13px;
    font-weight: 500;
    line-height: 19px; /* 146.154% */
    letter-spacing: -0.1px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    cursor: pointer;
}
span.btn_pass_reg img {
    width: 14px;
}
p.btn_pass_reg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 8px 10px;
    border-radius: 100px;
    border: 1px solid #D7D7D7;
    background: #FFF;
    cursor: pointer;
}
p.btn_pass_reg img {
    width: 16px;
}
.cert_info_title img {
    width: 18px;
    margin-right: 6px;
}
.cert_tip {
    margin:0;
    padding-left: 26px;
    color: #000;
    font-size: 13px; font-weight: 400; line-height: 19px;
    background: url("../image/icon_alert_black-4df465d5bd948a9b6e44fc5e5ecd0e74.svg") 0 0 no-repeat;
}


/* 메인 */
.main {
    height: 314px;
    border:none;
    background: url("../image/bg_main-3a22b4942d3ae6dd421cc2974a12994e.svg") 0 0 repeat-x;
}
.main + .content {
    padding-top: 130px;
}
.main .btn.white {
    border-color: #dfdfdf;
    background: transparent;
}
.main .btn {
    color: #dfdfdf;
}
.main .search_area {
    margin-top: 83px;
}
.main .search_area .main_text {
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
}
.main .search_link {
    margin-top: 17px;
    text-align: center;
}
.main .search_link a {
    color: #DFDFDF;
}
.main .search_link a + a{
    margin-right: 0;
}
.main .search_link a.is_active {
    color: #f8f8f8;
    border-color: #f8f8f8;
}
.main .search_input {
    margin-top: 35px;
    border: none;
    background: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
.main .search_area {
    margin-bottom: 0;
}
.main_group, .bannerSwiper {
    width: 1084px;
    margin: 0 auto;
}
.main_group .title {
    display: block;
    font-size: 26px;
    line-height: 33px;
    text-align: center;
}

.main_group .sub_text {
    margin-top: 4px;
    font-size: 16px;
    line-height: 24px;
    color: #777;
    text-align: center;
}
.main_group .result_room a {
    margin-top: 0;
}
.main_group  .result_room {
    margin-top: 0;
}
.btn_all {
    margin:5px 0 10px;
    text-align: right;
}
.btn_all a {
    padding-right: 18px;
    color: #5C5C5C;
    background: url("../image/icon_arrow-5ce1fc1f1d5ebd86da7015631880d30a.svg") 100% 1px no-repeat;
}

.bannerSwiper {
    margin-top: 100px;
}
.bannerSwiper .swiper-pagination-bullet-active {
    background: #f8f8f8;
}
.bannerSwiper .swiper-pagination-bullet {
    background: #f5f5f5;
}
/* 하단 배너 */
.card_type {
    display: flex;
    justify-content: space-between;
    width: 1084px;
    margin: 120px auto 0;
    gap: 20px;
}
.card_type li {
    width: 348px;
    height: 130px;
    padding: 24px 105px 24px 20px;
    border-radius: 6px;
}
.card_type li p {
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 25px;
    color: #fff;
}
.card_type p span{
    display: block;
    color: #fff;
}
.card_type li a {
    padding-right: 16px;
    color: #fff;
    background: url("../image/icon_arrow_white-421c20dbb2308acf25551696ad3d1cf9.svg") 100% center no-repeat
}
.card_green {
    background: #2BBCA6 url("../image/icon_contract-d09ece3d9178d33f03f2a7ddbe85355c.svg") 92% center no-repeat;
}
.card_blue {
    background: #748FFF url("../image/icon_faq-420a4f76c57a7e9be4324f9c52469dce.svg") 92% center no-repeat;
}
.card_purple {
    background: #7D6BF5 url("../image/icon_host-c77f7082e5b1dac22270042358cf4ec2.svg") 92% center no-repeat;
}

/* 검색 레이어 */
.search_layer {
    z-index: 10;
    position: absolute;
    top: 179px;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 746px;
    height: 360px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
}

.search_layer .left_area {
    width: 50%;
    border-right: 1px solid #d9d9d9;
}
.layer_title {
    display: block;
    margin: 24px 40px 0 ;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
}
.btn_group {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    margin: 0 45px 0 40px;
    gap: 8px;
}
.btn_group button {
    padding: 7px 16px;
    border-radius: 4px;
    background: #F8F8F8;
}
.btn_group a {
    padding: 7px 16px;
    border-radius: 4px;
    background: #F8F8F8;
}
.search_layer .right_area {
    width: 50%;
}
.layer_room_list {
    height: 296px;
    margin: 0 20px 0 40px;
}
.layer_room_list a {
    display: block;
    width: 280px;
}
.layer_room_list li:nth-child(n+2){
    margin-top: 20px;
}
.layer_room_list dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.layer_room_list dt {
    overflow: hidden;
    width: 70px;
    height: 70px;
    border-radius: 6px;
}
.layer_room_list dd {
    width: 197px;
}
.layer_room_list dd strong {
    display: block;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
}
.layer_room_list dd p {
    color: #5C5C5C;
    line-height: 19px;
}

/* 스크롤 */
.scrollbar {
    overflow-x: hidden;
    overflow-y: auto;
}
.scrollbar::-webkit-scrollbar {
    width: 4px;
}
.scrollbar::-webkit-scrollbar-thumb {
    height: 30%;
    background: #E8E8E8;
    border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-track {
    background: #fff;
}
/* 실시간 후기 */
.reviewSwiper .swiper-button-next:after,
.reviewSwiper .swiper-button-prev:after {
    font-size: 24px;
    color: #999;
}
.reviewSwiper .swiper-pagination-bullet {
    background: #E8E8E8;
    opacity: 1;
}
.reviewSwiper .swiper-pagination-bullet-active {
    background: #5C44E3;
}
.reviewSwiper .swiper-horizontal>.swiper-pagination-bullets,
.reviewSwiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.reviewSwiper .swiper-pagination-custom,
.reviewSwiper .swiper-pagination-fraction {
    bottom: -4px;
}
.reviewSwiper{
    width:1084px;
    height: 328px;
    padding: 0 0 30px;
}
.reviewSwiper .swiper-slide{
    height: calc((100% - 20px) / 2);
}
.reviewSwiper .swiper-slide {
    /*margin:0 20px*/
}

.real_review_area {
    margin-top: 100px;
    padding: 40px 0;
    background: #F8F8F8;
}
.real_review_area .title {
    display: block;
    margin: 16px 0 24px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 33px;
    color: #5C44E3;
    border-bottom: 1px solid #CCC;
}
.real_review_area .inner {
    width: 1084px;
    margin: 0 auto;
}
.bubble_text {
    position: relative;
    display: block;
    width: 213px;
    margin: 0 auto;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 21px;
    color: #5C44E3;
    border-radius: 6px;
    background: #EDEAFF;
    text-align: center;
}
.bubble_text:after {
    position: absolute;
    bottom:-9px;
    left:50%;
    transform: translateX(-50%);
    display: inline-block;
    content:"";
    width: 12px;
    height: 10px;
    background: url("../image/icon_arrow_purple-5e6d4d780fb80c1a6e6ef2e7d06f8aab.svg") 0 0 no-repeat;
}
.room_review {
    position: relative;
    width: 348px;
    height: 129px;
    padding: 24px 16px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
}
.room_review dl {
    display: flex;
}
.room_review dt {
    overflow: hidden;
    width: 80px;
    height: 80px;
    margin-right: 14px;
    border-radius: 6px;
}
.room_review dd {
    width: 209px;
}
.room_review dd span {
    display: block;
    font-size: 13px;
    line-height: 19px;
    color: #777;
}
.room_review dd strong {
    display: block;
    font-size: 15px;
    line-height: 22px;
}
.room_review dd p {
    font-size: 13px;
    line-height: 19px;
    color: #333;
}
.review_score {
    position: absolute;
    top: 24px;
    right: 24px;
}
.review_score p {
    padding-left: 16px;
    background: url("../image/icon_star_on-69a292270caf1782d581ef0185004b17.svg") 0 2px no-repeat;
}

.data_none {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 64px);
    color: #999;
    font-size: 15px;
    line-height: 22px;
}
.calendar_layer {
    height: 493px;
}
.calendar_layer .left_area {
    padding: 24px 22px;
}
.calendar_layer .right_area {
    padding: 24px;
}
.calendar_layer .select_period a {
    padding: 3px 0;
}
.calendar_layer .guide {
    background: #F8F8F8;
    margin: 0 -24px;
    padding: 11px 22px;
}
.calendar_layer .guide p {
    margin-bottom: 0;
    padding-left: 21px;
    background: url("../image/icon_alert_gray-bfcbc53d61ba129aec2fa9e42468f62e.svg") 0 5px no-repeat;
    text-align: left;
    color: #777;
}
.guide .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
}
.dot_list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 16px;
    color: #777;
    font-size: 12px;
    line-height: 19px;
}
.dot_list li:before {
    position: absolute;
    top: 8px;
    left: 6px;
    display: inline-block;
    content:"";
    width: 2px;
    height: 2px;
    background: #777;
    border-radius: 50%;
}

.select_area {
    display: flex;
    align-items: flex-start;
    height: 296px;
    margin: 0 20px;
}
.select_area  ul {
    padding: 12px 16px;
    border-radius: 4px;
    background: #F8F8F8;
    overflow-y: auto; 
    height:280px
}
.select_area li:nth-child(n+2){
    margin-top: 16px;
}
.select_step1 {
    width: 149px;
    margin-right: 20px;
    overflow: hidden;
}
.select_step1 a {
    display: block;
    font-size: 15px;
    line-height: 22px;
    background: url("../image/icon_right_black-197253c450c96a93c3d1edf2d69a469f.svg") 100% center no-repeat;
}
.select_step1 a.is_active {
    color: #5C44E3;
    background-image: url("../image/icon_right_purple-363ab6ea4f4b30f5e656172fbdbc3f6f.svg");
}
.select_step1 a:hover {
    color:#5C44E3
}
.select_step2 {
    width: 140px;
    overflow: hidden;
}
.select_step2 a.is_active {
    color: #5C44E3;
}
.select_step2 button:hover {
    color:#5C44E3
}


@keyframes circleZoomInOut{
    0%{
        opacity:0.8;
        width:0.5em; height:0.5em;
        margin:-0.25em;
        border-width:0.3rem;
    }
    50%{
        opacity:0.1;
        width:7.5em; height:7.5em;
        margin:-3.7em;
        border-width:0.01rem;
    }
    100%{
        opacity:0.8;
        width:0.5em; height:0.5em;
        margin:-0.25em;
        border-width:0.3rem;
    }
}

.now_over_circle {
    position: relative;
    display: block;
    background-color: #5C44E3;
    border-radius: 100%;
    margin: 0 auto 6px;
    width: 44px;
    height: 44px;
    animation:circleZoomInOut 2s ease-out;
    animation-iteration-count: infinite;
}

.search_condition {
    padding: 12px 0 0px 50px;
    background: #fff url(../image/icon-explorer-e3ac5e4554555e9486a91f5d6b8722c4.svg) 20px 50% no-repeat;
    background-size: 16px 16px;
    border-radius: 2px;
    width:200px;
}

.search_condition .search_keyword {
    display:block;
    font-size: 14px;
    color: #000;
    line-height: 17px;
    padding: 3px 0;
    width: 100%;
}

.search_condition .search_schedule {
    font-size: 12px;
    color: #777777;
    line-height: 17px;
    cursor: pointer;
    width: 200px;
}


/* 호스트 */

.gnb ul {
    display: flex;
    align-items: center;
    gap: 20px;
}
.gnb li a {
    padding: 6px 12px;
}
.gnb .new a {
    padding-right: 20px;
    background: url("../image/icon_new-cdc439b5fcee0509fde11c61f214ea4c.svg") 98% center no-repeat;
}
.gnb .is_active a {
    color: #5C44E3;
}

    /* 로그인 */
.width_348 {
    width: 348px !important;
    margin: 0 auto;
}
.title_center {
    margin-bottom: 48px;
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
}
.title_left {
    margin-bottom: 32px;
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
}
.input_box label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 19px;
    color: #777;
}
.input_box div + div {
    margin-top: 20px;
}
.login_area .flex {
    margin-top: 12px;
}

.error input {
    border-color: #EF233C;
}
.error_text {
    margin-top: 6px;
    font-size: 12px;
    color: #EF233C;
    line-height: 18px;
}

.login_area .tab_menu {
    min-height: 426px;
}
/* tab */
.tab_menu .tab {
    display: flex;
}
.tab_menu .tab li {
    flex: 1;
    border-bottom: 1px solid #dfdfdf;
}
.tab_menu .tab li.is_active {
    border-bottom: 2px solid #5C44E3;
}
.tab_menu .tab li a  {
    padding: 10px 0;
    display: block;
    text-align: center;
    color: #333;
    font-size: 18px;
    line-height: 26px;
}
.tab_menu .tab li.is_active a  {
    color: #5C44E3;
    font-weight: 700;
}
.tab_menu .tab_cont {
    display: none;
    margin-top: 48px;
}
.tab_menu .tab_cont.is_active {
    display: block;
}
.tab_menu .tab_cont .password_text {
    margin: 12px 0 60px;
    text-align: center;
    font-size: 15px;
    line-height: 22px;
    color: #5C5C5C;
}

/* 회원가입 */
.width_624 {
    width: 624px;
    margin: 0 auto;
}
.join_box {
    width: 268px;
    padding: 24px;
    border-radius: 6px;
    border: 1px solid #5C5C5C;
}
.join_box .title {
    display: flex;
    align-items: center;
    height: 76px;
    margin-bottom: 20px;
    padding: 0 0 20px 72px;
    background-size: 56px 56px;
    border-bottom: 1px solid #dfdfdf;
    font-size: 17px;
    font-weight: 700;
    line-height: 28px;
}
.join_box:hover {
    background: #F5F5F5;
}
.join_box .title.icon_1 {
    background: url("../image/icon_home_search-d5eee8e2063c49491e9df377b5de5fce.svg") 0 0 no-repeat;
}
.join_box .title.icon_2 {
    background: url("../image/icon_home_cash-9f1e996aaf4c1bc4fed80f0c0f350e3f.svg") 0 0 no-repeat;
}
.join_box ul {
    margin-bottom: 20px;
}
.join_box li {
    color: #333;
    line-height: 24px;
}
.join_box li:nth-child(n+2) {
    margin-top: 24px;
}
.join_box li p {
    margin-top: 6px;
    color: #5C5C5C;
    line-height: 21px;
}

/* 이용약관 */
.agree_list .agree_item {
    position: relative;
}
.agree_list .agree_item * {
    color: #999;
}
.agree_list .agree_item:nth-child(n+2) {
    margin-top: 23px;
}
.agree_list .agree_item:last-child {
    margin-bottom: 23px;
}
.agree_list .agree_item a {
    position: absolute;
    top: 0;
    right: 0;
}
.agree_list .border_line {
    padding-top: 22px;
    border-top: 1px solid #EFEFEF;
}
.agree_list .agree_item.border_line a {
    top: 22px;
}

/* 회원정보 입력 */
.width_451 {
    width: 451px;
    margin: 0 auto;
}
.join_input .join_item:nth-child(n+2){
    margin-top: 24px;
}
.join_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.join_item label {
    width: 103px;
    color: #777
}
.join_item label span {
    font-size: 12px;
    line-height: 18px;
    color: #b7b7b7;
}
.join_item input {
    width: 348px;
}
.join_item .btn.purple {
    width: 100px;
    margin-left: 12px;
}

.host_picture {
    position: relative;
    width: 100px;
}
.join_input .title {
    margin-bottom: 17px;
    font-size: 13px;
    line-height: 19px;
    color: #777;
}
.join_input .title span{
    font-size: 12px;
    line-height: 18px;
    color: #B7B7B7;
}
.profile_img {
    overflow: hidden;
    /*position: relative;*/
    width: 80px;
    height: 80px;
    background: url("../image/img_profile-e562db3a6d781a8597887b045efb9b28.svg") 0 0 no-repeat;
    background-size: 80px 80px;
    border-radius: 50%;
}
.profile_img a {
    position: absolute;
    top: 38px;
    right:20px;
    display: block;
    width: 26px;
    height: 26px;
}
.host_text {
    width: 301px;
}
.text_box {
    position: relative;
    height: 130px;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #DFDFDF;
}
.text_box.length_30 textarea  {
    display: block;
    width: 100%;
    height: 79px;
}
.text_box.length_200 textarea  {
    display: block;
    width: 860px;
    height: 83px;
}
.text_counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    color: #999;
}
.notice_box {
    margin-top: 20px;
    padding: 16px;
    border-radius: 6px;
    background: #F8F8F8;
}
.notice_box .title {
    margin-bottom: 8px;
    padding-left: 26px;
    color: #000;
    font-weight: 700;
    background: url("../image/icon_alert_black-4df465d5bd948a9b6e44fc5e5ecd0e74.svg") 0 0 no-repeat;
}
.notice_box .notice_text {
    color: #777;
    font-size: 13px;
    line-height: 19px;
}

/* 방관리 */
.host_room{
    width: 698px;
    margin: 0 auto;
}
.host_room .flex .text {
    font-size: 22px;
    line-height: 38px;
}
.host_room .flex .btn.medium {
    width: 256px;
}
.merit_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-top: 40px;
}
.merit_content li {
    width: 338px;
    padding: 24px 24px 24px 100px;
    border-radius: 6px;
    border: 1px solid #E8E8E8;
    background-position: 24px center;
    background-repeat: no-repeat;
}
.merit_content li strong {
    font-size: 16px;
    line-height: 24px;
}
.merit_content li strong span {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color:#5C44E3
}
.merit_content li p {
    margin-top: 4px;
    color: #5C5C5C;
    line-height: 21px;
}
.merit_content .icon_01 {
    background-image: url("../image/icon_host_01-62990984dd2d6ff644916ec18babc6c3.svg");
}
.merit_content .icon_02 {
    background-image: url("../image/icon_host_02-884570e77ea495f0c40c654bfdb0960d.svg");
}
.merit_content .icon_03 {
    background-size:48px;
    background-image: url("../image/icon_host_03-8e836206e7eb6545e49a961a676f7131.svg");
}
.merit_content .icon_04 {
    background-image: url("../image/icon_host_04-d997306765b20a52547d07c26dde16f1.svg");
}
.merit_content .icon_05 {
    background-size:48px;
    background-image: url("../image/icon_host_05-11be64a77532e1a83bedb68416812f88.svg");
}
.merit_content .icon_06 {
    background-size:48px;
    background-image: url("../image/icon_host_06-53da709fd2a598e8b5a1fe5d84484143.svg");
}
.merit_content .icon_07 {
    background-size:48px;
    background-image: url("../image/icon_host_07-2b1b38e814053c28b077ed1258082ade.svg");
}
/* 자주 묻는 질문 */
.faq_area {}
.faq_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 16px;
    border-bottom: 1px solid #EFEFEF;
}
.faq_top .title {
    font-size: 20px;
    line-height: 33px;
}
.faq_top  .faq_more {
    font-weight: 500;
    line-height: 21px;
    color: #777;
}
.faq_list li {
    /*padding: 16px 0;*/
    border-bottom: 1px solid #EFEFEF;
}
.faq_list a {
    display: block;
    padding: 20px 16px 20px 0;
    background: url("../image/icon_dropdown-1b58339606c03b8cfb6d1550f0c426f4.svg") 96% center no-repeat;
    background-size: 18px 18px;
}
.faq_list .is_active a {
    background: url("../image/icon_dropdown_close-3171a6fb470329dbd07893dfab21ad02.svg") 96% center no-repeat;
    background-size: 18px 18px;
}
.faq_list a p {
    font-size: 15px;
}
.faq_content {
    display: none;
    /*margin-top: 16px;*/
    padding: 16px 20px;
    color: #5C5C5C;
    background: #F8F8F8;
}
.faq_list .is_active {
    padding-bottom: 0;
}
.faq_list .is_active .faq_content {
    display: block;
}

/* 방 목록  */
.host_room_list .title_left {
    margin-bottom: 20px;
}
.list_option {
    margin-bottom: 12px;
    padding-bottom: 52px;
    border-bottom: 1px solid #5C5C5C;
}
.list_option > button {
    width: 256px;
}
.list_search .selectbox + .ui-selectmenu-button.ui-button {
    width: 135px;
    height: 40px;
}
.list_search .selectbox + .ui-selectmenu-button.ui-button .ui-selectmenu-text {
    margin-right: 20px;
}
.list_search .selectbox + .ui-selectmenu-button.ui-button .ui-icon {
    top: 6px;
}
.list_search {
    display: flex;
}
.list_search .keyword_input {
    height: 40px;
    margin: 0 10px 0 20px;
    padding: 9px 20px;
    border-radius: 6px 0px 0px 6px;
    border: 1px solid #DFDFDF;
    background: #FFF;
}
.list_search .keyword_input span:after {
    display: none;
}
.list_search button {
    width: 74px;
    height: 40px;
}

.list_item li {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #dfdfdf;
}

.room_item[filled-status=true] {
    cursor: pointer;
}
.list_item .room_item {
    display: flex;
    width: 668px;
}
.list_item .room_item dt{
    position: relative;
    width: 80px;
    height: 80px;
    margin-right: 20px;
}
.list_item .room_item dd {
    width: 548px;
}
.status_text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 4px 0;
    background: rgba(0, 0, 0, 0.80);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}
.status_text.full {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.list_item .room_item .room_name {
    margin-top: 0;
}
.list_item .room_item .room_address {
    margin: 6px 0;
}
.list_item .room_item .room_pay * {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: #000;
}
.disable_preview {
    color: #5C5C5C;
    pointer-events: none;
    background: none;
}
.enable_preview {
    padding-right: 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    background: url(../image/icon_right_black-197253c450c96a93c3d1edf2d69a469f.svg) 100% center no-repeat;
    background-size: 14px 14px;
}
.list_button {
    display: flex;
    justify-content: center;
    width: 211px;
}
.list_button button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 147px;
    height: 40px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
.btn_continue {
    border-color: #5C44E3;
    color: #5C44E3;
    background: #fff;
}
.btn_request {
    border-color: #000;
    color: #fff;
    background: #000;
}
.btn_schedule {
    border-color: #000;
    color: #000;
    background: #fff;
}
.list_item .drop_down {
    margin: 0 auto;
}
.list_item .drop_down .btn_drop {
    width: 107px;
}
.list_item .drop_down .btn_drop:after{
    width: 24px;
    height: 24px;
    margin-left: 20px;
    background-image: url("../image/icon_selectbox-0df47dcffb557dbc6c19dce5dc6ccd9a.svg");
    background-size: 24px 24px;
}
.list_item .drop_down .drop_layer {
    width: 131px;
    padding: 0;
}
.drop_layer .btn_more {
    padding: 6px 0;
}
.drop_layer .btn_more li {
    padding: 8px 12px;
    border: none;
}
.drop_layer .btn_more li:hover {
    background: #F8F8F8;
}
.drop_layer .btn_more li a {
    padding-left: 28px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0 center;
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
}
.icon_more_modify a {
    background-image: url("../image/icon_modify-95f2c36de5b40ffffecf0b46180b4290.svg");
}
.icon_more_schedule a {
    background-image: url("https://33m2.co.kr/images/webpc/icon_schedule.svg");
}
.icon_more_copy a {
    background-image: url("../image/icon_copy-299eb439d599177f36e6528d515185fb.svg");
}
.icon_more_private a {
    background-image: url("../image/icon_private-d70105acbbc83ab6f0db7fb18b98f121.svg");
}
.icon_more_public a {
    background-image: url("../image/icon_public-6f33cbaafb7ec8a707323a0d6f07cc90.svg");
}
.icon_more_del a {
    background-image: url("../image/icon_del-990641c4b47662788fbaa7ffcfb64e59.svg");
}
.host_room_list .data_none, .host_contract_list .data_none {
    margin-bottom: 200px;
    padding: 200px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #999;
    border-bottom: 1px solid #dfdfdf;
}

/* 일정관리 */
.calendar_title {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
}
.calendar_title span {
    color:#5C44E3; 
    font-weight:700; 
    font-size:28px;
}
.calendar_sub_title {
    font-size:16px; 
    line-height:24px;
    color:#5C5C5C;
    padding-bottom:35px;
    border-bottom: 1px solid #5C5C5C;
}
.host_room_list .calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.month_title {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
}
.month_item {
    width: 328px;
    margin-bottom: 60px;
}
.bottom_sticky {
    position: sticky;
    bottom: 0;
    background: #FFF;
    box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.bottom_sticky .inner {
    width: 1084px;
    margin: 0 auto;
    padding: 24px 0 60px;
    text-align: center;
}
.bottom_sticky button {
    width: 256px ;
}
.bottom_sticky .gray {
    margin-right: 20px;
    background: #efefef;
    border-color: #efefef;
}

/* 방등록 */
.host_room_reg .title_left {
    margin-bottom: 24px;
}
.location_nav a {
    display: inline-block;
    margin-right: 8px;
    font-size: 15px;
    line-height: 22px;
    color: #999;
}
.location_nav a.is_active {
    pointer-events: none;
    color: #5C44E3;
    font-weight: 700;
}
.location_nav a:nth-child(n+2):before{
    position: relative;
    top: 4px;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background: url("../image/icon_page_off-590feb5838e70544d677030672fdfd00.svg") 0 0 no-repeat;
    transform: rotate(-180deg);
}
.white_box {
    position: relative;
    padding: 32px 60px;
    border-radius: 6px;
    background: #FFF;
}
.white_box + .white_box {
    margin-top: 20px;
}
.room_tip {
    position: absolute;
    top: 20px;
    right: 20px;
    padding-right: 14px;
    background: url("../image/icon_arrow_5c5c5c-6ec7a2c7e01720a17c916805c1f3ab67.svg") 100% 2px no-repeat;
    color: #5C5C5C;
    font-weight: 500;
    line-height: 21px;
}
.room_input {
    display: flex;
    align-items: center;
}
.room_input + .room_input {
    margin-top: 40px;
}
.room_input label, .room_input .label {
    width: 104px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}
.room_input .label em, .room_input label em {
    color: #B7B7B7;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.room_input .style_border {
    width: 368px;
}
.room_input .input_group {
    width: 368px;
}
.room_input .input_group .medium{
    width: 146px;
}
.room_input .input_group .style_border {
    margin-top: 16px;
}
.alert_purple {
    margin-top: 6px;
    padding-left: 20px;
    background: url("../image/icon_alert_purple-cbd0843e3aa3a2bc5d43a32b260ee10c.svg") 0 0 no-repeat;
    color: #5C44E3;
    font-size: 13px;
    line-height: 18px;
}
.alert_black {
    margin:20px 0 6px;
}
.alert_black p {
    padding-left: 24px;
    background:url("../image/icon_alert_black-4df465d5bd948a9b6e44fc5e5ecd0e74.svg") 0 0 no-repeat;
    font-size: 13px;
    line-height: 19px;
    color: #000000;
}
.room_input .relative {
    width: 368px;
}
.room_input .relative:after {
    display: block;
    content: "";
    clear: both;
}
.room_input .relative .style_border {
    padding-right: 38px;
}
.room_input .relative .inner_text {
    position: absolute;
    top: 13px;
    right: 12px;
    font-weight: 500;
}
.btn_icon_m2 {
    float: right;
    margin-top: 11px;
    padding: 5px 6px 5px 22px;
    border-radius: 4px;
    background: #E8E8E8 url("../image/icon_m2-245f79a9c5fcba6db9582711309f7dd5.svg") 6px center no-repeat;
    font-size: 12px;
    line-height: 16px;
}
.room_input .select_group {
    display: flex;
    align-items: center;
}
.room_input .select_group label {
    display: flex;
    width: auto;
    margin-right:40px;
    font-weight: 400;
}

.group_btn_chk {
    display: flex;
    align-items: center;
}
.group_btn_chk p {
    color: #333;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    margin-right: 8px;
    width: 50px;
}
.group_btn_chk button {
    width: 145px;
    height: 44px;
    padding: 12px 16px;
    align-items: center;
    border-radius: 4px;
    border: 1.4px solid #DFDFDF;
    text-align: center;
    margin-right: 10px;
}

.group_btn_chk button.active {
    border: 1.4px solid #5C44E3;
    font-weight: 700;
}

.select_group .selectbox + .ui-selectmenu-button.ui-button {
    margin-right:15px;
}

.flex_column .select_group label {
    /*width: 69px;*/
    width: 72px;
}
.flex_column .select_group .selectbox + .ui-selectmenu-button.ui-button{
    width: 150px;
}

.select_group + .select_group {
    margin-top: 20px;
}
.checkbox_group label {
    margin-right: 40px;
    color: #333;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
}
.checkbox_group.font15 label{
    font-size:15px;
}
.button_center {
    display: flex;
    justify-content: center;
    margin: 60px 0 174px;
    font-size: 0;
    gap: 20px;
}
.button_center button  {
    width: 256px;
}
.deposit_text {
    font-size: 18px;
    line-height: 26px;
}
.deposit_text strong {
    font-size: 20px;
    line-height: 28px;
}
.input_guide {
    margin-top: 6px;
    font-size: 13px;
    line-height: 18px;
    color: #777;
}
.room_input .week_input .style_border {
    width: 146px;
    text-align: right;
}
.room_input .week_input .style_border + .inner_text{
   right: 235px;
}
.room_input .week_input .style_border::placeholder{
    text-align: right;
}
.text_group .selectbox + .ui-selectmenu-button.ui-button {
    width: 146px;
}
.text_group .alert_red {
    margin-top: 16px;
    padding: 0;
    background: #fff;
}
.text_group .alert_red p{
    font-weight: 700;
}

.sale_tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 4px 12px;
    border-radius: 4px;
    background: #F7F5FF;
    width:430px;
}
.sale_tip p {
    color: #333;
}
.sale_tip a {
    width: 20px;
    height: 20px;
}
.checkbox_group ul {
    display: flex;
    flex-wrap: wrap;
    width: 672px;
}
.checkbox_group li {
    width: 25%;
}
.checkbox_group li:nth-child(n+5) {
    margin-top: 15px;
}
.border_top {
    margin-top: 32px !important;
    padding-top: 32px;
    border-top: 1px solid #efefef;
}
.refund_description {
    font-size:13px; line-height:19px; color:#777777
}
.refund_description li {
    padding-bottom:3px;
}
.textarea_box label {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}
.textarea_box label em {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}
.white_box .textarea_box + .textarea_box {
    margin-top: 32px;
}
.images_add {
    position: relative;
}
.images_add .title {
    font-size: 15px;
    font-weight: 700;
}
.images_count {
    display: inline-block;
    margin-left: 16px;
    color: #777;
    font-size: 15px;
    font-weight: 700;
}
.title_text {
    margin-top: 8px;
    color: #777;
}

.file_upload {
    position: absolute;
    top: 32px;
    right: 0;
}
.file_upload input[type=file]{
    display: none;
}
.btn_upload {
    width: 126px;
    height: 40px;
    padding: 9px 22px 9px 44px;
    border-radius: 4px;
    border: 1px solid #000;
    background: url("../image/icon_file_add-eb5f759c7258365dc2f3f82beae97c9e.svg") 24px 9px no-repeat;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}
.images_view {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    width: 964px;
    min-height: 146px;
    margin: 12px 0;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #DFDFDF;
}
.image_item {
    position: relative;
    overflow: hidden;
    width: 104px;
    height: 104px;
    border-radius: 6px;
}
.image_text {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 24px;
    padding: 4px 0;
    text-align: center;
    background: rgba(92, 68, 227, .8);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
}
.image_item .btn_close {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-block;
    width: 28px;
    height: 28px;
}
.image_tip li {
    color: #777;
}

/* 계약현황 */
.host_contract_list .list_search {
    display: flex;
    justify-content: right;
    margin-bottom: 48px;
}
.contract_item {
    border: 1px solid #DFDFDF;
    border-radius: 6px;
}
.contract_item + .contract_item {
    margin-top: 24px;
}
.contract_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 32px;
    border-bottom:  1px solid #dfdfdf;
    border-radius: 6px 6px 0px 0px;
    background: #F8F8F8;
}
.contract_header .font_purple{
    font-size: 15px;
}
.contract_header .purple{
    width: 106px;
    height: 36px;
    padding: 0 24px;
    font-size: 15px;
}
.contract_cont {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 24px 32px;
}
.contract_cont .room_item {
    display: flex;
    width: 428px;
    gap: 20px;
}

.contract_cont .room_item dt {
    width: 80px;
    height: 80px;
}
.contract_cont .room_item dd{
    width: 328px;
}

.contract_cont .room_item .room_name a {
    padding-right: 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;

    background: url("../image/icon_right_black-197253c450c96a93c3d1edf2d69a469f.svg") 100% center no-repeat;
    background-size: 14px 14px;
}
.contract_cont .room_item .room_name a.disabled {
    color: #5C5C5C;
    pointer-events: none;
    background: none;
}
.contract_cont .room_period div {
    display: flex;
    width: 246px;
    color: #333;
}
.contract_cont .room_period div + div {
    margin-top: 32px;
}
.contract_cont .room_period .badge {
    width: 52px;
    height: 24px;
    margin-right: 12px;
    padding: 5px 0 3px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 4px;
}
.contract_cont .white {
    width: 57px;
    height: 36px;
    font-weight: 500;
}
.contract_cont .room_pay {
    margin-top: 0;
}
.contract_cont .room_name {
    margin-top: 0;
}
.contract_cont .room_item {
    align-items: center;
}
.room_item .user_name {
    margin: 6px 0;
    color: #5C5C5C;
    font-size: 13px;
    line-height: 19px;
}

.contract_detail .detail_cont {
    width: 692px;
}
.contract_detail .detail_cont .flex {
    align-items: inherit;
    gap: 24px;
}
.detail_cont .border_box {
    width: 334px;
    padding: 24px 20px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;

}
.detail_cont .border_box .title {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}
.detail_cont .border_box .info_list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.detail_cont .border_box .info_list li span {
    width: 60px;
    color: #5C5C5C;
    line-height: 18px;
}
.detail_cont .border_box .info_list li p {
    width: 230px;
    color: #333;
    font-size: 14px;
    line-height: 18px;
}
.detail_cont .border_box .btn {
    width: 100%;
    height: 36px;
    margin-top: 12px;
}
.detail_list {
    margin-top: 24px;
    padding: 24px 20px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
}
.detail_period {
    position: relative;
    display: block;
}
.detail_period:after {
    position: absolute;
    top: 3px;
    right: 0;
    display:block;
    content:"";
    width: 18px;
    height: 18px;
    background: url("../image/icon_dropdown-1b58339606c03b8cfb6d1550f0c426f4.svg") 0 0 no-repeat;
    background-size: 18px 18px;
}
.detail_list.is_active .detail_period:after {
    top: 0;
    right: 0;
    background: url("../image/icon_dropdown-1b58339606c03b8cfb6d1550f0c426f4.svg") 0 0 no-repeat;
    transform: rotate(180deg);
    background-size: 18px 18px;
}
.detail_period .period {
    margin-left: 10px;
    color: #5C5C5C;
}
.detail_list.is_active .detail_pay {
    display: block;
}
.detail_pay {
    display: none;
    margin-top: 24px;
}
.detail_pay .pay_list li {
    display: flex;
    justify-content: space-between;
}
.detail_pay .pay_list li:nth-child(n+2) {
    margin-top: 8px;
}
.detail_pay .pay_list .text_bold * {
    font-size: 15px;
    line-height: 21px;
    color: #000;
}
.detail_pay .pay_list li span {
    color: #5C5C5C;
    line-height: 18px;
}
.detail_pay .pay_list li p {
    color: #333;
    line-height: 18px;
}
.detail_pay .pay_list li.service_fee {
    border-top:1px solid #edeef0; 
    border-bottom:1px solid #edeef0; 
    padding:24px 0; margin-top:24px
}
.detail_pay .pay_list + .font_999 {
    margin-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EFEFEF;
}
.pay_list[status='cancel'] li p {
	text-decoration: line-through;
}
.pay_list[status='reject'] li p {
	text-decoration: line-through;
}
.total_pay {
    margin: 24px 0;
}
.total_pay li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.total_pay li:nth-child(n+2) {
    margin-top: 8px;
}
.total_pay li span {
    color: #5C5C5C;
    line-height: 18px;
}
.total_pay li p {
    color: #333;
    line-height: 18px;
}
.total_pay .text_bold * {
    font-size: 15px;
}
.total_pay .text_bold .font_red {
    font-size: 20px;
}
.icon_question {
    display: flex;
    align-items: center;
}
.icon_question span {
    padding-right: 24px;
    background: url("../image/icon_question-d60c78ca5ac9ac385bbad85d264468b1.svg") 100% 1px no-repeat;
    line-height: 22px !important;
}
.icon_question p {
    position: relative;
    margin-left: 22px;
    padding: 6px 20px 6px 11px;
    border-radius: 6px;
    background: #EFEFEF;
    color: #5C5C5C;
    font-size: 13px;
    line-height: 21px;
}
.icon_question p:before {
    position: absolute;
    top: 11px;
    left: -10px;
    display: inline-block;
    content: "";
    width: 12px;
    height: 10px;
    background: url("../image/icon_triangle-52ec5ac74ac4941f54d984d83152de2a.svg") 0 0 no-repeat;
    background-size: 12px 10px;
}
.detail_pay .btn.line_black {
    width: 100%;
    height: 44px;
    font-size: 15px;
    font-weight: 500;
}
.icon_arrow_right {
    padding-right: 18px;
    background: url("../image/icon_arrow-5ce1fc1f1d5ebd86da7015631880d30a.svg") 100% 2px no-repeat;
    color: #5C5C5C;
    line-height: 18px;
}

.contract_detail .side_cont {
    width: 348px;
    height: 346px;
    position: sticky;
    top:0;
}
.side_cont_box {
    padding: 28px 20px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.side_cont_box .period {
    margin-top: 12px;
}
.side_cont_box .text_bold {
    margin: 6px 0 24px;
}
.side_cont_box .btn {
    width: 100%;
    margin-bottom: 12px;
}
.side_cont_box .gray_box_small {
    margin: 4px 0 0;
    padding: 12px;
    font-size: 13px;
    line-height: 19px;
    color: #5C5C5C;
    letter-spacing: -1px;
}
.side_cont_box + .side_cont_box {
    margin-top: 40px;
}
.side_cont_box .pay_deadline_time_box {
	margin-top:24px;
	display: flex;
	padding: 4px 0px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	align-self: stretch; border-radius: 4px;
	background: #FEF6F7;
}

.side_cont_box .pay_deadline_time_box p {
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px; 
	letter-spacing: -0.1px;
	color: #EF233C;
}
.star_score {
	position: relative;
	text-align: center;
	margin-top:20px
}

.star_score .star_score__item {
	display: inline-block;
	width: 21px;
	height: 21px;
	padding: 2px;
	background: url(../image/icon_star_off-034f2d006c01c97c4d30f1f33021472e.svg) no-repeat;
	background-size: cover;
	box-sizing: initial
}

.star_score .star_score__item.active {
	background-image: url(../image/icon_star_on_purple-ab92264e2b20453503247e1bcd2f997c.svg)
}

/* chat */
.chat_status {
    overflow: hidden;
    width: 412px;
    border-radius: 6px 0px 0px 6px;
    border: 1px solid #EFEFEF;
}
.chat_status .list_search {
    padding: 20px 25px;
    border-bottom: 1px solid #dfdfdf;
}
.chat_status .list_search .keyword_input {
    width: 240px;
    margin: 0 0 0 12px;
}
.chat_list {
    height: 1193px;
}
.chat_list li:last-child {
    overflow: hidden;
    border-radius: 0 0px 6px 6px;
    border-bottom: 1px solid #dfdfdf;
}
.chat_list li:first-child {
    border-top: none;
}
.chat_list li {
    position: relative;
    border-top: 1px solid #dfdfdf;
}
.chat_list li.is_active {
    background: #F8F8F8;
}
.chat_list .new:after {
    display: block;
    content:"";
    position: absolute;
    top: 16px;
    right: 40px;
    width: 20px;
    height: 20px;
    background: url("../image/icon_new-cdc439b5fcee0509fde11c61f214ea4c.svg") 0 0 no-repeat;
    background-size: 20px 20px;

}
.chat_list a {
    display: block;
    padding: 16px 20px;
}
.chat_list dl {
    display: flex;
    gap: 14px;
}
.chat_list dt span {
    overflow: hidden;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 60px;
}
.chat_list dt p {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}
.chat_list dd {
    width: 285px;
}
.chat_list .room_name {
    font-size: 16px;
    line-height: 24px;
}
.host_chat .user_name {
    display: flex;
}
.host_chat .user_name .period {
    color: #5C5C5C;
}
.host_chat .user_name .period:before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 10px;
    margin: 0 6px;
    background: #DFDFDF;
}
.chat_list .chat_message {
    color: #5C5C5C;
    font-size: 13px;
    line-height: 21px;
}
.chat_list dd p {
    margin-bottom: 2px;
}

/* 채팅창 */
.chat_box {
    position: relative;
    width: 672px;
    height: 1276px;
    border-radius: 0 6px 6px 0;
    border: 1px solid #EFEFEF;
    border-left: none;
}
.chat_header {
    position: relative;
    padding: 14px 32px;
    border-bottom: 1px solid #EFEFEF;
}
.chat_header .room_name {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
}
.chat_header .user_name * {
    font-size: 15px;
}
.chat_header .btn {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 111px;
    height: 36px;
}
.chat_safe_msg {
    padding: 10px 0;
    background: #EFFBF7;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    text-align: center;
}
.chat_safe_msg strong {
    padding: 2px 0 2px 26px;
    background: url("../image/icon_safe-e0c33686ea33687d26ebaa7ebdd68dbe.svg") 0 0 no-repeat;
    background-size: 18px 18px;
    font-size: 13px;
    line-height: 19px;
    color: #0DB08C;

}
.chat_body {
    padding: 0 24px;
}
.chat_body .time_line {
    margin: 25px 0 28px;
    position: relative;
    border-top: 1px solid #E8E8E8;
}
.chat_body .time_line span {
    position: absolute;
    left: 50%;
    display: inline-block;
    height: 18px;
    background: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    color: #999;
    transform: translate(-50%, -50%);
}
.you_chat {
    display: flex;
    gap: 14px;
    margin-bottom: 12px
}
.you_chat .profile_img {
    display: block;
    width: 36px;
    height: 36px;
    background-size: 36px 36px;
}
.message_box .name {
    color: #5c5c5c;
    font-size: 12px;
    line-height: 18px;
}
.message_text {
    display: flex;
    align-items: end;
    margin-top: 4px;
}
.message_text + .message_text {
    margin-top: 4px;
}
.message_text .inner_text {
    max-width: 324px;
    padding: 8px 12px;
    border-radius: 2px 8px 8px 8px;
    background: #F5F5F5;
}
.message_text .date {
    margin-left: 6px;
    font-size: 10px;
    color: #999;
    line-height: 14px;
}
.me_chat {
    display: flex;
    justify-content: right;
    margin-bottom: 12px;
}
.me_chat .message_text {
    display: flex;
    flex-flow: row-reverse;
}
.me_chat .message_text .inner_text {
    max-width: 324px;
    padding: 8px 12px;
    border-radius: 8px 2px 8px 8px;
    background: #000;
    color: #fff;
}
.me_chat .message_text .date {
    margin-right: 6px;
}
.notice_red {
    margin: 24px 0;
    padding: 12px 16px;
    border-radius: 6px;
    background: #FEF6F7;
    font-size: 13px;
    line-height: 19px;
    color: #EF233C;
    text-align: center;
}
.inner_text.message_img {
    padding: 0;
    background: #fff;
    border-radius: 0;
}
.inner_text.message_img span{
    overflow: hidden;
    display: flex;
    max-width: 150px;
    height: auto;
    border-radius: 6px;
}

.chat_notice_box {display: flex; padding: 12px 20px; justify-content: center; align-items: center; gap: 8px; background-color: #EFFBF7;}
.chat_notice_box p { font-size: 13px; font-weight: 700;line-height: 19px; letter-spacing: -0.1px; color: #0DB08C;}
.chat_notice_box img {width:13px; height:16px;}

.contract_request {
    margin: 24px 0;
    border-radius: 6px;
    border: 1px solid #EDEAFF;
}
.contract_request .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 32px;
    background: #F7F5FF;

}
.contract_request .header .font_purple {
    font-size: 15px;
}
.contract_request .header span {
    color: #5C5C5C;
    font-size: 12px;
    line-height: 18px;
}
.request_message {
    padding: 16px 32px;
}
.contract_start {
    align-items: center;
    padding: 12px 32px;
    border-radius: 6px;
    background: #F5F5F5;
}
.contract_start span {
    font-size: 13px;
    line-height: 19px;
}
.contract_start .btn {
    display: block;
    width: 108px;
    height: 36px;
}
.message_input {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 672px;
    padding: 24px 0;
    border-top: 1px solid #EFEFEF;
}
.message_input .btn_camera {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 8px;
}
.message_input .style_border {
    width: 528px;
    height: 48px;
}
.message_input .btn_send {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 10px;
}
.message_input textarea {
    width: 528px;
    padding: 12px;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    background: #fff;
    height:94px;
}

.load-before-msg {
    color: #999999;
    text-align: center;
    cursor: pointer;
    margin:15px 0;
}

/* 정산 */
.host_calculate .flex {
    align-items: center;
}
.list_search .selectbox.width_147 + .ui-selectmenu-button.ui-button {
    width: 147px;
    margin: 0 10px;
}
.period_input {
    display: flex;
}
.period_input .icon_calendar:first-child {
    margin-right: 32px;
}
.period_input .icon_calendar:first-child:after {
    position: absolute;
    top: 19px;
    right: -22px;
    display: inline-block;
    content: "";
    width: 10px;
    height: 1px;
    background: #000;
}
.period_input .icon_calendar {
    position: relative;
    display: flex;
    width: 134px;
    height: 40px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #dfdfdf;
}
.period_input .icon_calendar span {
    display: inline-block;
    height: 24px;
    padding-left: 34px;
    background: url("../image/icon_calendar_02-6bd681e930939813dc5c625e9522abe8.svg") 0 0 no-repeat;
    background-size: 24px 24px;
}
.period_input .icon_calendar span input {
    width: 80px;
    cursor: pointer;
}
.menu {
    display: flex;
    gap: 20px;
}
.menu a {
    color: #777;
    font-size: 16px;
}
.menu a.is_active {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #000;
}
.calculate_count {
    margin-top: 32px;
    padding: 12px 20px;
    border-radius: 6px;
    background: #F7F5FF;
}
.calculate_count span {
    font-size: 16px;
    font-weight: 500;
}
.calculate_count strong {
    padding-left: 16px;
    font-size: 18px;
    font-weight: 500;
}
.btn_right {
    margin-top: 16px;
    text-align: right;
}
.btn_excel {
    display: inline-block;
    padding: 7px 16px 7px 40px;
    background: url("../image/icon_download-1d988973b3484356483f7d5c0d1edc77.svg") 16px 9px no-repeat;
    background-size: 18px 18px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid #000;
}

/* 더보기 */
.host_more > .title_left + .flex {
    width: 911px;
}

.host_more .left_content {
    width: 348px;
}
.host_more .right_content {
    width: 451px;
}
.border_line {
    border-top: 1px solid #dfdfdf;
}
.host_info .profile_img {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
}
.host_info {
    position: relative;
    padding: 20px 12px 32px 12px;
}
.host_info dl {
    display: flex;
    align-items: center;
    gap: 16px;
}
.host_info .blue_badge {
    position: absolute;
    top: 30px;
    right: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    background: #EDF2FF;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: #4263EB;
}
.host_info .normal_badge {
    position: absolute;
    top: 30px;
    right: 12px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #777;
    border-radius: 1000px;
    border: 1px solid #DFDFDF;
}
.host_info  dd strong {
    font-size: 18px;
    line-height: 26px;
}
.host_info  dd p {
    margin-top: 4px;
    color: #999;
    font-size: 13px;
    line-height: 19px;
}

.hostBannerSwiper {
    margin-top: 20px;
}
.hostBannerSwiper .swiper-slide {
    overflow: hidden;
    width: 348px;
    height: 80px;
    border-radius: 6px;
}
.hostBannerSwiper .swiper-pagination-fraction {
    right: 8px;
    bottom: 8px;
    left: auto;
    transform: translateX(0);
    width: auto;
    padding: 3px 8px 1px;
    background:rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    border-radius: 20px;
}
.hostBannerSwiper .swiper-pagination-fraction span {
    color: #fff;
    font-size: 11px;
    line-height: 16px;
}
.more_menu {
    padding: 24px 0;
}
.more_menu strong {
    display: block;
    margin-bottom: 16px;
    font-size: 15px;
}
.more_menu li {
    position: relative;
}
.more_menu li:after {
    position: absolute;
    top: 16px;
    right: 12px;
    display: inline-block;
    content:"";
    width: 18px;
    height: 18px;
    background: url("../image/icon_right_999-c4331d1f56ad94068d28bc759e1275df.svg") 0 0 no-repeat;
    background-size: 18px 18px;
}
.more_menu li.is_active {
    background: #f8f8f8;
}
.more_menu li a {
    display: block;
    padding: 14px 12px 14px 50px;
    font-size: 15px;
    color: #333;
    background-position: 12px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}
.more_menu li a.icon_01 {
    background-image: url("../image/icon_user-0d3d442bbb83081ebb42331dc23b6aff.svg");
}
.more_menu li a.icon_02 {
    background-image: url("../image/icon_receipt-ca2db54ea60d6e031cdd978d40dff8b1.svg");
}
.more_menu li a.icon_03 {
    background-image: url("../image/icon_question_black-bc7a4267bec3508e0580a211b05797eb.svg");
}
.more_menu li a.icon_04 {
    background-image: url("../image/icon_customer-12cc0118171994873236dff1a9c5d750.svg");
}
.more_menu li a.icon_notice {
    background-image: url("../image/icon_notice-23cedeed64939244c74a4dbcf9f45682.svg");
}
.border_line .line_black {
    margin-top: 40px;
    width: 100px;
    height: 44px;
}
.green_check {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-radius: 6px;
    background: #EFFBF7;
}
.green_check * {
    color: #0DB08C;
}
.green_check p {
    padding-left: 24px;
    background: url("../image/icon_check_green-0919d591bf395a4b2f7d63725ae7338d.svg") 0 center no-repeat;
}
.right_content .title_left {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 26px;
}
.icon_arrow_right.color_999 {
    color: #999;
    background-image: url("../image/icon_right_999-c4331d1f56ad94068d28bc759e1275df.svg");
    background-size: 14px 14px;
}
.check_button.check_black:checked + label:after {
    background-image: url("../image/icon_radio_check_black-0ca94cfc867baf16b0b81fc06fd7a582.svg");
}
.receipt_info {
    border-radius: 4px;
    border: 1px solid #dfdfdf;
}
.receipt_info + .receipt_info {
    margin-top: 24px
}
.receipt_info .check_button + label {
    padding: 12px 20px;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 14px;
}
.receipt_inner {
    display: none;
    margin: 0 20px;
    padding-top: 20px;
    border-top: 1px solid #EFEFEF;
}
.receipt_inner div + div {
    margin-top: 16px;
}
.receipt_inner .bg_gray {
    display: none;
    margin: 20px -20px 0;
    padding: 20px;
    border-radius: 0px 0px 4px 4px;
    background: #F8F8F8;
}
.receipt_inner .text {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 19px;
    color: #333;
}
.receipt_inner .input_group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 19px;
    color: #777;
}
.receipt_inner .input_group label span {
    font-size: 12px;
    line-height: 18px;
    color: #B7B7B7;
}
.receipt_inner .input_group + .input_group {
    margin-top: 16px;
}

.right_content .notice_box {
    padding: 20px;
}
.right_content .notice_box .title {
    background-position: 0 2px;
}
.notice_box li {
    position: relative;
    padding-left: 17px;
    font-size: 13px;
    line-height: 19px;
    color: #777;
}
.notice_box li + li {
    margin-top: 6px;
}
.notice_box li:before {
    position: absolute;
    top: 9px;
    left: 0;
    display: inline-block;
    content: "";
    width: 2px;
    height: 2px;
    margin: 0 10px 0 7px;
    background: #777;
    border-radius: 50%;
}

/* 고객센터 */
.right_content .keyword_input {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 13px 20px;
    border-radius: 6px;
}
.right_content .keyword_input input {
    width: 100%;
}
.category {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 40px;
}
.category button {
    width: 106px;
    height: 48px;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    font-weight: 500;
    color: #777;
}
.category button.is_active {
    border-color: #5C44E3;
    background: #5C44E3;
    color: #fff;
}
.right_content .faq_area {
    border-top: 1px solid #5C5C5C;
}
.faq_area .data_none {
    margin: 120px 0;
}
.faq_area .question:before {
    content:"Q. ";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #5C44E3;
}
.right_content .faq_list a {
    padding:20px;
}
.right_content .btn_line_black {
    height: 44px;
}
.purple_box {
    display: flex;
    gap: 60px;
    max-height: 156px;
    margin-bottom: 40px;
    padding: 20px;
    border-radius: 6px;
    background: #F7F5FF;
}
.purple_box .left strong {
    color: #5C44E3;
    font-size: 18px;
    line-height: 26px;
}
.btn_purple.icon_white {
    width: 178px;
    height: 44px;
    padding: 0 46px 0 24px;
    background: #5C44E3 url("../image/icon_arrow_white-421c20dbb2308acf25551696ad3d1cf9.svg") calc(100% - 24px) center no-repeat;
    background-size: 14px 14px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
}
.purple_box .right span {
    color: #5C5C5C;
    font-size: 13px;
    line-height: 19px;
}
.purple_box .right p {
    margin-bottom: 26px;
    color: #5C44E3;
    font-size: 15px;
    font-weight: 700;
}
.purple_box .left span {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #5C44E3;
    letter-spacing: -1px;
}
.purple_box .left em {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #5C5C5C;
}
.faq_list .bar span {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: #999;
}
.faq_list .bar span + span:before {
    display: inline-block;
    content:"";
    width: 1px;
    height: 10px;
    margin: 0 8px 0 6px;
    background: #DFDFDF;
}
.right_content .text_box.length_2000 {
    height: 260px;
}
.right_content .text_box.length_2000 textarea {
   width: 100%;
    height: 200px;
}
.right_content .file_add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin-top: 24px;
}
.right_content .file_add .file_upload {
    position: static;
}
.file_add .file_count p {
    display: inline-block;
    margin-left: 16px;
}
.file_add .file_count p * {
    font-weight: 700;
}
.right_content .images_view {
    flex-wrap: nowrap;
    width: 100%;
    min-height: auto;
    margin-top: 16px;
    padding: 0;
    border: none;
}
.right_content .images_view .image_item {
    width: 76px;
    height: 76px;
}
.right_content .image_item .btn_close {
    width: 20px;
    height: 20px;
}

/* 게스트 */
/* 신분증 등록 */
.id_card{
    width: 450px;
    margin: 0 auto;
}
.card_reg strong {
    font-size: 28px;
    line-height: 38px;
}
.card_reg p {
    margin: 16px 0 40px;
    line-height: 21px;
    color: #5C5C5C;
}
.file_upload_v2 input[type=file]{
    display: none;
}
.file_upload_v2 .btn_upload {
    display: block;
    width: 100%;
    height: auto;
    padding: 13px 0;
    border-radius: 4px;
    border:none;
    background: #000;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}
.tab_menu.tab_black .tab li.is_active a {
    color: #000;
    font-weight: 400;
}
.tab_menu.tab_black .tab li a {
    color: #757575;
}
.tab_menu.tab_black .tab li {
    border-bottom: 2px solid #EFEFEF;
}
.tab_menu.tab_black .tab li.is_active {
    border-bottom: 2px solid #000;
}
.card_box {
    text-align: center;
}
.card_box .card_img {
    width: 375px;
    height: 224px;
    margin: 0 auto;
}
.card_box .gray_text_box {
    margin-bottom: 48px;
    padding: 11px 0;
    border-radius: 6px;
    background: #F8F9FA;
    color: #333;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}
.card_box .card_guide {
    margin-top: 32px;
    font-size: 16px;
    line-height: 26px;
    color: #777;
}
.card_box .card_guide .font_red {
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
}
.card_box .card_guide + .card_guide  {
    margin-top: 20px;
}
.card_box + .card_box {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid #DFDFDF;
}
.image_area {
    width: 450px;
    height: 260px;
    background: #F5F5F5;
    border-radius: 6px;
}
.image_area + .btn_flex {
    margin-top: 32px;
}

/* 게스트 계약현황 */
.guest_contract .contract_header {
    padding: 18px 32px;
    border-bottom: none;
}
.guest_contract .contract_header .room_title {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.guest_contract .badge{
    display: inline-block;
    width: 50px;
    height: auto;
    margin-right: 8px;
    padding: 4px 0;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}
.purple_arrow {
    padding-right: 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    color: #5C44E3;
    background: url("../image/icon_arrow_purple_14-9746ab96d243a04e889e8d05c392f22c.svg") 100% center no-repeat;
    background-size: 14px 14px;
}
.guest_contract .room_item {
    width: 664px;
}
.guest_contract .room_period {
    font-size: 13px;
    line-height: 19px;
    color: #5C5C5C;
}
.guest_banner {
    margin-bottom: 56px;
}
.guest_banner .bannerSwiper {
    margin-top: 56px;
}
.guest_banner .bannerSwiper .swiper-wrapper {
    padding-bottom: 30px;
}
.guest_banner .bannerSwiper .swiper-slide {
    display: flex;
    align-items: center;
    height: 115px;
    padding: 0;
    border-radius: 6px;
}
.guest_banner .bannerSwiper .swiper-slide a {
    display: block;
    width: 1084px;
    height:115px;
    padding:0;
}
.guest_banner .swiper-horizontal>.swiper-pagination-bullets,
.guest_banner .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
}
.guest_banner .bannerSwiper .swiper-pagination-bullet {
    background: rgba(107, 84, 237, 0.6);;
}
.guest_banner .bannerSwiper .swiper-pagination-bullet-active {
    background: #6B54ED;
}
.guest_banner .banner_text span{
    display: block;
    margin-bottom: 3px;
    color: #BCB1FF;
    font-size: 12px;
    line-height: 18px;
}
.white_arrow {
    display: inline-block;
    padding-right: 16px;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    color: #fff;
    background: url("../image/icon_arrow_white2-d504a7f4d21760e45354de5275205b54.svg") 100% center no-repeat;
    background-size: 16px 16px;
}
.contract_slide_item {
    height: 302px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
    background: #FFF;
}

.contract_slide_item .contract_header {
    padding: 19px 16px 20px;
    border-bottom: none;
}
.contract_slide_item .contract_header .text_black{
    color: #222;
    font-weight:700;
    font-size: 15px;
    line-height: 21px;
}
.contract_slide_item .contract_cont {
    padding: 0;
}
.contract_slide_item .room_image {
    overflow: hidden;
    width: 492px;
    height: 240px;
    border-bottom-left-radius: 6px;
}
.contract_slide_item .room_info {
    width: 560px;
    margin: 0;
}
.contract_slide_item .room_info .flex{
    gap: 40px;
    justify-content: left;
}
.contract_slide_item .room_title {
    position: relative;
    top: 3px;
    display: inline-block;
    margin-left: 8px;
    color: #000;
    font-size: 17px;
    line-height: 25px;
}
.contract_slide_item .room_info .flex {
    margin-top: 20px;
}
.contract_slide_item .room_info .flex .info_box {
    color: #5c5c5c;
    font-size: 13px;
    line-height: 19px;
}
.contract_slide_item .room_info .flex .info_box span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
    color: #333;
}
.contract_slide_item .purple_arrow {
    background-position: 100% 3px;
}
.guest_room_slide .swiper-button-next,
.guest_room_slide .swiper-button-prev{
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.6);
    border-radius: 100%;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);

}
.guest_room_slide {
    position: relative;
    height: auto;
    margin-top: 0;
}
.guest_room_slide .swiper-slide{
    height: auto;
}
.guest_room_slide .swiper-pagination-fraction {
    width: 52px;
    height: 28px;
    top: 16px;
    right: -8px;
    bottom: auto;
    left: auto;
    background: none;
    border-radius: 999px;
    border: 1px solid #CCC;
    color: #000;
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
}
.guest_room_slide .swiper-pagination-fraction span {
    color: #000;
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
}
.guest_room_slide .swiper-button-next:after,
.guest_room_slide .swiper-button-prev:after {
    color: #000;
    font-size: 20px;
}
.contract_slide_item.item_none {
    height: 240px;
}
.contract_slide_item .none_text {
    width: 270px;
}
.contract_slide_item .none_text strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.contract_slide_item .none_text p {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 24px;
    color: #5C5C5C;
}

/* 계약 시작하기 */
.contract_period_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
}
.contract_period_box strong {
    font-size: 16px;
    line-height: 24px;
}
.contract_period_box p {
    font-size: 13px;
    line-height: 19px;
}
.contract_detail_box {
    margin-top: 20px;
    padding: 24px 20px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
}
.contract_detail_box .detail_pay{
    display: block;
    margin: 0;
}
.contract_detail_box .pay_list li:nth-of-type(2) {
    margin-top: 16px;
}
.contract_detail_box .pay_list li * {
    font-size: 13px;
    line-height: 19px;
}
.contract_detail_box .pay_list li.amount_used {
    margin-top: 13px;
}
.contract_detail_box .amount_used .font_000 {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.contract_detail_box .amount_used .font_purple {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}
.contract_detail_box .pay_list li.hr {
    margin-top: 17px;
    padding-top: 16px;
    border-top: 1px solid #E8E8E8;
}
.contract_detail_box .pay_list li.hr span {
    color: #222;
    font-size: 14px;
    line-height: 21px;
}
.contract_detail_box .pay_list li.total_pay {
    margin: 17px 0 0;
}
.contract_detail_box .pay_list li.total_pay span{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
}
.contract_detail_box .pay_list li.total_pay .font_red{
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}
.contract_detail_box .refund_title {
    margin-bottom: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}
.contract_detail_box .dot_list li {
    font-size: 15px;
    line-height: 22px;
}
.contract_detail_box .notice_box {
    margin-top: 16px;
}
.contract_detail_box .notice_box .title,
.request_box .notice_box .title {
    background-position: 0 2px;
}
.request_box > .title {
    font-size: 20px;
    line-height: 28px;
}
.request_box .text {
    margin-top: 12px;
    font-size: 15px;
    color: #5C5C5C;
}
.request_box .text span {
    font-size: 15px;
    color: #999;
}
.request_box .text_box {
    margin-top: 16px;
}
.request_box .gray_box {
    margin-bottom: 16px;
    padding: 17px 20px;
    font-size: 13px;
    line-height: 19px;
    color: #5C5C5C;
}
.notice_box .sub_text {
    font-size: 13px;
    line-height: 19px;
    color: #777;
    letter-spacing: -1px;
}

/* 계약 상세 현황 */
.sub_title {
    margin: 64px 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.contract_detail .map {
    overflow: hidden;
    width: 334px;
    height: 158px;
    border-radius: 6px;
}
.detail_cont .border_box .title span {
    padding-left: 8px;
    color: #979797;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}
.detail_cont .border_box .tag {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    color: #5C44E3;
    border-radius: 4px;
    background: #F7F5FF;
}
.green_text {
    margin-top: 20px;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    color: #0DB08C;
    text-align: center;
    background: #EFFBF7;
}
.link_arrow {
    margin-top: 20px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
}
.link_arrow a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.link_arrow a:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    background: url("../image/icon_arrow_black-04b027f8a8b32b8da0360197e99f1e49.svg") 0 0 no-repeat;

}


/* 계약 진행 정보 */
.detail_icon {
    /*margin-top:16px;*/
}
.detail_icon li span {
    display: flex;
    align-items: center;
    color:#B7B7B7;
    font-size: 15px;
}
.detail_icon li:first-child {
    padding-top:0;
    background:none;
}
.detail_icon li {
    display: flex;
    justify-content: space-between;
    padding-top:24px;
    background:url('../image/bg_line_gray-5cf6cf076f25ed0917fd53c095f4d917.svg') 8px 5px no-repeat;
    background-size:8px 14px;
}
.detail_icon li.current_status {
    background-image:url('../image/bg_line_purple-8fc0c4f8dedd60021fbf5fe6a747bd52.svg');
}
.detail_icon li + li {
    margin-top:0;
}
.detail_icon li span:before {
    content:"";
    display:inline-block;
    width:24px;
    height:24px;
    margin-right:13px;
    background:url('../image/icon_status_base-3024254078c19c0775b585843d7f480e.svg') 0 0 no-repeat;
    background-size:24px 24px;
}
.detail_icon .check_status span,
.detail_icon .current_status span{
    color:#000
}
.detail_icon .check_status span:before {
    background-image:url('../image/icon_status_check-96a4cad95abc065e2800f6aea2c78663.svg');
}
.detail_icon .current_status span:before {
    background-image:url('../image/icon_status_current-d7da2c1d03fde8d7c43a33c38d059a29.svg');
}
.detail_icon p {
    color:#777;
}
.detail_icon p.red_text {
    color:#EF233C;
}
.contract_progress {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #E8E8E8;
}
.contract_progress > .flex strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.contract_progress > .flex p {
    font-size: 13px;
    color: #5C5C5C;
    font-weight: 400;
    line-height: 19px;
}
.contract_progress .bg_inner {
    display: flex;
    gap: 42px;
    margin-top: 20px;
    padding: 20px 28px;
    background: #F8F8F8;
    border-radius: 6px;
}
.contract_progress .detail_content {
    flex: 1;
}
.contract_progress .detail_content > .title {
    margin-bottom: 16px;
    padding-bottom: 6px;
    font-weight: 700;
    line-height: 21px;
    border-bottom: 1px solid #5c5c5c;
}

.contract_detail .faq_area {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #E8E8E8;
}
.contract_detail .faq_area .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.contract_detail .faq_area .faq_more {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
}
.contract_detail .faq_area .faq_more:after {
    display: block;
    content: "";
    width: 14px;
    height: 14px;
    background: url("../image/icon_arrow_gray-dea28b8b1a472f90be0f198b8d294d01.svg") 100% 0 no-repeat;
}
.side_period {
    display: flex;
    align-items: center;
    gap: 8px;
}
.side_period p {
    color: #333;
    line-height: 19px;
}
.side_cont_box .profile {
    margin: 24px 0 0;
}
.side_cont_box .profile dl {
    align-items: center;
}
.side_cont_box .profile .profile_img {
    width: 60px;
    height: 60px;
    margin-right: 16px;
    background-size: 60px 60px;
}
.side_cont_box .profile .profile_name {
    display: block;
}
.side_cont_box .profile .icon_green {
    margin-top: 2px;
    margin-left: 0;
}
.side_cont_box .profile .profile_name strong{
    font-size: 18px;
    line-height: 26px;
}
.side_button {
    margin-top: 24px;
}
.side_button button + button {
    margin-top: 12px;
}
.side_cont_box .gray_text_box {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 6px;
    background: #F5F5F5;
    font-size: 13px;
    color: #5c5c5c;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -1px;
}
.red_text_box {
    display: flex;
    margin-top: 16px;
    padding: 16px;
    border-radius: 6px;
    background: #FEF6F7;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: #EF233C;
}
.red_text_box:before {
    display: block;
    content: "";
    width: 18px;
    height: 18px;
    padding: 1px;
    margin-right: 8px;
    background: url("../image/icon_alert_red-caa03d0d2abfccd9af51460a98f02a94.svg") 0 0 no-repeat;
    background-size: 18px 18px;
}

.blue_text_box {
    display: flex;
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 6px;
    background: #EDF2FF;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: #4263EB;
    letter-spacing: -1px;
}
.blue_text_box:before {
    display: block;
    content: "";
    width: 28px;
    height: 18px;
    padding: 1px;
    background: url("../image/icon_alert_blue-7d1712498033ff83102c378e66145c4a.svg") 0 0 no-repeat;
    background-size: 18px 18px;
}
.blue_text_box strong {
    padding-right: 5px;
}
.side_cont_box .radio_group {
    margin-top: 24px;
}
.blue_text_box .dot_list {
    margin-left: 6px;
}
.blue_text_box .dot_list li {
    color: #4263EB;
    font-size: 13px;
}
.blue_text_box .dot_list li:before {
    background: #4263EB;
}

/* popup */
.popup_refund .title {
    font-size: 15px;
    font-weight: 700;
}
.popup_refund .input_box {
    margin-top: 24px;
}
.popup_refund .input_box input {
    margin-top: 12px;
}
.popup_refund .input_box input:first-child {
    margin-top: 0px;
}
.text_indent {
    margin-left: 10px;
}
.notice_text li:first-child {
    margin-top: 0;
}
.popup_refund .price_info .total_price {
    padding: 12px 0 16px;
}
.popup_refund .price_info .flex p {
    color: #5c5c5c;
}
.popup_payment .radio_group {
    display: flex;
    gap: 40px;
}
.btn_copy{
    display: flex;
    margin-left: 6px;
    align-items: center;
    color: #5C44E3;
}
.btn_copy:before {
    display: block;
    content: "";
    width: 12px;
    height: 14px;
    margin-right: 4px;
    background: url("../image/icon_account_copy-39eacdc98b80226bb4bb29a7f6c196d0.svg") 0 0 no-repeat;
    background-size: 12px 14px;
}
.account_info li {
    display: flex;
    margin-top: 6px;
}
.account_info li:first-child {
    margin-top: 0;
}
.account_info span {
    width: 75px;
    color: #5c5c5c;
}
.popup_contents .checkbox_area {
    margin-top: 24px;
}
.popup_contents .checkbox_area .check_item {
    position: relative;
    padding: 12px 20px;
}
.popup_contents .checkbox_area .check_item input.circle_checkbox[type=checkbox] + label:before {
    position: absolute;
    top: 12px;
    right: 0;
}
.star_area {
    margin-top: 24px;
}
.star_area .title {
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}
.star_area  .bg_score {
    margin: 0 auto;
    margin-top: 32px;
}
.popup_contents .review_box {
    margin-top: 24px;
}
.popup_contents .review_box .title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700
}
.popup_contents .review_box textarea {
    width: 100%;
    height: 79px;
}

/* 게스트 - 더보기 */
.guest_room {
    position: relative;
    padding: 15px 20px;
    border-radius: 6px;
    border: 1px solid #E8E8E8;
}
.guest_room + .guest_room {
    margin-top: 12px;
}
.guest_room .top_icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.guest_room .top_icon .btn_like {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
}
.guest_room .flex {
    align-items: center;
    justify-content: left;
    gap: 20px;
}
.guest_room dt {
    overflow: hidden;
    width: 90px;
    height: 90px;
    border-radius: 6px;
}
.guest_room .room_detail {
    width: 250px;
}
.guest_room .place_list {
    display: flex;
    align-items: center;
    width: auto;
    margin-top: 8px;
    justify-content: left;
    padding: 0;
}
.guest_room .place_list li {
    color: #5C5C5C;
    font-size: 13px;
    line-height: 19px;
}
.guest_room .room_name {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.guest_room .pay strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.guest_room .pay span {
    color: #5C5C5C;
}
.guest_room .top_icon .del {
    display: inline-block;
    width: 32px;
    height: 32px;
}
.guest_room .place_list li + li:before {
    content:"·";
    margin: 0 4px;
}
/* 비공개 방 */
.guide_message{
    width: 450px;
    margin: 0 auto;
    padding-top:100px;
}
.guide_message .icon_message {
    display: flex;
    align-items: center;
    width: 450px;
    height: 96px;
    padding: 24px 0 24px 47px;
    background: #F8F8F8;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.guide_message .icon_message:before {
    display: inline-block;
    content: "";
    width: 52px;
    height: 52px;
    margin-right: 16px;
    background: url("../image/icon_guide-8d69ac005581fc68b09e8e90520a5455.svg") 0 0 no-repeat;
}
.guide_message .message {
    margin-top: 32px;
    text-align: center;
    color: #777;
    font-size: 13px;
    line-height: 22px;
}
.guide_message .flex {
    margin-top: 40px;
    gap: 8px;
}
.favority_list_none { padding-top:200px; color:#5C5C5C; font-size:16px; text-align:center;}

/* 설문조사 */
.survey {
    width: 716px;
    margin:0 auto;
    padding: 56px 93px 56px 91px;
    background: #fff;
}
.survey .title {
    text-align: center;
}
.survey .title strong {
    font-size: 28px;;
    font-weight: 700;
    line-height: 38px;
}
.survey .title p {
    margin-top: 12px;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: -1px;
}
.survey_box {
    margin-top: 56px;
    padding: 80px 32px 0;
    border-top: 1px solid #DFDFDF;
}
.survey_text,  .survey_text *{
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
.survey_text_02 {
    margin-top: 12px;
    color: #333;
}
.question_list {
    margin-top: 57px;
}
.question_list ul {
    padding: 0 32px;
}
.question_list li + li {
    margin-top: 25px;
}
.question_list li > strong {
    display: block;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 24px;
}
.question_list li > span {
    color: #777;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.question_list li p + p {
    margin-top: 12px;
}
.question_list li .text_box {
    width: 100%;
    height: 160px;
    padding: 12px;
}
.question_list li .text_box textarea {
    width: 100%;
    height: 136px;
}

.app_notice_list { border-top:1px solid #000 }
.app_notice_list .app_notice_item {display: block; padding: 16px 0px; border-bottom: 1px solid #EFEFEF; cursor: pointer; }
.app_notice_item .title {font-size: 15px; font-weight: 400; line-height: 22px; letter-spacing: -0.1px;}
.app_notice_item .date {color: #999; font-size: 13px; font-weight: 400; line-height: 19px;letter-spacing: -0.1px; margin-top:4px;}

.app_notice_detail .title {font-size: 15px; font-weight: 700; line-height: 22px; letter-spacing: -0.1px;}
.app_notice_detail .date {color: #999; font-size: 13px; font-weight: 400; line-height: 19px;letter-spacing: -0.1px;}
.app_notice_images img {width:100%; height:auto; }