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



.navbar {



    width: 100%;

    height: 60px;

    background: #000;

    position: fixed;

    top: 0;

    z-index: 100;

    

    }



.logo {

    

    height: 30px;

    position: absolute;

    top: 0;

    left: 20px;

    bottom: 0;

    margin: auto;

    

    }



.logo img {

    

    width: auto;

    height: 30px;



    }



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