@charset "utf-8";

.popupDiv{  position: absolute; left: 100px; top: 100px; z-index: 99999; visibility: hidden; background: rgba(0,0,0, 0.5); width: 400px; padding: 15px; border-radius: 20px;}
.popupDiv .conHead{ width: 100%; display: flex; justify-content: space-between; align-items: center;}
.conHead .dayClose a{ display: block; width: 100%; height: 100%; font-size: 16px; color: #fff; text-decoration: none;}
.popupDiv .conContainer{ margin-top: 20px;}
.popupDiv .conContainer img{ width: 100%;}

#divPop2{ position: absolute; left: 510px;}
#divPop3{ position: absolute; left: 920px;}

/* 반응형 */
@media all and (max-width: 1024px){
    .popupDiv{ left: 30px; width: 300px;}
    #divPop2{ left: 370px;}
    #divPop3{ left: 700px;}
}
@media all and (max-width:768px){
    .popupDiv{left: 20px; width: 60%;}
    #divPop2{ position: absolute; left: 20px;}
    #divPop3{ position: absolute; left: 20px;}
}

@media all and (max-width:520px){
    .popupDiv{width: 90%;}
    #divPop2{ position: absolute; left: 20px;}
    #divPop3{ position: absolute; left: 20px;}
}


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

.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 ul { padding: 0px; margin: 0px; list-style: none; display: flex; }
.popup li{ width: 100%;}
.popup li img{ width: 50%;}

.popup .content { position: fixed; top: 120px; left: 8%; width:  50%; height: auto; border-radius: 15px; cursor: auto; display: none; background-color: rgba(0, 0, 0, 0.5); }
.popup .content.on { display: block; }

.popup :nth-child(2) .content{right: 8%;}

.popup .content .content-wrap { position: relative; width: 100%;  height: auto; padding: 15px 15px 20px 15px; text-align: center; z-index: 999999 !important; }
.popup .content .content-wrap .close { position: absolute; right: 50%; top: 15px; transform: translateX(50%); color: #FFF; cursor: pointer; filter: drop-shadow(2px 1px 1px #666666); }

.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: 25px !important; width: 100%; padding: 0px; }
.popup .content .content-wrap .content-zone li img { top: 45px; left: 50%; width: 100%; }
.popup .content .content-wrap .content-zone li img:nth-of-type(1) { aspect-ratio: 4/3; }
.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 all and (max-width: 1280px){
    .popup .content { left: 50%; top: 80px; transform: translateX(-50%); }
    .popup .content .content-wrap { width: 400px; }
    .popup li, .popup ul{ flex-direction: column;}
    .popup .content .content-wrap .close{ left: 50%; right: 0; transform: translateX(-50%);}
}

@media all and (max-width: 1024px){
    .popup .content { left: 50%; top: 130px; transform: translateX(-50%); width: 50%;}
    .popup .content .content-wrap { width: 400px; } 
    .popup li, .popup ul{ flex-direction: column;}
    .popup .content .content-wrap{ width: 100%;}
    .popup .content .content-wrap .close{ left: 50%; right: 0; transform: translateX(-50%);}
}

@media all and (max-width: 768px){
    .popup .content { left: 50%; top: 90px; transform: translateX(-50%); width: 70%; }
    .popup .content .content-wrap { width: 400px; }
    .popup li, .popup ul{ flex-direction: column;}
    .popup .content .content-wrap .close{ left: 50%; right: 0; transform: translateX(-50%);}
    .popup .content .content-wrap .content-zone li.on img { display: block; }
}
@media all and (max-width: 500px){
    .popup .content { top: 90px; right: 50%; transform: translateX(-50%); width: 60%;}
    .popup .content .content-wrap{ width: 100%;}
    .popup .content .content-wrap .content-zone li.on img{ aspect-ratio: 0;}
    .popup .content .content-wrap .content-zone{ flex-direction: column;}
}

@media all and (max-width: 360px){
    .popup .content .content-wrap { width: 280px; }
    
} */