/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-63910
* CODE : Dev - EV00019511 , Prod - EV00007361
* FILE : /kr/event/2024/05/17_STEM_refrigerator/css/event.css
* DESC : STEM 출시 기념 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/04/29				정규진			    Created
* 2024/05/27				정규진			    바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
    --width: 1380;
}
.evt-func {
    position: relative;
}
.pop-conts.academy-pop.no-footer {
    padding: 0;
}
.layer-agree {
    font-weight: bold;
}
/* 탭 영역 */
.tabs-wrap .tabs {
    display: flex;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	margin: 0;
    padding: 0;
}
.tabs-wrap .tabs > li {
    width: 50%;
    padding: 0;
    margin: 0;
}
.tabs-wrap .tabs > li a{
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tabs-wrap .tabs > li.on:nth-child(1) a{
	background-image: url(/kr/event/2024/05/17_STEM_refrigerator/images/tab_01_on.png);
	background-size: 100%;
}
.tabs-wrap .tabs > li.on:nth-child(2) a{
	background-image: url(/kr/event/2024/05/17_STEM_refrigerator/images/tab_02_on.png);
	background-size: 100%;
}
.tab-contents{
	display: none;
}
/* 탭1 */
/* 슬라이드 */
.STEM-slider {
	width: calc(648 / var(--width) * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    margin-top: calc(256 / var(--width) * 100%);
}
.STEM-slider .swiper-container {
	width: 100%;
}
.STEM-slider .swiper-button-next,
.STEM-slider .swiper-button-prev {
    top: initial;
    bottom: 0;
    margin-bottom: calc(237 / 648 * 100%);
}
.STEM-slider .swiper-button-next {
	width: calc(92 / 648 * 100%);
	padding-top: calc(92 / 648 * 100%);
	right: calc(-20 / 648 * 100%);
	background: url(/kr/event/2024/05/17_STEM_refrigerator/images/btn_next.png) no-repeat 0 0;
	background-size: 100%;
}
.STEM-slider .swiper-button-prev {
	width: calc(92 / 648 * 100%);
	padding-top: calc(92 / 648 * 100%);
	left: calc(-35 / 648 * 100%);
	background: url(/kr/event/2024/05/17_STEM_refrigerator/images/btn_prev.png) no-repeat 0 0;
	background-size: 100%;
}
/* 제품 보러가기 */
.evt-btn-area.eachLink {
    width: calc(926 / var(--width) * 100%);
    margin-bottom: calc(141 / var(--width) * 100%);
    left: 50%;
    padding-top: calc(81 / var(--width) * 100%);
    transform: translateX(-50%);
    bottom: 0;
}
.evt-btn-area.eachLink div {
	justify-content: space-between;
}
.evt-btn-area.eachLink a {
    width: calc(415 / 926 * 100%);
}
/* 탭2 */
.review-input-area {
    width: calc(495 / var(--width) * 122%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin-bottom: calc(350 / var(--width) * 100%);
}
.review-input-area .input-wrap {
	width: 100%;
}
.review-input-area .input-wrap input {
	height: 98px;
	font-size: 25px;
	color: #008fa5;
}
.review-input-area .input-wrap input::placeholder {
	color: #008fa5;
}
.review-input-area .input-wrap input:focus {
	border: 1px solid #008fa5;
}
.layer-input {
    width: calc(495 / var(--width) * 122%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin-bottom: calc(255 / var(--width) * 100%);
}
.layer-input .chk-wrap input+label {
	font-size: 20px;
	text-align: left;
    padding-left: 40px;
}
.layer-input .chk-wrap input+label::after {
    background: url(/kr/event/2024/05/17_STEM_refrigerator/images/chk_box.png) no-repeat 0 0;
	background-size: 100%;
}
.chk-wrap input:checked+label::after {
    background: url(/kr/event/2024/05/17_STEM_refrigerator/images/chk_box_checked.png) no-repeat 0 0;
	background-size: 100%;
}
.evt-btn-area.evt-join-btn-A {
    width: calc(600 / var(--width) * 100%);
    padding-top: calc(90 / var(--width) * 100%);
    margin-bottom: calc(107 / var(--width) * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.evt-btn-area.evt-join-btn-A > div{
	justify-content: space-between;
}
.evt-btn-area.evt-join-btn-A a {
	width: calc(178 / 365 * 100%);
	height: 100%;
}

/* video */
.video-play {
    position: absolute;
    top: calc(408 / var(--width) * 100%);
    left: 50%;
    width: calc(520 / var(--width) * 100%);
    padding-top: calc(310 / var(--width) * 100%);
    overflow: hidden;
    transform: translateX(-50%);
    border-radius: 10px;
}
.video-play .btn-youtube-play{
	display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.video-play .btn-youtube-play.fadeOut{
	z-index: -1;
}
.video-play .evt-youtube-player{
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translateX(-50%);
	border-radius: 10px;
}


.evt-youtube-box > ul {
	width: calc(1216 / var(--width) * 100%);
    height: calc(761 / var(--width) * 100%);
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin-bottom: calc(112 / var(--width) * 100%);
}

.evt-youtube-box > ul li {
	width: calc(452 / var(--width) * 100%);
    height: 100%;
    margin-bottom: calc(117 / var(--width) * 100%);
	position: relative;
}


/* youtube영역 */
.evt-youtube-area {
    position: absolute;
    top: calc(0 / var(--width) * 100%);
    left: 50%;
    width: 100%;
    padding-top: calc(792 / var(--width) * 100%);
    overflow: hidden;
    transform: translateX(-50%);
    border-radius: 7px;
}
.evt-youtube-area .btn-youtube-play {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
.evt-youtube-area .btn-youtube-play img {
	height: 100%;
}
.evt-youtube-area .btn-youtube-play.fadeOut {
	z-index: -1;
}
.evt-youtube-area .evt-youtube-player {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

/* 링크 공유하기 */
.evt-youtube-box .share-link {
    width: calc(406 / 452 * 100%);
    height: calc(182 / 452 * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin-bottom: calc(0 / var(--width) * 100%);
}
.evt-youtube-box .share-link a {
    width: 100%;
    cursor: pointer;
	display: block;
	margin-top: calc(54 / var(--width) * 100%);
	padding-bottom: calc(270 / var(--width) * 100%);
}

/* 해시태그 */
.evt-hash-area {
	width: 100%;
	padding-top: calc(90 / var(--width) * 100%);
	margin-bottom: calc(108 / var(--width) * 100%);
	position: absolute;
	bottom: 0;
}
.evt-hash-area button {
	width: calc(520 / var(--width) * 100%);
	margin: 0 auto;
}

/* 영상 공유하기 영역 */
.btn-sns-box {
	display: flex;
	width: calc(1078 / var(--width) * 100%);
    /* padding-top: calc(100 / var(--width) * 100%); */
    margin-bottom: calc(437 / var(--width) * 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	justify-content: space-between;

}
.btn-sns-box .evt-sns-area.sns-btn-area-A,
.btn-sns-box .evt-sns-area.sns-btn-area-B {
    width: calc(668 / var(--width) * 100%);
    padding-top: calc(130 / var(--width) * 100%);
    margin-bottom: calc(0 / var(--width) * 100%);
	position: relative;
	/* left: 50%;
	transform: translateX(-50%); */
	bottom: 0;
}
.btn-sns-box .evt-sns-area.sns-btn-area-A > div{
	justify-content: center;
}
.btn-sns-box .evt-sns-area.sns-btn-area-A a,
.btn-sns-box .evt-sns-area.sns-btn-area-B a {
	width: calc(86 / 420 * 100%);
	height: 100%;
	margin: 0 calc(30 / var(--width) * 100%);
}
/* 이벤트 참여하기 */
.evt-btn-area.evt-join-btn-B {
    padding-bottom: calc(90 / var(--width) * 100%);
    bottom: 0;
	margin-bottom: calc(194 / var(--width) * 100%);
}
.evt-btn-area.evt-join-btn-B a{
	width: calc(521 / var(--width) * 100%);
}


/* 참여팝업 */
#STEMAgree1_f table tbody td {
	font-weight: bold;
}
#STEMAgree1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
#prdCheckPop{
	max-width: 640px;
    min-height: 680px!important;
    border-radius: 20px;
}
#prdCheckPop.popup-wrap .pop-conts{
	padding: 0;
	max-height: 680px!important;
}

#prdCheckPop.popup-wrap .pop-conts .btn-group{
	position: absolute;
	bottom: 55px;
	left:0;
	width:100%;
	text-align: center
}

#prdCheckPop.popup-wrap .pop-conts .btn-group button{
	width: 303px;
	height: 91px;
}
#prdCheckPop.popup-wrap .pop-conts .btn-group button span {
	display: none;
	text-indent: -9999px;
	overflow: hidden;
}

#prdCheckPop.popup-wrap>.btn-close{
	top: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
}
/* 모바일 */
@media screen and (max-width: 767px){
    * {
        --width: 720;
    }
	/* 탭 */
	.tabs-wrap .tabs > li.on:nth-child(1) a{
		background-image: url(/kr/event/2024/05/17_STEM_refrigerator/images/m_tab_01_on.png);
	}
	.tabs-wrap .tabs > li.on:nth-child(2) a{
		background-image: url(/kr/event/2024/05/17_STEM_refrigerator/images/m_tab_02_on.png);
	}
	/* 탭1 */
	/* 슬라이드1 */
	.STEM-slider {
		margin-top: calc(255 / var(--width) * 100%);
	}
	.STEM-slider .swiper-button-next {
		width: calc(92 / 648 * 100%);
		padding-top: calc(92 / 648 * 100%);
		right: calc(-20 / 648 * 100%);
		background: url(/kr/event/2024/05/17_STEM_refrigerator/images/btn_next.png) no-repeat 0 0;
		background-size: 100%;
	}
	.STEM-slider .swiper-button-prev {
		width: calc(92 / 648 * 100%);
		padding-top: calc(92 / 648 * 100%);
		left: calc(-20 / 648 * 100%);
		background: url(/kr/event/2024/05/17_STEM_refrigerator/images/btn_prev.png) no-repeat 0 0;
		background-size: 100%;
	}
	/* 제품 바로가기 */
    .evt-btn-area.eachLink {
		width: calc(527 / var(--width) * 100%);
		margin-bottom: calc(158 / var(--width) * 100%);
		padding-top: calc(1103 / var(--width) * 100%);
		margin-left: 0;
    }
    .evt-btn-area.eachLink div {
		justify-content: space-between;
		flex-direction: column;
    }
    .evt-btn-area.eachLink a {
		width: 100%;
		height: calc(48 / 527 * 100%);
    }
	/* 슬라이드2 - 모바일만 */
	.STEM-slider2 {
		width: 100%;
		position: absolute;
		top: 0;
		margin-top: calc(328 / var(--width) * 100%);
	}
	.STEM-slider2 .swiper-container {
		width: calc(602 / var(--width) * 100%);
	}
	.STEM-slider2 .swiper-pagination {
		margin-bottom: -8vw;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.STEM-slider2 .swiper-pagination-bullet {
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 5px;
		background: #cccccc;
		opacity: 1;
	}
	.STEM-slider2 .swiper-pagination-bullet-active {
		border-radius: 25px;
		background: #008fa5;
	}
	/* 탭2 */
	.review-input-area .input-wrap input {
		height: 58px;
		font-size: 18px;
	}
	.layer-input .chk-wrap input+label {
		font-size: 12px;
		text-align: left;
		padding-left: 30px;
		line-height: 16px;
	}
	.layer-input .chk-wrap input+label::after {
		width: calc(29 / 495 * 100%);
		height: auto;
		padding-top: calc(29 / 495 * 100%);
	}
	/* video */
	.video-play {
		top: calc(210 / var(--width) * 100%);
	}
	.video-play .btn-youtube-play{
		top: 0;
		width: 100%;
		left: 0;
	}

	/* youtube영역 */
	.evt-youtube-area {
		position: absolute;
		top: calc(0 / var(--width) * 100%);
		left: 50%;
		width: 100%;
		padding-top: calc(428 / var(--width) * 100%);
		overflow: hidden;
		transform: translateX(-50%);
		border-radius: 7px;
	}
	.evt-youtube-box > ul {
		width: calc(522 / var(--width) * 100%);
		height: calc(579 / var(--width) * 100%);
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		margin-bottom: calc(108 / var(--width) * 100%);
	}
	
	.evt-youtube-box > ul li {
		width: 100%;
		height: calc(224 / var(--width) * 100%);
		margin-bottom: calc(65 / var(--width) * 100%);
		position: relative;
	}
	/* 링크 공유하기 */
	.evt-youtube-box .share-link {
		display: flex;
		width: 100%;
		height: calc(100 / 452 * 100%);
		justify-content: space-between;
	}

	.evt-youtube-box .share-link a {
		width: calc(352 / var(--width) * 100%);
		height: 100%;
		margin-top: calc(0 / var(--width)* 100%);
		padding-bottom: calc(0 / var(--width)* 100%);
	}
	
	/* 해시태그 */
	.mdevice .evt-hash-area {
		width: 100%;
		padding-top: calc(90 / var(--width) * 100%)!important;
		margin-bottom: calc(110 / var(--width) * 100%)!important;
	}

	/* 영상 공유하기 영역 */
	.btn-sns-box {
		display: block;
		width: calc(462 / var(--width) * 100%);
		/* padding-top: calc(100 / var(--width) * 100%); */
		margin-bottom: calc(0 / var(--width) * 100%);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;

	}

	/* SNS 공유하기 */
	.mdevice .evt-sns-area.sns-btn-area-A {
		padding-top: calc(164 / var(--width) * 100%) !important;
		margin-bottom: calc(268 / var(--width) * 100%) !important;
	}
	.mdevice .evt-sns-area.sns-btn-area-B {
		padding-top: calc(164 / var(--width) * 100%) !important;
		margin-bottom: calc(668 / var(--width) * 100%) !important;
	}
	.btn-sns-box .evt-sns-area.sns-btn-area-A,
	.btn-sns-box .evt-sns-area.sns-btn-area-B {
		width: 100%;
		padding-top: calc(130 / var(--width) * 100%);
		margin-bottom: calc(0 / var(--width) * 100%);
		position: relative;
		/* left: 50%;
		transform: translateX(-50%); */
		bottom: 0;
	}
	.btn-sns-box .evt-sns-area.sns-btn-area-A > div{
		justify-content: center;
	}
	.btn-sns-box .evt-sns-area.sns-btn-area-A a,
	.btn-sns-box .evt-sns-area.sns-btn-area-B a {
		width: calc(94 / 420 * 100%);
		height: 100%;
		margin: 0 calc(20 / var(--width) * 100%);
	}
	/* 이벤트 참여하기 */
	.evt-btn-area.evt-join-btn-B {
		padding-bottom: calc(90 / var(--width) * 100%);
		bottom: 0;
		margin-bottom: calc(182 / var(--width) * 100%);
	}
	.evt-btn-area.evt-join-btn-B a{
		width: calc(521 / var(--width) * 100%);
	}

	/* 이벤트 참여하기 */
	.mdevice .evt-btn-area.join-btn {
		margin-bottom: calc(118 / var(--width) * 100%);
		padding-bottom: calc(125 / var(--width) * 100%);
	}
	.mdevice .evt-btn-area.join-btn a{
		width: calc(600 / var(--width) * 100%);
	}
	
    /* 참여팝업 */
	#STEMAgree1_f table tbody tr td:last-child {
        font-size:16px;
        line-height:24px;
    }
    #prdCheckPop{
		top: 50% !important;
		left: 50% !important;
		width: 75%;
		height: auto;
		min-height: auto!important;
		transform: translate(-50%, -50%) !important;
	}

	#prdCheckPop.popup-wrap .pop-conts {
		height: calc(680 / 720 * 100%);
		max-height: calc(680 / 720 * 100%);
	}
	
	#prdCheckPop.popup-wrap .pop-conts .btn-group {
		bottom: 6.5vw;
	}
	
	#prdCheckPop.popup-wrap .pop-conts .btn-group button {
		width: 35.8vw;
		height: 10.9vw;
	}
	
	#prdCheckPop.popup-wrap>.btn-close {
		top: 5vw;
		right: 4vw;
		width: 10vw;
		height: 8vw;
	}
}