@charset "utf-8";


*{ margin : 0; padding : 0; }
li{list-style : none;}
a{ text-decoration : none; cursor:pointer;}
img{vertical-align:middle;}


/* input 중에 id가 trigger인 항목에 대한 css */
input[id=trigger] {
    display: none;
}

/* label 중에 for가 trigger인 항목 */
label[for=trigger] {
    /* border: 1px solid red; */
    width: 30px;
    height: 20px;
    display: block;
    position: relative;
    cursor: pointer;
    margin:30px; float: right; right: -66px;
}

/* label 중에 for가 trigger인 항목 안의 span */
label[for=trigger] span {
    display: block;
    height: 2px;
    background-color: #b5b5b6;
    right: 0;
    width: 100%;
    position: absolute;
    transition: 0.3s;
    z-index: 1000; 
}

@media only screen and (max-width: 1170px){
 label[for=trigger] {right: 0;}
}


/* label[for=trigger] > span의 n번째 요소 */
label[for=trigger] span:nth-child(1) {
    top:0;
}

label[for=trigger] span:nth-child(2) {
    top:50%;
}

label[for=trigger] span:nth-child(3) {
    top:100%;
}

/* check시 변하는 label[for=trigger] > span의 n번째 요소  */
input[id=trigger]:checked + label span:nth-child(1) {
    top: 50%;background-color: #fff;
    transform: rotate(45deg);
}

input[id=trigger]:checked + label span:nth-child(2) {
    opacity: 0;
}

input[id=trigger]:checked + label span:nth-child(3) {
    top: 50%;background-color: #fff;
    transform: rotate(-45deg);
}

/* 사이드바 */
.sidebar {
    width: 400px;
    height: 100%;
    background-color:rgba(201,159,215,0.5);
    position: fixed;
    top: 0;
    right: 0;
    right: -400px;
    transition: 0.3s;

}
.mgnb{margin-top:250px; margin-right:50px; float: right;}
.mgnb li p{cursor: pointer; text-align: right;}

.mgnb>li{font-size:25px; margin-bottom: 25px; line-height:30px;color:#fff; transition-duration: 1s; text-align: right;}

.mgnb li li{font-size:20px;font-weight:100;line-height:25px; }
.mgnb li a{color:#fff; transition-duration: 0.5s;font-family: "Bebas Neue", sans-serif;
    font-size: clamp(0.66rem, 2vw, 1rem);}
.mgnb li a:hover{ color:#5f1365;}

.hide{display: none;}


/* input[id=trigger]가 체크되었을 때 사이드바가 나오는 형제 인접자 */
input[id=trigger]:checked ~ .sidebar {
    right: 0;
}

/* check시 같이 밀려나가는 CSS 햄버거 메뉴 */
input[id=trigger]:checked + label[for=trigger] {
    
    transition: 0.3s;
}