/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-96423
* CODE : Dev - EV00020781 , Prod - EV00008441
* FILE : kr/event/2025/07/01_water_purifiers_sns/eventMainWaterPurifiersSns.jsp
* DESC : LGE.COM 얼음정수기 - SNS인증이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/06/18				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
    --width: 1380;
}
.evt-func {
    position: relative;
}
.quiz-container {
    background-color: #f8f7f5;
}

.quiz-container #myHashPurifiers{
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    z-index: -1;
}

/* 참여팝업 */
#agree2_f .gray_box {
    padding: 24px;
    border-radius: 8px;
    background-color: #f4f4f4;
    font-size: 16px;
    line-height: 26px;
}
#agree2_f .gray_box ul {
    padding: 20px 0;
}
#agree2_f .gray_box ul li {
    position: relative;
    padding-left: 20px;
}
#agree2_f .gray_box ul li::before {
    content:'■';
    display:inline-block;
    position: absolute;
    top: 0;
    left: 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;
}

.quiz-container .evt-prd-list{
	display: flex;
    width: calc(1000 / var(--width) * 100%);
    margin: 0 auto;
    gap: calc(32 / var(--width) * 100%);
}
.quiz-container .evt-prd-list > *{
	flex: 1;
}

.quiz-container .evt-acco-head.evt-btn-area{
	top: 0;
	padding-top: calc(30 / var(--width)* 100%);
}
.quiz-container .evt-acco-head.evt-btn-area button{
	width: calc(850 / var(--width) * 100%);
}

.quiz-container .evt-hash-area{
	bottom: 0;
	margin-bottom: calc(1870 / var(--width)* 100%);
	padding-bottom: calc(70 / var(--width)* 100%);
}
.quiz-container .evt-hash-area > div{
	padding-left: calc(65 / var(--width) * 100%);
}
.quiz-container .evt-hash-area button{
	width: calc(420 / var(--width)* 100%);
}

.quiz-container .evt-btn-area.purifiers-join{
	bottom: 0;
	margin-bottom: calc(378 / var(--width) * 100%);
    padding-bottom: calc(70 / var(--width) * 100%);
}
.quiz-container .evt-btn-area.purifiers-join > div{
	padding-left: calc(65 / var(--width) * 100%);
}
.quiz-container .evt-btn-area.purifiers-join a{
	width: calc(420 / var(--width)* 100%);
}

@media screen and (max-width: 767px){
    * {
        --width: 720;
    }
    
	/* 참여팝업 */
    #agree2_f .gray_box {
        font-size: 14px;
        line-height: 22px;
    }

    .quiz-container .evt-prd-list{
		overflow-x: auto;
		position: relative;
        width: 100%;
		padding: 0 6.6667vw;
		gap: 4.4vw;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE and Edge */
	}
	.quiz-container .evt-prd-list::-webkit-scrollbar{
		display: none;
	}
	.quiz-container .evt-prd-list > *{
		flex: none;
		width: 63.8889vw;
	}

    .quiz-container .evt-acco-head.evt-btn-area{
        padding-top: calc(30 / var(--width)* 100%);
    }
    .quiz-container .evt-acco-head.evt-btn-area button{
        width: calc(624 / var(--width) * 100%);
    }
    
    .quiz-container .evt-hash-area{
        margin-bottom: calc(2234 / var(--width) * 100%);
        padding-bottom: calc(70 / var(--width) * 100%);
    }
    .quiz-container .evt-hash-area button{
        width: calc(610 / var(--width) * 100%);
    }
    
    .quiz-container .evt-btn-area.purifiers-join{
        margin-bottom: calc(580 / var(--width) * 100%);
        padding-bottom: calc(70 / var(--width) * 100%);
    }
    .quiz-container .evt-btn-area.purifiers-join a{
        width: calc(610 / var(--width) * 100%);
    }
}