/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-92913
* CODE : Dev - EV00020671 , Prod - EV00008342 
* FILE : /kr/event/2025/05/12_lucky_coupon/eventMainLuckyCoupon.jsp
* DESC : 5월 통합 프로모션 럭키지
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/04/18				김기범				Created
************************************************************************************
**/
.luckyG-containers {
  --width: 1380;
  margin: 0 auto;
}
.luckyG-func {
  position: relative;
  background: #F3F1ED;
  padding-bottom: 160px;
}
.benefit {
  max-width: 1000px;
  margin: calc(80 / 1380 * 100%) calc(140 / 1000 * 100%);
}
.benefit:nth-of-type(2) {
  margin-top: 0;
}
.benefit:nth-of-type(3) {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 40px;
}
/* 혜택1 */
.lucky-coupon-wrap {
  position: relative;
}
.coupon-container {
  display: none;
  position: relative;
  width: 100%;
}
.coupon-container.active {
  display: flex;
}
.coupon-container.expired {
  /* opacity: 0.5;
  filter: grayscale(50%); */
}
.luckyG-coupon-down-area {
  position: absolute;
  display: flex;
  bottom: 0;
  width: calc(980 / 1380 * 100%);
  height: calc(660 / 1380 * 100%);
}
.luckyG-coupon-down-area .left {
  width: calc(680 / 1380 * 100%);
}
.luckyG-coupon-down-area .right {
  width: calc(270 / 1380 * 100%);
}
.luckyG-coupon-down-area .right a {
  display: block;
  height: 100%;
}
.timer {
  position: absolute;
  color: #dc2626;
  font-weight: 700;
  letter-spacing: 0.05em;
  top: calc(175 / 1380 * 100%);
  left: calc(62 / 1380 * 100%);
  width: calc(428 / 1380 * 100%);
  height: calc(320 / 1380 * 100%)
}
.timer span {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: clamp(12px, 1.5vw, 22px);
}

/* 혜택2 + 혜택3 */
.luckyG-containers .coupon-pack-list,
.luckyG-containers .coupon-down-list {
  position: relative;
}
.luckyG-containers .coupon-pack-list .swiper-container,
.luckyG-containers .coupon-down-list .swiper-container{
  padding-bottom: 46px;
}
.luckyG-containers .coupon-pack-list .swiper-slide{
  width: calc(460 / 1380 * 100%);
  border-radius: 24px;
}
.luckyG-containers .coupon-down-list .swiper-slide{
  width: 100%;
  border-radius: 24px;
}
.luckyG-containers .coupon-down-list .swiper-slide:last-child img {
  /* height: 194px; */
} 
.luckyG-containers .coupon-down-list .swiper-pagination-bullets,
.luckyG-containers .coupon-pack-list .swiper-pagination-bullets {
  display: flex;
  justify-content: center;
  width: 100%;
  bottom: 0;
}
.luckyG-containers .coupon-down-list .swiper-pagination-bullets .swiper-pagination-bullet,
.luckyG-containers .coupon-pack-list .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 calc(8 / 1380 * 100%);
  background: #D3D3D3;
  width: calc(15 / 1380 * 100%);
  height: 14px;
  opacity: 1;
  transition: all .3s ease-in-out;
}
.luckyG-containers .coupon-down-list .swiper-pagination-bullets .swiper-pagination-bullet-active,
.luckyG-containers .coupon-pack-list .swiper-pagination-bullets .swiper-pagination-bullet-active {
  width: calc(40 / 1380 * 100%);
  height: 14px;
  border-radius: 10px;
  background: #18181D;
}
.luckyG-containers .btn-down-area {
  position: relative;
}
.luckyG-containers .evt-btn-area.coupon-download {
	display: flex;
  justify-content: space-between;
  top: 0;
  left: calc(220 / 1380 * 100%);
  width: calc(940 / 1380 * 100%);
  height: 100%;
}
.luckyG-containers .evt-btn-area.coupon-download a {
  width: calc(671 / 1380 * 100%);
  height: 100%;
}
/* 혜택3 슬라이드 */
.luckyG-containers .coupon-down-list {
  position: relative;
  margin-top: 48px;
}
.luckyG-containers .coupon-down-list .coupon_down_wrap {
  width: 100%;
  height: 100%;
}
.luckyG-containers .coupon-down-list .coupon_down_wrap .swiper-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.luckyG-containers .coupon-down-list .coupon_down_wrap li {
  display: flex;
  justify-content: end;
}
.luckyG-containers .coupon-down-list .coupon_down_wrap li a {
  width: 100%;
  z-index: 99;
  cursor: pointer;
}
.luckyG-containers .coupon-down-list .swiper-slide a {
  /* position: absolute;
  top: 0;
  right: 0;
  width: calc(194 / 1380 * 100%);
  height: 100%; */
}
/* 아코디언 */
.luckyG-containers .evt-acco-area {
  margin: 0 auto;
  margin-top: 48px
}
.luckyG-containers .evt-acco-head.evt-btn-area {
  padding-top: calc(41 / 1380 * 100%);
}
.luckyG-containers .evt-acco-head.evt-btn-area button {
  width: 100%;
}

/* tab2 */
.sec2 {
  height: 100%;
}
.timer2 span {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: clamp(12px, 2.89vw, 26px)
}

@media screen and (max-width: 767px){
  .luckyG-func {
    padding-bottom: 70px;
    background: #F3F1ED;
  }
  .luckyG-containers {
    --width: 720;
  }
  .luckyG-containers {
    max-width: 720px;
    margin: 0 auto;
  }
  .benefit {
    max-width: 624px;
    margin: 0 calc(48 / 720 * 100%);
    margin-top: 40px;
  }
  .benefit:nth-of-type(2) {
    margin-top: 0;
  }
  .benefit:nth-of-type(3) {
    display: flex;
    flex-direction: column;
    gap: 35px;
  }
  /* 혜택1 */
  .lucky-coupon-wrap {
    position: relative;
  }
  .coupon-container {
    display: none;
    position: relative;
    width: 100%;
  }
  .coupon-container.active {
    display: flex;
  }
  .coupon-container.expired {
    /* opacity: 0.5;
    filter: grayscale(50%); */
  }
  .luckyG-coupon-down-area {
    position: absolute;
    display: flex;
    bottom: 0;
    width: 100%;
    height: calc(350 / 720 * 100%);
  }
  .luckyG-coupon-down-area .left {
    width: calc(550 / 720 * 100%);
  }
  .luckyG-coupon-down-area .right {
    width: calc(170 / 720 * 100%);
  }
  .luckyG-coupon-down-area .right a {
    display: block;
    height: 100%;
  }
  .timer {
    position: absolute;
    color: #dc2626;
    font-weight: 700;
    letter-spacing: 0.05em;
    top: calc(95 / 720 * 100%);
    left: calc(35 / 720 * 100%);
    width: calc(325 / 720 * 100%);
    height: calc(139 / 720 * 100%);
  }
  .timer span {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 1.4vw, 28px);
  }
  
  /* 혜택2 + 혜택3 */
  .luckyG-containers .coupon-pack-list,
  .luckyG-containers .coupon-down-list {
    position: relative;
  }
  .luckyG-containers .coupon-pack-list .swiper-container,
  .luckyG-containers .coupon-down-list .swiper-container{
    padding-bottom: 35px;
    cursor: pointer;
  }
  .luckyG-containers .coupon-pack-list .swiper-slide{
    width: calc(560 / 720 * 100%);
    border-radius: 24px;
  }
  .luckyG-containers .coupon-down-list .coupon_down_wrap .swiper-wrapper {
    display: flex;
    gap: 0;
  }
  .luckyG-containers .coupon-down-list .swiper-slide{
    width: calc(663 / 720 * 100%);
    height: 100%;
    border-radius: 24px;
  }
  .luckyG-containers .coupon-down-list .swiper-slide:last-child img {
    height: 100%;
  } 
  .luckyG-containers .coupon-down-list .swiper-pagination-bullets,
  .luckyG-containers .coupon-pack-list .swiper-pagination-bullets {
    display: flex;
    justify-content: center;
    width: 100%;
    bottom: 0;
  }
  .luckyG-containers .coupon-down-list .swiper-pagination-bullets .swiper-pagination-bullet,
  .luckyG-containers .coupon-pack-list .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 calc(8 / 720 * 100%);
    background: #D3D3D3;
    width: calc(31 / 720 * 100%);
    height: 14px;
    opacity: 1;
    transition: all .3s ease-in-out;
  }
  .luckyG-containers .coupon-down-list .swiper-pagination-bullets .swiper-pagination-bullet-active,
  .luckyG-containers .coupon-pack-list .swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: calc(70 / 720 * 100%);
    height: 14px;
    border-radius: 10px;
    background: #18181D;
  }
  .luckyG-containers .btn-down-area {
    position: relative;
  }
  .luckyG-containers .evt-btn-area.coupon-download {
    display: flex;
    justify-content: space-between;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .luckyG-containers .evt-btn-area.coupon-download a {
    width: calc(351 / 720 * 100%);
    height: 100%;
  }
  /* 혜택3 슬라이드 */
  .luckyG-containers .coupon-down-list {
    margin-top: 35px;
  }
  .luckyG-containers .coupon-down-list .swiper-slide a {
    width: calc(194 / 720 * 100%);
    height: 100%;
  }
  /* 아코디언 */
  .luckyG-containers .evt-acco-area {
    max-width: 624px;
    margin: 0 auto;
    margin-top: 48px
  }
  .luckyG-containers .evt-acco-head.evt-btn-area {
    padding-top: calc(41 / 720 * 100%);
  }
  .luckyG-containers .evt-acco-head.evt-btn-area button {
    width: 100%;
  }
  
  /* tab2 */
  .sec2 {
    height: 100%;
  }
  .timer2 span {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: clamp(12px, 2.89vw, 26px)
  }
}