/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-52674
* CODE : Dev - EV00018891 , Prod - EV00006743
* FILE : /kr/event/2023/12/22_miracle_lucky/css/event.css
* DESC : 미리 만나는 2024 미라클 행운의 복권 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/12/01				정규진			    Created
* 2023/12/06				정규진			    이벤트 참여팝업2
************************************************************************************
**/
/* 이벤트 기본 설정 */
.mdevice {
    --width: 720;
    }
.evt-func {
    position: relative;
}

/* 참여팝업 */
#agreeLuckyCoupon1_f table tbody tr td {
	font-weight: bold;
}
#agree1_f table tbody tr td:last-child,
#agreeLuckyCoupon1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
/* 스크래치 당첨 팝업 */
#couponCheckPop{
	max-width: 320px;
    height: 413px;
    border-radius: 0;
	background-image: url('/kr/event/2023/12/22_miracle_lucky/images/layer_scratch_before.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	background-color: transparent;
}
#couponCheckPop.selection{
	background-image: url('/kr/event/2023/12/22_miracle_lucky/images/layer_scratch_after.png');
}

#couponCheckPop .pop-conts.no-footer{
	max-height:100%;
	height: 100%;
}
#bgCoupon{
	display:none;
	width: 216px;
    height: 134px;
}
.bg-coupon{
	width: 265px;
    height: 293px;
	margin: 120px auto 0;
	background: url('/kr/event/2023/12/22_miracle_lucky/images/coupon.png') no-repeat center top;
	background-size:100% auto;
}
.gift-product{
	position: relative;
	width: 100%;
	height: 170px;
}    
.gift-img, #scratch {
	position: absolute;
	cursor: grabbing;
}
.gift-img {
	display:none;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	border-radius: 14px;
}

#scratch {
	top: 50%;
	left: 50%;
	width: 216px;
    height: 134px;
	transform: translate(-50%, -50%);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
.bottom-draw{
	display:none;
	position: absolute;
    bottom: 22px;
    left: 0;
    width: 100%;
    height: 62px;
}

.bottom-draw .btn-group{
	height: 100%;
}

.bottom-draw .btn-group > button {
	width: 100%;
    height: 100%;
}
.miracle-container .evt-btn-area.join-group{
	bottom: 0;
	margin-bottom: calc(90 / 1380 * 100%);
	padding-bottom: calc(105 / 1380 * 100%);
}
.miracle-container .evt-btn-area.join-group a{
	width: calc(305 / 1380 * 100%);
    margin: 0 calc(5 / 1380 * 100%);
}

@media screen and (max-width: 767px){
    /* 참여팝업 */
	#agree1_f table tbody tr td:last-child,
	#agreeLuckyCoupon1_f table tbody tr td:last-child {
        font-size:16px;
        line-height:24px;
    }
    /* 스크래치 당첨 팝업 */
	#couponCheckPop{
		max-width: calc(640 / 720 * 100%);
		height: 114.6vw;
	}
	#bgCoupon{
		width: calc(565 / 720 * 100%);
    	height: calc(555 / 720 * 100%);
	}
	.bg-coupon{
		width: calc(596 / 720 * 100%);
		height: calc(532 / 720 * 100%);
		margin: calc(240 / 720 * 100%) auto 0;
	}
	.gift-img {
		width: 100%;
	}
	.gift-product{
		height: calc(400 / 720 * 100%);
	}

	#scratch {
		width: calc(575 / 720 * 100%);
    	height: calc(560 / 720 * 100%);
	}
	.bottom-draw{
		height: calc(110 / 720 * 100%);
	}

	.miracle-container .evt-btn-area.join-group{
		margin-bottom: calc(80 / 720 * 100%);
		padding-bottom: calc(105 / 720 * 100%);
	}
	.miracle-container .evt-btn-area.join-group a{
		width: calc(305 / 720 * 100%);
		margin: 0 calc(5 / 720 * 100%);
	}
}