@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Nosifer&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 {
/* 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 {
--nsf : 'Nosifer', 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: 'Metal Mania', 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: 'Metal Mania';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'Metal Mania'; 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: 'Metal Mania';}

.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;}
.ghost {position:absolute;  max-width:none; opacity:0; animation-fill-mode:forwards;     mix-blend-mode: screen;}

.cha01 {top:224px; left:126px; animation: sway 2s infinite linear;}
.cha02 {left:494px; top:166px; animation: sway02 2s infinite linear;}
.cha03 {animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000); top:42px; right:55px;}
.fiu {animation: fiu 0.3s;}
.ghost01 {animation: ghost 0.3s linear , float 3s 0.3s ease-out infinite; right:632px; top:12%;}
.ghost02 {animation: ghost02 0.3s 0.3s linear , float 3s 0.6s ease-out infinite; right:0; top:38%;}


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

.btn {transition:all ease-in-out 0.2s; border-radius:33px; position:relative; font-size:25px; color:#000000; padding:0 4rem; height:6.6rem; letter-spacing:0.02em; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) , linear-gradient(to right, #aaddff, #bbbbff); box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.8) , 0 0.6rem 1rem rgba(0, 0, 0, 0.3);}
.btn:before {content:''; display:block; position:absolute; width:9rem; height:3.2rem; left:50%; bottom:-3rem; margin-left:-4.5rem; background:url('/images/common/event/mission/halloween/obj_slime.png') 0 0 no-repeat; background-size:100% auto !important;}
.btn:after {transition:all ease-in-out 0.2s; opacity:0; content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; border-radius:29px; background:#000 url('/images/common/event/mission/halloween/ptn_btn.png') center center no-repeat;}
.btn span {position:relative; line-height:1; z-index:1; background: linear-gradient(to bottom, #112288, #000); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}

.btn_receive {width:240px; height:132px;}
.btn_receive span:after {content:''; display:block; margin:7px auto 0; width:16px; height:18px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/halloween/icon_receive.png'); background-size:100% auto;}
.btn_receive:hover span:after {background-position:0 100%;}


.btn:hover:before {display:none;}
.btn:hover:after {opacity:1;}
.btn:hover span {background: linear-gradient(to bottom, #dceeff, #c1e0ff); }

.btn_round {transition:all ease-in-out 0.2s; position:relative; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative; border-radius:50%; width:21rem; padding-top:1.2rem; height:21rem; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat;}
.btn_round span {transition:all ease-in-out 0.2s; text-transform:uppercase; font-size:26px; letter-spacing:0.04em; line-height:1.07; position: relative;}
.btn_round span:after {content:''; display:block; background-position:0 0; background-repeat:no-repeat; margin:1rem 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:-3px; bottom:-3px; left:-3px; right:-3px; background-position:0 0; background-repeat:no-repeat;}

.btn_round.btn_start {background-image:url('/images/common/event/mission/halloween/bg_start.png'); background-size:100% auto;}
.btn_round.btn_start:before {background-image:url('/images/common/event/mission/halloween/bg_round_g.png'); background-size:100% auto; width:18.6rem; height:18.6rem;  animation: spin 3s infinite linear;}
.btn_round.btn_start:after {background-image:url('/images/common/event/mission/halloween/bg_start_point.png'); background-size:100% auto; animation: aim 10s infinite linear;}
.btn_round.btn_start span {color:#aaddff; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #aaddff) , #aaddff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));}
.btn_round.btn_start span:after {width:2.1rem; height:1.7rem; background-size:100% auto; background-image:url('/images/common/event/mission/halloween/icon_down.png');}
.btn_round.btn_start:hover:before {background-position:0 -18.6rem;}
.btn_round.btn_start:hover span {color:#fbc; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fbc) , #fbc; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.btn_round.btn_start:hover span:after {background-position:0 -1.7rem;}

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

.btn_history {transition:none; position:fixed; bottom: 112px; right:1.2rem; font-size:21px; z-index:10;}
.btn_history span {position:relative; width:9.7rem; height:10rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/halloween/btn_history.png'); background-size:100% auto; display:flex; align-items:center; justify-content:center; line-height:1; padding: 2px 0 0 1px; letter-spacing: 0.02rem;}
.btn_history font {position:relative; line-height:0.8; z-index:1; background: linear-gradient(to bottom, #112288, #000); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_history:before {content:''; display:block; position:absolute; top:-3rem; left:50%; margin-left:-6.6rem; width:13.2rem; height:15.6rem; background:url('/images/common/event/mission/halloween/obj_spider.png') 0 0 no-repeat; background-size:100% auto;}
.btn_history:after {content:''; display:block; position:absolute; bottom:-11.6rem; left:50%; margin-left:-6rem; width:12rem; height:12rem; background:url('/images/common/event/mission/halloween/spider.png') 0 0 no-repeat; background-size:100% auto; animation: spider-move-1 5s infinite;}
.btn_history:hover span {background-position:0 100%;}
.btn_history:hover font {background: linear-gradient(to bottom, #dceeff, #c1e0ff); }

header { text-align:center; position:absolute; top:0; left:0; right:0; z-index: 20; padding:4rem 3rem 0;}
header .date {display:none;}
header .user_info {position:absolute; top:3rem; left:3rem;}
header .btn_login {position:absolute; top:3rem; right:3rem; min-width:18rem;}
header .btn_login:before {width:7.7rem; height:5.9rem; background:url('/images/common/event/mission/halloween/obj_slime02.png') 0 0 no-repeat; margin-left:-3.35rem; bottom:-5.7rem;}

.user_info {backdrop-filter: blur(5px); flex-wrap: wrap; font-size:0; z-index:1; background:rgba(32, 48, 80, 0.5); position:relative; border-radius:33px; height:66px; display:inline-flex; align-items:center; justify-content:space-between; padding:0 2.4rem;}
.user_info .user {margin-right:2rem;  font-size:23px; color:#fff; letter-spacing:0.02em; text-shadow:0 0 1px rgba(0, 0, 0, 0.4);}
.user_info .user:before {position: relative; top: -2px; content:''; display:inline-block; vertical-align:middle; width:34px; height:36px; background:url('/images/common/event/mission/halloween/icon_user.png') 0 0 no-repeat; margin-right:1rem; background-size:100% auto;}
.user_info .cash {background:linear-gradient(to right, #aaddff, #bbbbff); display:inline-block; font-family:'Roboto'; color:#000000; font-size:15px; border-radius:12px; padding:4px 1.4rem; text-transform:uppercase;}

footer {width: 100%; padding:8rem 0; position:relative; font-family:'Roboto';}
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 12px; color:#999999; position: relative; z-index: 2; letter-spacing:0.01em;}
footer .footer .cs > a {color:#88aaee; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 7px;}

/* 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 {border:0.3rem solid #bbbbbb; width:578px; left:50%; top:50%; position: absolute; transform:translate(-50% , -50%); z-index: 99; position: relative; background: url(/images/common/event/mission/halloween/pbn_grunge02.png) center center no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)), #555555; border-radius: 2rem; box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);}

.pop_up .pop_close {top:50%; margin-top:-11px; right:2.7rem; position:absolute; cursor:pointer; width:28px; height: 22px; 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/halloween/pop_close.png');}
.pop_up .pop_close:hover {background-position:0 100%;}

.pop_up .pop_con {z-index:1; position:relative;}
.pop_up .pop_con .desc { padding:4rem 4rem 5.6rem; position: relative;}
.pop_up .pop_con .txt {letter-spacing:0.02em; position:relative; word-break: break-word; font-size:20px; color:#aaaaaa; }
.pop_up .pop_con .day {padding-top:5px; background:#88aaee url('/images/common/event/mission/halloween/pbn_grunge02.png') center 0 no-repeat;  padding:1.8rem 2.4rem 1rem;  font-size:32px; border-radius:1.2rem; font-family:var(--nsf); color:#000000; height:6.4rem; display:flex; align-items:center; justify-content:center;}
.pop_up .pop_con .day span {color:#660000; margin:0 1rem;}

.pop_up .pop_con h2 {padding-top:5px; border-bottom:0.2rem solid rgba(255, 255, 255, 0.4); height:7.7rem; display:flex; font-family:var(--nsf); align-items:center; justify-content:center; font-size:22px; text-transform:uppercase; position:relative; }
.pop_up .pop_con h2 span {line-height:1; background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) , #666666; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));}
.pop_up .pop_con .reward {margin-top:2rem; padding:0 5rem; position:relative; background:rgba(0, 0, 0, 0.5) url('/images/common/event/mission/halloween/ptn_scrach.png') center center repeat; background-size: cover; box-shadow:0 2px 0 rgba(255, 255, 255, 0.3); border-radius:1.2rem;}
.pop_up .pop_con .reward .name {font-size:20px; color:#fff;  padding:5px 2.4rem; min-height:5.5rem; display:flex; align-items:center; justify-content:center;}
.pop_up .pop_con .img {max-width:37rem; position:relative; z-index:1; height:14rem; 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:5.2rem 5rem; position:relative; background:rgba(0, 0, 0, 0.5) url('/images/common/event/mission/halloween/ptn_scrach.png') center center repeat; box-shadow:0 2px 0 rgba(255, 255, 255, 0.3); border-radius:1.2rem;}
.pop_up .pop_con .cash {position:relative; font-size:20px; z-index:1;font-weight:700; font-family:'Roboto'; color:#ebf902;}
.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/halloween/pb_cash_g02.png');}
.pop_up .btns {font-size:0; margin-left:-1.8rem; margin-top:2rem;}
.pop_up .btns button {padding:0 2.4rem; margin-left:1.8rem; text-align:left; font-size:15px; letter-spacing:0.04em; line-height:1.06; display:inline-flex; vertical-align:top; align-items:center; justify-content:space-evenly; width:calc((100% - 3.6rem) / 2); height:60px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;} 
.pop_up .btns .btn_cancel {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), #999999;}
.pop_up .btns .btn_cancel:after {background:#222222;}
.pop_up .btns .btn_cancel:before {display:none;}
.pop_up .btns .btn_cancel:hover span {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), #999999;}

.pop_up .btns .btn_reward {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, #ffffaa, #ffdd88);}
.pop_up .btns .btn_reward:before {background: url(/images/common/event/mission/halloween/obj_slime04.png) 0 0 no-repeat;}
.pop_up .btns .btn_reward span {    background: linear-gradient(to bottom, #770000, #000);}
.pop_up .btns .btn_reward span:before {background-image: url(/images/common/event/mission/halloween/icon_receive02.png); }
.pop_up .btns .btn_reward:hover span {background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1)) , #ffeeaa;}

.pop_mission .pop_con .desc {padding-bottom:2.7rem;}
.pop_mission .pop_con .txt {margin-top:2rem;}
.pop_mission .pop_con .cash {background:#88aaee url('/images/common/event/mission/halloween/pbn_grunge02.png') center 0 no-repeat;  padding:1.8rem 2.4rem 1rem;  font-size:30px; border-radius:1.2rem; font-family:var(--nsf); color:#000000; height:6.4rem; display:flex; align-items:center; justify-content:center;}
.pop_mission .btns {margin-left:0; margin-top:3rem;}
.pop_mission .btns button {margin:0 1rem; width:180px; font-size:18px; letter-spacing:0.02em;}
.pop_mission .btns button span {line-height:1;}

.pop_detail .pop_con .desc {padding:4rem;}
.pop_detail .pop_con h2 { font-size:26px; color:#fff; letter-spacing:0.02em; font-family: 'Metal Mania'; font-weight:400; padding-left:3.6rem; justify-content: flex-start; text-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5) , 0 0 4px #000; }
.pop_detail .pop_con .box { padding:3rem 4.5rem; position:relative; background:rgba(0, 0, 0, 0.5) url('/images/common/event/mission/halloween/ptn_scrach.png') center center repeat; box-shadow:0 2px 0 rgba(255, 255, 255, 0.3); border-radius:1.2rem;}

.pop_clear .pop_con .txt {border-radius:1.2rem 1.2rem 0 0; background:rgba(0, 0, 0, 0.6); padding:1.9rem 2.4rem; margin:0 -5rem;}
.pop_clear .pop_con .cash {font-family:'Roboto'; font-size:22px; font-weight:500; color:#990000; letter-spacing:-0.04em;}
.pop_clear .pop_con .cash:after {margin-left:0.5rem; 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/halloween/pb_cash_g02.png');}

.pop_all #pageinfo {font-size:20px; color:#888888;  letter-spacing:0.02em; padding:1.5rem 0;}
.pop_all #pageinfo span {color:#bbccff;}
.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:50%; display:block; width:36px; height:36px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/halloween/btn_arr.png'); background-color:rgba(255, 255, 255, 0); background-size:100% auto;}
.pop_all .img_list .slick-prev {left:-3rem;}
.pop_all .img_list .slick-next {right:-3rem; 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_history .list { letter-spacing:0; height: 45.6rem; padding-right: 1.4rem; overflow-y: auto ;}
.pop_history .list::-webkit-scrollbar {width: 1rem; }
.pop_history .list::-webkit-scrollbar-track {border-radius:0.5rem; background:none;}
.pop_history .list::-webkit-scrollbar-thumb { border-radius:0.5rem; background: rgba(0, 0, 0, 0.6); }
.pop_history .list li { height:6rem; line-height:6rem; border-bottom:1px solid #555555; font-size: 0; border-radius:1.2rem; background:rgba(0, 0, 0, 0.6);}
.pop_history .list li > p {padding:0 2rem; display: inline-block;  vertical-align:middle; text-align:center; font-size:15px; color:#fff; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
.pop_history .list li > p.date { width: 20%; color:#88aaee; font-size:15px; text-transform: uppercase;}
.pop_history .list li > p.date span {display:block; color:#999999;}
.pop_history .list li.bottom > p.date {line-height:1.1;}
.pop_history .list li > p.quest {width: 50%; color:#ffffff; font-family:'Roboto';}
.pop_history .list li > p.item {width: 30%; color:#ffee33; font-family:'Roboto';}
.pop_history .list li.top { overflow:hidden;  text-transform:uppercase; height:3.6rem; line-height:3.8rem; background:#88aaee url('/images/common/event/mission/halloween/pbn_grunge02.png') center 0 no-repeat;}
.pop_history .list li.top p {color:#000000; font-family:var(--nsf); letter-spacing:-0.02rem;}
.pop_history .list li.none { height: 45.6rem; font-size: 20px; color:#ccc; line-height: 45.6rem; letter-spacing: 0;  text-transform:uppercase; border:none; background:rgba(0, 0, 0, 0.6);}
.pop_history .pop_layout {width:800px;}
.pop_history .pop_con .desc {padding:4rem 3.7rem 3.7rem;}


.section01 {text-align:center; position:relative; padding:20.4rem 3rem 14.4rem; background:url('/images/common/event/mission/halloween/bg01.jpg') center 0 no-repeat; background-size:cover;}
.section01:before {content:''; display:block; position:absolute; left:0; width:400em; top:0; bottom:0; margin-top:-2.25rem; background:url('/images/common/event/mission/halloween/cloud.png') 0 center repeat-x, url('/images/common/event/mission/halloween/cloud_bg.png') 0 center repeat-x; background-size:auto 100% !important; animation: cloudLoop 100s linear infinite alternate; z-index: 2;}

.title_wrap {display:inline-block;}
.title_wrap .tit_img {position: relative; z-index: 2;}
.title_wrap .sub_tit {margin-top:-2.6rem; background:url('/images/common/event/mission/halloween/bg_sub_tit.jpg') center center no-repeat; background-size:cover; font-family:var(--nsf); font-size:38px; color:#000000; position: relative; z-index: 1; display:flex; justify-content:center; align-items:center; border-radius:32px; padding:1rem 2.4rem 0.5rem; min-height:6.4rem;}
.title_wrap .date {margin-top:2.8rem; text-transform:uppercase; position: relative; z-index: 1; font-size:24px; color:#aaddff; letter-spacing:0.06em;}
.title_wrap .user_info {display:none;}

.mission_wrap {position:relative; background:url('/images/common/event/mission/halloween/bg02.jpg') center center no-repeat; background-size:cover; z-index:2; padding-bottom:8rem; box-shadow: 0 2px 1px rgba(255, 255, 255, 0.1);}
.mission_wrap .top {position:relative; background:url('/images/common/event/mission/halloween/bg_top.jpg') center center no-repeat; background-size:cover; box-shadow:0 2px 1px rgba(255, 255, 255, 0.1);}
.mission_wrap .top:before {content:''; display:block; position:absolute; top:-1.6rem; left:0; right:0; height:6rem; background:url('/images/common/event/mission/halloween/top_shd.png') 0 0 repeat-x; background-size:auto 100%;}
.mission_wrap .top .inner {flex-direction: column; position:relative; display:flex; align-items:center; justify-content:center; height:148px; padding-bottom: 0.2rem;}

.mission_wrap .top .dm_tit {font-size:48px; color:#88aaee; font-family:var(--nsf); text-transform:uppercase;}
.mission_wrap .top .dm_tit br {display:none;}
.mission_wrap .top .dm_tit > span {display:inline-block; position:relative;}
.mission_wrap .top .dm_tit > span:before, .mission_wrap .top .dm_tit > span:after {content:''; display:block; position:absolute; width:3.6rem; height:3.6rem; background:url('/images/common/event/mission/halloween/obj_tit.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .top .dm_tit > span:before {left:-2rem ; top:0.5rem;}
.mission_wrap .top .dm_tit > span:after  {left:36rem ; top:-2rem;}

.mission_wrap .top .m_tit { position:absolute; left:-2.8rem; top:-6.2rem; display:inline-block; width:24rem; height:34.6rem;}
.mission_wrap .top .m_tit > div {position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/halloween/img_balloon02.png') 0 0 no-repeat; background-size:100% auto;  animation:float 3s ease-out infinite;}
.mission_wrap .top .m_tit > div div {width: 62%; height: 51%; padding-top: 6%; display:flex; align-items:center; justify-content:center; flex-direction:column; position:absolute; top:0; right:0;}
.mission_wrap .top .m_tit font {font-family:var(--nsf); font-size:27px; letter-spacing:-0.02em; background: linear-gradient(to bottom, #112288, #000); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .top .m_tit span {margin-top:-5px; font-size:56px; color:#000; letter-spacing:-0.02em; display:block; }
.mission_wrap .top .m_tit:before, .mission_wrap .top .m_tit:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.mission_wrap .top .m_tit:before {background-image:url('/images/common/event/mission/halloween/img_balloon01.png'); animation:float 3s 0.3s ease-out infinite;}
.mission_wrap .top .m_tit:after {background-image:url('/images/common/event/mission/halloween/img_balloon03.png'); animation:float 3s 0.6s ease-out infinite;}

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

.mission_wrap .top .remain {font-size:22px; letter-spacing:0.06em; color:#88aaee; overflow:hidden; display:flex; margin:0 auto; position:relative; width:100%; max-width:480px; height:34px; display:flex; align-items:center; justify-content:center; border:0.2rem solid rgba(136, 170, 238, 0.8); border-radius:17px;}
.mission_wrap .top .remain:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/halloween/pbn_grunge.png') 0 0 no-repeat; background-size:cover;}
.mission_wrap .top .remain .time {color:#ff99bb; margin-left:0.8rem;}
.mission_wrap .top .remain span {vertical-align:middle; text-transform: uppercase;}

.mission_wrap .top .count_wrap {position:absolute; top:50%; right:23rem; transform:translate(0 , -50%);}
.mission_wrap .top .count_wrap .count {font-size:43px; color:#666666; font-family:var(--nsf); letter-spacing:-0.04em;}
.mission_wrap .top .count_wrap .count font {color:#88aaee;}

.mission_wrap .list_wrap {padding-top:4rem;}
.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; padding-top:6.8rem;}
.mission_wrap .list li .con:before {z-index:1; content:''; display:block; position:absolute; top:0; width:14.8rem; height:8rem; left:50%; margin-left:-7.4rem; background:url('/images/common/event/mission/halloween/skull.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .box {padding:0 3rem 4rem; position:relative; background:url('/images/common/event/mission/halloween/bg_ms_botttom.png') 0 bottom no-repeat , url('/images/common/event/mission/halloween/pbn_grunge02.png') center center no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) , #555555; border-radius:2rem; box-shadow:0 2rem 4rem rgba(0, 0, 0, 0.4) , inset 0 0 4px rgba(0, 0, 0, 0.3) , inset 0 2px 2px rgba(255, 255, 255, 0.4);}
.mission_wrap .list .box .m_tit {padding-top:8px; height:7.8rem; display:flex; align-items:center; justify-content:center; font-size:28px; font-family: var(--nsf); text-transform:uppercase;}
.mission_wrap .list .box .m_tit span {margin-right:0.7rem; background: linear-gradient(to bottom, #fff, #88aaee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));}
.mission_wrap .list .box .m_tit font {background: linear-gradient(to bottom, #fff, #666); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));}

.mission_wrap .list .box .desc {position:relative; padding:5rem 4rem; height:calc(100% - 7.8rem); background:url('/images/common/event/mission/halloween/img_web01.png') 0 0 no-repeat, url('/images/common/event/mission/halloween/img_web02.png') right bottom no-repeat, rgba(0, 0, 0, 0.6); border-radius:1.2rem; box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.3) , inset 0 2px 0 rgba(255, 255, 255, 0.05) , inset 0 4px 0 rgba(255, 255, 255, 0.1);}
.mission_wrap .list .box .desc .line {display:flex; align-items:center; justify-content:center; height:100%; flex-direction:column;}
.mission_wrap .list .box .desc img {display:inline;}

.mission_wrap .list .mission {min-height: calc(100% - 56px); display:flex; align-items:center; justify-content:center; }
.mission_wrap .list .mission .txt {font-size:24px; color:#fff; text-transform:uppercase; letter-spacing:0.02em; line-height:1.3; }
.mission_wrap .list .mission .count {font-size:36px; color:#777777; letter-spacing:-0.02em; margin-top:6px;}
.mission_wrap .list .mission .count font {color:#88aaee;}

.mission_wrap .list .btn_modify {position:absolute; background:none; top:1.5rem; right:1rem; z-index:1; font-size:16px; color:#bbccff; letter-spacing:0.05em; border-radius:17px; height:34px; display:flex; align-items:center; justify-content:center; padding:0 1.2rem; text-transform:uppercase;}
.mission_wrap .list .btn_modify:before {transition: all ease-in-out 0.2s; content: ""; position: absolute; inset: 0; border-radius: 17px; padding: 0.2rem; background:linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) , linear-gradient(to right, #aaddff, #bbbbff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission_wrap .list .btn_modify span:before {margin-right:0.6rem; position:relative; top:-2px; vertical-align:middle;display:inline-block; content:''; width:16px; height:16px; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/halloween/icon_modify.png'); background-size:100% auto;}
.mission_wrap .list .btn_modify:hover {color:#eeaabb;}
.mission_wrap .list .btn_modify:hover:before {background:linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) , linear-gradient(to right, #bbbbee, #ee8899);}
.mission_wrap .list .btn_modify:hover span:before {background-position:0 100%;}
.mission_wrap .list .btn_clear {margin:0 auto; height:56px; font-size:22px; }
.mission_wrap .list .btn_clear:before {margin-left:0; left:3.4rem;}
.mission_wrap .list .btn_clear .cash {margin-left:0.5rem; background: linear-gradient(to bottom, #990000, #000);}
.mission_wrap .list .btn_clear:hover .cash {    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #ffff33), #ffff33;}

.mission_wrap .list .reward {margin-top:3rem; padding:3rem 5rem 0; position:relative; background:url('/images/common/event/mission/halloween/bg_reward.jpg') center center no-repeat; background-size:cover; border-radius:2rem; box-shadow:0 2rem 4rem rgba(0, 0, 0, 0.4) , inset 0 0 4px rgba(0, 0, 0, 0.3) , inset 0 2px 2px rgba(255, 255, 255, 0.4);}
.mission_wrap .list .reward:before {content:''; display:block; position:absolute; top:1.2rem; bottom:1.2rem; left:1.2rem; right:1.2rem; background:url('/images/common/event/mission/halloween/frame_lt.png') 0 0 no-repeat , url('/images/common/event/mission/halloween/frame_lb.png') 0 bottom no-repeat, url('/images/common/event/mission/halloween/frame_rt.png') right 0 no-repeat , url('/images/common/event/mission/halloween/frame_rb.png') right bottom no-repeat;}
.mission_wrap .list .reward:after {content:''; display:block; position:absolute; left:2rem; right:2rem; height:3rem; top:-3rem; background:url('/images/common/event/mission/halloween/obj_chain.png') 0 0 no-repeat, url('/images/common/event/mission/halloween/obj_chain.png') right 0 no-repeat;}
.mission_wrap .list .reward .tit {position:absolute; left:0; right:0; top:-1.7rem; text-transform:uppercase; font-family: var(--nsf); font-size:23px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), #888888), #888888; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.mission_wrap .list .reward .img { z-index:1; height:14rem; 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:60px; padding:5px 0 12px; display:flex; align-items:center; justify-content:center; font-size:23px; color:#bbccff; letter-spacing:0.02em; text-shadow: 0 0 4px #000;}
.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:40px; height:40px; background:url('/images/common/event/mission/halloween/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/halloween/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; font-family:var(--nsf); color:#ffee33; font-size:32px; line-height:1.06; text-transform:uppercase; margin-top:1rem;}


.go_view {z-index:1; font-size:0; color:transparent; box-shadow:0 0.6rem 1rem rgba(0, 0, 0, 0.3); position:absolute; width:30px; height:30px; border-radius:50%; background-position:0 0; background-image:url('/images/common/event/mission/halloween/btn_more.png'); background-size:100% auto; background-repeat:no-repeat; bottom:2.2rem; right:2.2rem;}
.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/halloween/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;}

.total_reward {position:relative;}
.total_reward .con {border-radius:2rem; background:#000; position:relative; border:0.4rem solid #666; padding:5.6rem 5.6rem 0; display: flex; align-items: center; justify-content: space-between;}
.total_reward .con:before {border-radius:2rem; content:''; display:block; position:absolute; top:-0.4rem; bottom:-0.4rem; left:-0.4rem; right:-0.4rem;}
.total_reward .con .tit {margin-top:-5.6rem; font-size:23px; color:#999999; letter-spacing:0.02em; line-height:1.3; text-align:left;  font-family:var(--nsf); background: #999 url('/images/common/event/mission/halloween/pbn_grunge03.png') repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.total_reward .reward .name {min-height:7.7rem; padding:5px 0; display:flex; align-items:center; justify-content:center; font-size:24px; color:#bbccff; letter-spacing:0.02em;}
.total_reward .con .go_view {bottom:2.8rem; right:2.8rem; z-index:2;}
.total_reward .reward .img {position:relative; z-index:1; height:14rem; max-width:370px; margin:0 auto; display:flex; align-items:center; justify-content:center;}
.total_reward .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.total_reward .con .btn_receive02 {padding:0 3rem; height:80px; margin-top:-5.6rem; font-size:22px; border-radius:40px; }
.total_reward .con .btn_receive02:after {border-radius:40px;}
.total_reward .con .btn_receive02 span:before {content:''; margin-right:1rem; display:inline-block; width:16px; height:18px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/halloween/icon_receive.png'); background-size:100% auto;}
.total_reward .con .btn_receive02:hover span:before {background-position:0 100%;}

.total_reward .con .btn_receive02.off {background:url('/images/common/event/mission/halloween/btn_receive_off.png') center center no-repeat; background-size:cover; box-shadow:none;     cursor: default;}
.total_reward .con .btn_receive02.off:before {background: url(/images/common/event/mission/halloween/obj_slime_off.png) 0 0 no-repeat; bottom:-3.2rem; display:block !important;}
.total_reward .con .btn_receive02.off:after {display:none;}
.total_reward .con .btn_receive02.off span {background: linear-gradient(to bottom, #bbccff, #bbccff);}
.total_reward .con .btn_receive02.off span:before {background-image:url('/images/common/event/mission/halloween/icon_receive_off.png');}
.total_reward .con .btn_receive02.off:hover span:before {background-position:0 0;}

.total_reward .con .btn_receive02.end {background:url('/images/common/event/mission/halloween/btn_receive_end.jpg') center center no-repeat; background-size:cover; box-shadow:none;    cursor: default;}
.total_reward .con .btn_receive02.end:before {display:none !important;}
.total_reward .con .btn_receive02.end:after {display:none;}
.total_reward .con .btn_receive02.end span {background: linear-gradient(to bottom, #cccccc, #cccccc);}
.total_reward .con .btn_receive02.end span:before {background-image:url('/images/common/event/mission/halloween/icon_check.png'); height:10px;}
.total_reward .con .btn_receive02.end:hover span:before {background-position:0 0;}

.calendar_wrap {background:url('/images/common/event/mission/halloween/bg_calendar.jpg') center center no-repeat; background-size:cover; position:relative; padding:8rem 0;}
.calendar_wrap .calendar {background:url('/images/common/event/mission/halloween/pbn_grunge04.png') 0 0 repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0)), #384356; position:relative; border-radius:2rem; padding:6rem 5rem 1rem; box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.2) , 0 2rem 4rem rgba(0, 0, 0, 0.4);}
.calendar_wrap .calendar:before {border:2rem 2rem 0 0; content:''; display:block; position:absolute; left:0; top:0; right:0; height:1.4rem; background:url('/images/common/event/mission/halloween/line.jpg') 0 0 repeat-x; background-size:auto 100%;}
.calendar_wrap .calendar:after {z-index:2; content:''; display:block; position:absolute; width:26.4rem; height:16rem; background:url('/images/common/event/mission/halloween/img_ghost.png') 0 0 no-repeat; top:0; left:50%; margin-left:-13.2rem; top:-13.7rem; background-size:100% auto;}
.calendar_wrap .calendar .m_tit {font-size:48px; margin-bottom:4.8rem; color:#88aaee; font-family:var(--nsf); text-transform:uppercase;}
.calendar_wrap .calendar .m_tit > span {display:inline-block; position:relative;}
.calendar_wrap .calendar .m_tit > span:before, .calendar_wrap .calendar .m_tit > span:after {content:''; display:block; position:absolute; width:3.6rem; height:3.6rem; background:url('/images/common/event/mission/halloween/obj_tit.png') 0 0 no-repeat; background-size:100% auto;}
.calendar_wrap .calendar .m_tit > span:before {left:-2rem ; top:0.5rem;}
.calendar_wrap .calendar .m_tit > span:after  {left:15.8rem ; top:-2rem;}
.calendar_wrap .rate_info {top:5rem; right:6rem; position:absolute; font-size:0;}
.calendar_wrap .rate_info .rate {margin-right:3rem; font-size:33px; color:#ffee33; font-family:var(--nsf); vertical-align: middle;}
.calendar_wrap .rate_info .rate font {color:#aaaaaa;}
.calendar_wrap .rate_info .btn_all {display:inline-flex; vertical-align:middle;}

.calendar_wrap .calendar .info {position:relative;}
.calendar_wrap .calendar ul {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:5rem;}
.calendar_wrap .calendar ul > li:after { content: ""; display: block; padding-bottom: 100%;}
.calendar_wrap .calendar .con {padding: 4.3%; 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/halloween/bg_cal_bin.jpg'); background-size:cover; border-radius:1.2rem; position:absolute; top:0; left:3rem; bottom:0; right:0;}
.calendar_wrap .calendar .con:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; border-radius:1.2rem; box-shadow:inset 0 0 0 0.4rem #88aaee, 0 0 1rem rgba(34, 41, 52, 0.1);}
.calendar_wrap .calendar .con .day {width:100%; padding-top:1%; border-radius:6px; border:0.2rem solid #88aaee; font-family:var(--nsf); text-align:center; position:relative; height:20%; font-size:20px; color:#88aaee; display:flex; align-items:center; justify-content:center; }
.calendar_wrap .calendar .con .day span {line-height:1; padding-top: 3px;}
.calendar_wrap .calendar .con .day:before {border-radius:6px; content: '';  display: block; position: absolute; top: -0.2rem; bottom: -0.2rem; left: -0.2rem; right: -0.2rem; background: url(/images/common/event/mission/halloween/pbn_grunge03.png) center center repeat;}
.calendar_wrap .calendar .con .complete {width: 63.45%; margin-top: 8%; 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/halloween/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: 35.01%; height: 52.51%; display:flex; align-items:flex-end; justify-content:center;}
.calendar_wrap .calendar .con .count {    height: 86%; font-size:37px; color:#337755; font-family:var(--nsf); letter-spacing:-0.02em;  display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .count font {color:#ffee33; margin-right:0.7rem;}
.calendar_wrap .calendar .btn_day {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, #ffeeaa, #ffbbbb);  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 0.6rem 1rem rgba(0, 0, 0, 0.3); width: 70%; padding:0; border-radius:18px; height: 18%; max-width:140px; max-height:36px; position:absolute; bottom:13%; left:50%; transform:translate(-50% , 0);  font-size:18px; color:#fff; }
.calendar_wrap .calendar .btn_day span {background: linear-gradient(to bottom, #990000, #000);}
.calendar_wrap .calendar .btn_day:before {width:6.7rem; margin-left:-3.3rem; height:2.4rem; bottom:-2.4rem; background: url(/images/common/event/mission/halloween/obj_slime03.png) 0 0 no-repeat;}
.calendar_wrap .calendar .btn_day:hover span {background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) , rgba(255, 255, 255, 0)) , #ffccbb;}

.calendar_wrap .calendar .today .con {background-image:url('/images/common/event/mission/halloween/bg_cal_today.jpg'); }
.calendar_wrap .calendar .today .con:before { inset: 0; border-radius:0 1.2rem 1.2rem 1.2rem; padding: 0.4rem; background: linear-gradient(to bottom, #ffee33, #77ffbb); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; box-shadow:0 0 1rem rgba(34, 41, 52, 0.1);}
.calendar_wrap .calendar .today .t_tit {border-radius:1.2rem 1.2rem 0 0; display:flex; align-items:center; justify-content:center; text-transform:uppercase; position:absolute; left:0; top:-2.7rem; width:8.4rem; padding-top:0.5rem; height:2.7rem; background:#ffee33; font-size:17px; color:#000000; letter-spacing:0.04em;}
.calendar_wrap .calendar .today .con .day {color:#ffee33; border-color:#ffee33;}

.calendar_wrap .calendar .ok .con {background-image:url('/images/common/event/mission/halloween/bg_cal_complete.jpg'); }
 
.calendar_wrap .calendar .fail .con {background-image:url('/images/common/event/mission/halloween/bg_cal_fail.jpg'); }
.calendar_wrap .calendar .fail .con:before {box-shadow:inset 0 0 0 0.4rem #cc8899, 0 0 1rem rgba(34, 41, 52, 0.1);}
.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 { box-shadow:0 0 1rem rgba(34, 41, 52, 0.1);}
.calendar_wrap .calendar .bin .con .day {font-size:29px; color:rgba(187, 200, 221, 0.4); border:none; height:auto;}
.calendar_wrap .calendar .bin .con .day:before {display:none;}




.calendar_wrap .reward_wrap {position:relative; font-size:0; margin-top:5.4rem; 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; border-color:#88aaee; flex-grow: 1; height:28.2rem; position:relative; max-width:none; margin:0; max-width:calc((100% - 4rem) / 2); background:rgba(17, 17, 17, 0.5);}
.calendar_wrap .reward_wrap .con:before {opacity:0.5;}
.calendar_wrap .reward_wrap .con .reward {height:100%;  position:relative; z-index:1;}
.calendar_wrap .reward_wrap .con .go_view {right:1.6rem; bottom:1.6rem;}
.calendar_wrap .reward_wrap .con .tit {text-align:center; margin-top:0; position:absolute; left:0; right:0; top:-2.3rem; text-transform:uppercase; font-family: var(--nsf); font-size:23px; color:#88aaee; background: none; -webkit-text-fill-color: unset;}
.calendar_wrap .reward_wrap .con .btn_receive02 {width:140px; height:90px; border-radius:12px; font-size:20px; margin-top:-45px; position:absolute; right:3.6rem; top:50%; }
.calendar_wrap .reward_wrap .con .btn_receive02 span:before {margin:0 auto 7px; display:block; background-image: url(/images/common/event/mission/halloween/icon_receive03.png); height:13px;}
.calendar_wrap .reward_wrap .con .btn_receive02:after {border-radius:8px;}

.calendar_wrap .reward_wrap .con .btn_receive02.off {background:url('/images/common/event/mission/halloween/btn_receive_off.png') center center no-repeat; background-size:cover; box-shadow:none;     cursor: default;}
.calendar_wrap .reward_wrap .con .btn_receive02.off:before {background: url(/images/common/event/mission/halloween/obj_slime_off.png) 0 0 no-repeat; bottom:-3.2rem; display:block !important;}
.calendar_wrap .reward_wrap .con .btn_receive02.off:after {display:none;}
.calendar_wrap .reward_wrap .con .btn_receive02.off span {background: linear-gradient(to bottom, #bbccff, #bbccff);}
.calendar_wrap .reward_wrap .con .btn_receive02.off span:before {background-image:url('/images/common/event/mission/halloween/icon_receive_off02.png');}
.calendar_wrap .reward_wrap .con .btn_receive02.off:hover span:before {background-position:0 0;}

.calendar_wrap .reward_wrap .con .btn_receive02.end {background:url('/images/common/event/mission/halloween/btn_receive_end.jpg') center center no-repeat; background-size:cover; box-shadow:none;    cursor: default;}
.calendar_wrap .reward_wrap .con .btn_receive02.end:before {display:none !important;}
.calendar_wrap .reward_wrap .con .btn_receive02.end:after {display:none;}
.calendar_wrap .reward_wrap .con .btn_receive02.end span {background: linear-gradient(to bottom, #cccccc, #cccccc);}
.calendar_wrap .reward_wrap .con .btn_receive02.end span:before {background-image:url('/images/common/event/mission/halloween/icon_check.png'); height:10px;}
.calendar_wrap .reward_wrap .con .btn_receive02.end:hover span:before {background-position:0 0;}


.calendar_wrap .reward_wrap .con.final {border-color:#ffee33;}
.calendar_wrap .reward_wrap .con.final .tit {color:#ffee33;}
.calendar_wrap .reward_wrap .con.final .reward .name {color:#ffee33;}
.calendar_wrap .reward_wrap .con.final .btn_receive02 {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, #ffffaa, #ffdd88);}
.calendar_wrap .reward_wrap .con.final .btn_receive02:before {background: url(/images/common/event/mission/halloween/obj_slime04.png) 0 0 no-repeat;}
.calendar_wrap .reward_wrap .con.final .btn_receive02 span {    background: linear-gradient(to bottom, #770000, #000);}
.calendar_wrap .reward_wrap .con.final .btn_receive02 span:before {background-image: url(/images/common/event/mission/halloween/icon_receive02.png); }
.calendar_wrap .reward_wrap .con.final .btn_receive02:hover span {background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1)) , #ffeeaa;}

.calendar_wrap .reward_wrap .con.final .btn_receive02.off {background:rgba(238, 238, 136, 0.3);}
.calendar_wrap .reward_wrap .con.final .btn_receive02.off:before {opacity:0.3;}
.calendar_wrap .reward_wrap .con.final .btn_receive02.off span {background: linear-gradient(to bottom, #eeee88, #eeee88);}
.calendar_wrap .reward_wrap .con.final .btn_receive02.off span:before {background-image:url('/images/common/event/mission/halloween/icon_receive_off_y.png');}

.calendar_wrap .reward_wrap .con.final .btn_receive02.end {background:url('/images/common/event/mission/halloween/btn_receive_end.jpg') center center no-repeat; background-size:cover;}
.calendar_wrap .reward_wrap .con.final .btn_receive02.end span {background: linear-gradient(to bottom, #cccccc, #cccccc);}
.calendar_wrap .reward_wrap .con.final .btn_receive02.end span:before {background-image:url('/images/common/event/mission/halloween/icon_check.png'); height:10px;}

.calendar_wrap .reward_wrap .con.final .go_view {    background-image: url(/images/common/event/mission/halloween/btn_more02.png);}

/* 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; -webkit-animation: rotation 1s linear infinite; 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) {
.cha01 {left:0;}
.cha02 {left:14%;}
.cha03 {right:0; width:640px; top:120px; right:-2%;}	
.list_wrap .btn_prev {left:-7.2rem;}
.list_wrap .btn_next {right:-7.2rem;}
.ghost02 {right:-3%; top:30%;}

}


@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:26rem;}
}
	
@media screen and (max-width: 1800px) {
.cha03 {right:-6%; width:550px; top:156px;}	
.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; margin-bottom:3.6rem;}
.calendar_wrap .calendar .con {left:2rem;}
.calendar_wrap .calendar .m_tit {margin-bottom:2rem; display:inline-block;}
.calendar_wrap .rate_info { position: relative; top: auto;  right: auto; margin-bottom:7.2rem;}
}
	
@media screen and (max-width: 1500px) {
.mission_wrap .list {margin-left:-3rem;}	
.mission_wrap .list li {padding-left:3rem; margin-bottom:3rem;}

.calendar_wrap .reward_wrap  {display:block;}
.calendar_wrap .reward_wrap .con {display:block; max-width:none; margin-bottom:5rem;}
.calendar_wrap .reward_wrap .con.final {margin-bottom:0;}
.calendar_wrap .reward_wrap .con .btn_receive02 {right:1.6rem;}

}	

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

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

.mission_wrap .list_wrap {padding-top:18rem;}
.mission_wrap .top .count_wrap {right: auto; top: auto; left: 50%; transform: translate(-50%, 0);  margin-top: 23rem;}
.mission_wrap .top .btn_day {right: auto; top: auto; left: 50%; transform: translate(-50%, 0);  margin-top: 36rem;}
}
	
@media screen and (max-width: 1280px) {
	
header .user_info {display:none;}	
.title_wrap .user_info {display:inline-flex; margin-top:5rem;}
.title_wrap .sub_tit {width:100%;}
.title_wrap .date {margin-top:1.5rem;}
	
.section01 {padding: 21% 10rem 14.5%;}
.cha01 {width:15%; top:auto; bottom:0;}	
.cha02 {width:20%; top:auto; bottom:0; left:12%;}
.cha03 {width:44%; top:auto; bottom:-22%; right:-7%;}	
.ghost01 {width:10%; right:30%;}	
.ghost02 {width:10%;}	
}	

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

@media screen and (max-width: 1023px) {

	
.total_reward {margin-top:2.4rem;}
.total_reward .con {display:block;}
.total_reward .con .tit {font-size:24px; text-align: center; margin-top: 0; position: absolute; left: 0; right: 0; top: -2.4rem;}
.total_reward .con .tit br {display:none;}
.total_reward .con .btn_receive02 {width: 140px; height: 90px; border-radius: 12px; font-size: 18px;  margin-top: -45px; position: absolute; right: 1.6rem; top: 50%;}
.total_reward .con .btn_receive02 span:before {margin:0 auto 7px; display:block;}
.total_reward .con .btn_receive02:after {border-radius:8px;}
.total_reward .con .go_view {bottom:1.6rem; right:1.6rem; }

.mission_wrap .top .inner {height:172px;}
.mission_wrap .top .dm_tit br {display:block;}
.mission_wrap .top .dm_tit > span:before {left:2.4rem;}
.mission_wrap .top .dm_tit > span:after {left:15.8rem; top:4rem;}
.mission_wrap .top .remain {max-width:300px;}
.mission_wrap .top .m_tit {width:19rem; height:27.4rem; top:-3.2rem;}

}	

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

.pop_history .pop_layout {width: calc(100% - 4.8rem); left: 2.4rem;  right: 2.4rem; transform: translate(0, -50%);}	
}	

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

.mobile {display:block;}

header .bi img {width:30rem;}


.pop_up .pop_layout {width:calc(100% - 4.8rem); left:2.4rem; right:2.4rem; transform: translate(0, -50%);}


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

.btn {font-size:3.4rem;}
.btn_round span {font-size:3.5rem;}
.btn_receive {width:24rem; height:90px; border-radius:3.3rem;}
.btn_receive:after {border-radius:2.9rem;}
.btn_history {font-size:2.7rem; bottom: 2.8rem}	
.btn_history:after {display: none;}
.btn_history:before {width:calc(100% + 2rem); height:calc(100% + 2rem); top: -1rem; left: -1rem; margin-left: 0;}

.calendar_wrap .reward_wrap .con .tit {font-size:3.3rem; top:-3rem;}
.calendar_wrap .reward_wrap .con .btn_receive02 {font-size:2.5rem; width:80px; height:60px; right:1.6rem;}
.calendar_wrap .reward_wrap .con {height:auto; min-height:28.2rem;}

.total_reward .reward .name {font-size:3.3rem;}

.calendar_wrap .calendar .con .day {font-size:2.9rem; padding-top:3%;}
.calendar_wrap .calendar .btn_day {font-size:2.7rem;}
.calendar_wrap .calendar .con .count {font-size:4.6rem;}
.calendar_wrap .calendar .bin .con .day {font-size:3.8rem;}
.calendar_wrap .calendar .today .t_tit {font-size:2.6rem;}

.calendar_wrap .calendar .m_tit {font-size:5.6rem; width: min-content;}
.calendar_wrap .calendar .m_tit > span:before {left:2rem;}
.calendar_wrap .calendar .m_tit > span:after {left:22.8rem;}
.calendar_wrap .rate_info .rate {font-size:4.2rem;}

.total_reward .con .tit {font-size:2.9rem; top:-2.7rem; }
.total_reward .con .btn_receive02 {font-size:2.5rem; width:80px; height:60px; right:1.6rem;}

.mission_wrap .list .reward .tit {font-size:3.3rem; top:-2.4rem;}
.mission_wrap .list .reward .name {font-size:3.3rem;}
.mission_wrap .list .reward:before {background-size:9.6rem auto;}
.mission_wrap .list .box .m_tit {font-size:3.7rem;}
.mission_wrap .list .box .desc {background-size:27.4rem auto, 23rem auto;  padding: 7rem 4rem;}
.mission_wrap .list .mission .txt {font-size:3.3rem;}
.mission_wrap .list .mission .count {font-size:4.5rem;}
.mission_wrap .list .btn_clear {font-size:3.1rem; height:40px;}
.mission_wrap .list .btn_modify {font-size:2.5rem; height:26px;}
.mission_wrap .list .btn_modify span:before {top:0; width:12px; height:12px;}
.mission_wrap .list .box {background-size:33.8rem auto, auto;}
.mission_wrap .list .con .complete span {font-size:4.1rem;}
.mission_wrap .list .con .complete span font {display:block;}
.mission_wrap .list .con .complete img {max-width:10.8rem;}
.mission_wrap .list .con .state img {max-width:17.3rem;}

.mission_wrap .top .m_tit font {font-size:3rem;}
.mission_wrap .top .m_tit span {font-size:6rem;}

.mission_wrap .top .dm_tit {font-size:5.7rem;}
.mission_wrap .top .remain {font-size:3.1rem; height:25px; max-width:220px;}

.mission_wrap .top .count_wrap {margin-top:34rem;}
.mission_wrap .top .count_wrap .count {font-size:5.2rem;}
.mission_wrap .top .btn_day {margin-top:48rem;}
.mission_wrap .top .inner {height:120px;}
.mission_wrap .list_wrap {padding-top:20rem;}

.title_wrap .sub_tit {font-size:4.7rem;}
.title_wrap .date {font-size:3.3rem;}
.user_info .user {font-size:3.2rem;}
.user_info .cash {font-size:2.4rem;}
.title_wrap .user_info {height:48px;}

.pop_up .pop_con h2 {font-size:3.2rem;}
.pop_up .pop_con .day {font-size:4.1rem;}
.pop_clear .pop_con .txt {font-size:2.9rem;}
.pop_up .pop_con .reward .name {font-size:2.9rem;}
.pop_up .btns button {font-size:2.3rem; padding:0;}
.pop_clear .pop_con .cash {font-size:3.1rem;}
.pop_clear .pop_con .cash:after {width:20px; height:20px;}
.pop_mission .btns button { width:100px; height:40px;}
.pop_mission .pop_con .cash {font-size:3.9rem;}
.pop_up .pop_con .txt {font-size:2.9rem;}

.pop_history .list li > p {font-size:2.3rem;}
.pop_history .list li > p.date {font-size:2.3rem;}

}

@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%;}
}



@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 ghost {
  0% {
     transform: translate(0, 200%) skew(0);
    opacity:1;
  }
  20% {
    transform: translate(0, 160%) skew(4deg);
  }
  40% {
    transform: translate(0, 120%) skew(-7deg);
  }
  60% {
    transform: translate(0, 80%) skew(8deg);
  }
  80% {
    transform: translate(0, 40%) skew(-5deg);
  }
  100% {
    transform: translate(0, 0) skew(0);
    opacity: 1;
  }
}

@keyframes ghost02 {
  0% {
     transform: translate(200%, 200%) skew(0);
    opacity:1;
  }
  20% {
    transform: translate(160% , 160%) skew(4deg);
  }
  40% {
    transform: translate(120% , 120%) skew(-7deg);
  }
  60% {
    transform: translate(80% , 80%) skew(8deg);
  }
  80% {
    transform: translate(40% , 40%) skew(-5deg);
  }
  100% {
    transform: translate(0, 0) skew(0);
    opacity: 1;
  }
}
 
@keyframes float {
	0% {opacity:1;}
  50% {
     transform: translate(0, 2rem);
     opacity:1;
  }
  100% {opacity:1;}
}

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

@keyframes sway02 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes cloudLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
} 

@keyframes spider-move-1 {
  0%, 100% {
   transform:translate(0 , 0)
  }
  67% {
     transform:translate(0 , -2rem)
  }
}