/**
************************************************************************************
* 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 .daily02 .evt-hash-area{
	bottom: 39.4%;
    left: 69.35%;
    width: 24.45%;
    height: 10.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 .daily02 #joinBtnB{
	bottom: 20.4%;
	left: 74.2%;
	width: 24.45%;
	height: 10.1%;
	transform: none;
}

.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: #f4f4f4;
	font-size: 16px;
	line-height: 26px;
}

#agree2_f .gray_box > ul {
	margin: 0;
	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;
	top: 8px;
	left: 0;
	width: 10px;
	height: 10px;
	margin: 0;
	border-radius: 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;
}

#agree2_f .list-number{
	margin: 20px 0;
    counter-reset:list-number;
}
#agree2_f .list-number li{
	font-size: 14px;
    counter-increment:list-number;
}
#agree2_f .list-number li:before{
    content:counter(list-number)'.';
    margin-right:5px;
}
#agree2_f .list-number li + li{
	margin-top: 5px;
}
#agree2_f .gray_box > ul > li .list-number{
	margin: 5px 0;
}

@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 .daily02 .evt-hash-area{
        bottom: calc(260 / 390 * 100vw);
        left: 50%;
        width: calc(300 / 390 * 100vw);
        height: calc(48 / 390 * 100vw);
    }

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

	.shots-container .daily02 #joinBtnB{
        bottom: calc(136 / 390 * 100vw);
        left: 50%;
        width: calc(330 / 390 * 100vw);
        height: calc(48 / 390 * 100vw);
        transform: translateX(-50%);
    }

	.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;
    }

    #agree2_f .list-number li{
        font-size: 13px;
        line-height: 21px;
    }
}