.popup { position: fixed; z-index: 100 !important; right: 120px; top: 100px; background: none; border-radius: 50%;}

#header .popup.on .content { display: none; }

.popup .popup-wrap { position: relative; width: 100%; height: 100%; pointer-events: none;}
.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 li, .popup ul { padding: 0px; margin: 0px; list-style: none; }

.popup .close{}
.popup .content { position: absolute; top: 0; right: 0; width: 360px; height: auto; min-height: auto !important; background: rgba(0,0,0,.8); border-radius: 15px; cursor: auto; display: block; z-index: 9999999 !important; }
.popup .content.on { display: none; }

.popup .content .content-wrap { position: relative; width: 360px; height: auto; padding: 15px; text-align: center; z-index: 999 !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: 1400px) { 

    
    .popup {  top: 95px; right: 25px;}
    .popup .content { width: 360px; }
    .popup .content .content-wrap {width: 360px; }
    
}

@media (max-width: 1024px) { 
    .popup .content { width: 320px; }
    .popup .content .content-wrap {width: 320px; }
}
@media (max-width: 780px) { 
    .popup .content { width: 300px; }
    .popup .content .content-wrap {width: 300px; }
}
@media (max-width: 480px) { 
    .popup .content { width: 280px; }
    .popup .content .content-wrap {width: 280px; }
}