/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-76268
* CODE : Dev - EV00019991 , Prod - EV00007821
* FILE : /kr/event/2024/10/01_lg_mission/
* DESC : 10월 통합 미션 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/09/11				신우용				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 #missionStartBtn{
    position: absolute;
    bottom: 8.7%;
    left: 50%;
    width: 29.06%;
    height: 6.64%;
    background-image:url(/kr/event/2024/10/01_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(220 / var(--width)* 100%);
	left: 0;
	width: 100%;
}
.mission-circ .title-cnt{
	position: relative;
	display: flex;
	padding: calc(46 / var(--width)* 100%) calc(62 / var(--width)* 100%);
    background-color: #fff;
    border-radius: 40px;
	justify-content: space-between;
    align-items: center;
}
.mission-circ .title-cnt .progress-bar{
	position: relative;
    width: calc(850 / var(--width)* 100%);
    height: 28px;
    background-image:url(/kr/event/2024/10/01_lg_mission/images/bar_bg.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
    border-radius: 25px;
}
.mission-circ .title-cnt .progress-bar > span{
	position: absolute;
    left: 0;
    top: 0;
    width: 10%;
    height: 100%;
    background-image: url(/kr/event/2024/10/01_lg_mission/images/bar_gap.png);
    background-size: auto 100%;
    background-position: left 50%;
    background-repeat: no-repeat;
    border-radius: 25px;
    z-index: 10;
}

.mission-circ .title-cnt .score {
	display: flex;
	justify-content: space-between;
    align-items: center;
}
.mission-circ .title-cnt .score .title{
	display: none;
}
.mission-circ .title-cnt .mission-count{
	display: flex;
	height: 32px;
	align-items: center;
	border-radius: 16px;
}
.mission-circ .title-cnt .mission-count > *{
	display: inline-flex;
	position:relative;
	height: 100%;
	font-size: 20px;
	line-height: 1.2;
	color: #3A3A3A;
	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: 32px;
	margin-right: 8px;
	background-image:url(/kr/event/2024/10/01_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 > * + *{
	padding-left: 40px;
}
.mission-circ .title-cnt .mission-count > * + *:before{
	width: 31px;
    height: 27px;
	background-image:url(/kr/event/2024/10/01_lg_mission/images/ico_lv.svg);
	background-size:100% auto;
}
.mission-circ .title-cnt .mission-count > * + *:after{
	content:'';
	position: absolute;
	left: 20px;
	top: 50%;
	width: 1px;
	height: 24px;
	background: rgba(0,0,0,.1);
	transform: translateY(-50%);
	z-index: 1;
}
.progress-screen{
  	overflow: hidden;
  	position: relative;
  	display: flex;
  	width: calc(714 / var(--width)* 100%);
  	margin: 0 auto;
  	align-items: center;
  	justify-content: center;
}

.board-cnt .mission-layer{
	position: absolute;
	bottom: calc(-220 / var(--width)* 100%);
	left: 50%;
	width: calc(943 / var(
	--width)* 100%);
	height: calc(348 / var(
	--width)* 100%);
	margin: 0 auto;
	background-image:url('/kr/event/2024/10/01_lg_mission/images/img_mission_status01.png');
	background-repeat:no-repeat;
	background-position:center center;
	background-size: 100% auto;
	transform: translateX(-50%);
}
.board-cnt .mission-layer:before{
	content:'Now';
	position: absolute;
	top: calc(-120 / var(--width)* 100%);
    left: calc(85 / 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/10/01_lg_mission/images/ico_bubble.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}

.step2 .board-cnt .mission-layer{
  	background-image:url('/kr/event/2024/10/01_lg_mission/images/img_mission_status02.png');
}
.step3 .board-cnt .mission-layer{
  	background-image:url('/kr/event/2024/10/01_lg_mission/images/img_mission_status03.png');
}
.step4 .board-cnt .mission-layer{
  	background-image:url('/kr/event/2024/10/01_lg_mission/images/img_mission_status04.png');
}
.step5 .board-cnt .mission-layer{
  	background-image:url('/kr/event/2024/10/01_lg_mission/images/img_mission_status05.png');
}

.step2 .board-cnt .mission-layer:before{
	left: calc(325 / var(--width)* 100%);
}
.step3 .board-cnt .mission-layer:before{
	left: calc(575 / var(--width)* 100%);
}
.step4 .board-cnt .mission-layer:before{
	left: calc(825 / var(--width)* 100%);
}
.step5 .board-cnt .mission-layer:before{
	left: calc(1065 / var(--width)* 100%);
}

.evt-btn-area.mission-daily{
	bottom: calc(-60 / var(--width)* 100%);
    left: 50%;
    width: calc(870 / var(--width)* 100%);
    padding-bottom: calc(290 / var(--width)* 100%);
    transform: translateX(-50%);
    z-index: 1;
}
.evt-btn-area.mission-daily > div{
	justify-content: space-between;
}
.evt-btn-area.mission-daily button{
	width: calc(324 / var(--width)* 100%);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
.evt-btn-area.mission-daily #missionChannelA{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn01.png);
}
.evt-btn-area.mission-daily #missionChannelB{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn02.png);
}
.evt-btn-area.mission-daily #missionChannelC{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn03.png);
}
.evt-btn-area.mission-daily #missionChannelD{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn05.png);
}
.evt-btn-area.mission-daily #missionChannelA:disabled{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn01_off.png);
}
.evt-btn-area.mission-daily #missionChannelB:disabled{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn02_off.png);
}
.evt-btn-area.mission-daily #missionChannelC:disabled{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn03_off.png);
}
.evt-btn-area.mission-daily #missionChannelD:disabled{
	background-image:url(/kr/event/2024/10/01_lg_mission/images/img_misson_btn05_off.png);
}

.mission-apply{
	position: absolute;
	display: flex;
	top: calc(241 / var(--width)* 100%);
    left: 50%;
    width: calc(895 / var(--width)* 100%);
    height: calc(224 / var(--width)* 100%);
	transform: translateX(-50%);
	flex-wrap: wrap;
}
.mission-apply > li{
	position: relative;
	width: 50%;
	height: calc(690 / var(--width)* 100%);
}
.mission-apply > li .count{
	display: flex;
	position: absolute;
	top: calc(345 / var(--width)* 100%);
	right: calc(100 / 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: #226A65;
	justify-content: center;
	align-items: center;
}
.mission-apply > li:nth-child(1){
	width:100%;
	height: calc(710 / var(--width)* 100%);
}
.mission-apply > li:nth-child(1) .count{
	width: calc(190 / var(--width)* 100%);
	right: calc(52 / var(--width)* 100%);
	color: #fff;
}
.mission-apply > li:nth-child(3) .count{
	right: calc(65 / var(--width)* 100%);
}

.mission-ticket{
	position: absolute;
	bottom: calc(156 / var(--width)* 100%);
    left: 50%;
    width: calc(910 / 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(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: #226A65;
    justify-content: center;
    align-items: center;
    letter-spacing: -0.9px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: #E0F1F0;
}
.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(340 / 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/10/01_lg_mission/images/btn_coupon_down.png);
}
.evt-btn-area.mission-coupon button:disabled{
	background-image: url(/kr/event/2024/10/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/10/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 .progress-bar{
		height: calc(28 / var(--width)* 100vw);
	}
	.mission-circ .title-cnt .mission-count{
		height: calc(32 / var(--width)* 100vw);
	}
	.mission-circ .title-cnt .mission-count > *{
		font-size: calc(20 / var(--width)* 100vw);
	}
	.mission-circ .title-cnt .mission-count > *:before{
		width: calc(32 / var(--width)* 100vw);
		height: calc(32 / var(--width)* 100vw);
	}
	
	.mission-circ .title-cnt .mission-count > * + *{
		padding-left: calc(40 / var(--width)* 100vw);
	}
	.mission-circ .title-cnt .mission-count > * + *:before{
		width: calc(31 / var(--width)* 100vw);
		height: calc(27 / var(--width)* 100vw);
	}
	.mission-circ .title-cnt .mission-count > * + *:after{
		left: calc(20 / var(--width)* 100vw);
		height: calc(24 / var(--width)* 100vw);
	}
	.mission-apply > li .count{
		font-size: 1.55vw;
	}
	.mission-ticket > ul > li .ticket-use{
		font-size: 1.24vw;
	}
    .board-cnt .mission-layer:before{
        font-size: calc(24 / var(--width)* 100vw);
    }
}
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    .evt-intro #missionStartBtn{
        bottom: 10%;
		width: 55.56%;
        height: 7.1%;
        background-image:url(/kr/event/2024/10/01_lg_mission/images/btn_mission_start_m.png);
    }
	.board-cnt{
    	top: 48.3vw;
	}
	
	.mission-circ .title-cnt{
		padding: 12.4vw 5.5vw 4.6vw;
    	border-radius: 15px;
	}
	.mission-circ .title-cnt .progress-bar{
		width: 100%;
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_bar_bg.png);
	}
	.mission-circ .title-cnt .score {
		position: absolute;
		top: 3vw;
		left: 0;
		width: 100%;
		padding: 0 5.5vw;
	}
	.mission-circ .title-cnt .score .title{
		display: inline-block;
		color: #333;
		font-family: 'Pretendard';
		font-size: 3.8vw;
		font-weight: 800;
		line-height: 1.4;
		letter-spacing: -1px;
	}
	.mission-circ .title-cnt .mission-count{
		height: 7vw;
		border-radius:8px;
	}
	.mission-circ .title-cnt .mission-count > * {
	    font-size: 3.2vw;
	}
	.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;
		background-size: 100% auto;
    }
	.progress-screen {
		width: calc(609 / var(--width)* 100vw);
	}
	.board-cnt .mission-layer{
		bottom: calc(-170 / var(--width)* 100vw);
        width: calc(691 / var(--width)* 100vw);
        height: calc(254 / var(--width)* 100vw);
        background-image:url('/kr/event/2024/10/01_lg_mission/images/m_img_mission_status01.png');
    }
    .step2 .board-cnt .mission-layer{
        background-image:url('/kr/event/2024/10/01_lg_mission/images/m_img_mission_status02.png');
    }
    .step3 .board-cnt .mission-layer{
        background-image:url('/kr/event/2024/10/01_lg_mission/images/m_img_mission_status03.png');
    }
    .step4 .board-cnt .mission-layer{
        background-image:url('/kr/event/2024/10/01_lg_mission/images/m_img_mission_status04.png');
    }
    .step5 .board-cnt .mission-layer{
        background-image:url('/kr/event/2024/10/01_lg_mission/images/m_img_mission_status05.png');
    }

	.board-cnt .mission-layer:before {
		top: -3vw;
    	left: 7vw;
		width: 17vw;
		height: 10vw;
		padding-top: 2vw;
    	font-size: 3.8vw;
	}
	.step2 .board-cnt .mission-layer:before{
		left: 23.5vw;
	}
	.step3 .board-cnt .mission-layer:before{
		left: 39.6vw;
	}
	.step4 .board-cnt .mission-layer:before{
		left: 55.8vw;
	}
	.step5 .board-cnt .mission-layer:before{
		left: 73.1vw;
	}

	.evt-btn-area.mission-daily{
      	bottom: calc(-20 / var(--width)* 100%);
		width: calc(680 / var(--width)* 100%);
		height: calc(640 / var(--width)* 100%);
		padding-bottom: 0;
	}
	.evt-btn-area.mission-daily > div{
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}
	.evt-btn-area.mission-daily button{
		width: calc(288 / var(--width)* 100%);
		height: calc(369 / var(--width)* 100vw);
		margin: calc(10 / var(--width)* 100vw) calc(20 / var(--width)* 100vw);
	}
	.evt-btn-area.mission-daily #missionChannelA{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn01.png);
	}
	.evt-btn-area.mission-daily #missionChannelB{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn02.png);
	}
	.evt-btn-area.mission-daily #missionChannelC{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn03.png);
	}
	.evt-btn-area.mission-daily #missionChannelD{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn05.png);
	}
	.evt-btn-area.mission-daily #missionChannelA:disabled{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn01_off.png);
	}
	.evt-btn-area.mission-daily #missionChannelB:disabled{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn02_off.png);
	}
	.evt-btn-area.mission-daily #missionChannelC:disabled{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn03_off.png);
	}
	.evt-btn-area.mission-daily #missionChannelD:disabled{
		background-image:url(/kr/event/2024/10/01_lg_mission/images/m_img_misson_btn05_off.png);
	}

	.mission-apply {
		top: calc(74 / var(--width)* 100%);
        width: calc(600 / var(--width)* 100%);
        height: calc(100 / var(--width)* 100%);
	}
	.mission-apply > li{
		height: calc(444 / var(--width)* 100%);
	}
	.mission-apply > li .count{
		top: calc(400 / 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(324 / 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(42 / var(--width)* 100%);
		left: auto;
		transform: translateX(0);
	}
	.mission-apply > li:nth-child(3) .count{
		right: auto;
	}
	
	.mission-ticket{
        bottom: calc(52 / var(--width)* 100%);
        width: calc(620 / var(--width)* 100%);
        height: calc(287 / var(--width)* 100%);
   	}
	.mission-ticket > ul {
		flex-wrap: wrap;
	}
    .mission-ticket > ul > li {
		width: calc(50% - 3vw);
		height: calc(202 / var(--width)* 100%);
		margin: 0 1.5vw;
	}
	.mission-ticket > ul > li:nth-child(3), .mission-ticket > ul > li:nth-child(4){
		margin-top: calc(456 / var(--width)* 100%);
	}
	.mission-ticket > ul > li .btn-wrap {
		height: calc(240 / var(--width)* 100%);
	}
	.mission-ticket > ul > li .ticket-use {
		bottom: calc(88 / var(--width)* 100%);
        width: calc(530 / var(--width)* 100%);
        height: calc(115 / var(--width)* 100%);
        font-size: 3.4vw;
	}
      
	.evt-btn-area.mission-coupon {
      	margin-bottom: calc(380 / 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/10/01_lg_mission/images/btn_coupon_down_m.png);
	}
    .evt-btn-area.mission-coupon button:disabled{
        background-image: url(/kr/event/2024/10/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/10/01_lg_mission/images/btn_coupon_down_c_m.png);
    }
}