*{margin:0;padding:0;box-sizing:border-box;}
        body{
            
            font-family: 'Muli', sans-serif; 
            background-color: #666;
        }
        
        header{
            width: 100vw;
            height: 90px;
            position: fixed;
            border-bottom: 1px solid #222;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #222;
            letter-spacing: 1px;
            font-size: 2em;
            font-family: 'Philosopher';
            font-weight: 700;
        }
        header a{
            text-decoration: none;
            color: #222;
        }
        body > section#navi{
            width: 100vw;
            height: 100vh;
            display: flex;
        }
        body > section#ham{
            width: 50px;
            height: 50px;
            background-color: ;
            position: absolute;
            top: 20px;
            left: 15px;
        
        }
        section#ham div{
            width: 100%;
            height: 100%;
            border: 1px solid transparent;
            border-radius: 5px;
        }
        section#ham div:before{
            position: absolute;
            content: '';
            width: 70%;
            height: 14.3%;
            transform: 
                translate(21%,100%);
            box-shadow: 
                0 13px 0 -1px #666,
                0 13px #222;
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid #222;
        
        }
        section#ham div:after{
            position: absolute;
            content: '';
            width: 70%;
            height: 14.3%;
            background-color: ;
            transform: translate(21%,465%);
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid #222;
        }
        
        
        
        section#ham div:hover{
            box-shadow: inset 0 0 1px 1px tomato;
            transition: .6s all .5s;
        }
        
        section#ham div:hover:before{
            border: 1px solid tomato;
            box-shadow: 
                0 13px 0 -1px #666,
                0 13px tomato;    
            transition: 
                .3s border .1s,
                .3s box-shadow .2s,
                .3s transform .1s;
            
        }
        section#ham div:hover:after{
            border: 1px solid tomato;
            transition: .6s .3s;
        }
        
        
        
        
        nav{
            
            height: calc(100vh - 90px - 30px);
            margin-top: 90px;
            overflow-y: auto;
            border-radius: 0px 0 0 0px;
        }
        .navin{
            width: 0px;
            transition: .3s ease;
        }
        .navout{
            width: 200px;
            transition: .3s ease;
        }
        nav div{
            width: 100%;
            height: 25%;
            border: solid lawngreen;
            border-width: 1px 2px;            
        }
        
        main{
            height: calc(100vh - 90px - 30px);
            margin-top: 90px;
            transition: .3s width ease, 0s all;
        }
        .mainHei{
            width: 100vw;   
        }
        .mainLow{
            width: calc(100vw - 200px);
            transition: .3s ease;   
        }
        
        iframe{
            height: calc(100vh - 90px - 30px);
            border: 10px solid #666;
            transition: .3s ease;
            background-color: #666;
        }
        .iframeHei{
            width: 100vw;
        }
        .iframeLow{
            width: calc(100vw - 200px);
            transition: .3s ease;
        }
        footer{
            width: 100vw;
            height: 30px;
            background-color: ;
            position: fixed;
            bottom: 0;
            border-top: 1px solid #333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        footer a{
            color: #222;
            text-decoration: none;
            font-size: 12px;
        }
              
        ul{
            overflow: hidden;
            transition: 1s;
            height: 56px;
        }
        ul > span{
            display: block;
            padding: 13px;
            margin: 5px;
            cursor: pointer;
            border-radius: 10px;
            box-shadow: inset 0 0 1px 1px #222;
            color: tomato;
        }
        .ulBig2{
            height: 95px;
        }
        .ulBig3{
            height: 137px;
        }
        .ulBig4{
            height: 179px;
        }
        .ulBig5{
            height: 221px;
        }
        .ulBig6{
            height: 263px;
        }
        .ulBig7{
            height: 305px;
        }
        .ulBig8{
            height: 347px;
        }
        .ulBig9{
            height: 389px;
        }
        .ulBig10{
            height: 431px;
        }
        .ulBig11{
            height: 473px;
        }
        .ulBig12{
            height: 515px;
        }
        .ulBig13{
            height: 557px;
        }
        .ulBig14{
            height: 599px;
        }
        
        li{
            list-style-type: none;
            background-color: ;
        }
        ul > li > a{
            color: tomato;
            text-decoration: none;
            display: block;
            margin: 4px;
            padding: 10px;
            width: calc(100% - 40px);
            border-radius: 5px;
            box-shadow: inset 0 0 1px 1px #aaa;  
            text-align: center;
            font-size: 14px;
        }
        .navLinksout1{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin1{
            transform: translate(30px);
            transition: .3s .3s;
        }
        .navLinksout2{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin2{
            transform: translate(30px);
            transition: .3s .4s;
        }
        .navLinksout3{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin3{
            transform: translate(30px);
            transition: .3s .5s;
        }
        .navLinksout4{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin4{
            transform: translate(30px);
            transition: .3s .6s;
        }
        .navLinksout5{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin5{
            transform: translate(30px);
            transition: .3s .7s;
        }
        .navLinksout6{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin6{
            transform: translate(30px);
            transition: .3s .8s;
        }
        .navLinksout7{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin7{
            transform: translate(30px);
            transition: .3s .9s;
        }
        .navLinksout8{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin8{
            transform: translate(30px);
            transition: .3s 1s;
        }
        .navLinksout9{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin9{
            transform: translate(30px);
            transition: .3s 1.1s;
        }
        .navLinksout10{
            transform: translate(-120%);
            transition: 0s 1s;
        }
        .navLinksin10{
            transform: translate(30px);
            transition: .3s 1.2s;
        }
        
        nav ul:last-child{
            margin-bottom: 0px;
        }
        
        header section:first-child{
            width: 85px;
            height: 90px;
            box-sizing: border-box;
            border-right: 1px solid black;
        }
        header section:last-child{
            margin-left: 140px;
        }