.header-main {
    background-color:#23b2f9;
    height:100%;
    display:flex;
    color:#fafafa;
    align-items:center;
    padding:0 30px;
}
.header-left {
    padding-left:30px;
    padding-bottom:10px;
}
.header-right {
    margin-left:auto;
    display:flex;
}
.header-right p, .header-right a {
    margin-left:20px;
}
.header-right i {
    margin-left:10px;
    color:#ffffff;
    font-size:18px;
    cursor:pointer;
    border-radius:50%;
}
.header-menu-btn i:hover {
    background-color:f5f5f5;
}
.header-logo {
    font-size:30px;
}
.header-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:9999;
    display: flex;
}
.header-menu-wrapper * {
    z-index:10;
}
.block-screen {
    background-color:#000000;
    opacity:0.3;
    height:100%;
    flex:1;
}
.header-menu-main {
    height:100%;
    padding:10px;
    padding-top:50px;
    width:400px;
    background-color:#ffffff;
}
.header-item {
    display:flex;
    align-items: center;
    width:100%;
    border-bottom:2px solid #dddddd;
    padding:3px;
    font-size:20px;
    transition: all 0.5s;
    padding-top:10px;
}
.header-item:hover {
    opacity:0.7;
}
.header-menu i {
    color:#23b2f9;
    margin-left: auto;
    margin-right: 20px;
    font-size:20px;
    margin-right:20px;
}
.header-heading {
    padding-bottom:50px;
    text-align:center;
}
.header-menu-i {
    display:flex;
    width:100%;
}