/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-68576
* CODE : Dev - EV00019651 , Prod - EV00007511
* FILE : /kr/event/2024/07/02_lg_mission/
* DESC : 7월 통합_트로피 모으기 미션 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/06/17				신우용				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: 6.2%;
    left: 50%;
    width: 34.79%;
    height: 9.43%;
    background-image:url(/kr/event/2024/07/02_lg_mission/images/btn_mission_start.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	transform: translateX(-50%);
}
.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: 72px;
	height: 73px;
	margin-right: 20px;
	background-image:url(/kr/event/2024/07/02_lg_mission/images/ico_profile.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	vertical-align: middle;
}
.mission-circ.step3 .title-cnt .title:before, .mission-circ.step4 .title-cnt .title:before{
	background-image:url(/kr/event/2024/07/02_lg_mission/images/ico_profile2.svg);
}
.mission-circ.step5 .title-cnt .title:before, .mission-circ.step6 .title-cnt .title:before{
	background-image:url(/kr/event/2024/07/02_lg_mission/images/ico_profile3.svg);
}
.mission-circ.step7 .title-cnt .title:before, .mission-circ.step8 .title-cnt .title:before{
	background-image:url(/kr/event/2024/07/02_lg_mission/images/ico_profile4.svg);
}
.mission-circ.step9 .title-cnt .title:before{
	background-image:url(/kr/event/2024/07/02_lg_mission/images/ico_profile5.svg);
}
.mission-circ.step10 .title-cnt .title:before{
	background-image:url(/kr/event/2024/07/02_lg_mission/images/ico_profile6.svg);
}
.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-finish{
	display: none;
	font-size: 24px;
	color: #251d8d;
	font-weight:700;
}
.mission-circ.step10 .title-cnt .mission-location .cos{
	display: none;
}
.mission-circ.step10 .title-cnt .mission-location .mission-finish{
	display: block;
}
.mission-circ .title-cnt .mission-location .mission-map{
	display: block;
	margin-top: 5px;
	font-size: 16px;
	color: #251d8d;
	font-weight:500;
  	letter-spacing: -0.7px;
}
.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/07/02_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: 32px;
	height: 36px;
	margin-right: 8px;
	background-image:url(/kr/event/2024/07/02_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: 31px;
    height: 27px;
	background-image:url(/kr/event/2024/07/02_lg_mission/images/ico_lv.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;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding-top: 56.25%;
}
.progress-screen p{
	font-size: 20px;
  	font-weight:500;
  	font-family: 'Pretendard';
}
.progress-screen video{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 101%;
	height: 101%;
	transform: translate(-50%,-50%);
	object-fit: fill;
}

.mission-circ .progress-bar{
	width: 100%;
	height: 30px;
	background-color: #e9f6f6;
	border-radius: 25px;
	box-shadow: 0 .6px 0 0 #8499b9 inset;
}
.mission-circ .progress-bar > div{
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 25px;
}
.mission-circ .progress-bar .gsap{
	position: absolute;
	left: 0;
	top: 0;
	width: 5%;
	height: 100%;
	background: linear-gradient(90deg, #04E0FE 0%, #05FE0F 100%);
	border-radius: 25px;
	z-index: 10;
}
.mission-circ .progress-bar .gsap .m-length{
	position:absolute;
	right: -52px;
	top: -70px;
	width: 115px;
	height: 73px;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
	background-image: url(/kr/event/2024/07/02_lg_mission/images/ico_balloons.svg);
}
.mission-circ .progress-bar .gsap .m-length:after{
	content:'';
	position:absolute;
	top: 15px;
	right: 30px;
	font-size: 27px;
	color:#000;
	font-weight: 600;
	letter-spacing:-0.5px;
	font-family: 'Pretendard';
}
.mission-circ.step1 .progress-bar .gsap .m-length:after{
	content:'1';
}
.mission-circ.step2 .progress-bar .gsap .m-length:after{
	content:'2';
}
.mission-circ.step3 .progress-bar .gsap .m-length:after{
	content:'3';
}
.mission-circ.step4 .progress-bar .gsap .m-length:after{
	content:'4';
}
.mission-circ.step5 .progress-bar .gsap .m-length:after{
	content:'5';
}
.mission-circ.step6 .progress-bar .gsap .m-length:after{
	content: '6';
}
.mission-circ.step7 .progress-bar .gsap .m-length:after{
	content:'7';
}
.mission-circ.step8 .progress-bar .gsap .m-length:after{
	content:'8';
}
.mission-circ.step9 .progress-bar .gsap .m-length:after{
	content:'9';
}
.mission-circ.step10 .progress-bar .gsap .m-length:after{
	content:'10';
	right: 22px;
}

.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: 82px;
	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/07/02_lg_mission/images/btn_mission_join.png);
}
.board-cnt .btn-wrap #missionChkBtn, .board-cnt .btn-wrap a:nth-child(2){
	background-image: url(/kr/event/2024/07/02_lg_mission/images/btn_mission_chk.png);
}

.mission-intro{
	position: absolute;
	width: calc(1040 / var(--width)* 100%);
	top: calc(400 / 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-slide.bonus:after {
    content: '';
    position: absolute;
    top: -1px;
    right: 1px;
    width: 63px;
    height: 63px;
    background: url(/kr/event/2024/07/02_lg_mission/images/ico_bonus.svg) no-repeat 0 0;
    background-size: 100% auto;
}
.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 !important;
	background-image: url(/kr/event/2024/07/02_lg_mission/images/btn_slide_mission.png);
	background-size: 100% auto;
	transform: translateY(-50%);
}

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

.mission-intro .swiper-button-next, .event-benefit-template .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(400 / 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 !important;
	background-image: url(/kr/event/2024/07/02_lg_mission/images/btn_slide_level.png);
	background-size: 100% auto;
	transform: translateY(-50%);
}

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

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

[id^="evt"].popup-wrap{
}
/* 응모횟수 */
#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: 45.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: 38%;
}

#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: 60px;
	right: 5px;
	width: 58px;
	height: 58px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/07/02_lg_mission/images/popup_close.svg);
}
#evtKakaoCheckDrawPop .btn-pop-close:before{
	display: none;
}

/* 미션 팝업 */
#evtMissionPop {
	max-width: 454px;
	border-radius: 0;
	background: transparent;
	position: relative;
	padding: 27px;
}
#evtMissionPop .mobile{
	display: none;
}
#evtMissionPop .mission-bg{
	overflow: hidden;
	padding: 100px 0 0;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_top.png);
	background-color: #fff;
	border-radius: 18px;
}
#evtMissionPop .pop-conts {
	padding:0;
	height: 460px;
}

#evtMissionPop .pop-conts.no-footer:after{
	display: none;
}
#evtMissionPop .mission-list > li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 93px;
	padding: 0 32px;
}
#evtMissionPop .mission-list > li + li{
	border-top: 1px dotted #d0b7ac;
}
#evtMissionPop .mission-list > li .list{
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left 50%;
	background-size: 115% auto;
}
#evtMissionPop .mission-list > li:nth-child(1) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list01.png);
}
#evtMissionPop .mission-list > li:nth-child(2) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list02.png);
}
#evtMissionPop .mission-list > li:nth-child(3) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list03.png);
}
#evtMissionPop .mission-list > li:nth-child(4) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list04.png);
}
#evtMissionPop .mission-list > li:nth-child(5) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list05.png);
}
#evtMissionPop .mission-list > li:nth-child(6) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list06.png);
}
#evtMissionPop .mission-list > li:nth-child(7) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list07.png);
}
#evtMissionPop .mission-list > li:nth-child(8) .list{
	background-image: url(/kr/event/2024/07/02_lg_mission/images/pop_mission_list08.png);
}
#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;
	text-align: center;
}
#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;
    top: 50%;
    left: 50%;
    background: #ffeed0;
    color: #baa863;
    transform: translate(-50%, -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/07/02_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/07/02_lg_mission/images/popup_close.svg);
}
#evtCheckPop .btn-pop-close:before{
	display: none;
}

/* 카톡 채널 추가하기 */
#evtAddChannel {
	max-width: 482px;
	background: transparent;
	border-radius: 0;
}
#evtAddChannel .mobile{
	display: none;
}
#evtAddChannel .pop-conts.no-footer:after {
	display: none;
}
#evtAddChannel .channel-chk{
	padding: 27px;
	position: relative;
}

#evtAddChannel .btn-wrap {
	position: absolute;
	bottom: 11.5%;
	left: 50%;
	width: 79.4%;
	height: 16%;
	transform: translateX(-50%);
}
#evtAddChannel .btn-wrap > div {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: space-between;
	align-items: center;
}
#evtAddChannel .btn-wrap > div a{
	flex: 1;
	display: block;
	width: 100%;
	height: 100%;
}
#evtAddChannel #evtAddChannelClose {
	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/07/02_lg_mission/images/popup_close.svg);
}
#evtAddChannel .btn-pop-close:before{
	display: none;
}

@media screen and (max-width: 1460px){
	.mission-circ .title-cnt .title:before{
		width: 4.92vw;
		height: 4.98vw;
		margin-right: 1.35vw;
	}
	.mission-circ .title-cnt .mission-location .cos, .mission-circ .title-cnt .mission-location .mission-finish{
		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.18vw;
        height: 2.46vw;
		margin-right: .52vw;
	}
	.mission-circ .title-cnt .mission-count > * + *:before {
	    width: 2.1vw;
        height: 1.84vw;
	}
	.mission-circ .progress-bar {
	    height: 2.05vw;
	}
	.mission-circ .progress-bar .gsap .m-length{
		right: -3.3vw;
    	top: -4.8vw;
		width: 7.86vw;
		height: 4.95vw;
	}
	.mission-circ .progress-bar .gsap .m-length:after {
	    top: 1.05vw;
	    right: 2.1vw;
	    font-size: 1.84vw;
	}
	.mission-circ.step10 .progress-bar .gsap .m-length:after {
	    right: 1.5vw;
	}
	.board-cnt .btn-wrap a {
	    height: 5.61vw;
	}
}
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    .evt-intro .intro-title {
        top: 8.45%;
    }
    .evt-intro #missionStartBtn, .evt-intro .clone-evt{
        bottom: 10%;
    	width: 75%;
        height: 12%;
        background-image:url(/kr/event/2024/07/02_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, .mission-circ .title-cnt .mission-location .mission-finish{
		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;
    }
	.board-cnt .mission-layer {
	    padding: 7.4vw 3.8vw 6.2vw;
	}
    .progress-screen {
      	padding-top: 81.9%;
    }
	.mission-circ .progress-bar {
	    height: 4.45vw;
	}
	.mission-circ .progress-bar .gsap .m-length {
        right: -5.3vw;
        top: -8.8vw;
        width: 14.6vw;
        height: 8.2vw;
    }
	.mission-circ .progress-bar .gsap .m-length:after {
        right: 3.2vw;
        top: 1.8vw;
        font-size: 3.8vw;
    }
	.mission-circ.step10 .progress-bar .gsap .m-length:after{
		top: 2vw;
		right: 2.6vw;
		font-size: 3.6vw;
	}
	.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/07/02_lg_mission/images/btn_mission_join_m.png);
	}
	.board-cnt .btn-wrap #missionChkBtn, .board-cnt .btn-wrap a:nth-child(2){
		background-image: url(/kr/event/2024/07/02_lg_mission/images/btn_mission_chk_m.png);
	}
    
    .mission-intro{
		width: calc(640 / var(--width)* 100%);
		top: calc(180 / var(--width)* 100%);
		padding: 0 calc(40 / var(--width)* 100%);
	}
	.mission-intro .swiper-slide{
		width: calc(320 / 640 * 100%);
	}
	.mission-intro .swiper-slide.bonus:after{
		width: 12.3vw;
		height: 12.3vw;
	}
	.mission-intro .swiper-button-prev, .mission-intro  .swiper-button-next, .event-benefit-template .mission-intro .swiper-button-prev,  .event-benefit-template .mission-intro  .swiper-button-next{
		width: calc(25 / var(--width)* 100%);
		height: calc(189 / var(--width)* 100%);
      	background-image: url(/kr/event/2024/07/02_lg_mission/images/btn_slide_mission_m.png);
      	box-shadow: none;
	}
	.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: #d4e954;
        opacity: 1;
	}
	.mission-intro .swiper-pagination-bullet-active {
	    background: #11c54e;
		transition: all .3s ease-in-out;
	}
    
    .level-intro{
		width: calc(640 / var(--width)* 100%);
		top: calc(200 / 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, .event-benefit-template .level-intro .swiper-button-prev, .event-benefit-template .level-intro  .swiper-button-next{
		width: calc(25 / var(--width)* 100%);
		height: calc(189 / var(--width)* 100%);
      	background-image: url(/kr/event/2024/07/02_lg_mission/images/btn_slide_level_m.png);
      	box-shadow: none;
	}
	.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 {
	    background: #17aeef;
      	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: 49.5vw;
	    font-size: 6.4vw;
	}
    #evtKakaoCheckDrawPop .btn-wrap {
        bottom: 7.9vw;
        left: 14vw;
        width: 62.2vw;
        height: 43.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: 6.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;
        padding: 4.45vw;
    }
    #evtMissionPop .pc{
        display: none;
    }
    #evtMissionPop .mobile{
        display: block;
    }
    #evtMissionPop .pop-conts {
        padding: 0;
        height: 85.6vw;
    }
    #evtMissionPop .pop-conts::-webkit-scrollbar {
	    width: 5px;
	}
	#evtMissionPop .pop-conts::-webkit-scrollbar-thumb {
	    background-color: #a9a9a9;
	}
    #evtMissionPop .mission-bg{
        padding: 21.1vw 0 0;
        background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_top.png);
    }
    #evtMissionPop .mission-list > li {
        height: 18.8vw;
        padding: 0 5.3vw;
    }
	#evtMissionPop .mission-list > li:nth-child(1) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list01.png);
	}
	#evtMissionPop .mission-list > li:nth-child(2) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list02.png);
	}
	#evtMissionPop .mission-list > li:nth-child(3) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list03.png);
	}
	#evtMissionPop .mission-list > li:nth-child(4) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list04.png);
	}
	#evtMissionPop .mission-list > li:nth-child(5) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list05.png);
	}
	#evtMissionPop .mission-list > li:nth-child(6) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list06.png);
	}
	#evtMissionPop .mission-list > li:nth-child(7) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list07.png);
	}
	#evtMissionPop .mission-list > li:nth-child(8) .list{
		background-image: url(/kr/event/2024/07/02_lg_mission/images/m_pop_mission_list08.png);
	}
    #evtMissionPop .mission-list > li > button{
        min-width: 15vw;
        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;
	}
    /* 카톡 채널 추가하기 */
	#evtAddChannel {
		left: 50% !important;
		top: 50% !important;
		height: auto;
		min-height: auto !important;
		transform: translate(-50%, -50%) !important;
		width: 84.1vw;
	}
    #evtAddChannel .pc{
        display: none;
    }
	#evtAddChannel .mobile{
        display: block;
    }
    #evtAddChannel .channel-chk{
        padding: 4.45vw;
    }
    #evtAddChannel .btn-wrap {
        bottom: 10.9vw;
        width: 66.2vw;
        height: 14.2vw;
    }
    #evtAddChannel #evtAddChannelClose{
	    width: 11.11vw;
	    height: 11.11vw;
	}
}

@media screen and (max-width: 380px){
  .mission-circ .title-cnt .title:before {
      width: 8.3vw;
      height: 8.3vw;
      margin-right: 1.5vw;
  }
}