#section_service .service_hero_wrap {
    display: flex;
    width: 100%;
    min-width: 970px;
    padding: 110px 0px 135px;
    background: linear-gradient(rgb(10, 9, 27) 65.38%, rgb(8, 57, 170) 86.06%);
}

#section_service .service_hero_wrap .service_hero_wrap_inner {
    max-width: 1280px;
    width: 100%;
    margin: auto;
    padding: 0px 78px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#section_service .service_hero_wrap .left_description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

#section_service .service_hero_wrap .left_description .main_tag {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#section_service .service_hero_wrap .left_description .main_title {
    color: rgb(255, 255, 255);
    font-family: "Gmarket Sans";
    font-size: 58px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -1.45px;
}

#section_service .service_hero_wrap .left_description .main_title .text_blue {
    color: rgb(45, 105, 255);
}

#section_service .service_hero_wrap .left_description .description {
    color: rgba(255, 255, 255, 0.76);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.5px;
    opacity: 0.8;
}

#section_service .service_hero_wrap .right_image {
}

#section_service .service_bonus_wrap {
    display: flex;
    width: 100%;
    padding: 100px 0px;
    background: rgb(240, 245, 255);
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner {
    display: flex;
    width: 970px;
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_title_wrap .service_bonus_title_tag {
    color: rgb(66, 148, 255);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.35px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_title_wrap .service_bonus_title {
    color: rgb(17, 17, 17);
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -1px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_title_wrap .service_bonus_description {
    color: rgb(51, 51, 51);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.375px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_item_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_item_wrap .service_bonus_item {
    display: flex;
    width: 400px;
    padding-bottom: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 10px;
    background: rgb(255, 255, 255);
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_item_wrap .service_bonus_item .service_bonus_item_title {
    display: flex;
    width: 400px;
    padding: 8px 0px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px 10px 0px 0px;
    background: rgb(66, 148, 255);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.55px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_item_wrap .service_bonus_item .service_bonus_item_content {
    padding: 14px 0px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_item_wrap .service_bonus_item .service_bonus_item_description {
    color: rgb(51, 51, 51);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.4px;
}

#section_service .service_bonus_wrap .service_bonus_wrap_inner .service_bonus_disclaimer_wrap {
    color: rgb(118, 118, 118);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.35px;
}

#section_service .service_collabo_wrap {
    padding: 120px 0px 90px;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner {
    width: 1090px;
    margin: auto;
    display: flex;
    padding: 60px;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    background: url("/assets/images/tokenpost_new/service/service_collabo_very_bg.png") center center / cover no-repeat, linear-gradient(rgb(36, 19, 105) 0%, rgb(6, 14, 42) 100%);
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 29px;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .main_tag {
    display: flex;
    padding: 6px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .main_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .main_title .episode {
    color: rgb(169, 147, 255);
    font-family: Vitro_core, sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 900;
    line-height: 130%;
    letter-spacing: -1px;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .main_title .episode .series {
    display: block;
    color: rgb(255, 255, 255);
    font-size: 32px;
    line-height: 130%;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .main_title .description {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .main_title .description span {
    display: block;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .main_title .period {
    color: rgb(247, 93, 255);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.4px;
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .button_wrap {
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .left_description .button_wrap .btn_landing {
    display: flex;
    width: 300px;
    padding: 14px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: rgb(125, 97, 237);
    color: rgb(255, 255, 255);
}

#section_service .service_collabo_wrap .service_collabo_wrap_inner .right_image {
}

#section_service .service_select_wrap {
    margin: auto;
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 64px;
    padding: 30px 0px 120px;
    & h1 {
        font-size: 40px;
    }
}

#section_service .form_service_select {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 64px;
}

#section_service .form_service_select_header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    & .btn_go_to_manage {
        position: absolute;
        right: 0px;
        line-height: 40px;
    }
}

#section_service .section_service_toggle_box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: fit-content;
    & .discount_float_tooltip {
        position: relative;
        left: calc(100% - 109px);
        width: 82px;
        height: 30px;
        font-weight: 500;
        text-align: center;
        line-height: 24px;
        color: rgb(246, 82, 82);
        background: rgb(255, 235, 235);
        padding: 3px 8px;
        border-radius: 4px;
        animation: 1s ease-in-out 0s infinite alternate none running bounce;
        font-size: 16px !important;
    }

    & .discount_float_tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: rgb(255, 235, 235) transparent transparent;
        border-image: initial;
    }

    & .toggle_period_wrap {
        display: inline-flex;
        background-color: rgb(241, 241, 245);
        padding: 8px;
        align-self: center;
        border-radius: 10px;
    }
}

#section_service input[name="period"] {
    display: none;
}

#section_service .btn_select_period {
    display: inline-block;
    width: 120px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    font-weight: 500;
    color: rgb(153, 153, 153);
    cursor: pointer;
    border-radius: 7px;
    transition: 0.2s;
    background-color: transparent;
}

#section_service input[name="period"]:checked ~ .btn_select_period {
    background-color: rgb(255, 255, 255);
    color: rgb(17, 17, 17);
}

#section_service .service_list_wrap {
    width: 1280px;
}

@media (max-width: 1399px) {
    #section_service .service_list_wrap {
        width: 970px;
    }
}

@media (max-width: 600px) {
    #section_service .service_list_wrap {
        width: 100%;
    }

    #section_service .service_item {
        width: 100% !important;
        max-width: 100% !important;
    }
    #section_service .service_monthly_items, #section_service .service_annually_items {
        padding: 0 !important;
    }
}

#section_service .service_item_wrap {
    display: none;
}

#section_service .service_item_wrap.active {
    display: block;
}

#section_service .service_monthly_items, #section_service .service_annually_items {
    max-width: 1280px;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: 32px;
    padding: 0px 70px;
}

@media (max-width: 1399px) {
    #section_service .service_monthly_items, .service_annually_items {
        max-width: 970px;
        padding: 0px;
    }
}

#section_service .service_item {
    width: calc(33.3333% - 6.66667px);
    max-width: 296px;
    position: relative;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgb(237, 237, 237);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    & .tag {
        position: absolute;
        top: 20px;
        right: 0px;
        padding: 3px 5px 3px 16px;
        font-size: 16px;
        font-weight: 600;
        color: rgb(255, 255, 255);
    }

    & .tag::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-left: 10px solid rgb(255, 255, 255);
    }

    & .tag.green {
        background: rgb(36, 178, 131);
    }

    & .tag.yellow {
        background: rgb(255, 170, 0);
    }

    & .tag.purple {
        background: rgb(157, 123, 255);
    }

    & .new_btn01 {
        width: 100%;
        height: 32px;
    }

    & .new_btn07 {
        width: 100%;
        height: 40px;
    }

    & .new_btn03 {
        cursor: unset;
    }
}

#section_service .service_item.event_active {
    border-radius: 0px 0px 8px 8px;
}

#section_service .service_item .header_event {
    display: flex;
    width: 100%;
    padding: 4px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: -28px;
    left: 0px;
    border-radius: 8px 8px 0px 0px;
    background: rgb(246, 82, 82);
    color: rgb(255, 255, 255);
}

@media (max-width: 600px) {
    #section_service .service_item.event_active {
        margin-top: 32px;
    }
}

#section_service .service_item > div:not(.tag), #section_service .service_item > label, #section_service .service_item > span, #section_service .service_item > a {
    width: 100%;
}

#section_service .service_hidden_check {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    border: 0px;
}

#section_service .service_monthly_item:has(.service_hidden_check:checked), .service_annually_item:has(.service_hidden_check:checked) {
    border: 1px solid rgb(66, 148, 255);
    & .new_btn07 {
        border-width: medium;
        border-style: none;
        border-color: currentcolor;
        border-image: initial;
        background: rgb(66, 148, 255);
        color: rgb(255, 255, 255);
    }
}

#section_service .service_item_top {
    & h2 {
        font-size: 24px;
        font-weight: 700;
        color: rgb(17, 17, 17);
    }

    & p {
        min-height: 45px;
        font-size: 15px;
        font-weight: 500;
        color: rgb(51, 51, 51);
        margin: 6px 0px 12px;
    }
}

#section_service .service_item_top.bbr {
    min-width: 256px;
    min-height: 120.5px;
}

.service_item_divider {
    height: 1px;
    align-self: stretch;
    background: rgb(237, 237, 237);
}

#section_service .service_item_bottom {
    & .discount_wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        & span {
            color: rgb(255, 255, 255);
            font-weight: 700;
            border-radius: 4px;
            padding: 2px 8px;
            background: rgb(246, 82, 82);
        }

        & s {
            color: rgb(118, 118, 118);
        }
    }

    & .price_wrap {
        display: flex;
        align-items: center;
        gap: 4px;
        color: rgb(17, 17, 17);
        & .price {
            font-size: 32px;
            font-weight: 700;
            line-height: 1.5;
        }

        & .subs_period {
            font-size: 16px;
        }
    }

    & .price_wrap_annually {
        color: rgb(118, 118, 118);
    }
}

#section_service .service_item_bottom.bbr {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#section_service .submit_subscription_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: center;
    width: 623px;
    font-size: 16px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    background: rgb(48, 49, 51);
    border-radius: 8px;
    padding: 12px 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s;
    & span {
        color: rgb(66, 148, 255);
    }
}

#section_service .submit_subscription_wrap.active {
    opacity: 1;
    transform: translateY(0px);
}

#faq {
    padding: 0px 0px 120px;
}

.faq_inner {
    max-width: 1224px;
    margin: 0px auto;
}

.membership_faq_wrap {
    margin-bottom: 20px;
}

.membership_plan_wrap .membership_plan_table tbody tr.top_border .plan_title {
    color: var(--gray-gray-11, #111);
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;
}

.common_faq_wrap {
    gap: 16px;
}

.common_faq_wrap .faq_answer {
    padding: 16px 20px;
}

@media (max-width: 1399px) {
    #section_service .service_monthly_item, .service_annually_item {
        & .tag {
            width: 81px;
        }
    }

    #section_service .service_item_top.bbr {
        min-width: 178.5px;
        min-height: 143px;
    }

    #section_service .service_item_bottom {
        & .discount_wrap {
            flex-direction: column-reverse;
            align-items: flex-start;
        }
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-4px);
    }
}