/***** 導覽列菜單 *****/



.navbar {



    width: 100%;

    height: 60px;

    background: #000;

    position: fixed;

    top: 0;

    z-index: 100;



}



.logo {



    height: 36px;

    position: absolute;

    top: 0;

    left: 20px;

    bottom: 0;

    margin: auto;



}



.logo img {



    width: auto;

    height: 36px;



}



.navbar_nav {



    width: 250px;

    height: calc(100vh - 60px);

    background: #000;

    position: fixed;

    top: 60px;

    right: -250px;

    transition: 0.5s;



}



.navbar_nav a {



    display: block;

    text-decoration: none;

    color: #fff;

    padding: 20px;

    border-bottom: 1px solid #818181;

    text-align: center;



}



.menu_btn {



    display: none;



}



.menu_btn {



    width: 50px;

    height: 50px;

    background: #000;

    position: absolute;

    top: 5px;

    right: 10px;

    margin: auto;



}



.menu_btn span {



    opacity: 0;

    width: 1px;

    height: 1px;



}



.menu_btn::after {



    content: "";

    position: absolute;

    width: 36px;

    height: 2px;

    left: 7px;

    background: #fff;

    top: 0;

    bottom: 0;

    margin: auto;

    box-shadow: 0 10px 0 #fff, 0 -10px 0 #fff;



}



#menu_control {



    opacity: 0;

    position: absolute;



}



#menu_control:checked~.navbar_nav {



    right: 0;



}



@media only screen and (max-width: 768px) {



    .logo {


        height: 30px;

        position: absolute;

        top: 0;

        bottom: 0;

        left: 20px;

        margin: auto;



    }



    .logo img {



        width: auto;

        height: 30px;



    }



    .menu_btn {



        width: 50px;

        height: 50px;

        position: absolute;

        top: 5px;

        right: 10px;

        margin: auto;

        display: block;

        cursor: pointer;

    }



    .menu_btn span {



        opacity: 0;

        width: 1px;

        height: 1px;



    }



    .menu_btn::after {



        content: "";

        position: absolute;

        width: 36px;

        height: 2px;

        left: 7px;

        background: #fff;

        top: 0;

        bottom: 0;

        margin: auto;

        box-shadow: 0 10px 0 #fff, 0 -10px 0 #fff;



    }



}



@media (min-width: 768px) {



    .navbar_nav {



        width: auto;

        height: 60px;

        display: flex;

        top: 0;

        right: 0;



    }



    .navbar_nav a {



        border-bottom: none;

    }



}



/***** 導覽列菜單end *****/





/***** qr *****/

#qr {



    position: fixed;

    z-index: 999;

    right: 30px;

    bottom: 30px;

    width: 80px;

    padding: 5px 10px 10px;

    border-radius: 5px;

    background-color: #fff;

    cursor: pointer;

    text-align: center;

    display: block;



}



@media only screen and (max-width: 768px) {



    #qr {



        display: none;

    }



}



/***** qr end *****/