/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-77745
* CODE : Dev - EV00020091 , Prod - EV00007901 
* FILE : /kr/event/2024/11/01_lg_coupon3/eventMainLgCoupon.jsp
* DESC : 코세페-쿠폰(첫구매_재구매)
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/10/22				김미선				Created
* 2024/10/30				김미선				바닥페이지
* 2024/11/11				김미선				바닥페이지 수정(앱쿠폰 숨김)
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}

/* 앱쿠폰 영역 삭제 추가 */
.coupon-container.coupon-open .coupon_box-img {
	display:block;
}
.coupon-container .coupon_box-img { 
	display:none;
}
.coupon-container .coupon_box-txt {
	margin-bottom: calc(60 / var(--width) * 100%);
}
.coupon-container.coupon-open .coupon_box-txt {
	margin-bottom: 0;
}

.coupon-container .evt-func {
	position: relative;
}

.coupon-container .evt-func ul {
	width: calc(660 / var(--width) * 100%);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.coupon-container .evt-func ul li {
	position: relative;
	flex-grow: 1;
	justify-content: center;
	align-content : center;
	border: 2px solid #ececec;
	border-radius: 10px;
	box-shadow: 0px 5px 13px #ececec;
	margin-top: -5px;
	background-color: #fafafa;
	padding-top: calc(65 / var(--width) * 100%);
	padding-bottom: calc(65 / var(--width)* 100%);
	padding-left: calc(125 / var(--width)* 100%);
	padding-right: calc(65 / var(--width)* 100%);
}

.coupon-container .coupon-btn-All {
	position: absolute;
    right: calc(60 / var(--width)* 100%);
    top: 0;
    width: calc(130 / var(--width)* 100%);
    padding-bottom: calc(140 / var(--width)* 100%);
    margin-top: calc(56 / var(--width)* 100%);
	cursor: pointer;
}

.coupon-container .coupon-type-chk.coupon-btn-app,
.coupon-container .evt-btn-area.btn_app {
	position: absolute;
	top: 0;
	width: calc(265 / var(--width)* 100%);
	margin-top: calc(380 / var(--width)* 100%);
}
.coupon-container .coupon-type-chk.coupon-btn-app {
	padding-top: calc(54 / var(--width)* 100%);
	left: calc(420 / var(--width)* 100%);
}
.coupon-container .evt-btn-area.btn_app {
	padding-top: calc(54 / var(--width)* 100%);
	left: calc(700 / var(--width)* 100%);
}
.coupon-container .evt-btn-area.btn_app a {
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.coupon-container .evt-func ul li:nth-child(1) {z-index: 4; margin-top: 0;}
.coupon-container .evt-func ul li:nth-child(2) {z-index: 3;}
.coupon-container .evt-func ul li:nth-child(3) {z-index: 2;}
.coupon-container .evt-func ul li:nth-child(4) {z-index: 1;}
.coupon-container .evt-func ul li:nth-child(5) {z-index: 0;}
.coupon-container .evt-func ul li:nth-child(6) {z-index: -1;}

/* 쿠폰 혜택 확인 */
.coupon-container .evt-acco-boon .evt-btn-area.evt-acco-head {
    padding-top: calc(50 / var(--width)* 100%);
    width: calc(200 / var(--width)* 100%);
	top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.coupon-container .evt-acco-boon .evt-btn-area.evt-acco-head button {
    width: 100%;
}

/* 쿠폰별 유의사항 */
.coupon-container .evt-acco-coupon .evt-acco-head {
    top: 0;
    left: calc(414 / var(--width)* 100%);
    width: calc(242 / var(--width)* 100%);
    padding-top: calc(85 / var(--width)* 100%);
    margin-top: calc(-57 / var(--width)* 100%);
}
.coupon-container .evt-acco-coupon .evt-acco-head button {
    width: 100%;
    background: url(/kr/event/2024/11/01_lg_coupon3/images/icon_notice_off.jpg) no-repeat;
    background-size: 100% auto;
}

.coupon-container .evt-acco-coupon .evt-acco-btn.on {
	background: url(/kr/event/2024/11/01_lg_coupon3/images/icon_notice_on.jpg) no-repeat;
	background-size: 100% auto;
}

.coupon-container .evt-acco-coupon .evt-acco-cont .unfolded {
	padding-top: calc(60 / var(--width) * 100%);
	margin-left: calc(-40 / var(--width)* 100%);
	margin-right: calc(-10 / var(--width)* 100%);
}

.coupon-container .btn_again,
.coupon-container .btn_week {
	display:none;;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	.coupon-container .evt-func ul {
		width: calc(664 / var(--width)* 100%);
	}

	.coupon-container .evt-func ul li {
		margin-top: -4px;
		padding-top: calc(35 / var(--width)* 100%);
		padding-bottom: calc(35 / var(--width)* 100%);
		padding-left: calc(75 / var(--width)* 100%);
		padding-right: calc(35 / var(--width)* 100%);
	}

	.coupon-container .coupon-btn-All {
		right: calc(30 / var(--width)* 100%);
		width: calc(70 / var(--width)* 100%);
		padding-bottom: calc(70 / var(--width)* 100%);
		margin-top: calc(32 / var(--width)* 100%);
	}

	/* 쿠폰별 유의사항 */
	.coupon-container .evt-acco-coupon .evt-acco-head {
		left: calc(215 / var(--width)* 100%);
		width: calc(150 / var(--width)* 100%);
		padding-top: calc(45 / var(--width)* 100%);
		margin-top: calc(-30 / var(--width)* 100%);
	}

	.coupon-container .evt-acco-coupon .evt-acco-cont .unfolded {
		padding-top: calc(35 / var(--width) * 100%);
	}

	.coupon-container .coupon-type-chk.coupon-btn-app {
		left: calc(90 / var(--width)* 100%);
	}

	.coupon-container .evt-btn-area.btn_app {
		left: calc(365 / var(--width)* 100%);
	}
}