@charset "UTF-8";
/*-------------------------------------------------
title       : 최상단 가로형 팝업
Author      : PLAN I
Create date : 2023-01-01
-------------------------------------------------*/
.topbanner{position:relative;background-color:#EDF1F5;overflow:hidden}
.topbanner:before{content:"";position:absolute;left:0;top:0;width:100%;border-top:1px solid var(--gray40);z-index:1}
.topbanner:after{content:"";position:absolute;left:0;bottom:0;width:100%;border-top:1px solid var(--gray40);z-index:1}
.topbanner .open{position:absolute;right:0;top:100%;z-index:999;padding:0 1rem;font-weight:700;color:#fff;line-height:3.9rem}
.topbanner .open::before{font-family:"remixicon";content:"\ef9a";display:inline-block;vertical-align:middle;position:relative;top:-0.1rem;font-size:1.6rem;font-weight:400}
.topbanner .open::after{font-family:"remixicon";content:"\ea78";display:inline-block;vertical-align:middle;position:relative;top:-0.15rem;-webkit-transition:all 0.2s 0.2s;transition:all 0.2s 0.2s}
.topbanner .open span.count{margin-left:0.5rem;font-weight:400}
.topbanner .open strong.count{color:#f00}
.topbanner .open:hover::before,
.topbanner .open:focus::before{content:"\ef99"}
.topbanner .close{position:relative;display:inline-block;overflow:hidden;width:4rem;height:4rem;text-align:center;line-height:4rem;vertical-align:middle;display:block;visibility:hidden;overflow:hidden !important;position:absolute;right:0;top:50%;color:#000;opacity:0;transform:translateY(-50%);border:1px solid #E4E4E4;background:#fff;border-radius:50%}
.topbanner .close:before{content:"";display:block;width:100%;height:100%;background:url(../images/main/icon_topbanner_close.png) center no-repeat}
.topbanner .close:hover,
.topbanner .close:focus{transform:translateY(-50%) rotate(180deg);background-color:#EDF1F5}
.topbanner .close.oneday{right:23.4rem;top:50%;overflow:visible;width:auto;height:auto;font-size:1.6rem;line-height:initial;-webkit-transition:color 0.2s;transition:color 0.2s;background:none;border-radius:0;border:0}
.topbanner .close.oneday::before{font-family:"remixicon";content:"\eb7b";display:inline-block;vertical-align:middle;width:1.75rem;height:1.75rem;margin-right:0.75rem;border-radius:0.25rem;border:1px solid #000;font-size:inherit;color:transparent;-webkit-transform:translate(0, -1px);transform: translate(0, -1px);background:none}
.topbanner .close.oneday:hover,
.topbanner .close.oneday:focus{transform:translateY(-50%)}
.topbanner .close.oneday:hover::before,
.topbanner .close.oneday:focus::before{color:#000}
.topbanner .group{position:relative;max-width:128rem;margin:0 auto;visibility:hidden;height:0;color:#000;-webkit-transition:all 0.2s;transition:all 0.2s}
.topbanner .group span{display:inline}
.topbanner .group a{color:#1C4EFC;text-decoration:underline;-webkit-transition:all 0.2s;transition:all 0.2s}
.topbanner .group .list > li{position:relative}
.topbanner .group .list .detail{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.topbanner .group .list a .detail{text-decoration:underline}
.topbanner .group .list .detail:after{content:"\EA6E";display:inline-block;margin-left:.5rem;font-family:"remixicon"}
.topbanner .group .list img{height:100%}
.topbanner div.control{display:inline-block;z-index:0;height:4rem;color:#2d2d2d;line-height:4rem;white-space:nowrap;vertical-align:middle;display:none}
.topbanner div.control button{position:relative;z-index:0;display:inline-block;overflow:hidden;width:4rem;height:4rem;text-align:center;line-height:4rem;vertical-align:middle;display:inline-block;border:1px solid #E4E4E4;line-height:inherit;border-radius:50%;background:#fff;transition:all .2s}
.topbanner div.control button:hover,
.topbanner div.control button:focus{background-color:#EDF1F5}
.topbanner div.control button:hover::after,
.topbanner div.control button:focus::after{width:3rem;height:3rem}
.topbanner div.control .play::before,
.topbanner div.control .pause::before{content:"";font-family:"remixicon";display:block;width:100%;height:100%;line-height:inherit}
.topbanner div.control .play::before{content:"\f00a"}
.topbanner div.control .pause::before{content:"\efd7"}
.topbanner div.control .prev,
.topbanner div.control .next{position:absolute;top:50%;transform:translateY(-50%);padding-top:3.8rem}
.topbanner div.control .prev{right:8.8rem;background:#fff url(../images/main/icon_ca_prev.png) center no-repeat}
.topbanner div.control .next{right:4.4rem;background:#fff url(../images/main/icon_ca_next.png) center no-repeat}
.topbanner div.control .play,
.topbanner div.control .pause{display:none;position:relative;top:.1rem;width:2rem;height:2rem;line-height:1;padding:0;margin-left:.7rem;font-weight:700;font-size:1.9rem;border-radius:0;background:none;border-radius:0;border:0;vertical-align:middle}
.topbanner div.control .play::after,
.topbanner div.control .pause::after{margin:0}
.topbanner div.control .play.active,
.topbanner div.control .pause.active{display:inline-block}
.topbanner div.control .play:hover,
.topbanner div.control .play:focus,
.topbanner div.control .pause:hover,
.topbanner div.control .pause:focus{background:none}
.topbanner div.control .ctrl{display:flex;align-items:center;position:absolute;right:13.2rem;top:50%;width:auto;height:4rem;padding:0 1.5rem;border-radius:4rem;background-color:#fff;transform:translateY(-50%)}
.topbanner div.control .pager{width:auto;display:inline-block;vertical-align:middle}
.swiper-pagination-current{color:#003675}
.topbanner.active .open::after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.topbanner.active .group{visibility:visible;height:12.6rem}
.topbanner.active .close{visibility:visible;opacity:1}

@media (max-width:1280px){
  .topbanner .group{padding:0 1.6rem}
}
@media (max-width:1024px){
  .topbanner div.control .prev, 
  .topbanner div.control .next,
  .topbanner .close{width:3rem;height:3rem;margin-top:1.5rem}
  .topbanner div.control .prev, 
  .topbanner div.control .next{padding-top:2.8rem;background-size:1.8rem auto}
  .topbanner .close:before{background-size:1.2rem auto}

  .topbanner .close{right:1.6rem}
  .topbanner div.control .prev{right:8.4rem}
  .topbanner div.control .next{right:5rem}

  .topbanner div.control .ctrl{margin-top:1.5rem;right:12rem;height:3rem}
  .topbanner .close.oneday{right:1.6rem;margin-top:-2rem}
}
@media (max-width:768px){
  .topbanner .open{font-size:0}
  .topbanner.active .open::before{content:"\ef99"}
}
@media (max-width:680px){
  .topbanner.active{max-height:inherit;/* padding-bottom:4.5rem */}
  /* .topbanner:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4.5rem;background:#EDF1F5;z-index:0} */

  .topbanner div.control .prev, 
  .topbanner div.control .next, 
  .topbanner .close,
  .topbanner div.control .ctrl{z-index:1;margin-top:7rem}
  .topbanner .close.oneday{right:23rem;margin-top:0;margin-top:7rem}
  .topbanner.active .group{height:9.6rem}
}
@media (max-width:430px){
	.topbanner .group .list .detail{display:none}
}