@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

input[id="menuicon"] {display:none;  position: fixed;}
input[id="menuicon"] + label {display:block;margin:15px;width:30px;height:20px;position:relative;cursor:pointer;}
input[id="menuicon"] + label span {display:block;position:absolute;width:100%;height:5px;border-radius:30px;background:#000;transition:all .35s;}
input[id="menuicon"] + label span:nth-child(1) {top:0;}
input[id="menuicon"] + label span:nth-child(2) {top:50%;transform:translateY(-50%);}
input[id="menuicon"] + label span:nth-child(3) {bottom:0;}
input[id="menuicon"]:checked + label {z-index:2;}
input[id="menuicon"]:checked + label span {background:#000;}
input[id="menuicon"]:checked + label span:nth-child(1) {top:50%;transform:translateY(-50%) rotate(45deg);}
input[id="menuicon"]:checked + label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + label span:nth-child(3) {bottom:50%;transform:translateY(50%) rotate(-45deg);}
div[class="sidebar"] {width:300px;height:100%;background:rgb(255, 255, 255);position:fixed;top:0;left:-300px;z-index:1;transition:all .35s;}
input[id="menuicon"]:checked + label + div {left:0;}
input[id="menuicon"]:checked + label + .background  {opacity:1;visibility:visible;}
.background {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);transition:all .35s;opacity:0;visibility:hidden;z-index:1;}

.sidebar {
    cursor: default;
}

.sidebar-header {   
    background-color: rgb(0, 132, 255);
    padding-top: 30px;
}

.sidebar-header-text {
    margin: 0 auto;
    margin-top: 50px;
    padding: 30px;
}

.sidebar-header-maintext {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 900;
    font-size: 50px;
    margin: 0px;
}

.sidebar-header-subtext {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 30px;
    margin: 0px;
}

.list {list-style: none; margin:0; padding: 0 20px;}
.list li {
    border-bottom: 1px solid rgb(206, 206, 206);
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 20px;
    padding: 10px 0;
    cursor: pointer;
}