/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-112008
* CODE     : Dev - EV00021122 , Prod - EV00008812
* FILE     : /kr/event/2026/01/15_whisen_sns/eventMainWhisenSns.jsp
* DESC     : 26년 휘센 미리구매 페스티벌(01/15-03/31) : 포토리뷰 SNS
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/12/15				신우용				Created
************************************************************************************
**/

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

.shots-container {
	display: flex;
	width: calc(1146/1380 * 100%);
	margin: 0 auto;
	flex-direction: column;
	row-gap: 30px;
}

.short-event .shots-container {
	width: 100%;
}
                
.shots-container * {
	font-family: 'Pretendard', sans-serif;
}

.shots-container .evt-hash-area {
	bottom: 35.4%;
	left: 14.35%;
	width: 24.45%;
	height: 11.4%;
}

.shots-container .evt-hash-area button {
	width: 100%;
}

.shots-container #joinBtnB {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 24.8%;
	height: 11.4%;
	transform: translateX(-50%);
}

.shots-container .gift-area {
	padding-top: calc(24/1380 * 100%);
}

.shots-container .gift-area::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-image: url('/kr/event/2026/01/15_whisen_sns/images/img_divider.png');
	background-size: auto 1px;
	background-position: center top;
	background-repeat: repeat-x;
}

.shots-container .evt-acco-area {
    text-align: center;
}

/* 참여팝업 */
#agree2_f .gray_box {
	padding: 24px;
	border-radius: 8px;
	background-color: #f7f7f7;
	font-size: 16px;
	line-height: 26px;
}

#agree2_f .gray_box ul {
	padding: 20px 0;
}

#agree2_f .gray_box ul li {
	position: relative;
	padding-left: 16px;
}

#agree2_f .gray_box ul li::before {
	display: inline-block;
	position: absolute;
	width: 10px;
	height: 10px;
	top: 8px;
	left: 0;
	border-radius: 0;
	margin: 0;
}

#agree2_f .gray_box ul li .list_box p {
	position: relative;
	padding-left: 11px;
	word-break: keep-all;
}

#agree2_f .gray_box ul li .list_box p::before {
	content: ' ';
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-top: 11px;
	margin-left: -11px;
	margin-right: 6px;
	border-radius: 50%;
	background: #000;
	vertical-align: top;
}

@media screen and (max-width: 767px) {
	* {
		--width: 720;
	}

	.shots-container {
		width: 100%;
		row-gap: calc(30 / 390 * 100vw);
	}

	.shots-container .evt-hash-area {
		bottom: calc(241 / 390 * 100vw);
		left: 50%;
		width: calc(300 / 390 * 100vw);
		height: calc(48 / 390 * 100vw);
		transform: translateX(-50%);
	}

	.shots-container #joinBtnB {
		bottom: calc(117 / 390 * 100vw);
		width: calc(330 / 390 * 100vw);
		height: calc(48 / 390 * 100vw);
	}

	.shots-container .gift-area {
		padding-top: calc(24 / 390 * 100vw);
	}

	.shots-container .gift-area::before {
		left: 50%;
		width: calc(350 / 390 * 100vw);
		transform: translateX(-50%);
	}

	.shots-container .evt-acco-area {
		width: calc(350 / 390 * 100vw);
		margin: 0 auto;
	}

	/* 참여팝업 */
	#agree2_f .gray_box {
		font-size: 14px;
		line-height: 22px;
	}
	#agree2_f .gray_box ul li::before {
        top: 6px;
    }
}