@charset "utf-8";

/* Layout -------------------- */
.pops{position:fixed; left:0; bottom:0; overflow:visible; width:100%; z-index:1000}
.pops.pops-none{display:none !important}
.pops .pops-inner{margin-left:auto; margin-right:auto; border-radius:20px 20px 0 0; position:relative; z-index:11; background-color:#FFF; overflow:hidden; box-shadow:0 0 1px 1px rgba(0,0,0,0.05), 0 4px 15px 0 rgba(0,0,0,.1); padding-top:20px; padding-bottom:13px; text-align:center}
.pops .notice-contents{padding:10px 20px 63px}
.pops .pops-cover{position:fixed; top:0; right:0; bottom:0; left:0; background-color:#000; opacity:0; z-index:10; transition:all 0.3s ease-in-out}
/* action */
.pops .pops-inner{-webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:background-color 1s ease-in-out 1.8s, color 1s ease-in-out 1.8s, -webkit-transform .5s ease-in-out; transition:-webkit-transform .5s ease-in-out; transition:transform .5s ease-in-out}
.pops-open .pops-inner{transform:translateY(0); -webkit-transform: translateY(0)}
.pops-open .pops-cover{opacity:0.4}
.pops-hide .pops-inner{transform:translateY(100%); -webkit-transform: translateY(100%)}
.pops-hide .pops-cover{opacity:0}

@media(min-width:460px){
  .pops{bottom:30px}
  .pops .pops-inner{max-width:380px; border-radius:20px}
  .pops-hide{bottom:0}
}
@media(min-width:1070px){
  .pops{left:auto; right:30px; width:auto}
  .pops .pops-cover{display:none}
}


/* Content -------------------- */

/* header */
.pops .pops-header{display:flex; justify-content:space-between; gap:12px; padding:0 22px}
.pops .pops-header .title{display:flex; align-items:center; gap:4px; font-size:16px; font-weight:500; text-align:left}
.pops .pops-header .title::before{content:''; display:inline-block; width:28px; height:28px; background:url('/images/ico_bell.svg') no-repeat center / 22px; flex-shrink:0}
.pops-header .pops-close{width:28px; height:28px; border:none; background:url('/images/ico_close.svg') no-repeat center / 20px; cursor:pointer}

/* content */
.notice-contents .thums{height:106px; margin-bottom:10px; background-size:contain; background-position:center; background-repeat:no-repeat}
.notice-contents .menu{font-size:15px; color:#9D917D}
.notice-contents .title{font-size:22px; font-weight:700; line-height:1.4}
.notice-contents .desc{font-size:14px; color:#888; line-height:1.5}
.notice-contents > *:not(.thums){margin-top:6px; max-width:350px; margin-left:auto; margin-right:auto}
.notice-contents .btn-link{width:100%; max-width:350px; height:48px; display:flex; justify-content:center; align-items:center; font-size:15px; color:#FFF; background-color:#1E72E5;border:0;	padding:10px 16px; border-radius:8px; margin-top:20px}
.notice-contents .btn-link:hover{background-color:#1a6ad8}

/* btns */
.pops-btns{position:absolute; bottom:25px; width:100%; background-color:transparent; z-index:1}
.pops .pops-form{font-size:15px; line-height:1.4; color:#888; padding:15px 20px; display:block; cursor:pointer}
.pops .pops-form label{cursor:pointer}
.pops .pops-form input{display:none}
.pops .pops-form:hover{color:#1E72E5}



/* owl custom -------------------- */
.pops .owl-carousel{height:initial}
.pops .owl-theme .owl-dots .owl-dot span{width:7px; height:7px; margin:5px 3px; background:#D6D6D6; display:block; -webkit-backface-visibility:visible; transition:opacity 200ms ease; border-radius:30px;transition: all 0.3s ease-out}
.pops .owl-carousel.overlay-dots .owl-dots{width:100%; position:absolute; bottom:0; text-align:center}
.pops .owl-carousel.overlay-dots .owl-dots .owl-dot{padding:0 !important}
.pops .owl-carousel.overlay-dots .owl-dots .owl-dot span{background-color:rgba(255,255,255,0.5); box-shadow:0 0 0 1px rgba(0,0,0,0.11)}
.pops .owl-carousel.overlay-dots .owl-dots :is(.owl-dot:hover span, .owl-dot.active span){background-color:rgba(255,255,255,0.8)}
.pops .owl-carousel.overlay-dots .owl-dots .owl-dot.active span{width:24px}