header{
    position: fixed;
    top:0;
    width:100%;
    border-top:8px solid #ffcd00;
    box-shadow: -13px -1px 20px 1px #cbcbcb;
    background-color:white;
}
header nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    height:100%;
    padding:5px 0px 5px 0px;
}
header nav .box1{
    display:flex;
    align-items:center;
}
header nav .box1 .logo_container{
    width:37px;
    height:37px;
    box-sizing: border-box;
}
header nav .box1 .logo_container .logo{
    display:block;
    width:100%;
    height:100%;
    padding-right:16px;
    border-right:1px solid #d9d9d9;
}
header nav .box1 .box-icon-menu{
    display:block;
    margin-left:32px;
}

header .sub-menu{
    position:fixed;
    left:0;
    width:100%;
    height:100%;
    background-color:#ffcd00;
    overflow:scroll;
    padding-top:12px;
    padding-bottom:80px;
    
    left:-100%;
    opacity:0;
    transition:0.2s;
}
header .sub-menu.visible{
    display:block;
    left:0;
    opacity:1;

}


header .sub-menu ul{
    list-style:none;
}
header .sub-menu ul li{
    position:relative;
    display:flex;
    align-items:center;
    padding:16px 0px;
    border-bottom:1px solid #002d6d48;
}
header .sub-menu ul li .i-menu{
    font-size: 20px;
    color:#002e6d;
    font-weight: bold;
}
header .sub-menu ul li a{
    text-decoration:none;
    color:#002e6d;
    padding:0px 12px;
}
header .sub-menu ul li .icon-next{
    position:absolute;
    right:12px;
}