/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-63291
* CODE : Dev - EV00019491 , Prod - EV00007341
* FILE : /kr/event/2024/05/07_ice_water_purifier/css/event.css
* DESC : 얼음정수기 런칭 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/04/18				정규진			    Created
* 2024/07/25				김미선			    바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
    --width: 1380;
}
.evt-func {
    position: relative;
}
.evt-btn-area.eachLink {
    width: calc(567 / var(--width) * 100%);
    margin-bottom: calc(449 / var(--width) * 100%);
    left: 50%;
    padding-top: calc(38 / var(--width) * 100%);
    transform: translateX(-50%);
    bottom: 0;
    margin-left: calc(47 / var(--width)*100%);
}
.evt-btn-area.eachLink div {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.evt-btn-area.eachLink a {
    width: calc(192 / 567 * 100%);
}
/* 탭 영역 */
.tabs-wrap{
	position: sticky;
	top: 0;
	z-index: 11;
}
.tabs-wrap .tabs {
    display: flex;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	margin: 0;
    padding: 0;
}
.tabs-wrap .tabs > li {
    width: 33.33%;
    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/07_ice_water_purifier/images/tab_01_on.png);
}
.tabs-wrap .tabs > li.on:nth-child(2) a{
	background-image: url(/kr/event/2024/05/07_ice_water_purifier/images/tab_02_on.png);
}
.tabs-wrap .tabs > li.on:nth-child(3) a{
	background-image: url(/kr/event/2024/05/07_ice_water_purifier/images/tab_03_on.png);
}

/* 탭1 */
.evt-btn-area.join-btn-area-A{	
	width: calc(500 / var(--width) * 100%);
	margin-bottom: calc(80 / var(--width) * 100%);
    padding-bottom: calc(56 / var(--width) * 100%);
	bottom: 0;
	left: 50%;
    transform: translateX(-50%);
}
.evt-btn-area.join-btn-area-A div{
	justify-content: space-between;
}
.evt-btn-area.join-btn-area-A a{
	width: calc(240 / 500 * 100%);
}
/* 탭2 */
.evt-btn-area.join-btn-area-B{	
	width: calc(500 / var(--width) * 100%);
	margin-bottom: calc(100 / var(--width) * 100%);
    padding-bottom: calc(56 / var(--width) * 100%); 
	bottom: 0;
	left: 50%;
    transform: translateX(-50%);
}
.evt-btn-area.join-btn-area-B div{
	justify-content: space-between;
}
.evt-btn-area.join-btn-area-B a{
	width: calc(240 / 500 * 100%);
}
/* 탭3 */
.mdevice .evt-hash-area {
	width: 100%;
	padding-top: calc(210 / var(--width) * 100%);
	margin-bottom: calc(525 / var(--width) * 100%);
	position: absolute;
	left: 0;
	bottom: 0;
}
.evt-hash-area button {
	width: calc(580 / var(--width) * 100%);
	margin: 0 auto;
}

.evt-btn-area.join-btn-area-C{
	width: calc(240 / var(--width) * 100%);
	margin-bottom: calc(80 / var(--width) * 100%);
	padding-bottom: calc(56 / var(--width) * 100%);
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.evt-btn-area.join-btn-area-C a{
	width: 100%;
}

/* 유튜브 플레이 */
.evt-youtube-area {
	position: absolute;
	overflow: hidden;
	bottom: calc(545 / var(--width) * 100%);
	left: 50%;
	width: calc(720 / var(--width) * 100%);
	height: calc(335 / var(--width) * 100%);
	transform: translateX(-50%);
}
.btn-youtube-play {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	/* border-radius: 19px; */
	overflow: hidden;
}
.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: 5px;
}

/* 유의사항 아코디언 */
.evt-acco-head.evt-btn-area {
    padding-top: calc(84 / var(--width) * 100%);
}
.evt-acco-head.evt-btn-area button {
    width: 100%;
}
/* 참여팝업 */
#puriAgree1_f table tbody td,
#SNSAgree1_f table tbody td {
	font-weight: bold;
}
#puriAgree1_f table tbody tr td:last-child,
#SNSAgree1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
/* 참여 내역 수정하기 */
.pop-conts .btn-group {
    padding-top: 48px;
    text-align: center;
}
.layer-confirmModify-pop {
    padding-bottom: 48px;
}

/* 모바일 */
@media screen and (max-width: 767px){
    * {
        --width: 720;
    }
    .evt-btn-area.eachLink {
        width: calc(565 / var(--width) * 100%);
        margin-bottom: calc(807 / var(--width) * 100%);
        padding-top: calc(57 / var(--width) * 100%);
        margin-left: 0;
    }
    .evt-btn-area.eachLink a {
        width: calc(247 / 565 * 100%);
    }
    /* 슬라이드 */
    .purifier-slider {
        width: 100%;
        position: absolute;
        top: 0;
        margin-top: calc(185 / var(--width) * 100%);
    }
    .purifier-slider .swiper-container {
        width: calc(602 / var(--width) * 100%);
    }
    .swiper-button-next, .swiper-button-prev {
        top: initial;
        bottom: 0;
        margin-bottom: calc(60 / var(--width) * 100%);
    }
    .purifier-slider .swiper-button-next {
        width: calc(19 / var(--width) * 100%);
        padding-top: calc(35 / var(--width) * 100%);
        right: calc(20 / var(--width) * 100%);
        background: url(/kr/event/2024/05/07_ice_water_purifier/images/btn_next.png) no-repeat 0 0;
        background-size: 100%;
    }
    .purifier-slider .swiper-button-prev {
        width: calc(19 / var(--width) * 100%);
        padding-top: calc(35 / var(--width) * 100%);
        left: calc(20 / var(--width) * 100%);
        background: url(/kr/event/2024/05/07_ice_water_purifier/images/btn_prev.png) no-repeat 0 0;
        background-size: 100%;
    }
    .purifier-slider .swiper-pagination {
        margin-bottom: -23vw;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
    }
    .purifier-slider .swiper-pagination-bullet {
        width: 2.5vw;
        height: 2.5vw;
        margin: 0 5px;
        background: #57878f;
        opacity: 1;
    }
    .purifier-slider .swiper-pagination-bullet-active {
        border-radius: 25px;
        background: #ffffff;
    }
    /* 탭 */
    .tabs-wrap {
        top: 46px;
    }
    .tabs-wrap .tabs > li.on:nth-child(1) a{
        background-image: url(/kr/event/2024/05/07_ice_water_purifier/images/m_tab_01_on.png);
    }
    .tabs-wrap .tabs > li.on:nth-child(2) a{
        background-image: url(/kr/event/2024/05/07_ice_water_purifier/images/m_tab_02_on.png);
    }
    .tabs-wrap .tabs > li.on:nth-child(3) a{
        background-image: url(/kr/event/2024/05/07_ice_water_purifier/images/m_tab_03_on.png);
    }
    /* 탭1 */
    .evt-btn-area.join-btn-area-A{
        width: calc(640 / var(--width) * 100%);
        margin-bottom: calc(80 / var(--width) * 100%);
        padding-bottom: calc(225 / var(--width) * 100%);
    }
    .evt-btn-area.join-btn-area-A div{
        flex-direction: column;
        justify-content: space-between;
    }
    .evt-btn-area.join-btn-area-A a{
        width: 100%;
        padding-bottom: calc(100 / 640 * 100%);
        height: auto;
    }
    /* 탭2 */
    .evt-btn-area.join-btn-area-B{	
        width: calc(640 / var(--width) * 100%);
        margin-bottom: calc(60 / var(--width) * 100%);
        padding-bottom: calc(230 / var(--width) * 100%); 
    }
    .evt-btn-area.join-btn-area-B div{
        flex-direction: column;
        justify-content: space-between;
    }
    .evt-btn-area.join-btn-area-B a{
        width: 100%;
        padding-bottom: calc(100 / 640 * 100%); 
        height: auto;
    }
    /* 탭3 */
    .evt-hash-area {
        padding-top: calc(290 / var(--width) * 100%)!important;
        margin-bottom: calc(510 / var(--width) * 100%)!important;
    }
    .evt-hash-area button {
        width: calc(480 / var(--width) * 100%);
        margin-left: 20%;
    }

    .evt-btn-area.join-btn-area-C{
        width: calc(640 / var(--width) * 100%);
        margin-bottom: calc(80 / var(--width) * 100%);
        padding-bottom: calc(100 / var(--width) * 100%);
    }

    /* 유튜브 플레이 */
	.evt-youtube-area {
        bottom: calc(405 / var(--width)* 100%);
        width: calc(598 / var(--width)* 100%);
        height: calc(106 / var(--width)* 100%);
	}
	.evt-youtube-player {
		border-radius: 5px;
	}

    /* 유의사항 아코디언 */
    .evt-acco-head.evt-btn-area {
        padding-top: calc(101 / var(--width) * 100%);
    }
    /* 참여팝업 */
	#puriAgree1_f table tbody tr td:last-child,
    #SNSAgree1_f table tbody tr td:last-child {
        font-size:16px;
        line-height:24px;
    }
    /* 참여 내역 수정하기 */
    .layer-confirmModify-pop {
        padding-bottom: 0;
    }
    .layer-confirmModify-pop .pop-footer.center {
      	position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 200;
        -webkit-transform: translateZ(0);
        background: #ea1917;
        padding-top: 0;
    }
}