/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-66781
* CODE : Dev - EV00019601 , Prod - EV00007471
* FILE : /kr/event/2024/07/01_must_sns/eventMainMustSns.jsp
* DESC : 7월 머스트해브가전 영상 시청 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/06/25				임명미				Created
************************************************************************************
**/

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

/* 버튼 공통 */
.evt-btn-area {
    width: calc(520 / var(--width) * 100%);
    padding-top: calc(90 / var(--width) * 100%);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
	/* border: 1px solid #fcc; */
}

/* 해시태그 버튼 */
.evt-btn-area.evt-hash-area{
	margin-bottom: calc(311 / var(--width) * 100%);
}
.evt-btn-area.evt-hash-area button{
	width: 100%;
}

/* SNS 버튼 */
.evt-btn-area.evt-sns-area{
	width: calc(236 / var(--width) * 100%);
	margin-bottom: calc(171 / var(--width) * 100%);
	padding-top: calc(100 / var(--width) * 100%);
}
.evt-btn-area.evt-sns-area div {
    display: flex;
    justify-content: space-between;
}
.evt-btn-area.evt-sns-area div a {
    width: calc(100 / 236 * 100%);
}

/* 공유 인증하기 */
.evt-btn-area.evt-join-btn {
    margin-bottom: calc(262 / var(--width) * 100%);
}
.evt-btn-area.evt-join-btn div {
    width: 100%;
    height: 100%;
}
.evt-btn-area.evt-join-btn a {
    width: 100%;
    height: 100%;
}



/* 유튜브 플레이 */
.evt-youtube-area {
	position: absolute;
	overflow: hidden;
}
.btn-youtube-play {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
.btn-youtube-play img {
	height: 100%;
}
.btn-youtube-play.fadeOut {
	z-index: -1;
}
.evt-youtube-player {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border-radius: 19px;
}
/* 유튜브 영역 */
.evt-youtube-box{
	position: absolute;
	top: calc(429 / var(--width) * 100%);
	left: 50%;
	width: calc(1034 / var(--width) * 100%);
	height: calc(798 / var(--width) * 100%);
	transform: translateX(-50%);
}
.evt-youtube-box > ul {
	display: flex;
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
}
.evt-youtube-box > ul > li {
	position: relative;
	width: calc(664 / var(--width) * 100%);
}
.evt-youtube-box > ul > li + li:nth-child(3), .evt-youtube-box > ul > li + li:nth-child(4) {
	margin-top: calc(144 / var(--width) * 100%);
}
.evt-youtube-box > ul > li  .evt-youtube-area{
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 18px;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	/* 버튼 공통 */
	.mdevice .evt-btn-area{
		padding-top: calc(90 / var(--width) * 100%);
	}
	/* 해시태그 버튼 */
	.mdevice .evt-btn-area.evt-hash-area{
		margin-bottom: calc(322 / var(--width) * 100%);
	}
	/* SNS 버튼 */
	.mdevice .evt-btn-area.evt-sns-area{
		margin-bottom: calc(182 / var(--width) * 100%);
		padding-top: calc(100 / var(--width) * 100%);
	}	
	/* 공유 인증하기 */
	.mdevice .evt-btn-area.evt-join-btn {
    	margin-bottom: calc(283 / var(--width) * 100%);
	}


	/* 유튜브 */
    .evt-youtube-box{
        top: calc(138 / var(--width) * 100%);
        width: calc(497 / var(--width) * 100%);
        height: calc(537 / var(--width) * 100%);
    }
    .evt-youtube-box > ul {
        flex-direction:column;
    }
	.evt-youtube-box > ul > li{
		flex: 1;
		/* position: relative; */
		width: auto;
	}
    .evt-youtube-box > ul > li + li{
        margin-top: calc(149 / var(--width) * 100%) !important;
    }
	.evt-youtube-box > ul > li + li + li{
        margin-top: calc(145 / var(--width) * 100%) !important;
    }
}