/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-80410
* CODE     : Dev - EV00020151 , Prod - EV00007961
* FILE     : /kr/event/2024/12/01_lg_advent/eventMainLgAdvent.jsp
* DESC     : 12월 통합-어드벤트 캘린더
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/11/15				신우용				Created
************************************************************************************
**/

/* 이벤트 상세 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500&family=Lobster&display=swap');

* {
	--width: 1380;
}

.evt-func, .evt-intro {
	position: relative;
}

.evt-intro #calenderStartBtn {
	position: absolute;
	bottom: 5.2%;
	left: 50%;
	width: calc(640 / var(--width)* 100%);
    height: 8.43%;
	background-image:url('/kr/event/2024/12/01_lg_advent/images/btn_evt_start.png');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	transform: translateX(-50%);
}

.calender-data{
	position: relative;
	display: none;
}

.calender-list{
	display: flex;
	position: absolute;
    top: calc(600 / var(--width)* 100%);
    left: 50%;
    width: calc(1040 / var(--width)* 100%);
	flex-wrap: wrap;
	justify-content: space-around;
    align-content: space-around;
	transform: translateX(-50%);
}
.calender-list li{
	display: inline-flex;
	position: relative;
	width: 152px;
	height: 209px;
	margin: calc(20 / var(--width)* 100%) 0;
	justify-content: center;
	align-items: center;
}
.calender-list li > *{
	width: 100%;
	height: 100%;
	padding-top: 70px;
    font-family: "Lobster", sans-serif;
    font-size: 38px;
    line-height: 1;
	color: #5a6674;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}
.calender-list li > *:not(.default){
	display: none;
}
.calender-list li .default{
	background-image: url('/kr/event/2024/12/01_lg_advent/images/ico_calender_default.png');
}
.calender-list li.off .default{
	background-image: url('/kr/event/2024/12/01_lg_advent/images/ico_calender_default.png');
}
.calender-list li.on .default{
	display: none;
}

.calender-list li.on > .calender-join-btn{
	display: block;
	color: #7c332d;
	background-image: url('/kr/event/2024/12/01_lg_advent/images/ico_calender_on.png');
}

.calender-list li.off.complete1  > .clear,
.calender-list li.off.complete2  > .clear,
.calender-list li.on.complete2 > .clear{
	display: block;
	background-image: url('/kr/event/2024/12/01_lg_advent/images/ico_calender_disabled.png');
}
.calender-list li.off.complete1 > .default,
.calender-list li.off.complete2  > .default,
.calender-list li.on.complete2 > .default{
	display: none;
}

.calender-list li.off.complete1 > .calender-join-btn,
.calender-list li.off.complete2 > .calender-join-btn,  
.calender-list li.on.complete2 > .calender-join-btn{
	display: none;
}

.evt-btn-area.calender-chk{
	bottom: 0;
	margin-bottom: calc(100 / var(--width)* 100%);
    padding-bottom: calc(100 / var(--width)* 100%);
}
.evt-btn-area.calender-chk a{
	width: calc(640 / var(--width)* 100%);
}

/* 카카오 횟수 팝업 */
#evtKakaoCheckDrawPop{
	max-width: 410px;
	min-height: auto !important;
	border-radius: 30px;
	background-color: transparent;
}
#evtKakaoCheckDrawPop .pc{
	display: block !important;
}
#evtKakaoCheckDrawPop .mobile{
	display: none !important;
}
#evtKakaoCheckDrawPop .evt-btn-area.kakao-btn{
	bottom: 0;
	margin-bottom: calc(660 / var(--width)* 100%);
	padding-bottom: calc(534 / var(--width)* 100%);
}
#evtKakaoCheckDrawPop .evt-btn-area.kakao-btn > div{
	flex-direction: column;
    justify-content: space-between;
}
#evtKakaoCheckDrawPop .evt-btn-area.kakao-btn button{
	width: calc(1240 / var(--width)* 100%);
	height: calc(620 / var(--width)* 100%);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
}

#evtKakaoCheckDrawPop .btn-close {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
}
#evtKakaoCheckDrawPop .btn-close:before{
	width: 42px;
    height: 42px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	background-image: none;
}

/* 즉석 경품 */
#evtPrdCheckPop{
	max-width: 540px;
	border-radius: 24px;
	background-color: transparent;
}
#evtPrdCheckPop.popup-wrap .pop-conts{
	padding: 0;
	max-height: none;
}
#evtPrdCheckPop.popup-wrap>.btn-close{
	top: 25px;
	right: 25px;
	width: 40px;
	height: 40px;
}
#evtPrdCheckPop.popup-wrap>.btn-close:before{
	display: none;
}

#confirmPopup colgroup col:nth-child(1){
	width: calc(100% - 270px);
}
#confirmPopup colgroup col:nth-child(2){
	width: 160px;
}
#confirmPopup colgroup col:nth-child(3){
	width: 110px;
}

@media screen and (max-width: 1460px) {
    .calender-list li{
		width: calc(148 / var(--width)* 100vw);
        height: calc(192 / var(--width)* 100vw);
	}
	.calender-list li > *{
		padding-top: calc(65 / var(--width)* 100vw);
        font-size: calc(35 / var(--width)* 100vw);
	}
}
@media screen and (max-width: 767px) {
	* {
		--width: 720;
	}

	.evt-intro #calenderStartBtn {
		bottom: calc(110 / var(--width)* 100vw);
		width: calc(600 / var(--width)* 100vw);
		height: calc(110 / var(--width)* 100vw);
	}

	.calender-list {
		top: calc(820 / var(--width)* 100vw);
		width: calc(670 / var(--width)* 100vw);
		justify-content: center;
	}
	.calender-list li{
		width: calc(136 / var(--width)* 100vw);
		height: calc(192 / var(--width)* 100vw);
		margin: calc(5 / var(--width)* 100%) calc(10 / var(--width)* 100%);
	}
	.calender-list li > *{
		padding-top: calc(70 / var(--width)* 100vw);
        font-size: calc(38 / var(--width)* 100vw);
	}

	.evt-btn-area.calender-chk {
		margin-bottom: calc(65 / var(--width)* 100%);
		padding-bottom: calc(110 / var(--width)* 100%);
	}

	/* 카카오 횟수 팝업 */
	#evtKakaoCheckDrawPop{
		max-width: none;
		top: 50% !important;
		left: 50% !important;
		width: calc(540 / var(--width)* 100vw);
		height: auto;
		border-radius: calc(30 / var(--width)* 100vw);
		transform: translate(-50%,-50%) !important;
	}
    #evtKakaoCheckDrawPop .pc{
		display: none !important;
	}
	#evtKakaoCheckDrawPop .mobile{
		display: block !important;
	}
    #evtKakaoCheckDrawPop .evt-btn-area.kakao-btn{
		margin-bottom: calc(220 / var(--width)* 100vw);
        padding-bottom: calc(180 / var(--width)* 100vw);
	}
	#evtKakaoCheckDrawPop .evt-btn-area.kakao-btn button{
		width: calc(480 / var(--width)* 100vw);
		height: calc(80 / var(--width)* 100vw);
	}
	#evtKakaoCheckDrawPop .btn-close {
		top: calc(16 / var(--width)* 100vw);
		right: calc(16 / var(--width)* 100vw);
		width: calc(64 / var(--width)* 100vw);
		height: calc(64 / var(--width)* 100vw);
	}
	#evtKakaoCheckDrawPop .btn-close:before{
		width: calc(64 / var(--width)* 100vw);
		height: calc(64 / var(--width)* 100vw);
	}
    
    /* 경품 팝업 */
    #evtPrdCheckPop{
		top: 50% !important;
        left: 50% !important;
		max-width: 80%;
        height: auto;
		min-height: auto !important;
		border-radius: calc(24 / var(--width)* 100vw);
        transform: translate(-50%, -50%) !important;
	}
    #evtPrdCheckPop.popup-wrap>.btn-close {
		top: 3%;
        right: 3.6%;
        width: 9.4%;
        height: 8.6%;
    }
    
    #confirmPopup colgroup col:nth-child(1){
        width: calc(100% - 165px);
    }
    #confirmPopup colgroup col:nth-child(2){
        width: 100px;
    }
    #confirmPopup colgroup col:nth-child(3){
        width: 65px;
    }
}