@charset "utf-8";

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'),
    url('../fonts/Pretendard-Light.subset.woff2') format('woff2'),
    url('../fonts/Pretendard-Light.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'),
    url('../fonts/Pretendard-Regular.subset.woff2') format('woff2'),
    url('../fonts/Pretendard-Regular.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'),
    url('../fonts/Pretendard-Medium.subset.woff2') format('woff2'),
    url('../fonts/Pretendard-Medium.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'),
    url('../fonts/Pretendard-SemiBold.subset.woff2') format('woff2'),
    url('../fonts/Pretendard-SemiBold.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'),
    url('../fonts/Pretendard-Bold.subset.woff2') format('woff2'),
    url('../fonts/Pretendard-Bold.subset.woff') format('woff');
}

:root {
    --red: #DD5257;
    --sky: #7DA0E9;
    --blue: #315297;
    --navy: #0A1339;
    --teal: #34C9A6;
    --purple: #7F7AE8;
    --white: #FFFFFF;
    --black: #222222;
    --bg-gray: #EDEDFF;
    --bg-grayblue: #F0F1FE;
    --bg-gray-100: #F8F8F8;
    --bg-gray-200: #F1F1F1;
    --gray-100: #DEDEDE;
    --gray-200: #E8E8E8;
    --gray-300: #C2C2C2;
    --gray-400: #959595;
    --gray-500: #5B5B5B;
    --text-10: 0.625rem;
    --text-11: 0.688rem;
    --text-12: 0.75rem;
    --text-13: 0.813rem;
    --text-14: 0.875rem;
    --text-15: 0.938rem;
    --text-16: 1rem;
    --text-18: 1.125rem;
    --text-20: 1.25rem;
    --text-22: 1.375rem;
    --text-24: 1.5rem;
    --text-26: 1.625rem;
    --text-28: 1.75rem;
    --shadow: 0px 0px 20px 0px #0000001F;
    --box-shadow: 0px 0px 10px 0px #00000014;
}

body, input, select, textarea, button, a, xmp { font-weight: 400; font-family: 'Pretendard', 'Malgun Gothic', sans-serif; color: var(--black); }
button { outline: none; border: none; }
:is(input[type=text], input[type=password], input[type=tel]) { width: 100%; height: var(--form-size); border: 1px solid var(--gray-200); border-radius: 4px; padding: 0 10px; outline: none; }
select { width: 100%; height: var(--form-size); border: 1px solid var(--gray-200); border-radius: 4px; padding: 0 10px; outline: none; background: url(../images/ico_arrow_down.svg) no-repeat right 12px center; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
textarea { width: 100%; border: 1px solid var(--gray-200); border-radius: 4px; padding: 10px; outline: none; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
input[type=checkbox] { width: 20px; height: 20px; background: url(../images/ico_checkbox.svg) no-repeat center center; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=checkbox]:checked { background-image: url(../images/ico_checkbox_on.svg); }
input[type=radio] { width: 20px; height: 20px; background: url(../images/ico_radio.svg) no-repeat center center; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=radio]:checked { background-image: url(../images/ico_radio_on.svg); }

/* Tailwindcss */
.hidden { display: none; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-120 { width: 120px; }
.w-full { width: 100%; }
.items-start { align-items: flex-start; }

/* Layout */
body { overflow-x: hidden; }
.container { display: grid; min-height: 100vh; }
.header {
    z-index: 2; position: sticky; top: 0; background: var(--white); border-bottom: 1px solid var(--gray-200);
    header { display: flex; align-items: center; justify-content: space-between; height: 100%; }
    aside {
        display: none; z-index: 3; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #00000099;
    }
    .aside__content {
        position: absolute; top: 0; bottom: 0; left: 0; width: 290px; padding: 30px 20px; background-color: var(--white); overflow-y: auto;
        .snb {
            margin-top: 10px; padding: 30px 10px;
            > ul {
                display: flex; flex-direction: column; gap: 30px;
                > li {
                    > a { display: flex; }
                    &.active > a { background: url(../images/ico_arrow_down.svg) no-repeat right center; }
                    &.active--on > a { background-image: url(../images/ico_arrow_up.svg); }
                    &.active--on > ul { display: block; }
                    > a { font-weight: 500; font-size: var(--text-16); }
                }
                ul {
                    display: none; padding: 20px 14px;
                    a { display: flex; align-items: center; gap: 4px; font-size: var(--text-14); color: var(--gray-500); line-height: 2.25rem; }
                    em { display: inline-flex; align-items: center; height: 18px; padding: 0 4px; border: 1px solid var(--purple); border-radius: 2px; font-size: var(--text-12); color: var(--purple); }
                }
            }
        }
    }
}
.aside__link { display: flex; justify-content: space-between; }
.header__bi { display: flex; width: 160px; height: 28px; background: url(../images/bi_sellpia.svg) no-repeat 0 0; }
.header.header--white {
    background: 0; border-bottom: 0;
    .header__bi { background-image: url(../images/bi_sellpia_white.svg); }
    .header__menu > ul > li > a { color: var(--white); }
    .btn.btn__outline { background: 0; }
    .header__bars { background-color: var(--white); }
}
.header__menu {
    > ul {
        display: flex; align-items: center; gap: 100px; padding-right: 50px; height: 62px;
        > li {
            position: relative; display: flex; align-items: center; height: 100%;
            > a {
                font-weight: 700; font-size: var(--text-18);
            }
        }
    }
}
.gnb { position: absolute; top: 62px; left: -30px; display: none; padding: 20px 30px; background-color: var(--white); border-radius: 10px; box-shadow: var(--shadow); }
.gnb__list { color: var(--gray-500); font-size: 15px; font-weight: 500; line-height: 2.4; text-align: left; letter-spacing: -0.04rem; }
.gnb__item {
    white-space: nowrap;
    em { display: inline-flex; align-items: center; height: 18px; padding: 0 4px; border: 1px solid var(--purple); border-radius: 2px; font-size: var(--text-12); color: var(--purple); }
    a { display: flex; align-items: center; gap: 4px; height: 36px; }
    &:hover a { font-weight: 600; }
}

.header__link { display: flex; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; line-height: 1; text-indent: 0; border-radius: 30px; box-sizing: border-box; }
[class*='btn__'] {
    &[class*='__solid'] {
        background: var(--teal); color: var(--white); font-weight: 700;
        &[class*='--lg'] { height: 60px; font-size: var(--text-20); padding: 0 95px; }
        &:not([class*='--lg']) { height: 50px; font-size: var(--text-15); padding: 0 30px; }
    }
    &[class*='__outline'] { height: 50px; background: var(--white); color: var(--teal); border: 1.5px solid var(--teal); padding: 0 30px; font-weight: 700; font-size: var(--text-15); }
    &[class*='__line'] {
        width: 180px; height: 47px; background: var(--white); font-size: var(--text-16);
        span { padding-left: 10px; padding-right: 25px; background: url(../images/ico_arrow_right.svg) no-repeat right center; }
    }
    &[class*='__plus'] { width: var(--form-size); height: var(--form-size); background: var(--white) url(../images/ico_plus.svg) no-repeat center center; border: 1px solid var(--gray-500); border-radius: 4px; text-indent: -9999px; }
}
.content {
    z-index: 1; position: relative; width: 100%;
}
.content--side {
    display: grid; align-items: start; justify-content: space-between;
    aside {
        position: sticky; top: 170px;
        h2 { font-weight: 500; font-size: var(--text-15); color: var(--gray-400); }
        h2:not(:first-child) { margin-top: 30px; }
        ul {
            display: flex; flex-direction: column; gap: 26px; padding: 20px;
            a { font-weight: 500; }
        }
    }
}
main { display: grid; }
footer { box-sizing: border-box; }
.footer { z-index: 1; background-color: var(--white); }
.footer__link {
    display: flex; justify-content: space-between; align-items: baseline;
    .link {
        display: flex; column-gap: 20px;
        a { font-weight: 500; }
    }
    .link--side {
        gap: 10px;
        a { display: flex; align-items: center; font-weight: 400; }
    }
}
.footer__info {
    margin-top: 15px; color: var(--gray-500); font-weight: 300;
}
article.visual {
    h2 { font-weight: 600; color: var(--teal); }
    h2.point { color: var(--purple); }
    h3 { font-weight: 700; line-height: 100%; }
    p { margin-top: 20px; word-break: keep-all; }
}
.feedback { display: grid; column-gap: 40px; }
.feedback__list {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    li { background-color: var(--bg-grayblue); color: var(--blue); }
    li:nth-child(even) { align-self: flex-end; }
}
.about {
    display: grid;
    h4 { font-weight: 700; font-size: var(--text-16); }
}
.about__text {
    display: flex; flex-direction: column; align-items: center;
    dt { color: var(--gray-500); }
    dd { font-weight: 700; line-height: 150%; text-align: center; }
}
.about__feature {
    display: grid; background-color: var(--bg-gray-100);
    dl {
        dt { font-weight: 600; color: var(--purple); }
        dd {
            color: var(--gray-500);
            > span {
                display: flex; width: 100%; white-space: nowrap;
            }
        }
    }
}
.about__subtitle {
    color: var(--black); font-weight: 500; font-size: var(--text-13);
    span { color: var(--gray-400); }
}
.about__item {
    display: flex; gap: 4px; margin-top: 12px;
    span { display: inline-flex; align-items: center; height: 23px; padding: 0 8px; border: 1px solid var(--gray-300); border-radius: 12px; font-weight: 500; font-size: var(--text-11); color: var(--gray-500); white-space: nowrap; }
}
.about__list {
    display: flex; flex-direction: column; gap: 10px;
    li {
        display: flex; align-items: center; gap: 10px; font-size: var(--text-13); font-weight: 500; color: var(--black);
        span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background-color: var(--purple); color: var(--white); font-weight: 700; font-size: var(--text-11); border-radius: 50%; }
    }
}
.about__function {
    display: grid; gap: 10px;
    li {
        display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: var(--box-shadow); background-color: var(--white);
        figure {
            display: flex; flex-direction: column; align-items: center;
            figcaption { font-weight: 600; color: var(--purple); }
        }
        &:nth-child(1) { grid-row: 1 / 3; }
    }
}
.picking {
    display: flex; align-items: center;
    figure { border-radius: 10px; box-shadow: var(--shadow); }
    figcaption { display: flex; align-items: center; justify-content: center; border-radius: 10px 10px 0 0; color: var(--white); }
    div { display: flex; align-items: center; justify-content: center; }
    .picking--before figcaption { background-color: var(--gray-500); }
    .picking--after figcaption { background-color: var(--purple); }
    .clock { width: 20px; height: 20px; background: url(../images/ico_clock.svg) no-repeat center center; }
}
.operation__step {
    display: flex; align-items: stretch; justify-content: space-between;
    figure { display: flex; align-items: center; justify-content: center; width: 100%; box-shadow: var(--shadow); }
    figcaption {
        align-content: center;
    }
    .arrow { flex-shrink: 0; }
}
.target__list {
    display: flex; flex-direction: column;
    li { display: flex; justify-content: center; background-color: var(--bg-grayblue); color: var(--blue); font-weight: 500; }
}
.pricing__title {
    display: flex; align-items: center; height: 65px; background-color: var(--teal); border-radius: 14px 14px 0 0; color: var(--white); font-weight: 500; font-size: var(--text-18); text-align: center;
    :not(:last-child) { width: 30%; }
    :last-child { width: 40%; }
}
.pricing__item {
    display: flex; align-items: center; text-align: center;
    .item__price {
        strong { font-weight: 600; }
    }
}
.process__step {
    display: flex; align-items: stretch; justify-content: space-between;
    div:nth-of-type(2) span { background-color: var(--teal); }
    div {
        display: flex; flex-direction: column; justify-content: space-between; background-color: var(--bg-gray-100);
        span { display: flex; align-items: center; justify-content: center; background-color: var(--purple); color: var(--white); }
    }
    figure { display: flex; align-items: center; justify-content: center; }
    figcaption { font-weight: 500; }
    .arrow { flex-shrink: 0; }
}
.application {
    display: flex; align-items: center; justify-content: space-between; background-color: var(--bg-gray-100);
    dt {
        font-weight: 300; line-height: 150%;
        em { font-weight: 800; color: var(--teal); }
    }
    dd { color: var(--gray-500); }
}
.addons {
    &:not(:first-child) { margin-top: 80px; }
    h2 {
        font-weight: 700;
        + p { color: var(--gray-500); }
    }
}
.addons__button { padding: 200px 0 100px; display: flex; align-items: center; justify-content: center; }
.btn__circle { min-width: 60px; padding-bottom: 72px; background: url(../images/ico_down_circle.svg) no-repeat center bottom; font-size: 1.063rem; color: var(--teal); }
.matrix { display: grid; }
.matrix__item {
    position: relative; display: grid; box-shadow: var(--box-shadow); background-color: var(--white); gap: 20px;
    dl {
        margin-top: auto;
        dt { font-weight: 700; white-space: nowrap; }
        dd {
            word-break: keep-all;
            sub { vertical-align: bottom; }
        }
    }
}
.matrix__link { position: absolute; background: url(../images/ico_up_right.svg) no-repeat right top; text-indent: -9999px; }
.matrix__outlink { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-indent: -9999px; }
.intro { display: grid; }
.intro__side {
    h2 { font-weight: 600; color: var(--teal); }
    h2.point { color: var(--purple); }
    p { font-weight: 700; line-height: 1.375; }
}
.board { margin-top: -10px; }
section.board { box-shadow: var(--box-shadow); background-color: var(--white); }
.attach__text { padding-left: 8px; text-indent: -8px; font-size: var(--text-11); color: var(--gray-400); }
.form__group {
    display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 5px; margin-top: 7px; font-size: var(--text-13);
    label {
        .required { position: relative; top: 2px; color: var(--red); }
        &.attach { width: 150px; height: var(--form-size); display: flex; align-items: center; justify-content: center; font-size: var(--text-14); font-weight: 400; color: var(--black); border: 1px solid var(--gray-500); border-radius: 4px; box-sizing: border-box; }
    }
    :where(.attach, .btn__plus) { flex-shrink: 0; }
    &.last { margin-top: 14px; }
}
.form__group--email {
    width: 100%; display: grid; gap: 8px;
}
.form__group--inline {
    display: flex; align-items: center; gap: 5px; width: 100%;
}
.form__group--both {
    width: 100%; display: grid;
    .form__boxing {
        background-color: var(--bg-gray-100);
        height: 138px;
        textarea { background-color: var(--bg-gray-100); font-size: var(--text-11); color: var(--gray-500); line-height: 1rem; }
    }
}
.form__table {
    border-radius: 4px; border-style: hidden; box-shadow: 0 0 0 1px var(--gray-200);
    :where(th, td) {
        border: 1px solid var(--gray-100); line-height: 0.875rem;
    }
    th {
        font-size: var(--text-11); background-color: var(--bg-gray-100);
        &:first-child { border-radius: 4px 0 0 0; }
        &:last-child { border-radius: 0 4px 0 0; }
    }
    td { font-size: var(--text-11); color: var(--gray-500); }
}
.form__table thead th {
    padding: 8px 12px; /* th에 대한 padding */
}

/* tbody의 td에 적용되는 스타일 */
.form__table tbody td {
    padding: 25px 10px; /* td에 대한 padding */
}
.form__table__label{margin-top: 5px}
.form__boxing {
    width: 100%; border: 1px solid var(--gray-100); border-radius: 4px; padding: 10px;
    textarea { resize: none; height: 100%; border: 0; padding: 0; }
    textarea::-webkit-scrollbar { width: 4px; border-radius: 4px; }
    textarea::-webkit-scrollbar-thumb { width: 4px; border-radius: 4px; background: var(--gray-100); }
}
.form__button {
    margin-top: 30px; text-align: center;
}
.form__label {
    width: 100%; display: flex; align-items: center; gap: 30px;
    label { display: flex; align-items: center; gap: 8px; color: var(--black); }
}
dialog { z-index: 9; width: 100%; max-width: 1300px; border: 0; box-shadow: var(--box-shadow); box-sizing: border-box; }
dialog::backdrop { background: #00000099; }
dialog::-webkit-scrollbar-button:vertical:start:decrement,
dialog::-webkit-scrollbar-button:vertical:start:increment {
    display: block;
    height: 25px;
}
dialog::-webkit-scrollbar-button:vertical:end:decrement { width: 25px; }
dialog article::-webkit-scrollbar-track { margin: 10px 0; }


.blocks { display: flex; flex-wrap: wrap; gap: 20px; }
.blocks__item { display: flex; justify-content: space-between; align-items: center; flex-direction: column; background-color: var(--white); box-shadow: var(--box-shadow); }
.blocks__icon { display: flex; justify-content: center; align-items: flex-start; }
.blocks__content { display: flex; flex-direction: column; align-items: center; }
.blocks__title { font-weight: 500; color: var(--black); }
.blocks__description { color: var(--gray-500); text-align: center; }
.service__header { display: flex; flex-direction: column; align-items: center; }
.service__subtitle { text-align: center; color: var(--purple); }
.service__title { font-weight: 700; line-height: 100%; text-align: center; color: var(--black); }
.service__body { display: flex; flex-direction: column; }
.service__row { display: flex; }
.service__note { text-align: right; color: var(--gray-500); }
.service__note em { color: var(--purple); }
.panel { display: flex; align-items: center; background-color: var(--bg-gray-100); flex: 1; }
.panel__content { display: flex; flex-direction: column; }
.panel__title { font-weight: 600; color: var(--blue); }
.panel__text { font-weight: 400; color: var(--gray-500); }
.qna { display: flex; flex-direction: column; gap: 10px; }
.qna__item { display: flex; background-color: var(--white); border-radius: 15px; box-shadow: var(--box-shadow); cursor: pointer; border: 1px solid var(--white); }
.qna__item--active { border: 1px solid var(--teal); }
.qna__icon { display: flex; justify-content: center; align-items: center; background-color: var(--teal); border-radius: 100px; flex-shrink: 0; color: var(--white); font-weight: 600; }
.qna__content { display: flex; flex-direction: column; word-break: keep-all; }
.qna__question { font-weight: 500; }
.qna__answer { color: var(--gray-500); display: none; }
/*
.qna__item--active .qna__answer { display: block; }
*/
.main--sellpia {
    article.visual { 
        h2 { color: var(--purple); }
    }
}
.main--intro {
    .qna__item--active { border-color: var(--purple); }
    .qna__icon { background-color: var(--purple); }
}
.diff__image { position: relative; display: flex; }
.diff__text { position: absolute; height: 47px; display: flex; align-items: center; justify-content: center; background-color: #5E5E5EE5; color: var(--white); font-weight: 500; }
.price__table {
    position: relative;
    table { width: 100%; overflow: hidden; border-collapse: collapse; border-radius: 15px; border-style: hidden; box-shadow: 0 0 0 1px var(--bg-gray); }
    :where(th, td) { padding: 20px 10px; text-align: center; border: 1px solid var(--bg-gray); color: var(--gray-500); }
    th { font-weight: 500; }
    [class*='price__cell--title'] { font-size: var(--text-20); color: var(--white); }
    .price__cell--title-zero { background-color: var(--purple); font-weight: 600; }
    .price__cell--title-pro { background-color: var(--teal); font-weight: 600; }
    .price__cell--title { background-color: var(--gray-500); }
    .price__cell--zero { background-color: #F3F3FF; font-weight: 700; font-size: var(--text-20); color: var(--purple); }
    .price__cell--pro { background-color: #E4FFFA; font-weight: 700; font-size: var(--text-20); color: var(--teal); }
    .price__cell { color: var(--black); font-weight: 600; }
    .price__check {
        font-size: var(--text-16); font-weight: 500;
        :where(.price__cell--zero, .price__cell--pro) & { color: var(--black); font-weight: 700; }
    }
    .price__check--xmark { color: #FF5B61; font-weight: 500; }
    &::after { content: ''; position: absolute; border: 2px solid var(--black); top: -2px; left: 16.66%; width: calc(33.32% - 2px); bottom: -2px; }
}
.price__list {
    text-align: left; padding-left: 19px; font-size: var(--text-13);
    li { text-indent: -9px; }
    :where(.price__cell--zero, .price__cell--pro) & { color: var(--black); font-weight: 500; }
}
.price__thumb { display: flex; justify-content: center; }
.price__thumb img { width: 100%; }
.toggle { display: flex; align-items: center; gap: 8px; }
.toggle-text { font-weight: 500; font-size: var(--text-15); }
.toggle-text:not(.active) { color: var(--gray-400); }
.toggle-switch { width: 50px; height: 28px; position: relative; cursor: pointer; }
.toggle-slider { width: 100%; height: 100%; background-color: var(--teal); border-radius: 100px; position: relative; }
.toggle-slider-circle { width: 18px; height: 18px; background-color: var(--white); border-radius: 100px; position: absolute; top: 5px; left: 5px; transition: transform 0.3s ease; }
.toggle-switch.active .toggle-slider-circle { transform: translateX(20px); }
.pricing__table {
    position: relative;
    table { width: 100%; overflow: hidden; border-collapse: collapse; border-radius: 15px; border-style: hidden; box-shadow: 0 0 0 1px var(--bg-gray); }
    :where(th, td) { padding: 20px 10px; text-align: center; border: 1px solid var(--bg-gray); }
    tr:last-child { vertical-align: top; }
}
.table-head { background-color: var(--teal); color: var(--white); font-weight: 600; }
.table-head--purple { background-color: var(--purple); }
.table-head--navy { background-color: var(--navy); }
.table-price { font-weight: 500; font-size: var(--text-15); }
.table-price--purple { color: var(--purple); font-size: var(--text-22); font-weight: 700; }
.table-price--teal {
    color: var(--teal); font-size: var(--text-14); font-weight: 700;
    strong { font-size: var(--text-20); }
}
.table-price--navy { color: var(--navy); font-size: var(--text-22); font-weight: 700; }
.monthly-price { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 15px; }
.monthly-price-value { font-weight: 500; font-size: var(--text-14); color: var(--gray-500); }
.monthly-price-badge { display: flex; justify-content: center; align-items: center; gap: 3px; background-color: #FFEDED; border-radius: 100px; height: 28px; padding: 0 15px; font-weight: 500; font-size: var(--text-14); color: #FF6369; white-space: nowrap; }
.monthly-price-badge em { font-weight: 600; }
.pricing__wrap { height: 220px; display: flex; flex-direction: column; justify-content: space-between; }
.pricing__text { font-size: var(--text-13); text-align: left; padding-left: 10px; text-align: center; }
.pricing__extra {
    padding: 14px 20px; background-color: var(--bg-gray-100); border-radius: 10px; font-weight: 400; font-size: var(--text-13); color: var(--black); line-height: 1.5rem; text-align: left;
    strong { font-weight: 600; }
}
.pricing__notes {
    li { font-weight: 400; color: var(--gray-500); }
}
.costs__table {
    table { width: 100%; overflow: hidden; border-collapse: collapse; border-radius: 15px; border-style: hidden; box-shadow: 0 0 0 1px var(--bg-gray); }
    :where(th, td) { text-align: center; border: 1px solid var(--bg-gray); font-weight: 500; }
    thead th { background-color: var(--navy); color: var(--white); }
    tbody th { background-color: var(--bg-gray-100); white-space: nowrap; }
    tbody td { text-align: left; }
}
.pricing { display: flex; flex-direction: column; gap: 20px; padding: 0 30px; }
.plan { display: flex; flex-direction: column; align-items: center; gap: 20px; border: 1px solid var(--gray-100); border-radius: 10px; padding: 20px 20px 40px; width: 100%; position: relative; }
.plan__header { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 0; width: 100%; }
.plan__name { font-weight: 600; font-size: var(--text-18); line-height: 1.2em; text-align: center; }
.plan__price-free { font-weight: 700; font-size: 2rem; line-height: 1.2em; text-align: center; color: var(--purple); letter-spacing: -0.05rem; }
.plan__price-annual {
    font-weight: 700; font-size: var(--text-16); line-height: 1.7em; text-align: center; color: var(--teal); letter-spacing: -0.05rem;
    strong { font-size: var(--text-26); }
}
.plan__price-enterprise { font-weight: 700; font-size: 2rem; line-height: 1.2em; text-align: center; color: var(--navy); letter-spacing: -0.05rem; }
.plan__price-monthly-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.plan__price-monthly { font-weight: 500; font-size: var(--text-13); color: var(--gray-500); }
.plan__savings {
    display: flex; justify-content: center; align-items: center; gap: 3px; background-color: #FFEDED; border-radius: 100px; height: 28px; padding: 0 14px; font-weight: 500; font-size: var(--text-13); color: #FF6369;
    em { font-weight: 600; }
}
.plan__feature { display: flex; flex-direction: column; gap: 6px; padding: 0 10px; width: 180px; }
.plan__feature-text { padding-left: 15px; background: url(../images/ico_check.svg) no-repeat left center; font-weight: 400; font-size: var(--text-13); white-space: nowrap; }
.plan__custom-text { font-weight: 400; font-size: var(--text-13); line-height: 1.85em; text-align: center; }
.plan__additional-info {
    background-color: var(--bg-gray-100); border-radius: 6px; padding: 14px 10px 14px 25px; width: 180px; font-weight: 400; font-size: var(--text-13); line-height: 1.85em; margin-top: 10px;
    strong { font-weight: 600; }
}
.plan__decoration { position: absolute; top: -1px; right: -1px; left: -1px; height: 10px; overflow: hidden; border-radius: 10px 10px 0 0; }
.plan--teal .plan__decoration { background-color: var(--teal); }
.plan--purple {
    .plan__decoration { background-color: var(--purple); }
    .plan__header { padding-bottom: 10px; }
}
.plan--navy {
    .plan__decoration { background-color: var(--navy); }
    .plan__header { padding-bottom: 10px; }
}
.about__header {
    display: flex; justify-content: space-between; align-items: center;
    h4 { font-size: 24px; }
    .about__title { display: flex; align-items: center; gap: 30px; }
}
.matrix__cross {
    display: grid; gap: 20px;
    .matrix__item { box-shadow: none; background-color: var(--bg-gray-100); }
}
:where(.main--sellpia, .main--sellpos) { margin-top: -80px; }
.bottom__bars {
    grid-column: 1 / 3; margin-top: 165px; position: relative; padding: 50px 100px 50px 365px; display: flex; gap: 50px; align-items: center; justify-content: flex-end; background-color: var(--purple); border-radius: 20px;
    p { font-weight: 600; font-size: var(--text-24); line-height: 2rem; color: var(--white); }
    > img { position: absolute; top: -125px; left: 58px; }
    .bottom__btns { display: flex; gap: 10px; justify-content: center; }
    .main--sellpia & { background-color: var(--teal); }
}
.matrix__box {
    position: relative; display: grid; box-shadow: var(--box-shadow); background-color: var(--white); width: 100%; height: 400px; border-radius: 20px; padding: 50px 40px;
    p { font-weight: 700; font-size: var(--text-26); line-height: 2.25rem; }
}
.btn__arrow { margin: auto -5px -30px auto; width: 42px; height: 42px; background: url(../images/bul_arrow_long_right.svg) no-repeat center center; text-indent: -9999px; }
.pricing__card {
    overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--gray-100); border-top: 0; border-radius: 20px; background-color: var(--white);
    &:nth-of-type(3) .pricing-label { border-top: 8px solid var(--purple); }
    &:not(:nth-of-type(3)) .pricing-label { border-top: 8px solid var(--teal); }
}
.swiper-wrapper .swiper-slide:nth-child(3) .pricing-label { border-top: 8px solid var(--purple); }
.feature__info { width: 100%; overflow: hidden; }
.info { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background-color: var(--teal); width: 100%; box-shadow: var(--box-shadow); color: var(--white); }
.info__content { display: flex; flex-direction: column; }
.info__description { word-break: keep-all; }
.hero { position: relative; margin-top: -90px; display: flex; align-items: center; justify-content: center; height: 960px; }
.hero--sellpos { background: url(../images/bg_sellpos.png) no-repeat center center; }
.hero--sellpia { background: url(../images/bg_sellpia.png) no-repeat center center; }
.hero__text {
    display: flex; align-items: center; justify-content: center; gap: 38px; color: var(--white);
    dt { display: flex; }
    dd { font-size: var(--text-22); line-height: 2.25rem; }
}
.video {
    position: relative; margin-top: -90px; display: flex; align-items: center; justify-content: center; height: 960px; overflow: hidden;
    video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
}
.video__text {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 38px; color: var(--white);
    dt { display: flex; }
    dd { font-size: var(--text-22); line-height: 2.25rem; }
}
.video__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }

.matrix__swiper { width: round(down, 100%, 1px); border-radius: 20px; }
.swiper-3d .swiper-slide-shadow { border-radius: 20px 80px 20px 20px; }
.pricing__header { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
.plan__price { font-weight: 700; color: var(--teal); }
.price__row { display: flex; justify-content: center; align-items: center; gap: 4px; }
.price__amount { font-weight: 700; color: var(--purple); letter-spacing: -0.05rem; }
.pricing__list {
    display: flex; flex-direction: column;
    li { padding-left: 18px; background: url(../images/bul_check.svg) no-repeat left center; color: var(--gray-500); white-space: nowrap; }
    li.active { background-image: url(../images/bul_check_on.svg); color: var(--teal); }
}
/* 셀피아 */
.feature-grid { display: grid; }
.feature-card { display: flex; flex-direction: column; justify-content: space-between; align-items: center; background-color: var(--bg-gray-100); }
.feature-card__title { color: var(--black); font-weight: 500; line-height: 1.5; text-align: center; letter-spacing: -0.025rem; }
.workflow { display: flex; flex-direction: column; width: 100%; }
.workflow__menu { position: relative; display: grid; width: 100%; cursor: pointer; }
.workflow__menu::before { content: ''; position: absolute; bottom: 0; left: calc(100% * 1/6 / 1/2 - 18px); width: calc(100% * 5/6 + 36px); height: 2px; background-color: var(--bg-gray-200); z-index: 1; }
.workflow__menu-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background-color: var(--bg-gray-100); border: 2px solid var(--bg-gray-100); flex: 1; }
.workflow__menu-text { color: var(--black); text-align: center; font-weight: 600; }
.workflow__number { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background-color: var(--gray-300); font-size: var(--text-12); font-weight: 700; color: var(--white); }
.workflow__menu-item--active {
    border: 2px solid var(--purple);
    & .workflow__number { background-color: var(--purple); }
}
.feature__list { display: flex; flex-direction: column; justify-content: center; }
.feature__list li { display: flex; align-items: center; background-color: var(--bg-grayblue); }
.feature__point { display: flex; justify-content: center; align-items: center; background-color: var(--blue); border-radius: 100px; font-weight: 600; color: var(--white); white-space: nowrap; }
.feature__title { color: var(--navy); }
.compare { position: relative; display: flex; }
.compare__card { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 14px; background-color: var(--white); flex: 1; }
.compare__tag { display: flex; justify-content: center; align-items: center; border-radius: 6px; background-color: var(--bg-gray); font-weight: 500; color: var(--black); }
.compare__price-container { display: flex; flex-direction: row; align-items: baseline; }
.compare__price { font-weight: 700; line-height: 1.2; color: var(--black); }
.compare__unit { position: relative; top: -2px; display: flex; justify-content: center; align-items: baseline; font-weight: 500; color: var(--black); letter-spacing: 1px; }
.compare__vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; background-color: var(--purple); border-radius: 50%; z-index: 10; font-weight: 700; font-size: var(--text-26); color: var(--white); }
.compare__card--sellpia {
    .compare__card& { box-shadow: 0px 0px 15px 0px rgba(180, 176, 251, 1); }
    .compare__tag { background-color: var(--purple); font-weight: 700; color: var(--white); }
}
.review {
    width: 100%; position: relative; overflow: hidden;
    .swiper-button-prev::after, .swiper-button-next::after { content: none; }
}
.review__header { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; background-color: var(--navy); color: var(--white); font-weight: 500; border-radius: 100px; white-space: nowrap; align-content: center; }
.review__card { background-color: var(--bg-grayblue); width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.review__text { font-weight: 500; text-align: center; line-height: 1.5; word-break: keep-all; }
.review__star { display: flex; justify-content: center; }
.block__section { display: grid; }
.block__section em { color: var(--red); }
.block__card { background-color: var(--white); border-radius: 20px; box-shadow: var(--shadow); flex: 1; display: flex; flex-direction: column; }
.block__header { display: flex; flex-direction: column; gap: 10px; }
.block__subtitle { color: var(--purple); font-weight: 500; line-height: 1.2em; }
.block__title { color: var(--black); font-weight: 700; white-space: nowrap; }
.block__content {
    display: flex; align-items: flex-start; justify-content: space-between;
    .block__column:nth-child(2) { min-width: 45%; }
}
.block__column { display: flex; flex-direction: column; gap: 10px; }
.block__point { color: var(--black); font-weight: 500; line-height: 1.2em; }
.block__list {
    color: var(--gray-500); margin-left: -4px;
    li { white-space: nowrap; }
}
.block__footer { color: var(--gray-500); text-align: right; }
.cs-container { display: flex; justify-content: stretch; }
.cs-card { display: flex; flex-direction: column; justify-content: center; align-self: stretch; background-color: var(--bg-gray-100); flex: 1; }
.cs-card__content { display: flex; flex-direction: column; align-items: flex-start; }
.cs-card__title { line-height: 1.2; color: var(--black); font-weight: 500; }
.cs-card__text { line-height: 1.4; color: var(--gray-500); white-space: nowrap; }
.cs-card__button { display: flex; justify-content: center; align-items: center; margin-top: 20px; background-color: var(--purple); border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--white); }

.site-container { position: relative; width: 180px; }
.dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px 0 22px; border-radius: 8px; border: 1px solid var(--gray-100); cursor: pointer; height: 38px; background-color: var(--white); transition: border-color 0.3s ease; }
.dropdown-text { font-size: var(--text-14); font-weight: 400; color: var(--black); }
.dropdown-icon { width: 18px; height: 19px; background-color: #1C1C1C; mask: url(../images/ico_arrow_down.svg) no-repeat right center; transition: background-color 0.3s ease; }
.dropdown-content { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background-color: var(--white); border-radius: 8px; box-shadow: var(--shadow); padding: 20px 10px 20px 22px; z-index: 10; display: none; overflow: hidden; }
.site-list { display: flex; flex-direction: column; gap: 16px; max-height: 116px; overflow-y: auto; padding-right: 5px; }
.site-list::-webkit-scrollbar { width: 4px; }
.site-list::-webkit-scrollbar-track { background: var(--white); border-radius: 10px; }
.site-list::-webkit-scrollbar-thumb { background: var(--gray-100); border-radius: 10px; }
.site-item { font-size: var(--text-14); font-weight: 400; color: var(--black); cursor: pointer; line-height: 1.2; transition: color 0.3s ease; }
.site-item:hover { color: var(--teal); }
.dropdown-header.active {
    border-color: var(--teal);
    .dropdown-icon { background-color: var(--teal); }
    + .dropdown-content { display: block; }
}
.plto__table {
    width: 100%; height: 703px; overflow-y: auto; overflow-y: overlay; border: 1px solid var(--gray-100); border-top: 3px solid var(--black); border-radius: 12px; margin-top: 20px;
    table { width: 100%; border-collapse: separate; table-layout: fixed; }
    thead { position: sticky; top: 0; }
    th, td { border-bottom: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100); height: 64px; text-align: center; font-size: var(--text-14); line-height: 1.25; }
    th { background-color: var(--bg-gray-100); font-weight: 600; }
    td { color: var(--gray-500); }
    td:last-child, th:last-child { border-right: none; }
    tr:last-child td { border-bottom: none; }
    tr td:first-child { padding-right: 5px; padding-left: 5px; }
    tr td:first-child img { max-width: 100px; width: 100%; vertical-align: middle; }
    .iconCk { display: inline-flex; width: 24px; height: 24px; background: url(../images/bul_check_micro.svg) no-repeat center center; vertical-align: middle; }
}
.plto__table::-webkit-scrollbar { width: 4px; }
.plto__table::-webkit-scrollbar-track { background: transparent; border-radius: 4px; margin: 6px 0; }
.plto__table::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.search-container { width: 100%; background-color: #F8F8F8; border-radius: 20px; padding: 44px 30px 50px; display: flex; flex-direction: column; align-items: center; margin-top: 100px; }
.search-bar { width: 600px; max-width: 600px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--black); }
input.search-input { border: none; padding: 0; background: transparent; font-size: var(--text-16); }
input.search-input::placeholder { color: var(--gray-300); }
.search-controls { display: flex; gap: 20px; align-items: center; }
.reset-button { width: 24px; height: 24px; background: url(../images/ico_xmark_circle.svg) no-repeat center center; text-indent: -9999px; }
.search-button { width: 24px; height: 24px; background: url(../images/ico_search.svg) no-repeat center center; text-indent: -9999px; }
.category-nav { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 60px; }
.category-item {
    display: flex; flex-direction: column; align-items: center; cursor: pointer; white-space: nowrap;
}
.category-text { font-size: 1.063rem; padding: 0 5px 6px; color: var(--gray-500); transition: color 0.3s, font-weight 0.3s; }
.category-item.active { border-bottom: 2px solid var(--black); }
.category-item.active .category-text { padding-bottom: 4px; color: var(--black); font-weight: 600; }
.category-swiper { width: 100%; margin-top: 20px; }
.category-swiper .swiper-slide { width: auto; }    
.button-wrap { display: flex; justify-content: flex-end; margin-top: 40px; }
.button { display: flex; align-items: center; gap: 8px; height: 37px; padding: 0 24px 0 28px; background-color: var(--white); border: 1px solid var(--purple); border-radius: 100px; cursor: pointer; }
.button-text { color: var(--purple); font-size: var(--text-14); font-weight: 500; }
.button-icon { display: inline-flex; width: 10px; height: 15px; background: url(../images/ico_download.svg) no-repeat center center; }

.terms-container {
    font-size: var(--text-13); line-height: 1.25;
    a, h3, h4 { font-size: var(--text-13); }
    h3 { margin: 30px 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid var(--bg-gray); }
    h4 { margin: 20px 0 10px 0; }
    p { margin-bottom: 10px; } 
    ul, ol { margin-bottom: 15px; } 
    li { margin-bottom: 5px; } 
    table { width: 100%; border-collapse: collapse; margin: 20px 0; } 
    th, td { border: 1px solid var(--bg-gray); padding: 12px; text-align: left; } 
    th { background-color: var(--bg-gray-100); font-weight: bold; } 
    .toc { background-color: var(--bg-gray-100); padding: 20px; border-radius: 5px; margin-bottom: 30px; } 
    .toc-title { margin-bottom: 15px; font-weight: bold; } 
    .history { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--bg-gray); } 
    .history-title { font-weight: bold; margin-bottom: 10px; } 
    .history a { display: block; text-decoration: none; margin-bottom: 5px; } 
    .history a:hover { text-decoration: underline; } 
    .footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--bg-gray); text-align: center; }
    .terms { margin-bottom: 30px; }
    .terms-heading { text-align: center; padding-bottom: 20px; }
    .terms-title { font-weight: bold; margin-bottom: 10px; }
    .terms-content > p { margin: 5px 0; padding-left: 14px; text-indent: -14px; }
    .terms p + .sub-list { padding-left: 14px; }
    .terms-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--bg-gray); color: var(--gray-500); }
    .indent { padding-left: 9px; text-indent: -9px; }
}

/* For Desktop */
@media (min-width: 1024px) {
    :root { --form-size: 40px; }
    body, button, a { font-size: var(--text-16); line-height: 1.5rem; }
    input, select, textarea { font-size: var(--text-14); }
    .container { grid-template-rows: 90px auto; }
    .content { margin: 80px auto 200px; padding: 0 20px; max-width: 1540px; }
    .header { height: 90px; padding: 0 50px; }
    .header__bars { display: none; }
    .content--side {
        grid-template-columns: 25.3% 74.7%;
        main { max-width: 1120px; gap: 160px; }
    }
    footer { max-width: 1500px; width: 100%; margin: 0 auto; padding: 50px 20px 40px; }
    .footer__link {
        .link {
            a { font-size: var(--text-14); }
        }
        .link--side {
            a:not(:last-child)::after { display: flex; content: ''; width: 1px; height: 10px; background-color: var(--gray-100); margin-left: 10px; }
        }
    }
    .footer__info {
        width: 740px; font-size: var(--text-14); line-height: 2rem;
        .copyright { margin-top: 24px; }
    }
    article.visual {
        h2 { font-weight: 500; font-size: var(--text-18); }
        h3 { margin-top: 10px; font-size: 3.125rem; line-height: 60px; }
        p { margin-top: 20px; line-height: 27px; }
    }
    .feedback { grid-template-columns: minmax(auto, 570px) auto; justify-content: space-between; align-items: center; margin-top: 80px; }
    .feedback__list {
        gap: 40px;
        li {
            padding: 18px 32px; border-radius: 14px;
            &.line--2 { padding-left: 42px; text-indent: -12px; }
        }
    }
    .feedback__image { width: 100%; }
    .about {
        row-gap: 40px;
        h4 { font-size: var(--text-26); }
    }
    .about__text {
        gap: 16px; margin-bottom: 10px;
        dt { font-size: var(--text-18); }
        dd { font-size: 2.375rem; }
    }
    .about__feature {
        grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: space-between; align-items: center; min-height: 280px; padding: 50px 80px; border-radius: 20px;
        .about__image img { max-width: 100%; }
        dl {
            min-height: 220px;
            dt { font-size: 2rem; line-height: 2.5rem; white-space: nowrap; }
            dd {
                margin-top: 30px; font-size: var(--text-15);
                .line--2 { padding-left: 10px; text-indent: -10px; font-size: var(--text-13); }
            }
        }
    }
    .about__image { text-align: right; }
    .about__function {
        grid-template-columns: repeat(3, minmax(0, 1fr)); width: 530px; height: 330px;
        li {
            figure {
                gap: 15px;
                img { width: 55px; }
            }
            &:nth-child(1) { grid-row: 1 / 3; }
        }
    }
    .picking {
        gap: 20px;
        figcaption { gap: 8px; height: 44px; font-size: var(--text-15); font-weight: 700; }
        div { width: 250px; height: 250px; }
        .clock { width: 20px; height: 20px; }
    }
    .operation__step {
        figure { flex-direction: column; gap: 60px; height: 360px; border-radius: 20px; }
        figcaption {
            font-weight: 500; font-size: var(--text-18); height: 72px; text-align: center;
            p { margin-top: 10px; font-size: var(--text-12); color: var(--gray-500); line-height: 1.125rem; }
        }
    }
    .main--kiosk .operation__step {
        gap: 40px;
        figure { gap: 50px; height: 280px; }
        figcaption { height: auto; }
    }
    .main--delivery .operation__step {
        figure { height: 320px; }
    }
    .arrow { width: 56px; background: url(../images/bul_arrow_right.svg) no-repeat center center; }
    .target__list {
        gap: 20px;
        li { padding: 30px 0; border-radius: 14px; font-size: var(--text-18); }
    }
    .pricing__item {
        height: 105px; border: 1px solid var(--gray-200); border-radius: 0 0 14px 14px; font-size: var(--text-18);
        .item__title { width: 30%; }
        .item__price {
            width: 30%; font-size: var(--text-20);
            em { font-size: var(--text-14); }
        }
        .item__list {
            display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; width: 40%;
            li:not(:last-child)::after { content: ','; }
        }
    }
    .process__step {
        div:nth-of-type(1) img { margin-top: 20px; }
        div:nth-of-type(3) img { margin-top: 10px; }
        div {
            padding-bottom: 45px; width: 100%; height: 360px; border-radius: 20px;
            span { height: 36px; border-radius: 20px 20px 0 0; font-size: var(--text-15); font-weight: 500; }
        }
        figure { flex-direction: column; height: 200px; }
        figcaption { font-size: var(--text-18); text-align: center; margin-top: auto; }
    }
    .application {
        padding: 45px 120px 45px 100px; border-radius: 20px;
        dt {
            font-size: 2rem;
            em { font-size: 2.25rem; }
        }
        dd { margin-top: 30px; font-size: var(--text-15); }
    }
    .main--picking .about__feature { grid-template-columns: 41% 59%; }
    .main--app .about__function { width: 100%; }
    .addons {
        h2 {
            font-size: var(--text-28);
            + p { margin-top: 10px; font-size: var(--text-15); }
        }
        .matrix.matrix-3 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
    }
    .matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
        .addons & { margin-top: 40px; }
        &.matrix-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .matrix__item {
        height: 300px; padding: 40px 40px 50px; border-radius: 20px;
        dl {
            dt { font-size: var(--text-26); }
            dd {
                margin-top: 14px; font-size: var(--text-16);
                sub { font-size: var(--text-12); vertical-align: bottom; }
            }
            .matrix__title { font-weight: 600; font-size: var(--text-20); white-space: nowrap; }
            .matrix__text { font-size: var(--text-13); white-space: nowrap; }
        }
    }
    .matrix__link { top: 40px; right: 40px; width: 24px; height: 24px; }
    .intro { grid-template-columns: 29.35% auto; }
    dialog .intro { grid-template-columns: 24.5% auto; } 
    .intro__side {
        h2 { font-size: var(--text-16); }
        p { margin-top: 10px; font-size: 2.5rem; }
    }
    .bg-gray-desktop { background-color: var(--bg-gray-100); }
    .only--mobile { display: none !important; }
    .not--wide { display: block !important; }
    .only--wide { display: none !important; }
    section.board { border-radius: 20px; padding: 50px 80px; }
    .attach__text { padding-left: 8px; text-indent: -8px; font-size: var(--text-11); color: var(--gray-400); }
    .form__group {
        :where(.attach, .btn__plus) { margin-left: 3px; }
    }
    .form__group--both {
        grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px;
        .form__label { margin-top: 5px; }
    }
    .form__label {
        label { font-size: var(--text-13); }
    }
    .form__matrix {
        display: grid; column-gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    dialog { padding: 40px 60px; border-radius: 15px; }
    .mobile--break { display: none; }
    .blocks__item { flex: 1 1 calc(25% - 15px); border-radius: 20px; padding: 60px 0 46px; gap: 30px; }
    .blocks__icon { height: 98px; }
    .blocks__content { gap: 22px; }
    .blocks__title { font-size: var(--text-22); }
    .blocks__description { font-size: var(--text-13); line-height: 1.25rem; }
    .service__header { gap: 25px; }
    .service__subtitle { font-size: var(--text-15); }
    .service__title { font-size: 2.875rem; }
    .service__description { font-weight: 400; font-size: var(--text-16); text-align: center; color: var(--gray-500); }
    .service__body { gap: 20px; }
    .service__row { justify-content: stretch; align-items: stretch; gap: 20px; }
    .service__note { font-size: var(--text-14); }
    .panel { padding: 50px 25px 50px 50px; border-radius: 20px; }
    .panel__content { gap: 16px; }
    .panel__title { font-size: var(--text-20); }
    .panel__text { font-size: var(--text-14); }
    .qna__item { gap: 20px; padding: 20px 40px; }
    .qna__icon { width: 30px; height: 30px; font-size: var(--text-18); }
    .qna__content { gap: 20px; margin-top: 4px; }
    .qna__question { font-size: var(--text-18); line-height: 1.25em; }
    .qna__answer { font-size: var(--text-16); line-height: 2em; }
    .content--side .main--pricing { gap: 140px; }
    .content--side .main--sales { gap: 0; }
    .diff__text { top: calc(50% + 34px); left: 150px; right: 150px; font-size: var(--text-16); }
    .about.about--diff { row-gap: 30px; }
    .costs__table {
        --costs-w: 18%;
        :where(th, td) { padding: 20px; font-size: var(--text-16); }
    }
    .pricing__notes {
        li { font-size: var(--text-14); line-height: 1.875rem; }
    }
    .about__note { padding-right: 8px; font-size: var(--text-13); }
    :where(.main--sellpia, .main--sellpos) {
        article { padding: 120px 0; }
    }
    .matrix__cross {
        &:nth-child(odd) { margin-top: 70px; }
    }
    .bg-wide {
        position: relative; background-color: var(--bg-gray-100);
        &::before { content: ''; position: absolute; top: 0; right: 100%; bottom: 0; width: 50%; background-color: var(--bg-gray-100); z-index: -1; }
        &::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 50%; background-color: var(--bg-gray-100); z-index: -1; }
    }
    .bg-wide .matrix__cross .matrix__item {
        height: auto; min-height: 220px; padding: 35px 40px; background-color: var(--white); box-shadow: var(--box-shadow);
        dt { font-size: var(--text-22); }
        dd { width: calc(100% + 30px); }
    }
    .info { height: 100%; border-radius: 20px 80px 20px 20px; padding: 40px 40px 50px; }
    .info__number { font-weight: 700; font-size: var(--text-24); line-height: 1.25; border-bottom: 3px solid var(--white); }
    .info__content { gap: 20px; }
    .info__title { font-weight: 700; font-size: var(--text-26); line-height: 2.25rem; white-space: nowrap; }
    .info__description { font-size: var(--text-16); line-height: 1.5rem; letter-spacing: -0.025rem; }
    .pricing__card { height: 570px; }
    .pricing__header { margin-top: 32px; height: 140px; }
    .plan__title { font-weight: 700; font-size: var(--text-18); }
    .plan__subtitle { font-weight: 500; font-size: var(--text-15); }
    .plan__price { font-size: 2.5rem; }
    .price__amount {
        font-size: 2.125rem;
        span { font-size: 1.875rem; position: relative; top: -1px; }
    }
    .price__unit {
        font-size: 1.875rem;
        span { font-weight: 600; font-size: var(--text-18); padding-left: 4px; }
    }
    .pricing__list {
        gap: 10px; padding: 35px 30px 30px;
        li { font-size: var(--text-15); }
    }
    .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .feature-card { padding: 55px 0; border-radius: 20px; height: 260px; }
    .feature-card__title { font-size: var(--text-18); }
    .workflow__menu { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; padding-bottom: 30px; }
    .workflow__menu-item { padding: 40px 0; border-radius: 20px; height: 180px; }
    .workflow__menu-text { font-size: var(--text-18); }
    .workflow__number { bottom: -42px; }
    .feature__list { gap: 20px; margin-top: 60px; }
    .feature__list li { padding: 30px 50px; gap: 20px; border-radius: 14px; }
    .feature__point { height: 25px; padding: 0 10px; font-size: var(--text-14); }
    .feature__title { font-size: 1.063rem; font-weight: 500; }
    .compare { gap: 20px; }
    .compare__card { gap: 20px; padding: 30px 50px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05); height: 300px; }
    .compare__vs { width: 80px; height: 80px; font-size: var(--text-26); }
    .compare__tag { height: 33px; padding: 0 20px; font-size: var(--text-16); }
    .compare__price { font-size: 70px; }
    .compare__unit { font-size: var(--text-20); }
    .compare__unit span { font-size: 40px; }
    .review {
        margin-top: 80px; padding: 20px 0 0;
        .swiper { padding: 0 65px; }
        .swiper-button-prev img, .swiper-button-next img { height: 25px; }
    }
    .review__header { height: 45px; font-size: var(--text-18); padding: 0 40px; }
    .review__card { border-radius: 14px; padding: 70px 50px 40px; gap: 20px; }
    .review__text { font-size: var(--text-20); }
    .block__section { gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .block__card { gap: 50px; padding: 50px 40px 40px 50px; }
    .block__subtitle { font-size: var(--text-15); }
    .block__title { font-size: var(--text-28); line-height: 36px; }
    .block__point { font-size: var(--text-14); }
    .block__list { font-size: var(--text-14); line-height: 26px; }
    .block__footer { grid-column: 1 / 3; font-size: var(--text-13); }
    .cs-container { gap: 20px; }
    .cs-card { padding: 68px 80px; border-radius: 20px; }
    .cs-card__title { margin-top: 30px; font-size: var(--text-24); }
    .cs-card__text { margin-top: 14px; font-size: var(--text-14); }
    .cs-card__button { height: 43px; padding: 0 40px; font-size: var(--text-16); }

    @media (max-width: 1280px) {
        .not--wide { display: none !important; }
        .only--wide { display: block !important; }
        .feedback { grid-template-columns: minmax(auto, 470px) auto; }
        .feedback__list {
            gap: 30px;
            li {
                padding: 18px 16px; font-size: var(--text-14);
                &.line--2 { padding-left: 26px; text-indent: -10px; }
            }
        }
        .about__feature {
            grid-template-columns: auto !important; justify-content: center; justify-items: center; row-gap: 30px;
            dl { min-height: auto; }
            .about__image { text-align: center; }
        }
        .picking {
            div { width: 200px; height: 200px; }
        }
        .arrow { width: 42px; }
        .application {
            flex-direction: column; gap: 30px;
        }
        .main--app .about__function { width: 530px; }
        .intro { grid-template-columns: auto; gap: 30px; }
        .main--addons .intro__side {
            br.break { display: inline-flex; content: ''; }
        }
        .intro__side {
            br.break { display: inline-flex; content: ''; }
        }
        .blocks__item { flex: 1 1 calc(50% - 15px); }
        .bottom__bars {
            grid-column: 1 / 2; margin-top: 200px; flex-direction: column; padding: 90px 100px 50px; column-gap: 50px; row-gap: 40px;
            p {
                span { white-space: nowrap; margin-right: 6px; }
            }
            > img { top: -180px; left: auto; }
        }
        .matrix__cross {
            &:nth-child(odd) { margin-top: 0; }
        }
    }
    @media (max-width: 1500px) {
        .panel__text {
            br { display: none; }
        }
    }
}
/* For Mobile */
@media (min-width: 768px) {
    .form__group--email {
        grid-auto-flow: column; grid-template-columns: 2fr minmax(0, 1fr);
    }
}
@media (max-width: 420px) {
    .matrix { grid-template-columns: auto; }
}
@media (max-width: 1023.98px) {
    :root { --form-size: 38px; }
    body, input, select, textarea, button, a { font-size: .75rem; line-height: 1.25rem; }
    [class*='btn__'] {
        &[class*='__solid'] {
            &[class*='--lg'] { height: 49px; font-size: var(--text-14); }
            &:not([class*='--lg']) { height: 42px; font-size: var(--text-12); }
        }
        &[class*='__outline'] { height: 42px; font-size: var(--text-12); }
        &[class*='__plus'] { background-size: 10px auto; }
        &[class*='__line'] {
            width: 130px; height: 38px; font-size: var(--text-12);
            span { padding-left: 5px; padding-right: 20px; background: url(../images/ico_arrow_right.svg) no-repeat right center / 16px auto; }
        }
    }
    .max-w-200 { max-width: 200px !important; }
    .max-w-220 { max-width: 220px !important; }
    .max-w-250 { max-width: 250px !important; }
    .max-w-260 { max-width: 260px !important; }
    .max-w-320 { max-width: 320px !important; }
    .not--wide { display: none !important; }
    .container { grid-template-rows: 60px auto; }
    .content { margin: 50px auto 100px; }
    .header { height: 60px; padding: 0 20px; }
    .header__bi { height: 18px; background-size: auto 18px; }
    .header__menu { display: none; }
    .header__link { display: none; }
    .header__bars { width: 20px; height: 20px; background-color: var(--black); mask: url(../images/ico_bars.svg) no-repeat center center; text-indent: -9999px; }
    .content--side {
        grid-template-columns: 1fr; width: 100%;
        aside { display: none; }
        main { gap: 50px; }
    }
    .content--side .main--sales { gap: 0; }
    main { padding: 0 20px; }
    footer { padding: 20px 20px 40px; background-color: var(--bg-gray-100); }
    .footer__link {
        .link {
            flex-direction: column; width: 50%; row-gap: 8px;
        }
    }
    .footer__info {
        font-size: var(--text-11);
        span { white-space: nowrap; }
        br { display: none; }
        .copyright { margin-top: 16px; }
    }
    article.visual {
        h2 { font-weight: 600; font-size: var(--text-12); }
        h3 { margin-top: 8px; font-size: var(--text-24); }
        p { margin-top: 16px; font-size: var(--text-11); }
    }
    .feedback { justify-items: center; row-gap: 50px; margin-top: 40px; }
    .feedback__list {
        gap: 20px; width: 100%; max-width: 384px;
        li {
            padding: 12px 20px; border-radius: 8px; font-size: var(--text-11);
            &.line--2 { padding-left: 28px; text-indent: -8px; }
        }
    }
    .feedback__image { width: 100%; max-width: 280px; box-sizing: border-box; }
    .about {
        row-gap: 20px;
    }
    .about__text {
        gap: 10px; margin-top: 30px;
        dd { font-size: var(--text-20); }
    }
    .about__feature {
        justify-items: center; row-gap: 30px; padding: 30px 15px; border-radius: 10px;
        .about__image img { width: 100%; max-width: 290px; box-sizing: border-box; }
        dl {
            width: 260px; margin: 0 auto;
            dt { font-size: var(--text-18); line-height: var(--text-28); }
            dd {
                &:first-of-type { margin-top: 15px; }
                .line--2 {
                    margin-top: 15px; padding-left: 8px; text-indent: -8px; font-size: var(--text-11); color: var(--gray-400); white-space: normal; word-break: keep-all;
                    br { display: none; }
                }
                &.mobile__break > span { display: inline; white-space: normal; }
            }
        }
    }
    .about__subtitle { display: none; }
    .about__item { display: none; }
    .about__list {
        margin-top: 15px;
        li {
            font-size: var(--text-12);
            span { width: 19px; height: 19px; font-size: var(--text-10); padding-bottom: 1px; box-sizing: border-box; }
        }
    }
    .about__function {
        grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max-content; width: 100%; max-width: 290px; height: 380px;
        li {
            figure { gap: 4px; }
            &:nth-child(1) { grid-column: 1 / 3; }
        }
    }
    .picking {
        gap: 15px; margin-top: 30px; justify-content: center; margin: 0 auto;
        figcaption { gap: 4px; height: 32px; font-size: var(--text-11); }
        div {
            width: 130px; height: 130px; padding: 10px;
            img { width: 100%; height: 100%; }
        }
        .clock { width: 16px; height: 16px; background-size: 16px auto; }
    }
    .operation__step {
        flex-direction: column;
        figure {
            gap: 30px; border-radius: 10px; padding: 20px 0;
            img { width: 33px; }
        }
        figcaption {
            width: 150px; margin-right: 50px;
            br { display: none; }
            p { font-size: var(--text-10); color: var(--gray-400); white-space: nowrap; }
        }
    }
    .main--kiosk .operation__step {
        gap: 10px; flex-direction: row; flex-wrap: wrap;
        figure {
            width: calc(50% - 5px); flex-direction: column; gap: 20px; height: 140px; box-shadow: var(--box-shadow);
            img { width: 45px; }
        }
        figcaption { width: auto; margin-right: 0; font-weight: 500; }
    }
    .arrow { height: 30px; background: url(../images/ico_arrow_bottom.svg) no-repeat center center; }
    .target__list {
        gap: 14px;
        li {
            flex-wrap: wrap; padding: 20px 10px; border-radius: 10px; text-align: center;
            span { display: block; white-space: nowrap; }
        }
    }
    .pricing__title { display: none; }
    .pricing__item {
        flex-direction: column; padding: 40px 0; box-shadow: var(--shadow); border-radius: 10px;
        .item__title {
            height: 26px; padding: 0 12px; border-radius: 13px; background-color: var(--teal); font-weight: 500; color: var(--white); align-content: center;
            br { display: none; }
        }
        .item__price {
            margin-top: 12px; font-size: var(--text-18);
            strong { font-size: var(--text-20); }
            em { display: block; margin-top: 4px; font-size: var(--text-10); }
        }
        .item__list {
            margin-top: 20px; color: var(--gray-500);
            li::before { content: '•'; margin-right: 5px; }
        }
    }
    .process__step {
        flex-direction: column;
        div:nth-of-type(1) img { width: 94px; margin-bottom: 10px; }
        div:nth-of-type(2) img { width: 74px; padding: 0 10px; }
        div:nth-of-type(3) img { width: 54px; padding: 0 20px; }
        div {
            border-radius: 10px;
            span { height: 30px; border-radius: 10px 10px 0 0; font-weight: 600; }
        }
        figure { gap: 30px; height: 90px; }
        figcaption { width: 135px; margin-right: 20px; font-size: var(--text-14); }
    }
    .application {
        flex-direction: column; padding: 30px 20px; border-radius: 10px;
        dt {
            font-size: var(--text-20);
            em { font-size: var(--text-22); }
        }
        dd { margin-top: 10px; font-size: var(--text-11); font-weight: 500; }
        img { width: 100%; max-width: 280px; margin-top: 24px; }
    }
    .main--app {
        .target__list {
            li:nth-child(2) { padding: 20px; }
        }
    }
    .addons {
        gap: 30px;
        h2 {
            font-size: var(--text-20);
            + p { margin-top: 6px; font-size: var(--text-11); }
        }
    }
    .addons__button { display: none; }
    .matrix {
        grid-template-columns: repeat(auto-fill, minmax(320px, auto)); gap: 10px;
        .addons & { margin-top: 30px; }
    }
    .matrix__item {
        gap: 26px; padding: 30px 26px 30px 30px; border-radius: 10px;
        > img { width: 40px; }
        dl {
            dt { font-size: var(--text-18); }
            dd { margin-top: 10px; font-size: var(--text-12); }
        }
    }
    .matrix__link { top: 30px; right: 30px; width: 14px; height: 14px; background-size: 8px auto; }
    .intro { gap: 30px; }
    main .intro { margin-top: 80px; }
    .intro__side {
        h2 { font-size: var(--text-12); }
        p { margin-top: 4px; font-size: var(--text-20); }
    br.break { display: inline-flex; content: ''; }
    }
    .only--desktop { display: none !important; }
    section.board { border-radius: 10px; padding: 20px 20px 40px; }
    .attach__text { padding-left: 8px; text-indent: -8px; font-size: var(--text-11); color: var(--gray-400); line-height: 1rem; }
    .form__group {
        font-size: var(--text-12);
        label {
            &.attach { width: 82px; font-size: var(--text-12); }
        }
    }
    .form__group--both {
        gap: 10px;
        .form__label:first-child { margin-top: 10px; }
    }
    .form__button {
        .btn { width: 100%; }
        &.fab {
            position: fixed; right: 0; bottom: 0; left: 0;
            .btn { border-radius: 0; }
        }
    }
    .form__label {
        label { font-size: var(--text-11); }
    }
    .form__matrix {
        .form__label { height: var(--form-size); }
    }
    .main--addons .addons:first-of-type :where(h2, h2 + p) { text-align: center; }
    dialog { top: auto; padding: 20px 20px 80px; border-radius: 20px 20px 0 0; }
    .blocks { gap: 10px; }
    .blocks__item { flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); border-radius: 10px; padding: 30px 0; gap: 16px; }
    .blocks__icon img { height: 50%; }
    .blocks__content { gap: 10px; margin-top: -50px; }
    .blocks__title { font-size: var(--text-15); }
    .blocks__description { height: 48px; font-size: var(--text-11); line-height: 1rem; align-content: center; }
    .service__header { gap: 10px; padding: 30px 0 10px; }
    .service__subtitle { font-size: var(--text-12); }
    .service__title { font-size: var(--text-26); }
    .service__description { display: none; }
    .service__body { gap: 14px; }
    .service__row { flex-direction: column; gap: 14px; }
    .service__note { font-size: var(--text-11); line-height: 0.8125rem; }
    .panel { padding: 24px 14px 24px 22px; border-radius: 10px; }
    .panel__content { gap: 10px; }
    .panel__title { font-size: var(--text-14); }
    .panel__text {
        font-size: var(--text-12); line-height: 1.125rem; word-break: keep-all;
        .panel__text {
            br { display: none; }
        }
    }
    .qna__item { gap: 10px; padding: 20px; }
    .qna__icon { width: 20px; height: 20px; font-size: var(--text-12); }
    .qna__content { gap: 16px; margin-top: 1px; }
    .qna__question { font-size: var(--text-13); line-height: 20px; }
    .qna__answer { font-size: var(--text-12); line-height: 20px; }
    .diff__image { padding-bottom: 47px; }
    .diff__text { top: calc(100% - 47px); left: 0; right: 0; font-size: var(--text-14); }
    .about.about--diff { row-gap: 20px; }
    .costs__table {
        --costs-w: 25%;
        :where(th, td) { padding: 20px 18px; font-size: var(--text-13); }
    }
    .pricing__notes {
        padding: 10px 0;
        li { padding-left: 8px; text-indent: -8px; font-size: var(--text-11); }
    }
    .about__note { margin-top: 8px; margin-right: 30px; font-size: var(--text-11); color: var(--gray-400); text-align: right; }
    .toggle-text { font-weight: 500; font-size: var(--text-13); }
    .toggle-switch { height: 26px; }
    .toggle-switch.active .toggle-slider-circle { transform: translateX(23px); }
    .toggle-slider-circle { top: 4px; left: 4px; }
    .about__header {
        h4 { font-size: var(--text-18); font-weight: 600; }
    }
    .bottom__bars {
        grid-column: 1 / 2; margin-top: 150px; flex-direction: column; padding: 60px 25px 30px; row-gap: 20px;
        p {
            font-weight: 500; font-size: var(--text-14); line-height: 1.375rem; text-align: center;
            span { display: block; }
        }
        > img { top: -100px; left: auto; width: 152px; }
        .bottom__btns { flex-wrap: wrap; }
    }
    .matrix__cross {
        gap: 10px;
        &:nth-child(odd) { margin-top: 0; }
    }
    .bg-wide .matrix__cross .matrix__item {
        dd { width: calc(100% + 20px); }
    }
    .hero { height: 800px; background-size: cover; }
    .hero__text {
        flex-direction: column; gap: 20px;
        dt img { height: 31px; }
        dd { font-size: var(--text-14); line-height: 160%; text-align: center; }
    }
    .video { height: 800px; }
    .video__text {
        flex-direction: column; gap: 20px;
        dt img { height: 31px; }
        dd { font-size: var(--text-14); line-height: 160%; text-align: center; }
    }
    .info { height: 342px; border-radius: 10px 70px 10px 10px; padding: 30px 30px 40px; }
    .info__number { font-weight: 600; font-size: var(--text-20); line-height: 1.5; border-bottom: 2px solid var(--white); }
    .info__content { gap: 16px; }
    .info__title { font-weight: 600; font-size: var(--text-22); line-height: 1.5; }
    .info__description { font-size: var(--text-12); line-height: 1.25rem; }
    .pricing__card { height: 100%; }
    .pricing__header { margin-top: 22px; height: 123px; }
    .plan__title { font-weight: 600; font-size: var(--text-16); }
    .plan__subtitle { font-size: var(--text-12); }
    .plan__price { font-size: 2rem; }
    .price__amount { font-size: 1.563rem; }
    .price__unit { font-size: var(--text-12); margin-top: 6px; }
    .pricing__list {
        gap: 2px; padding: 30px 20px 50px;
        li { font-size: var(--text-11); }
    }
    .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .feature-card { padding: 40px 0 30px; border-radius: 10px; height: 180px; }
    .feature-card__icon img { width: 57px; }
    .feature-card__title { font-size: var(--text-13); }
    .workflow__menu { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 30px; }
    .workflow__menu::before { display: none; }
    .workflow__menu-item { padding: 30px 0 26px; border-radius: 10px; height: 130px; }
    .workflow__menu-text { font-size: var(--text-14); }
    .workflow__menu-icon img { width: 39px; }
    .workflow__number { bottom: -11px; }
    .feature__list { gap: 10px; margin-top: 40px; }
    .feature__list li { padding: 16px 14px; gap: 14px; border-radius: 10px; }
    .feature__point { height: 19px; padding: 0 8px; font-size: 0.563rem; width: 53px; box-sizing: border-box; }
    .feature__title {
        font-size: var(--text-13);
        span { white-space: nowrap; }
    }
    .compare { flex-direction: column; gap: 10px; }
    .compare__card {
        gap: 12px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
        &:first-child { padding: 30px 0 40px; }
        &:last-child {
            padding: 40px 0 30px;
        }
    }
    .compare__vs { width: 45px; height: 45px; font-size: var(--text-16); }
    .compare__tag { height: 29px; padding: 0 12px; font-size: var(--text-12); }
    .compare__price { font-size: 46px; }
    .compare__unit { font-size: var(--text-18); }
    .compare__unit span { font-size: 30px; }
    .compare__card--sellpia {
        .compare__price { font-size: 40px; }
    }
    .review {
        margin-top: 40px; padding: 15px 0 0;
        .swiper-button-prev { left: 10px; }
        .swiper-button-next { right: 10px; }
    }
    .review__header { height: 30px; font-size: var(--text-12); padding: 0 16px; }
    .review__card { border-radius: 10px; padding: 40px 60px 30px; gap: 10px; }
    .review__text { font-size: var(--text-13); }
    .review__star img { width: 15px; }
    .block__section { gap: 10px; }
    .block__card { gap: 30px; padding: 30px 16px 30px 26px; }
    .block__subtitle { font-size: var(--text-12); }
    .block__title { font-size: var(--text-22); line-height: 26px; }
    .block__point { font-size: var(--text-11); }
    .block__list { font-size: var(--text-11); line-height: 22px; }
    .block__footer { margin-top: 10px; font-size: var(--text-11); line-height: 0.8125rem; }
    .cs-container { gap: 10px; }
    .cs-card { padding: 30px; border-radius: 10px; }
    .cs-card__icon img { height: 50px; }
    .cs-card__title { margin-top: 20px; font-size: var(--text-18); }
    .cs-card__text { margin-top: 6px; font-size: var(--text-11); }
    .cs-card__button { height: 40px; padding: 0 36px; font-size: var(--text-13); }    
    .site-container { width: 140px; }
    .dropdown-header { padding: 0 14px 0 16px; border-radius: 6px; height: 36px; }
    .dropdown-text { font-size: var(--text-12); }
    .site-list { max-height: 106px; }
    .site-item { font-size: var(--text-12); }
    .plto__table {
        height: 228px; border-top-width: 1px; border-radius: 3px; width: calc(100% + 20px); margin: 20px -10px 0; box-sizing: border-box; 
        th, td { height: 20px; font-size: 6px; line-height: 100%; }
        tr td:first-child img { max-width: 50px; }
        .iconCk { width: 20px; height: 20px; background-size: 5px auto; }
    }
    .plto__table::-webkit-scrollbar { width: 2px; }
    .plto__table::-webkit-scrollbar-track { margin: 0; }

    .search-container { border-radius: 0; padding: 40px 30px 40px; position: relative; left: -20px; width: calc(100% + 40px); margin-top: 50px; }
    .search-bar { width: 100%; }
    input.search-input { font-size: var(--text-13); }
    .search-controls { gap: 10px; }
    .reset-button { background-size: 17px auto; }
    .search-button { background-size: 19px auto; }
    .category-text { font-size: var(--text-13); padding: 0 10px 14px; }
    .category-item.active .category-text { padding-bottom: 12px; }
    .button-wrap { margin-top: 20px; }
    .button { height: 34px; padding: 0 16px 0 20px; margin-right: -10px; }
    .button-text { font-size: var(--text-12); }
    .button-icon { background-size: 6px auto; }
    .terms-container {
        font-size: var(--text-11);
        a, h3, h4 { font-size: var(--text-11); }
        .terms-content > p { padding-left: 12px; text-indent: -12px; }
        .indent { padding-left: 8px; text-indent: -8px; }
    }
    #termsLayer, #privacyLayer { padding: 20px 10px 40px; }            
    @media (max-width: 360px) {
        .block__content {
            .block__column:nth-child(2) { min-width: 35%; }
        }
    }
    @media (max-width: 460px) {
        br.break { display: inline-flex; content: ''; }
        .matrix { grid-template-columns: auto; }
        .matrix__item {
            & dl {
                dd {
                    sub { display: block; }
                }
            }
        }
    }
    @media (max-width: 512px) {
        .feature-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
        .panel__text {
            br { display: none; }
        }
    }
    @media (max-width: 700px) {
       .cs-container { flex-direction: column; }
    }
}