/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-80153
* CODE : Dev - EV00020131 , Prod - EV00007951
* FILE : /kr/event/2024/12/20_lucky_evt/eventMainLuckyEvt.jsp
* DESC : 미리 만나는 2025 엘라쇼 행운의 복권 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/11/07				신우용			    Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}
.evt-func {
    position: relative;
}


/* 스크래치 당첨 팝업 */
#couponCheckPop{
	max-width: 320px;
	height: 403px;
	border-radius: 0;
	background-image: url('/kr/event/2024/12/20_lucky_evt/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/2024/12/20_lucky_evt/images/layer_scratch_after.png');
}

#couponCheckPop .pop-conts.no-footer{
	max-height:100%;
	height: 100%;
}
#couponCheckPop #bgCoupon{
	display:none;
	width: 216px;
    height: 134px;
}
#couponCheckPop .bg-coupon{
	width: 265px;
	margin: 95px auto 0;
}
#couponCheckPop .gift-product{
	position: relative;
	width: 100%;
	height: 168px;
}    
#couponCheckPop .gift-img, #scratch {
	position: absolute;
	cursor: grabbing;
}
#couponCheckPop .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: 265px;
	height: 168px;
	transform: translate(-50%, -50%);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
#couponCheckPop .bottom-draw{
	display:none;
	position: absolute;
    bottom: 22px;
    left: 0;
    width: 100%;
    height: 62px;
}

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

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

#couponCheckPop .btn-close{
	display: none;
	bottom: auto;
	top: 18px;
	left: auto;
	right: 18px;
	transform: none;
}
#couponCheckPop.selection .btn-close{
	display: block;
}
#couponCheckPop .btn-close:before{
	display: none;
}

.lucky-container .evt-btn-area.join-group{
	bottom: 0;
	margin-bottom: calc(90 / var(--width) * 100%);
	padding-bottom: calc(100 / var(--width) * 100%);
}
.lucky-container .evt-btn-area.join-group > div{
	left: 50%;
	width: calc(1100 / var(--width) * 100%);
	justify-content: space-between;
	transform: translateX(-50%);
}
.lucky-container .evt-btn-area.join-group a{
	width: calc(675 / var(--width) * 100%);
}

.lucky-container .toggle_btn .toggle_on{display:none}
.lucky-container .toggle_btn.active .toggle_off {display:none}
.lucky-container .toggle_btn.active .toggle_on {display:block}
.lucky-container .toggle_btn + .toggle_con {display:none}
.lucky-container .toggle_btn.active + .toggle_con {display:block}

.lg-life-show{
	padding: calc(60 / var(--width)* 100%) 0 0;
}
.lg-life-show .title{
	font-size: 32px;
	font-weight: 700;
	color: #d31517;
	font-family: 'Pretendard', sans-serif;
}
.lg-life-show .video-box{
  	position: relative;
	width: calc(410 / var(--width)* 100%);
	margin: calc(60 / var(--width)* 100%) auto;
}
.lg-life-show .video-box video{
	width: 100%;
	height: 100%;
}

.lg-life-show .video-box button{
  	overflow:hidden;
    position:absolute;
  	width:50px;
  	height:50px;
  	bottom:calc(40 / var(--width)*100%);
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: 100% auto;
}
.lg-life-show .video-box .btn-vid-mute{
  	left:calc(50 / var(--width)*100%);
  	background-image:url('/lg5-common/images/GRS/ic_sound_on_52.svg');
}
.lg-life-show .video-box .btn-vid-mute.muted {
  	background-image:url('/lg5-common/images/GRS/ic_sound_off_52.svg');
}
.lg-life-show .video-box .btn-vid-play {
  	right: calc(50 / var(--width)*100%);
  	background-image: url('/lg5-common/images/GRS/ic_pause_52.svg');
}
.lg-life-show .video-box .btn-vid-play.pause {
  	background-image: url('/lg5-common/images/GRS/ic_play_52.svg');
}
.lg-life-link{
	display: none;
}
.lg-life-link li{
	position: relative;
}
.lg-life-link li a{
	display: block;
}
.lg-life-link li .blind{
	left: 0;
}
@media screen and (max-width: 1460px){
	.lg-life-show .title{
		font-size: calc(32 / var(--width)* 100vw);
	}
}

@media screen and (max-width: 767px){
  	* {
        --width: 720;
    }
    /* 스크래치 당첨 팝업 */
	#couponCheckPop{
		max-width: calc(640 / var(--width) * 100vw);
		height: calc(806 / var(--width) * 100vw);
	}
	#couponCheckPop #bgCoupon{
		width: calc(565 / var(--width) * 100vw);
    	height: calc(338 / var(--width) * 100vw);
	}
	#couponCheckPop .bg-coupon{
		width: calc(531 / var(--width)* 100vw);
		margin: calc(195 / var(--width)* 100vw) auto 0;
	}
	#couponCheckPop .gift-img {
		width: 100%;
	}
	#couponCheckPop .gift-product{
		height: calc(338 / var(--width) * 100vw);
	}

	#scratch {
		width: calc(531 / var(--width) * 100vw);
    	height: calc(338 / var(--width) * 100vw);
	}
	#couponCheckPop .bottom-draw{
		bottom: calc(60 / var(--width)* 100vw);
		height: calc(100 / var(--width) * 100vw);
	}
	#couponCheckPop .btn-close{
		top: calc(36 / var(--width)* 100vw);
		right: calc(36 / var(--width)* 100vw);
		width: calc(48 / var(--width)* 100vw);
		height: calc(48 / var(--width)* 100vw);
	}

	.lucky-container .evt-btn-area.join-group{
		margin-bottom: calc(88 / var(--width)* 100%);
        padding-bottom: calc(220 / var(--width)* 100%);
	}
	.lucky-container .evt-btn-area.join-group > div {
        flex-direction: column;
        width: calc(580 / var(--width)* 100%);
    }
	.lucky-container .evt-btn-area.join-group a{
		width: 100%;
        height: calc(100 / var(--width)* 100vw);
	}

	.lg-life-show .title{
		font-size: calc(40 / var(--width)* 100vw);
	}
	.lg-life-show .video-box button{
        width:calc(50 / var(--width)*100vw);
      	height:calc(50 / var(--width)*100vw);
        bottom: 10px;
    }
	.lg-life-show .video-box .btn-vid-mute{
      	left:10px;
    }
    .lg-life-show .video-box .btn-vid-play{
      	right:10px;
    }
}

/* 기획전 닫기 전용 */
[aria-labelledby="tabbtn03"] .tab_wrap5,
[aria-labelledby="tabbtn03"] #event2{
	display: none;
}