/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-74822
* CODE : Dev - EV00019931 , Prod - EV00007771
* FILE : /kr/event/2024/09/23_dishwasher_ex/eventMainDishwasherEx.jsp
* DESC : 첫 식기세척기 체험단 모집 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/09/05				신우용				Created
************************************************************************************
**/

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

.input-wrap.count .total{
    position: absolute;
    top: -34px;
    right: 5px;
    margin-top: 0;
  	z-index: 1;
}

.tabs-wrap{
	position: sticky;
	top: 0;
	z-index: 10;
}
.tabs-wrap .tabs {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.tabs-wrap .tabs li{
	flex: 1;
	padding: 0;
	margin: 0;
}
.tabs-wrap .tabs li a{
	display: block;
	width:100%;
	height:100%;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.tabs-wrap .tabs .dishwasher_evt.on a{
	background-image:url(/kr/event/2024/09/23_dishwasher_ex/images/tab01_on.jpg);
}
.tabs-wrap .tabs .benefit.on a{
	background-image:url(/kr/event/2024/09/23_dishwasher_ex/images/tab02_on.jpg);
}

.tab-contents{
	display: none;
}

.evt-youtube-area{
  	overflow: hidden;
	position:absolute;
	left: 50%;
	top: calc(440 / var(--width)* 100%);
	width: calc(458 / var(--width)* 100%);
	height: calc(291 / var(--width)* 100%);
	transform: translateX(-50%);
}
.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:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: url(/lg5-common/images/btn-play-80.svg) no-repeat 0 0;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.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: 50%;
    top: 50%;
    width: 102%;
    height: 102%;
    transform: translate(-50%, -50%);
  	z-index: 1;
}


.evt-sns-area{
  	bottom: 0;
    margin-bottom: calc(213 / var(--width)* 100%) !important;
	padding-bottom: calc(92 / var(--width)* 100%) !important;
}
.evt-sns-area a {
    width: calc(92 / var(--width)* 100%);
    margin: 0 calc(10 / var(--width)* 100%);
}
.evt-btn-area.dishwasher-join {
    bottom: 0;
    margin-bottom: calc(80 / var(--width)* 100%);
    padding-bottom: calc(90 / var(--width)* 100%);
}
.evt-btn-area.dishwasher-join a {
    width: calc(490 / var(--width)* 100%);
}

.dishwasher-benefit{
	position: absolute;
	display: flex;
	left: 50%;
	top: calc(185 / var(--width)* 100%);
	width: calc(1275 / var(--width)* 100%);
	height: calc(1122 / var(--width)* 100%);
	transform: translateX(-50%);
	justify-content: space-between;
	flex-wrap: wrap;
}
.dishwasher-benefit li{
	position: relative;
	width: calc(672 / var(--width)* 100%);
	height: calc(428 / var(--width)* 100%);
	margin-top: calc(50 / var(--width)* 100%);
}
.dishwasher-benefit li:nth-child(1), .dishwasher-benefit li:nth-child(2){
	margin-top: 0;
}
.dishwasher-benefit li a{
	position: absolute;
	left: 50%;
	bottom: calc(128 / var(--width)* 100%);
	width: calc(680 / var(--width)* 100%);
	height: calc(170 / var(--width)* 100%);
	transform: translateX(-50%);
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    .input-wrap.count .total{
        top: -7.7vw;
    }
    .tabs-wrap{
    	top: 46px;
    }
  	.header.helloBar~.mobile-nav-wrap ~ #content .event-container .tabs-wrap {
		top: 88px;
	}
	.tabs-wrap .tabs .dishwasher_evt.on a{
		background-image:url(/kr/event/2024/09/23_dishwasher_ex/images/m_tab01_on.jpg);
	}
	.tabs-wrap .tabs .benefit.on a{
		background-image:url(/kr/event/2024/09/23_dishwasher_ex/images/m_tab02_on.jpg);
	}
	.evt-youtube-area{
        top: calc(195 / var(--width)* 100%);
        width: calc(456 / var(--width)* 100%);
    	height: calc(125 / var(--width)* 100%);
    }
  	.evt-youtube-area .btn-youtube-play:after {
        width: 40px;
        height: 40px;
    }
  	.dishwasher-benefit{
		top: calc(74 / var(--width)* 100%);
		width: calc(648 / var(--width)* 100%);
		height: calc(620 / var(--width)* 100%);
	}
	.dishwasher-benefit li{
		width: calc(350 / var(--width)* 100%);
		height: calc(230 / var(--width)* 100%);
		margin-top: calc(36 / var(--width)* 100%);
	}
	.dishwasher-benefit li a{
		bottom: calc(36 / var(--width)* 100%);
		width: 100%;
		height: calc(70 / var(--width)* 100%);
	}
}