@charset "utf-8";
@import url("https://use.typekit.net/cgh3rns.css");
@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

html {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
}

/* root */
:root {
--rbt: 'roboto', sans-serif;
--grf: 'green-fairy-stencil-combo', sans-serif;
--hel: 'helvetica-neue-world', sans-serif;
--prd: 'Pridi', sans-serif;
--full: 'green-fairy-full-combo', sans-serif;
--dot: 'green-fairy-dots-combo', sans-serif;
--glow1: 0 0 10px rgba(187, 174, 31, 1);
--glow2: 0 0 10px rgba(187, 174, 31, 0.5);
}

/* slick */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none;
-ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging{cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); transition-delay: 10ms;}
.slick-track {position: relative; top: 0; left: 0; display: block;}
.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; line-height: 1.1; text-align: center; font-family: 'green-fairy-stencil-combo', sans-serif; background:#21170f url('/images/common/event/mission/idul/ptn_bg.jpg') 0 0 repeat;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 400; font-family: 'green-fairy-stencil-combo';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'green-fairy-stencil-combo'; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}
button {cursor:pointer; transition:all ease-in-out 0.2s; font-family: 'green-fairy-stencil-combo';}

.mobile {display:none;}

.inner {max-width:1742px; margin-left:auto; margin-right:auto; padding-left:3rem; padding-right:3rem;}

.cha {position:absolute; animation-duration:0.7s !important;}
.cha01 {width:18.61%; left:17.6%; bottom:0;}
.cha02 {width:28.31%; right:11.02%; bottom:-6.35%;}
.cha03 {width:19.35%; left:0; bottom:0;}
.cha04 {width:14.8%; right:4.44%; bottom:0;}

.lamp {position:absolute; transform-origin:top;}
.lamp .light {position:absolute; top:0; left:0; animation: blink-2 5s infinite; opacity:0.2;}
.lamp01 {width:14.68%; top:0; left:2.92%; animation: sway 2.4s infinite ease-in-out;}
.lamp01 .light {animation-delay:0s;}
.lamp02 {width:14.68%; top:0; right:8.41%; animation: sway 2.4s 0.2s infinite ease-in-out;}
.lamp02 .light {animation-delay:0.8s;}
.lamp03 {width:14.68%; top:0; right:0.47%; animation: sway 2.4s 0.4s infinite ease-in-out;}
.lamp03 .light {animation-delay:1.6s;}
.lamp04 {width:9.23%; bottom:-7.14%; left:1.56%;}
.lamp04 .light {animation-delay:2.4s;}
.lamp05 {width:9.23%; bottom:-11%; right:31%;}
.lamp05 .light {animation-delay:3.2s;}
.lamp06 {width:9.23%; bottom:-11.5%; right:5.5%;}
.lamp06 .light {animation-delay:4s;}
.lamp07 {width:9.23%; left:8.49%; bottom:6.2rem;}
.lamp07 .light {animation-delay:0;}
.lamp08 {width:9.23%; left:8.49%; bottom:6.2rem;}
.lamp08 .light {animation-delay:1.3s;}
.lamp09 {width:11.53%; right:5.92%; bottom:6.2rem;}
.lamp09 .light {animation-delay:2.1s;}
.lamp10 {width:18.73%; top:-4%; left:0; animation: sway 3.6s infinite ease-in-out;}
.lamp10 .light {animation-delay:0s;}
.lamp10 .light02 {animation-delay:0.4s;}
.lamp11 {top:-5%; right:1%; width:18.3%; animation: sway 3.6s 0.2s infinite ease-in-out;}
.lamp11 .light {animation-delay:0.2s;}
.lamp11 .light02 {animation-delay:0.6s;}

.container {overflow:hidden; position:relative;}

.btn {position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:1.6rem; background-repeat:repeat-x; background-position:0 0; background-size:auto 100%; background-image:url('/images/common/event/mission/idul/btn01.png'); box-shadow:inset 0 0 1.5rem #ffde00;}
.btn span {text-transform:uppercase; display:block; font-family:var(--prd); font-weight:500; letter-spacing:0.04em; font-size:24px; line-height:1.2; color:#53451a;}
.btn:hover {box-shadow:inset 0 0 1.5rem #ffde00; background-image:url('/images/common/event/mission/idul/btn01_on.png');}
.btn:hover span {color:#fff;}

.btn_round {z-index:1; display:inline-block; position:relative; width:24rem; height:24rem; border-radius:50%; background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.btn_round:before {animation: aim 20s infinite linear; content:''; display:block; position:absolute; width:100%; height:100%; background-position:0 0; background-repeat:no-repeat; background-size:100% auto; background-image:url('/images/common/event/mission/idul/btn_start_rotate.png');}
.btn_round > div {position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; width:100%; height:100%;}
.btn_round.btn_start {position:absolute; top:58%; left:50%; margin-top:-10rem; margin-left:-12rem; background-image:url('/images/common/event/mission/idul/btn_start.png');}
.btn_round.btn_start span {font-weight:700; display:block; z-index:1; position:relative; font-size:28px; color:#8c0000; font-family:var(--prd); letter-spacing:0.05em; text-transform:uppercase; line-height:0.92;}
.btn_round.btn_start:hover {background-image:url('/images/common/event/mission/idul/btn_start_on.png');}
.btn_round.btn_start:hover:before {background-image:url('/images/common/event/mission/idul/btn_start_rotate_on.png'); animation:none;}
.btn_round.btn_start:hover span {color:#ff0000;}

.btn_receive {position:relative; box-shadow:inset 0 0 1.5rem #0097cf; background-image:url('/images/common/event/mission/idul/btn02.png');}
.btn_receive:after {border-radius:1.6rem; content: ""; position: absolute; inset: 0; padding: 0.1rem; background: linear-gradient(to right, #509eff, #00f0ff, #509eff);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.btn_receive span {position:relative; color:#ffffff; text-shadow:0 0 1rem #1c5e87;}
.btn_receive:hover {box-shadow:inset 0 0 1.5rem #09bcff; background-image:url('/images/common/event/mission/idul/btn02_on.png');}
.btn_receive:hover span {text-shadow:none;}

.btn_history {width:120px; height:52px; border-radius:10px; margin-left:8px;}
.btn_history span {font-size:20px;}

.btn_top {font-size:0; color:transparent; transition:none; border-radius:50%; box-shadow:0 5px 2px rgba(0, 0, 0, 0.3); position:fixed; z-index:11; right:2.5rem; bottom:2.5rem; width:68px; height:68px; display:flex; align-items:center; justify-content:center; background-position:0 0; background-size:100% auto; background-repeat:no-repeat; background-image:url('/images/common/event/mission/idul/btn_top.png');}
.btn_top:hover {background-position:0 100%;}

/* header */
header {position:absolute; top:0; left:0; right:0; z-index:20; padding:3.6rem 6.8rem 0; text-align:left;}
header .bi img {max-width:160px;}
.user_info {top:3.2rem; left:50%; transform:translate(-50%, 0); position:absolute; border-radius:10px;}
.user_info .util {background:rgba(0, 0, 0, 0.6); height:52px; padding-right:12px; border-radius:5px; display:flex; align-items:center; justify-content:space-between; padding-left:70px; position:relative;}
.user_info .util:before {content:''; display:block; position:absolute; width:51px; height:61px; top:-5px; left:4px; background:url('/images/common/event/mission/idul/icon_user.png') 0 0 no-repeat; background-size:100% auto;}
.user_info {width: max-content; padding:0.8rem; background:rgba(255, 255, 255, 0.2); border-radius:1rem; border:1px solid rgba(255, 255, 255, 0.3); display:flex; align-items:center; justify-content:space-between;}
.user_info .cash {margin-left:2.4rem; padding-bottom:8px; flex-shrink:0; font-family:var(--hel); font-size:16px; font-weight:500; color:#ffe544; text-transform:uppercase;}
.user_info .user span {display:block; max-width:18rem; font-size:18px; color:#ffffff; font-weight:500; font-family:var(--prd); overflow:hidden; text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:nowrap; word-break:break-all; word-wrap:normal;}
header .btn_login {font-size:0; top:24px; right:307px; width:48px; height:48px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/idul/icon_login.png'); background-color:#564200; position:fixed;}
header .btn_login:hover {background-color:#836500;}

/* section01 */
.section01 {position:relative; background:url('/images/common/event/mission/idul/bg01_t.jpg') center 0 no-repeat; background-size:cover; height:100vh; max-height:1008px;}
.section01 .inner {height:100%; position:relative;}
.section01 .title_wrap {height:100%; z-index:1; position:relative; padding:10rem 0; display:inline-flex; align-items:center; justify-content:flex-start; flex-direction:column;}
.section01 .title_wrap .tit {animation-duration:0.5s !important; position:relative; z-index:1;}
.section01 .title_wrap .tit:before {z-index:-1; content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background:url('/images/common/event/mission/idul/bg_title.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .date {font-size:24px; color:#fff; letter-spacing:0.3em; text-shadow:var(--glow1); position:absolute; left:50%; transform:translate(-50%, 0); bottom:8.4rem;}
.section01 .title_wrap .user_info {display:none;}

/* mission_wrap */
.mission_wrap {position:relative; z-index:2;}
.mission_wrap .lamp {z-index:1;}
.mission_wrap .top {position:relative; z-index:1;}

.top .con {position:relative; background:url('/images/common/event/mission/idul/ptn.png') 0 0 repeat; backdrop-filter: blur(1rem);}
.top .con:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; border-top:1px solid rgba(124, 124, 124, 0.5); border-bottom:1px solid rgba(124, 124, 124, 0.5);}
.top .inner {display:flex; align-items:center; justify-content:center; height:116px; position:relative;}
.top .m_tit {margin-left:-7rem; display:flex; align-items:center; justify-content:center; font-size:50px; color:#fff; text-transform:uppercase; letter-spacing:0.04em; text-shadow:var(--glow1); position:relative;}
.top .m_tit .day {font-family:var(--full); font-size:34px; margin:0 4.8rem 0 11.7rem; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative;}
.top .m_tit .day:before {content:''; display:block; position:absolute; top:-7rem; left:-9.6rem; width:21.8rem; height:22.7rem; background:url('/images/common/event/mission/idul/obj_moon.png') 0 0 no-repeat; background-size:100% auto;}
.top .m_tit .day span {font-size:50px;}
.top .m_tit:before, .top .m_tit:after {width:21.7rem; height:4.9rem; margin-top:-2.4rem; content:''; display:block; position:absolute; top:50%; background:url('/images/common/event/mission/idul/obj_tit.png') 0 0 no-repeat; background-size:100% auto;}
.top .m_tit:before {left:-24rem;}
.top .m_tit:after {right:-24rem; transform:scalex(-1);}
.top .sub {position:absolute; top:0; left:0; width:100%; height:100%;}
.top .remain {top:50%; transform:translate(0, -50%); position:absolute; left:3rem; font-size:20px; color:#ffffff; letter-spacing:0.04em; text-transform:uppercase; text-shadow:var(--glow1);}
.top .remain .time {color:#ffe544; display:block; margin-top:5px;}
.top .etc {position:absolute; right:3rem; top:50%; transform:translate(0, -50%); display:flex; align-items:center; justify-content:flex-end;}
.top .etc .count_wrap {background:rgba(0, 0, 0, 0.5); border-radius:1.2rem 0 0 1.2rem; height:64px; min-width:92px; padding:0 2rem; display:flex; align-items:center; justify-content:center; font-size:26px; font-family:var(--prd); color:#7d4c00;}
.top .etc .count_wrap font {font-weight:700;}
.top .etc .count_wrap .c01 {color:#ffe544;}
.top .etc .count_wrap .c02 {color:#fff;}
.etc .btn {width:16.8rem; height:8rem; flex-direction:column;}

.mission_wrap .list_wrap {position:relative; overflow:hidden; background:url('/images/common/event/mission/idul/bg01_b.jpg') center bottom no-repeat; background-size:cover; padding-bottom:12rem;}
.mission_wrap .list_wrap .inner {position:relative;}
.mission_wrap .list_wrap .slick-list {width:100%; padding-top:7.6rem;}
.list_wrap .btn_arr {transition:none; font-size:0; background-color:rgba(255, 255, 255, 0); top:30%; position:absolute; z-index:2; width:8rem; height:8rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/idul/btn_arr.png');}
.list_wrap .btn_prev {left:-8.8rem;}
.list_wrap .btn_next {right:-8.8rem; transform:scaleX(-1);}
.list_wrap .btn_arr.slick-disabled {opacity:0;}
.list_wrap .btn_arr:hover {background-position:0 100%;}

.mission_wrap .list {margin-left:-4.6rem; display:flex; flex-wrap:wrap;}
.mission_wrap .list li {width:calc(100% / 3); padding-left:4.6rem; margin-bottom:4.6rem;}
.mission_wrap .list li .con {height:100%; position:relative;}
.mission_wrap .list .box {z-index:2; background:#b28a2e url('/images/common/event/mission/idul/brd.jpg') 0 0 repeat; padding:0.4rem; position:relative; min-height:51.6rem; border-radius:3rem;}
.mission_wrap .list .box .bg {box-shadow: -1px -2px #8a5400, 1px -2px #8a5400; background:#100908 url('/images/common/event/mission/idul/ptn.png') 0 0 repeat; border-radius:3rem; height:100%; padding:0 19%;}
.mission_wrap .list .box .bg:before, .mission_wrap .list .box .bg:after {content:''; display:block; position:absolute;}
.mission_wrap .list .box .bg:before {top: 24px; left:7.6%; right:7.6%; bottom:0.4rem; background:url('/images/common/event/mission/idul/bg_ms.png') center 0 no-repeat; background-size:100% 100%;}
.mission_wrap .list .box .bg:after {top:30%; left:50%; margin-left:-16.25rem; width:32.5rem; height:32.5rem; background:url('/images/common/event/mission/idul/bg_ms_obj.png') 0 0 no-repeat; background-size:100% auto !important;}
.mission_wrap .list .box .num {display:flex; align-items:center; justify-content:center; letter-spacing:0.04em; color:#000000; font-size:30px; position:absolute; top:1.6rem; left:50%; width:7.2rem; height:7.2rem; margin-left:-3.6rem; background:url('/images/common/event/mission/idul/bg_star.png') 0 0 no-repeat; background-size:100% auto !important;}
.mission_wrap .list .box .desc {padding: 10.5rem 0 0; position:relative; z-index:1; display:flex; align-items: center; justify-content: flex-start; flex-direction:column; height:100%;}
.mission_wrap .list .box .desc img {display:inline;}
.mission_wrap .list .box .m_tit {font-size:28px; color:#fff; letter-spacing:0.04em; text-transform:uppercase; text-shadow:var(--glow1);}
.mission_wrap .list .start .box .bg:after {background:url('/images/common/event/mission/idul/bg_ms_obj02.png') 0 0 no-repeat;}
.mission_wrap .list .receive .box .bg:after {background:url('/images/common/event/mission/idul/bg_ms_obj03.png') 0 0 no-repeat;}
.mission_wrap .list .btn_receive {width:27.6rem; height:8rem; position:absolute; bottom:10%;}

.mission_wrap .list .mission {position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:23rem; padding:4rem 0 3rem;}
.mission_wrap .list .btn_modify {position:relative; top:-1.5rem; font-family:var(--prd); box-shadow:0 0 1rem rgba(187, 174, 31, 0.5); width:104px; height:24px; border-radius:5px; font-size:16px; display:flex; align-items:center; justify-content:center; color:#fff; letter-spacing:0.04em; text-transform:uppercase; border:1px solid #fff; background:rgba(0, 0, 0, 0.3);}
.mission_wrap .list .btn_modify span:before {margin-right:5px; position:relative; top:-1px; transition:none; content:''; display:inline-block; vertical-align:middle; width:16px; height:15px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/idul/icon_modify.png');}
.mission_wrap .list .btn_modify:hover {background:rgba(0, 0, 0, 0.5); border-color:#fffb97; color:#fffb97;}
.mission_wrap .list .btn_modify:hover span:before {background-position:0 100%;}
.mission_wrap .list .mission .txt {font-size:30px; color:#fff; font-family:var(--prd); letter-spacing:0.04em; line-height:1.2; margin: 0 -10%;}
.mission_wrap .list .mission .count {font-size:40px; font-family:var(--prd); color:#7d4c00; margin-top:1rem;}
.mission_wrap .list .mission .count font {font-weight:700;}
.mission_wrap .list .mission .count .c01 {color:#ffe544;}
.mission_wrap .list .mission .count .c02 {color:#fff;}
.mission_wrap .list .btn_clear {z-index:1; width:27.6rem; height:8rem; flex-direction:column;}
.mission_wrap .list .btn_clear .cash {border-radius:12px; min-width:132px; padding:0 1rem; height:24px; background:#53451a; font-weight:500; font-family:var(--hel); font-size:16px; color:#ffe544; display:flex; align-items:center; justify-content:center; line-height:1; padding-bottom:2px; text-transform:uppercase;}

.mission_wrap .list .reward {position:relative; z-index:1; max-width:466px; margin:-1.7rem auto 0;}
.mission_wrap .list .reward:after {content:''; display:block; padding-bottom:56.44%;}
.mission_wrap .list .reward .reward_inner {position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/idul/bg_reward.png') 0 0 no-repeat; background-size:100% auto; padding: 17% 11% 9%;}
.mission_wrap .list .reward .tit {width:188px; height:42px; background:url('/images/common/event/mission/idul/bg_reward_tit.png') 0 0 no-repeat; background-size:100% auto; text-shadow:0 5px 3px rgba(199, 178, 120, 0.7); font-size:20px; color:#4a340c; font-family:var(--prd); font-weight:600; letter-spacing:0.05em; position:absolute; left:50%; top:16%; transform:translate(-50%, 0); display:flex; align-items:center; justify-content:center; text-transform:uppercase; padding-bottom:2px;}
.mission_wrap .list .reward .img {z-index:1; height:100%; width:100%; display:flex; align-items:center; justify-content:center; position:relative;}
.mission_wrap .list .reward .img > img {max-width:100%; max-height:100%;}
.mission_wrap .list .reward .img > div {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.mission_wrap .list .reward .lock_item {position:relative;}
.mission_wrap .list .reward .lock_item:before, .mission_wrap .list .reward .lock_item:after {content:''; display:block; position:absolute;}
.mission_wrap .list .reward .lock_item:before {width:4rem; height:4rem; background:url('/images/common/event/mission/idul/icon_ques.png') 0 0 no-repeat; left:50%; margin-left:-2rem; top:-1.4rem; background-size:100% auto;}
.mission_wrap .list .reward .lock_item:after {top:-6rem; width:10rem; height:10rem; background:url('/images/common/event/mission/idul/img_light.png') 0 0 no-repeat; left:50%; margin-left:-5rem; animation: fade 3s linear infinite; background-size:100% auto;}
.mission_wrap .list .reward .name {z-index:1; position:absolute; padding:0 20%; bottom:16%; left:11%; right:11%; color:#e6d7a6; font-family:var(--prd); font-size:16px; letter-spacing:0.05em; height:15%; display:flex; align-items:center; justify-content:center;}
.mission_wrap .list .lock .reward .img > div {transform:translate(-50%, -40%);}
.mission_wrap .list .lock .desc > .img {margin-top:16%;}

.go_view {z-index:1; position:absolute; box-shadow:var(--glow2); width:17px; height:17px; border-radius:50%; bottom:1rem; right:1rem; font-size:0; color:transparent; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/idul/icon_more.png');}
.go_view:hover {background-position:0 100%;}

.total_reward {position:relative; z-index:1; max-width:1688px; margin:0 auto;}
.total_reward .tit {margin:0 auto; height:46px; width:396px; background:url('/images/common/event/mission/idul/bg_totla_tit.png') 0 0 no-repeat; padding-bottom:3px; background-size:100% auto; display:flex; align-items:center; justify-content:center; font-size:20px; color:#4a340c; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; text-shadow:0 5px 3px rgba(199, 178, 120, 0.7); font-family:var(--prd);}
.total_reward:after {content:''; display:block; padding-bottom:16.825%;}
.total_reward .con {position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/idul/bg_total.png') 0 0 no-repeat; background-size:100% auto; padding: 2.2% 2.2% 1%;}
.total_reward .reward {height:calc(100% - 46px);}
.total_reward .reward .img {padding:1%; position:relative; z-index:1; height: calc(100% - 40px); max-width:484px; margin:0 auto; padding-top:1rem; display:flex; align-items:center; justify-content:center;}
.total_reward .reward .img > img {max-width:100%; max-height:100%;}
.total_reward .reward .name {position:relative; z-index:1; padding:0 4rem; color:#e6d7a6; font-family:var(--prd); font-size:16px; letter-spacing:0.05em; display:inline-flex; height:36px; align-items:flex-start; justify-content:center;}
.total_reward .reward .name .go_view {top:0; right:0; margin-top:0;}
.total_reward .btn_receive {position:absolute; top:50%; right:7.5%; margin-top:-4rem; width:276px; height:8rem;}
.total_reward .btn_receive span {font-size:24px;}
.total_reward .btn_receive.off {background:rgba(0, 0, 0, 0.5); box-shadow:none; cursor:default;}
.total_reward .btn_receive.off:after {background:rgba(93, 93, 93, 0.5);}
.total_reward .btn_receive.off span {color:#727272; text-shadow:none;}
.total_reward .btn_receive.end {    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); box-shadow:none; cursor:default;}
.total_reward .btn_receive.end:after {background:#fff8af;}
.total_reward .btn_receive.end span {color:#d2d2d2; text-shadow:none;}

/* calendar_wrap */
.calendar_wrap {z-index:1; position:relative; background:url('/images/common/event/mission/idul/bg02.jpg') center 0 no-repeat; background-size:cover; padding-bottom:4rem;}
.calendar_wrap .top .con {background:rgba(255, 255, 255, 0.1); backdrop-filter: none;}
.calendar_wrap .top .etc .count_wrap {letter-spacing:0.1em;}
.calendar_wrap .calendar {position:relative; padding-top:3.4rem;}
.calendar_wrap .calendar ul {z-index:1; position:relative; text-align:left; margin:0 -12px;}
.calendar_wrap .calendar ul > li {display: inline-block; vertical-align:top; width:calc(100% / 7); position:relative; margin:0 -1px 1.2rem;}
.calendar_wrap .calendar .con {z-index:1; position:relative; width:100%;}
.calendar_wrap .calendar .con:after {content:''; padding-bottom:106.97%; display:block;}
.calendar_wrap .calendar .con_inner {position:absolute; top:0; left:0; width:100%; height:100%; flex-direction:column; display:flex; align-items:center; justify-content:flex-start; border-radius:1rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/idul/bg_cal.png');}
.calendar_wrap .calendar .today .con_inner { background-image:url('/images/common/event/mission/idul/bg_cal_today.png'); }
.calendar_wrap .calendar .num {padding-top:2%; position:absolute; top:1%; width:14%; height:16%; display:flex; align-items:center; justify-content:center; font-size:20px; color:##272727; font-weight:600; font-family:var(--prd);}
.calendar_wrap .calendar .con .day {opacity:0.9; position:absolute; height:4rem; display:flex; align-items:center; justify-content:center; top: 16%; height: 10%; width: 100%; padding-top: 2%;}
.calendar_wrap .calendar .con .day span {font-family:var(--prd); letter-spacing:0.05em; text-transform:uppercase; font-size:20px; font-weight:600; color:#372402; }
.calendar_wrap .calendar .con .complete {position:absolute; top: 31%; right: 16%; bottom: 15%; left: 16%; display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .fail {position:absolute; top: 31%; right: 16%; bottom: 15%; left: 16%; display:flex; align-items:flex-start; justify-content:center; padding-top:3%;}
.calendar_wrap .calendar .con .fail img {max-width:96px; width:58%;}
.calendar_wrap .calendar .count {letter-spacing:0.1em; font-weight:300; font-size:40px; color:#868686; font-family:var(--prd); position: absolute; top: 31%; right: 16%; bottom: 15%; left: 16%; display: flex; align-items: center; justify-content: center;}
.calendar_wrap .calendar .count font {color:#ffe544; font-weight:700;}
.calendar_wrap .calendar .count span {color:#ffffff; font-weight:700;}
.calendar_wrap .btn_day02 {padding-top:2px; width:120px; height:28px; border-radius:5px; position:absolute; left:50%; bottom:18.5%; margin-left:-60px;}
.calendar_wrap .btn_day02 span {font-size:18px; font-weight:600;}
.calendar_wrap .calendar .bin .con_inner {background-image:url('/images/common/event/mission/idul/bg_bin.png'); justify-content:center;}
.calendar_wrap .calendar .bin .day {position:static; display:block; padding:0; width:auto; height:auto; }
.calendar_wrap .calendar .bin .day span {font-size:20px; color:#54504b; text-shadow:none;}
.calendar_wrap .calendar .bin .num {position:static; display:block; padding:0; width:auto; height:auto; background:none; font-size:34px; color:#40372d; letter-spacing:0.05em; text-shadow:none;}
.calendar_wrap .calendar .today .num {text-transform:uppercase; top:-1%; padding-top:0; color:#7f0000; width: 24.596%; height: 20.69%; font-size:28px; background:url('/images/common/event/mission/idul/today_num.png') 0 0 no-repeat; background-size:100% auto;}
.calendar_wrap .calendar .today .con .day {font-size:24px; color:#000000;}
.calendar_wrap .calendar .today .con .day span {color: #7f0000; font-weight: 700;}

.calendar_wrap .reward_wrap {position:relative; margin-top:3.6rem; padding-bottom:0; padding-top:0; font-size:0;}
.calendar_wrap .reward_wrap:after {display:none;}
.calendar_wrap .reward_wrap .con_wrap { display:inline-block; position:relative; width:calc((100% - 4.8rem) / 2); margin:0; max-width:820px;}
.calendar_wrap .reward_wrap .con_wrap:after {content:''; display:block; padding-bottom:40.732%;}
.calendar_wrap .reward_wrap .con_wrap .con {background: url(/images/common/event/mission/idul/bg_total02.png) 0 0 no-repeat; padding:2.2%; background-size:100% auto;}
.calendar_wrap .reward_wrap .con .reward {height:100%; position:relative; z-index:1; padding-top:20px;}
.calendar_wrap .reward .img {margin-top:0; height: calc(100% - 127px);}
.calendar_wrap .reward_wrap .con .go_view {top:50%; margin-top:-8px;}
.calendar_wrap .reward_wrap .con .tit {position:absolute; top:0; left:50%; transform:translate(-50%, -25%);}
.calendar_wrap .reward_wrap .con .btn {display:flex; margin:1.5rem auto 0; width:27.6rem; height:6rem; position: relative; top: auto; right: auto;}
.calendar_wrap .reward_wrap .con .name {align-items:center;}
.calendar_wrap .reward_wrap .con_wrap.final {margin-left:4.8rem;}

.calendar_wrap .mid .btn_receive {position:relative; box-shadow:inset 0 0 1.5rem rgba(80, 255, 245, 0.8); background-image:url('/images/common/event/mission/idul/btn03.png');}
.calendar_wrap .mid .btn_receive:after {border-radius:1.6rem; content: ""; position: absolute; inset: 0; padding: 0.1rem; background: linear-gradient(to right, #50f9ff, #00ffd2, #50f9ff);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.calendar_wrap .mid .btn_receive span {position:relative; color:#ffffff; text-shadow:0 0 1rem #0b8d6e;}
.calendar_wrap .mid .btn_receive:hover {background-image:url('/images/common/event/mission/idul/btn03_on.png');}
.calendar_wrap .mid .btn_receive:hover span {text-shadow:none;}
.calendar_wrap .final .btn_receive {position:relative; box-shadow:inset 0 0 1.5rem rgba(87, 210, 255, 0.8); background-image:url('/images/common/event/mission/idul/btn04.png');}
.calendar_wrap .final .btn_receive:after {border-radius:1.6rem; content: ""; position: absolute; inset: 0; padding: 0.1rem; background: linear-gradient(to right, #509eff, #00f0ff, #509eff);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.calendar_wrap .final .btn_receive span {position:relative; color:#ffffff; text-shadow:0 0 1rem #1270a9;}
.calendar_wrap .final .btn_receive:hover {background-image:url('/images/common/event/mission/idul/btn04_on.png');}
.calendar_wrap .final .btn_receive:hover span {text-shadow:none;}

.calendar_wrap .reward_wrap .btn_receive.off {background:rgba(0, 0, 0, 0.5); box-shadow:none; cursor:default;}
.calendar_wrap .reward_wrap .btn_receive.off:after {background:rgba(93, 93, 93, 0.5);}
.calendar_wrap .reward_wrap .btn_receive.off span {color:#727272; text-shadow:none;}
.calendar_wrap .reward_wrap .btn_receive.end {    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); box-shadow:none; cursor:default;}
.calendar_wrap .reward_wrap .btn_receive.end:after {background:#fff8af;}
.calendar_wrap .reward_wrap .btn_receive.end span {color:#d2d2d2; text-shadow:none;}

/* footer */
footer {width:100%; padding:8rem 2.4rem; z-index:2; background:#21170f; font-family:var(--rbt); color:#fff; text-transform:uppercase; font-size:12px;}
footer > img {margin-bottom:2.4rem;}
footer .footer {position:relative;}
footer .footer .copy {margin-top:0.7rem; color:#b7b7b7; font-size:11px;}
footer .footer a {color:#ffdd00; font-family:var(--rbt);}
footer .footer a:hover {text-decoration:underline;}
.footer .age {margin-bottom:2rem;}
.footer .age img {max-width:6rem;}

/* popup */
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background:rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 90; display:none;}
.pop_up {width:100%; height:100%; position:fixed; top:0; left:0; z-index:99; display:none;}
.pop_up .pop_layout {background:#b28a2e url('/images/common/event/mission/idul/brd.jpg') 0 0 repeat; padding:0.4rem; width:620px; left:50%; top:50%; transform:translate(-50%, -50%); z-index:99; border-radius:2rem; position:relative;}
.pop_up .pop_layout .bg {overflow: hidden; box-shadow: -1px -2px #8a5400, 1px -2px #8a5400; background:#000 url('/images/common/event/mission/idul/ptn_2.png') 0 0 repeat; border-radius:2rem;}
.pop_up .pop_con {position:relative; z-index:1;}
.pop_up .pop_con h2 {text-shadow:0 0 2rem rgba(165, 154, 90, 0.7); font-size:32px; color:#fff; letter-spacing:0.05em; background:rgba(68, 50, 0, 0.5); border-bottom:1px solid rgba(182, 151, 64, 0.5); height:10rem; width:100%; display:flex; align-items:center; justify-content:center; position:relative;}
.pop_up .pop_close {color:transparent; font-size:0; box-shadow:var(--glow2); border-radius:50%; top:50%; margin-top:-20px; right:3rem; position:absolute; width:40px; height:40px; background-color:rgba(255, 255, 255, 0); background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/idul/btn_close.png');}
.pop_up .pop_close:hover {background-position:0 100%;}
.pop_up .pop_con .desc {padding:5.6rem 4.8rem; position:relative; font-size:22px; color:#fff; font-family:var(--prd); letter-spacing:0.02rem; line-height:1.09;}
.pop_up .pop_con .box {min-height:184px; flex-direction:column; padding:0; position:relative; border-radius:1rem; background:#000000; border:1px solid rgba(182, 151, 64, 0.5); display:flex; align-items:center; justify-content:center;}
.pop_up .pop_con .box .cash {font-size:33px; color:#ffc81b; font-weight:700; font-family:var(--hel); letter-spacing:0.1em; line-height:1; margin-top:1.7rem;}
.pop_up .pop_con .box .cash span {line-height:1; margin-right:0.6rem;}
.pop_up .pop_con .box .cash img {vertical-align:middle; position:relative; top:-2px;}
.pop_up .pop_con .day {margin-bottom:2.4rem; font-family:var(--grf); font-size:34px; letter-spacing:0.04em; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; color:#ffe593;}
.pop_up .pop_con .day font {color:#ffc81b;}
.pop_up .pop_con .day:before, .pop_up .pop_con .day:after {width:13rem; height:1.3rem; margin-top:-0.6rem; content:''; display:block; position:absolute; top:50%; background:url('/images/common/event/mission/idul/obj_tit02.png') 0 0 no-repeat; background-size:100% auto;}
.pop_up .pop_con .day:before {left:-1.2rem;}
.pop_up .pop_con .day:after {right:-1.2rem; transform:scalex(-1);}
.pop_up .pop_con .reward {position:relative; border-radius:1rem; background:#000000; border:1px solid rgba(182, 151, 64, 0.5); padding:3.6rem 2.4rem 0; margin-top:5.6rem;}
.pop_up .pop_con .reward .img {height:120px; display:flex; align-items:center; justify-content:center; margin:0 auto; width:100%;}
.pop_up .pop_con .reward .img > img {max-width:100%; max-height:100%;}
.pop_up .pop_con .reward .name {display: flex; align-items:center; justify-content:center; min-height:5.2rem; padding:1rem 0; font-family:var(--prd); font-size:16px; color:#e6d7a6; letter-spacing:0.05em; line-height:1.6;}
.pop_up .btns {margin-top:5.6rem; display:flex; gap:2.8rem; align-items:center; justify-content:center;}
.pop_up .btns button {font-weight:700; font-size:15px; font-family:var(--hel); text-transform:uppercase; line-height:1.25; display:inline-flex; align-items:center; justify-content:space-between; flex:1; height:68px; border-radius:1rem; padding-bottom:3px !important;}
.pop_up .btns .btn_cancel {background:linear-gradient(to bottom, #a5a5a5, #767676); color:#1e1e1e;}
.pop_up .btns .btn_cancel:hover {color:#fff; background:linear-gradient(to bottom, #cecece, #656565);}
.pop_up .btns .btn_complete {background:linear-gradient(to bottom, #ffef40, #ffc823); color:#53451a;}
.pop_up .btns .btn_complete:hover {color:#fff; background:linear-gradient(to bottom, #ffea00, #ff9600);}
.pop_up .btns .btn_reward {background:linear-gradient(to bottom, #2161f1, #00386f); color:#d4e7ff;}
.pop_up .btns .btn_reward font {color:#ffe593;}
.pop_up .btns .btn_reward font:after {background-image:url('/images/common/event/mission/idul/pb_cash02.png');}
.pop_up .btns .btn_reward:hover {color:#d4e7ff; background:linear-gradient(to bottom, #417bff, #005fa1);}
.pop_up .btns .btn_complete02 {background:linear-gradient(to bottom, #00ba9e, #00644d); color:#ffffff;}
.pop_up .btns .btn_complete02 font {color:#98ffb5;}
.pop_up .btns .btn_complete02 font:after {background-image:url('/images/common/event/mission/idul/pb_cash03.png');}
.pop_up .btns .btn_complete02:hover {color:#fff; background:linear-gradient(to bottom, #00fad4, #00a982);}

.pop_mission .btns button {max-width:180px; justify-content:center;}

.pop_clear .btns button {padding:0 1.2rem;}
.pop_clear .btns button span {text-align:left; word-break:break-all;}
.pop_clear .btns button font {font-size:20px; display:block; padding-right:30px; position:relative; text-align:right;}
.pop_clear .btns button font:after {content:''; display:block; position:absolute; top:50%; right:0; width:24px; height:24px; margin-top:-10px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.pop_clear .btns button:hover font {color:#fff;}
.pop_clear .btns button:hover font:after {background-position:0 100%;}

.pop_all .btns {margin-top:3rem;}
.pop_all #pageinfo {font-size:18px; color:#fff; text-shadow:var(--glow1); padding-top:1.6rem; font-family:var(--prd); letter-spacing:0.04em; font-weight:500;}
.pop_all #pageinfo span {color:#e6d7a6; margin-right:0.4rem;}
.pop_all #pageinfo font {margin-left:0.4rem;}
.pop_all .img_list .slick-slide {position: relative;}
.pop_all .img_list .slick-arrow {z-index:1; transition:none; font-size:0; color:transparent; position:absolute; top:35%; display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/idul/pop_arr.png'); background-color:rgba(0,0,0); background-size:100% auto; border-radius:3px; box-shadow:var(--glow2);}
.pop_all .img_list .slick-prev {left:-1rem;}
.pop_all .img_list .slick-next {right:-1rem; transform:scaleX(-1);}
.pop_all .img_list .slick-arrow:hover {background-position:0 100%;}
.pop_all .img_list .slick-arrow.slick-disabled {opacity:0.4; cursor:default;}

.pop_detail .pop_con h2 {text-align: left; padding:0 9.6rem 0 4.8rem; justify-content: flex-start; font-size:24px; font-family:var(--prd); letter-spacing:0.02em;}
.pop_detail .pop_con .box {min-height:0; display:block;}
.pop_detail .pop_con .img {height:24rem; display:flex; align-items:center; justify-content:center; margin:0 auto; width:100%; padding:2.4rem;}
.pop_detail .pop_con .img > img {max-width:100%; max-height:100%;}

.pop_history .pop_con .desc {padding:2.8rem;}
.pop_history .list {height:100%; padding-right:1.2rem; overflow-y:auto; max-height:46.4rem;}
.pop_history .list::-webkit-scrollbar {width:0.6rem;}
.pop_history .list::-webkit-scrollbar-track {border-radius:0.6rem; background:#3a3a3a;}
.pop_history .list::-webkit-scrollbar-thumb {border-radius:0.6rem; background: linear-gradient(to bottom, #ffd679, #ffb100);}
.pop_history .list li {font-size:0;}
.pop_history .list li > div {align-items:center; justify-content:center; flex-direction:column; height:100%; padding:0 1rem; display:inline-flex;}
.pop_history .list li > div.date {width:24%;}
.pop_history .list li > div.date span {display:block; margin-top:3px;}
.pop_history .list li > div.mission {width:50%;}
.pop_history .list li > div.mission span {overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.pop_history .list li > div.item {width:26%;}
.pop_history .list li > div.item span {display:block; width:100%; overflow: hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.pop_history .list li.top div {vertical-align:top; height:4.8rem; background:#b28a2e; border-radius:5px; font-size:16px; color:#000000; font-family:var(--prd); text-transform:uppercase; letter-spacing:0.05em; font-weight:500;}
.pop_history .list li.top > div.mission {margin:0 0.4rem; width:calc(50% - 0.8rem);}
.pop_history .list li.bottom {border-bottom:1px solid #8e897d; height:5rem;}
.pop_history .list li.bottom div {font-size:12px; font-family:var(--rbt); line-height:1.25;  vertical-align: top;}
.pop_history .list li.bottom .date {color:#ffc33a;}
.pop_history .list li.bottom .date span {color:#ddc999;}
.pop_history .list li.bottom .mission {color:#adadad; text-align: left;}
.pop_history .list li.bottom .item {color:#ffc33a; text-align: left;}
.pop_history .list li.none {height:46.4rem; display:flex; align-items:center; justify-content:center; color:#ffc33a; font-size:16px; font-family:var(--rbt); font-weight:700; letter-spacing:0.05em; text-transform:uppercase;}

@media screen and (max-width: 2200px) {
.section01 .title_wrap {width:100%; justify-content:center;}
.section01 .title_wrap .tit {width:44%;}

.list_wrap .btn_prev {left:-7.2rem;}
.list_wrap .btn_next {right:-7.2rem;}
.lamp07 {left:0; bottom:-1rem;}
.lamp08 {left:0; bottom:-1rem;}
.lamp09 {right:-1.5%; bottom:-1rem;}

.cha01 {left:8%;}
.cha02 {right:7%; bottom:0;}
.cha04 {right:0;}
}

@media screen and (max-width: 1920px) {
.list_wrap .btn_prev {left:-5.6rem;}
.list_wrap .btn_next {right:-5.6rem;}
}

@media screen and (max-width: 1900px) {
.list_wrap .btn_prev {left:0;}
.list_wrap .btn_next {right:0;}
}

@media screen and (max-width: 1800px) {
.user_info {top:2.4rem;}

.top .sub {position:static; display:flex; align-items:center; justify-content:center; margin-top:4.8rem;}
.top .remain {position:relative; top:auto; left:auto; transform:none; margin:0 2.4rem;}
.top .etc {position:relative; top:auto; right:auto; transform:none; margin:0 2.4rem;}
.top .m_tit {margin-left:0;}
.mission_wrap .list_wrap .slick-list {padding-top:4.8rem;}

.calendar_wrap .reward_wrap .con_wrap.final {margin-left:2.4rem;}
.calendar_wrap .reward_wrap .con_wrap {width:calc((100% - 2.4rem) / 2);}
}

@media screen and (max-width: 1500px) {
.mission_wrap .list {margin-left:-3rem;}
.mission_wrap .list li {padding-left:3rem; margin-bottom:3rem;}

.calendar_wrap .top .etc {margin-top:3rem;}
}

@media screen and (max-width: 1360px) {
.mission_wrap .list li {width:50%;}
.total_reward .btn_receive {right:2.5%;}

.calendar_wrap .calendar ul > li {width:calc(100% / 6);}
}

@media screen and (max-width: 1280px) {
header {text-align:center;}
header .user_info {display:none; opacity:0;}

.section01 {height:auto; max-height:none;}
.section01 .title_wrap .tit {width:auto;}
.section01 .title_wrap .user_info {display:flex; position:relative; top:auto; left:auto; transform:none; margin:4.8rem auto 0; max-width:520px; width:100%;}
.section01 .title_wrap .date {position:relative; bottom:auto; left:auto; transform:none; margin:0 auto;}
.user_info .util {width:calc(100% - 120px);}

.lamp10 {top:-1rem; width:19%;}
.lamp11 {top:-1rem; width:19%;}

.cha01 {left:3%;}
.cha02 {right:1%;}

.top .m_tit {font-size:40px;}
.top .m_tit .day {font-size:30px; margin: 0 2.8rem 0 9.7rem;}
.top .m_tit .day span {font-size:40px;}

.mission_wrap .total_reward {max-width:820px; margin-top:3.6rem;}
.mission_wrap .total_reward .con {background:url(/images/common/event/mission/idul/bg_total02.png) 0 0 no-repeat; background-size:100% auto; max-width:820px; padding:2.2%;}
.mission_wrap .total_reward:after {padding-bottom:40.732%;}
.mission_wrap .total_reward .tit {position:absolute; top:0; left:50%; transform:translate(-50%, -25%);}
.mission_wrap .total_reward .reward {height:100%; position:relative; z-index:1; padding-top:20px;}
.mission_wrap .total_reward .reward .img {margin-top:0; height:calc(100% - 127px);}
.mission_wrap .total_reward .reward .name {align-items:center;}
.mission_wrap .total_reward .reward .name .go_view {top:50%; margin-top:-8px;}
.mission_wrap .total_reward .btn_receive {display:flex; margin:1.5rem auto 0; width:27.6rem; height:6rem; position:relative; top:auto; right:auto;}

.calendar_wrap .calendar ul > li {width:calc(100% / 5);}
.calendar_wrap .reward_wrap .con_wrap.final {margin-left:auto; margin-top:4.8rem;}
.calendar_wrap .reward_wrap .con_wrap {display:block; width:100%; margin-left:auto; margin-right:auto;}
}

@media screen and (max-width: 1023px) {
.cha01 {width:20%;}
.cha02 {width:30%;}

.lamp01 {width:20%;}
.lamp02 {width:20%;}
.lamp03 {width:20%;}
.lamp04 {width:30%; bottom:-12%; left:18%;}
.lamp05 {width:30%; bottom:-10%; right:15%;}
.lamp06 {width:30%; bottom:0; right:-12%;}
.lamp07 {width:20%;}
.lamp08 {width:20%;}
.lamp09 {width:20%;}

header .btn_login {top:1.2rem; right:1.2rem; position:absolute;}

.section01 .title_wrap {width:100%; padding-bottom:45%;}
.section01 .title_wrap .sub_tit {width:auto; margin:5rem -6rem 0;}
.section01 .title_wrap .sub_tit:after {display:none;}
.section01 .title_wrap .sub_tit span {position:static; width:auto; left:auto;}
.section01 .title_wrap .date {margin:2rem auto;}

.top .m_tit {font-size:30px;}
.top .m_tit .day {font-size:24px; margin: 0 2.8rem 0 7.7rem;}
.top .m_tit .day span {font-size:30px;}
.top .m_tit:before, .top .m_tit:after {width:12rem; height:2.7rem; margin-top:-1.35rem;}
.top .m_tit:before {left:-15rem;}
.top .m_tit:after {right:-15rem;}
.top .inner {height:96px;}
.top .m_tit .day:before {width:17.8rem; height:18.5rem; top:-5rem; left:-6.6rem;}

.calendar_wrap .calendar ul > li {width:calc(100% / 4);}
.calendar_wrap {padding-bottom:30%;}
}

@media screen and (max-width: 840px) {
.calendar_wrap .calendar ul > li {width:calc(100% / 3);}
}

@media screen and (max-width: 768px) {
html {font-size:32%;}
.mobile {display:block;}
.btn span {font-size:3.3rem; line-height:1;}

.user_info .user span {font-size:2.5rem; max-width:74px;}
.user_info .util {height:40px; width:calc(100% - 100px); padding-left:48px;}
.user_info .util:before {width:38px; height:46px;}
.user_info .cash {font-size:2.5rem;}
.btn_history {width:100px; height:40px; border-radius:5px;}

.section01 .title_wrap .bi img {width:24rem;}
.section01 .title_wrap .date {font-size:3.3rem;}

.top .m_tit .day {width:14.8rem; height:14.8rem; font-size:3.3rem; margin:0 0 0 4.7rem;}
.top .inner {height:11.6rem;}
.top .m_tit {font-size:3.9rem;}
.top .m_tit .day span {font-size:3.9rem;}
.top .m_tit .day:before {top:-1rem; left:-3.6rem;}
.top .m_tit:before, .top .m_tit:after {width:10rem; height:2.3rem; margin-top:-1.15rem;}
.top .m_tit:before {left:-11rem;}
.top .m_tit:after {right:-11rem;}
.top .remain {font-size:2.9rem; margin-bottom:3.6rem;}
.top .etc .count_wrap {height:45px;}
.top .sub {margin-top:6.8rem;}
.top .sub .inner {display:block; height:auto;}
.etc .btn {width:120px; height:50px;}

.mission_wrap .list .box .bg:after {top:34%;}
.mission_wrap .list .box .num {font-size:2.9rem;}
.mission_wrap .list .box .m_tit {font-size:3.7rem;}
.mission_wrap .list .box .desc {padding-top:33%; padding-bottom:2.4rem;}
.btn_round.btn_start span {font-size:3.7rem;}
.mission_wrap .list .complete .desc .img {max-width:32.4rem;}
.mission_wrap .list .lock .box .desc img {max-width:17rem;}
.mission_wrap .list .mission .txt {font-size:3.9rem;}
.mission_wrap .list .mission .count {font-size:4.9rem;}
.mission_wrap .list .btn_clear {width:31rem; height:10rem;}
.mission_wrap .list .btn_clear .cash {font-size:2.5rem;}
.mission_wrap .list .reward .img > div {max-width:9.6rem;}
.mission_wrap .list .reward .tit {top:12%;}
.mission_wrap .list .reward .name {font-size:2.5rem;}
.mission_wrap .list .lock .desc > .img {margin-top:12%;}
.total_reward .tit {font-size:2.9rem; width:300px; height:35px;}
.total_reward .btn_receive span {font-size:3.3rem;}
.total_reward .reward .name {font-size:2.5rem; padding:0 5rem;}
.mission_wrap .total_reward .con {background-size:100% 100%; position:relative; padding-bottom:4.8rem;}
.mission_wrap .total_reward:after {display:none;}
.mission_wrap .total_reward .reward .img {height:15rem;}
.mission_wrap .total_reward .btn_receive {height:8rem;}

.calendar_wrap .calendar .con .day span {font-size:2.9rem;}
.calendar_wrap .calendar .num {font-size:3.5rem;}
.calendar_wrap .calendar .count {font-size:4.9rem;}
.calendar_wrap .calendar .bin .num {font-size:4.3rem;}
.calendar_wrap .btn_day02 {bottom:14%;}
.calendar_wrap .btn_day02 span {font-size:2.7rem;}
.calendar_wrap .calendar ul > li {width:calc(100% / 4);}
.calendar_wrap .reward_wrap .con_wrap .con {background-size:100% 100%; position:relative; padding-bottom:4.8rem;}
.calendar_wrap .reward_wrap .con_wrap:after {display:none;}
.calendar_wrap .reward .img {height:15rem;}
.calendar_wrap .reward_wrap .con .btn {height:8rem;}
.calendar_wrap .reward_wrap .con .tit {font-size:2.5rem; padding:0 5rem;}

footer {font-size:2.1rem;}
footer > img {width:100px;}
footer .footer {position:relative; z-index:2;}
footer .footer .copy {font-size:2rem;}

.btn_top {width:40px; height:40px;}

.pop_up .pop_close {width:30px; height:30px; margin-top:-15px;}
.pop_up .pop_layout {width:calc(100% - 4.8rem); left:2.4rem; right:2.4rem; transform:translate(0, -50%);}
.pop_up .pop_con h2 {font-size:4.1rem;}
.pop_up .pop_con .day {font-size:4.3rem;}
.pop_up .pop_con .desc {font-size:3.1rem;}
.pop_up .pop_con .box .cash {font-size:4.2rem;}
.pop_up .pop_con .reward .name {font-size:2.5rem;}
.pop_up .btns button {font-size:2.5rem; height:45px;}
.pop_clear .btns button font {font-size:2.9rem;}
.pop_history .list li.top div {height:7rem; font-size:2.5rem;}
.pop_history .list li.bottom {height:7rem;}
.pop_history .list li.bottom div {font-size:2.1rem;}
.pop_history .list li.none {font-size:2.5rem;}
.pop_all .img_list .slick-prev {left:-4.8rem;}
.pop_all .img_list .slick-next {right:-4.8rem;}
.pop_all #pageinfo {font-size:2.7rem;}
}

@media screen and (max-width: 640px) {
.mission_wrap .list {display:block; margin-left:0;}
.mission_wrap .list li {width:100%; padding-left:0;}

.calendar_wrap .calendar ul > li {width:calc(100% / 3);}
}

@media screen and (max-width: 540px) {
.calendar_wrap .calendar ul > li {width:calc(100% / 2);}
.calendar_wrap .calendar .con {left:1rem;}

.pop_clear .btns {display:block;}
.pop_clear .btns button {display:flex; margin:1.4rem auto; width:100%; max-width:264px;}
}

@media screen and (max-width: 365px) {
.calendar_wrap .calendar ul > li {width:50%;}
}

@keyframes spin {
	100% {transform:rotate(360deg);}
}

@keyframes aim {
	0% {transform:rotate(0deg);}
	25% {transform:rotate(160deg);}
	50% {transform:rotate(0deg);}
	75% {transform:rotate(160deg);}
	100% {transform:rotate(0deg);}
}

@keyframes blink-2 {
	50% {opacity:1;}
}

@keyframes sway {
	0%, 100% {transform:rotate(-1deg);}
	50% {transform:rotate(1deg);}
}