/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-71625
* CODE     : Dev - EV00019431 , Prod - EV00007291
* FILE     : /kr/event/2024/04/22_cleaner_ro/eventMainCleanerRo.jsp
* DESC     : LG코드제로 복합 로봇 런칭 이벤트
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/07/24				신우용				Created
* 2024/09/25				김미선				바닥페이지(이벤트 소문내기 추가)
************************************************************************************
**/

/* 이벤트 상세 */
* {
	--width: 1380;
}
.evt-func {
	position: relative;
}
/* 참여팝업 */
#CleanerAgree1_f table tbody td:nth-child(3) {
	font-weight: bold;
	line-height:1.5;
	text-decoration: underline;
}
/* 레이어 팝업 아코디언 */
.layer-pop .evt-acco-area{
	margin-top:24px;
}
.layer-pop .pop-conts.academy-pop .form-wrap .forms .conts .evt-acco-area .sn-number-wrap{
	padding:12px 24px;
}
.layer-pop .evt-acco-head{
	top: 12px;
    height: 27px;
    padding: 0 12px;
	z-index:1;
}
.layer-pop .evt-btn-area .evt-acco-btn{
	width:100%;
}
.layer-pop .evt-acco-cont{
	position: relative;
}
.layer-pop .evt-acco-cont:after{
	content:'';
	position: absolute;
	top: 10px;
	right: 16px;
	width: 32px;
	height: 32px;
	background: url(/lg5-common/images/icons/btn-down-16-black.svg) no-repeat 50% 50%;
	transition: all .3s;
}
.layer-pop .evt-acco-cont.unfolded:after{
	transform: rotate(180deg);
}

.tabs-wrap {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 11;
}

.tabs-wrap .tabs {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
}

.tabs-wrap .tabs>li {
    flex: 1;
    margin: 0;
  	padding: 0;
}

.tabs-wrap .tabs li a {
    overflow: hidden;
    display: block;
  	width:100%;
	height:100%;
	background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}
.tabs-wrap .tabs li:nth-child(1).on a {
    background-image: url(/kr/event/2024/04/22_cleaner_ro/images/tab_on_03.png);
}
.tabs-wrap .tabs li:nth-child(2).on a {
    background-image: url(/kr/event/2024/04/22_cleaner_ro/images/tab_on_02.png);
}
.tabs-wrap .tabs li:nth-child(3).on a {
    background-image: url(/kr/event/2024/04/22_cleaner_ro/images/tab_on_01.png);
}

/* 영상 */
.video-frame {
	width: calc(900 / var(--width)* 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(130 / var(--width) * 100%);
}
.video-frame video {
	width: 100%;
	border-radius: 15px;
}

.evt-btn-area.ai-group{
	bottom: 0;
	margin-bottom: calc(130 / var(--width)* 100%);
    padding-bottom: calc(55 / var(--width)* 100%);
}
.evt-btn-area.ai-group a{
	width: calc(630 / var(--width) * 100%);
	margin: 0 calc(10 / var(--width) * 100%);
}

.evt-btn-area.join-group{
	bottom: 0;
	margin-bottom: calc(85 / var(--width) * 100%);
	padding-bottom: calc(72 / var(--width) * 100%);
}
.evt-btn-area.join-group a{
	width: calc(330 / var(--width) * 100%);
	margin: 0 calc(10 / var(--width) * 100%);
}

.evt-btn-area.btn_kakao a{
	width: calc(600 / var(--width) * 100%);
	padding-top: calc(70 / var(--width)* 100%);
	margin-bottom: calc(190 / var(--width) * 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    #agreeKakao1_f table tbody td:last-child {
        font-size: 16px;
    }
	.tabs-wrap {
        top: 46px;
    }
  	.header.helloBar~.mobile-nav-wrap ~ #content .event-container .tabs-wrap {
		top: 88px;
	}
	.tabs-wrap .tabs li:nth-child(1).on a {
		background-image: url(/kr/event/2024/04/22_cleaner_ro/images/m_tab_on_03.png);
	}
	.tabs-wrap .tabs li:nth-child(2).on a {
		background-image: url(/kr/event/2024/04/22_cleaner_ro/images/m_tab_on_02.png);
	}
	.tabs-wrap .tabs li:nth-child(3).on a {
		background-image: url(/kr/event/2024/04/22_cleaner_ro/images/m_tab_on_01.png);
	}

	/* 영상 */
	.video-frame {
		width: calc(640 / var(--width)* 100%);
		bottom: calc(55 / var(--width) * 100%);
	}

	.evt-btn-area.ai-group {
    	margin-bottom: calc(105 / var(--width)* 100%);
    }
	.evt-btn-area.ai-group a {
		width: calc(300 / var(--width) * 100%);
	}

	.ai-slider {
		width: 100%;
		position: absolute;
		top: 0;
		margin-top: calc(250 / var(--width) * 100%);
	}
	.ai-slider .swiper-container {
		width: calc(600 / var(--width) * 100%);
	}
	.ai-slider .swiper-button-prev, .ai-slider .swiper-button-next{
		width: 12.78vw;
		height: 12.78vw;
		margin-top: 0;
		background-image: url('/kr/event/2024/04/22_cleaner_ro/images/btn_slide.png');
		transform: translateY(-50%);
		background-size: 100% 100%;
	}
	.ai-slider .swiper-button-next{
		transform: translateY(-50%) rotate(180deg);
	}

    /* 슬라이드2 - 모바일만 */
	.cleanerRo-slider {
		width: 100%;
		position: absolute;
		top: 0;
		margin-top: calc(230 / var(--width) * 100%);
	}
	.cleanerRo-slider .swiper-container {
		width: calc(602 / var(--width) * 100%);
	}
	.cleanerRo-slider .swiper-pagination {
		margin-bottom: -8vw;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.cleanerRo-slider .swiper-pagination-bullet {
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 5px;
		background: #cccccc;
		opacity: 1;
	}
	.cleanerRo-slider .swiper-pagination-bullet-active {
		border-radius: 25px;
		background: #452e17;
	}
	.evt-btn-area.join-group{
        margin-bottom: calc(86 / var(--width) * 100%);
    }
    .evt-btn-area.join-group a{
        width: calc(290 / var(--width) * 100%);
    }

    .evt-btn-area.btn_kakao a{
		width: 85%;
		padding-top: calc(80 / var(--width)* 100%);
		margin-bottom: calc(185 / var(--width) * 100%);
    }
}