@import "fonts.css";
@import "reset.css";
@import "variables.css";

html {
    font-family: var(--family);
    background-color: var(--color-background-primary);
}
html, body {
    height: 100%;
}

/****************************************
 * Accessibility Hidden
 ****************************************/
.kodi-a11y-hidden {
    overflow: hidden;
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    clip-path: circle(0);
    border: 0;
    white-space: nowrap;
}

/****************************************
 * Flex Align
 ****************************************/
.kodi-align-items-start {
    align-items: flex-start;
}
.kodi-align-items-center {
    align-items: center;
}
.kodi-align-items-end {
    align-items: flex-end;
}
.kodi-align-items-stretch {
    align-items: stretch;
}
.kodi-justify-content-start {
    justify-content: flex-start;
}
.kodi-justify-content-center {
    justify-content: center;
}
.kodi-justify-content-end {
    justify-content: flex-end;
}
.kodi-justify-content-between {
    justify-content: space-between;
}

@media (max-width: 1024px) {
    .kodi-align-items-mobile-start {
        align-items: flex-start;
    }
    .kodi-align-items-mobile-center {
        align-items: center;
    }
    .kodi-align-items-mobile-end {
        align-items: flex-end;
    }
    .kodi-align-items-mobile-stretch {
        align-items: stretch;
    }
    .kodi-justify-content-mobile-start {
        justify-content: flex-start;
    }
    .kodi-justify-content-mobile-center {
        justify-content: center;
    }
    .kodi-justify-content-mobile-end {
        justify-content: flex-end;
    }
    .kodi-justify-content-mobile-between {
        justify-content: space-between;
    }
}

/****************************************
 * Component
 ****************************************/
/* Accordion */
.kodi-accordion_item {
    border-bottom: 1px solid var(--color-border-base);
    transition: background 0.3s;
}
.kodi-accordion_item.kodi-is-active {
    background-color: var(--color-background-base);
}
.kodi-accordion_trigger {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    border: 0;
    text-align: left;
    background-color: transparent;
    color: var(--color-text-base);
}
.kodi-accordion_trigger .kodi-icon {
    margin: 0 32px;
    transition: transform .3s;
}
.kodi-accordion_trigger[aria-expanded="true"] .kodi-icon {
    transform: rotate(45deg);
}
.kodi-accordion_trigger[aria-expanded="true"] .kodi-accordion_title {
    font-weight: 700;
}
.kodi-accordion_category {
    width: 128px;
    padding: 0px 32px;
    text-align: center;
    font: var(--body-2-regular);
}
.kodi-accordion_q {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-round);
    font: var(--body-2-bold);
    background-color: #E6E6E6;
}
.kodi-accordion_title {
    font: var(--body-2-regular);
}
.kodi-accordion_answer {
    display: flex;
    align-items: flex-start;
    padding: 24px 40px;
    border-top: 1px solid var(--color-border-base);
    font: var(--body-2-regular);
}
.kodi-accordion_a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border-radius: var(--radius-round);
    font: var(--body-2-bold);
    background-color: #E1F0FF;
    color: #009DFF;
}
.kodi-accordion_panel {
    height: 0;
    overflow: hidden;
    transition: height 0.3s;
}
.kodi-accordion_content {
    flex: 1 0 0;
    font: var(--body-2-regular);
    line-height: 1.625;
}
@media (max-width: 1024px) {
    .kodi-accordion_trigger {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 8px;
    }
    .kodi-accordion_trigger .kodi-icon {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        margin: 0 20px;
    }
    .kodi-accordion_category {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        width: auto;
        padding: 0;
        text-align: left;
        font: var(--body-4-regular);
    }
    .kodi-accordion_q {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
        margin: 0 12px;
    }
    .kodi-accordion_title {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        font: var(--body-3-regular);
    }
    .kodi-accordion_answer {
        padding: 16px 0;
        align-items: center;
    }
    .kodi-accordion_a {
        margin-left: 12px;
    }
    .kodi-accordion_content {
        padding: 0 16px 0 8px;
        font: var(--body-3-regular);
    }
}

/* Board */
.kodi-board {
    margin-top: 24px;
    border-top: 2px solid #444;
}
.kodi-board ~ .kodi-buttons {
    margin-top: 40px;
}
.kodi-board_link {
    cursor: pointer;
}
.kodi-board_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 64px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-tertiary);
    font: var(--body-2-regular);
}
.kodi-board_row.kodi-is-pinned {
    background-color: var(--color-background-base);
}
.kodi-board_row .kodi-board_index {
    flex: 0 0 auto;
    width: 80px;
    padding: 0 16px;
    text-align: center;
}
.kodi-board_row .kodi-board_info {
    display: flex;
    align-items: center;
    flex: 1 0 0;
}
.kodi-board_row .kodi-board_title {
    flex: 1 0 0;
    padding: 0 16px;
}
.kodi-board_row .kodi-board_date {
    flex: 0 0 auto;
    width: 160px;
    padding: 0 16px;
    text-align: center;
    color: var(--color-text-primary);
}
.kodi-board_row .kodi-board_meta {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.kodi-board_row .kodi-board_name {
    flex: 0 0 auto;
    width: 200px;
    padding: 0 16px;
    font: var(--body-2-bold);
}
.kodi-board_row .kodi-board_description {
    flex: 1 0 0;
    font: var(--body-2-regular);
}
.kodi-board_header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 32px 24px;
    border-bottom: 1px solid var(--color-border-base);
}
.kodi-board_header .kodi-board_title {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin: 0 0 4px;
    font: var(--body-1-bold);
}
.kodi-board_header .kodi-board_date {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
}
.kodi-board_header .kodi-board_view {
    display: flex;
    align-items: center;
    align-content: center;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    margin-left: 10px;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
}
.kodi-board_header .kodi-board_view .kodi-icon {
    margin-right: 8px;
}
.kodi-board_body {
    padding: 64px 24px;
    border-bottom: 1px solid var(--color-border-base);
}
.kodi-board_footer:not(:empty) {
    padding: 32px 24px;
    border-bottom: 1px solid var(--color-border-base);
}
.kodi-board_attachments {
    display: flex;
    align-items: center;
}
.kodi-board_label {
    margin-right: 16px;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
}
.kodi-board_attachment {
    display: flex;
    align-items: center;
    text-decoration: none;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
}
.kodi-board_attachment .kodi-icon {
    margin-right: 8px;
}
@media (max-width: 1024px) {
    .kodi-board {
        margin: 16px -16px 0;
    }
    .kodi-board ~ .kodi-buttons {
        margin-top: 24px;
    }
    .kodi-board_row .kodi-board_index {
        width: 48px;
        padding: 0 8px;
        font: var(--body-4-regular);
    }
    .kodi-board_row .kodi-board_info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 0 8px;
    }
    .kodi-board_row .kodi-board_title {
        padding: 0;
        font: var(--body-3-regular);
    }
    .kodi-board_row .kodi-board_date {
        width: auto;
        padding: 0;
        text-align: left;
        font: var(--body-4-regular);
    }
    .kodi-board_row .kodi-board_meta {
        width: 100%;
    }
    .kodi-board_row .kodi-board_name {
        flex: 1 0 0;
        width: auto;
        padding-left: 8px;
        padding-right: 8px;
        font: var(--body-3-bold);
    }
    .kodi-board_row .kodi-board_description {
        padding: 16px 16px 0;
        font: var(--body-3-regular);
    }
    .kodi-board_header {
        grid-template-columns: 1fr auto;
        padding: 24px 16px;
    }
    .kodi-board_header .kodi-board_title {
        grid-column-start: 1;
        grid-column-end: 3;
        margin-bottom: 8px;
        font: var(--body-2-bold);
    }
    .kodi-board_header .kodi-board_date {
        font: var(--body-4-regular);
    }
    .kodi-board_header .kodi-board_view {
        grid-row-start: 2;
        grid-row-end: 3;
        font: var(--body-4-regular);
    }
    .kodi-board_body {
        padding: 40px 16px;
    }
    .kodi-board_footer:not(:empty) {
        padding: 24px 16px;
    }
    .kodi-button.kodi-board_prev-button,
    .kodi-button.kodi-board_next-button {
        padding-left: 18px;
        padding-right: 18px;
    }
    .kodi-button.kodi-board_prev-button .kodi-button_label,
    .kodi-button.kodi-board_next-button .kodi-button_label {
        display: none;
    }
    .kodi-button.kodi-board_prev-button .kodi-icon:first-child,
    .kodi-button.kodi-board_next-button .kodi-icon:last-child {
        margin: 0;
    }
}

/* Button */
.kodi-button {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 24px;
    height: 56px;
    border: 1px solid transparent;
    border-radius: var(--radius-xsmall);
    font: var(--body-2-bold);
    text-decoration: none;
    cursor: pointer;
    z-index: var(--z-index-above-content);
}
.kodi-button.kodi-theme-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    transition: background-color 0.3s;
}
.kodi-button.kodi-theme-primary:active {
    background-color: #00941A;
}
.kodi-button.kodi-theme-outline-primary {
    border-color: var(--color-border-base);
    background-color: var(--color-background-base);
    color: var(--color-brand-secondary);
    transition: border-color 0.3s;
}
.kodi-button.kodi-theme-outline-primary:active {
    border-color: var(--color-border-secondary);
}
.kodi-button.kodi-theme-outline-primary:disabled {
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}
.kodi-button.kodi-theme-secondary {
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse);
    transition: background-color 0.3s;
}
.kodi-button.kodi-theme-secondary:active {
    background-color: #000;
}
.kodi-button.kodi-theme-pill {
    border-radius: var(--radius-round);
}
.kodi-button.kodi-theme-large {
    height: 64px;
    font: var(--body-1-bold);
}
.kodi-button.kodi-theme-small {
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    font: var(--body-2-bold);
}
.kodi-button.kodi-theme-pill.kodi-theme-small {
    height: 37px;
    font: var(--body-3-bold);
}
.kodi-button .kodi-icon {
    flex: 0 0 auto;
}
.kodi-button .kodi-icon:first-child {
    margin-right: 10px;
}
.kodi-button .kodi-icon:last-child {
    margin-left: 10px;
}
.kodi-button.kodi-theme-small .kodi-icon:first-child {
    margin-right: 4px;
}
.kodi-button.kodi-theme-small .kodi-icon:last-child {
    margin-left: 4px;
}
.kodi-button.kodi-theme-pill.kodi-theme-small .kodi-icon:first-child {
    margin-left: -6px;
    margin-right: 8px;
}
.kodi-button.kodi-theme-pill.kodi-theme-small .kodi-icon:last-child {
    margin-left: 8px;
    margin-right: -6px;
}
.kodi-button.kodi-theme-wide {
    width: 200px;
}
.kodi-text-button {
    display: inline-flex;
    align-items: center;
    border: 0;
    padding: 0;
    background-color: transparent;
    font: var(--body-3-regular);
    text-decoration: none;
    color: var(--color-text-base);
}
.kodi-text-button.kodi-theme-large {
    font: var(--body-2-regular);
}
.kodi-text-button.kodi-theme-underline {
    text-decoration: underline;
    text-underline-position: from-font;
}
.kodi-text-button.kodi-theme-primary {
    color: var(--color-brand-primary);
}
.kodi-text-button.kodi-theme-gray {
    color: var(--color-text-primary);
}
.kodi-text-button .kodi-icon:first-child {
    margin-right: 6px;
}
.kodi-text-button .kodi-icon:last-child {
    margin-left: 6px;
}
.kodi-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background-color: transparent;
    text-decoration: none;
}
.kodi-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kodi-buttons.kodi-is-full-width .kodi-button {
    flex: 1 0 0;
}
.kodi-floating-action-button-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 38px;
    height: 0;
    z-index: var(--z-index-fixed);
}
.kodi-floating-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 56px;
    padding: 0px 16px;
    border: 0;
    border-radius: var(--radius-round);
    background: rgba(0, 174, 38, 0.90);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-inverse);
    transition: all 0.3s;
}
.kodi-floating-action-button.kodi-is-hidden {
    opacity: 0;
    visibility: hidden;
}
.kodi-floating-action-button .kodi-icon:first-child {
    margin-right: 6px;
}
.kodi-floating-action-button .kodi-icon:last-child {
    margin-left: 6px;
}
@media (min-width: 1025px) {
    .kodi-button.kodi-theme-primary:hover {
        background-color: #00941A;
    }
    .kodi-button.kodi-theme-outline-primary:hover {
        border-color: var(--color-border-secondary);
    }
    .kodi-button.kodi-theme-secondary:hover {
        background-color: #000;
    }
}
@media (max-width: 1024px) {
    .kodi-button {
        height: 48px;
        font: var(--body-3-bold);
    }
    .kodi-button.kodi-theme-large {
        height: 56px;
        font: var(--body-2-bold);
    }
    .kodi-button.kodi-theme-wide {
        width: 120px;
    }
    .kodi-floating-action-button {
        min-width: 160px;
        height: 48px;
        font: var(--body-2-bold);
    }
}

/* Box */
.kodi-box {
    display: block;
    padding: 32px 40px;
    border-radius: var(--radius-large);
    background: var(--color-background-base);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
}
@media (max-width: 1024px) {
    .kodi-box {
        padding: 24px 16px;
    }
}

/* Checkbox */
.kodi-checkbox_label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.kodi-checkbox_label .kodi-icon {
    color: rgba(0, 0, 0, 0.15);
    transition: color 0.3s;
}
.kodi-checkbox_text {
    margin-left: 8px;
    font: var(--body-2-regular);
}
.kodi-checkbox_input {
    overflow: hidden;
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    clip-path: circle(0);
    border: 0;
    white-space: nowrap;
}
.kodi-checkbox_input:checked ~ .kodi-checkbox_label .kodi-icon {
    color: var(--color-brand-primary);
}

/* Divider */
.kodi-divider {
    border-color: var(--color-border-base);
    border-style: solid;
    border-width: 1px 0 0 ;
}
.kodi-divider.kodi-is-vertical {
    display: inline-block;
    height: 10px;
    border-width: 0 1px 0 0;
}

/* Form */
.kodi-forms {
    overflow: hidden;
}
.kodi-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kodi-form.kodi-is-error .kodi-form_error {
    display: flex;
}
.kodi-form_label {
    font: var(--body-3-regular);
}
.kodi-form_asterisk {
    color: var(--color-status-error);
}
.kodi-form_text {
    font: var(--body-2-regular);
}
.kodi-form_error {
    display: none;
    align-items: flex-start;
    font: var(--body-3-regular);
    color: var(--color-status-error);
}
.kodi-form_error .kodi-icon {
    flex: 0 0 auto;
    margin-right: 6px;
}

/* Header */
.kodi-header {
    margin: 80px 0 64px;
    text-align: center;
}
.kodi-header_title {
    font: var(--heading-1-bold);
}
@media (max-width: 1024px) {
    .kodi-header {
        margin: 32px 0;
        text-align: left;
    }
    .kodi-header_title {
        font: var(--heading-2-bold);
    }
}

/* Icon */
.kodi-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.kodi-icon.kodi-theme-xlarge {
    width: 28px;
    height: 28px;
}
.kodi-icon.kodi-theme-large {
    width: 24px;
    height: 24px;
}
.kodi-icon.kodi-theme-small {
    width: 18px;
    height: 18px;
}
.kodi-icon.kodi-theme-xsmall {
    width: 16px;
    height: 16px;
}
.kodi-icon.kodi-theme-2xsmall {
    width: 12px;
    height: 12px;
}

/* Indicator */
.kodi-indicator {
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-horizontal-gap: 2px;
    --swiper-pagination-bullet-border-radius: var(--radius-round);
    --swiper-pagination-bullet-inactive-color: var(--color-icon-base);
    --swiper-pagination-bullet-inactive-opacity: 0.2;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 36px;
}
.kodi-indicator .swiper-pagination-bullet-active {
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-color: var(--color-brand-primary);
}

/* Info */
.kodi-info_list {
    padding: 0;
}
.kodi-info_item {
    position: relative;
    padding-left: 1.2em;
    list-style: none;
}
.kodi-info_item::before {
    content: '•';
    position: absolute;
    top: 0;
    left: 0.35em;
}

/* Input */
.kodi-input-wrapper {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xsmall);
    background-color: var(--color-background-base);
    transition: border-color 0.3s;
}
.kodi-input-wrapper:focus-within {
    border-color: var(--color-border-primary);
}
.kodi-input {
    flex: 1 0 0;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background-color: transparent;
    font: var(--body-2-regular);
    appearance: none;
}
.kodi-input::-webkit-outer-spin-button,
.kodi-input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}
.kodi-input[type='number'] {
    appearance: textfield;
}
.kodi-input[type='password']::-ms-reveal,
.kodi-input[type='password']::-ms-clear,
.kodi-input[type='search']::-ms-clear,
.kodi-input[type='search']::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}
.kodi-input[type='search']::-webkit-search-decoration,
.kodi-input[type='search']::-webkit-search-cancel-button,
.kodi-input[type='search']::-webkit-search-results-button,
.kodi-input[type='search']::-webkit-search-results-decoration {
    display: none;
}
.kodi-input:-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--color-background-base) inset;
}
.kodi-input:focus-within,
.kodi-input:focus {
    outline: none;
}
.kodi-input::placeholder {
    opacity: 1;
    color: var(--color-text-placeholder);
}
.kodi-input-wrapper > .kodi-icon,
.kodi-input-wrapper > .kodi-icon-button {
    flex: 0 0 auto;
}
.kodi-input-wrapper > .kodi-icon:first-child,
.kodi-input-wrapper > .kodi-icon-button:first-child {
    margin-right: 8px;
}
.kodi-input-wrapper > .kodi-icon:last-child,
.kodi-input-wrapper > .kodi-icon-button:last-child {
    margin-left: 8px;
}
.kodi-input_clear {
    display: none;
}
@media (max-width: 1024px) {
    .kodi-input-wrapper {
        height: 48px;
        padding: 0 12px;
    }
    .kodi-input {
        font: var(--body-3-regular);
    }
}

/* Pagination */
.kodi-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.kodi-pagination:not(:empty) {
    margin: 24px 0 16px;
}
.kodi-pagination_first,
.kodi-pagination_prev,
.kodi-pagination_next,
.kodi-pagination_last,
.kodi-pagination_number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-xsmall);
    font: var(--body-4-regular);
    cursor: pointer;
}
.kodi-pagination_first,
.kodi-pagination_prev,
.kodi-pagination_next,
.kodi-pagination_last {
    border: 1px solid #E6E6E6;
    background-color: var(--color-background-base);
}
.kodi-pagination_number[aria-current="page"] {
    background: rgba(0, 174, 38, 0.08);
    color: var(--color-brand-primary);
    cursor: default;
}
@media (max-width: 1024px) {
    .kodi-pagination:not(:empty) {
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 10px;
    }
}

/* Popup */
.kodi-popup {
    position: fixed;
    z-index: var(--z-index-popup);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-background-dimmed);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.kodi-popup.kodi-is-active {
    opacity: 1;
    visibility: visible;
}
.kodi-popup_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 20px;
}
.kodi-popup_content {
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius-large);
    background-color: var(--color-background-base);
}
.kodi-popup .kodi-buttons {
    padding: 16px 20px;
}

/* Select */
.kodi-select {
    width: 100%;
    min-width: 114px;
    height: 56px;
    padding: 0 40px 0 20px;
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xsmall);
    background-color: var(--color-background-base);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3.94672L6.03546 8.48224L10.571 3.94672' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: right 20px center;
    background-repeat: no-repeat;
    font: var(--body-2-regular);
    color: var(--color-text-base);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.3s;
}
.kodi-select:focus {
    border-color: var(--color-border-primary);
}
.kodi-select:focus-visible {
    outline: none;
}
.kodi-row .kodi-select {
    min-width: 0;
}
@media (max-width: 1024px) {
    .kodi-select {
        height: 48px;
        padding: 0 30px 0 12px;
        background-position: right 12px center;
        font: var(--body-3-regular);
    }
}

/* Tabs */
.kodi-tabs_navigation {
    display: flex;
    margin-bottom: 80px;
}
.kodi-tabs_button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 0;
    height: 64px;
    padding: 0 20px;
    margin-left: -1px;
    background-color: #eee;
    border: 1px solid var(--color-border-base);
    color: var(--color-brand-secondary);
    font: var(--body-1-regular);
    transition: border-color, color, background-color 0.3s;
}
.kodi-tabs_button:first-child {
    border-radius: var(--radius-small) 0 0 var(--radius-small);
}
.kodi-tabs_button:last-child {
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.kodi-tabs_button[aria-selected="true"] {
    position: relative;
    z-index: var(--z-index-above-content);
    border-color: var(--color-border-primary);
    font-weight: 700;
    color: var(--color-text-base);
    background-color: var(--color-background-base);
}
.kodi-tabs_panel {
    display: none;
}
.kodi-tabs_panel[aria-hidden="false"] {
    display: block;
}
@media (max-width: 1024px) {
    .kodi-tabs_navigation {
        margin-bottom: 48px;
    }
    .kodi-tabs_button {
        height: 56px;
        font: var(--body-2-regular);
    }
}

/* Textarea */
.kodi-textarea-wrapper {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xsmall);
    background-color: var(--color-background-base);
    height: 180px;
    transition: border-color 0.3s;
}
.kodi-textarea-wrapper:focus-within  {
    border-color: var(--color-border-primary);
}
.kodi-textarea {
    flex: 1 0 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    resize: none;
    font: var(--body-2-regular);
    background-color: transparent;
    appearance: none;
}
.kodi-textarea:focus-within,
.kodi-textarea:focus {
    outline: none;
}
.kodi-textarea::placeholder {
    opacity: 1;
    color: var(--color-text-placeholder);
}
@media (max-width: 1024px) {
    .kodi-textarea-wrapper {
        padding: 16px;
    }
    .kodi-textarea {
        font: var(--body-3-regular);
    }
}

/****************************************
 * Grid
 ****************************************/
.kodi-row {
    --row-gap-y: 0;
    --row-gap-x: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--row-gap-y) * -1);
    margin-right: calc(var(--row-gap-x) * -0.5);
    margin-left: calc(var(--row-gap-x) * -0.5);
}
.kodi-row.kodi-gap-2xsmall {
    --row-gap-x: 8px;
    --row-gap-y: 8px;
}
.kodi-row.kodi-gap-xsmall {
    --row-gap-x: 10px;
    --row-gap-y: 10px;
}
.kodi-row.kodi-gap-small {
    --row-gap-x: 12px;
    --row-gap-y: 12px;
}
.kodi-row.kodi-gap-medium {
    --row-gap-x: 16px;
    --row-gap-y: 16px;
}
.kodi-row.kodi-gap-large {
    --row-gap-x: 24px;
    --row-gap-y: 24px;
}
.kodi-row.kodi-gap-xlarge {
    --row-gap-x: 40px;
    --row-gap-y: 40px;
}
.kodi-row.kodi-gap-x-2xsmall {
    --row-gap-x: 8px;
}
.kodi-row.kodi-gap-x-xsmall {
    --row-gap-x: 10px;
}
.kodi-row.kodi-gap-x-small {
    --row-gap-x: 12px;
}
.kodi-row.kodi-gap-x-medium {
    --row-gap-x: 16px;
}
.kodi-row.kodi-gap-x-large {
    --row-gap-x: 24px;
}
.kodi-row.kodi-gap-x-xlarge {
    --row-gap-x: 40px;
}
.kodi-row.kodi-gap-y-2xsmall {
    --row-gap-y: 8px;
}
.kodi-row.kodi-gap-y-xsmall {
    --row-gap-y: 10px;
}
.kodi-row.kodi-gap-y-small {
    --row-gap-y: 12px;
}
.kodi-row.kodi-gap-y-medium {
    --row-gap-y: 16px;
}
.kodi-row.kodi-gap-y-large {
    --row-gap-y: 24px;
}
.kodi-row.kodi-gap-y-xlarge {
    --row-gap-y: 40px;
}
.kodi-row > [class*='kodi-column'] {
    min-width: 0;
    margin-top: var(--row-gap-y);
    padding-right: calc(var(--row-gap-x) * 0.5);
    padding-left: calc(var(--row-gap-x) * 0.5);
}
.kodi-column {
    flex: 1 0 0;
}
.kodi-column-auto {
    flex: 0 0 auto;
}
.kodi-column-1 {
    flex: 0 0 auto;
    width: 8.3333%;
}
.kodi-column-2 {
    flex: 0 0 auto;
    width: 16.6667%;
}
.kodi-column-3 {
    flex: 0 0 auto;
    width: 25%;
}
.kodi-column-4 {
    flex: 0 0 auto;
    width: 33.3333%;
}
.kodi-column-5 {
    flex: 0 0 auto;
    width: 41.6667%;
}
.kodi-column-6 {
    flex: 0 0 auto;
    width: 50%;
}
.kodi-column-7 {
    flex: 0 0 auto;
    width: 58.3333%;
}
.kodi-column-8 {
    flex: 0 0 auto;
    width: 66.6667%;
}
.kodi-column-9 {
    flex: 0 0 auto;
    width: 75%;
}
.kodi-column-10 {
    flex: 0 0 auto;
    width: 83.3333%;
}
.kodi-column-11 {
    flex: 0 0 auto;
    width: 91.6667%;
}
.kodi-column-12 {
    flex: 0 0 auto;
    width: 100%;
}
@media (max-width: 1024px) {
    .kodi-row.kodi-gap-mobile-2xsmall {
        --row-gap-x: 8px;
        --row-gap-y: 8px;
    }
    .kodi-row.kodi-gap-mobile-xsmall {
        --row-gap-x: 10px;
        --row-gap-y: 10px;
    }
    .kodi-row.kodi-gap-mobile-small {
        --row-gap-x: 12px;
        --row-gap-y: 12px;
    }
    .kodi-row.kodi-gap-mobile-medium {
        --row-gap-x: 16px;
        --row-gap-y: 16px;
    }
    .kodi-row.kodi-row.kodi-gap-mobile-large {
        --row-gap-x: 24px;
        --row-gap-y: 24px;
    }
    .kodi-row.kodi-row.kodi-gap-mobile-xlarge {
        --row-gap-x: 40px;
        --row-gap-y: 40px;
    }
    .kodi-row.kodi-gap-x-mobile-2xsmall {
        --row-gap-x: 8px;
    }
    .kodi-row.kodi-gap-x-mobile-xsmall {
        --row-gap-x: 10px;
    }
    .kodi-row.kodi-gap-x-mobile-small {
        --row-gap-x: 12px;
    }
    .kodi-row.kodi-gap-x-mobile-medium {
        --row-gap-x: 16px;
    }
    .kodi-row.kodi-gap-x-mobile-large {
        --row-gap-x: 24px;
    }
    .kodi-row.kodi-gap-x-mobile-xlarge {
        --row-gap-x: 40px;
    }
    .kodi-row.kodi-gap-y-mobile-2xsmall {
        --row-gap-y: 8px;
    }
    .kodi-row.kodi-gap-y-mobile-xsmall {
        --row-gap-y: 10px;
    }
    .kodi-row.kodi-gap-y-mobile-small {
        --row-gap-y: 12px;
    }
    .kodi-row.kodi-gap-y-mobile-medium {
        --row-gap-y: 16px;
    }
    .kodi-row.kodi-gap-y-mobile-large {
        --row-gap-y: 24px;
    }
    .kodi-row.kodi-gap-y-mobile-xlarge {
        --row-gap-y: 40px;
    }
    .kodi-column-mobile {
        flex: 1 0 0;
        min-width: 0;
    }
    .kodi-column-mobile-auto {
        flex: 0 0 auto;
    }
    .kodi-column-mobile-1 {
        flex: 0 0 auto;
        width: 8.3333%;
    }
    .kodi-column-mobile-2 {
        flex: 0 0 auto;
        width: 16.6667%;
    }
    .kodi-column-mobile-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .kodi-column-mobile-4 {
        flex: 0 0 auto;
        width: 33.3333%;
    }
    .kodi-column-mobile-5 {
        flex: 0 0 auto;
        width: 41.6667%;
    }
    .kodi-column-mobile-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .kodi-column-mobile-7 {
        flex: 0 0 auto;
        width: 58.3333%;
    }
    .kodi-column-mobile-8 {
        flex: 0 0 auto;
        width: 66.6667%;
    }
    .kodi-column-mobile-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .kodi-column-mobile-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }
    .kodi-column-mobile-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }
    .kodi-column-mobile-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/****************************************
 * Layout
 ****************************************/
/* Wrapper */
.pb-layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Header */
.pb-layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    padding: 0 16px;
    z-index: var(--z-index-navigation);
}
.pb-layout-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background-color: var(--color-background-base);
    z-index: var(--z-index-deep);
    transition-duration: 0.3s;
    transition-property: height;
}
.pb-layout-header::after {
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    height: 1px;
    z-index: var(--z-index-deep);
    background-color: transparent;
    transition-duration: 0.3s;
    transition-property: background-color;
}
.pb-layout-header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-width: 1152px;
    margin: 0 auto;
}
.pb-layout-header .pb-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.pb-layout-header .pb-logo_image {
    width: 66px;
}
.pb-layout-header .pb-logo_text {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-base);
}
.pb-layout-header .pb-logo .kodi-divider {
    margin: 0 10px;
}
.pb-layout-header .pb-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    height: 100%;
}
.pb-layout-header .pb-menu_item {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
}
.pb-layout-header .pb-menu_item::before {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 2px;
    transition: background-color 0.3s;
}
.pb-layout-header .pb-menu_text {
    font: var(--body-2-regular);
    cursor: pointer;
}
.pb-layout-header .pb-menu_text::after {
    content: attr(data-text);
    display: block;
    height: 0;
    font-weight: bold;
    visibility: hidden;
}
.pb-layout-header .pb-menu-sub {
    display: none;
    align-items: center;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 28px 0;
    gap: 24px;
    z-index: var(--z-index-above-content);
}
.pb-layout-header .pb-menu-sub_link {
    color: var(--color-brand-secondary);
    font: var(--body-3-bold);
    white-space: nowrap;
    text-decoration: none;
}
.pb-layout-header_links {
    display: flex;
    align-items: center;
    gap: 24px;
}
.pb-layout-header_toggle {
    height: 100%;
    padding: 8px;
    margin-right: -8px;
    color: var(--color-icon-base);
}
.pb-layout-header_close {
    display: none;
}
.pb-layout-header.pb-is-scrolled {
    background-color: var(--color-background-base);
}
.pb-layout-header.pb-is-scrolled::after {
    background-color: var(--color-border-base);
}
.pb-layout-header.pb-is-active .pb-layout-header_menu {
    display: none;
}
.pb-layout-header.pb-is-active .pb-layout-header_close {
    display: block;
}

/* Footer */
.pb-layout-footer {
    padding: 64px 16px;
    border-top: 1px solid rgba(217, 217, 217, 0.5);
    background: var(--color-background-base);
}
.pb-layout-footer .pb-logo {
    display: inline-block;
}
.pb-layout-footer .pb-logo_image {
    width: 78px;
}
.pb-layout-footer .pb-menu {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.pb-layout-footer .pb-menu_item {
    min-width: 100px;
}
.pb-layout-footer .pb-menu_text {
    font: var(--body-3-bold);
    color: var(--color-text-primary);
}
.pb-layout-footer .pb-menu-sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 16px;
}
.pb-layout-footer .pb-menu-sub_link {
    font: var(--body-3-regular);
    color: var(--color-text-secondary);
    text-decoration: none;
}
.pb-layout-footer .pb-menu-sub_link:not(:first-child) {
    margin-top: 12px;
}
.pb-layout-footer_inner {
    position: relative;
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
}
.pb-layout-footer_info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.pb-layout-footer_address {
    display: block;
    margin-top: 36px;
    font: var(--body-5-regular);
    color: var(--color-text-primary);
}
.pb-layout-footer_contact {
    display: flex;
    align-items: center;
    gap: 16px;
    font: var(--body-5-regular);
}
.pb-layout-footer_contact > a {
    color: var(--color-text-primary);
    text-decoration: none;
}
.pb-layout-footer_policy {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}
.pb-layout-footer_policy > a {
    font: var(--body-5-regular);
    color: var(--color-text-base);
    text-decoration: none;
}
.pb-layout-footer_util {
    margin-top: 48px;
}
.pb-layout-footer_copyright {
    margin-top: 16px;
    color: var(--color-text-secondary);
    font: var(--body-5-regular);
}
.pb-family-site {
    position: relative;
    width: 160px;
}
.pb-family-site_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 18px;
    background-color: #F1F1F1;
    color: var(--color-text-primary);
    font: var(--body-5-bold);
}
.pb-family-site_list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 16px;
    border-radius: 0 0 18px 18px;
    background-color: #F1F1F1;
    transform: scaleY(0);
    transform-origin: top;
    list-style: none;
}
.pb-family-site_list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--color-border-base);
    opacity: 0.5;
}
.pb-family-site_link {
    color: var(--color-text-base);
    font: var(--body-5-bold);
    text-decoration: none;
}
.pb-family-site.pb-is-active .pb-family-site_toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.pb-family-site.pb-is-active .pb-family-site_toggle .kodi-icon {
    transform: rotate(180deg);
}
.pb-family-site.pb-is-active .pb-family-site_list {
    transform: scaleY(1);
}

/* Content */
.pb-layout-content {
    flex: 1 0 0;
    padding: 80px 16px;
}
.pb-layout-content:last-child {
    padding-bottom: 0;
}
.pb-layout-content_inner {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
}

/* Overview */
.pb-layout-overview {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 400px;
    z-index: var(--z-index-deep);
}
.pb-layout-overview.pb-theme-about {
    background-color: #B6E1F7;
}
.pb-layout-overview_image {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    max-width: none;
    margin: 0 auto;
    transform: translateX(-50%);
    z-index: var(--z-index-deep);
}
.pb-layout-overview_image img {
    max-width: none;
}
.pb-layout-overview ~ .pb-layout-content {
    margin-top: -32px;
    padding-top: 0;
}

@media (min-width: 1025px) {
    /* Header */
    .pb-layout-header .pb-menu_item:hover::before {
        background-color: var(--color-border-primary);
    }
    .pb-layout-header .pb-menu_item:hover .pb-menu_text {
        font-weight: 700;
    }
    .pb-layout-header .pb-menu_item:hover .pb-menu-sub {
        display: flex;
    }
    .pb-layout-header_toggle {
        display: none;
    }
    .pb-layout-header.pb-is-active::before {
        height: 152px;
    }
    .pb-layout-header.pb-is-active::after {
        background-color: var(--color-border-base);
    }
}
@media (max-width: 1024px) {
    /* Header */
    .pb-layout-header {
        height: 56px;
    }
    .pb-layout-header::before {
        position: fixed;
        bottom: 0;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        transition-property: visibility, opacity;
    }
    .pb-layout-header::after {
        top: 56px;
    }
    .pb-layout-header_inner {
        height: 56px;
    }
    .pb-layout-header .pb-menu {
        overflow: auto;
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        padding: 24px 0;
    }
    .pb-layout-header .pb-menu_item {
        display: block;
        height: auto;
    }
    .pb-layout-header .pb-menu_text {
        display: block;
        padding: 20px 24px;
        font: var(--body-1-bold);
    }
    .pb-layout-header .pb-menu-sub {
        display: block;
        position: static;
        padding: 0;
    }
    .pb-layout-header .pb-menu-sub_link {
        display: block;
        padding: 14px 40px;
        color: var(--color-text-primary);
    }
    .pb-layout-header_links {
        display: none;
    }
    .pb-layout-header.pb-is-active {
        height: 100%;
    }
    .pb-layout-header.pb-is-active::before {
        visibility: visible;
        opacity: 1;
    }
    .pb-layout-header.pb-is-active .pb-menu {
        display: block;
    }

    /* Footer */
    .pb-layout-footer .pb-menu {
        display: none;
    }

    /* Content */
    .pb-layout-content {
        padding-top: 56px;
        padding-bottom: 48px;
    }

    /* Overview */
    .pb-layout-overview {
        justify-content: flex-start;
        height: 200px;
    }
    .pb-layout-overview_image {
        left: 0;
        right: 0;
        transform: none;
    }
    .pb-layout-overview_image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }
    .pb-layout-overview ~ .pb-layout-content {
        margin-top: -28px;
    }
}

/****************************************
 * Page
 ****************************************/
/* Board */
.pb-board-header_total {
    font: var(--body-2-regular);
}
@media (min-width: 1025px) {
    .pb-board-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .pb-board-header .kodi-input-wrapper {
        width: 320px;
    }
}
@media (max-width: 1024px) {
    .pb-board-header_total {
        display: block;
        margin-top: 16px;
        font: var(--body-3-regular);
    }
}

/* Not Found */
.pb-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 120px 0;
    text-align: center ;
}
.kodi-board .pb-not-found {
    padding-left: 16px;
    padding-right: 16px;
}
.pb-not-found_image {
    width: 56px;
    margin: 0 auto;
}
.pb-not-found_title {
    margin-top: 16px;
    font: var(--body-1-bold);
}
.pb-not-found_description {
    margin-top: 8px;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
    word-break: keep-all;
}
.pb-not-found_visual {
    position: relative;
}
.pb-not-found_visual .pb-not-found_image {
    width: 120px;
}
.pb-not-found_code {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 10px;
    transform: translate(-50%, -50%);
    font: var(--body-1-bold);
    color: var(--color-text-inverse);
}
.pb-not-found .kodi-buttons {
    margin-top: 56px;
    width: 408px;
}
@media (min-width: 1025px) {
    .pb-layout-content > .pb-not-found .pb-not-found_title {
        font: var(--heading-3-bold);
    }
    .pb-layout-content > .pb-not-found .pb-not-found_description {
        font: var(--body-1-regular);
    }
}
@media (max-width: 1024px) {
    .pb-not-found .kodi-buttons {
        margin-top: 28px;
        width: 248px;
    }
}

/* Inquiry */
.pb-inquiry-description {
    margin-bottom: 40px;
    font: var(--heading-3-regular);
}
.pb-inquiry-buttons {
    margin-top: 40px;
}
@media (max-width: 1024px) {
    .pb-inquiry-description {
        margin-bottom: 24px;
        font: var(--body-2-regular);
    }
}

/* Terms */
.pb-term {
    margin-top: 24px;
    font: var(--body-2-regular);
    line-height: 1.6;
}

.pb-term h2 {
    margin: 40px 0 16px;
    font: var(--heading-3-bold);
    scroll-margin-top: 85px;
}

.pb-term a {
    text-decoration: none;
    color: inherit;
    font: inherit;
}
.pb-term table {
    width: 100%;
    border-top: 2px solid var(--color-brand-secondary);
    border-collapse: collapse;
    border-spacing: 0;
}
.pb-term table th,
.pb-term table td {
    padding: 20px;
    border-bottom: 1px solid var(--color-border-base);
    border-left: 1px solid var(--color-border-base);
    border-right: 1px solid var(--color-border-base);
}
.pb-term table th:first-child,
.pb-term table td:first-child {
    border-left: 0;
}
.pb-term table th:last-child,
.pb-term table td:last-child {
    border-right: 0;
}
.pb-term table th {
    font: var(--body-2-bold);
}
.pb-term table td {
    font: var(--body-2-regular);
}
.pb-term table thead th {
    background-color: var(--color-background-base);
}

/* About Platform */
.pb-about-platform {
    padding: 0;
    counter-reset: number;
}
.pb-about-platform_item {
    display: flex;
    align-items: flex-start;
    list-style: none;
    counter-increment: number;
}
.pb-about-platform_item:not(:first-child) {
    margin-top: 80px;
}
.pb-about-platform_image {
    overflow: hidden;
    flex: 0 0 auto;
    width: 520px;
    margin-right: 80px;
    border-radius: var(--radius-large);
    aspect-ratio: 13 / 7;
}
.pb-about-platform_title {
    display: flex;
    align-items: flex-start;
    font: var(--heading-2-bold);
}
.pb-about-platform_title::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin-top: 1px;
    margin-right: 10px;
    padding: 4px;
    border-radius: var(--radius-round);
    background-color: var(--color-text-base);
    content: counter(number);
    color: var(--color-text-inverse);
    font: var(--body-1-bold);
}
.pb-about-platform_description {
    margin-top: 16px;
    font: var(--body-1-regular);
    color: var(--color-text-primary);
}
@media (min-width: 1025px) {
    .pb-about-platform_text {
        padding: 24px 0;
    }
    .pb-about-platform_item.pb-theme-wide {
        flex-direction: column;
    }
    .pb-about-platform_item.pb-theme-wide .pb-about-platform_image {
        width: 100%;
        aspect-ratio: 12 / 5;
        margin-right: 0;
    }
    .pb-about-platform_item.pb-theme-wide .pb-about-platform_text {
        padding: 0;
    }
    .pb-about-platform_item.pb-theme-wide .pb-about-platform_title {
        margin-top: 60px;
    }
}
@media (max-width: 1024px) {
    .pb-about-platform_item {
        display: block;
    }
    .pb-about-platform_item:not(:first-child) {
        margin-top: 40px;
    }
    .pb-about-platform_image {
        width: 100%;
        margin-right: 0;
        border-radius: var(--radius-small);
    }
    .pb-about-platform_title {
        margin-top: 24px;
        font: var(--body-1-bold);
    }
    .pb-about-platform_title::before {
        min-width: 24px;
        height: 24px;
        margin-top: 0;
        font: var(--body-3-bold);
    }
    .pb-about-platform_description {
        font: var(--body-3-regular);
    }
}

/* Use Cases */
.pb-use-cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 80px 40px;
    padding: 0;
}
.pb-use-cases_item {
    list-style: none;
}
.pb-use-cases_image {
    width: 100%;
    border-radius: var(--radius-large);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.pb-use-cases_title {
    margin-top: 40px;
    font: var(--heading-2-bold);
}
.pb-use-cases_description {
    margin-top: 16px;
    font: var(--body-1-regular);
    color: var(--color-text-primary);
}
@media (max-width: 1024px) {
    .pb-use-cases {
        display: block;
    }
    .pb-use-cases_item:not(:first-child) {
        margin-top: 40px;
    }

    .pb-use-cases_image {
        border-radius: var(--radius-small);
    }
    .pb-use-cases_title {
        margin-top: 24px;
        font: var(--body-1-bold);
    }
    .pb-use-cases_description {
        font: var(--body-3-regular);
    }
}

/* Inquiry */
.pb-inquiry-result {
    text-align: center;
}
.pb-inquiry-result_info {
    padding: 180px 0;
}
.pb-inquiry-result_image {
    width: 56px;
    margin: 0 auto;
}
.pb-inquiry-result_title {
    margin-top: 16px;
    font: var(--body-1-bold);
}
@media (max-width: 1024px) {
    .pb-inquiry-result_info {
        padding: 120px 0;
    }
    .pb-inquiry-result .kodi-button.kodi-theme-wide {
        width: auto;
    }
}

/* API */
.pb-api-overview {
    margin-bottom: 88px;
}
.pb-api-overview_title {
    text-align: center;
    font: var(--heading-2-bold);
}
.pb-api-overview_description {
    margin-top: 16px;
    text-align: center;
    font: var(--body-1-regular);
    color: var(--color-text-primary);
}
.pb-api-overview_sweipr {
    margin-top: 88px;
}
.pb-api-card {
    width: 309px;
    text-align: center;
}
.pb-api-card_image {
    width: 240px;
    margin: 0 auto 40px;
}
.pb-api-card_title {
    margin-bottom: 16px;
    font: var(--heading-3-bold);
    word-break: keep-all;
}
.pb-api-card_description {
    min-height: 72px;
    margin-bottom: 16px;
    font: var(--body-2-regular);
    line-height: 1.5;
}
.pb-api-card_features:not(:last-child) {
    margin-bottom: 16px;
}
.pb-api-card_feature {
    display: block;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
}
.pb-api-card_feature:not(:first-child) {
    margin-top: 8px;
}
.pb-api-documents {
    padding-top: 16px;
}
.pb-api-documents_title {
    font: var(--heading-3-bold);
}
.pb-api-documents_description {
    margin-top: 8px;
    margin-bottom: 24px;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
}
.pb-api-documents-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-tertiary);
    text-decoration: none;
    color: var(--color-text-base);
}
.pb-api-documents-header:only-child {
    margin: -32px -40px;
    padding: 32px 40px;
    border: 0;
}
.pb-api-documents-header_image {
    width: 32px;
}
.pb-api-documents-header_text {
    flex: 1 0 0;
    font: var(--body-2-bold);
}
.pb-api-documents_list {
    padding-left: 0;
}
.pb-api-documents_item {
    list-style: none;
}
.pb-api-documents_link {
    display: block;
    position: relative;
    padding-left: 24px;
    font: var(--body-2-regular);
    color: var(--color-text-primary);
    text-decoration: none;
}
.pb-api-documents_link::before {
    content: '•';
    position: absolute;
    left: 8px;
    top: 0;
}
.pb-api-documents_link:hover {
    color: var(--color-text-base);
}
@media (max-width: 1024px) {
    .pb-api-overview {
        margin-bottom: 36px;
    }
    .pb-api-overview_title {
        text-align: left;
        font: var(--heading-2-bold);
    }
    .pb-api-overview_description {
        text-align: left;
        font: var(--body-2-regular);
    }
    .pb-api-overview_description br {
        display: none;
    }
    .pb-api-overview_sweipr {
        margin-top: 40px;
    }
    .pb-api-documents_title {
        font: var(--body-1-bold);
    }
    .pb-api-documents-header:only-child {
        margin: -24px -16px;
        padding: 24px 16px;
        border: 0;
    }
}


/* Main */
.pb-main-section {
    padding: 0 16px;
}
.pb-main-section_inner {
    position: relative;
    width: 1152px;
    max-width: 100%;
    margin: 0 auto;
    z-index: var(--z-index-above-content);
}
.pb-main_title {
    font: var(--heading-1-bold);
    word-break: keep-all;
}
.pb-main_description {
    margin-top: 16px;
    font: var(--body-1-regular);
    line-height: 1.6;
    color: var(--color-text-primary);
    word-break: keep-all;
}
.pb-main-overview {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 100vh;
    background-color: #E6FFFF;
}
.pb-main-overview_text .kodi-buttons {
    margin-top: 18px;
}
.pb-main-overview_image {
    position: absolute;
    top: 50%;
    right: -220px;
    width: 995px;
    transform: translateY(-50%);
    z-index: var(--z-index-deep);
}
.pb-main-overview_image::before {
    content: '';
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 12px);
    width: 720px;
    height: 720px;
    border-radius: var(--radius-round);
    background: #9AEAF9;
    transform: translate(-50%, -50%);
    z-index: var(--z-index-deep);
}
.pb-main-overview_down {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% - 20px);
    bottom: 24px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
    background-color: var(--color-background-base);
    color: var(--color-icon-primary);
    z-index: var(--z-index-fixed);
    animation: floatY 1.6s ease-in-out infinite;
}
.pb-main-overview_down .kodi-icon {
    margin-top: 2px;
    stroke-width: 1.75;
}
.pb-main-recommended {
    padding: 154px 0 142px;
    background-color: #394858;
}
.pb-main-recommended .pb-main_title {
    margin-bottom: 80px;
    text-align: center;
    color: var(--color-text-inverse);
    font-weight: 400;
}
.pb-main-recommended .pb-main_title > b {
    font-weight: 700;
}
.pb-main-recommended-card {
    text-align: center;
}
.pb-main-recommended_image,
.pb-main-recommended_images {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: 72px;
    background-color: rgba(255, 255, 255, 0.1);
}
.pb-main-recommended_images {
    overflow: hidden;
}
.pb-main-recommended_images > div {
    width: fit-content;
    height: 100%;
    display: flex;
    align-items: center;
    animation: scrollLeft 8s linear infinite;
}
.pb-main-recommended_images img {
    flex: 0 0 auto;
    width: 120px;
}
.pb-main-recommended-card_description {
    margin-top: 33px;
    font: var(--body-1-regular);
    line-height: 1.6;
    color: var(--color-text-inverse)
}
.pb-main-service {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 1000px;
}
.pb-main-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 1920px;
    background: url("/image/bg-main-02.png") right no-repeat;
    background-size: auto 100%;
    transform: translateX(-50%);
}
.pb-main-service .pb-main-section_inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.pb-main-service .kodi-info {
    margin-top: 40px;
    padding: 24px 32px 24px 24px;
    border-radius: var(--radius-medium);
    background: rgba(82, 114, 158, 0.92);
    backdrop-filter: blur(6px);
    color: var(--color-text-inverse);
    font: var(--body-2-regular);
    line-height: 1.875;
}
@media (min-width: 1025px) {
    .pb-main-overview .kodi-buttons {
        gap: 16px;
    }
    .pb-main-service .pb-main-section_inner {
        padding-left: 80px;
    }
}
@media (max-width: 1024px) {
    .pb-main_title {
        text-align: center;
        font: var(--heading-2-bold);
    }
    .pb-main_description {
        text-align: center;
        font: var(--body-2-regular);
        line-height: 1.6;
    }
    .pb-main-overview .pb-main-section_inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 56px 0;
    }
    .pb-main-overview {
        display: block;
    }
    .pb-main-overview_text {
        padding: 40px 0;
    }
    .pb-main-overview_image {
        position: relative;
        top: 0;
        left: 28px;
        right: auto;
        margin-bottom: -200px;
        width: 555px;
        transform: none;
    }
    .pb-main-overview_image::before {
        width: 320px;
        height: 320px;
        top: 0;
        left: calc(50% - 28px);
        transform: translate(-50%, 0);
    }
    .pb-main-overview .kodi-button {
        min-width: 132px;
    }
    .pb-main-recommended {
        padding: 80px 0;
    }
    .pb-main-recommended .pb-main_title {
        margin-bottom: 40px;
    }
    .pb-main-recommended_sweipr .pb-main-recommended-card {
        width: 180px;
        opacity: 0.1;
    }
    .pb-main-recommended-card_description {
        width: 100vw;
        position: relative;
        left: 50%;
        margin-top: 24px;
        transform: translateX(-50%);
        opacity: 0;
        font: var(--body-2-regular);
        line-height: 1.5;
    }
    .pb-main-recommended_sweipr .pb-main-recommended-card.swiper-slide-active {
        opacity: 1;
    }
    .pb-main-recommended_sweipr .pb-main-recommended-card.swiper-slide-active .pb-main-recommended-card_description {
        opacity: 1;
    }
    .pb-main-service {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 100px;
    }
    .pb-main-service::before {
        top: auto;
        bottom: 0;
        margin-left: -190px;
        max-width: 1235px;
        height: 695px;
    }
    .pb-main-service .pb-main-section_inner {
        align-items: center;
    }
    .pb-main-service .kodi-info {
        margin-top: 32px;
        padding: 24px 24px 24px 16px;
        font: var(--body-3-regular);
        line-height: 1.7143;
    }
}

@keyframes floatY {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(8px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}