@charset "utf-8";

.journal-tab-swipe-hint { display: none; }

@media (max-width: 768px) {
    .journal-responsive-tab-box {
        position: relative;
        max-width: 100%;
        overflow: hidden !important;
    }

    .journal-responsive-tab-box .tab_div {
        margin-top: 16px;
        border-bottom: 4px solid #1b66e6 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .journal-responsive-tab-box .tab_div::-webkit-scrollbar { display: none; }

    .journal-responsive-tab-box .tab_div ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100%;
        gap: 4px;
    }

    .journal-responsive-tab-box .tab_div ul li { flex: 0 0 auto !important; }

    .journal-responsive-tab-box .tab_div ul li a {
        padding: 0 14px;
        font-size: 14px;
        line-height: 40px;
        white-space: nowrap;
    }

    .journal-responsive-tab-box .journal-tab-swipe-hint {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        margin: 4px 0 0;
        padding: 0 8px;
        color: #58708f;
        font-size: 12px;
        line-height: 20px;
    }

    .journal-responsive-tab-box .journal-tab-swipe-hint[hidden] { display: none; }
    .journal-responsive-tab-box .journal-tab-swipe-hint span[hidden] { display: none; }
    .journal-responsive-tab-box .journal-tab-swipe-left { margin-right: auto; }
    .journal-responsive-tab-box .journal-tab-swipe-right { margin-left: auto; }

    .journal-responsive-tab-box::before,
    .journal-responsive-tab-box::after {
        position: absolute;
        z-index: 2;
        top: 16px;
        display: none;
        align-items: center;
        box-sizing: border-box;
        width: 34px;
        height: 40px;
        color: #1269cf;
        pointer-events: none;
        font-size: 22px;
        font-weight: 700;
    }

    .journal-responsive-tab-box::before {
        left: 0;
        justify-content: flex-start;
        padding-left: 4px;
        background: linear-gradient(to right, #fff 48%, rgba(255, 255, 255, 0));
        content: "‹";
    }

    .journal-responsive-tab-box::after {
        right: 0;
        justify-content: flex-end;
        padding-right: 4px;
        background: linear-gradient(to left, #fff 48%, rgba(255, 255, 255, 0));
        content: "›";
    }

    .journal-responsive-tab-box.journal-tabs-can-scroll-left::before,
    .journal-responsive-tab-box.journal-tabs-can-scroll-right::after { display: flex; }
}