:root {
    --slider-height: 360px;
    --swiper-height: 100%;
    --swiper-pagination-progressbar-bg-color: rgba(18, 39, 109, 0.1) !important;
    --swiper-theme-color: rgba(18, 39, 109, 1) !important;
}
@layer {
    nav {
        margin-bottom: 0;
    }
    main {
        position: relative;
    }
    .slide_area {
        position: absolute;
        width: 100%;
        height: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e9f2ff;
    }
    .slide_area img {
        cursor: pointer;
    }
    .swiper {
        min-width: 100%;
        max-width: 990px;
        height: var(--swiper-height);
        background-color: #d3e4fe;
        border-radius: 16px;
    }
    .swiper-slide {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-button-prev {
        visibility: hidden;
    }
    .swiper-button-next {
        visibility: hidden;
    }
    .swiper-scrollbar {
        display: none;
    }
    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        top: 30px;
        right: 20px;
        left: unset !important;
        bottom: unset !important;
        width: unset !important;
    }
    section {
        margin-bottom: 50px;
    }
    section:first-of-type {
        margin-bottom: 120px;
    }
    .grid {
        gap: 20px;
    }
    .col_4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .login {
        max-width: 1024px;
        margin-top: calc(var(--slider-height) - 40px);
    }
    .login .login-wrap {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background-color: var(--color-white);
        padding: 17px 20px;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        width: 990px;
    }
    .login .login-info,
    .login .login-form {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .login .login-form input {
        height: 46px;
        width: 200px;
    }
    .login .login-form input[type='button'] {
        width: 130px;
    }
    .login .login-menu {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .login .login-menu a.to-join {
        font-weight: 700;
        color: #092481;
        padding-right: 10px;
    }
    .divider {
        width: 1px;
        height: 14px;
        background: #d4dce7;
    }
    .login .decorator {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        width: 20px;
        height: 20px;
        background: var(--color-white);
        box-shadow: 0px 3px 8px rgb(0 0 0 / 10%);
        margin-right: 6px;
        margin-left: 6px;
        font-size: 12px;
        line-height: 20px;
    }
    .login .id {
        color: var(--color-focus);
    }
    /* service_overview */
    .service_overview-list {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .service_overview .service_overview-item ul {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .service_overview .service_overview-item img {
        padding-bottom: 10px;
    }
    .service_overview .service_overview-item .service_overview-item--title {
        font-weight: 600;
        font-size: 16px;
        line-height: 26px;
        text-align: center;
        color: #111111;
    }
    .service_overview .service_overview-item .service_overview-item--content {
        text-align: center;
        color: #666666;
    }

    /* cost table */
    .cost_table {
        display: flex;
        gap: 20px;
    }
    .cost_table .inner {
        display: flex;
        flex-direction: column;
    }
    .cost_table .cost_table-label {
        background: #626b89;
        border-radius: 12px 12px 0 0;
        width: 120px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cost_table .cost_table-label h3 {
        color: var(--color-white);
    }
    .cost_table .cost_table-wrap {
        width: 100%;
        padding: 21px 41px;
        border-radius: 0 16px 16px 16px;
        border: 1px solid #c5cde9;
    }
    .cost_table .cost_table-list {
        display: flex;
        justify-content: space-between;
    }
    .cost_table .cost_table-item ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cost_table .cost_table-item--title {
        font-weight: 600;

        color: #111111;
    }
    .cost_table .cost_table-item--description {
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        color: #666666;
    }
    .cost_table .cost_table-item--byte,
    .cost_table .cost_table-item--cost span {
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        color: #12276d;
    }
    .cost_table .cost_table-item--cost {
        color: #d4dce7;
    }
    .cost_table .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--color-surface);
        min-height: 100px;
        width: calc(100% / 4);
        border-radius: 16px;
    }
    .cost_table .box .item_name {
        position: relative;
    }
    .cost_table .box .item_cost {
        color: var(--color-primary);
        font-size: 1.4rem;
    }

    /* send message  */
    /* col-1  */
    .send_message-wrap {
        display: grid;
        column-gap: 24px;
        position: relative;
    }

    .send_message-format {
        grid-template-rows: 1fr;
    }
    .send_message-format .col > ul {
        height: 100%;
    }
    .send_message-format ul.phone_book,
    .send_message-format ul.message {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        border: 1px solid #d4dce7;
    }
    .send_message-format ul.message {
        border-radius: 40px;
    }
    .send_message-wrap li {
        border-bottom: 1px solid #e9ebee;
    }
    .send_message-wrap li.message--decorator {
        position: relative;
        border-bottom: none;
        padding-top: 10px;
        padding-bottom: 30px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .send_message-wrap li.message--decorator .bar {
        width: 46px;
        height: 6px;
        background: #dee4ed;
        border-radius: 100px;
    }
    .send_message-wrap li.message--decorator .img-wrap {
        position: absolute;
        bottom: 0;
        right: 21px;
        width: 69px;
    }
    .send_message-wrap li.message--decorator .img-wrap img {
        max-width: 100%;
    }
    .send_message-wrap li:last-of-type,
    .send_message-wrap li.message--content {
        border-bottom: transparent;
    }
    .send_message-wrap li.message--template {
        padding: 11px 15px;
    }
    .send_message-wrap input {
        width: 100%;
        border: transparent;
        border-radius: 0;
    }
    .send_message-wrap input:hover {
        border-radius: 0;
    }
    .send_message-wrap .message--content span.variables {
        padding: 11px 15px;
        line-height: 1.6;
    }
    .send_message-wrap .message--content textarea {
        width: 100%;
        height: 360px;
        border: transparent;
        word-wrap: break-word;
    }
    .send_message-wrap .message--option {
        padding: 4px 16px 15px;
        display: flex;
        justify-content: space-between;
        margin-top: auto;
    }
    .send_message-wrap .message--photo input {
        display: none;
    }
    .send_message-wrap .message--photo .btn-upload {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;

        height: 32px;
        background: #12276d;
        border-radius: 6px;
    }
    .send_message-wrap .btn {
        height: 32px;
        color: var(--color-white);
        padding: 4px 9px;
        min-height: unset;
    }
    .send_message-wrap .message--photo .btn-upload .img_wrap {
        width: 16px;
        height: 16px;
    }
    .send_message-wrap .message--photo .btn-upload img {
        max-width: 100%;
    }
    .send_message-wrap .message--photo .btn-upload span {
        white-space: nowrap;
    }
    .send_message-wrap .message--byte {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 12px;
        line-height: 22px;
        color: #333;
    }
    .send_message-wrap .message--byte .count {
        font-weight: 700;
    }
    .send_message-wrap .message--byte .message_type {
        font-size: 13px;

        padding: 0 7px;
        color: #003bff;
        background: rgba(9, 122, 255, 0.1);
        border-radius: 4px;
    }
    .send_message-wrap .message--call_number {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px 20px;
    }
    .send_message-wrap .message--call_number p span {
        color: rgba(102, 102, 102, 1);
    }
    .send_message-wrap .message--call_number button {
        min-width: unset;
        min-height: unset;
        border: transparent;
        display: flex;
        gap: 4px;
    }
    .send_message-wrap .message--call_number button .material-icons {
        color: #747e90;
        font-size: 16px !important;
    }
    /* send message */
    .send_message .inner_nav {
        margin-bottom: 20px;
    }
    .send_message .inner_nav li {
        width: 100%;
    }
    .send_message-format.col_3 {
        grid-template-columns: 240px 1fr 324px;
        column-gap: 20px;
        grid-template-rows: 1fr;
    }

    .send_message-format.col_2 {
        grid-template-columns: 1fr 2fr;
        column-gap: 40px;
        grid-template-rows: 1fr;
    }
    .send_message-format .col > ul {
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        border: 1px solid #d4dce7;
    }
    .send_message-format ul.message {
        border-radius: 40px;
    }
    .send_message-wrap li {
        border-bottom: 1px solid #e9ebee;
    }
    /* col-1  */
    .send_message-wrap li.message_photo--decorator {
        position: relative;
        border-bottom: none;
        padding-top: 10px;
        padding-bottom: 30px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .send_message-wrap li.message_photo--decorator a {
        position: absolute;
        bottom: 0;
        right: 21px;
        cursor: pointer;
    }
    .send_message-wrap li.message_photo--preview {
        padding-top: 16px;
        border-bottom: none;
        width: 100%;
        position: relative;
    }
    .send_message-wrap li.message_photo--preview .img-wrap {
        width: 221px;
        height: 271px;
        background-color: #f5f8fc;
        border: 1px solid #e9ebee;
        margin: 0 auto;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .send_message-wrap li.message_photo--preview .img-wrap img {
        max-width: 100%;
    }
    .send_message-wrap li.message_photo--preview .hover_to_attach {
        position: absolute;
        width: 221px;
        height: 271px;
        background-color: rgba(51, 51, 51, 0.35);
        border: 1px solid #e9ebee;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        left: 0;
        top: 0;
        display: flex;
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .send_message-wrap li.message_photo--preview .hover_to_attach > div {
        text-align: center;
        color: var(--color-white);
    }
    .send_message-wrap li.message_photo--preview .hover_to_attach > div .material-icons {
        font-size: 48px !important;
    }
    .send_message-wrap li.message_photo--preview .hover_to_attach input {
        display: none;
    }
    .send_message-wrap .message_photo--preview:hover .hover_to_attach {
        opacity: 1;
    }
    .send_message-wrap li.btn-wrap {
        padding: 16px 14px;
    }
    .send_message-wrap li.btn-wrap button {
        border: 1px solid #d4dce7;
        width: 100%;
        color: #666;
    }
    /* col-2 */
    .send_message-wrap .phone_book--add {
        position: relative;
        border-bottom: 1px solid #e9ebee;
    }
    .send_message-wrap .phone_book--add .btn {
        position: absolute;
        top: 7px;
        right: 15px;
    }
    .send_message-wrap .phone_book-list {
        padding: 14px 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: transparent;
    }
    .send_message-wrap .phone_book--add_options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .send_message-wrap .phone_book--add_options li {
        cursor: pointer;
        background: #f5f8fc;
        border: 1px solid #e9ebee;
        border-radius: 6px;
        color: #333333;
        white-space: nowrap;
        word-break: keep-all;
        padding: 4px 11px;
    }
    .send_message-wrap .phone_book--add_options li input {
        display: none;
    }
    .send_message-wrap .phone_book--numbers {
        border: 1px solid #e9ebee;
        border-radius: 10px;
        padding: 13px 10px 9px 13px;
        height: 319px;
        overflow: auto;
    }
    .send_message-wrap .phone_book--numbers li {
        padding: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .send_message-wrap .phone_book--numbers li .btn_delete {
        cursor: pointer;
        color: #c4ceda;
        transition: color 0.3s linear;
        font-size: 1rem !important;
    }
    .send_message-wrap .phone_book--numbers li .btn_delete:hover {
        color: #939ca8;
    }
    .send_message-wrap .phone_book--delete {
        border: transparent;
        padding: 0 15px 14px;
    }
    .send_message-wrap .phone_book--delete button {
        cursor: pointer;
        background: #f5f8fc;
        border: 1px solid #e9ebee;
        border-radius: 6px;
        color: #333333;
        white-space: nowrap;
        word-break: keep-all;
        padding: 4px 11px;
        min-height: unset;
        min-width: unset;
    }
    .send_message-wrap .phone_book--count {
        padding: 0px 15px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .send_message-wrap .phone_book--count p {
        font-size: 16px;
        line-height: 26px;
        color: rgba(51, 51, 51, 1);
        margin-left: auto;
    }
    .send_message-wrap .phone_book--count p span {
        color: rgba(0, 59, 255, 1);
        font-weight: 700;
    }
    .send_message-wrap .phone_book--count .checkbox label {
        font-size: inherit;
    }
    .send_message-wrap .phone_book-btn {
        padding: 0 14px 16px;
        margin-top: auto;
    }
    .send_message-wrap .phone_book-btn button {
        width: 100%;
    }

    /* col2  */
    .phone_book-wrap {
        position: relative;
    }
    .template-wrap > *:not(.pagination),
    .phone_book-wrap > *:not(.pagination) {
        padding: 14px 15px 0;
    }
    .col .sub_heading {
        font-size: 1.2rem;
        font-weight: 700;
    }
    .phone_book-wrap .info {
        position: absolute;
        right: 0;
    }
    .phone_book-wrap .info li {
        padding: 0;
        border: unset;
        font-size: 0.85rem;
        line-height: 1.2;
    }
    /* message template */
    .template-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .template-header .main_heading {
        margin-bottom: 0;
    }
    ul.inner_nav {
        display: flex;
        border: 1px solid #e9ebee;
        border-radius: 11px 11px 0 0;
    }
    ul.inner_nav li {
        border-right: 1px solid #d4dce7;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 10px;
        cursor: pointer;
        color: var(--color-black40);
    }
    ul.inner_nav li:last-of-type {
        border-right: 1px solid transparent;
    }
    ul.inner_nav li:hover {
        color: var(--color-black50);
        transition: color 300ms ease-in-out;
    }
    ul.inner_nav li.active {
        color: var(--color-focus);
        font-weight: 600;
        border-bottom: 3px solid var(--color-focus);
    }
    .tab_content {
        padding: 20px 0 0;
    }
    .template_table {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(250px, 100%);
        gap: 14px;
        flex-wrap: wrap;
        padding: 14px;
    }
    .template_table.scroll {
        padding-right: 16px;
    }
    .template_table .box {
        cursor: pointer;
        border: 1px solid #d4dce7;
        background-color: var(--color-white);
        min-height: 100px;
        width: 100%;
        transition: border-color 0.3s linear;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-radius: 16px;
    }
    .template_table .box:hover {
        border: 1px solid var(--color-focus);
    }
    .template_table .template_header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding: 12px 10px 11px;
        border-bottom: 1px solid #e9ebee;
    }
    .template_table .template_tag {
        background-color: var(--color-primary);
        color: var(--color-white);
        padding: 0 7px;
        font-size: 13px;
        line-height: 22px;
        border-radius: 4px;
    }
    .template_table .template_tag.short {
        background-color: rgba(9, 122, 255, 0.1);
        color: #003bff;
    }
    .template_table .template_tag.long {
        background-color: var(--color-focus);
        color: var(--color-white);
    }
    .template_table .template_tag.kakao {
        background-color: var(--color-tertiary-container);
        color: var(--color-on-tertiary-container);
    }
    .template_table textarea {
        cursor: pointer;
        border: none;
        width: auto;
        margin: 0 10px;
        background: #f5f8fc;
        border-radius: 10px;
        word-wrap: break-word;
    }
    .template_table .template_footer {
        padding: 11px 17px;
        margin-left: auto;
        margin-top: auto;
        font-size: 0.8rem;
        color: #999999;
    }
    .tab3 .template_table .box .img_box {
        width: 100%;
        max-height: 350px;
    }
    .tab3 .template_table .box .img_box img {
        max-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }
    /* ad */
    section.service_overview .inner {
        position: relative;
    }
    .send_message-ad {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(110%, 0);
        transition: transform 0.3s ease-in-out;
        width: 230px;
    }
}

@layer override {
    .normalize {
        max-width: 800px;
    }
    .grid_wrapper {
        border-radius: 8px;
        background-color: var(--color-surface);
        padding: var(--padding-l);
        border-color: var(--color-black20);
    }
    .grid_wrapper .grid {
        gap: 10px;
    }
    .grid_wrapper .grid .col {
        display: flex;
        background-color: var(--color-white);
        padding: var(--padding-l);
        border-radius: 8px;
        border: 1px solid var(--color-primary-container);
    }
    .main_heading {
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
        color: #111111;
    }
    .fill:hover {
        background-color: #2749c7;
        transition: background 0.3s linear;
    }
}
.cost_table .box .item_name::before {
    content: '';
    width: 100%;
    height: 4px;
    background-color: var(--color-tertiary-container);
    position: absolute;
    display: flex;
    bottom: 0px;
    left: 0;
}

.tab_content {
    display: none;
}
.tab_content.current {
    display: inherit;
}
.send_message-wrap .message--content input,
.send_message-wrap .message--content textarea {
    border-radius: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.message--template .template_content {
    min-height: 190px;
}