/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-90630
* CODE : Dev - EV00020561 , Prod - EV00008251 
* FILE : /kr/event/2025/04/01_lg_coupon/eventMainLgCoupon.jsp
* DESC : 4월 통합프로모션 쿠폰혜택
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/03/24				신우용				Created
************************************************************************************
**/


/* 이벤트 기본 설정 */
.coupon-container * {
	--width: 1380;
}
.coupon-container {
	max-width: 1380px;
  	width: 100%;
	margin: 0 auto;
    padding: 0 0 60px;
	background-color: #f3f1ed;
}
.coupon-container .evt-func {
	position: relative;
}

.coupon-container .evt-btn-area.coupon-download {
	top: 0;
	padding-top: calc(54 / var(--width)* 100%);
}
.coupon-container .evt-btn-area.coupon-download a {
    width: calc(330 / var(--width)* 100%);
    margin: 0 calc(10 / var(--width)* 100%);
}

.coupon-container .coupon-pack-list {
	padding: calc(60 / var(--width)* 100%) 0;
}
.coupon-container .coupon-pack-list .swiper-container{
	max-width: 1000px;
	width: calc(1000 / var(--width)* 100%);
}
.coupon-container .coupon-pack-list .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(3, minmax(calc((100% - 60px) / 3), auto)););
	gap: 24px;
}
.coupon-container .coupon-pack-list .swiper-slide{
	background: transparent;
}

.coupon-container .coupon-down-list {
	padding: calc(60 / var(--width)* 100%) 0;
  	filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.04));
}
.coupon-container .coupon-down-list .swiper-container{
	max-width: 1000px;
	width: calc(1000 / var(--width)* 100%);
}
.coupon-container .coupon-down-list .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(calc((100% - 60px) / 2), auto)););
	gap: 24px;
}
.coupon-container .coupon-down-list .swiper-slide{
    background: transparent;
}
.coupon-container .coupon-down-list #authCertButton {
	cursor: pointer;
}

.coupon-container .coupon-pack-list .swiper-pagination,
.coupon-container .coupon-down-list .swiper-pagination {
	display: none;
}

.coupon-container .evt-btn-area.evt-acco-head {
	padding-top: calc(25 / var(--width)* 100%);
	width: calc(240 / var(--width)* 100%);
	top: 0;
	left: calc(190 / var(--width)* 100%);
}
.coupon-container .evt-btn-area.evt-acco-head button {
	width: 100%;
}

@media screen and (max-width: 767px){
    .coupon-container * {
		--width: 720;
	}
	
	.coupon-container {
	    padding: 0 0 8.4vw;
	}
	.coupon-container .evt-btn-area.coupon-download {
		padding-top: calc(84 / var(--width)* 100%);
	}
	.coupon-container .evt-btn-area.coupon-download a {
		width: calc(300 / var(--width)* 100%);
	}

	.coupon-container .coupon-pack-list,
	.coupon-container .coupon-down-list {
		position: relative;
		padding: calc(48/var(--width)*100vw) 0;
      	filter: none;
	}
	.coupon-container .coupon-pack-list .swiper-container,
	.coupon-container .coupon-down-list .swiper-container{
		width: 100%;
		padding: 0 calc(48 /var(--width)*100vw);
	}
	.coupon-container .coupon-pack-list .swiper-wrapper,
	.coupon-container .coupon-down-list .swiper-wrapper{
		display: flex;
		gap: 0;
	}
	
	.coupon-container .coupon-pack-list .swiper-slide,
    .coupon-container .coupon-down-list .swiper-slide{
		width: calc(460 / var(--width)*100vw);
        margin-left: calc(24 / var(--width)*100vw);
	}
	.coupon-container .coupon-pack-list .swiper-slide:first-child,
    .coupon-container .coupon-down-list .swiper-slide:first-child{
		margin-left: 0;
	}
  
	.coupon-container .coupon-down-list .swiper-slide {
		width: calc(574 / var(--width)*100vw);
	}

	.coupon-container .coupon-down-list .swiper-pagination-bullets,
	.coupon-container .coupon-pack-list .swiper-pagination-bullets {
		position: static;
		display: flex;
		margin-top: calc(48 / var(--width)* 100vw);
		justify-content: center;
	}
	
	.coupon-container .coupon-down-list .swiper-pagination-bullets .swiper-pagination-bullet,
	.coupon-container .coupon-pack-list .swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 calc(8 / var(--width)* 100vw);
		background: #D3D3D3;
		border-radius: 50%;
		width: calc(14 / var(--width)* 100vw);
		height: calc(14 / var(--width)* 100vw);
		opacity: 1;
		transition: all .3s ease-in-out;
	}
	.coupon-container .coupon-down-list .swiper-pagination-bullets .swiper-pagination-bullet-active,
	.coupon-container .coupon-pack-list .swiper-pagination-bullets .swiper-pagination-bullet-active {
		background: #18181D;
		width: calc(30 / var(--width)* 100vw);
		border-radius: calc(14 / var(--width)* 100vw);
	}

	.coupon-container .evt-btn-area.evt-acco-head {
		left: calc(48 / var(--width)* 100%);
		width: calc(280 / var(--width)* 100%);
		padding-top: calc(35 / var(--width)* 100%);
	}
}