/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-80826
* CODE : Dev - EV00020172 , Prod - EV00007982 
* FILE : /kr/event/2024/12/01_lg_coupon/eventMainLgCoupon.jsp
* DESC : 12월 통합 프로모션(쿠폰혜택)
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/11/21				김미선				Created
* 2024/12/03				김미선				쿠폰 2차 12/12-18 
************************************************************************************
**/

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

/* 앱쿠폰 영역 1차,2차 */
.coupon-container.coupon-open .coupon_box-img,
.coupon-container.coupon-open .coupon_wrap-01,
.coupon-container.coupon_box-app02 .coupon_wrap-02 {
	display:block;
}
.coupon-container .coupon_box-img, 
.coupon-container .coupon_wrap-01,
.coupon-container .coupon_wrap-02 { 
	display:none;
}

.coupon-container .coupon_box-txt {
	margin-bottom: calc(60 / var(--width) * 100%);
}
.coupon-container.coupon-open .coupon_box-txt,
.coupon-container.coupon_box-app02 .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(360 / 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;}

/* 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-btn {
    width: 100%;
    background: url(/kr/event/2024/12/01_lg_coupon/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/12/01_lg_coupon/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;
}

/* 2차 쿠폰 */
.coupon-container .coupon_wrap-02 .evt-acco-boon .evt-btn-area.evt-acco-head {
	padding-top: calc(30 / var(--width)* 100%);
    width: calc(150 / var(--width)* 100%);
    top: calc(30 / var(--width)* 100%);
    left: calc(279 / var(--width)* 100%);
	transform: none;
}

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

.coupon-container .coupon_wrap-02 .evt-func_02 {
	width: calc(865 / var(--width)* 100%);
	margin: 0 auto;
}

.coupon-container .coupon_wrap-02 .evt-func_02 ul {
	display: inline-block;width: 100%;
}

.coupon-container .coupon_wrap-02 .evt-func_02 ul li {
	position: relative;
	float: left;
	width: calc(676 / var(--width)* 100%);
	margin-bottom: calc(23 / var(--width)* 100%);
}

.coupon-container .coupon_wrap-02 .evt-func_02 ul li:nth-child(odd) {
	margin-right: calc(23 / var(--width)* 100%);
}
.coupon-container .coupon_wrap-02 .coupon-btn-All {
	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 .coupon_wrap-02 .evt-acco-coupon .evt-acco-btn {
	background: none;
	background-size: 0;
}
.coupon-container .coupon_wrap-02 .evt-acco-coupon .evt-acco-cont .unfolded {
	padding: 0;
	margin: 0;
}
.coupon-container .coupon_wrap-02 .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 .coupon_wrap-02 .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-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%);
	}

	/* 2차 쿠폰 */
	.coupon-container .coupon_wrap-02 .evt-acco-boon .evt-btn-area.evt-acco-head {
		padding-top: calc(35 / var(--width)* 100%);
		width: calc(250 / var(--width)* 100%);
		top: calc(48 / var(--width)* 100%);
		left: calc(60 / var(--width)* 100%);
	}
	.coupon-container .coupon_wrap-02 .evt-btn-area-02 {
		width: 82%;
		bottom: 0;
	}
	.coupon-container .coupon_wrap-02 .evt-btn-area-02 .list_box a {
		width: calc(355 / var(--width)* 100%);
    	padding-top: calc(90 / var(--width)* 100%);
	}

	.coupon-container .coupon_wrap-02 .evt-func_02 {
		width: 92%;
	}
	.coupon-container .coupon_wrap-02 .evt-func_02 ul {
		display: flex;
		flex-direction: column;
	}
	.coupon-container .coupon_wrap-02 .evt-func_02 ul li {
		float: left;
		width: 100%;
	}
	.coupon-container .coupon_wrap-02 .evt-func_02 ul li:nth-child(odd) {
		margin-right: 0;
	}
	.coupon-container .coupon_wrap-02 .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 .coupon_wrap-02 .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 .coupon_wrap-02 .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%);
	}
}