.plan-select-bar {

    position: sticky;

    bottom: 0px;

    z-index: 99;

    width: 100%;

    background-color: rgb(0 0 0 / var(--tw-bg-opacity));

    --tw-bg-opacity: 0.7;

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

    padding-left: 1.25rem;

    padding-right: 1.25rem;

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity));

    --tw-backdrop-blur: blur(60px);

    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

@media (min-width: 700px) {

    .plan-select-bar {

        padding: 24px
    }
}

.plan-select-bar .bar-head {

    margin-bottom: 1rem;

    font-size: 0.9375rem;

    line-height: 1.5
}

@media (min-width: 700px) {

    .plan-select-bar .bar-head {

        font-size: 0.9375rem;

        line-height: 1.5
    }
}

.compare-box {

    display: flex;

    flex: 1 1 0%;

    justify-content: space-between;

    border-radius: 12px;

    border-width: 1px;

    border-color: rgb(255 255 255 / var(--tw-border-opacity));

    --tw-border-opacity: 0.5;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    --tw-bg-opacity: 0.25;

    padding-left: 0.75rem;

    padding-right: 0.75rem;

    padding-top: 0.625rem;

    padding-bottom: 0.625rem
}

@media (min-width: 700px) {

    .compare-box {

        padding: 16px
    }
}

@media (min-width: 1024px) {

    .compare-box {

        padding-left: 40px;

        padding-right: 40px
    }
}

.compare-box input {

    position: absolute;

    opacity: 0
}

.compare-box.empty {

    pointer-events: none;

    border-color: transparent;

    --tw-bg-opacity: 0.1
}

.compare-box.empty .compare-box-title {

    --tw-text-opacity: 1;

    color: rgb(168 174 184 / var(--tw-text-opacity))
}

.compare-box.empty .cancel-btn {

    display: none
}

.compare-box:last-child {

    display: none
}

@media (min-width: 700px) {

    .compare-box:last-child {

        display: flex
    }
}

.compare-box .cancel-btn svg {

    height: 1.25rem;

    width: 1.25rem
}

@media (min-width: 1024px) {

    .compare-box .cancel-btn svg {

        height: 1.5rem;

        width: 1.5rem
    }
}

.compare-box-title small {

    margin-left: 0.25rem;

    font-size: 0.8125rem;

    line-height: 1.5;

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity));

    opacity: 0.8
}

@media (min-width: 700px) {

    .compare-box-title small {

        margin-left: 0.5rem;

        font-size: 0.9375rem;

        line-height: 1.5
    }
}

.compare-box-title small.original-price {

    text-decoration-line: line-through
}

.plan-card-wrap {

    display: grid;

    grid-template-columns: repeat(1, minmax(0, 1fr));

    -moz-column-gap: 1.5rem;

         column-gap: 1.5rem;

    row-gap: 2.5rem
}

@media (min-width: 576px) {

    .plan-card-wrap {

        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media (min-width: 1281px) {

    .plan-card-wrap {

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.sec-content .sec-block.select {

    display: block
}

.sec-content .sec-block.compare {

    display: none
}

.sec-content.compare-result .sec-block.select {

    display: none
}

.sec-content.compare-result .sec-block.compare {

    display: block
}

/*# sourceMappingURL=telecom-plan.css.map */