/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-80522
* CODE     : Dev - EV00020191 , Prod - EV00008011
* FILE     : /kr/event/2024/12/16_lg_styler/eventMainLgStyler.jsp
* DESC     : LG 스타일러 행운의 공유이벤트
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/11/27				김미선				Created
* 2024/12/16				김미선				바닥페이지
************************************************************************************
**/

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

#LgStylerSnsAgree1_f table tbody td:nth-child(3) {
	font-weight: bold;
	line-height:1.5;
	text-decoration: underline;
}
/* 경품선택팝업 */
.popup-wrap .pop-conts.giftChoic-pop {
	max-height: 750px;
	padding: 15px 30px 0;
}
.giftChoic_popupW .pop-header.gift_txt {
	margin: 0;
	border-bottom: 0;
}
.popup-wrap.giftChoic_popupW>.btn-close {
	width: 35px;
    height: 35px;
}
.popup-wrap.giftChoic_popupW>.btn-close::before {
	width: 35px;
    height: 35px;
	background-size: 35px;
}
.giftChoic-pop .forms {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}
.giftChoic-pop .forms div {
	position: relative;
	flex: 1 1 30%;
	margin: calc(15 / var(--width) * 100%);
}
.giftChoic-pop .forms .chk-wrap input+label{
	padding: 0;
	background-color: #fff;
	border: 1px solid #f2f2f2;
	border-radius: 12px;
	box-shadow: 2px 2px 10px 0px rgb(239, 239, 239);
	padding: 25px 20px;
}
.giftChoic-pop .forms .chk-wrap input:checked+label{ /*선택됐을때 색상*/
	background-color: #fffbfa;
	outline: none;
	border: 1px solid #e23f50;
}
.giftChoic-pop .forms .chk-wrap input+label:before{
	content:'';
	display: none;
	position:absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	/* border:2px solid #5e5c5c; */
	border-radius: 12px;
}
.giftChoic-pop .forms .chk-wrap input:checked+label:before {
	display: block;
}
.giftChoic-pop .forms .chk-wrap input+label:after {
	top: calc(55 / var(--width) * 100%);
	right: 0;
	left: auto;
	width: 25px;
	height: 25px;
	background-image: url(/kr/event/2024/12/16_lg_styler/images/prd_chk_off.png);
	transform:translateX(-50%);
	background-size: 100%;
}
.giftChoic-pop .forms .chk-wrap input:checked+label:after {
	background-image: url(/kr/event/2024/12/16_lg_styler/images/prd_chk_on.png);
}
.giftChoic_popupW .btn-group {
	position: relative;
}
.giftChoic_popupW .img_btn {
	display: inline-block;
	width: calc(450 / var(--width)* 100%);
}
.giftChoic_popupW .btn_kakao {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: calc(450 / var(--width)* 100%);
	padding-bottom: calc(130 / var(--width)* 100%);
}
.popup-wrap.giftChoic_popupW  .pop-footer.center {
	padding: 22px 28px 33px;
}

/* 유튜브 플레이 */
.evt-youtube-box {
	position: absolute;
	top: calc(365 / var(--width) * 100%);
	left: 50%;
	width: calc(1220 / var(--width) * 100%);
	height: calc(744 / var(--width) * 100%);
	transform: translateX(-50%);
}
.evt-youtube-box ul {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.evt-youtube-box ul li {
	position: relative;
	width: calc(345 / var(--width)* 100%);
	height: 100%;
	margin-left: calc(20 / var(--width) * 100%);
}
.evt-youtube-box ul li:first-child {margin-left:  0;}
.btn-youtube-play {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.btn-youtube-play img {
	height: 100%;
}

/* 썸네일 없을 경우 z-index:-1; 넣어주기 */
.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: 10px;
}
/* 유튜브 영상 공유하기 버튼 */
.evt-youtube-btn {
    width: calc(1184 / var(--width) * 100%);
    padding-top: calc(65 / var(--width)* 100%) !important;
    margin-bottom: calc(99 / var(--width) * 100%) !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.evt-youtube-btn div {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.evt-youtube-btn a {
	flex: 1;
	height: 100%;
	margin-left: calc(69 / var(--width)* 100%);
}
.evt-youtube-btn a:first-child {
	margin-left:0;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	/* 경품선택팝업 */
	.popup-wrap.giftChoic_popupW {
		max-width: 90% !important;
		min-width: 90% !important;
		height: auto;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		border-radius: 8px;
	}
	.popup-wrap .pop-conts.giftChoic-pop {
		max-height: 630px;
	}
	.giftChoic_popupW .pop-header.gift_txt {
		margin: 0;
		border-bottom: 0;
		padding: 24px 0 12px 0;
	}
	.popup-wrap.giftChoic_popupW .pop-conts {
		padding: 5px 16px 10px;
	}
	.popup-wrap.giftChoic_popupW>.btn-close {
		width: 30px;
		height: 30px;
	}
	.popup-wrap.giftChoic_popupW>.btn-close::before {
		width: 30px;
		height: 30px;
		background-size: 30px;
	}
	.giftChoic-pop .forms {
		width: 100%;
	}
	.giftChoic-pop .forms .chk-wrap input+label {
		padding: 20px 10px;
	}
	.giftChoic-pop .forms .chk-wrap input+label:after {
		top: calc(25 / var(--width)* 100%);
		right: 0;
		left: auto;
		width: 23px;
		height: 23px;
	}
	.giftChoic_popupW .img_btn {
		width: calc(370 / var(--width)* 100%);
	}
	.giftChoic_popupW .btn_kakao {
		width: calc(370 / var(--width)* 100%);
		padding-bottom: calc(95 / var(--width)* 100%);
	}
	.popup-wrap.giftChoic_popupW .pop-footer.center {
		padding: 15px 20px 20px 20px;
	}

	/* 유튜브 플레이 */
	.evt-youtube-box {
		top: calc(119 / var(--width)* 100%);
		width: 84%;
    	height: calc(222 / var(--width)* 100%);
	}
	.evt-youtube-box ul {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.evt-youtube-box ul li {
		width: calc(97% / 2);
		margin-bottom: calc(200 / var(--width)* 100%);
		margin-left: 0;
	}
	.evt-youtube-btn {
		width: 78%;
		margin-bottom: calc(789 / var(--width)* 100%) !important;
	}
	.evt-youtube-btn div {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.evt-youtube-btn a {
		flex: 0 1 45%;
		margin-left: 0;
	}
	.evt-youtube-btn a:nth-child(3),
	.evt-youtube-btn a:nth-child(4) {
		margin-top: calc(800 / var(--width)* 100%);
	}
	.evt-youtube-btn a:nth-child(odd) {
		margin-left: 0;
	}
}
@media screen and (max-width: 400px){
	.popup-wrap .pop-conts.giftChoic-pop {
		max-height: 450px;
	}
}