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

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