/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-82291
* CODE : Dev - EV00020211 , Prod - EV00008031 
* FILE : /kr/event/2024/12/20_lg_coupon/eventMainLgCoupon.jsp
* DESC : 12월_엘라쇼_쿠폰혜택
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/12/13				김미선				Created
* 2025/01/14				김미선				1,2월 쿠폰 [BTOCSITE-84318]
************************************************************************************
**/

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

/* 4종 쿠폰팩 */
.coupon-container.coupon_4pack_open .coupon_01, /* 4종쿠폰팩 상단*/
.coupon-container.coupon_4pack_open .btn_fiveCp, /* 5종쿠폰팩 하단 */ 
.coupon-container.coupon_4pack_open .btn_welcome_ap,/* 가전 웰컴쿠폰 */
.coupon-container.coupon_4pack_open .btn_welcome_ex /* 소모품 웰컴쿠폰 */{
	display: block;
}
.coupon-container.coupon_4pack_open .coupon_02, /* 5종쿠폰팩 상단 */
.coupon-container.coupon_4pack_open .btn_welcome /* 가전+소모품 웰컴쿠폰 */ {
	display: none;
}
.coupon-container .btn_fiveCp,/* 5종쿠폰팩 하단 */
.coupon-container .btn_welcome_ap,/* 가전 웰컴쿠폰 */
.coupon-container .btn_welcome_ex /* 소모품 웰컴쿠폰 */ {
	display: none;
}

/* 5종 쿠폰팩 */
.coupon-container.coupon_5pack_open .btn_welcome_ap,/* 가전 웰컴쿠폰 */
.coupon-container.coupon_5pack_open .btn_welcome_ex /* 소모품 웰컴쿠폰 */{
	display: block;
}
.coupon-container.coupon_5pack_open .btn_wee,/* 엘라쇼 소모품 쿠폰 */
.coupon-container.coupon_5pack_open .btn_welcome /* 가전+소모품 쿠폰 */ {
	display: none;
}

/* 운영반영 소스 - 수정x */
.coupon-container .evt-func {
	position: relative;
}
.coupon-container .coupon_01 {
	display: none;
}
.coupon-container .coupon_02 {
	display: block;
}
/* 재구매 버튼 */
.coupon-container .btn_again {
	display: none;
}

.coupon-container .evt-acco-boon .evt-btn-area.evt-acco-head {
	padding-top: calc(30 / var(--width)* 100%);
	width: calc(150 / var(--width)* 100%);
	top: 0;
	left: calc(279 / var(--width)* 100%);
	transform: none;
}
.coupon-container .evt-acco-boon .evt-btn-area.evt-acco-head button {
	width: 100%;
}
.coupon-container .evt-btn-area-02 {
	width: calc(820 / var(--width) * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.coupon-container .evt-btn-area-02 .list_box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.coupon-container .evt-btn-area-02 .list_box a {
    width: calc(685 / var(--width)* 100%);
    padding-top: calc(77 / var(--width)* 100%);
}

.coupon-container .coupon_box {
	width: calc(860 / var(--width)* 100%);
	margin: 0 auto;
}

.coupon-container .coupon_box ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: -2%;
}

.coupon-container .coupon_box ul li {
	position: relative;
	width: calc(98% / 2);
	margin-top: 2%;
}
.coupon-container .coupon_box ul li.btn_wedding a {
	cursor: pointer;
}
.coupon-container .coupon-btn-All {
	position: absolute;
	top: 0;
	right: calc(78 / var(--width)* 100%);
    width: calc(157 / var(--width)* 100%);
    padding-bottom: calc(145 / var(--width)* 100%);
    margin-top: calc(104 / var(--width)* 100%);

}
.coupon-container .evt-acco-coupon .evt-acco-btn {
	width: 100%;
}
.coupon-container .evt-acco-coupon .evt-acco-cont .unfolded {
	padding: 0;
	margin: 0;
}
.coupon-container .evt-acco-coupon .evt-acco-head {
	top: 0;
    left: calc(70 / var(--width)* 100%);
    width: calc(276 / var(--width)* 100%);
    padding-top: calc(85 / var(--width)* 100%);
    margin-top: calc(-125 / var(--width)* 100%);
}
.coupon-container .evt-acco-coupon .evt-acco-head.on {
	left: auto;
    right: calc(10 / var(--width)* 100%);
    width: calc(120 / var(--width)* 100%);
    margin-top: calc(17 / var(--width)* 100%);
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	.coupon-container .evt-acco-boon .evt-btn-area.evt-acco-head {
		padding-top: calc(46 / var(--width)* 100%);
		width: calc(250 / var(--width)* 100%);
		top: 0;
		left: calc(60 / var(--width)* 100%);
	}
	.coupon-container .evt-btn-area-02 {
		width: 82%;
		bottom: 0;
	}
	.coupon-container .evt-btn-area-02 .list_box a {
		width: calc(355 / var(--width)* 100%);
    	padding-top: calc(90 / var(--width)* 100%);
	}

	.coupon-container .coupon_box {
		width: 92%;
	}
	.coupon-container .coupon_box ul {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}
	.coupon-container .coupon_box ul li {
		width: 100%;
		margin-top: calc(23 / var(--width)* 100%);
	}
	.coupon-container .coupon_box ul li:nth-child(2) {
		margin-top: calc(23 / var(--width)* 100%);
	}
	.coupon-container .coupon_box ul li:nth-child(odd) {
		margin-right: 0;
	}
	.coupon-container .coupon-btn-All {
		right: calc(28 / var(--width)* 100%);
		width: calc(100 / var(--width)* 100%);
		padding-bottom: calc(100 / var(--width)* 100%);
		margin-top: calc(50 / var(--width)* 100%);
	}
	.coupon-container .evt-acco-coupon .evt-acco-head {
		top: 0;
		left: calc(30 / var(--width)* 100%);
		width: calc(150 / var(--width)* 100%);
		padding-top: calc(50 / var(--width)* 100%);
		margin-top: calc(-76 / var(--width)* 100%);
	}
	.coupon-container .evt-acco-coupon .evt-acco-head.on {
		right: calc(10 / var(--width)* 100%);
		width: calc(80 / var(--width)* 100%);
		margin-top: calc(12 / var(--width)* 100%);
	}
}