/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-66395
* CODE : Dev - EV00019561 , Prod - EV00007431
* FILE : /kr/event/2024/06/04_lg_mission/eventMainLgMission.jsp
* DESC : 6월 통합_마라톤 미션 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/05/20				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}
.evt-func {
	position: relative;
}
.mission-container{
	max-width: 1380px;
  	margin: 0 auto;
}
.mission-container .swiper-slide{
	background: transparent;
}

.mission-container .swiper-button-next:after, .mission-container  .swiper-button-prev:after{
	display: none;
}
.evt-intro {
  	position: relative;
}
.evt-intro .intro-title {
    position: absolute;
    top: 9.8%;
    left: 0;
}
.evt-intro #missionStartBtn, .evt-intro .clone-evt{
	position: absolute;
    bottom: 10.2%;
    left: 32%;
    width: 36%;
    height: 9.2%;
    background-image:url(/kr/event/2024/06/04_lg_mission/images/btn_mission_start.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
}
.evt-intro .intro-movie{
	display: block;
}
.evt-intro .intro-movie video{
	width: 100%;
	height: 100%;
}
.mission-circ {
  	display: none;
  	position: relative;
}

.board-cnt{
	position: absolute;
	top: calc(320 / var(--width)* 100%);
	left: 50%;
	width: calc(895 / var(--width)* 100%);
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 4px 30px rgba(73, 121, 129, 0.3);
	transform: translateX(-50%);
}

.mission-circ .title-cnt{
	display: flex;
	padding: calc(30 / var(--width)* 100%) calc(37 / var(--width)* 100%) calc(29 / var(--width)* 100%);
	justify-content: space-between;
	align-items: center;
}
.mission-circ .title-cnt .title{
	display: flex;
	align-items: center;
	font-family: 'Pretendard';
}
.mission-circ .title-cnt .title:before{
	content:'';
	display:inline-block;
	width: 74px;
	height: 74px;
	margin-right: 20px;
	background-image:url(/kr/event/2024/06/04_lg_mission/images/ico_profile.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	vertical-align: middle;
}
.mission-circ .title-cnt .mission-location{
	text-align: left;
	letter-spacing: -0.5px;
}
.mission-circ .title-cnt .mission-location .cos{
	display: block;
	font-size: 24px;
	color: #251d8d;
	font-weight:700;
}
.mission-circ .title-cnt .mission-location .mission-map{
	display: block;
	margin-top: 5px;
	font-size: 16px;
	color: #251d8d;
	font-weight:500;
}
.mission-circ .title-cnt .mission-location .mission-map:before{
	content:'';
	display:inline-block;
	width: 15px;
	height: 22px;
	margin-right: 10px;
	background-image:url(/kr/event/2024/06/04_lg_mission/images/ico_location.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	vertical-align: bottom;
}
.mission-circ .title-cnt .mission-count{
	display: flex;
	height: 56px;
	align-items: center;
	border:1px solid #ebebeb;
	border-radius: 15px;
}
.mission-circ .title-cnt .mission-count > *{
	display: inline-flex;
	position:relative;
	height: 100%;
	padding: 0 16px;
	font-size: 22px;
	line-height: 34px;
	color: #251d8d;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	font-family: 'Pretendard';
}
.mission-circ .title-cnt .mission-count > *:before{
	content:'';
	display:inline-block;
	width: 30px;
	height: 30px;
	margin-right: 8px;
	background-image:url(/kr/event/2024/06/04_lg_mission/images/ico_point.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	vertical-align: middle;
}

.mission-circ .title-cnt .mission-count > * + *{
	border-left:1px solid #ebebeb;
}
.mission-circ .title-cnt .mission-count > * + *:before{
	width: 36px;
	background-image:url(/kr/event/2024/06/04_lg_mission/images/ico_shoes.svg);
}
.board-cnt .mission-layer{
	padding: calc(85 / var(--width)* 100%) calc(62 / var(--width)* 100%) calc(95 / var(--width)* 100%);
}


.progress-screen{
	overflow: hidden;
  	position: relative;
}
.progress-screen video{
	width: 100%;
	height: 100%;
}
.progress-screen:after{
	content:'';
	position: absolute;
	bottom: 1px;
	left: 0;
	width:100%;
	height: 2px;
	background-color:#fff;
	z-index: 1;
}

.mission-circ .progress-bar{
	width: 100%;
	height: 30px;
	background-color: #e9f6f6;
	border-radius: 25px;
}
.mission-circ .progress-bar > div{
	position: relative;
	width: 100%;
	height: 100%;
    background: linear-gradient(to right, #00eca5 0%, #6ceefd 54%, #d58cf7 100%);
	border-radius: 25px;
}
.mission-circ .progress-bar .gsap{
	position: absolute;
	right: 0;
	top: 0;
	width: 90%;
	height: 100%;
	background-image: url(/kr/event/2024/06/04_lg_mission/images/progress.png);
	background-size: auto 100%;
	background-position: left 50%;
	background-repeat: no-repeat;
	border-radius: 25px;
	z-index: 10;
}
.mission-circ .progress-bar .gsap:after{
	content:'';
	position:absolute;
	left: -88px;
	top: -77px;
	width:142px;
	height: 78px;
	padding-top: 16px;
	color: #fff;
	font-size: 34px;
	font-weight: 600;
	font-family: 'Pretendard';
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
	background-image: url(/kr/event/2024/06/04_lg_mission/images/ico_balloons.svg);
}

.mission-circ.step1 .progress-bar .gsap:after{
	content:'1km';
}
.mission-circ.step2 .progress-bar .gsap:after{
	content:'2km';
}
.mission-circ.step3 .progress-bar .gsap:after{
	content:'3km';
}
.mission-circ.step4 .progress-bar .gsap:after{
	content:'4km';
}
.mission-circ.step5 .progress-bar .gsap:after{
	content:'5km';
}
.mission-circ.step6 .progress-bar .gsap:after{
	content:'6km';
}
.mission-circ.step7 .progress-bar .gsap:after{
	content:'7km';
}
.mission-circ.step8 .progress-bar .gsap:after{
	content:'8km';
}
.mission-circ.step9 .progress-bar .gsap:after{
	content:'9km';
}
.mission-circ.step10 .progress-bar .gsap:after{
	content:'10km';
  	left: -115px;
}

.board-cnt .btn-wrap{
	margin-top: calc(40 / var(--width)* 100%);
}
.board-cnt .btn-wrap > div{
	display: flex;
	justify-content: space-between;
}
.board-cnt .btn-wrap a{
	display: block;
	width: 48.2%;
	height: 80px;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
}
.board-cnt .btn-wrap #joinBtn, .board-cnt .btn-wrap a:nth-child(1){
	background-image: url(/kr/event/2024/06/04_lg_mission/images/btn_point.png);
}
.board-cnt .btn-wrap #missionChkBtn, .board-cnt .btn-wrap a:nth-child(2){
	background-image: url(/kr/event/2024/06/04_lg_mission/images/btn_run.png);
}

.mission-intro{
	position: absolute;
	width: calc(1040 / var(--width)* 100%);
	top: calc(420 / var(--width)* 100%);
	left: 50%;
	padding: 0 calc(60 / var(--width)* 100%);
	transform: translateX(-50%);
}
.mission-intro .swiper-slide{
	width: calc(260 / 1040 * 100%);
}
.mission-intro .swiper-button-prev,.mission-intro  .swiper-button-next{
	top: 50%;
	width: calc(36 / var(--width)* 100%);
	height: calc(189 / var(--width)* 100%);
	margin-top: 0;
	background-image: url(/kr/event/2024/06/04_lg_mission/images/btn_slide_mission.png);
	background-size: 100% auto;
	transform: translateY(-50%);
}

.mission-intro .swiper-button-prev {
    left: 0;
    transform: translateY(-50%) rotate(-180deg);
}

.mission-intro .swiper-button-next {
    right: 0;
}
.mission-intro .swiper-pagination{
    display: none;
}

.level-intro{
	position: absolute;
	width: calc(1040 / var(--width)* 100%);
	top: calc(420 / var(--width)* 100%);
	left: 50%;
	padding: 0 calc(60 / var(--width)* 100%);
	transform: translateX(-50%);
}
.level-intro .swiper-slide{
	width: calc(260 / 1040 * 100%);
}
.level-intro .swiper-button-prev,.level-intro  .swiper-button-next{
	top: 50%;
	width: calc(36 / var(--width)* 100%);
	height: calc(189 / var(--width)* 100%);
	margin-top: 0;
	background-image: url(/kr/event/2024/06/04_lg_mission/images/btn_slide_level.png);
	background-size: 100% auto;
	transform: translateY(-50%);
}

.level-intro .swiper-button-prev {
    left: 0;
    transform: translateY(-50%) rotate(-180deg);
}

.level-intro .swiper-button-next {
    right: 0;
}
.level-intro .swiper-pagination{
    display: none;
}

/* 응모횟수 */
#evtKakaoCheckDrawPop {
	max-width: 482px;
	background: transparent;
	border-radius: 0;
}
#evtKakaoCheckDrawPop .mobile{
	display: none;
}
#evtKakaoCheckDrawPop .pop-conts.no-footer:after {
	display: none;
}
#evtKakaoCheckDrawPop .share-pop-bg{
	padding: 0 27px;
	position: relative;
}

#evtKakaoCheckDrawPop .kakao-cnt {
	position: absolute;
    top: 50.8%;
    left: 0;
    width: 100%;
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -1.5px;
    line-height: 1.4;
}
#evtKakaoCheckDrawPop .kakao-cnt span {
	color: #00b66a;
}

#evtKakaoCheckDrawPop .btn-wrap {
	position: absolute;
	bottom: 5.7%;
	left: 13.2%;
	width: 73.4%;
	height: 32%;
}

#evtKakaoCheckDrawPop .btn-wrap > div {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: space-between;
}
#evtKakaoCheckDrawPop .btn-wrap a:nth-child(1){
	display: block;
	width: 100%;
	height: 40px;
}
#evtKakaoCheckDrawPop .btn-wrap a:nth-child(2){
	display: block;
	width: 100%;
	height: 80px;
}
#evtKakaoCheckDrawPop .btn-pop-close {
	position: absolute;
	top: 110px;
    right: 5px;
    width: 58px;
    height: 58px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/06/04_lg_mission/images/popup_close.svg);
}
#evtKakaoCheckDrawPop .btn-pop-close:before{
	display: none;
}

/* 미션 팝업 */
#evtMissionPop {
	max-width: 454px;
	background: transparent;
	border-radius: 0;
	position: relative;
}
#evtMissionPop .mobile{
	display: none;
}
#evtMissionPop .mission-bg{
	padding: 27px;
}
#evtMissionPop .pop-conts {
	padding: 0;
	position: absolute;
	top: 129px;
	left: 27px;
	width: calc(100% - 54px);
	height: calc(100% - 157px);
}

#evtMissionPop .pop-conts.no-footer:after{
	display: none;
}
#evtMissionPop .mission-list > li{
	display:flex;
	justify-content: flex-end;
	align-items: center;
	height: 93px;
	padding: 0 32px;
}
#evtMissionPop .mission-list > li > button{
	min-width: 63px;
	padding: 5px 15px;
	background-color: #17d485;
    border: 2px solid #19ac80;
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
}
#evtMissionPop .mission-list > li > button:disabled{
    position:relative;
    background: #ffeed0;
    border-color: #7d4b00;
    color: #baa863;
}

#evtMissionPop .mission-list > li > button:disabled:after{
    content:'완료';
    position:absolute;
    left: 50%;
    background: #ffeed0;
    color: #baa863;
    transform: translateX(-50%);
    z-index: 10;
}
#evtMissionPop .btn-pop-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	height: 58px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/06/04_lg_mission/images/popup_close.svg);
}
#evtMissionPop .btn-pop-close:before{
	display: none;
}

/* 카카오 팝업 */
#evtCheckPop {
	max-width: 454px;
	background: transparent;
	border-radius: 0;
	padding: 27px;
}
#evtCheckPop .mobile{
	display: none;
}
#evtCheckPop .mission-chk{
	position: relative;
}
#evtCheckPop .mission-confirm {
	position: absolute;
	top: 142px;
	left: 50%;
	width: 280px;
	padding: 0 24px;
	text-align: right;
	transform: translateX(-50%);
}
#evtCheckPop .mission-confirm p{
	font-size: 24px;
	font-weight: 800;
    line-height: 60px;
    font-family: 'Pretendard';
    letter-spacing: -0.5px;
}
#evtCheckPop .mission-confirm p + p{
	margin-top:10px;
}
#evtCheckPop .pop-conts.no-footer:after {
	display: none;
}
#evtCheckPop .btn-okay{
	position: absolute;
	bottom: 40px;
	left: 60px;
	width: 280px;
	height: 80px;
}
#evtCheckPop #evtCheckPopClose {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	height: 58px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/06/04_lg_mission/images/popup_close.svg);
}
#evtCheckPop .btn-pop-close:before{
	display: none;
}

@media screen and (max-width: 1460px){
	.mission-circ .title-cnt .title:before{
		width: 5.06vw;
		height: 5.06vw;
		margin-right: 1.35vw;
	}
	.mission-circ .title-cnt .mission-location .cos{
		font-size: 1.64vw;
	}
	.mission-circ .title-cnt .mission-location .mission-map{
		margin-top: .34vw;
		font-size: 1.08vw;
	}
	.mission-circ .title-cnt .mission-location .mission-map:before{
		width: 1.06vw;
		height: 1.58vw;
		margin-right: .7vw;
	}
	.mission-circ .title-cnt .mission-count {
	    height: 3.82vw;
	}
	.mission-circ .title-cnt .mission-count > * {
	    padding: 0 1.08vw;
      	font-size: 1.5vw;
	    line-height: 2.18vw;
	}
	.mission-circ .title-cnt .mission-count > *:before{
		width: 2.05vw;
		height: 2.05vw;
		margin-right: .52vw;
	}
	.mission-circ .title-cnt .mission-count > * + *:before {
	    width: 2.45vw;
	}
	.mission-circ .progress-bar {
	    height: 2.05vw;
	}
	.mission-circ .progress-bar .gsap:after{
		left: -6.2vw;
		top: -5.3vw;
		width: 9.72vw;
		height: 5.3vw;
		padding-top: 1.1vw;
		font-size: 2.3vw;
	}
  	.mission-circ.step10 .progress-bar .gsap:after{
        left: -7.9vw;
    }
	.board-cnt .btn-wrap a {
	    height: 5.48vw;
	}
}
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    .evt-intro .intro-title {
        top: 8.45%;
    }
    .evt-intro #missionStartBtn, .evt-intro .clone-evt{
        bottom: 11.6%;
        left: 8%;
        width: 83%;
        height: 10.2%;
        background-image:url(/kr/event/2024/06/04_lg_mission/images/btn_mission_start_m.png);
    }
	
	.board-cnt{
		width: calc(636 / var(--width)* 100%);
		top: 48.3vw;
	}
	.mission-circ .title-cnt {
		padding: 3vw 2.4vw;
	}
	.mission-circ .title-cnt .title:before{
		width: 10.3vw;
		height: 10.3vw;
		margin-right: 2.35vw;
	}
	.mission-circ .title-cnt .mission-location .cos{
		font-size: 3.6vw;
	}
	.mission-circ .title-cnt .mission-location .mission-map{
		margin-top: 1vw;
		font-size: 2.4vw;
	}
	.mission-circ .title-cnt .mission-location .mission-map:before{
		width: 2.45vw;
		height: 3.2vw;
		margin-right: 1.3vw;
	}
	.mission-circ .title-cnt .mission-count{
		height: 7vw;
		border-radius:8px;
	}
	.mission-circ .title-cnt .mission-count > * {
	    padding: 0 2.05vw;
	    font-size: 3.2vw;
	    line-height: 4.72vw;
	    letter-spacing: -0.6px;
	}
	.mission-circ .title-cnt .mission-count > *:before {
        width: 4.2vw;
        height: 4.2vw;
        margin-right: 1.2vw;
    }
	.mission-circ .title-cnt .mission-count > * + *:before {
        width: 4.45vw;
    }
	.progress-screen:after{
    	display: none;
    }
	.board-cnt .mission-layer {
	    padding: 7.4vw 3.8vw 6.2vw;
	}
	.mission-circ .progress-bar {
	    height: 4.45vw;
	}
	.mission-circ .progress-bar .gsap:after {
        left: -10.8vw;
        top: -9.7vw;
        width: 18.05vw;
        height: 9.7vw;
        padding-top: 1.95vw;
        font-size: 4.2vw;
    }
	.mission-circ.step10 .progress-bar .gsap:after{
        left: -14.8vw;
    }
	.board-cnt .btn-wrap {
      	margin-top: 6vw;
	 }
	.board-cnt .btn-wrap a {
	    width: 38.89vw;
	    height: 12.5vw;
	}
    .board-cnt .btn-wrap #joinBtn, .board-cnt .btn-wrap a:nth-child(1){
        background-image: url(/kr/event/2024/06/04_lg_mission/images/btn_point_m.png);
    }
    .board-cnt .btn-wrap #missionChkBtn, .board-cnt .btn-wrap a:nth-child(2){
        background-image: url(/kr/event/2024/06/04_lg_mission/images/btn_run_m.png);
    }
    
    .mission-intro{
		width: calc(640 / var(--width)* 100%);
		top: calc(190 / var(--width)* 100%);
		padding: 0 calc(40 / var(--width)* 100%);
	}
	.mission-intro .swiper-slide{
		width: calc(320 / 640 * 100%);
	}
	.mission-intro .swiper-button-prev, .mission-intro  .swiper-button-next{
		width: calc(36 / var(--width)* 100%);
		height: calc(189 / var(--width)* 100%);
	}
	.mission-intro .swiper-pagination{
      	display: block;
		bottom: -7.2vw;
		left: 0;
		width: 100%;
	}
    .mission-intro .swiper-pagination-bullet {
	    width: 2.75vw;
	    height: 2.75vw;
	    margin: 0 1vw;
	    background: #fff;
	    opacity: .3;
	}
	.mission-intro .swiper-pagination-bullet-active {
	    opacity: 1;
		transition: all .3s ease-in-out;
	}
    
    .level-intro{
		width: calc(640 / var(--width)* 100%);
		top: calc(220 / var(--width)* 100%);
		padding: 0 calc(40 / var(--width)* 100%);
	}
	.level-intro .swiper-slide{
		width: calc(320 / 640 * 100%);
	}
	.level-intro .swiper-button-prev, .level-intro  .swiper-button-next{
		width: calc(36 / var(--width)* 100%);
		height: calc(189 / var(--width)* 100%);
      	background-image: url(/kr/event/2024/06/04_lg_mission/images/btn_slide_level_m.png);
	}
	.level-intro .swiper-pagination{
      	display: block;
		bottom: -7.2vw;
		left: 0;
		width: 100%;
	}
    .level-intro .swiper-pagination-bullet {
	    width: 2.75vw;
	    height: 2.75vw;
	    margin: 0 1vw;
	    background: #fff;
	    opacity: .3;
	}
	.level-intro .swiper-pagination-bullet-active {
	    opacity: 1;
		transition: all .3s ease-in-out;
	}

    /* 카카오 횟수 팝업 */
	#evtKakaoCheckDrawPop { 
        left: 50% !important;
		top: 50% !important;
		height: auto;
		min-height: auto !important;
		transform: translate(-50%, -50%) !important;
		width: 90vw;
    }
    #evtKakaoCheckDrawPop .pc{
        display: none;
    }
	#evtKakaoCheckDrawPop .mobile{
        display: block;
    }
    #evtKakaoCheckDrawPop .channel-pop-bg{
        padding:0 4.45vw;
    }
	#evtKakaoCheckDrawPop .kakao-cnt {
	    top: 61.5vw;
	    font-size: 6.4vw;
	}
    #evtKakaoCheckDrawPop .btn-wrap {
        bottom: 7.9vw;
        left: 14vw;
        width: 62.2vw;
        height: 42.2vw;
    }
	#evtKakaoCheckDrawPop .btn-wrap a:nth-child(1){
		height: 9vw;
	}
	#evtKakaoCheckDrawPop .btn-wrap a:nth-child(2){
		height: 13.5vw;
	}
	#evtKakaoCheckDrawPop .btn-pop-close {
        top: 16.5vw;
        right: 2.9vw;
        width: 11.11vw;
        height: 11.11vw;
    }
	
    /* 미션팝업 */
    #evtMissionPop{
        left: 50% !important;
        top: 50% !important;
        height: auto;
        min-height: auto !important;
        transform: translate(-50%, -50%) !important;
		max-width: none;
        width: 83.9vw;
    }
    #evtMissionPop .pc{
        display: none;
    }
    #evtMissionPop .mobile{
        display: block;
    }
    #evtMissionPop .mission-bg{
        padding: 4.45vw;
    }
    #evtMissionPop .pop-conts {
        top: 25.5vw;
        height: calc(100% - 29.7vw);
        left: 4.2vw;
        width: calc(100% - 8.4vw);
    }
    #evtMissionPop .mission-list > li {
        height: 18.8vw;
        padding: 0 5.3vw;
    }
    #evtMissionPop .mission-list > li > button{
        min-width: 2vw;
        padding: 1.25vw 3.8vw;
        font-size: 3.2vw;
    }
    #evtMissionPop .btn-pop-close {
        width: 11.11vw;
        height: 11.11vw;
    }
	
	/* 레벨 안내 팝업 */
	#evtCheckPop {
		left: 50% !important;
		top: 50% !important;
		height: auto;
		min-height: auto !important;
		transform: translate(-50%, -50%) !important;
		width: 81.8vw;
		padding: 3.4vw;
	}
    #evtCheckPop .pc{
        display: none;
    }
	#evtCheckPop .mobile{
        display: block;
    }
	#evtCheckPop .mission-confirm {
		top: 27.2vw;
		left: 50%;
		width: 62.2vw;
		padding: 0 4.2vw;
	}
	#evtCheckPop .mission-confirm p{
		font-size: 5.4vw;
		line-height: 14.4vw;
	}
	#evtCheckPop .mission-confirm p + p{
		margin-top: 2.4vw;
	}
	#evtCheckPop .btn-okay{
		bottom: 8vw;
		left: 5.8vw;
		width: 63.4vw;
		height: 13.8vw;
	}
	#evtCheckPop #evtCheckPopClose {
	    width: 11.11vw;
	    height: 11.11vw;
	}
}
@keyframes prd-motion {
    0% {
        transform: translateY(10%);
    }
    50% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(10%);
    }
}