/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-71785
* CODE : Dev - EV00019882 , Prod - EV00007722
* FILE : /kr/event/2024/09/03_lg_mission/
* DESC : 9월 통합 미션 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/08/18				신우용				Created
************************************************************************************
**/
@font-face {
    font-family: 'Cafe24Ohsquare';
    font-weight: 400;
    font-style: normal;
    src: url('/kr/event/2024/09/03_lg_mission/fonts/Cafe24Ohsquare.eot');
    src: url('/kr/event/2024/09/03_lg_mission/fonts/Cafe24Ohsquare.eot?#iefix') format('embedded-opentype'),
        url('/kr/event/2024/09/03_lg_mission/fonts/Cafe24Ohsquare.woff2') format('woff2'),
        url('/kr/event/2024/09/03_lg_mission/fonts/Cafe24Ohsquare.woff') format('woff'),
        url('/kr/event/2024/09/03_lg_mission/fonts/Cafe24Ohsquare.ttf') format("truetype");
    font-display: swap;
}

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

.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/09/03_lg_mission/images/btn_mission_start.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% auto;
  transform: translateX(-50%);
}

.mission-circ {
  	display: none;
  	position: relative;
}
.board-cnt{
	position: absolute;
	top: calc(250 / var(--width)* 100%);
	left: 50%;
	width: calc(895 / var(--width)* 100%);
	background-color: #323766;
	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/09/03_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: #fff;
	font-weight:700;
}
.mission-circ .title-cnt .mission-location .mission-finish{
	display: none;
	font-size: 24px;
	color: #fff;
	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: #fff;
	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/09/03_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-radius: 16px;
	border: 1px solid rgba(235, 235, 235, 0.20);
	background: rgba(255, 255, 255, 0.20);
}
.mission-circ .title-cnt .mission-count > *{
	display: inline-flex;
	position:relative;
	height: 100%;
	padding: 0 16px;
	font-size: 22px;
	line-height: 34px;
	color: #fff;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	font-family: 'Pretendard';
}
.mission-circ .title-cnt .mission-count > *:before{
	content:'';
	display:inline-block;
	width: 36px;
	height: 36px;
	margin-right: 8px;
	background-image:url(/kr/event/2024/09/03_lg_mission/images/ico_moon.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size: 64px 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/09/03_lg_mission/images/ico_lv.svg);
	background-size:100% auto;
}
.progress-screen{
  	overflow: hidden;
  	position: relative;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.progress-screen video{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 101%;
	height: 101%;
	transform: translate(-50%,-50%);
	object-fit: fill;
}

.board-cnt .mission-layer{
	position: relative;
}
.board-cnt .mission-layer:before{
	content:'Now';
	position: absolute;
	top: calc(-120 / var(--width)* 100%);
    left: calc(130 / var(--width)* 100%);
	width: calc(182 / var(--width)* 100%);
    height: calc(400 / var(--width)* 100%);
	padding-top: calc(20 / var(--width)* 100%);
	font-size: 24px;
	color: #fff;
	font-weight: 700;
	font-family: 'Pretendard';
	background-image:url(/kr/event/2024/09/03_lg_mission/images/ico_bubble.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
.step2 .board-cnt .mission-layer:before{
	left: calc(350 / var(--width)* 100%);
}
.step3 .board-cnt .mission-layer:before{
	left: calc(590 / var(--width)* 100%);
}
.step4 .board-cnt .mission-layer:before{
	left: calc(820 / var(--width)* 100%);
}
.step5 .board-cnt .mission-layer:before{
	content:'Finish';
	left: calc(1065 / var(--width)* 100%);
}

.evt-btn-area.mission-daily{
	bottom: 0;
	left: 50%;
	width: calc(870 / var(--width)* 100%);
    margin-bottom: calc(100 / var(--width)* 100%);
    padding-bottom: calc(370 / var(--width)* 100%);
	transform: translateX(-50%);
}
.evt-btn-area.mission-daily > div{
	justify-content: space-between;
}
.evt-btn-area.mission-daily button{
	width: calc(425 / var(--width)* 100%);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
.evt-btn-area.mission-daily button:nth-child(1){
	background-image:url(/kr/event/2024/09/03_lg_mission/images/img_misson_btn01.png);
}
.evt-btn-area.mission-daily button:nth-child(2){
	background-image:url(/kr/event/2024/09/03_lg_mission/images/img_misson_btn02.png);
}
.evt-btn-area.mission-daily button:nth-child(3){
	background-image:url(/kr/event/2024/09/03_lg_mission/images/img_misson_btn04.png);
}
.evt-btn-area.mission-daily button:nth-child(1):disabled{
	background-image:url(/kr/event/2024/09/03_lg_mission/images/img_misson_btn01_off.png);
}
.evt-btn-area.mission-daily button:nth-child(2):disabled{
	background-image:url(/kr/event/2024/09/03_lg_mission/images/img_misson_btn02_off.png);
}
.evt-btn-area.mission-daily button:nth-child(3):disabled{
	background-image:url(/kr/event/2024/09/03_lg_mission/images/img_misson_btn04_off.png);
}

.mission-apply{
	position: absolute;
	display: flex;
	top: calc(182 / var(--width)* 100%);
	left: 50%;
	width: calc(895 / var(--width)* 100%);
	height: calc(208 / 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(182 / 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: #4E5EA4;
	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(62 / var(--width)* 100%);
	color: #fff;
}
.mission-apply > li:nth-child(3) .count{
	right: calc(132 / var(--width)* 100%);
}

.mission-ticket{
	position: absolute;
	bottom: calc(238 / var(--width)* 100%);
	left: 50%;
	width: calc(920 / var(--width)* 100%);
	height: calc(227 / 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(180 / var(--width)* 100%);
    left: 50%;
    width: calc(1100 / var(--width)* 100%);
    height: calc(265 / var(--width)* 100%);
    font-size: 18px;
    font-family: 'Pretendard';
  	font-weight: 400;
    color: #4E5EA4;
    justify-content: center;
    align-items: center;
    letter-spacing: -0.9px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: #F1F4FF;
}
.mission-ticket > ul > li .ticket-use strong{
	display:inline-block;
	margin-left: 3px;
	font-weight: 700;
	vertical-align:middle;
}
/* 미션 쿠폰 다운로드 */
.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;
}

@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;
	}
	.board-cnt .mission-layer:before{
		font-size: 1.75vw;
	}
	.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 a{
        bottom: 10%;
		width: 55.56%;
        height: 7.1%;
        background-image:url(/kr/event/2024/09/03_lg_mission/images/btn_mission_start_m.png);
    }
	.board-cnt{
		width: calc(636 / var(--width)* 100%);
		top: 57.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;
		background-size: 8.7vw auto;
    }
	.mission-circ .title-cnt .mission-count > * + *:before {
        width: 4.45vw;
		background-size: 100% auto;
    }

	.board-cnt .mission-layer:before {
		top: -5.4vw;
		left: 3vw;
		width: 17vw;
		height: 10vw;
		padding-top: 1.8vw;
		font-size: 4vw;
	}
	.step2 .board-cnt .mission-layer:before{
		left: 18.5vw;
	}
	.step3 .board-cnt .mission-layer:before{
		left: 35.1vw;
	}
	.step4 .board-cnt .mission-layer:before{
		left: 51.4vw;
	}
	.step5 .board-cnt .mission-layer:before{
		left: 68.8vw;
	}

	.evt-btn-area.mission-daily{
		width: calc(680 / var(--width)* 100%);
        margin-bottom: calc(170 / var(--width)* 100%);
        padding-bottom: calc(397 / var(--width)* 100%);
	}
	.evt-btn-area.mission-daily button{
		width: calc(230 / var(--width)* 100%);
	}
	.evt-btn-area.mission-daily button:nth-child(1){
		background-image:url(/kr/event/2024/09/03_lg_mission/images/m_img_misson_btn01.png);
	}
	.evt-btn-area.mission-daily button:nth-child(2){
		background-image:url(/kr/event/2024/09/03_lg_mission/images/m_img_misson_btn02.png);
	}
	.evt-btn-area.mission-daily button:nth-child(3){
		background-image:url(/kr/event/2024/09/03_lg_mission/images/m_img_misson_btn04.png);
	}
	.evt-btn-area.mission-daily button:nth-child(1):disabled{
		background-image:url(/kr/event/2024/09/03_lg_mission/images/m_img_misson_btn01_off.png);
	}
	.evt-btn-area.mission-daily button:nth-child(2):disabled{
		background-image:url(/kr/event/2024/09/03_lg_mission/images/m_img_misson_btn02_off.png);
	}
	.evt-btn-area.mission-daily button:nth-child(3):disabled{
		background-image:url(/kr/event/2024/09/03_lg_mission/images/m_img_misson_btn04_off.png);
	}

	.mission-apply {
		top: calc(58 / var(--width)* 100%);
        width: calc(600 / var(--width)* 100%);
        height: calc(116 / var(--width)* 100%);
	}
	.mission-apply > li{
		height: calc(465 / var(--width)* 100%);
	}
	.mission-apply > li .count{
		top: calc(450 / 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(56 / var(--width)* 100%);
        width: calc(620 / var(--width)* 100%);
        height: calc(279 / var(--width)* 100%);
   }
	.mission-ticket > ul {
		flex-wrap: wrap;
	}
    .mission-ticket > ul > li {
		width: calc(50% - 3vw);
		height: calc(190 / var(--width)* 100%);
		margin: 0 1.5vw;
	}
	.mission-ticket > ul > li:nth-child(3), .mission-ticket > ul > li:nth-child(4){
		margin-top: calc(520 / var(--width)* 100%);
	}
	.mission-ticket > ul > li .btn-wrap {
		height: calc(240 / var(--width)* 100%);
	}
	.mission-ticket > ul > li .ticket-use {
		bottom: calc(90 / var(--width)* 100%);
        width: calc(490 / var(--width)* 100%);
        height: calc(115 / var(--width)* 100%);
        font-size: 3.2vw;
	}
      
	.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);
    }
}