/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-64076
* CODE : Dev - EV00019631 , Prod - EV00007501
* FILE : /kr/event/2024/07/04_chair_SNS/eventMainChairSns.jsp
* DESC : LG힐링미 아르테 전유진 화보영상 공유 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/07/03				임명미				Created
************************************************************************************
**/

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

.video-frame {
	width: 100%;
	padding-top: 52.15%;
	margin-bottom: calc(96 / var(--width) * 100%);
    position: absolute;
    bottom: 0;
    
}
.video-frame video {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
	border-radius: 0;
	width: calc(404 / var(--width)* 100%);
}

/* 버튼 */
.evt-btn-area {
	bottom: 0;
	width: calc(505 / var(--width) * 100%);
	padding-bottom: calc(82 / var(--width) * 100%);
	margin-bottom: calc(86 / var(--width) * 100%);
	left: 50%;
	transform: translateX(-50%);
}
.evt-btn-area a, .evt-btn-area button {
	width: 100%;
}

.evt-step .evt-btn-area {
	width: calc(450 / var(--width) * 100%);
}
.evt-step .evt-insta {
	margin-bottom: calc(1263 / var(--width) * 100%);
}
.evt-step .evt-sns-area {
	width: calc(466 / var(--width)* 100%);
	padding-bottom: calc(93 / var(--width) * 100%);
	margin-bottom: calc(815 / var(--width) * 100%);
}
.evt-step .evt-sns-area a {
	margin: 0 calc(25 / var(--width) * 100%);
}
.evt-step .evt-hash-area {
	margin-bottom: calc(491 / var(--width) * 100%);
}
.evt-step .evt-join-one {
	margin-bottom: calc(135 / var(--width) * 100%);
}



@media screen and (max-width: 767px){
    * {
		--width: 720;
	}

	.video-frame {
		width: 100%;
		padding-top: 138.05%;
		margin-bottom: calc(101 / var(--width) * 100%);
		position: absolute;
		
	}
	.video-frame video {
		width: calc(560 / var(--width)* 100%);
		padding: 0;
	}

    /* 버튼 */
	.mdevice .evt-btn-area {
		bottom: 0;
		width: calc(563 / var(--width) * 100%);
		padding-bottom: calc(90 / var(--width) * 100%);
		margin-bottom: calc(94 / var(--width) * 100%);
		left: 50%;
		transform: translateX(-50%);
	}
	.mdevice .evt-step .evt-btn-area {
		width: calc(505 / var(--width) * 100%);
	}

	.mdevice .evt-step .evt-insta {
		margin-bottom: calc(1269 / var(--width) * 100%);
	}
	.mdevice .evt-step .evt-sns-area {
		width: calc(464 / var(--width)* 100%);
		margin-bottom: calc(826 / var(--width) * 100%);
	}
	.mdevice .evt-step .evt-sns-area a {
		margin: 0 calc(21 / var(--width) * 100%);
	}
	.mdevice .evt-step .evt-hash-area {
		margin-bottom: calc(498 / var(--width) * 100%);
	}
	.mdevice .evt-step .evt-join-one {
		margin-bottom: calc(142 / var(--width) * 100%);
	}
}