@charset "utf-8";

/* sub 공통 */
.sub-outro-section .l2-btn {padding: 18.5px 52.5px;}
.subpage-section .section-tit-wrap .icon {width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background-color: rgba(99,102,241,0.3); border-radius: 50%; margin: 0 auto 32px auto;}

/* 요금제 */
.compare-section .compare-table {display:flex; justify-content:center; align-items: center; margin-top:60px;}
.compare-section .compare-table .compare-item {width:100%; max-width:275px; position:relative;}
.compare-section .compare-table .compare-item .cell {height:80px; display:flex; align-items:center; justify-content:center; background:var(--color-white); border-right:1px solid var(--grayscale3); border-bottom:1px solid var(--grayscale3); color:var(--grayscale8); font-size:var(--fs-20); font-weight: 500;  text-align: center; word-break: keep-all;}
.compare-section .compare-table .compare-item .cell.head {background:var(--color-main); color: var(--color-white); text-align: center; word-break: keep-all;}
.compare-section .compare-table .compare-item .cell:last-child {border-bottom: 0;}
.compare-section .compare-table .compare-item:first-child .cell:not(.head) {font-size: var(--fs-18); color: var(--grayscale7); font-weight: 400;}
.compare-section .compare-table .compare-item:first-child .cell.head {border-radius:12px 0 0 0;}
.compare-section .compare-table .compare-item:last-child .cell.head {border-radius:0 12px 0 0;}
.compare-section .compare-table .compare-item:first-child .cell:last-child {border-radius:0 0 0 12px;}
.compare-section .compare-table .compare-item:last-child .cell:last-child {border-radius:0 0 12px 0;}
.compare-section .compare-table .compare-item:last-child .cell {border-right: 0;}

/*
.compare-section .compare-table {display:flex; justify-content:center; align-items: center; margin-top:60px;}
.compare-section .compare-table .compare-item {width:100%; max-width:230px; position:relative;}
.compare-section .compare-table .compare-item .cell {height:80px; display:flex; align-items:center; justify-content:center; background:var(--color-white); border-right:1px solid var(--grayscale3); border-bottom:1px solid var(--grayscale3); color:var(--grayscale8); font-size:var(--fs-20); font-weight: 500;}
.compare-section .compare-table .compare-item .cell.head {background:var(--grayscale3);}
.compare-section .compare-table .compare-item .cell:last-child {border-bottom: 0;}
.compare-section .compare-table .compare-item:first-child .cell.head {border-radius:12px 0 0 0;}
.compare-section .compare-table .compare-item:last-child .cell.head {border-radius:0 12px 0 0;}
.compare-section .compare-table .compare-item:first-child .cell:last-child {border-radius:0 0 0 12px;}
.compare-section .compare-table .compare-item:last-child .cell:last-child {border-radius:0 0 12px 0;}
.compare-section .compare-table .compare-item:last-child .cell {border-right: 0;}
.compare-section .compare-table .compare-item.active {max-width:350px; z-index:2; border:4px solid var(--color-main); border-radius:12px; overflow:hidden; background:var(--color-white); box-shadow:var(--site-shadow);}
.compare-section .compare-table .compare-item.active .cell {height: 90px; background:var(--color-white); border-right: 0; font-size:var(--fs-24);}
.compare-section .compare-table .compare-item.active .cell.head {background-color: var(--color-main); color:var(--color-white); border-bottom: 0;}
.compare-section .compare-table .compare-item.active:last-child .cell.head,
.compare-section .compare-table .compare-item.active:last-child .cell:last-child {border-radius: 0;}
*/

.setup-process-wrap {display:flex; align-items: flex-start; justify-content: space-between; column-gap:120px;}
.setup-process-wrap .setup-step-list {position:relative; max-width: 372px; display: flex; flex-direction: column; row-gap: 60px; flex-shrink: 0;}
.setup-process-wrap .setup-step-list::before {content:''; position:absolute; top:20px; left:18px; width:1px; height: calc(100% - 88px); border-left:1px dashed var(--color-main);}
.setup-process-wrap .setup-step {position:relative; padding-left:60px; transition:all .4s ease;}
.setup-process-wrap .setup-step > div {display: flex; flex-direction: column; row-gap: 8px;}
.setup-process-wrap .setup-step > div .mo-mode {display: none;}
.setup-process-wrap .setup-step .num {position:absolute; top:0; left:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center; justify-content:center; background:var(--color-white); border:1px solid var(--grayscale3); font-size:18px; font-weight:500;color: var(--color-main); transition:all .4s ease;}
.setup-process-wrap .setup-step.active .num {background: var(--color-main);border-color: var(--color-main);color:var(--color-white);}
.setup-process-wrap .setup-step .card-tit {transition:all .4s ease;}
.setup-process-wrap .setup-step p {font-size:var(--fs-18); font-weight: 400; line-height:1.5; color:var(--grayscale8);}
.setup-process-wrap .setup-visual {flex:1; min-width:0;}
.setup-process-wrap .setup-swiper {width:100%;}
.setup-process-wrap .setup-swiper .swiper-slide {height: 530px;}

/* 자주 묻는 질문 
.help-section .help-list {display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.help-section .help-list a {height:100%; padding:40px; border:1px solid var(--grayscale3); box-shadow:var(--sitelo-shadow); border-radius:12px; background: var(--color-white); display:flex; flex-direction:column; row-gap: 8px; transition:all .3s ease;}
.help-section .help-list strong {font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.help-section .help-list p {font-size:var(--fs-16);line-height:1.5;color:var(--grayscale8);}
.help-section .help-list span {font-size:var(--fs-14);font-weight:500;color:var(--grayscale7);}
.help-section .help-list a:hover {border-color:var(--color-main); }
.help-section .help-list a:hover span {color: var(--color-main);}*/

/* 자주 묻는 질문 */
.help-section .help-list {display: flex; flex-direction: column; padding: 30px 50px; border:1px solid var(--grayscale3); box-shadow:var(--sitelo-shadow); border-radius:12px; background: var(--color-white);}
.help-section .help-list a {display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-bottom: 1px solid var(--grayscale3);}
.help-section .help-list a .list-info {display: flex; flex-direction: column; row-gap: 4px;}
.help-section .help-list a .list-info strong {font-size: var(--fs-18); font-weight: 500; color: var(--grayscale9);}
.help-section .help-list a .list-info p {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-16); font-weight:500; color:var(--grayscale8);}
.help-section .help-list a .list-date {display: flex; align-items: center; column-gap: 40px;}
.help-section .help-list a .list-date .date {font-size: var(--fs-16); font-weight: 500; color: var(--grayscale6);}
.help-section .help-list a:first-of-type {padding: 0 0 24px 0;}
.help-section .help-list a:last-of-type {padding: 24px 0 0 0; border-bottom: 0;}
.help-section .btn-wrap {margin-top: 60px;}

.inquiry-wrap {display:flex; justify-content:space-between; align-items:flex-start; column-gap:80px;}
.inquiry-wrap .inquiry-info {width:100%; max-width:332px; display: flex; flex-direction: column; row-gap: 100px;}
.inquiry-wrap .inquiry-info .section-tit-wrap {margin-bottom: 0;}
.inquiry-wrap .inquiry-info .info-list {display:flex; flex-direction:column; row-gap:50px;}
.inquiry-wrap .inquiry-info .info-list li {display:flex; align-items:flex-start; column-gap:20px;}
.inquiry-wrap .inquiry-info .info-list li .icon {width:48px; height:48px; border-radius:50%; background-color: #E9E9FF; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius: 50%;}
.inquiry-wrap .inquiry-info .info-list li .txt {display: flex; flex-direction: column; row-gap: 6px;}
.inquiry-wrap .inquiry-info .info-list li .txt strong {font-size: var(--fs-20); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.inquiry-wrap .inquiry-info .info-list li .txt p {font-size: var(--fs-16); font-weight:500;  line-height:1.5; color:var(--grayscale8);}

.inquiry-form-modal {max-width: 520px;}
.inquiry-form-modal .modal-cont {display: flex; flex-direction: column; row-gap: 20px; justify-content: center; align-items: center; padding-top: 30px;}
.inquiry-form-modal .modal-cont span {font-size: var(--fs-18); font-weight: 500; color: var(--grayscale8); margin-bottom: 40px; text-align: center;}
.inquiry-form-modal .modal-close-btn {width: 100%; height: auto; border-radius: 12px; background: var(--color-main); font-size: var(--fs-16);}

/* 고객센터 */
/* 문의 list */
/* 수정 전
.customer-board {border-top:1px solid var(--grayscale3);}
.customer-table th,
.customer-table td {height:70px; text-align:center; vertical-align:middle; padding: 0 16px; word-break: keep-all;}
.customer-table th {border-top:1px solid var(--grayscale5); border-bottom:1px solid var(--grayscale5); background-color: var(--grayscale2); font-weight: 400; font-size:var(--fs-18);color:var(--grayscale9);}
.customer-table td {border-bottom:1px solid var(--grayscale3); font-size:var(--fs-18); color:var(--grayscale7);}
.customer-table tr:hover td {background-color: var(--grayscale1); transition: all 0.2s;}
.customer-table .subject {padding: 0 36px;}
.customer-table .subject .subject-name {text-align:left; color:var(--grayscale10); display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.customer-table .complete {color:var(--color-main);}*/

.cs-wrap .cs-top {display:flex; justify-content:flex-end; margin-bottom:32px;}
.cs-wrap .cs-top .btn {display:flex; align-items:center; justify-content:center; width:136px; height:48px; border:1px solid var(--color-main); border-radius:16px; color:var(--color-main); font-weight:600;}
.cs-wrap .cs-list {display:flex; flex-direction:column; row-gap:16px;}
.cs-wrap .cs-list li a {display:flex; justify-content:space-between; align-items:center; padding: 24px 40px; border:1px solid var(--grayscale3); border-radius:12px;}
.cs-wrap .cs-info {width: calc(100% - 352px); display:flex; flex-direction:column; row-gap:8px;}
.cs-wrap .cs-info .table-txt {width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-wrap .cs-meta {display:flex; align-items:center; column-gap:80px;}
.cs-wrap .cs-meta span {font-size:var(--fs-16); font-weight: 500; color:var(--grayscale6);}
.cs-wrap .cs-writer,
.cs-wrap .cs-date,
.cs-wrap .cs-state {flex-shrink:0;}
.cs-wrap .cs-state.complete {color: var(--color-main);}

.inquiry-category {width: fit-content; display:inline-flex; justify-content:center; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size: 12px; font-weight:500;}
.inquiry-category.payment {background:#EEF2FF; color:#6366F1;}
.inquiry-category.reservation {background:#ECFDF3; color:#16A34A;}
.inquiry-category.setting {background:#FFF7ED; color:#EA580C;}
.inquiry-category.etc {background:#F3F4F6; color:#6B7280;}

/* 문의 view */
.inquiry-view-wrap {display: flex; flex-direction: column; row-gap: 80px;}
.inquiry-view-wrap .btn-wrap {justify-content: center;}
.inquiry-view-wrap .inquiry-view-tit-wrap {display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom: 24px;}
.inquiry-view-wrap .inquiry-view-tit-wrap .inquiry-view-tit {font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale9); display: flex; align-items: center; column-gap: 20px;}
.inquiry-view-wrap .inquiry-view-tit-wrap .inquiry-tit-text {display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.inquiry-view-wrap .inquiry-view-tit-wrap .inquiry-view-state.complete {color:var(--color-main); font-size: var(--fs-18); flex-shrink: 0;}
.inquiry-view-wrap .inquiry-view-btn-wrap {display:flex; align-items:center; gap:25px; flex-shrink:0;}
.inquiry-view-wrap .inquiry-view-btn-wrap button {font-size:var(--fs-16); font-weight:500; color:var(--grayscale6);}
.inquiry-view-wrap .inquiry-view-btn-wrap .delete-btn {position: relative; color:#FF5B5B;}
/* .inquiry-view-wrap .inquiry-view-btn-wrap .delete-btn::after {position: absolute; width: 1px; height: 19px; left: -12px; top: 50%; transform: translateY(-50%); background-color: var(--grayscale3); content: ''; display: block;} */
.inquiry-view-wrap .inquiry-view-info {display:flex; flex-direction: column; row-gap: 14px; padding: 24px 16px; border-top: 1px solid var(--grayscale3); border-bottom: 1px solid var(--grayscale3);}
.inquiry-view-wrap .inquiry-view-info .info-item {display:flex; align-items:center; column-gap:64px;}
.inquiry-view-wrap .inquiry-view-info .info-label {min-width: 64px; font-size:var(--fs-16); font-weight:500; color:var(--grayscale7);}
.inquiry-view-wrap .inquiry-view-info .info-value:not(.inquiry-category) {font-size:var(--fs-16); font-weight:500; color:var(--grayscale9);}
.inquiry-view-wrap .inquiry-view-info .info-value.inquiry-category {font-size: var(--fs-14); height: 28px;}
.inquiry-view-wrap .inquiry-view-content {display: flex; flex-direction: column; row-gap: 60px;}
.inquiry-view-wrap .inquiry-view-content .content-tit {margin-bottom:12px; font-size:var(--fs-20); font-weight:500; color:var(--grayscale9);}
.inquiry-view-wrap .inquiry-view-content .content-box {padding:30px; word-break: keep-all; border:1px solid var(--grayscale3); border-radius:12px; font-size:var(--fs-18); line-height:1.5; color:var(--grayscale8);}
.inquiry-view-wrap .inquiry-view-content .answer-box {background:var(--grayscale1); border: 0;}
.inquiry-view-wrap .inquiry-view-content .answer-info {display:flex; align-items:center; column-gap: 12px; margin-bottom:20px;}
.inquiry-view-wrap .inquiry-view-content .answer-state {font-size:var(--fs-18); font-weight:500; color:var(--color-main);}
.inquiry-view-wrap .inquiry-view-content .answer-date {font-size:var(--fs-16); font-weight:500; color:var(--grayscale7);}
.inquiry-view-wrap .inquiry-view-content .answer-content {font-size:var(--fs-18); line-height:1.5; color:var(--grayscale8);}

/* 회원가입 */
.member-form-wrap {max-width: 553px; margin: 0 auto;}
.member-form-wrap .input-form form {display: flex; flex-direction: column; row-gap: 14px;}
.member-form-wrap .join-link {font-size: var(--fs-14); display: flex; align-items: center; justify-content: center; column-gap: 6px; margin-top: 18px;}
.member-form-wrap .join-link a {color: var(--color-main);}

.join-form-wrap {display: flex; flex-direction: column; row-gap: 60px;}
.join-form-wrap .join-form > span {font-size: var(--fs-20); padding-bottom: 24px; font-weight: 500;}

.login-form-wrap {display: flex; flex-direction: column; row-gap: 40px;}
.login-form-wrap .input-form > a {width: 100%; font-size: var(--fs-14); text-decoration: underline; text-align: right; margin-top: 16px;}
.login-form-wrap .btn-wrap {flex-direction: column; row-gap: 12px;}
.login-form-wrap .btn-wrap .kakao-btn {background-color: #FEE500; column-gap: 10px;}

/* =========================================================
RESPONSIVE
========================================================= */
@media screen and (max-width:1440px) {
    .setup-process-wrap {column-gap: 8vw;}
}

@media screen and (max-width:1024px) {
    
    .setup-process-wrap {column-gap: 6vw;}
    .setup-process-wrap .setup-step-list {max-width: 280px;}
    .setup-process-wrap .setup-swiper .swiper-slide {height: 58vw;}

    .help-section .help-list {padding: 30px 40px;}

    .inquiry-wrap {flex-direction: column; row-gap: 80px; align-items: center;}
    .inquiry-wrap .inquiry-info {max-width: 100%; row-gap: 60px;}
    .inquiry-wrap .inquiry-info .info-list {flex-direction: row; justify-content: space-between; column-gap: 30px;}
    .inquiry-wrap .inquiry-info .info-list li {flex-direction: column; row-gap: 20px;}

    
}

@media screen and (max-width:768px) {
    
    .compare-section .compare-table .compare-item .cell {height: 68px;}
    
    .setup-process-wrap .setup-visual {position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;}
    .setup-process-wrap .setup-step > div {opacity:.4; transition:all .4s ease;}
    .setup-process-wrap .setup-step.active > div {opacity:1;}
    .setup-process-wrap .setup-step > div .mo-mode {display:block; height:48vw; margin-top:10px;}
    .setup-process-wrap .setup-step-list {max-width:100%;}
    .setup-process-wrap .setup-step-list::before {height:calc(100% - 23%);}
        
    .inquiry-wrap {row-gap: 60px;}
    .inquiry-wrap .inquiry-info .info-list {flex-wrap: wrap;}
    .inquiry-wrap .inquiry-info .info-list li {flex-direction: row;}
    .inquiry-view-wrap {row-gap: 60px;}
    .inquiry-view-wrap .inquiry-view-content {row-gap: 40px;}
    .inquiry-view-wrap .inquiry-view-tit-wrap {flex-wrap: wrap; row-gap: 20px; padding-bottom: 12px;}

    .help-section .help-list a {flex-direction: column; row-gap: 10px; align-items: flex-start;}
    .help-section .help-list a .list-info {width: 100%;}
    .help-section .help-list a .list-date {width: 100%; justify-content: space-between;}

    /* 수정 전
    .customer-top {justify-content: flex-start;}
    .customer-table {table-layout:auto;}
    .customer-table colgroup {display:none;}
    .customer-table thead {display: none;}
    .customer-table tr {display: flex; flex-wrap: wrap; width: 100%; padding: 12px 4px; row-gap: 6px; column-gap: 18px; border-bottom: 1px solid var(--grayscale3);}
    .customer-table td {border-bottom: 0; padding: 0 !important; height: auto; text-align: left;}
    .customer-table td.num,
    .customer-table td.subject,
    .customer-table td.status {width: 100%;}
    .customer-table td.status > span {font-size: 14px; padding: 4px 10px; border-radius: 8px; background-color: var(--grayscale2);}
    .customer-table td.status.complete > span {color: var(--color-white); background-color: var(--color-main);}
    .customer-table tr:hover td {background-color: transparent;}
    .customer-table tr:hover {background-color: var(--grayscale1);}*/

    .cs-wrap .cs-info {width: 100%;}
    .cs-wrap .cs-list li a {flex-direction: column; row-gap: 10px; align-items: flex-start; padding: 24px 30px;}
    .cs-wrap .cs-meta {column-gap: 30px;}
}

@media screen and (max-width:480px) {
    .sub-outro-section .l2-btn {padding: 18.5px 0; width: 50%;}
    .sub-outro-section .hero-tit br {display: none;}
    
    .setup-process-wrap .setup-step {padding-left: 40px;}
    .setup-process-wrap .setup-step .num {width: 29px; height: 29px; font-size: 15px;}
    .setup-process-wrap .setup-step-list::before {left: 14px;}
    
    .compare-section .compare-table .compare-item .cell {height: 15vw;}
    .compare-section .compare-table .compare-item .cell,
    .compare-section .compare-table .compare-item:first-child .cell.head {font-size: 3.9vw;}
    .compare-section .compare-table .compare-item:first-child .cell:not(.head) {font-size: 3.5vw;}

    .inquiry-wrap .inquiry-info .info-list li {flex-direction: column;}
    .inquiry-view-wrap .inquiry-view-content .content-box {padding: 30px 20px;}

}

/*********/
/*********/
/*********/
/*********/
/*********/
/*********/