/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-81428
* CODE     : Dev - EV00020181 , Prod - EV00007991
* FILE     : /kr/event/2024/12/01_care_card/eventMainIifeSns.jsp
* DESC     : 2025 엘라쇼 - 엘라쇼를 홍보해줘 이벤트
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/11/26				김미선				Created
* 2024/12/16				김미선				바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}

.lifeSns-container .evt-func {
    position: relative;
}

/* 참여팝업 */
#lifeSnsAgree1_f table tbody td:nth-child(3) {
	font-weight: bold;
	line-height:1.5;
	text-decoration: underline;
}

/* 슬라이드 */
.ellaShow-slider {
    width: calc(600 / var(--width) * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    margin-top: calc(420 / var(--width) * 100%);
}
.ellaShow-slider .swiper-container {
    width: 100%;
}
.ellaShow-slider .swiper-container .download_img img {
    border-radius: 6px;
}
.ellaShow-slider .swiper-slide {
    background-color: transparent;
}
.ellaShow-slider .swiper-button-next,
.ellaShow-slider .swiper-button-prev {
    top: initial;
    bottom: 0;
    width: calc(200 / var(--width)* 100%);
    padding-top: calc(200 / var(--width)* 100%);
    margin-bottom: calc(891 / var(--width) * 100%);
    height: auto;
}
.ellaShow-slider .swiper-button-next {
    right: calc(-100 / var(--width) * 100%);
    background: url(/kr/event/2024/12/20_life_sns/images/btn_next.png) no-repeat 0 0;
    background-size: 100%;
}
.ellaShow-slider .swiper-button-prev {
    left: calc(-100 / var(--width)* 100%);
    background: url(/kr/event/2024/12/20_life_sns/images/btn_prev.png) no-repeat 0 0;
    background-size: 100%;
}
.ellaShow-slider .swiper-button-next:after, 
.ellaShow-slider .swiper-button-prev:after {
    display: none;
}
.ellaShow-slider .swiper-pagination {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(310 / var(--width)* 100%);
}
.ellaShow-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px;
    background: #b7b7b7;
    opacity: 1;
}
.ellaShow-slider .swiper-pagination-bullet-active {
    border-radius: 25px;
    background: #d9403b;
}
/* 예시이미지 */
.ellaShow-slider.ella-slider-02 {
    margin-top: calc(230 / var(--width)* 100%);
}
.ellaShow-slider.ella-slider-02 .swiper-button-next,
.ellaShow-slider.ella-slider-02 .swiper-button-prev {
    margin-bottom: calc(600 / var(--width)* 100%);
}
.ellaShow-slider.ella-slider-02 .swiper-pagination {
    bottom: calc(210 / var(--width)* 100%);
}
.ellaShow-slider.ella-slider-02 .slide_img {
    position: relative;
    width: 100%;
}

/* 이미지 다운로드 */
.ellaShow-slider .download_img {
    position: relative;
    width: 100%;
    padding-bottom: calc(476 / var(--width)* 100%);
    margin-bottom: calc(0 / var(--width) * 100%);
}
.ellaShow-slider .evt-down-none {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 10;
}
.ellaShow-slider .evt-down-none a {
    width: 97%;
    padding-top: calc(225 / var(--width)* 100%);
    display: inline-block;
    height: 100%;
    cursor: pointer;
}


/* 해시태그 */
.lifeSns-container .evt-hash-area {
    width: calc(585 / var(--width) * 100%);
    padding-top: calc(100 / var(--width) * 100%) !important;
    margin-bottom: calc(297 / var(--width) * 100%) !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.lifeSns-container .evt-hash-area button {
    width: 100%;
    margin: 0 auto;
}

/* sns버튼 */
.lifeSns-container .evt-sns-area {
    width: calc(340 / var(--width) * 100%);
    padding-top: calc(95 / var(--width)* 100%) !important;
    margin-bottom: calc(155 / var(--width) * 100%) !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.lifeSns-container .evt-sns-area a{
	width: calc(400 / var(--width)* 100%);
	margin-left: 20px;
}
.lifeSns-container .evt-sns-area a:first-child {
	margin-left:0;
}

/* 참여하기 버튼 */
.lifeSns-container .evt-btn-area a {
    width: calc(583 / var(--width) * 100%);
    padding-top: calc(100 / var(--width)* 100%);
    margin-bottom: calc(152 / var(--width) * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.lifeSns-container .toggle_btn .toggle_on{display:none}
.lifeSns-container .toggle_btn.active .toggle_off {display:none}
.lifeSns-container .toggle_btn.active .toggle_on {display:block}
.lifeSns-container .toggle_btn + .toggle_con {display:none}
.lifeSns-container .toggle_btn.active + .toggle_con {display:block}
                          
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}

	/* 슬라이드 */
    .ellaShow-slider {
        margin-top: calc(440 / var(--width) * 100%);
    }
    .ellaShow-slider .swiper-pagination {
        bottom: calc(170 / var(--width)* 100%);
    }
    .ellaShow-slider .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 5px;
    }
    .ellaShow-slider .swiper-button-next,
    .ellaShow-slider .swiper-button-prev {
        width: calc(120 / var(--width)* 100%);
        padding-top: calc(120 / var(--width)* 100%);
        margin-bottom: calc(464 / var(--width)* 100%);
    }
    .ellaShow-slider .swiper-button-next {
        right: calc(-65 / var(--width) * 100%);
    }
    .ellaShow-slider .swiper-button-prev {
        left: calc(-65 / var(--width)* 100%);
    }
    /* 예시이미지 */
    .ellaShow-slider.ella-slider-02 {
        margin-top: calc(200 / var(--width)* 100%);
    }
    .ellaShow-slider.ella-slider-02 .swiper-button-next,
    .ellaShow-slider.ella-slider-02 .swiper-button-prev {
        margin-bottom: calc(280 / var(--width)* 100%);
    }
    .ellaShow-slider.ella-slider-02 .swiper-pagination {
        bottom: calc(120 / var(--width)* 100%);
    }
    /* 이미지 다운로드 */
    .ellaShow-slider .download_img {
        padding-bottom: calc(260 / var(--width)* 100%);
    }
    .ellaShow-slider .evt-down-none {
        width: 100%;
        left: 0;
        transform: translateX(0);
    }
    .ellaShow-slider .evt-down-none a {
        padding-top: calc(135 / var(--width)* 100%);
    }

	/* 해시태그 */
    .lifeSns-container .evt-hash-area {
        width: 81%;
        padding-top: calc(100 / var(--width)* 100%) !important;
        margin-bottom: calc(295 / var(--width)* 100%) !important;
    }

    /* sns버튼 */
    .lifeSns-container .evt-sns-area {
        width: 47%;
        padding-top: calc(100 / var(--width)* 100%) !important;
        margin-bottom: calc(150 / var(--width)* 100%) !important;
    }
    .lifeSns-container .evt-sns-area a{
        width: 33.33%;
    }

    /* 참여하기 버튼 */
    .lifeSns-container .evt-btn-area a {
        width: 81%;
        padding-top: calc(100 / var(--width)* 100%);
        margin-bottom: calc(146 / var(--width)* 100%);
    }
}