.popup { position: fixed; z-index: 999999 !important; height: 25px; width: 25px; top: 25px; right: 27.5px; background: none; border-radius: 50%; cursor: pointer; display: none; }

.popup .popup-wrap { position: relative; width: 100%; height: 100%; width: 25px; height: 25px; }
.popup .popup-wrap img { animation-duration: .7s; animation-iteration-count: infinite; animation-name: size; }
.popup .popup-wrap p { padding: 3px 5px; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; font-size: 10px; color: #000; text-align: center; background: #FFF; border-radius: 4px; animation-duration: .7s; animation-iteration-count: infinite; animation-name: attention; }
.popup .popup-wrap p.on { display: none; }
.popup .popup-wrap p::after { content: ""; position: absolute; top: -1px; left: 50%; width: 3px; height: 3px; transform: rotate(45deg) translateX(-50%); background: #FFF; }
/*.popup .popup-wrap h3 { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 28px; font-weight: 900; color: #FFF;}*/

.popup li, .popup ul { padding: 0px; margin: 0px; list-style: none; }

.popup .content { position: fixed; top: 65px; right: 15px; width: 300px; height: auto; min-height: auto !important; background: rgba(0,0,0,.7); border-radius: 15px; cursor: auto; display: none; }
.popup .content.on { display: block; }

.popup .content .content-wrap { position: relative; width: 270px; height: auto; padding: 15px; text-align: center; z-index: 999999 !important; }
.popup .content .content-wrap .close { position: absolute; right: 20px; top: 15px; color: #FFF; cursor: pointer; }

.popup .content .content-wrap .content-list { width: 100%; height: auto; text-align: left; }
.popup .content .content-wrap .content-list li { display: inline-block; width: 20px; height: 20px; font-size: 13px; line-height: 20px; color: #000; background: #FFF; text-align: center; border-radius: 5px; cursor: pointer; opacity: .7; }
.popup .content .content-wrap .content-list li.on { opacity: 1; }
.popup .content .content-wrap .content-list li:nth-of-type(1) { margin-right: 3px; }

.popup .content .content-wrap .content-zone { padding-top: 15px !important; width: 100%; height: 100%; padding: 0px; }
.popup .content .content-wrap .content-zone li img { top: 45px; left: 50%; width: 100%; display: none; }
.popup .content .content-wrap .content-zone li.on img { display: block; }


@keyframes attention {
  from {
      top: 40px;
  }
    
  50% {
      top: 38px;
  }

  to {
      top: 40px;
  }
}

@keyframes size {
  from {
      transform: scale(1);
  }
    
  50% {
      transform: scale(1.25);
  }

  to {
      transform: scale(1);
  }
}

@media (max-width: 879px) {
    
    .popup { display: block; } 
    
}