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


.navbar {


    width: 100%;


    height: 60px;


    background: #000;


    position: fixed;


    top: 0;


    z-index: 100;


}


.logo {


    height: 40px;


    position: absolute;


    top: 0;


    left: 20px;


    bottom: 0;


    margin: auto;


}


.logo img {


    width: auto;


    height: 40px;


}


.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: 40px;


        position: absolute;


        top: 0;


        bottom: 0;


        left: 20px;


        margin: auto;


    }


    .logo img {


        width: auto;


        height: 40px;


    }


    .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 *****/