/* 파트11 인증 창 열기 버튼 속성 */
.menu-item-sign,
.menu-open-button-sign {
   background: #EEEEEE;
   border-radius: 100%;
   width: 60px;
   height: 60px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 60px;
}

/* 파트11 인증 창 열기 버튼 상호작용 특성 */
.menu-item-sign:hover {
   cursor: pointer;
   background: #e75353;
   color: #3290B1;
}

/* 메뉴 아이템 버튼 속성 */
.menu-item,
.menu-open-button {
   background: #EEEEEE;
   border-radius: 100%;
   width: 60px;
   height: 60px;
   margin-left: 100px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 60px;
   -webkit-transform: translate3d(65px, 0, 0);
   transform: translate3d(65px, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

/* 메뉴 아이템 버튼 트리거 속성 */
.menu-open {
   display: none;
}

/* 메뉴 아이템 버튼 속성 */
.menu {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 60px;
   height: 60px;
   text-align: center;
   box-sizing: border-box;
}

/* 메뉴 아이템 버튼 상호작용 속성 */
.menu-item:hover {
   cursor: pointer;
   background: #FC913A;
   color: #3290B1;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 메뉴 아이템 버튼 접히는 속도 속성 */
.menu-item:nth-child(10) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(11) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

/* 햄버거 버튼 속성 */
.menu-open-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(65, 0, 0);
   transform: scale(1.1, 1.1) translate3d(65, 0, 0);
   cursor: pointer;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

/* 햄버거 버튼 상호작용 속성 */
.menu-open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(65, 0, 0);
   transform: scale(1.2, 1.2) translate3d(65, 0, 0);
}

/* 햄버거 버튼 라인 속성 */
.lines {
   width: 25px;
   height: 3px;
   background: #596778;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}

/* 햄버거 버튼 첫번째 라인 속성 */
.line-1 {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

/* 햄버거 버튼 두번째 라인 속성 */
.line-2 {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

/* 햄버거 버튼 세번째 라인 속성 */
.line-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

/* 햄버거 버튼 첫번째 라인 눌렸을 경우 에니메이션 */
.menu-open:checked+.menu-open-button .line-1 {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}

/* 햄버거 버튼 두번째 라인 눌렸을 경우 에니메이션 */
.menu-open:checked+.menu-open-button .line-2 {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}

/* 햄버거 버튼 세번째 라인 눌렸을 경우 에니메이션 */
.menu-open:checked+.menu-open-button .line-3 {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}

/* 햄버거 버튼 세번째 눌렸을 경우 에니메이션 */
.menu-open:checked+.menu-open-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(65 0, 0);
   transform: scale(0.8, 0.8) translate3d(65, 0, 0);
}

/* 햄버거 버튼 세번째 눌렸을 경우 에니메이션 */
.menu-open:checked~.menu-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(65px, -65px, 0);
   transform: translate3d(65px, -65px, 0);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(65px, -130px, 0);
   transform: translate3d(65px, -130px, 0);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(0.08361px, 0.08361px, 0);
   transform: translate3d(0.08361px, 0.08361px, 0);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(-65px, 0.08361px, 0);
   transform: translate3d(-65px, 0.08361px, 0);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(0.08361px, -65px, 0);
   transform: translate3d(0.08361px, -65px, 0);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(0.08361px, -130px, 0);
   transform: translate3d(0.08361px, -130px, 0);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(-65px, -65px, 0);
   transform: translate3d(-65px, -65px, 0);
}

/* 메뉴 아이템 버튼 펼쳐지는 속도 및 위치 */
.menu-open:checked~.menu-item:nth-child(10) {
   transition-duration: 880ms;
   -webkit-transition-duration: 880ms;
   -webkit-transform: translate3d(-65px, -130px, 0);
   transform: translate3d(-65px, -130px, 0);
}

.menu-open:checked~.menu-item:nth-child(11) {
   transition-duration: 880ms;
   -webkit-transition-duration: 880ms;
   -webkit-transform: translate3d(-130px, 0.08361px, 0);
   transform: translate3d(-130px, 0.08361px, 0);
}

/* 메뉴 아이템 색상, 그림자 */
.blue {
   background-color: #669AE1;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* 메뉴 아이템 hover 색상 */
.blue:hover {
   color: #669AE1;
   text-shadow: none;
}

/* 메뉴 아이템 색상, 그림자 */
.lightgray {
   background-color: #EAEAEA;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* 메뉴 아이템 hover 색상 */
.lightgray:hover {
   color: #FC913A;
   text-shadow: none;
}

/* 메뉴 아이템 색상, 그림자 */
.green {
   background-color: #70CC72;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* 메뉴 아이템 hover 색상 */
.green:hover {
   color: #70CC72;
   text-shadow: none;
}

/* 메뉴 아이템 색상, 그림자 */
.red {
   background-color: #fc3a3a;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* 메뉴 아이템 hover 색상 */
.red:hover {
   color: #FE4365;
   text-shadow: none;
}

/* 메뉴 아이템 색상, 그림자 */
.purple {
   background-color: #C49CDE;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* 메뉴 아이템 hover 색상 */
.purple:hover {
   color: #C49CDE;
   text-shadow: none;
}

/* 메뉴 아이템 색상, 그림자 */
.orange {
   background-color: #FC913A;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* 메뉴 아이템 hover 색상 */
.orange:hover {
   color: #FC913A;
   text-shadow: none;
}

/* 메뉴 아이템 색상, 그림자 */
.lightblue {
   background-color: #62C2E4;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* 메뉴 아이템 hover 색상 */
.lightblue:hover {
   color: #62C2E4;
   text-shadow: none;
}

/* deprecated */
.credit {
   margin: 24px 20px 120px 0;
   text-align: right;
   color: #EEEEEE;
}

/* deprecated */
.credit a {
   padding: 8px 0;
   color: #C49CDE;
   text-decoration: none;
   transition: all 0.3s ease 0s;
}

/* deprecated */
.credit a:hover {
   text-decoration: underline;
}