/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-55717
* CODE : Dev - EV00019311 , Prod - EV00007172
* FILE : /kr/event/2024/04/01_lg_care/eventMainLgCare.jsp
* DESC : 4월 LG 가전 구독 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/03/14				신우용				Created
************************************************************************************
**/

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

.care-container .evt-btn-area{
	bottom: 0;
}

.evt-btn-area.share-kakao-link{
	margin-bottom: calc(145 / var(--width) * 100%);
	padding-bottom: calc(86 / var(--width) * 100%);
	bottom: 0;
}
.evt-btn-area.share-kakao-link > div{
	width: calc(280 / var(--width) * 100%);
	left: 50%;
	transform: translateX(-50%);
	justify-content: space-between;
}
.evt-btn-area.share-kakao-link a{
	width: calc(460 / var(--width) * 100%);
}

.care-container .evt-btn-area.eachkLink{
	margin-bottom: 0;
	padding-bottom: calc(140 / var(--width) * 100%);
}

.care-container .evt-btn-area.eachkLink a{
	width: calc(820 / var(--width) * 100%);
}

.care-container .pc .evt-btn-area.eachkLink{
	margin-bottom: 0;
	padding-bottom: calc(420 / var(--width) * 100%);
}

.care-container .pc .evt-btn-area.eachkLink a{
	width: calc(960 / var(--width) * 100%);
}

.care-container .evt-btn-area.join-group{
	margin-bottom: calc(120 / var(--width) * 100%);
	padding-bottom: calc(72 / var(--width) * 100%);
}
.care-container .evt-btn-area.join-group a{
	width: calc(380 / var(--width) * 100%);
	margin: 0 calc(10 / var(--width) * 100%);
}
.care-container .evt-acco-area{
	margin-top: calc(20 / var(--width) * 100%);
}
.care-container .evt-btn-area.evt-acco-head{
	bottom: auto;
	top: 0;
	padding-top: calc(66 / var(--width) * 100%);
}
.care-container .evt-btn-area.evt-acco-head button{
	width: 100%;
}

.evt-banner{
	display: flex;
	position: absolute;
	top: calc(220 / var(--width)* 100%);
    left: 50%;
    width: calc(1290 / var(--width)* 100%);
    height: calc(900 / var(--width)* 100%);
	transform: translateX(-50%);
	justify-content: space-between;
}
.evt-banner a{
	display: block;
	width: calc(430 / 890 * 100%);
	height: 100%;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	.evt-btn-area.share-kakao-link{
		margin-bottom: calc(150 / var(--width) * 100%);
		padding-bottom: calc(120 / var(--width) * 100%);
	}
	.evt-btn-area.share-kakao-link > div{
		width: calc(320 / var(--width) * 100%);
	}
	.evt-btn-area.share-kakao-link a{
		width: calc(275 / var(--width) * 100%);
	}
  
  	.care-container .evt-btn-area.eachkLink{
		padding-bottom: calc(220 / var(--width) * 100%);
	}

	.care-container .evt-btn-area.eachkLink a{
		width: calc(600 / var(--width) * 100%);
	}
  
  	.care-slide{
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        transform: translateX(-50%);
        z-index: 1;
    }
  	.care-slide .swiper-slide{
        width: calc(440 / var(--width) * 100%);
        margin: 0 calc(15 / var(--width) * 100%);
    }
	.care-slide .swiper-pagination{
		position: static;
		margin-top: 3.6vw;
	}
	.care-slide.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 1.7vw;
		opacity: 1;
		background-color: #ebebeb;
		transition: all .3s ease-in-out;
      	border-radius:100%;
	}
	.care-slide.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active{
		background-color: #00951b;
	}
	.care-container .mobile .evt-btn-area.eachkLink{
		margin-bottom: calc(490 / var(--width) * 100%);
		padding-bottom: calc(305 / var(--width)* 100%);
	}

	.care-container .mobile .evt-btn-area.eachkLink a{
		width: calc(600 / var(--width) * 100%);
	}

	.care-container .evt-btn-area.join-group{
		margin-bottom: calc(100 / var(--width) * 100%);
    	padding-bottom: calc(280 / var(--width) * 100%);
	}
	.care-container .evt-btn-area.join-group > div{
		flex-direction: column;
	}
	.care-container .evt-btn-area.join-group a{
		width: calc(600 / var(--width) * 100%);
		margin: calc(15 / var(--width) * 100%) 0;
	}
  	.care-container .evt-btn-area.evt-acco-head{
		padding-top: calc(88 / var(--width) * 100%);
	}
	.care-container .evt-btn-area.evt-acco-head button{
		width: calc(600 / var(--width) * 100%);
	}
	.evt-banner{
      	top: calc(70 / var(--width)* 100%);
        width: calc(600 / var(--width)* 100%);
        height: calc(520 / var(--width)* 100%);
      	flex-direction: column;
	}
  	.evt-banner a {
        width: 100%;
    }
}