/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-71785
* CODE : Dev - EV00019801 , Prod - EV00007641
* FILE : /kr/event/2024/08/01_lg_mission/
* DESC : 8월 통합 미션 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/07/18				신우용				Created
************************************************************************************
**/

@font-face {
    font-family: 'Cafe24Ohsquare';
    font-weight: 400;
    font-style: normal;
    src: url('/kr/event/2024/08/01_lg_mission/fonts/Cafe24Ohsquare.eot');
    src: url('/kr/event/2024/08/01_lg_mission/fonts/Cafe24Ohsquare.eot?#iefix') format('embedded-opentype'),
        url('/kr/event/2024/08/01_lg_mission/fonts/Cafe24Ohsquare.woff2') format('woff2'),
        url('/kr/event/2024/08/01_lg_mission/fonts/Cafe24Ohsquare.woff') format('woff'),
        url('/kr/event/2024/08/01_lg_mission/fonts/Cafe24Ohsquare.ttf') format("truetype");
    font-display: swap;
}

/* 이벤트 기본 설정 */
* {
	--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 a{
	position: absolute;
	bottom: 8.7%;
    left: 50%;
    width: 29.06%;
    height: 6.64%;
    background-image:url(/kr/event/2024/08/01_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;
}

.mission-circ .mission-room{
	position:absolute;
	display: block;
	width: calc(180 / var(--width)* 100%);
    height: calc(204 / var(--width)* 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}
.mission-circ .mission-room{
	position:absolute;
	display: block;
	width: calc(180 / var(--width)* 100%);
    height: calc(204 / var(--width)* 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}
.mission-circ .mission-room:nth-of-type(1){
	bottom: calc(130 / var(--width)* 100%);
    left: calc(390 / var(--width)* 100%);
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_01.png);
}
.mission-circ .mission-room:nth-of-type(2){
	bottom: calc(130 / var(--width)* 100%);
    right: calc(390 / var(--width)* 100%);
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_02.png);
}
.mission-circ .mission-room:nth-of-type(3){
	bottom: calc(365 / var(--width)* 100%);
    right: calc(405 / var(--width)* 100%);
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_03.png);
}
.mission-circ .mission-room:nth-of-type(4){
	width: calc(184 / var(--width)* 100%);
    bottom: calc(365 / var(--width)* 100%);
    left: calc(410 / var(--width)* 100%);
    background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_04.png);
}
.mission-circ .mission-room:nth-of-type(5){
	bottom: calc(365 / var(--width)* 100%);
    left: 50%;
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_05.png);
	transform:translateX(-50%);
}
.mission-circ .mission-room:nth-of-type(6){
	bottom: calc(565 / var(--width)* 100%);
    right: calc(405 / var(--width)* 100%);
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_06.png);
}
.mission-circ .mission-room:nth-of-type(7){
	width: calc(194 / var(--width)* 100%);
	bottom: calc(565 / var(--width)* 100%);
    left: calc(415 / var(--width)* 100%);
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_07.png);
}
.mission-circ .mission-room:nth-of-type(8){
	bottom: calc(600 / var(--width)* 100%);
    left: 50%;
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_08.png);
	transform:translateX(-50%);
}

.mission-circ .mission-room:nth-of-type(1):disabled{
    background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_01_off.png);
}
.mission-circ .mission-room:nth-of-type(2):disabled{
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_02_off.png);
}
.mission-circ .mission-room:nth-of-type(3):disabled, .mission-circ .mission-room:nth-of-type(3).disabled{
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_03_off.png);
}
.mission-circ .mission-room:nth-of-type(4):disabled, .mission-circ .mission-room:nth-of-type(4).disabled{
	width: calc(198 / var(--width)* 100%);
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_04_off.png);
}
.mission-circ .mission-room:nth-of-type(5):disabled{
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_05_off.png);
}
.mission-circ .mission-room:nth-of-type(6):disabled{
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_06_off.png);
}
.mission-circ .mission-room:nth-of-type(7):disabled{
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_07_off.png);
}
.mission-circ .mission-room:nth-of-type(8):disabled{
	background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_08_off.png);
}

.mission-apply{
	position: absolute;
	display: flex;
	top: calc(57 / var(--width)* 100%);
	left: 50%;
	width: calc(1030 / var(--width)* 100%);
	height: calc(214 / var(--width)* 100%);
	transform: translateX(-50%);
	flex-wrap: wrap;
}
.mission-apply > li{
	position: relative;
	width: 50%;
	height: calc(712 / var(--width)* 100%);
}
.mission-apply > li .count{
	display: flex;
	position: absolute;
	top: calc(345 / var(--width)* 100%);
	right: calc(245 / var(--width)* 100%);
	width: calc(364 / var(--width)* 100%);
	height: calc(700 / var(--width)* 100%);
	font-size: 22px;
	text-align: center;
	font-family: 'Cafe24Ohsquare';
	color: #ED5E70;
	justify-content: center;
	align-items: center;
}
.mission-apply > li:nth-child(1){
	width:100%;
	height: calc(665 / var(--width)* 100%);
}
.mission-apply > li:nth-child(1) .count{
	width: calc(190 / var(--width)* 100%);
	right: calc(105 / var(--width)* 100%);
  	color: #fff;
}
.mission-apply > li:nth-child(3) .count{
	right: calc(205 / var(--width)* 100%);
}

.mission-ticket{
	position: absolute;
    bottom: calc(169 / var(--width)* 100%);
    left: 50%;
    width: calc(1060 / var(--width)* 100%);
    height: calc(230 / var(--width)* 100%);
	transform: translateX(-50%);
}
.mission-ticket > ul{
	display: flex;
	width: 100%;
	height: 100%;
}
.mission-ticket > ul > li{
	position: relative;
	width: 25%;
	height: 100%;
	margin: 0 calc(20 / var(--width)* 100%);
}
.mission-ticket > ul > li .btn-wrap{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(420 / var(--width)* 100%);
}
.mission-ticket > ul > li .btn-wrap a{
	display:block;
	width:100%;
	height: 100%;
}
.mission-ticket > ul > li .ticket-use{
	position: absolute;
    display: flex;
    bottom: calc(170 / var(--width)* 100%);
    right: calc(210 / var(--width)* 100%);
    width: calc(495 / var(--width)* 100%);
    height: calc(265 / var(--width)* 100%);
    font-size: 18px;
    font-family: 'Pretendard';
    color: #E24848;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    letter-spacing: -0.5px;
}

.evt-btn-area.mission-coupon{
	bottom: 0;
	margin-bottom: calc(330 / var(--width)* 100%);
	padding-bottom: calc(80 / var(--width)* 100%);
}
.evt-btn-area.mission-coupon button{
	width: calc(380 / var(--width)* 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/08/01_lg_mission/images/btn_coupon_down.png);
}
.evt-btn-area.mission-coupon button:disabled{
	background-image: url(/kr/event/2024/08/01_lg_mission/images/btn_coupon_down_before.png);
}
.evt-btn-area.mission-coupon .cp-finish{
	display: none; */
    position: absolute;
    top: -2px;
    left: 50%;
    width: calc(382 / var(--width)* 100%);
    height: calc(100% + 2px);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-image: url(/kr/event/2024/08/01_lg_mission/images/btn_coupon_down_c.png);
    transform: translateX(-50%);
	z-index: 1;
}
.evt-btn-area.mission-coupon .cp-complete + .cp-finish{
	display: block;
}
/* 응모횟수 */
#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: 46.9%;
	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: #ed5e70;
}

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

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

@media screen and (max-width: 1460px){
	.mission-apply > li .count{
		font-size: 1.55vw;
	}
	.mission-ticket > ul > li .ticket-use{
		font-size: 1.24vw;
	}
}
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    .evt-intro .intro-title {
        top: 8.45%;
    }
    .evt-intro a{
        bottom: 10%;
		width: 55.56%;
        height: 7.1%;
        background-image:url(/kr/event/2024/08/01_lg_mission/images/btn_mission_start_m.png);
    }
	
	.mission-circ .mission-room{
		width: calc(200 / var(--width)* 100%);
		height: calc(102 / var(--width)* 100%);
	}
	.mission-circ .mission-room:nth-of-type(1){
		bottom: calc(75 / var(--width)* 100%);
    	left: calc(20 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_01.png);
	}
	.mission-circ .mission-room:nth-of-type(2){
		bottom: calc(75 / var(--width)* 100%);
    	right: calc(20 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_02.png);
	}
	.mission-circ .mission-room:nth-of-type(3){
		bottom: calc(200 / var(--width)* 100%);
		right: calc(35 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_03.png);
	}
	.mission-circ .mission-room:nth-of-type(4){
		width: calc(216 / var(--width)* 100%);
		bottom: calc(200 / var(--width)* 100%);
		left: calc(20 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_04.png);
	}
	.mission-circ .mission-room:nth-of-type(5){
		bottom: calc(200 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_05.png);
	}
	.mission-circ .mission-room:nth-of-type(6){
		bottom: calc(315 / var(--width)* 100%);
    	right: calc(35 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_06.png);
	}
	.mission-circ .mission-room:nth-of-type(7){
    	width: calc(228 / var(--width)* 100%);
        bottom: calc(315 / var(--width)* 100%);
        left: calc(30 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_07.png);
	}
	.mission-circ .mission-room:nth-of-type(8){
		bottom: calc(330 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_08.png);
	}
	
	.mission-circ .mission-room:nth-of-type(1):disabled{
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_01_off.png);
	}
	.mission-circ .mission-room:nth-of-type(2):disabled{
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_02_off.png);
	}
	.mission-circ .mission-room:nth-of-type(3):disabled, .mission-circ .mission-room:nth-of-type(3).disabled{
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_03_off.png);
	}
	.mission-circ .mission-room:nth-of-type(4):disabled, .mission-circ .mission-room:nth-of-type(4).disabled{
    	width: calc(209 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_04_off.png);
	}
	.mission-circ .mission-room:nth-of-type(5):disabled{
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_05_off.png);
	}
	.mission-circ .mission-room:nth-of-type(6):disabled{
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_06_off.png);
	}
	.mission-circ .mission-room:nth-of-type(7):disabled{
    	width: calc(205 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/m_mission_window_07_off.png);
	}
	.mission-circ .mission-room:nth-of-type(8):disabled{
		background-image: url(/kr/event/2024/08/01_lg_mission/images/mission_window_08_off.png);
	}

	.mission-apply {
		top: 0;
		width: calc(600 / var(--width)* 100%);
		height: calc(123 / var(--width)* 100%);
	}
	.mission-apply > li{
		height: calc(465 / var(--width)* 100%);
	}
	.mission-apply > li .count{
		top: calc(480 / var(--width)* 100%);
		right: auto;
		left: 50%;
		width: calc(355 / var(--width)* 100%);
		height: calc(170 / var(--width)* 100%);
		font-size: 3.6vw;
		transform: translateX(-50%);
	}
	.mission-apply > li:nth-child(1){
		height: calc(252 / var(--width)* 100%);
	}
	.mission-apply > li:nth-child(1) .count{
		width: calc(158 / var(--width)* 100%);
		height: calc(310 / var(--width)* 100%);
		top: calc(210 / var(--width)* 100%);
		right: calc(34 / var(--width)* 100%);
		left: auto;
		transform: translateX(0);
	}
	.mission-apply > li:nth-child(3) .count{
		right: auto;
	}
	
	.mission-ticket{
        bottom: calc(60 / var(--width)* 100%);
        width: calc(620 / var(--width)* 100%);
        height: calc(292 / var(--width)* 100%);100%);
   }
	.mission-ticket > ul {
		flex-wrap: wrap;
	}
    .mission-ticket > ul > li {
		width: calc(50% - 3vw);
		height: calc(186 / var(--width)* 100%);
		margin: 0 1.5vw;
	}
	.mission-ticket > ul > li:nth-child(3), .mission-ticket > ul > li:nth-child(4){
		margin-top: calc(518 / var(--width)* 100%);
	}
	.mission-ticket > ul > li .btn-wrap {
		height: calc(240 / var(--width)* 100%);
	}
	.mission-ticket > ul > li .ticket-use {
		bottom: calc(96 / var(--width)* 100%);
        right: calc(95 / var(--width)* 100%);
        width: calc(270 / var(--width)* 100%);
        height: calc(115 / var(--width)* 100%);
        font-size: 2.8vw;
	}
	.evt-btn-area.mission-coupon {
      	margin-bottom: calc(370 / var(--width)* 100%);
		padding-bottom: calc(100 / var(--width)* 100%);
	}
	.evt-btn-area.mission-coupon button {
		width: calc(480 / var(--width)* 100%);
		background-image: url(/kr/event/2024/08/01_lg_mission/images/btn_coupon_down_m.png);
	}
    .evt-btn-area.mission-coupon button:disabled{
        background-image: url(/kr/event/2024/08/01_lg_mission/images/btn_coupon_down_before_m.png);
    }
    .evt-btn-area.mission-coupon .cp-finish{
        width: calc(482 / var(--width)* 100%);
        background-image: url(/kr/event/2024/08/01_lg_mission/images/btn_coupon_down_c_m.png);
    }
    /* 카카오 횟수 팝업 */
	#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: 56.7vw;
	    font-size: 6.4vw;
	}
    #evtKakaoCheckDrawPop .btn-wrap {
        bottom: 7.9vw;
        left: 14vw;
        width: 62.2vw;
        height: 45.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: 12.2vw;
        right: 2.9vw;
        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;
	}
}