@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 @import url("https://use.typekit.net/jfp2qsr.css");
*, *::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 {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

/* root */
:root {
--esp : 'espiritu', sans-serif; 
}

/* 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: 'futura-100', sans-serif; background:#010917;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;} 
blockquote:before, blockquote:after, q:before, q: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: 700;  font-family: 'futura-100';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'futura-100'; 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: 'futura-100';}

.mobile {display:none;} 
.s_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}

.inner {max-width:1760px; margin-left:auto; margin-right:auto; padding-left:3rem; padding-right:3rem;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

.cha {position:absolute;  max-width:none; z-index:1; transform-origin:bottom; bottom:-1rem;}
.cha01 {left:7.7%; animation: fil 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);}
.cha02 {right:4.8%; animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);}

.obj {position:absolute; }
.ball {bottom: -6rem; left: -21rem; max-width:30.3rem;}
.tree {bottom: -19rem; right: -40rem; max-width:68.6rem;}

.light {mix-blend-mode: screen; animation: blink-2 3s infinite; position:absolute;}
.light01 {animation-delay:0.5s; bottom: -6rem; left: -30rem; max-width:36.7rem;}
.light02 {animation-delay:1s; bottom: 13rem; right: -32rem; max-width:68.8rem;}

.star_line {position:absolute; top:-11rem; mix-blend-mode: screen;}
.star_line:before {content:''; display:block; position:absolute; transform:translate(-50% , 0); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.star_l {left:-30rem; }
.star_l:before {width:28.4rem; height:54.4rem; background-image:url('/images/common/event/mission/christmas/bg_star_l.png'); top:-20%; left:50%;}
.star_r {right:-28rem; }
.star_r:before {width:30.3rem; height:59.3rem; background-image:url('/images/common/event/mission/christmas/bg_star_r.png'); top: -75%; left: 60%;}

.star_line img {vertical-align:top; transform-origin: top;}
.star_line img:nth-child(1) { animation: star 2s infinite ease-in-out; }
.star_line img:nth-child(2) { animation: star 2.2s infinite ease-in-out; }
.star_line img:nth-child(3) { animation: star 1.8s infinite ease-in-out; }

.star_l img:nth-child(1) {max-width:7.4rem;}
.star_l img:nth-child(2) {max-width:9.5rem;}

.star_r img:nth-child(1) {max-width:6.4rem;}
.star_r img:nth-child(2) {max-width:4.5rem; margin:0 2.5rem 0 7.5rem;}
.star_r img:nth-child(3) {max-width:7.6rem;}


.fiu {animation: fiu 0.3s;}


.container {overflow:hidden; position:relative; background:#000;}
.all_wrap {background: rgba(26, 31, 27, 0.8);}

.btn {transition:none; background-color:rgba(255, 255, 255, 0); border-radius:40px; position:relative; font-size:20px; font-weight:700; color:#ffff96; height:8rem; letter-spacing:0.05em; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; box-shadow:0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5);}
.btn:before  {content:''; display:block; position:absolute; left:50%; top:0; background-position:0 0; background-repeat:no-repeat; background-size:100% auto;} 
.btn:hover {color:#fff; background-position:0 100%;}

.btn_day {background-image:url('/images/common/event/mission/christmas/btn_clear.png'); width:24rem; }
.btn_day:before {width:19.4rem; height:8rem; background-image:url('/images/common/event/mission/christmas/btn_clear_obj.png'); margin-left:-9.7rem; top:-4.5rem;}

.btn_all {background-image:url('/images/common/event/mission/christmas/btn_clear.png'); width:24rem; }
.btn_all:before {width:19.4rem; height:8rem; background-image:url('/images/common/event/mission/christmas/btn_clear_obj.png'); margin-left:-9.7rem; top:-4.5rem;}

.btn_receive {border-radius:5rem; width:28rem; height:15rem; background-image:url('/images/common/event/mission/christmas/btn_receive.png');}
.btn_receive:before, .btn_receive:after {width:45.2rem; height:25.1rem; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); background-size:100% auto !important;}
.btn_receive:before {background:url('/images/common/event/mission/christmas/btn_obj01.png') 0 0 no-repeat; z-index:-1;}
.btn_receive:after {background:url('/images/common/event/mission/christmas/btn_obj02.png') 0 0 no-repeat;}

.btn_receive02 {background-image:url('/images/common/event/mission/christmas/btn_receive02.png'); width:28rem; }
.btn_receive02:before {width:29.6rem; height:8.1rem; background-image:url('/images/common/event/mission/christmas/obj_receive02.png'); margin-left:-14.8rem; top:-4rem;}

.btn_receive02.off {cursor: default; background-image:url('/images/common/event/mission/christmas/btn_receive02_off.png'); color:#3d5f46;}
.btn_receive02.off:before {display:none;}
.btn_receive02.off:hover {background-position:0 0;}

.btn_receive02.end {cursor: default; background-image:url('/images/common/event/mission/christmas/btn_receive02_end.png'); color:#358b4b;}
.btn_receive02.end:before {width:6rem; height:4.8rem; background-image:url('/images/common/event/mission/christmas/btn_receive02_end_obj.png'); margin-left:-3rem; top:7rem;}
.btn_receive02.end:hover {background-position:0 0;}

.btn_clear {background-image:url('/images/common/event/mission/christmas/btn_ms_clear.png'); width:36rem; height:6.4rem; justify-content: space-evenly;}
.btn_clear:before {width:43rem; height:11.3rem; background-image:url('/images/common/event/mission/christmas/btn_ms_clear_obj.png'); margin-left:-20.7rem; top:-4rem;}
.btn_clear .cash {color:#ff7200;}
.btn_clear:hover .cash {color:#fff;}

.btn_round {z-index:1; display:inline-block; position:relative; width:21.3rem; height:21.3rem; background-color:rgba(255, 255, 255, 0); }
.btn_round > div {font-family:var(--esp); text-transform:uppercase; transition:all ease-in-out 0.2s; position:relative; cursor:pointer; background-position:0 0; background-repeat:no-repeat; display:inline-flex; align-items:center; justify-content:center; position:relative; border-radius:50%; width:100%; padding-top:1.2rem; height:100%;}
.btn_round > div:before, .btn_round > div:after {z-index:-1; content:''; display:block; position:absolute; left:50%; transform:translate(-50% , 0); background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.btn_round > div:before {background-image:url('/images/common/event/mission/christmas/bg_start_obj.png'); width:27.7rem; height:19.3rem; top:-3.4rem;}
.btn_round > div:after {background-image:url('/images/common/event/mission/christmas/obj_bell02.png'); width:4rem; height:6.5rem; bottom:-6.5rem;}
.btn_round span {transition:all ease-in-out 0.2s; text-transform:uppercase; font-size:26px; color:#ffea00; letter-spacing:0.05em; line-height:1.15; position: relative;}
.btn_round span:after {content:''; display:block; background-position:0 0; background-repeat:no-repeat; margin:1.2rem auto 0;}
.btn_round:before, .btn_round:after {content:''; display:block; position:absolute;}
.btn_round:before { background-position:0 0; background-repeat:no-repeat; left:50%; top:50%; transform:translate(-50% , -50%);}
.btn_round:after {content:''; display:block; position:absolute; top:-5px; bottom:-5px; left:-5px; right:-5px; background-position:0 0; background-repeat:no-repeat;}

.btn_round.btn_start > div {background-image:url('/images/common/event/mission/christmas/bg_start.png'); background-size:100% auto;}
.btn_round.btn_start:before {background-image:url('/images/common/event/mission/christmas/bg_round_g.png'); background-size:100% auto; width:18.6rem; height:18.6rem;  animation: spin 3s infinite linear; z-index:1; }
.btn_round.btn_start:after {background-image:url('/images/common/event/mission/christmas/bg_start_point.png'); background-size:100% auto; animation: aim 10s infinite linear;}
.btn_round.btn_start span:after {width:2.1rem; height:1.7rem; background-size:100% auto; background-image:url('/images/common/event/mission/christmas/icon_down.png');}
.btn_round.btn_start:hover:before {background-position:0 100%;}
.btn_round.btn_start:hover span {color:#fff;}
.btn_round.btn_start:hover span:after {background-position:0 100%;}

.btn_round.btn_start:hover:before {animation:none;}
.btn_round.btn_start:hover:after {animation:none;}

.btn_history {transition:all ease-in-out 0.2s; margin-right:0; margin-left:auto; padding-bottom: 1.8rem; padding-left: 4rem; z-index:9; text-transform:uppercase; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/christmas/btn_history.png'); background-position: 0 0; background-repeat: no-repeat; width:14.5rem; height:12rem; display:flex; align-items:center; justify-content:center; position:fixed; top:50%;  right:0; font-weight:600; font-size:15px; letter-spacing:0.1em; color:#ffff96; line-height:1.2;}
.btn_history:before {transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; top:8.2rem; left:60%; margin-left:-1.35rem; width:2.7rem; height:5.4rem; background:url('/images/common/event/mission/christmas/obj_bell03.png') 0 0 no-repeat; background-size:100% auto;}
.btn_history:after {content:''; display:block; position:absolute; top:7.8rem; left:60%; margin-left:-2.35rem; width:4.7rem; height:3.4rem; background:url('/images/common/event/mission/christmas/obj_ribbon03.png') 0 0 no-repeat; background-size:100% auto;}
.btn_history:hover {padding-left:2rem; color:#fff; background-image:url('/images/common/event/mission/christmas/btn_history_on.png');}
.btn_history:hover:before {top:8.8rem;}

header { text-align:center; position:absolute; top:0; left:0; right:0; z-index: 20; padding:4.8rem 3rem 0;}
header:before, header:after {mix-blend-mode: screen; content:''; display:block; position:absolute; left:50%; top:0; margin-left:-34.2rem; width:68.5rem; height:4.6rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
header:before {background-image:url('/images/common/event/mission/christmas/light.png');}
header:after {background-image:url('/images/common/event/mission/christmas/light_on.png'); animation:blink-2 0.5s infinite;}
header .date {display:none;}
header .user_info {position:absolute; top:3rem; left:3rem;}
header .btn_login {transition:none;text-transform:uppercase; background-image:url('/images/common/event/mission/christmas/btn_login.png'); background-position: 0 0; background-repeat: no-repeat; background-size:100% auto; border-radius:27px; width:21rem; height:5.4rem; display:flex; align-items:center; justify-content:center; position:absolute; top:3rem; right:3rem; font-weight:700; font-size:16px; letter-spacing:0.1em; color:#6fe14d; border-radius:27px;}
header .btn_login:before {transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; top:4.8rem; left:50%; margin-left:-1.75rem; width:3.5rem; height:6rem; background:url('/images/common/event/mission/christmas/obj_bell.png') 0 0 no-repeat; background-size:100% auto;}
header .btn_login:after {content:''; display:block; position:absolute; top:4.4rem; left:50%; margin-left:-3.2rem; width:6.4rem; height:4.7rem; background:url('/images/common/event/mission/christmas/obj_ribbon.png') 0 0 no-repeat; background-size:100% auto;}
header .btn_login:hover {color:#fff; background-position:0 100%;}
header .btn_login:hover:before {top:5.8rem;}


.user_info {min-width:36rem; flex-wrap: wrap; font-size:0; z-index:1; background:url('/images/common/event/mission/christmas/bg_user.png') 0 0 no-repeat; background-size:cover; position:relative; border-radius:27px; height:54px; display:inline-flex; align-items:center; justify-content:space-between; padding:0 1.5rem;}
.user_info .user { margin-right:2rem; font-size:16px; padding-left:5rem; color:#fff;  font-weight:400}
.user_info .user:before {position: absolute; left:0; top: -2rem ; content:''; display:inline-block; vertical-align:middle; width:6.5rem; height:8rem; background:url('/images/common/event/mission/christmas/img_snowman.png') 0 0 no-repeat; background-size:100% auto;}
.user_info .cash {font-weight:600; display:inline-block; background:#000000; color:#ff4040; font-size:14px; border-radius:15px; padding:4px 1.2rem; text-transform:uppercase;}

footer {width: 100%; padding:0 2.4rem 9rem; left:0; right:0; bottom:0; position:absolute; font-family:'Roboto'; z-index:2;}
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 12px; color:#fff; position: relative; letter-spacing:0.01em;}
footer .footer .cs > a {color:#ffdd00; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 7px; font-size:11px; color:#b7b7b7;}
.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 { width:600px; left:50%; top:50%; transform:translate(-50% , -50%); z-index: 99; position: relative; }
.pop_up .pop_layout:after {content:''; display:block;}

.pop_up .pop_close {border-radius:1rem; box-shadow:3px 2px 3px rgba(0, 0, 0, 0.3); top:50%; margin-top:-2.55rem; right:1.5rem; position:absolute; cursor:pointer; width:5rem; height: 5.1rem; font-size: 0; text-indent: -99999px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/christmas/pop_close.png'); background-size:100% auto;}
.pop_up .pop_close:hover {background-position:0 100%;}

.pop_up .pop_con {padding:1%; z-index:1; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/christmas/ptn_pop.png') 0 0 repeat; border-radius: 20px; box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);}
.pop_up .pop_con:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.pop_up .pop_con .desc {height:calc(100% - 7rem); padding:5rem; position: relative;}
.pop_up .pop_con .txt {min-height:5rem; padding:1rem 2rem; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #741219; letter-spacing:0.02em; position:relative; word-break: break-word; font-size:18px; color:#fff; font-weight:600;  background:#450005; border-radius:1.2rem 1.2rem 0 0;}
.pop_up .pop_con .day {z-index:1; position:relative; width:33.3rem; height:17.4rem; background:url('/images/common/event/mission/christmas/pop_day.png') 0 0 no-repeat; margin:-1.8rem auto 0; background-size:100% auto !important;}
.pop_up .pop_con .day > div {padding-top:3%; text-shadow: 0 1px 0 #fff, 0 0 1rem rgba(255, 226, 171, 0.3); font-size:16px; font-weight:700; color:#000000; letter-spacing:0.06em; text-transform:uppercase;  position:absolute; left: 31%; top: 7%; width: 38%; height: 70%; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.pop_up .pop_con .day > div span {font-size:30px; margin-top:-4px;}


.pop_up .pop_con h2 {border-radius:2rem 2rem 0 0; height:7rem; display:flex; align-items:center; justify-content:center; font-size:22px; text-transform:uppercase; position:relative; background:url('/images/common/event/mission/christmas/pop_h2.jpg') 0 0 repeat-x; background-size:auto 100%;}
.pop_up .pop_con h2 span {line-height:1; font-size:24px; color:#ffd947; text-transform:uppercase; letter-spacing:0.1em; font-family:var(--esp);}
.pop_up .pop_con .reward {margin-top:-4.5rem; position:relative; background:#000; border-radius:1.2rem;}
.pop_up .pop_con .reward .name {font-size:14px; min-height:36px; display:flex; align-items:flex-start; justify-content:center; color:#28a635; margin-top:3px; letter-spacing:0.04em; font-weight:500}
.pop_up .pop_con .img {max-width:48rem; position:relative; z-index:1; height:18rem; display:flex; align-items:center; justify-content:center; margin:0 auto;}
.pop_up .pop_con .img > img {max-width:100%; max-height:100%; vertical-align:middle;}

.pop_up .pop_con .box {padding:0; background:#000; position:relative; border-radius:1.5rem; }
.pop_up .pop_con .cash {font-family:'Roboto'; min-height:10.4rem; display:flex; align-items:center; justify-content:center; position:relative; font-size:30px; z-index:1; font-weight:500; color:#fffc00;}
.pop_up .pop_con .cash span:after {margin-left:1rem; position:relative; top:-2px; content:''; display:inline-block; vertical-align:middle; width:24px; height:24px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/christmas/pb_cash_g02.png');}
.pop_up .btns {font-size:0; margin-left:-1.8rem; margin-top:3rem;}
.pop_up .btns button {transition:all ease-in-out 0.2s; padding:0 2.4rem; margin-left:0.9rem; max-width:240px; text-align:left; font-size:14px; color:#fff88e; font-weight:500; letter-spacing:0.04em; line-height:1.06; display:inline-flex; vertical-align:top; align-items:center; justify-content:space-evenly; width:calc((100% - 1.8rem) / 2); height:60px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), #45ac00; border:1px solid #2f620d;} 
.pop_up .btns .btn_cancel {background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), #122b00; border-color:#2f620d;}
.pop_up .btns .btn_reward {background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), #122b00; border-color:#2f620d;}


.pop_up .btns button:hover {color:#fff; border-color:#aabe15; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), #b3c517;}
.pop_up .btns .btn_cancel:hover {color:#fff; border-color:#aabe15; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), #b3c517;}

.pop_mission .pop_layout {width:540px;}
.pop_mission .pop_layout:after {padding-bottom:76.667%;}
.pop_mission .pop_con:before {background-image:url('/images/common/event/mission/christmas/pop_mission.png');}
.pop_mission .btns button {max-width:180px; height:50px;}
.pop_mission .pop_con .reward {padding:0 5rem; }

.pop_clear .pop_layout:after {padding-bottom:99.334%;}
.pop_clear .pop_con:before {background-image:url('/images/common/event/mission/christmas/pop_clear.png');}
.pop_clear .pop_con .cash {font-family:'Roboto'; min-height:10.4rem; display:flex; align-items:center; justify-content:center; position:relative; font-size:20px; z-index:1; font-weight:500; color:#fffc00;}
.pop_clear .pop_con .cash:after {margin-left:1rem; position:relative; top:-2px; content:''; display:inline-block; vertical-align:middle; width:24px; height:24px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/christmas/pb_cash_g.png');}
.pop_clear .pop_con .desc {padding-top:0;}
.pop_clear .btns button {font-weight:400; padding:0 1rem 0 2rem;     justify-content: space-between;}

.pop_all #pageinfo {font-size:14px; color:#28a635;  letter-spacing:0.04em; font-weight:700; margin-top:7px;}
.pop_all #pageinfo span {color:#fffc00; 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/christmas/pop_arr.png'); background-color:rgba(255, 255, 255, 0); background-size:100% auto; border-radius:5px; box-shadow:5px 7px 5px rgba(0, 0, 0, 0.7);}
.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_all .pop_con .day {background:url('/images/common/event/mission/christmas/pop_ms.png') 0 0 no-repeat;}
.pop_all .btns {margin-top:2rem;}

.pop_detail .pop_layout:after {padding-bottom:78.5%;}
.pop_detail .pop_con:before {background-image:url('/images/common/event/mission/christmas/pop_detail.png');}
.pop_detail .pop_con .desc {padding:2rem; height: calc(100% - 7rem);}
.pop_detail .pop_con .box {height:100%;}
.pop_detail .pop_con .img {height:100%;}
.pop_detail .pop_con h2 {justify-content:flex-start; font-size:18px; font-weight:600; background: url('images/common/event/mission/christmas/ptn_pop.png') 0 0 repeat , #1d330b; padding:0 2rem; letter-spacing:0.1em;}
.pop_detail .pop_con h2 span {color:#fff;     font-family: 'futura-100', sans-serif;}

.pop_history .pop_layout:after {padding-bottom:99.334%;}
.pop_history .pop_con:before {background-image:url('/images/common/event/mission/christmas/pop_clear.png');}
.pop_history .pop_con .desc {padding:3rem;}
.pop_history {font-family:'Roboto';}
.pop_history .list { letter-spacing:0; height: 100%; padding-right: 1.2rem; overflow-y: auto ;}
.pop_history .list::-webkit-scrollbar {width: 0.6rem; }
.pop_history .list::-webkit-scrollbar-track {border-radius:0.5rem; background:#000;}
.pop_history .list::-webkit-scrollbar-thumb { border-radius:0.5rem; background:#ddd7b3; }
.pop_history .list li {border-bottom:1px solid #383838; background:#000; font-size: 0;}
.pop_history .list li > div {align-items: center; justify-content: center; flex-direction: column; height:5rem; padding:0 1rem; display: inline-flex; vertical-align:middle; text-align:center; font-size:12px; color:#fff;}
.pop_history .list li > div.date { width: 24%; color:#fff88e; text-transform: uppercase;}
.pop_history .list li > div.date span {display:block; color:#a49f5b; margin-top:3px;}
.pop_history .list li > div.item span {display:block; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal; width: 100%; line-height:1;}
.pop_history .list li.bottom > div.date {line-height:1.1;}
.pop_history .list li > div.mission {width:50%; color:#ffffff; white-space: normal; word-wrap: normal;}
.pop_history .list li > div.mission span {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-height:1.3; text-align:left; -webkit-box-orient: vertical; word-break: break-word;}
.pop_history .list li > div.item {width: 26%; color:#ddd7b3;}
.pop_history .list li:last-child {border-radius:0 0 1rem 1rem; overflow:hidden; }
.pop_history .list li.top {overflow:hidden;  border-radius:1rem 1rem 0 0; text-transform:uppercase; height:auto; border-bottom:0; background:none;}
.pop_history .list li.top div {letter-spacing:0.02em; font-family:var(--esp); height:4.5rem; font-size:16px; background: #450005;}
.pop_history .list li.top div span {display:inline; line-height:1; color:#ddd7b3;}
.pop_history .list li.top > div.mission {border-left:1px solid #69121a; border-right:1px solid #69121a;}
.pop_history .list li.none {letter-spacing:0.02em; height: 100%; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-family:var(--esp); font-size: 16px; color:#ddd7b3; text-transform:uppercase;  border-bottom:none;}


.section01 {text-align:center; position:relative; padding:15.7rem 3rem 30rem; background:url('/images/common/event/mission/christmas/bg01.jpg') center 0 no-repeat; background-size:cover;}

.title_wrap {display:inline-block; position: relative; z-index: 1;}
.title_wrap .tit_img {position: relative; z-index: 2; transform-origin: center center;  animation: tit 5s linear infinite;}
.title_wrap .sub_tit_wrap {position:relative; margin-top:-4px;}
.title_wrap .sub_tit_wrap:before {z-index:1; content:''; display:block; position:absolute; top:50%; left:50%; margin-top:-8.75rem; margin-left:-23rem; width:46rem; height:17.5rem; background:url('/images/common/event/mission/christmas/bg_sub_tit.png') 0 0 no-repeat; background-size:100% auto;}
.title_wrap .sub_tit_wrap .bg {flex-direction: column; clip-path: polygon(3.4rem 0, calc(100% - 3.4rem) 0, 100% 50%, calc(100% - 3.4rem) 100%, 3.4rem 100%, 0 50%); min-width:460px; max-width:100%; min-height:7.8rem; display:inline-flex; align-items:center; justify-content:center;  padding:1rem 5rem; background:#2c0000;}
.title_wrap .sub_tit {font-style:oblique; font-size:28px; font-family:var(--esp); letter-spacing:0.06em; }
.title_wrap .sub_tit span {background: linear-gradient(to bottom, #fff49b, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing:0.06em;}
.title_wrap .date {font-weight:500; font-size:18px; letter-spacing:0.03em; color:#fff; margin-top:4px;} 
.title_wrap .user_info {display:none;}

.total_reward {position:relative;}
.total_reward .con {position:relative;}
.total_reward .con .tit {font-size:20px; font-family:var(--esp); letter-spacing:0.06em; text-transform:uppercase;}
.total_reward .con .tit span {background: linear-gradient(to bottom, #f8e972, #ffc67b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.3));}
.total_reward .con .tit span:before, .total_reward .con .tit span:after {content:''; display:inline-block; vertical-align:middle; position:relative; top:-2px; width:21.3rem; height:3.1rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.total_reward .con .tit span:before {background-image:url('/images/common/event/mission/christmas/total_tit_l.png'); margin-right:6rem;}
.total_reward .con .tit span:after {background-image:url('/images/common/event/mission/christmas/total_tit_r.png'); margin-left:6rem;}
.total_reward .reward .name {font-size:16px; font-weight:500; color:#28a635; letter-spacing:0.04rem; margin-top:7px;}
.total_reward .con .go_view {top:1rem; right:1rem; z-index:2;}
.total_reward .reward .img {position:relative; z-index:1; height:18rem; max-width:480px; margin:0 auto; display:flex; align-items:center; justify-content:center; margin-top:3rem;}
.total_reward .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}

.mission_wrap {position:relative; background:url('/images/common/event/mission/christmas/ptn.jpg') 0 0 repeat; z-index:2;}
.mission_wrap .top {z-index:1; position:relative; background:url('/images/common/event/mission/christmas/obj_snow.png') center 0 no-repeat , url('/images/common/event/mission/christmas/ptn_info.jpg') 0 0 repeat-x;}
.mission_wrap .top .inner {position:relative; display:flex; align-items:center; justify-content:center; height:11rem; }
.mission_wrap .top .inner:before {animation: rotation 50s linear infinite; content:''; display:block; position:absolute; top:50%; left:50%; width:29.8rem; height:29.5rem; margin-left:-14.9rem; margin-top:-15.75rem; background:url('/images/common/event/mission/christmas/obj_ms_tit.png') 0 0 no-repeat; background-size:100% auto;}

.mission_wrap .top .dm_remain {z-index:1; padding-bottom:12.5rem; position:absolute; top:1.6rem; left:50%; transform:translate(-50% , 0); width:39.3rem; height:20rem; display:flex; align-items:center; justify-content:center; flex-direction:column; background:url('/images/common/event/mission/christmas/bg_ms_tit.png') 0 0 no-repeat; background-size:100% auto; }
.mission_wrap .top .dm_tit {font-family:var(--esp); font-size:26px; letter-spacing:0.06em;}
.mission_wrap .top .dm_tit span {text-transform:uppercase; background: linear-gradient(to bottom, #fff88e, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 5px 3px rgba(0, 0, 0, 0.3));}
.mission_wrap .top .dm_tit br {display:none;}
.mission_wrap .top .remain {margin-top:-2px; font-size:15px; text-transform:uppercase; font-weight:500; letter-spacing:0.1em; color:#ffff96; text-shadow:0 2px 0 rgba(0, 0, 0, 0.3);}

.mission_wrap .top .m_tit { position:absolute; left:0; top:-3rem; width:23rem; height:18rem; display:inline-block; background:url('/images/common/event/mission/christmas/bg_day.png') 0 0 no-repeat; background-size:100% auto; animation:float 3s ease-out infinite;}
.mission_wrap .top .m_tit > div {padding-top:7%; letter-spacing:0.06em; color:#000000; text-transform:uppercase; text-shadow:0 1px 0 #fff, 0 0 1rem rgba(255, 226, 171, 0.3); font-weight:700; width: 68%; height: 86%; display:flex; align-items:center; justify-content:center; flex-direction:column; position:absolute; top:3%; left:3%;}
.mission_wrap .top .m_tit font {font-size:20px;}
.mission_wrap .top .m_tit span { font-size:35px; display:block; }

.mission_wrap .top .btn_day {position:absolute; top:50%; right:0; transform:translate(0 , -50%);} 

.mission_wrap .top .count_wrap {font-family:var(--esp); position:absolute; top:50%; right:27rem; transform:translate(0 , -50%);}
.mission_wrap .top .count_wrap .count {font-size:25px; color:#ffffff; letter-spacing:0.06em;}
.mission_wrap .top .count_wrap .count font {color:#fff88e;}

.mission_wrap .list_wrap {padding-top:11rem; position:relative; overflow:hidden;}
.mission_wrap .list_wrap .inner {position:relative;}
.mission_wrap .list_wrap .slick-list { width:100%;}
.mission_wrap .list {margin-left:-4rem; flex-wrap: wrap; display:flex; flex-wrap: wrap;}
.mission_wrap .list li {width:calc(100% / 3); padding-left:4rem; margin-bottom:4rem;}
.mission_wrap .list li .con {height:100%; position:relative;}
.mission_wrap .list .box {position:relative;}
.mission_wrap .list .box:after {content:''; display:block; padding-bottom:88.89%;}
.mission_wrap .list .box > div {position:absolute; top:0; bottom:0; left:0; right:0; padding:1.483%; background:url('/images/common/event/mission/christmas/bg_mission.png') center center no-repeat; background-size:100% 100%; border-radius:20px; }
.mission_wrap .list .box .m_tit {border-radius:12px 12px 0 0; font-family:var(--esp); letter-spacing:0.1em; font-size:26px;  height:7.2rem; display:flex; align-items:center; justify-content:center; text-transform:uppercase; background:url('/images/common/event/mission/christmas/ptn_g.jpg') 0 0 repeat;}
.mission_wrap .list .box .m_tit span {background: linear-gradient(to bottom, #f8e972, #ffc67b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.3));}
.mission_wrap .list .box .num {padding-right: 3%; padding-bottom: 1%; font-family:var(--esp); font-weight:700; font-size:24px; letter-spacing:0.06em; background:url('/images/common/event/mission/christmas/bg_label.png') 0 0 no-repeat; width:10.8rem; height:7rem; display:flex; align-items:center; justify-content:center; text-transform:uppercase; position:absolute; top:1.5rem; left:-1.4rem; background-size:100% auto; }
.mission_wrap .list .box .num font {background: linear-gradient(to bottom, #fff88e, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.3));}

.mission_wrap .list .box .desc { position:relative; height:calc(100% - 7.2rem);}
.mission_wrap .list .box .desc .line {display:flex; align-items:center; justify-content:center; height:100%; flex-direction:column;     position: relative; z-index: 1;}
.mission_wrap .list .box .desc img {display:inline;}

.mission_wrap .list .mission {min-height:72%; display:flex; align-items:center; justify-content:center;}
.mission_wrap .list .mission .txt {font-size:28px; color:#f1edc2; font-family:var(--esp); letter-spacing:0.06em; line-height:1.2; padding:0 2rem;}
.mission_wrap .list .mission .count {font-size:30px; color:#fff88e; letter-spacing:0.06em; margin-top:2.4rem;; font-weight:700;}
.mission_wrap .list .mission .count font {color:#ff0002;}

.mission_wrap .list .btn_modify {border:1px solid #2f620d; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)) , #45ac00; position:absolute; font-size:14px; color:#fff88e; font-weight:500; letter-spacing:0.04em; top:3.1rem; right:2.3rem; z-index:1; border-radius:15px; min-width:110px; height:30px; display:flex; align-items:center; justify-content:center; padding:0 1.5rem 2px; text-transform:uppercase;}
.mission_wrap .list .btn_modify:before {margin-right:1rem; content:''; display:inline-block; vertical-align:middle; width:16px; height:17px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/christmas/icon_modify.png');}
.mission_wrap .list .btn_modify:hover {color:#fff; border-color:#aabe15; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)) , #b3c517;}
.mission_wrap .list .btn_modify:hover:before {background-position:0 100%;}


.mission_wrap .list .reward {margin-top:3rem; position:relative; z-index:1; }
.mission_wrap .list .reward:before {content:''; display:block; position:absolute; width:63%; height:6.5rem; top:-4.8rem; z-index:1; left:50%; transform:translate(-50% , 0); background:url('/images/common/event/mission/christmas/obj_ring.png') 0 0 no-repeat , url('/images/common/event/mission/christmas/obj_ring.png') right 0 no-repeat;}
.mission_wrap .list .reward:after {content:''; display:block; padding-bottom:46.297%;}
.mission_wrap .list .reward .bg {padding:2%; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/christmas/bg_reward.png') 0 0 no-repeat; background-size:100% 100%;}
.mission_wrap .list .reward .tit {text-shadow:0 2px 5px rgba(255, 255, 255, 0.5); position:absolute; left:50%; margin-left:-70px; width:140px; height:30px; padding-top:2px; display:flex; align-items:center; justify-content:center; top:0; margin-top:-15px; text-transform:uppercase; font-size:16px; font-family:var(--esp); color:#004310; letter-spacing:0.05em; background:url('/images/common/event/mission/christmas/bg_reward_tit.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .reward .img { z-index:1; height:79%; display:flex; align-items:center; justify-content:center;}
.mission_wrap .list .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.mission_wrap .list .reward .name {height:21%; display:flex; align-items:flex-start; justify-content:center; font-size:16px; font-weight:500; color:#28a635; letter-spacing:0.04em;}
.mission_wrap .list .reward .img > div {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);} 
.mission_wrap .btn_receive02 {position:absolute; top:50%; right:0; margin-top:-4rem;}


.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:40px; height:40px; background:url('/images/common/event/mission/christmas/icon_ques.png') 0 0 no-repeat; left:50%; margin-left:-20px; top:-14px; background-size:100% auto;}
.mission_wrap .list .reward .lock_item:after {top:-60px; width:100px; height:100px; background:url('/images/common/event/mission/christmas/img_light.png') 0 0 no-repeat; left:50%; margin-left:-50px; animation: fade 3s linear infinite; background-size:100% auto;}

.mission_wrap .list .con .complete span {display:block; color:#ffee33; font-size:32px; line-height:1.06; text-transform:uppercase; margin-top:1rem;}

.mission_wrap .total_reward .inner {padding-bottom:5rem; background:url('/images/common/event/mission/christmas/bg_total_l.png') 0 bottom no-repeat , url('/images/common/event/mission/christmas/bg_total_r.png') right bottom no-repeat;}
.mission_wrap .total_reward .reward {background:url('/images/common/event/mission/christmas/bg_shd.png') center center no-repeat; background-size:contain;}
.mission_wrap .total_reward .reward .img:before {content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:51.2rem; height:27.5rem; background:url('/images/common/event/mission/christmas/obj_item_part.png') 0 0 no-repeat; background-size:100% auto;}

.go_view {transition:none; z-index:1; font-size:0; color:transparent; position:absolute; width:30px; height:30px; border-radius:50%; background-position:0 0; background-image:url('/images/common/event/mission/christmas/btn_view.png'); background-size:100% auto; background-repeat:no-repeat; top:3rem; right:3rem;}
.go_view:hover {background-position:0 100%;}

.list_wrap .btn_arr {top:50%; font-size:0; position:absolute; color:transparent; margin-top:-7.2rem; transition:non; z-index: 2; width:7.2rem; height:7.2rem; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/christmas/btn_arr.png'); background-size:100% auto; background-color:rgba(255, 255, 255, 0);}
.list_wrap .btn_prev {left:-11.2rem;}
.list_wrap .btn_next {right:-11.2rem; transform:scaleX(-1);}
.list_wrap .btn_arr:hover {background-position:0 100%;}
.list_wrap .btn_arr.slick-disabled {opacity:0;}

.calendar_wrap {z-index:2; background:url('/images/common/event/mission/christmas/bg03.jpg') center center no-repeat; background-size:cover; position:relative; padding-bottom:38rem;}
.calendar_wrap:before {z-index:1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/christmas/bg03_shd.png') center center no-repeat; background-size:cover;}
.calendar_wrap > .inner {position:relative;}
.calendar_wrap > .inner:before {content:''; display:block; position:absolute; z-index:1; top: -16.2%; left: -4.6%; width:28.6rem; height:28.4rem; background:url('/images/common/event/mission/christmas/obj_ribbon02.png') 0 0 no-repeat; background-size:100% auto;}
.calendar_wrap > .m_tit {position:relative; margin-bottom:5rem; z-index:1;}
.calendar_wrap > .m_tit .tit_cal {margin-left: -100%; margin-right: -100%; box-shadow:0.5rem 1rem 0.5rem rgba(0, 0, 0, 0.7);  display:flex; align-items:center; justify-content:center; height:11rem; background:url('/images/common/event/mission/christmas/ptn_cal.jpg') 0 0 repeat-x;  background-size:auto 100%;}
.calendar_wrap > .m_tit:before, .calendar_wrap > .m_tit:after {z-index:-1; content:''; display:block; position:absolute; background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.calendar_wrap > .m_tit:before {left:1.8%; top:7rem; width:25rem; height:16.1rem; background-image:url('/images/common/event/mission/christmas/ribbon_l.png');}
.calendar_wrap > .m_tit:after {right:1.8%; top:4rem; width:27.3rem; height:19rem; background-image:url('/images/common/event/mission/christmas/ribbon_r.png');}
.calendar_wrap > .m_tit .tit_cal span {font-size:25px; font-family:var(--esp); letter-spacing:0.06em;  text-transform:uppercase; background: linear-gradient(to bottom, #ffff96, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.3));}
.calendar_wrap > .m_tit .inner {position:relative;} 
.calendar_wrap .calendar {background:url('/images/common/event/mission/christmas/light_l.png') 0 0 no-repeat, url('/images/common/event/mission/christmas/light_r.png') right 0 no-repeat, rgba(0, 0, 0, 0.8); border:1px solid #ffec98; position:relative; border-radius:2rem; padding:5rem 6rem 2rem;}
.calendar_wrap .rate_info {top:50%; right:3rem; margin-top:-4rem; position:absolute; font-size:0;}
.calendar_wrap .rate_info .rate {margin-right:3.6rem; font-size:25px; font-family:var(--esp); color:#fff88e; letter-spacing:0.06em; vertical-align: middle; text-transform:uppercase;}
.calendar_wrap .rate_info .btn_all {display:inline-flex; vertical-align:middle;}
.calendar_wrap .star_l {left:-34rem;}
.calendar_wrap .star_l:before {width:35.4rem; height:37.9rem; background-image:url('/images/common/event/mission/christmas/light01.png'); animation: blink-2 3s infinite; mix-blend-mode: screen;}
.calendar_wrap .star_l img:nth-child(1) {margin-right:9rem;}
.calendar_wrap .star_r {right:-18rem;}
.calendar_wrap .star_r:before {display:none;}
.calendar_wrap .star_r img:nth-child(2) {margin:0 0 0 1.2rem;}


.calendar_wrap .calendar:before {content:''; display:block; position:absolute; top:-1rem; left:4rem; right:4rem; height:2rem; background:url('/images/common/event/mission/christmas/spring.png') 0 0 repeat-x; background-size:auto 100%;}
.calendar_wrap .calendar .info {position:relative;}
.calendar_wrap .calendar ul {z-index:1; position:relative; margin-left:-3rem; text-align:left;}
.calendar_wrap .calendar ul > li {padding-left:3rem; display:inline-block; vertical-align:top; width:calc(100% / 7); position:relative; margin-bottom:3rem;}
.calendar_wrap .calendar ul > li:after { content: ""; display: block; padding-bottom: 100%;}
.calendar_wrap .calendar .con {padding: 6% 6% 0; flex-direction:column; display:flex; align-items:center; justify-content: flex-start; background-repeat:no-repeat; background-position:center center; background-image:url('/images/common/event/mission/christmas/bg_cal.png'); background-size:100% 100%; border-radius:2rem; position:absolute; top:0; left:3rem; bottom:0; right:0;}
.calendar_wrap .calendar .con:before {z-index:1; content:''; display:block; position:absolute; left:50%; bottom:15%; transform:translate(-50% , 100%); width:4.5rem; height:6.8rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/christmas/obj_cal_star.png');}
.calendar_wrap .calendar .con .day {background:#062708; width:100%; border-radius:8px; text-transform:uppercase; text-align:center; position:relative; height:16%; font-size:20px; color:#fff; font-family:var(--esp); letter-spacing:0.06em; display:flex; align-items:center; justify-content:center; }
.calendar_wrap .calendar .con .day span {line-height:1; background: linear-gradient(to bottom, #ffff96, #fff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.calendar_wrap .calendar .con .complete {width: 67.39%; z-index:1; margin-top: 5%; display:inline-block; position:relative;}
.calendar_wrap .calendar .con .complete span {flex-direction: column; top:0; bottom:0; left:0; right:0; position:absolute; display:flex; align-items:center; justify-content:center; text-transform:uppercase; color:#c1ff55; font-size:18px; font-weight:800;  letter-spacing:0.02em; padding:2px 0 1.7rem;}
.calendar_wrap .calendar .con .complete span:before {margin-bottom:1rem; content:''; display:block; width:2.1rem; height:1.7rem; background:url('/images/common/event/mission/christmas/icon_complete.png') 0 0 no-repeat; background-size:100% auto;}
.calendar_wrap .calendar .con .complete span font {border-top:1px solid rgba(193, 255, 85, 0.55); border-bottom:1px solid rgba(193, 255, 85, 0.55);}
.calendar_wrap .calendar .con .img {z-index:1;     width: 34.28%; height:53%; display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .count { height: 76%; font-weight:700; font-size:30px; color:#fff88e; letter-spacing:0.06em;  display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .count font {color:#ff0002; margin-right:0.7rem;}
.calendar_wrap .calendar .btn_day {width:130px; height:32px; background-image:url('/images/common/event/mission/christmas/btn_day.png'); color:#f9a500; font-size:14px;}
.calendar_wrap .calendar .btn_day:before {display:none;}
.calendar_wrap .calendar .btn_day:hover {color:#fff;}

.calendar_wrap .calendar .today .con {background-image:url('/images/common/event/mission/christmas/bg_cal_today.png'); }
.calendar_wrap .calendar .today .con:after {z-index:-1; content:''; display:block; position:absolute; left: 45%; top: -16%; width:114.17%; height:100%; transform:translate(-50% , 0); background:url('/images/common/event/mission/christmas/today_obj.png') 0 0 no-repeat; background-size:100% auto;}
.calendar_wrap .calendar .today .con:before {display:none;}
.calendar_wrap .calendar .today.ok .con:before {display:block; width:3.5rem; height:6.6rem; background-image:url('/images/common/event/mission/christmas/obj_cal_ball.png');}
.calendar_wrap .calendar .today .t_tit {z-index:1; font-size:14px; color:#000000; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; position:absolute; left:50%; transform:translate(-50% , 0); top:-2.8rem; width:8rem; height:2.3rem; background:url('/images/common/event/mission/christmas/tit_today.png') 0 0 no-repeat; background-size:100% auto;}


.calendar_wrap .calendar .ok .con {background-image:url('/images/common/event/mission/christmas/bg_cal_on.png'); }
 
.calendar_wrap .calendar .fail .con {background-image:url('/images/common/event/mission/christmas/bg_cal_on.png'); }
.calendar_wrap .calendar .fail .con .day {color:#cc8899; border-color:#cc8899;}

.calendar_wrap .calendar .bin .con {justify-content:center; padding:0;}
.calendar_wrap .calendar .bin .con:before {display:none;}
.calendar_wrap .calendar .bin .con .day {height:auto; background:none; font-size:30px;} 
.calendar_wrap .calendar .bin .con .day span {background: linear-gradient(to bottom, #80878b, #80878b);}



.calendar_wrap .reward_wrap {position:relative; font-size:0; margin-top:10rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4rem; padding-bottom:0; padding-top:0;}
.calendar_wrap .reward_wrap .con {display:inline-block; padding:1rem 3rem 3rem;  flex-grow: 1; min-height:37.3rem; position:relative; max-width:none; margin:0; max-width:calc((100% - 4rem) / 2); background:rgba(0, 0, 0, 0.8); border-radius:2rem; border:1px solid #ffec9b;}
.calendar_wrap .reward_wrap .con .reward {height:100%;  position:relative; z-index:1;}
.calendar_wrap .reward .img {margin-top:0;}
.calendar_wrap .reward_wrap .con .go_view {right:1.2rem; top:1.2rem;}
.calendar_wrap .reward_wrap .con .tit {text-align:center; margin-top:0; position:absolute; left:0; right:0; top:-4.2rem;}
.calendar_wrap .reward_wrap .con .btn_receive02 {z-index:1; margin-top:4.8rem; }


/* loading */
.loading {width:100%; height:100%; background:rgba(0, 0, 0, 0.7); position:fixed; z-index:9999; top:0;}
.loading .load {top:50%; transform:translate(0 , -100%); width:60px; height:60px; margin:0 auto;  position: relative; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; /* overflow: hidden; */}
.loading .circle-loader {position: relative; width: auto; height: auto;}
.loading .circle-loader div { height: 10px; width: 10px; background-color: #515457; border-radius: 50%; position: absolute; animation: shadowPulse01 8s linear infinite, 0.8s opaque ease-in-out infinite both; }
.loading .circle-loader > div:nth-child(1) { top: -25px; left: 0;}
.loading .circle-loader > div:nth-child(2) { top: -17px;left: 17px; animation-delay: 0.1s;}
.loading .circle-loader > div:nth-child(3) {top: 0; left: 25px; animation-delay: 0.2s;}
.loading .circle-loader > div:nth-child(4) { top: 17px; left: 17px; animation-delay: 0.3s;}
.loading .circle-loader > div:nth-child(5) { top: 25px; left: 0; animation-delay: 0.4s;}
.loading .circle-loader > div:nth-child(6) { top: 17px; left: -17px; animation-delay: 0.5s;}
.loading .circle-loader > div:nth-child(7) {top: 0; left: -25px; animation-delay: 0.6s;}
.loading .circle-loader > div:nth-child(8) { top: -17px; left: -17px; animation-delay: 0.7s;}
.loader {position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; width: 100px; height: 100px;}
.loader span { border: 10px solid transparent; background-image: linear-gradient(#000, #000),  linear-gradient(to right, rgba(255, 555, 255, 0.4) 65%,  #fff 100%); background-origin: border-box; background-clip: content-box, border-box;  border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite;}
.loader span+ font {position: relative; font-size:10px; line-height:100px; font-family:'Roboto'; font-weight:700; display:block;  text-align:center; color:#fff; text-transform:uppercase;}


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

.cha01 {width:62.8%; left:0;}
.cha02 {width:53.6%; 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;}	

.mission_wrap .top .m_tit {left:0;}
.mission_wrap .top .btn_day {right:3rem;}
.mission_wrap .top .count_wrap {right:30rem;}
}

	
@media screen and (max-width: 1800px) {
.calendar_wrap .calendar {padding-left:2.4rem; padding-right:2.4rem;}
.calendar_wrap .calendar ul {margin-left:-2rem;}
.calendar_wrap .calendar ul > li {padding-left:2rem;}
}

@media screen and (max-width: 1600px){
.total_reward .con .tit span:before {margin-right:3rem;}
.total_reward .con .tit span:after {margin-left:3rem;}
}
	
@media screen and (max-width: 1500px) {
.mission_wrap .list {margin-left:-3rem;}	
.mission_wrap .list li {padding-left:3rem; margin-bottom:3rem;}
.mission_wrap .list .mission .txt {font-size:20px;}
.mission_wrap .list .btn_modify {top: 2.6rem; right: 1rem;}

.calendar_wrap .reward_wrap  {display:block;}
.calendar_wrap .reward_wrap .con {display:block; max-width:none; margin-bottom:10rem;}
.calendar_wrap .reward_wrap .con.final {margin-bottom:0;}
.mission_wrap .list .mission .count {font-size:24px;}


.list_wrap .btn_arr {margin-top:-14.2rem;}
}	

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

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



}
	
@media screen and (max-width: 1280px) {
.cha01 {left:-1%;}

.btn_history {top:auto; bottom:3rem;}

.star_line {top:-18rem;}

header {padding-top:3.3rem;}	
header .user_info {display:none;}	
.title_wrap .user_info {display:inline-flex; margin-top:5rem;}
.title_wrap .sub_tit {width:100%;}

.calendar_wrap .rate_info {position:relative; right:auto; top:auto; margin-top:5rem; text-align:right;}
.calendar_wrap > .inner:before {width:20rem; height:19.9rem;  top: -8rem; left: -5rem;}
.calendar_wrap .rate_info .rate {left: 50%; transform: translate(-50%, -50%); top: 50%; width: max-content; position:absolute;}	

.mission_wrap .btn_receive02 {position:relative; top:auto; right:auto; margin-top:4rem;}
.mission_wrap .total_reward .inner {background-size:30% auto;}
.mission_wrap .top .count_wrap {position:static; display:inline-block; vertical-align:middle; transform:none; bottom: -3rem; left: 50%; transform: translate(-50%, 0); top: auto; width: max-content; position:absolute;}
.mission_wrap .top .btn_day {position:relative; margin-top:0; top:auto; transform:none; right:auto; margin-left:3rem;}
.mission_wrap .top .inner {top:auto; padding-top:20rem;     justify-content: flex-end;}
.mission_wrap .top .inner:before {top:0;     margin-top: -9.75rem; }
.mission_wrap .list_wrap {padding-top:8rem;}

}	

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

@media screen and (max-width: 1023px) {
.btn_clear {width:27rem; height:4.8rem; font-size:16px;}
.list_wrap .btn_arr {width:4.8rem; height:4.8rem;}
.mission_wrap  .total_reward .con .tit span:before, .mission_wrap .total_reward .con .tit span:after {display:none;}
.mission_wrap .list .btn_modify {padding: 0 5px 2px; min-width: 0;}
.mission_wrap .list .btn_modify:before {margin-right:3px;}
	

}	

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

}	

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}	
body {font-size:2.3rem;}

.mobile {display:block;}

.btn {font-size:2.5rem;}
.btn_round span {font-size:3rem;}
.btn_clear {width:50rem; height:8.9rem;}
.btn_clear:before {width:59.7rem; height:15.7rem; margin-left: -29.7rem; top: -4.7rem;}
.btn_history {font-size:2.1rem; line-height:1;}

header .bi img {width:24rem;}
.title_wrap .sub_tit_wrap .bg {max-width:460px; min-width:0;}
.title_wrap .sub_tit {font-size:3.7rem;}
.title_wrap .date {font-size:2.7rem;}
.user_info {height:36px;}
.user_info .user {font-size:2.7rem;}
.user_info .user:before {top:0;}
.user_info .cash {font-size:2.3rem;}
header .btn_login {font-size:2.5rem; right:2rem;}

.pop_up .pop_layout {width:calc(100% - 4.8rem); left:2.4rem; right:2.4rem; transform: translate(0, -50%);}
.pop_up .pop_con h2 span {font-size:3.3rem;} 
.pop_up .pop_con .day > div {font-size:2.5rem;}
.pop_up .pop_con .day > div span {font-size:5.4rem;}
.pop_up .pop_con .txt {font-size:2.7rem; min-height:7rem;}
.pop_up .pop_con .reward .name {font-size:2.3rem;}
.pop_up .btns button {font-size:2.1rem; height:50px;}

.pop_clear .pop_con .cash {font-size:2.3rem;}
.pop_clear .pop_con .cash:after {width:17px; height:17px; top:0;}

.pop_all #pageinfo {font-size:2.3rem;}

.pop_history .list li > div {font-size:2.1rem; height:7rem;}
.pop_history .list li.top div {font-size:2.5rem; height:6rem;}
.pop_history .list li.none {font-size:2.5rem;}

.pop_detail .pop_con h2 {font-size:2.7rem;}




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

.total_reward .con .tit {font-size:2.9rem;}
.total_reward .reward .name {font-size:2.5rem;}
.total_reward .con .tit span:before, .total_reward .con .tit span:after {width:14rem; height:2rem;}

.calendar_wrap .calendar {background-size:auto 3.1rem;}
.calendar_wrap .calendar .con .day {font-size:2.9rem;}
.calendar_wrap .calendar .btn_day {width:81px; height:20px; font-size:2rem;}
.calendar_wrap .calendar .today .t_tit {font-size:2rem;}
.calendar_wrap .calendar .con .count {font-size:3.9rem;}
.calendar_wrap .calendar .bin .con .day {font-size:3.9rem;}
.calendar_wrap > .m_tit .tit_cal span {font-size:3.4rem;}
.calendar_wrap .rate_info .rate {font-size:3.8rem;}

.mission_wrap .top .inner {padding-top:25rem;}
.mission_wrap .list .box .num {font-size:3.3rem; left:0;}
.mission_wrap .list .box .m_tit {font-size:3.5rem;}
.mission_wrap .list .reward .name {font-size:2.3rem;}
.mission_wrap .list .mission .txt {font-size:3rem;}
.mission_wrap .list .mission .count {font-size:3.9rem;}
.mission_wrap .list .btn_modify {font-size:2.3rem; min-width:80px; top:1.8rem; right:2rem;}
.mission_wrap .list .reward:before {background-size:2.7rem auto;}
.mission_wrap .list .reward .tit {margin-top:-22px;}
.mission_wrap .top {background-size:80% auto, 11rem auto;}
.mission_wrap .top .m_tit font {font-size:2.9rem;}
.mission_wrap .top .m_tit span {font-size:3.4rem;}
.mission_wrap .top .dm_tit {font-size:3.6rem;}
.mission_wrap .top .remain {font-size:2.4rem;}
.mission_wrap .top .count_wrap .count {font-size:3.8rem;}

.list_wrap .btn_arr {width:7.2rem; height:7.2rem;}




}

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

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

.pop_history .list li > p.date {width:30%;}
.pop_history .list li > p.quest {width:40%;}
}	

@media screen and (max-width: 365px) {
.calendar_wrap .calendar ul > li {width:50%;}
.total_reward .con .tit span:before {margin-right:1rem;}
.total_reward .con .tit span:after {margin-left:1rem;}
}



@keyframes fade {
    0% {
        opacity: 0;
        z-index: 2
    }

    15% {
        opacity: 1;
        z-index: 2
    }

    49% {
        opacity: 1;
        z-index: 2
    }

    50% {
        z-index: 1
    }

    85% {
        opacity: 0
    }

    to {
        opacity: 0;
    }
}

@keyframes fir {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes fil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes flip-in-ver-right {
  0% {
    -webkit-transform: rotateY(-120deg);
            transform: rotateY(-120deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}

@keyframes fiu {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@keyframes spin {
  100% { transform:translate(-50% , -50%) 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 shadowPulse01 {
  22% {
    background: #fff;
  }
  44% {
    background: #ffea00;
  }
  66% {
    background: #ff0000;
  }
  88% {
    background: #86cefe;
  }
  100% {
    background: #fff;
  }
} 

@keyframes opaque {
  0% {
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1;
  }
}

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


 
@keyframes float {
	0% {opacity:1;}
  50% {
     transform: translate(0, 2rem);
     opacity:1;
  }
  100% {opacity:1;}
}

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

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

@keyframes tit {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(-3deg); }
  33%  { transform: rotate(1deg); }
  52%  { transform: rotate(-2deg); }
  72%  { transform: rotate(2.5deg); }
  80%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}