/**
************************************************************************************
* CSR       : https://lgecom.atlassian.net/browse/CSR-1668 
* CODE(sub) : Dev - EV00021441 , Prod - EV00009073
* CODE(test): Dev - EV00021431 , Prod - EV00009072
* FILE      : /kr/event/2026/06/09_gram_week_evt/css/event.css
* DESC      : 그램위크 사은품 신청 이벤트
* PROJ      : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2026/05/12				김기범				Created
************************************************************************************
**/

/* 그램위크 혜택 영역 */
.gramWeekBenefit {
	position: relative;
	padding: var(--evt-size-40) var(--evt-size-20) calc(2 * var(--evt-size-32));
}
.gramWeekBenefit__img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
}
.gramWeekBenefit img.gramWeekBenefit__img--unfolded,
.gramWeekBenefit img.gramWeekBenefit__img--unfolded[hidden] {
	display: none;
}
.gramWeekBenefit.is-expanded img.gramWeekBenefit__img--folded {
	display: none;
}
.gramWeekBenefit.is-expanded img.gramWeekBenefit__img--unfolded {
	display: block;
}
.gramWeekBenefit .gramWeekBtnToggle,
.gramWeekBenefit .gramWeekBtn01,
.gramWeekBenefit .gramWeekBtn02,
.gramWeekBenefit .gramWeekBtn03 {
	position: absolute;
}
.gramWeekBenefit .gramWeekBtnToggle {
	left: calc(67 / 700 * 100%);
	width: calc(75 / 700 * 100%);
	height: calc(35 / 1204 * 100%);
	bottom: calc(270 / 1204 * 100%);
}
.gramWeekBenefit.is-expanded .gramWeekBtnToggle {
	width: calc(45 / 700 * 100%);
	height: calc(35 / 1542 * 100%);
	bottom: calc(279 / 1542 * 100%);
	left: calc(73 / 700 * 100%);
}
.gramWeekBenefit .gramWeekBtnWrap {
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: calc(77 / 700 * 100%);
	bottom: calc(135 / 1204 * 100%);
	height: calc(76 / 1204 * 100%);
	width: calc(546 / 700 * 100%);
}
.gramWeekBenefit.is-expanded .gramWeekBtnWrap {
	bottom: calc(171 / 1542 * 100%);
	height: calc(80 / 1542 * 100%);
}
.gramWeekBenefit .gramWeekBtn01,
.gramWeekBenefit .gramWeekBtn02 {
	position: static;
	width: calc(300 / 620 * 100%);
	height: 100%;
}
.gramWeekBenefit .gramWeekBtn03 {
	/* display: none; */
	left: calc(79 / 700 * 100%);
	width: calc(125 / 700 * 100%);
	height: calc(43 / 1542 * 100%);
	bottom: calc(372 / 1542 * 100%);
}
.gramWeekBenefit.is-expanded .gramWeekBtn03 {
	display: block;
}

/* 그램 슬라이드 */
.gram-slide {
	padding-bottom: calc(2 * var(--evt-size-22));
	background: #F4F4F4;
}
.gram-slide .swiper-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
}
.gram-slide .swiper-slide {
	width: 100%;
	background: #F4F4F4;
}
.gram-slide .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
}
.gram-slide .c-swiper__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--evt-size-6);
	padding: var(--evt-size-20) 0;
}
.gram-slide .c-swiper__play-and-stop-button {
	display: flex;
	width: var(--evt-size-18);
	height: var(--evt-size-18);
	cursor: pointer;
	background-color: #fff;
	border: 0;
	border-radius: 100px;
	align-items: center;
	justify-content: center;
}
.gram-slide .c-swiper__play-and-stop-button[aria-pressed="false"]::before {
	content: "";
	box-sizing: border-box;
	width: var(--evt-size-6);
	height: var(--evt-size-6);
	border-right: var(--evt-size-2) solid #000;
	border-left: var(--evt-size-2) solid #000;
}
.gram-slide .c-swiper__play-and-stop-button[aria-pressed="true"]::before {
	content: "";
	border-top: var(--evt-size-3) solid transparent;
	border-bottom: var(--evt-size-3) solid transparent;
	border-left: var(--evt-size-6) solid #000;
}
.gram-slide .swiper-pagination-bullets {
	position: relative;
	bottom: auto;
	display: flex;
	justify-content: center;
	gap: var(--evt-size-2);
	width: auto;
}
.gram-slide .swiper-pagination-bullet {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--evt-size-18);
	height: var(--evt-size-18);
	margin: 0;
	background-color: transparent;
	opacity: 1;
	cursor: pointer;
}
.gram-slide .swiper-pagination-bullet::after {
	content: "";
	display: block;
	width: var(--evt-size-5);
	height: var(--evt-size-5);
	background-color: #777;
	border-radius: 100px;
}
.gram-slide .swiper-pagination-bullet-active::after {
	content: "";
	display: block;
	width: var(--evt-size-10);
	height: var(--evt-size-10);
	background-color: transparent;
	border: calc(1.5 * var(--evt-size-unit)) solid #000;
}

#confirmPopup input[type="text"]::selection {
	background-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#confirmPopup input[type="text"]:focus {
	outline: none;
}

/* 참여내역 팝업 임시 변환 */
/* 팝업은 container 외부에 있어 evt-size 변수 스코프를 별도 지정 */
#confirmPopup,
#confirmPopup * {
	--evt-max-width: 780px;
	--evt-design-width: 390;
	--evt-responsive-width: min(100vw, var(--evt-max-width));
	--evt-ratio: calc(var(--evt-responsive-width) / var(--evt-design-width));
	--evt-size-unit: var(--evt-ratio);
	/* --evt-size-2: calc(2 * var(--evt-size-unit));
	--evt-size-8: calc(8 * var(--evt-size-unit));
	--evt-size-12: calc(12 * var(--evt-size-unit));
	--evt-size-18: calc(18 * var(--evt-size-unit));
	--evt-size-24: calc(24 * var(--evt-size-unit)); */
}
#confirmPopup table {
	border-spacing: 0 var(--evt-size-2);
	border-collapse: separate;
}
#confirmPopup colgroup,
#confirmPopup thead {
	display: none;
}
#confirmPopup td {
	position: relative;
	display: block;
	border-left: 0;
	padding: calc(6 * var(--evt-size-unit)) calc(24 * var(--evt-size-unit)) calc(6 * var(--evt-size-unit)) calc(140 * var(--evt-size-unit));
}
#confirmPopup td:first-child {
	border-top: 0.1em solid #908f8f;
	border-right: 0;
}
#confirmPopup td:last-child {
	border-bottom: 0.1em solid #908f8f;
	line-height: calc(12 * var(--evt-size-unit));
}
#confirmPopup td:before {
	content: '모델명';
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(130 * var(--evt-size-unit));
	height: 100%;
	align-items: center;
	justify-content: center;
	background-color: #f4f4f4;
	z-index: 1;
}
#confirmPopup td:nth-child(2):before {
	content: '제조번호(S/N)';
}
#confirmPopup td:nth-child(3):before {
	content: '참여일';
}
#confirmPopup td:nth-child(4):before {
	content: '수령정보';
}

@media screen and (max-width: 767px) {
	#confirmPopup colgroup,
	#confirmPopup thead {
		display: none;
	}
	#confirmPopup td {
		position: relative;
		display: block;
		border-left: 0;
		padding: calc(4 * var(--evt-size-unit)) calc(24 * var(--evt-size-unit)) calc(4 * var(--evt-size-unit)) calc(140 * var(--evt-size-unit));
	}
	#confirmPopup td:first-child {
		border-top: 0.1em solid #908f8f;
		border-right: 0;
	}
	#confirmPopup td:last-child {
		border-bottom: 0.1em solid #908f8f;
		line-height: calc(16 * var(--evt-size-unit));
	}
	#confirmPopup td:before {
		content: '모델명';
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		width: calc(130 * var(--evt-size-unit));
		height: 100%;
		align-items: center;
		justify-content: center;
		background-color: #f4f4f4;
		z-index: 1;
	}
	#confirmPopup td:nth-child(2):before {
		content: '제조번호(S/N)';
	}
	#confirmPopup td:nth-child(3):before {
		content: '참여일';
	}
	#confirmPopup td:nth-child(4):before {
		content: '수령 정보';
	}
}