/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-55353
* CODE : Dev - EV00019131 , Prod - EV00007041
* FILE : /kr/event/2024/03/12_microplastics_care/eventMainMicroplasticsCare.jsp
* DESC : 미세플라스틱 케어 챌린지2.0 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/01/31				신우용				Created
************************************************************************************
**/

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

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

.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 {
  	width: 50%;
    margin: 0;
    padding: 0;
}
.tabs-wrap .tabs li a {
	display: block;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
}
.tabs-wrap .tabs li:nth-child(1).on a {
	background-image: url(/kr/event/2024/03/12_microplastics_care/images/tab01_on.jpg);
}
.tabs-wrap .tabs li:nth-child(2).on a {
	background-image: url(/kr/event/2024/03/12_microplastics_care/images/tab02_on.jpg);
}

.evt-btn-area.evt-down-area {
	width: calc(1100 / var(--width) * 100%);
	padding-bottom: calc(67 / var(--width) * 100%);
	margin-bottom: calc(55 / var(--width) * 100%);
	left: 50%;
	transform: translateX(-50%);
}
.evt-btn-area.evt-down-area div{
	justify-content: space-between;
}
.evt-btn-area.evt-down-area a{
	width: calc(348 / 1100 * 100%);
	height: 100%;
}
.evt-btn-area.evt-join-one{
	margin-bottom: calc(172 / var(--width) * 100%);
    padding-bottom: calc(92 / var(--width) * 100%);
}
.evt-btn-area.evt-join-one a{
	width: calc(500 / var(--width) * 100%);
}

.evt-btn-area.evt-join-two{
	margin-bottom: calc(83 / var(--width) * 100%);
    padding-bottom: calc(92 / var(--width) * 100%);
}
.evt-btn-area.evt-join-two a{
	width: calc(700 / var(--width) * 100%);
}

/* 해시태그 버튼 */
.evt-hash-area {
	width: 100%;
	padding-top: calc(92 / var(--width) * 100%);
	margin-bottom: calc(571 / var(--width) * 100%);
	position: absolute;
	left: 0;
	bottom: 0;
}
.evt-hash-area button {
	width: calc(520 / var(--width) * 100%);
	margin: 0 auto;
}

.tab-contents {
	display: none;
}

.evt-acco-head.evt-btn-area{
	top:0;
	height: 100%;
}
.evt-acco-head.evt-btn-area button{
	width: calc(720 / var(--width) * 100%);
}


@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    
    .tabs-wrap {
        top: 46px;
    }
  	.tabs-wrap .tabs li:nth-child(1).on a {
		background-image: url(/kr/event/2024/03/12_microplastics_care/images/m_tab01_on.jpg);
	}
	.tabs-wrap .tabs li:nth-child(2).on a {
		background-image: url(/kr/event/2024/03/12_microplastics_care/images/m_tab02_on.jpg);
	}
  
  	.evt-btn-area.evt-down-area{
		width: 100%;
		margin-bottom: calc(55 / var(--width) * 100%);
		padding-bottom: calc(1125 / var(--width) * 100%);
		left: 0;
		transform: translateX(0);
    }
	.evt-btn-area.evt-down-area > div{
		flex-direction:column;
	}
  	.evt-btn-area.evt-down-area a{
    	width: calc(500 / var(--width) * 100%);
    }
  	.evt-btn-area.evt-down-area a + a{
    	margin-top: calc(428 / var(--width) * 100%);
    }
  
  	.evt-btn-area.evt-join-one{
        margin-bottom: calc(154 / var(--width) * 100%);
        padding-bottom: calc(92 / var(--width) * 100%);
    }
    .evt-btn-area.evt-join-one a{
        width: calc(500 / var(--width) * 100%);
    }

    .evt-btn-area.evt-join-two{
        margin-bottom: calc(82 / var(--width) * 100%);
        padding-bottom: calc(92 / var(--width) * 100%);
    }
    .evt-btn-area.evt-join-two a{
        width: calc(500 / var(--width) * 100%);
    }
  
  	/* 해시태그 버튼 */
	.mdevice .evt-hash-area {
		width: 100%;
		padding-top: calc(92 / var(--width) * 100%);
		margin-bottom: calc(553 / var(--width) * 100%);
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.mdevice .evt-hash-area button {
		width: calc(520 / var(--width) * 100%);
		margin: 0 auto;
	}

	/* 슬라이드 */
	.care-slide{
        position: absolute;
        left: 50%;
        top: calc(143 / var(--width) * 100%);
        width: 100%;
        transform: translateX(-50%);
        z-index: 1;
    }
  	.care-slide .swiper-slide{
        width: calc(590 / var(--width) * 100%);
        margin: 0 calc(65 / var(--width) * 100%);
    }
	.care-slide .swiper-pagination{
		position: static;
		margin-top: 8vw;
	}
	.care-slide.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 1.0vw;
		opacity: 1;
		background-color: #a0a0a0;
		transition: all .3s ease-in-out;
      	border-radius:100%;
	}
	.care-slide.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active{
		background-color: #008fa5;
	}
}