@charset "utf-8";
/* inner */
.l-inner, .m-inner, .s-inner {width: calc(100% - 100px); margin-inline: auto;}
.l-inner {max-width: 1520px;}
.m-inner {max-width: 1390px;}
.s-inner {max-width: 1262px;}

/* 인풋 */
input[type="submit"] {cursor:pointer;}

/* =========================================================

========================================================= */
:root {
    --header-height: 0px;
    
    /* main color */
    --color-main: #6366F1;
    --color-main-rgb: 99,102,241;
    --color-main-30: #6366F14D;
    --color-main-10: #6366F11A;
    --color-sub: #262626;

    /* base color */
    --color-white: #fff;
    --color-white-30: #ffffff4D;
    --color-black: #000;
    --color-black-rgb: 0,0,0;

    /* state color */
    --color-red: #EF4444;
    --color-green: #34C759;

    /* grayscale */
    --grayscale11: #0A0A0A;
    --grayscale10: #171717;
    --grayscale9: #262626;
    --grayscale8: #404040;
    --grayscale7: #525252;
    --grayscale6: #737373;
    --grayscale5: #A3A3A3;
    --grayscale4: #D4D4D4;
    --grayscale3: #E5E5E5;
    --grayscale2: #F5F5F5;
    --grayscale1: #FAFAFA;

    /* font size */
    --fs-64: clamp(40px, 4.44vw, 64px);
    --fs-50: clamp(36px, 3.47vw, 50px);
    --fs-48: clamp(34px, 3.33vw, 48px);
    --fs-44: clamp(32px, 3.05vw, 44px);
    --fs-40: clamp(30px, 2.78vw, 40px);
    --fs-36: clamp(28px, 2.5vw, 36px);
    --fs-32: clamp(26px, 2.22vw, 32px);
    --fs-24: clamp(20px, 1.67vw, 24px);
    --fs-20: clamp(18px, 1.39vw, 20px);
    --fs-18: clamp(16px, 1.25vw, 18px);
    --fs-16: clamp(15px, 1.11vw, 16px);
    --fs-14: clamp(12px, 0.97vw, 14px);

    /* shadow */
    --sitelo-shadow:0px 0px 30px #0000000D;
}

/* 텍스트 */
.hero-tit {word-break: keep-all; font-size:var(--fs-64); font-weight: 700; line-height:1.2; color:var(--grayscale11);}
.section-tit {word-break: keep-all; font-size:var(--fs-36); font-weight: 600; line-height:1.3; color:var(--grayscale11);}
.section-tit2 {font-size:var(--fs-32); font-weight: 600; line-height:1.4; color:var(--grayscale11);}
.card-tit, .hero-sub {font-size:var(--fs-24); font-weight: 500;; line-height:1.5; color:var(--grayscale9);}
.table-txt {font-size:var(--fs-20); font-weight: 500;; line-height:1.5; color:var(--grayscale9);}
.section-sub,
.body-txt {font-size:var(--fs-18); font-weight: 400;; line-height:1.5; color:var(--grayscale7);}
.sub-txt {font-size:var(--fs-16); font-weight: 400;; line-height:1.5; color:var(--grayscale6);}
.card-txt {font-size:var(--fs-14); font-weight: 300; line-height:1.5; color:var(--grayscale8);}
.badge-txt {font-size:var(--fs-14); font-weight: 300; line-height:1.5; color:var(--grayscale6);}
.desc {font-size: var(--fs-16); color: var(--grayscale6);}

/* 색상 */
.bg-gray {background-color: var(--grayscale1);}

/* 공통요소 */
.s-inner.center > * {text-align: center;}
.thumb-wrap img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.section-tit-wrap {display: flex; flex-direction: column; row-gap: 16px; margin-bottom: 80px;}
.section-tit-wrap.center > * {text-align: center;}
.subpage-section .hero-sub {margin-top: 24px; color: var(--grayscale8);}
.sub-tit {font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.body-tit {font-size: var(--fs-24); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.txt-wrap.center > * {text-align: center;}

/* =========================================================
    COMMON COMPONENT CSS

    포함 컴포넌트
    01. textbox
    02. label + textbox
    03. dropdown button
    04. selectbox
    05. button - s-btn / m-btn / l-btn
    06. badge
    07. toggle
    08. sort
    09. pagination
    10. FAQ

========================================================= */

/* =========================================================
    01. TEXTBOX

    [HTML]
    <input type="text" class="textbox" placeholder="내용을 입력해주세요.">

    <textarea class="textbox textarea" placeholder="내용을 입력해주세요."></textarea>
========================================================= */
.textbox {transition:border-color 0.2s, box-shadow 0.2s; width:100%; height: calc(var(--fs-20) * 3); padding:0 var(--fs-16); border:1px solid var(--grayscale3); border-radius: 8px; background-color:var(--color-white); font-size:var(--fs-18); font-weight: 400;; color:var(--grayscale8);}
.textbox::placeholder {color:var(--grayscale5); opacity:1;}
.textbox:focus {border-color:var(--color-main); border: 1px solid var(--color-main);}
.textbox:disabled {background-color:var(--grayscale2); color:var(--grayscale5); cursor:not-allowed;}
.textbox.textarea {height:auto; min-height:150px; padding:var(--fs-16); line-height:1.5; resize:none; overflow:auto;}

/* =========================================================
    02. LABEL + TEXTBOX

    [HTML]
    <div class="input-item">
        <label for="userName">이름 <span class="required">*</span></label>
        <input type="text" id="userName" class="textbox" placeholder="이름을 입력해주세요.">
        <p class="input-guide">안내 문구가 들어갑니다.</p>
    </div>

    [ERROR]
    <div class="input-item is-error">
        <label for="userEmail">이메일 <span class="required">*</span></label>
        <input type="email" id="userEmail" class="textbox" placeholder="이메일을 입력해주세요.">
        <p class="input-msg">올바른 이메일을 입력해주세요.</p>
    </div>

    [SUCCESS]
    <div class="input-item is-success">
        <label for="userPhone">연락처</label>
        <input type="tel" id="userPhone" class="textbox" placeholder="연락처를 입력해주세요.">
        <p class="input-msg">사용 가능한 연락처입니다.</p>
    </div>
========================================================= */
.input-multi {display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.input-item {display:flex; flex-direction:column; row-gap:8px;}
.input-item label {font-size: var(--fs-18); color:var(--grayscale9);}
.input-item label .required {color:var(--color-main);}
.input-item .input-guide {font-size:var(--fs-14); font-weight: 400;; color:var(--grayscale5);}
.input-item .desc {color: var(--grayscale7);}
.input-item .input-msg {display:none; font-size:var(--fs-14); font-weight: 400;}
.input-item.is-error .textbox {border-color:var(--color-red);}
.input-item.is-error .input-msg {display:block; color:var(--color-red);}
.input-item.is-success .textbox {border-color:var(--color-green);}
.input-item.is-success .input-msg {display:block; color:var(--color-green);}
.input-item .input-item-btn {display: flex; column-gap: 8px;}

/* =========================================================
    03. DROPDOWN BUTTON

    select 대신 button으로 만드는 드롭다운

    [HTML]
    <div class="dropdown">
        <button type="button" class="dropdown-btn">
            <span>문의 유형을 선택해주세요.</span>
        </button>

        <ul class="dropdown-list">
            <li><button type="button">예약 시스템 문의</button></li>
            <li><button type="button" class="active">결제 연동 문의</button></li>
            <li><button type="button">세팅 문의</button></li>
            <li><button type="button">기타 문의</button></li>
        </ul>
    </div>

    [OPEN]
    <div class="dropdown open">...</div>
========================================================= */
.dropdown {position:relative; width:100%;}
.dropdown-btn {transition:border-color 0.2s, box-shadow 0.2s; position:relative; width:100%; height:60px; display: flex; align-items: center; justify-content: space-between; padding:0 16px; border:1px solid var(--grayscale3); border-radius:8px; background-color:var(--color-white); text-align:left; font-size:var(--fs-18); font-weight: 400;; color:var(--grayscale5);}
.dropdown-btn span {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dropdown-btn svg {transform:rotate(0deg); transition:transform 0.2s;}
/*.dropdown-btn::after {content:''; position:absolute; top:50%; right:23px; width:8px; height:8px; border-right:2px solid var(--grayscale6); border-bottom:2px solid var(--grayscale6); transform:translateY(-65%) rotate(45deg); transition:transform 0.2s;}*/
.dropdown.open .dropdown-btn {border-color:var(--color-main);}
.dropdown.open .dropdown-btn svg {transform:rotate(180deg);}
.dropdown-list {display:none; overflow:hidden; position:absolute; top:calc(100% + 8px); left:0; z-index:50; width:100%; border:1px solid var(--grayscale3); border-radius:12px; background-color:var(--color-white); box-shadow:0 12px 30px rgba(var(--color-black-rgb),0.08);}
.dropdown.open .dropdown-list {display:block;}
.dropdown.selected .dropdown-btn span {color:var(--grayscale8);}
.dropdown-list li button {width:100%; min-height:60px; padding:0 16px; border-radius: 8px; text-align:left; font-size:var(--fs-18); font-weight: 400;; color:var(--grayscale8);}
.dropdown-list li button:hover,
.dropdown-list li button.active {background-color:var(--color-main); color:var(--color-white);}
.dropdown-list li button:disabled {color:var(--grayscale5); cursor:not-allowed;}
.dropdown-list li button:disabled:hover {background-color:var(--color-white);;}

/* =========================================================
04. SELECTBOX

[HTML]
    <div class="selectbox">
        <select>
            <option value="">문의 유형을 선택해주세요.</option>
            <option value="reservation">예약 시스템 문의</option>
            <option value="payment">결제 연동 문의</option>
            <option value="setting">세팅 문의</option>
        </select>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 9L12.1414 13.8586C12.0633 13.9367 11.9367 13.9367 11.8586 13.8586L7 9" stroke="#737373" stroke-width="2" stroke-linecap="round"/>
        </svg>
    </div>
========================================================= */
.selectbox {position:relative;}
.selectbox select {transition:border-color 0.2s, box-shadow 0.2s; cursor:pointer; width:100%; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 48px 0 16px; border:1px solid var(--grayscale3); border-radius:8px; background-color:var(--color-white); text-align:left; font-size:var(--fs-18); font-weight:400; color:var(--grayscale5);}
.selectbox.selected select {color:var(--grayscale8);}
.selectbox svg {position:absolute; top:50%; right:16px; transform:translate(0,-50%) rotate(0deg); transition:transform 0.3s ease; pointer-events:none;}
.selectbox select:focus {border:1px solid var(--color-main); outline:0;}
.selectbox:focus-within svg {transform:translate(0,-50%) rotate(180deg);}

/* =========================================================
    05. BUTTON

    [HTML]
    <button type="button" class="s-btn primary">작은 버튼</button>
    <button type="button" class="m-btn primary">중간 버튼</button>
    <button type="button" class="l-btn primary">큰 버튼</button>

    [COLOR]
    primary / dark / gray / line / white

    <button type="button" class="m-btn line">취소</button>
========================================================= */
.btn-wrap {display: flex; align-items: center; column-gap: 20px;}
.btn-wrap.center {justify-content: center;}
.btn-list {display: flex; align-items: center; flex-direction: column; row-gap: 12px;}
.s-btn, .s2-btn, .m-btn, .l-btn, .l2-btn, .input-btn {transition: box-shadow 0.2s ease; display:inline-flex; align-items:center; justify-content:center; column-gap:6px; border:1px solid transparent; border-radius:12px; font-weight: 500;; white-space:nowrap;}
.s-btn {padding: 10px 24px; font-size:var(--fs-16);}
.s2-btn {padding: 12px 24px; font-size:var(--fs-16);}
.m-btn {padding: 13px 24px; font-size:var(--fs-16);}
.l-btn {padding: 14.5px 24px; font-size:var(--fs-18);}
.l2-btn {padding: 18.5px 24px; font-size:var(--fs-18);}
.input-btn {height: calc(var(--fs-20) * 3); padding: 0 calc(var(--fs-16) * 2); font-size:var(--fs-16);}
.s-btn.w-100, .s2-btn.w-100, .m-btn.w-100, .l-btn.w-100, .l2-btn.w-100 {width: 100%;}
.s-btn:disabled, .s2-btn:disabled, .m-btn:disabled, .l-btn:disabled , .l2-btn:disabled {background-color:var(--grayscale3); border-color:var(--grayscale3); color:var(--grayscale5); cursor:not-allowed;}
.round-btn {transition: box-shadow 0.2s ease; border: 2px solid transparent; font-weight: 600; padding: 9.5px 48px; border-radius: 999px; font-size: var(--fs-32);}
/* 버튼색 */
.primary-line-btn {background-color:var(--color-white); color:var(--color-main); border-color: var(--color-main);}
.primary-btn {background-color:var(--color-main); color:var(--grayscale1);}
.white-btn {border-color:var(--grayscale3); background-color:var(--color-white); color:var(--grayscale8);}


/* =========================================================
    06. BADGE

    [HTML]
    <span class="badge">기본</span>
========================================================= */
.badge-wrap {display: flex; align-items: center; column-gap: 8px;}
.badge {display:inline-flex; align-items:center; justify-content:center; width:fit-content; min-height:28px; padding:5px 10px; border:1px solid transparent; border-radius:999px; background-color: var(--grayscale2); color: var(--grayscale6); font-size:var(--fs-14); font-weight: 500;; line-height:1;}
.badge.primary {color: var(--color-main);}
.badge.primary-bg {color: var(--color-main); background-color: #6366F133;}
.badge.red-bg {color: var(--color-red); background-color: #FEF2F2;}

/* =========================================================
    07. TOGGLE

    [HTML]
    <div class="toggle-wrap">
        <button class="toggle-btn active">월간 결제</button>
        <button class="toggle-btn">연간 결제</button>
    </div>

========================================================= */
.toggle-wrap {overflow: hidden; position: relative; width: fit-content; padding: 4px; border-radius: 99px; border: 1px solid var(--grayscale3); background-color: var(--color-white); display: flex; align-items: center;}
.toggle-wrap::after {content: ''; z-index: 0; position: absolute; top: 4px; left: 4px; width: var(--toggle-width, 0px); height: calc(100% - 8px); border-radius: 99px; background-color: var(--color-main); transform: translateX(var(--toggle-left, 0px)); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.25s ease;}
.toggle-wrap .toggle-btn {z-index: 1; position: relative; transition: color 0.2s ease; padding: 8px 30px; border-radius: 99px; font-size: var(--fs-18); background-color: transparent; font-weight: 500; line-height: 1.5; color: var(--grayscale8);}
.toggle-wrap .toggle-btn.active {color: var(--color-white);}
.toggle-wrap .toggle-btn:not(.active):hover {color: var(--color-main);}

/* =========================================================
    08. SORT

    [HTML]
    <div class="sort">
        <button type="button" class="sort-btn active">최신순</button>
        <button type="button" class="sort-btn">인기순</button>
        <button type="button" class="sort-btn">조회순</button>
    </div>

    [SELECT 형태]
    <div class="sort-select">
        <button type="button">최신순</button>
    </div>
========================================================= */
.sort {display:flex; align-items:center; flex-wrap:wrap;}
.sort-btn {transition: color 0.3s; font-size: var(--fs-14); font-weight: 500; line-height: 1.5; color: var(--grayscale6);}
.sort-btn:hover {color: var(--grayscale9);}
.sort-btn.active {color: var(--color-main);}
.sort-btn+.sort-btn {margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--grayscale3);}

/* =========================================================
    09. PAGINATION

    [HTML]
    <nav class="pagination">
        <a href="#" class="arrow prev disable" aria-label="이전 페이지">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 17L9.14142 12.1414C9.06332 12.0633 9.06332 11.9367 9.14142 11.8586L14 7" stroke="#737373" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </a>
        <a href="#">1</a>
        <a href="#" class="active">2</a>
        <a href="#">3</a>
        <span>...</span>
        <a href="#">10</a>
        <a href="#" class="arrow next" aria-label="다음 페이지">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 7L13.8586 11.8586C13.9367 11.9367 13.9367 12.0633 13.8586 12.1414L9 17" stroke="#737373" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </a>
    </nav>
========================================================= */
.pagination {display:flex; align-items:center; justify-content:center; gap: var(--fs-16); margin-top:calc(var(--fs-20) * 5);}
.pagination a,
.pagination span {transition:background-color 0.2s, border-color 0.2s, color 0.2s; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid transparent; border-radius:99px; font-size:var(--fs-16); font-weight: 500;; color:var(--grayscale6);}
.pagination a:hover {color: var(--grayscale9);}
.pagination a.active {background-color:var(--color-main); color:var(--color-white);}
.pagination a.arrow.disable {pointer-events: none;}
.pagination a.arrow.disable svg path {stroke: var(--grayscale4);}
.pagination a.arrow:hover svg path {stroke: var(--grayscale9);}


/* =========================================================
    10. FAQ

    [HTML]
    <div class="faq-list">
        <div class="faq-item">
            <button type="button" class="faq-question">
                <span class="faq-num">01</span>
                <span class="faq-tit">세팅 기간은 얼마나 걸리나요</span>
            </button>
            <div class="faq-answer">
                <p>약 3~7일 정도 소요되며 세팅 내용과 일정에 따라 상이할 수 있으며,<br>정확한 일정은 상담 후 안내드립니다.</p>
            </div>
        </div>

        <div class="faq-item">
            <button type="button" class="faq-question">
                <span class="faq-num">02</span>
                <span class="faq-tit">자동결제는 어떻게 진행되나요?</span>
            </button>
            <div class="faq-answer">
                <p>자동결제 안내 내용이 들어갑니다.</p>
            </div>
        </div>
    </div>

    [OPEN]
    <div class="faq-item open">...</div>
========================================================= */
.faq-list {}
.faq-item {border-bottom:1px solid var(--grayscale3); padding-block: calc((var(--fs-20) * 2) - 6px);}
.faq-item:first-child {padding-top: 0;}
.faq-item .faq-question {height: calc(var(--fs-24) * 2); position:relative; display:flex; align-items:center; width:100%; text-align:left; column-gap: 12px;}
.faq-item .faq-question .faq-num,
.faq-item .faq-question .faq-tit {font-size:var(--fs-24); font-weight: 500; line-height:1.5; color:var(--grayscale9);}
.faq-item .faq-question::after {content:''; background-image: url(../img/faq-arrow.svg); background-repeat: no-repeat; background-position: center center; position:absolute; top:50%; right:4px; width: var(--fs-36); height: var(--fs-36); transform: translateY(-50%); transition:transform 0.25s ease;}
.faq-item .faq-answer {overflow:hidden; height:0; opacity:0; padding-top: 0; transition:height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;}
.faq-item .faq-answer p {padding-top: var(--fs-36); font-size:var(--fs-18); line-height: 1.5; color:var(--grayscale8);}
.faq-item.open .faq-question::after {transform: translateY(-50%) rotate(180deg);}
.faq-item.open .faq-answer {opacity:1;}




/* =========================================================
    11. Tab

    [HTML]
    <div class="tab swiper">
        <div class="swiper-wrapper">
            <button type="button" class="tab-btn swiper-slide active">탭1</button>
            <button type="button" class="tab-btn swiper-slide">탭2</button>
            <button type="button" class="tab-btn swiper-slide">탭3</button>
        </div>
    </div>

    [ACTIVE]
    <button type="button" class="tab-btn active">전체</button>
========================================================= */
.tab {overflow:hidden; width:100%;}
.tab .swiper-wrapper {display:flex; align-items:center;}
.tab .tab-btn {width:auto; flex-shrink:0; transition:background-color 0.3s, border-color 0.3s, color 0.3s; padding:7.5px 20px; border-radius:99px; border:1px solid var(--grayscale3); background-color:var(--color-white); font-size:var(--fs-14); font-weight:500; line-height:1.5; color:var(--grayscale6);}
.tab .tab-btn:hover {border-color:var(--color-main); color:var(--color-main);}
.tab .tab-btn.active {background-color:var(--color-main); border-color:var(--color-main); color:var(--color-white);}


/* =========================================================
   12. 모달

    <button type="button" data-modal-open="testModal">모달열기</button>

    <div class="modal" id="testModal">
        <div class="modal-tit-wrap">
            <h4 class="modal-tit">모달 제목</h4>
            <button type="button" class="modal-close-btn">닫기</button>
        </div>
        <div class="modal-cont">
            <p>모달 내용입니다.</p>
        </div>
    </div>
    <div class="modal-bg"></div>

========================================================= */
.modal {scrollbar-width: thin; scrollbar-color: rgba(var(--color-black-rgb),0.1) transparent; display: none; width: 90%; max-width: 600px; height: fit-content; max-height: 80vh; overflow-y: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 24px; border-radius: 12px; background-color: var(--color-white); z-index: 999999;}
.modal-bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-black); opacity: 0.5; z-index: 999998;}
.modal.open,
.modal.open+.modal-bg {display: block !important;}
.modal::-webkit-scrollbar {display: none;}
.modal .modal-tit-wrap {display: flex; align-items: center; justify-content: space-between;}
.modal .modal-tit {font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.modal .modal-close-btn {border-radius: 50%; transition: box-shadow 0.2s ease; font-size: 0; width: 32px; height: 32px; background-image: url(../img/modal-close.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
.modal .modal-cont {margin-top: 20px;}

.price-slider-wrap {display:flex; flex-direction:column; align-items:center;}
.price-slider-wrap > .desc {margin-top:40px;}
.price-slider-wrap .price-slider {width:100%; max-width:1006px; margin-top:60px;}
.price-slider-wrap .price-panel {display:none;}
.price-slider-wrap .price-panel.active {display:block;}
.price-slider-wrap .price-wrap {overflow:hidden; width:100%;}
.price-slider-wrap .price-card-list {align-items:stretch;}
.price-slider-wrap .price-card {height:auto; display:flex; flex-direction:column; justify-content:space-between; padding:30px; border-radius:8px; border:1px solid var(--grayscale3); background:var(--color-white);}
.price-slider-wrap .price-card .info-wrap {display:flex; flex-direction:column; row-gap:24px;}
.price-slider-wrap .price-card .card-head {display: flex; flex-direction: column;}
.price-slider-wrap .price-card .card-head .card-tit {margin-top: 12px;}
.price-slider-wrap .price-card .card-head .card-txt {margin-top: 4px;}
.price-slider-wrap .price-card .price-box {padding-block:24px; display:flex; flex-direction:column; row-gap:24px; border-top:1px solid var(--grayscale3); border-bottom:1px solid var(--grayscale3);}
.price-slider-wrap .price-card .price-box .price-row {display:flex; flex-direction:column;}
.price-slider-wrap .price-card .price-box .price-row + .price-row {padding-top:24px; border-top:1px solid var(--grayscale3);}
.price-slider-wrap .price-card .price-box .price-row > span {font-size:var(--fs-16); color:var(--grayscale7);}
.price-slider-wrap .price-card .price-box .discount-item {display: flex; align-items: center; column-gap: 10px; margin-top: 8px;}
.price-slider-wrap .price-card .feature-list li.button-li {margin-top: 10px; display: none;}
.price-slider-wrap .price-card .feature-list li.button-li::after {background-image:url(../img/plus-ico.svg);}
.price-slider-wrap .price-card .price-box .discount-item del {font-size: var(--fs-20); font-weight: 500; line-height: 1.5; color: var(--grayscale5);}
.price-slider-wrap .price-card .bot-wrap {border-top:1px solid var(--grayscale3); padding-top:20px; display:flex; flex-direction:column; row-gap:20px;}
.price-slider-wrap .price-card .bot-wrap .desc {word-break: keep-all;}

.price-item {flex-wrap: wrap; display:flex; align-items:center; gap:4px;}
.price-item strong {font-size:var(--fs-36); color:var(--grayscale9); font-weight:600; line-height:1.3;}
.price-item span {font-size:var(--fs-16); color:var(--grayscale7);}
.price-item em {font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.price-item b {font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale7);}


.feature-list {display:flex; flex-direction:column; row-gap:12px; padding-bottom: 24px;}
.feature-list li {padding-left: calc(var(--fs-20)*2); font-size:var(--fs-18); color:var(--grayscale8); position:relative;}
.feature-list li::after {width:20px; height:20px; content:''; display:block; background-image:url(../img/list-check.svg); background-repeat:no-repeat; background-position:center center; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.feature-list li.point {font-size:var(--fs-20); color:var(--color-main); font-weight: 500;}
.modal .feature-list {padding-bottom: 0;}

.template-list {display: flex; align-items: center; flex-wrap: wrap; column-gap: 24px; row-gap: 48px;}
.template-card {width: calc(100% / 3 - 48px / 3); overflow: hidden; box-shadow: var(--sitelo-shadow);border-radius: 16px; border: 1px solid var(--grayscale3);}
.template-card .thumb-wrap {overflow: hidden; aspect-ratio: 490 / 460; width: 100%; height: auto; border-bottom: 1px solid var(--grayscale3);}
.template-card .thumb-wrap img {transition: transform 0.3s;}
.template-card .info-wrap {padding: 24px; padding-bottom: 42px; display: flex; flex-direction: column; row-gap: 6px;}
.template-card .info-wrap .card-txt {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* =========================================================
   13. SEARCH BOX

        <div class="search-box">
            <input type="text" class="textbox" placeholder="텍스트를 입력해주세요.">
            <button type="submit" class="btn-search">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#737373" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>

========================================================= */
.search-box {position: relative; max-width: 748px; margin: 0 auto;}
.search-box .textbox {padding: 0 56px 0 16px;}
.search-box button {position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}

/* =========================================================
   14. Inquiry form

        <div class="input-form-wrap">
            <form>
                <div class="input-multi">
                    <div class="input-item">
                        <label>이름</label>
                        <input type="text" class="textbox" placeholder="이름">
                    </div>

                    <div class="input-item">
                        <label>연락처</label>
                        <input type="text" class="textbox" placeholder="01012345678">
                    </div>
                </div>
                <div class="input-item">
                    <label>이메일</label>
                    <input type="email" class="textbox" placeholder="example@email.com">
                </div>
                <div class="input-item">
                    <label>문의 유형</label>
                    <div class="dropdown">
                        <button type="button" class="dropdown-btn">
                            <span>문의 유형을 선택해주세요.</span>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17 9L12.1414 13.8586C12.0633 13.9367 11.9367 13.9367 11.8586 13.8586L7 9" stroke="#737373" stroke-width="2" stroke-linecap="round"></path>
                            </svg>
                        </button>

                        <ul class="dropdown-list">
                            <li><button type="button">예약 시스템 문의</button></li>
                            <li><button type="button" class="active">결제 연동 문의</button></li>
                            <li><button type="button">세팅 문의</button></li>
                            <li><button type="button">기타 문의</button></li>
                        </ul>
                    </div>
                </div>
                <div class="input-item">
                    <label>문의 내용</label>
                    <textarea class="textbox textarea" placeholder="문의사항을 입력해주세요."></textarea>
                </div>

                <button type="submit" class="primary-btn l2-btn w-100">
                    문의 접수하기
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.5 12L19.5 12M15 17L19.5 12L15 7" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </form>
        </div>

========================================================= */

.input-form-wrap {width:100%; max-width:620px; padding:40px; border-radius:16px; background:var(--color-white); box-shadow:var(--sitelo-shadow);}
.input-form-wrap form {display:flex; flex-direction:column; row-gap:30px;}

/* =========================================================
    15. CUSTOM CHECKBOX

    [HTML]
    <div class="custom-chk">
        <input type="checkbox" id="agreeCheck" name="agree_check">
        <label for="agreeCheck">
            <span></span>
            <em>체크박스 텍스트</em>
        </label>
    </div>
========================================================= */
.custom-chk {display:flex; align-items:center; gap:7px; font-size:var(--fs-14); color:var(--grayscale6); font-weight:400;}
.custom-chk input[type="checkbox"] {display:none;}
.custom-chk label {cursor:pointer; display:flex; align-items:center;}
.custom-chk label span {flex-shrink:0; display:inline-block; width:17px; height:17px; margin-right:10px; border:1px solid var(--grayscale5); border-radius:2.5px; background-color:var(--color-white); background-image:url(../img/check-ico.svg); background-size:60%; background-repeat:no-repeat; background-position:center center; transition:all 0.2s ease;}
.custom-chk label em {font-style:normal; font-size:var(--fs-18); font-weight:400; line-height:1.5; color:var(--grayscale8);}
.custom-chk label em b {color:var(--grayscale6);}
.custom-chk input[type="checkbox"]:checked + label span {border-color:var(--color-main); background-color:var(--color-main);}

/* =========================================================
    HOVER
========================================================= */
@media (hover:hover) {
    .primary-line-btn:hover {}
    .primary-btn:hover {}
    .white-btn:hover {}
    .modal .modal-close-btn:hover,
    .round-btn:hover, .s-btn:hover, .s2-btn:hover, .m-btn:hover, .l-btn:hover, .l2-btn:hover {box-shadow: 0 0 0 5px #ADADAD4D;}
    .template-card:hover .thumb-wrap img {transform: scale(1.1);}
}

/* =========================================================
    RESPONSIVE
========================================================= */
@media screen and (max-width: 1440px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 80px);}
}
@media screen and (max-width: 1280px) {
    .template-list {column-gap: 20px;}
    .template-card {width: calc(100% / 3 - 40px / 3);}
    .template-card .info-wrap {padding: 22px; padding-bottom: 36px;}
    .template-card .thumb-wrap {aspect-ratio: 490 / 360;}
}
@media screen and (max-width: 1024px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 64px);}

    .section-tit-wrap {margin-bottom: 60px;}

    
    .template-list {column-gap: 16px;}
    .template-card {width: calc(100% / 3 - 32px / 3); border-radius: 14px;}
    .template-card .info-wrap {padding: 20px; padding-bottom: 32px;}
}
@media screen and (max-width:768px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 48px);}
    
    .input-multi {grid-template-columns: repeat(1,1fr);}
    
    .faq-item {padding-block: 24px;}
    .faq-item .faq-question {align-items:flex-start; min-height: fit-content; padding-right:36px;}
    .faq-item .faq-question .faq-num {flex-shrink:0;}
    .faq-item .faq-question .faq-tit {word-break:keep-all;}
    .faq-item .faq-question::after {top:2px; transform:none;}
    .faq-item.open .faq-question::after {transform:rotate(180deg);}
    .faq-item .faq-answer p {padding-top:20px; word-break:keep-all;}
    
    .price-slider-wrap .price-wrap {overflow: visible;}
    .price-slider-wrap .price-slider {margin-top:40px;}
    .price-slider-wrap .price-card {padding: 24px;}
    .price-slider-wrap .price-card .info-wrap {row-gap: 20px;}
    .price-slider-wrap .price-card .price-box {padding-block: 20px;}
    .price-slider-wrap .price-card .feature-list li.button-li {display: block;}
    .price-slider-wrap .price-card .price-box > .price-item::after {content:''; flex-basis:100%; width:0; order:1;}
    .price-slider-wrap .price-card .price-box > .price-item strong,
    .price-slider-wrap .price-card .price-box > .price-item span:first-of-type {order:0;}
    .price-slider-wrap .price-card .price-box > .price-item em,
    .price-slider-wrap .price-card .price-box > .price-item b,
    .price-slider-wrap .price-card .price-box > .price-item span:last-of-type {order:2;}
    .price-slider-wrap .feature-list.price-more-list[data-mobile-limit="3"]:not(.open) li:nth-child(n+4):not(.button-li) {display:none;}
    .price-slider-wrap .feature-list.price-more-list[data-mobile-limit="2"]:not(.open) li:nth-child(n+3):not(.button-li) {display:none;}
    
    .feature-list {padding-bottom: 20px;}
    .feature-list li.point {font-size: var(--fs-18);}
}
@media screen and (max-width:480px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 32px);}

    .section-tit-wrap {margin-bottom: 40px;}

    .template-card .info-wrap {padding: 18px; padding-bottom: 30px;}
    
    .faq-item {padding-block: 20px;}
    .faq-item .faq-question {column-gap:8px; padding-right:32px;}
    .faq-item .faq-question::after {right:0; width:24px; height:24px;}
    .faq-item .faq-answer p {padding-top:16px;}

    .inquiry-wrap {row-gap: 60px;}
    .input-form-wrap {padding: 0; box-shadow: none; border-top: 1px solid var(--grayscale3); padding-top: 60px; border-radius: 0;}

    .textbox,.input-btn {height: 48px;}

    .pagination {gap: calc(var(--fs-24) / 2);}

}
@media screen and (max-width:375px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 24px);}

    .pagination {gap: 5px;}
}