body {
    font-family: "Helvetica", "Noto Sans TC", "sans-serif";
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.course_info_decoration {
    position: relative;
}

.course_info_decoration::before {
    content: '';
    position: absolute;
    left: -0.4vw;
    top: .6vw;
    height: .8vw;
    width: .8vw;
    border-radius: 50%;
    background-color: black;
    border: 3px solid white;
}

.course_info_decoration::after {
    content: '';
    position: absolute;
    left: 0;
    top: .95vw;
    width: 1.5vw;
    height: 1px;
    background-color: black;
}

/*pagination*/
.pagination {
    margin-top: 6.875vw;
    display: inline-flex;
    width: 100%;
    justify-content: center;
}

.pagination li a {
    display: block;
    margin-left: 2px;
    color: #000;
    font-size: 1.169vw;
    padding: 1.719vw;
    font-weight: 500;
}

.pagination li a:hover,
.pagination li a:active {
    font-weight: 700;

}

.pagination li a.disabled,
.pagination li a.disabled:hover {
    color: #808080;
    cursor: default;
    font-weight: 500;
}

.pagination li a.current,
.pagination li a.current:active,
.pagination li a.current:hover {
    color: #0064a0;
    font-weight: 700;
}


/* modal */
.modal_style {
    background-color: rgba(179, 179, 179, .95);
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 102;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.modal_container {
    position: relative;
    width: 100%;
    max-width: 75.6vw;
    max-height: 100%;

}

.modal_content {
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    width: 95%;
    margin: 0px auto;
}

.modal_body {
    padding: 2.3375vw 11.55vw;
}

.modal_footer {
    display: flex;
    align-items: center;
    padding: 0vw 11.55vw 3.7125vw 11.55vw;
}

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
    box-shadow: none;
    border-color: #000000;
}

/* course_detail */
#course_detail_back:hover .back_icon,
#course_detail_back:active .back_icon {
    background-image: url('../src/course_detail/back_white.svg');
}

#watermark {
    text-shadow: 1px 1px 1px #000;
    z-index: 5;
    left: .5vw;
    top: .5vw;
     animation: moving-watermark 6000s linear infinite;
    transform: translate(0, 0);
}


@keyframes moving-watermark {
    0% {
        left: .5vw;
        top: .5vw;
        transform: translate(0, 0);
    }

    25% {
        left: calc(100% - .5vw);
        top: .5vw;
        transform: translate(-100%, 0);
    }

    50% {
        left: calc(100% - .5vw);
        top: calc(100% - .5vw);
        transform: translate(-100%, -100%);
    }

    75% {
        left: .5vw;
        top: calc(100% - .5vw);
        transform: translate(0, -100%);
    }

    100% {
        left: .5vw;
        top: .5vw;
        transform: translate(0, 0);
    }
}

/* news_detail */
#page_newsdetail #back_btn:hover .btn_icon,
#page_newsdetail #back_btn:active .btn_icon {
    background-image: url('../src/back_white.svg');
}

.chapter_link .clock {
    background-image: url('../src/clock.svg');
}

.chapter_link.active,
.chapter_link.active:hover {
    color: #004386;
    font-weight: 900;
    /* background: rgb(235, 255, 255); */
    background:rgba(0, 255, 255 ,.06);
}

.chapter_link.active .clock {
    background-image: url('../src/clock_black.svg');
}

.chapter_link.active .duration {
    color: #000;
}

#deduction_notice_container,
#deduction_success_container,
#deduction_fail_container {
    max-width: 45.375vw;
}

@media(min-width: 1560px) {

    .course_info_decoration::before {
        content: '';
        position: absolute;
        left: -0.3vw;
        top: .8vw;
        height: .6vw;
        width: .6vw;
        border-radius: 50%;
        background-color: black;
        border: 3px solid white;
    }

    .course_info_decoration::after {
        content: '';
        position: absolute;
        left: 0;
        top: 1.07vw;
        width: 2vw;
        height: 1px;
        background-color: black;
    }

    .pagination {
        margin-top: 5vw;
    }

    .pagination li a {
        font-size: .85vw;
        padding: 1.25vw;
    }

    .modal_container {
        max-width: 55vw;
    }

    .modal_body {
        padding: 1.7vw 8.4vw;
    }

    .modal_footer {
        padding: 0vw 8.4vw 2.7vw 8.4vw;
    }

    #deduction_notice_container,
    #deduction_success_container,
    #deduction_fail_container {
        max-width: 33vw;
    }



}

@media (orientation: portrait) {
    .course_info_decoration::before {
        content: '';
        left: -0.9vw;
        top: 1.05vw;
        height: 1.8vw;
        width: 1.8vw;
        border-radius: 50%;
        background-color: black;
        border: 3px solid white;
    }

    .course_info_decoration::after {
        content: '';
        left: 0;
        top: 1.9vw;
        width: 3vw;
        height: 1px;
        background-color: black;
    }

    .pagination {
        margin-top: 9vw;
    }

    .pagination li a {
        font-size: 1.53vw;
        padding: 2.52vw;
    }

    .modal_container {
        max-width: 95vw;

    }

    .modal_body {
        padding: 3.06vw 15.12vw;
    }

    .modal_footer {
        padding: 0vw 15.12vw 4.86vw 15.12vw;
    }

    #deduction_notice_container,
    #deduction_success_container,
    #deduction_fail_container {
        max-width: 70vw;
    }
}

.show_AT_1 {
    animation: tobottom .75s ease-in-out forwards;
    top: auto;
    bottom: 50vw
}

@keyframes tobottom {
    1% {
        bottom: 50vw
    }

    100% {
        bottom: 0vw
    }

}

.scrolldown_AT {
    top: -1vw;
    animation: wheel 2s ease-out infinite;
    opacity: 0;
}

@keyframes wheel {
    0% {
        opacity: 0;
        top: -11.3px;
    }

    50% {
        opacity: 1;
    }

    100% {
        /* opacity: 0; */
        top: 1.25vw;
        opacity: 1;
    }
}

/* login */
.login_input:focus {
    border-color: rgba(255, 255, 255, 1);

}