/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-47112
* CODE : Dev - EV00018621 , Prod - EV00006451
* FILE : /kr/event/2023/10/04_lg_october/eventMainLgOctober.jsp
* DESC : LGE.COM 10월 이벤트(구매고객-신규회원 즉석경품)
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/09/12				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
	--width: 720;
}
.evt-func {
	position: relative;
}
#couponCheckPop{
	max-width: 320px;
    height: 413px;
    border-radius: 40px;
	background-image: url('/kr/event/2023/10/04_lg_october/images/layer_scratch_before.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
#couponCheckPop.selection{
	background-image: url('/kr/event/2023/10/04_lg_october/images/layer_scratch_after.png');
}

#couponCheckPop .pop-conts.no-footer{
	max-height:100%;
	height: 100%;
}
#bgCoupon{
	display:none;
	width: 177px;
    height: 130px;
}
.bg-coupon{
	width: 265px;
    height: 293px;
	margin: 120px auto 0;
	background: url('/kr/event/2023/10/04_lg_october/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: 265px;
    top: calc(50% - 1px);
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 14px;
}

#scratch {
	top: 50%;
    left: 50%;
	width: 177px;
    height: 130px;
	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: 0;
    left: 0;
    width: 100%;
    height: 62px;
}

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

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

@media screen and (max-width: 767px) {
	#couponCheckPop{
		max-width: calc(640 / 720 * 100%);
		height: 114.6vw;
		border-radius: calc(80 / 720 * 100%);
	}
	
	#bgCoupon{
		width: calc(354 / 720 * 100%);
		height: calc(534 / 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(482 / 720 * 100%);
    	height: calc(550 / 720 * 100%);
	}
	.bottom-draw{
		height: calc(110 / 720 * 100%);
	}
}

/* 바닥페이지 :: 시작 */
.evt-btn-area{
	bottom:0;
}

.evt-btn-area.event-join{
	margin-bottom: calc(292 / 1380 * 100%);
    padding-bottom: calc(122 / 1380 * 100%);
}
.evt-btn-area.event-join a {
	width: calc(290 / 1380 * 100%);
    margin: 0 calc(10 / 1380 * 100%);
}

.mdevice .evt-btn-area.event-join{
	margin-bottom: calc(320 / var(--width) * 100%);
    padding-bottom: calc(122 / var(--width) * 100%);
}

.mdevice .evt-btn-area.event-join a{
	width: calc(290 / var(--width) * 100%);
    margin: 0 calc(10 / var(--width) * 100%);
}

.evt-btn-area.eachLink{
	margin-bottom: calc(62 / 1380 * 100%);
    padding-bottom: calc(190 / 1380 * 100%);
}
.evt-btn-area.eachLink a {
	width: calc(750 / 1380 * 100%);
}

.mdevice .evt-btn-area.eachLink{
	margin-bottom: calc(62 / var(--width) * 100%);
    padding-bottom: calc(192 / var(--width) * 100%);
}

.mdevice .evt-btn-area.eachLink a{
	width: 90%;
}