@charset "utf-8";


#scrNavi{
position: fixed; z-index: 100; width: 100%;
padding-top: 20px;top: -130px; transition: all 0.5s ease;
background:-webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

#scrNavi.on{ top: 0;}

#scrNavi >.inner{ position: relative;
 width: 900px; margin: 0 auto;
background-color: #fff;
border-radius: 50px;
height: 50px;
box-shadow: 0px 0px 4.5px 0.5px rgba(187, 139, 139, 0.4);
}
#scrNavi .inner2{ width:94%;margin:0 auto; display: table; position: relative;top:-21px;}
#scrNavi .title{ width: 220px;display: table-cell; position: relative;}
#scrNavi .title img{ position: relative; top: 3px}
#scrNavi .btns{    width: auto; display: table-cell;
    margin: 0 auto;
top: -3px;
position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 0;
    row-gap: 0;
}

@media(max-width:750px){

#scrNavi >.inner{ position: relative;
 width: auto; margin: 0 20px;
background-color: #fff;
border-radius: 50px;
height: 70px;
box-shadow: 0px 0px 4.5px 0.5px rgba(187, 139, 139, 0.4);
}

#scrNavi .title{ width: 60px;display: table-cell; position: relative;}
#scrNavi .btns{ padding-top: 30px;   width: auto; display: table-cell;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
top: 0px;
    column-gap: 0;
    row-gap: 0;
}

   }