.popup-item{
   background: #EEEEEE;
   border-radius: 100%;
   width: 44px;
   height: 44px;
   margin-left: -44px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 40px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 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;
}
.popup-open-button {
   border-radius: 100%;
   background-repeat:no-repeat;
   background-size:cover;
   width: 44px;
   height: 44px;
   margin-left: -44px;
   position: absolute;
   text-align: center;
   line-height: 40px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 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;
}

.popup-open {
   display: none;
}

.lines {
   width: 25px;
   height: 3px;
   background: #ffffff;
   display: block;
   position: absolute;
   opacity: 0;
   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-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.popup-open:checked + .popup-open-button {
   background-image:none;
}

.popup-open:checked + .popup-open-button .line-1 {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
   opacity: 1;
}

.popup-open:checked + .popup-open-button .line-3 {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
   opacity: 1;
}

.popup {
   position: fixed;
   margin:auto;
   top:0;
   bottom:0;
   right: 0;
   width: 44px;
   height: 44px;
   text-align: center;
   box-sizing: border-box;
   font-size: 20px;
   z-index:9
}

.popup-item:hover {
   background: #EEEEEE;
   color: #3290B1;
}

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

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

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

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

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

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

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

.popup-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(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
}

.popup-open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.popup-open:checked + .popup-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(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.popup-open:checked ~ .popup-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);
}

.popup-open:checked ~ .popup-item:nth-child(3) {  /*Áy®Ñ*/
   transition-duration: 100ms;
   -webkit-transition-duration: 100ms;
   -webkit-transform: translate3d(0px, -60px, 0);
   transform: translate3d(0px, -60px, 0);
}

.popup-open:checked ~ .popup-item:nth-child(4) {  /*¹q¸Ü*/
   transition-duration: 300ms;
   -webkit-transition-duration: 300ms;
   -webkit-transform: translate3d(-60px, 0px, 0);
   transform: translate3d(-60px, 0px, 0);
}

.popup-open:checked ~ .popup-item:nth-child(5) {  /*line*/
   transition-duration: 200ms;
   -webkit-transition-duration: 200ms;
   -webkit-transform: translate3d(0px, 60px, 0);
   transform: translate3d(0px, 60px, 0);
}

.popup-open:checked ~ .popup-item:nth-child(6) {  /*·L«H*/
   transition-duration: 500ms;
   -webkit-transition-duration: 500ms;
   -webkit-transform: translate3d(-60px, 60px, 0);
   transform: translate3d(-60px, 60px, 0);
}

.popup-open:checked ~ .popup-item:nth-child(7) {  /*IG*/
   transition-duration: 400ms;
   -webkit-transition-duration: 400ms;
   -webkit-transform: translate3d(-60px, -60px, 0);
   transform: translate3d(-60px, -60px, 0);
}