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





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