.main-menu {
    display:flex;
    justify-content: space-between;
}
.main-menu li {
    margin:2vw;
    width:calc(50vw - 6vw);
    height:50vh;
    color:white;
    text-shadow:3px 3px 0 #120B68, -3px -3px 0 #120B68,
              -3px 3px 0 #120B68, 3px -3px 0 #120B68,
              0px 3px 0 #120B68,  0-3px 0 #120B68,
              -3px 0 0 #120B68, 3px 0 0 #120B68;
    background-color:#120B68;
    border-radius:10px;
}
.main-menu li a {
    padding:30px;
    display:inline-block;
    width:calc(100% - 30px*2);
    height:calc(100% - 30px*2);
    font-weight:700;
    font-size:32px;
    vertical-align:middle;
    background-repeat:no-repeat;
    background-position:100% 64px;
}
.main-menu li a:hover {
    background-color: rgba(255,255,255,0.1);
}
.main-menu li.login a {
    background-image: url('../img/icon/login.svg');
}
.main-menu li.search a {
    background-image: url('../img/icon/search.svg');
}
.main-menu li.record a {
    background-image: url('../img/icon/record.svg');
}
@media screen and (max-width: 1024px) {
    .main-menu {
        flex-flow: column;
    }
    .main-menu li {
        margin:2vw;
        flex-basis:100%;
        width:calc(100vw - 6vw);
        height:20vh;
        border-radius:10px;
    }
    .main-menu li a {
        padding:20px;
        width:calc(100% - 20px*2);
        height:calc(100% - 20px*2);
        font-weight:700;
        font-size:32px;
        vertical-align:middle;
        background-repeat:no-repeat;
        background-size: 25% 85%;
        background-position: 100% 5px;
    }
}