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

.navbar {

    width: 100%;

    height: 60px;

    background: #000;

    position: fixed;

    top: 0;

    z-index: 100;

}



.logo {

    height: 30px;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 20px;

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