body {

    background-color: #fff;

    /* font-family: "Helvetica", "Noto Sans TC", "sans-serif"; */

    font-family: "Noto Sans TC", sans-serif;

}



/*sidebar*/

.nav_link {

    display: inline-flex;

    align-items: center;

    font-weight: 500;

    column-gap: 7.7vw;

    padding: 4vw 3vw 4vw 18.5vw;

    font-size: 4.8vw;

    letter-spacing: .3vw;

    width: 100%;

}



.nav_link .icon {

    display: block;

    width: 6.5vw;

    height: 6.5vw;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}



.nav_link[data-page="course"] .icon {

    background-image: url('../src/book.svg');

}



.nav_link[data-page="community"] .icon {

    background-image: url('../src/city.svg');

}



.nav_link[data-page="my_history"] .icon {

    background-image: url('../src/me.svg');

}



.nav_link[data-page="stu_history"] .icon {

    background-image: url('../src/docfolder.svg');

}





/* button */

[class*="btn_"] {

    border: 1px solid;

    font-weight: 500;

    line-height: 1;

    border-radius: 10vw;

    letter-spacing: .2vw;

}



.btn_lg {

    padding: 3.8vw;

}



.btn_0 {

    border-color: #000;

    background-color: #000;

    color: #fff;

}



.btn_outline_0 {

    border-color: #000;



}



.btn_0:disabled {

    /* border-color: #000;

    background-color: #000;

    color: #fff; */

    opacity: 40%;

}



/*public*/

[type='text'],

[type='email'],

[type='url'],

[type='password'],

[type='number'],

[type='date'],

[type='datetime-local'],

[type='month'],

[type='search'],

[type='tel'],

[type='time'],

[type='week'],

[multiple],

textarea,

select {

    border-width: 0px 0px 1px 0px;

}



[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{

    --tw-ring-color: transparent;

    --tw-ring-shadow: none;

    border-color: transparent;

}



/*slider*/

.slide_item {

    display: none;

}



.slide_item.active {

    display: block;

}



/* input type 是number時按鈕消失 */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



/* input type 是number時按鈕消失 */

input[type=number] {

    -moz-appearance: textfield;

}



/* checkbox */

input[type="checkbox"]:checked~.figure div {

    position: relative;

}



input[type="checkbox"]:checked~.figure div:after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;

    width: 100%;

    height: 100%;

    background-image: url('../src/check_0.svg');

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}



input.checkbox_1[type="checkbox"]:focus~label .figure span {

    position: relative;

    background-color: transparent;

    border-color: #20A666;

}



input.checkbox_1[type="checkbox"]:checked~label .figure span {

    position: relative;

}



input.checkbox_1[type="checkbox"]:checked~label .figure span:after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;

    width: 100%;

    height: 100%;

    background-image: url('../src/check_0.svg');

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}



/* toast */

.toast {

    visibility: hidden;

}

.toast.show {

    visibility: visible;

    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;

    animation: fadein 0.5s, fadeout 0.5s 2.5s;

}

/* modal */

.modal_content{

    bottom: -100%;

}



@-webkit-keyframes fadein {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes fadein {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@-webkit-keyframes fadeout {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

@keyframes fadeout {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}



@media(min-width: 768px) {

    .nav_link {

        column-gap: 5.3vw;

        padding: 2.8vw 2.1vw 2.8vw 12.9vw;

        font-size: 3.3vw;

        letter-spacing: .2vw;

    }



    .nav_link .icon {

        width: 4.5vw;

        height: 4.5vw;

    }



    /* button */

    [class*="btn_"] {

        border-radius: 7vw;

        letter-spacing: .1vw;

    }



    .btn_lg {

        padding: 2.6vw;

    }



}



@media(orientation: landscape) {



    /*sidebar*/

    .nav_link {

        column-gap: 3.85vw;

        padding: 2vw 1.5vw 2vw 9.25vw;

        font-size: 2.4vw;

        letter-spacing: .15vw;

    }



    .nav_link .icon {

        width: 3.25vw;

        height: 3.25vw;

    }



    /* button */

    [class*="btn_"] {

        border-radius: 5vw;

        letter-spacing: .1vw;

    }



    .btn_lg {

        padding: 1.9vw;

    }



    @media(min-width:768px) {

        .nav_link {

            column-gap: 2.6vw;

            padding: 1.4vw 1vw 1.4vw 6.4vw;

            font-size: 1.6vw;

            letter-spacing: .1vw;

        }



        .nav_link .icon {

            width: 2.2vw;

            height: 2.2vw;

        }



        /* button */

        [class*="btn_"] {

            border-radius: 3.5vw;

            letter-spacing: .05vw;

        }



        .btn_lg {

            padding: 1.3vw;

        }



    }

}