@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sriracha&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*/
}

/* 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; text-align: center; font-family: 'Courier Prime', monospace; 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: 'Courier Prime', monospace;}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'Courier Prime', monospace; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}
button {font-family: 'Courier Prime', monospace; cursor:pointer; transition:all ease-in-out 0.2s;}

.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:1826px; margin-left:auto; margin-right:auto; padding-left:2.5rem; padding-right:2.5rem;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

.cha {position:absolute; top:2%;}
.cha01 {animation: fil 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000); left:-3.9%; max-width:1132px; width:44%;}
.cha02 {animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000); right:-20.2%; max-width:1440px; width:56%;}
.line {position:absolute; left:50%; transform:translate(-50% , 0); width:100%; opacity:0; max-width:none;}
.line01 {top:6%; animation: diaDown 0.5s 0.2s forwards;}
.line02 {top:12%; animation: diaUp 0.5s 0.4s forwards;}


.container {overflow:hidden; position:relative; background:#000 url('/images/common/event/mission/v2/bg.jpg') center 0 no-repeat;     background-size: cover;}
.all_wrap {overflow:hidden;}
.all_wrap > .inner {padding-top:15.6rem; position: relative; z-index: 2;}
.all_wrap > .inner:after {z-index:-1; content:''; display:block; position:absolute; left:-100%; right:-100%; bottom:-12rem; height:48rem; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));}


.btn {text-shadow:0 1px 2px rgba(0, 0, 0, 0.2); height:36px; padding:3px 1rem 0 2.4rem;  font-size:17px; letter-spacing:0.04em; border-radius:1.8rem; background:#cf0000; cursor:pointer; position:relative; text-transform:uppercase; color:#fff; display:inline-flex; align-items:center; justify-content:center;}
.btn:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; border-radius:18px; background:url('/images/common/event/mission/v2/effect_light.png') center center repeat; /* opacity:0.5; */  mix-blend-mode: screen;}
.btn:after {content:''; display:inline-block; background-repeat:no-repeat; background-position:0 0; width:20px; height:20px; position:relative; margin-left:1.7rem; top:-1px;}
.btn font {position:relative;}
.btn:hover {background:#665533;}

.btn_line {z-index:1; font-size:24px; padding: 0 2.4rem; color:#dd0000; letter-spacing:0.04em; border-radius:1rem; border:0.2rem solid #dd0000; box-shadow:inset 0 0 0 0.3rem #fff; position:relative; background:#fff; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center;}
.btn_line:before {z-index:-1; transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; top:0.2rem; left:0.2rem; bottom:0.2rem; right:0.2rem; border-radius:0.8rem; box-shadow:inset 0 0 0 1px #dd0000;}
.btn_line:after {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; background:url('/images/common/event/mission/v2/effect_grunge_b.png') center center repeat; opacity:0.2;}
.btn_line span {position:relative; padding-top: 3px;}
.btn_line span:after {content:''; display:inline-block; background-repeat:no-repeat; background-position:0 0; width:20px; height:20px; position:relative; margin-left:4rem; vertical-align:middle;}
.btn_line font {transition:all ease-in-out 0.2s; color:#666666; margin-left:1.2rem;}
.btn_line:hover {color:#ffffaa;}
.btn_line:hover:before {background:#dd0000;}
.btn_line:hover font {color:#fff;}

.btn_day:after {background-image:url('/images/common/event/mission/v2/icon_arr.png');}
.btn_day:hover:after {background-image:url('/images/common/event/mission/v2/icon_arr_b.png');}

.btn_start {min-width:33.6rem; height:8.4rem;  border-width:0.4rem;}
.btn_start span:after {background-image:url('/images/common/event/mission/v2/icon_arr_r.png');}

.btn_clear:after {background:url('/images/common/event/mission/v2/effect_grunge.png') center center repeat; opacity:1;}
.btn_clear span:after {background-image:url('/images/common/event/mission/v2/icon_arr_r.png');}
.btn_clear:hover:after {opacity:0.6;}
.btn_clear .cash {color:#dd0000;}
.btn_clear:hover .cash{color:#ffff00;}

.btn_modify {border-color:#999999; box-shadow:inset 0 0 0 2px #fff; color:#777777;}
.btn_modify:before {top:2px; left:2px; bottom:2px; right:2px; box-shadow:inset 0 0 0 1px #999;}
.btn_modify:after {background:url('/images/common/event/mission/v2/effect_grunge.png') center center repeat; opacity:1;}
.btn_modify span:after {background-image:url('/images/common/event/mission/v2/icon_arr_g.png');}
.btn_modify:hover:after {opacity:0.6;}
.btn_modify:hover:before {background:#888888;}
.btn_modify:hover span {color:#fff;}

.btn_receive {padding:0 2.4rem;}
.btn_receive:after {top:2.4rem; left:50%; margin-left:-18px; position:absolute; width:36px; height:36px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v2/icon_recive.png'); border-radius:50%;}
.btn_receive span {position:relative; padding-top:4.8rem;}
.btn_receive font {display:block;}
.btn_receive:hover:after {background-position:0 -36px;}

.btn_all:after {background-image:url('/images/common/event/mission/v2/icon_arr.png');}
.btn_all:hover:after {background-image:url('/images/common/event/mission/v2/icon_arr_b.png');}

.btn_history {display:none; position:fixed; bottom:5rem; right:5rem; z-index:7;}
.btn_history:before {transition:all ease-in-out 0.2s; content:''; display:block; left:50%; bottom:6.4rem; margin-left:-4.8rem; position:absolute; width:9.6rem; height:3.2rem; background:url('/images/common/event/mission/v2/btn_history_top.png') 0 0 no-repeat; background-size:100% auto;}
.btn_history span {line-height:1; flex-direction:column; text-transform:uppercase; display:flex; font-size:16px; font-weight:700; color:#ffffff; text-shadow:0 1px 4px rgba(51, 17, 0, 0.5); align-items:center; justify-content:center; width:9.2rem; height:7.4rem; background:url('/images/common/event/mission/v2/btn_history.png') 0 0 no-repeat; background-size:100% auto;}
.btn_history span font {color:#ffffaa;}
.btn_history:hover:before {height:4.2rem; bottom:7.4rem; transition:all ease-in-out 0.2s;}

.stamp_tit {transform: rotate(10deg); display:inline-block; position:absolute; box-shadow:inset 0 0 0 0.8rem #dd0000; text-transform:uppercase; font-family:'Oswald'; color:#dd0000; font-weight:700; font-size:44px; padding:0.1rem 3rem 0.4rem; border-radius:1.2rem; z-index: 1;}
.stamp_tit:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/v2/effect_grunge.png') center center no-repeat; background-size:cover;}

header { text-align:left; position:absolute; top:0; left:0; right:0;   z-index: 20; padding:3.6rem 58px 0;}
header .bi {position:relative; z-index:1;}
header .bi img {max-width:160px;}
header .util {flex-wrap: wrap; position:absolute; padding:0 6.2rem; display:flex; align-items:center; justify-content:space-between; top:0; left:50%; transform:translate(-50% , 0); width:100%; max-width:1208px; height:9.8rem; border:1px solid rgba(181, 181, 181, 0.5);}
header .util:before {content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; background:rgba(255, 255, 255, 0.2); border:1px solid rgba(181, 181, 181, 0.5);}
header .util a {position:relative; overflow:hidden; background-color:rgba(0, 0, 0, 0.2); box-shadow:inset 0 0 0 0.2rem #aaaaaa; transition:all ease-in-out 0.2s; text-transform:uppercase; color:#fff; min-width:16.4rem; padding:0 2.4rem 0 2.8rem; font-size:18px; height:4.8rem; border-radius: 1.2rem; color:#bbbbbb; letter-spacing:0.04em;}
header .util a:before {content:''; display:block; position:absolute; top:0.4rem; left:0.4rem; bottom:0.4rem; right:0.4rem; border-radius:0.8rem; box-shadow:inset 0 0 0 0.1rem #aaaaaa;}
header .util a:after {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; background:url('/images/common/event/mission/v2/effect_grunge_b.png') center center repeat;}
header .util a span {display:flex; align-items:center; justify-content: space-between; height:100%; padding-top: 2px;}
header .util a:hover {color:#fff; box-shadow:inset 0 0 0 2px #ddd;}
header .util a:hover:before {box-shadow:inset 0 0 0 1px #ddd;}
header .util .user_info {width: calc(100% - 348px); justify-content:center; margin:0 1rem;}
header .util .user_info > div {width:calc((100% - 4rem) / 2); margin:0 1rem; max-width:348px;}
header .util .btn_login span:after {content:''; display:block; width:6px; height:10px; background:url('/images/common/event/mission/v2/btn_arr.png') center center repeat; position:relative; top:-2px; margin-left:2.4rem;}

header .util .btn_history {display:block; top:auto; right:auto; left:auto; bottom:auto; box-shadow: inset 0 0 0 0.2rem #c6ac87;}
header .util .btn_history:before {margin-left:0; width:auto; height:auto; background:none; box-shadow: inset 0 0 0 0.1rem #c6ac87;}
header .util .btn_history span {color:#bbbbbb; line-height:0.9; font-size:18px; font-weight:400; align-items: flex-end; justify-content:center; height:100%; width:100%; background:none;  text-align:right;}
header .util .btn_history span:before {transform:scaleX(-1); content:''; display:block; width:6px; height:10px; background:url('/images/common/event/mission/v2/btn_arr.png') center center repeat; position:absolute; left:2.4rem; top:50%; margin-top:-5px;}
header .util .btn_history:hover:before {bottom:0.4rem;}
header .util .btn_history:hover span {color:#fff;}
header .util .btn_history:hover span font {color:#fff;}

header .user_info {margin-top:0;}


.date {text-align:center; color:#ffffff; font-size:24px; letter-spacing:-0.02em; text-decoration:underline; padding-top: 3.6rem;}
.date span {color:#ffee00;     text-decoration: underline;}

footer {width: 100%; padding:10rem 0; z-index: 3; position:relative; font-family:'Roboto'; color:#aaa; }
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 12px; position: relative; z-index: 2; letter-spacing:0.01em;}
footer .footer .cs > a {color:#ffee00; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 7px;}
.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:552px; left:50%; top:50%; position: absolute; transform:translate(-50% , -50%); z-index: 99;}
.pop_up .pop_layout:before {z-index:-1; content:''; display:block; position:absolute; bottom:-1.2rem;  left:-2.4rem; width:48rem; height:32rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v2/pop_bg01.png'); background-size:100% auto;}
.pop_up .pop_close {top:2.4rem; right:2.4rem; position:absolute; cursor:pointer; width:6rem; height: 6rem; font-size: 0; text-indent: -99999px; background-color:rgba(255, 255, 255, 0); background-image:url('/images/common/event/mission/v2/pop_close.png'); background-position:0 0; background-repeat:no-repeat;  transition:none; background-size:100% auto;}
.pop_up .pop_close:hover {background-position:0 -6rem;}
.pop_up .pop_con {border-radius:1.6rem; border:0.4rem solid #fff; box-shadow:inset 0 0 0 0.2rem #777777; padding:8.4rem 3rem 5.4rem; background:#fff url('/images/common/event/mission/v2/bg_img.png') center center repeat; position:relative;}
.pop_up h2 {transform: rotate(-14deg); min-width:21.5rem; display:inline-block; left:-1.5rem; top:1rem; position:absolute; box-shadow:inset 0 0 0 0.5rem #777777; text-transform:uppercase; font-family:'Oswald'; color:#777777; font-weight:700; font-size:29px; padding:0.1rem 2rem 0.5rem; border-radius:1.2rem;}
.pop_up .desc .txt {color:#000000; font-size:17px; text-decoration:underline; line-height:1.4; padding:0 5.6rem;}
.pop_up .desc .y_txt {color:#000000; font-size:46px; font-weight:700; text-transform:uppercase; margin-top:6px;}
.pop_up .desc .y_txt span {color:#777777;}
.pop_up .desc .btns {margin-top:4.4rem; font-size: 0;}
.pop_up .desc .btns button {letter-spacing:0.06em; width:168px; max-width:calc((100% - 1.2rem) / 2); height:48px; font-size:14px; justify-content: center; padding-right:52px; vertical-align: middle; word-break: break-word; text-align:left; flex-direction: column;}
.pop_up .desc .btns button:nth-child(2) {margin-left:1.2rem;}
.pop_up .desc .btns button:after {content:''; display:inline-block; background-repeat:no-repeat; background-position:0 0; width:20px; height:20px; position:absolute; right:2rem; top:50%; margin-top:-10px;}
.pop_up .desc .btns .btn_r:after {background-image:url('/images/common/event/mission/v2/icon_arr.png');} 
.pop_up .desc .btns .btn_g {background:#444;}
.pop_up .desc .btns .btn_g:after {background-image:url('/images/common/event/mission/v2/icon_arr_b.png');} 
.pop_up .desc .btns .btn_g:hover {background:#000000;}
.pop_up .desc .btns .btn_g02 {background:#666666;}
.pop_up .desc .btns .btn_g02:after {background-image:url('/images/common/event/mission/v2/icon_arr_b.png');} 
.pop_up .desc .btns .btn_g02:hover {background:#444444;}
.pop_up .desc .btns .btn_r:hover:after {background-image:url('/images/common/event/mission/v2/icon_arr_b.png');}
.pop_up .desc .btns .cash {position:absolute; left:0; right:0; bottom:-24px; text-align:center; font-size:15px; color:#666666; text-decoration: underline;}
.pop_up .desc .btns .btn_r .cash {color:#cc0000;}
.pop_up .desc .btns .btn_g02 .cash {color:#999999;}
.pop_up .desc .btns .btn_reward {width:216px;}

.pop_clear .reward {padding:2.4rem 2.4rem 0; border-radius:1rem; background:#fff; border:2px solid #dd0000; position:relative; margin-top:1.4rem;}
.pop_clear .reward:before {content:''; display:block; position:absolute; top:2px; bottom:2px; left:2px; right:2px; border:1px solid #dd0000; border-radius:0.8rem;}
.pop_clear .reward:after {transform:scaleX(-1); content:''; display:block; position:absolute; width:12.8rem; height:6.6rem; background:url('/images/common/event/mission/v2/img_tape.png') 0 0 no-repeat; background-size:100% auto; top:-3.4rem; left:50%; margin-left:-6.4rem;}
.pop_clear .reward .img {height:96px; display:flex; align-items:center; justify-content:center;}
.pop_clear .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.pop_clear .reward .name {display:block; min-height:0; font-size:15px; color:#000000; letter-spacing:0.06em; margin:0; padding:1.4rem 0 1.8rem; text-align:center;}
.pop_clear .reward .name:before {display:none;}
.pop_clear .desc .y_txt {z-index: 1; position: relative;}

.pop_day .pop_con {box-shadow: inset 0 0 0 0.2rem #dd0000;}
.pop_day .pop_layout:before {background-image:url('/images/common/event/mission/v2/pop_bg02.png');}
.pop_day .pop_close { background-image:url('/images/common/event/mission/v2/pop_close02.png');}
.pop_day h2 {box-shadow:inset 0 0 0 0.5rem #dd0000; color:#dd0000; }
.pop_day .desc .y_txt span {color:#dd0000;}

.pop_all .pop_con {box-shadow: inset 0 0 0 0.2rem #000000; border-color:#ffee00; background-color:#000;}
.pop_all .pop_layout:before {background-image:url('/images/common/event/mission/v2/pop_bg03.png');}
.pop_all .pop_close { background-image:url('/images/common/event/mission/v2/pop_close03.png');}
.pop_all h2 {box-shadow:inset 0 0 0 0.5rem #ffee00; color:#ffee00; }
.pop_all .desc .txt {color:#ffee00;}
.pop_all .desc .y_txt {color:#fff;}
.pop_all .desc .y_txt span {color:#ffee00;}
.pop_all .img_list .slick-arrow {transition:none; font-size:0; color:transparent; position:absolute; top:50%; margin-top:-3rem; display:block; width:36px; height:36px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v2/arr_item.png'); background-color:rgba(255, 255, 255, 0); background-size:100% auto;}
.pop_all .img_list .slick-prev {left:-40px;}
.pop_all .img_list .slick-next {right:-40px; transform:scaleX(-1);}
.pop_all .img_list .slick-arrow:hover {background-position:0 -36px;}
.pop_all .img_list .slick-arrow.slick-disabled {opacity:0.6; cursor:default;}
.pop_all #pageinfo {font-size:13px; color:#cccccc; position:absolute; display:flex; height:24px; align-items:center; justify-content:center; background:#111111; border-radius:0 0.8rem 0 0.8rem; top:0; right:0; min-width:6rem; padding:0 2.4rem;}
.pop_all #pageinfo span {color:#ffee00;}
.pop_all .reward {border-color:#fff; background:#fff url('/images/common/event/mission/v2/bg_img.png') center center repeat;}
.pop_all .reward:before {top:0; bottom:0; left:0; right:0; border-color:#000;}

.pop_detail .pop_layout {width:768px;}
.pop_detail .pop_layout:before {background:#fff; width:99%; height:96%; box-shadow:inset 0 0 2rem rgba(0, 0, 0, 0.5); transform: rotate(4deg); left: 2rem; top: 1rem; transform-origin: top; border-radius: 7px;}
.pop_detail .pop_close { background-image:url('/images/common/event/mission/v2/pop_close04.png');}
.pop_detail .pop_con {padding:10rem 3rem; border-radius:0; border:1.2rem solid #fff; box-shadow:none; background: #000 url(/images/common/event/mission/v2/ptn_dot.png) 0 bottom no-repeat;}
.pop_detail .pop_con .img {display:flex; align-items:center; justify-content:center;   height: 20rem;}
.pop_detail .pop_con .img img {max-height:100%;}
.pop_detail .pop_close {top:3.6rem; right:3.6rem;}
.pop_detail .name {position:absolute; left:5rem; right:5rem; bottom:4rem; text-align:left; font-size:16px; color:#fff; letter-spacing:0.06em; text-shadow:0 0 0.2rem #000;}
.pop_detail .name:before {content:''; display:block; position:absolute; top:-0.2rem; bottom:0; left:-1.5rem; width:0.4rem; background:#fff;}

.pop_history {font-family: 'Courier Prime', monospace;} 
.pop_history .pop_layout {width:796px;}
.pop_history .pop_layout:before {    background-image: url(/images/common/event/mission/v2/pop_bg02.png);}
.pop_history .pop_close { background-image:url('/images/common/event/mission/v2/pop_close02.png');}
.pop_history h2 {color:#000000; position:relative; top:auto; left:auto; min-width:0; transform:none; display:block; padding:0; box-shadow:none; margin-bottom:3rem; font-family: 'Courier Prime', monospace;}
.pop_history h2 font {color:#dd0000;}
.pop_history .pop_con {padding:3rem 1.4rem 3rem 3rem; box-shadow: inset 0 0 0 0.2rem #dd0000;}
.pop_history .list { letter-spacing:0; height: 45.6rem; 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;}
.pop_history .list::-webkit-scrollbar-thumb { border-radius:0.5rem; background:#dd0000; }
.pop_history .list li {border-bottom:1px solid #000000; font-size: 0;}
.pop_history .list li > div {align-items: center; justify-content: center; flex-direction: column; height:6rem; padding:0 1rem; display: inline-flex; vertical-align:middle; text-align:center; font-size:14px; color:#000;}
.pop_history .list li > div.date { width: 24%; color:#dd0000; text-transform: uppercase;}
.pop_history .list li > div.date span {display:block;  margin-top:2px; color:#000;}
.pop_history .list li > div.item {width: 30%;}
.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%;}
.pop_history .list li > div.mission {width:46%; 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.2; text-align:left; -webkit-box-orient: vertical; word-break: break-word;}
.pop_history .list li.top {text-transform:uppercase; height:auto; border-bottom:0; background: #000 url(/images/common/event/mission/v2/ptn_dot.png) 0 bottom no-repeat; border-radius:1.2rem;}
.pop_history .list li.top div {height:3.6rem; font-size:14px; color:#fff; letter-spacing:0.06rem;}
.pop_history .list li.top > div.date span {margin-top:0; color:#fff;}
.pop_history .list li.none { height: 41.5rem; display:flex; align-items:center; justify-content:center; font-size: 16px; color:#000; text-transform:uppercase; border-bottom:none;}


.user_info {margin-top:2.4rem; display:flex; align-items: stretch; justify-content: space-between;}
.user_info > div {font-weight:700; padding: 0.3rem 2.4rem 0; font-size:21px; color:#000; width:calc((100% - 2.4rem) / 2); background:url('/images/common/event/mission/v2/bg_img.png') center center repeat; background-color:#ffee00; min-height:4.8rem; display:flex; align-items:center; justify-content:center; word-break: break-all;}
.user_info span {position:relative; padding-left:40px; display:inline-block; max-width:100%; overflow:hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-break: break-all; word-wrap: normal; line-height: 28px;}
.user_info span:before {content:''; display:block; position:absolute; left:0; top:50%; background-repeat:no-repeat; background-position:0 0; width:24px; height:24px; margin-top:-14px;}
.user_info .cash {text-transform:uppercase; }
.user_info .cash span {margin-right:1.6rem; color:#aa0000; max-width:calc(100% - 72px);}
.user_info .cash span:before {background-image:url('/images/common/event/mission/v2/img_pbcash.png');}
.user_info .user span:before {background-image:url('/images/common/event/mission/v2/img_user.png');}

.title_wrap {z-index: 1; text-align:center; margin:0 auto 12rem; padding:0 2.4rem; position:relative; max-width:768px;}
.title_wrap .sub_tit {margin-top:2.4rem; position:relative; font-size:34px; color:#000000; font-weight:700; text-transform:uppercase; background:url('/images/common/event/mission/v2/ptn_paper.png') 0 0 repeat; background-color:#fff;}
.title_wrap .sub_tit:before {content:''; display:block; position:absolute; left:50%; margin-left:-4rem; top:-3rem; width:12.8rem; height:6.6rem; background:url('/images/common/event/mission/v2/img_tape.png') 0 0 no-repeat; background-size:100% auto;}
.title_wrap .sub_tit span {display:flex; align-items:center; justify-content:center; min-height:60px; padding-top: 2px;}
.title_wrap .sub_tit span:before, .title_wrap .sub_tit span:after {content:''; display:block; position:absolute; top:0; bottom:0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/v2/effect_grunge_b.png');}
.title_wrap .sub_tit span:before {left:0; width:30rem; background-position:center center;}
.title_wrap .sub_tit span:after {right:0; width:14rem; background-position:0 center;}
.title_wrap .user_info {display:none;}

.mission_wrap {margin-bottom:12rem; padding:7.2rem; position:relative; background:url('/images/common/event/mission/v2/bg_pattern.png') 0 0 repeat;}
.mission_wrap:before, .mission_wrap:after {content:''; display:block; position:absolute; left:0; right:0; }
.mission_wrap:before {top:-22.2rem; height:22.2rem; background:url('/images/common/event/mission/v2/bg_paper_t.png') 0 0 no-repeat; background-size:auto 100%;}
.mission_wrap:after {bottom:-24rem; height:24rem; background:url('/images/common/event/mission/v2/bg_paper_b.png') center 0 no-repeat; background-size:auto 100%;}
.m_tit {z-index: 1; padding-bottom: 1.5%; flex-direction: column; position:relative; color:#000000; font-size:26px; width:26.4rem; height:25.2rem; font-family:'Sriracha'; display:flex; align-items:center; justify-content:center; transform: rotate(-8deg);}
.m_tit:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/v2/bg_tape.png') 0 0 no-repeat; background-size:100% auto;  transform: rotate(8deg);   z-index: -1;}
.m_tit span {font-size:75px; color:#bb0000; letter-spacing:-0.04em; line-height:1; margin-top:-1.5rem;}
.mission_wrap .wrap:before , .mission_wrap .wrap:after {content:''; display:block; position:absolute; top:-22.2rem; bottom:-24rem; background-repeat:no-repeat; background-size:100% auto;}
.mission_wrap .wrap:before {left:-24rem; width:24rem; background-image:url('/images/common/event/mission/v2/bg_paper_l.png'); background-position: 0 0;}
.mission_wrap .wrap:after {right:-15.6rem; width:15.6rem; background-image:url('/images/common/event/mission/v2/bg_paper_r.png'); background-position: right 0;}

.mission_wrap .current {margin-bottom:4.8rem; position:relative; border:0.4rem solid #666666; padding-left:11.6rem;}
.mission_wrap .current .stamp_tit {top:-0.6rem; right:-1.6rem; mix-blend-mode: darken;}
.mission_wrap .current .m_tit {min-width:180px; height:100%; font-size:26px; border-radius:0 30px 30px 0;}
.mission_wrap .current .m_tit:before {width:30px; height:58px; top:1px; left:-15px;}
.mission_wrap .current .day {padding-top: 1%; flex-direction: column; font-size:24px; color:#665533; letter-spacing:0.02em; position:absolute; top:0; bottom:0; left:0; width:11.6rem; border-right:0.4rem solid #666666; display:flex; align-items:center; justify-content:center; text-transform:uppercase;}
.mission_wrap .current .day span {color:#000; font-weight:700; letter-spacing:0; font-size:63px; margin-top:-1rem;}
.count_wrap {border-bottom:2px solid #666666; display:flex; align-items:center; justify-content:center; padding:1.5rem 0 1.2rem;}
.count_wrap .q_txt {display:inline-block; font-size:34px; font-weight:700; color:#000000; text-transform:uppercase; margin-right:2rem;}
.count_wrap .count { font-weight:700; color:#000000; letter-spacing:0.05em; margin-left:2rem;}
.count_wrap .count font {color:#dd0000;}
.count_wrap .btn_day, .count_wrap .btn_all {top: -3px;}
.remain {font-size:0; position:relative; padding:1rem 0 0.7rem;}
.remain > span {display:inline-block; vertical-align:middle; text-transform:uppercase; font-size:24px; letter-spacing:0.03em; text-shadow:-1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;}
.remain .tit {color:#665533; margin-right:2rem;}
.remain .time {color:#000;}
.remain .progress {position:absolute; top:0; bottom:0; left:0; right:0;}
.remain .progress .bar {height:100%; opacity:0; background:rgba(68, 51, 34, 0.2); display:block;}
.animated .remain .progress .bar {animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s 0.2s forwards;}

.mission_wrap .list_wrap {position:relative;}
.mission_wrap .list_wrap .list li {margin-bottom:2.4rem;}
.mission_wrap .list_wrap .list li:last-child {margin-bottom:0;}
.mission_wrap .list .con {display:flex; align-items: stretch; justify-content: space-between;  border-radius:2rem; background:rgba(156, 102, 34, 0.5); position:relative; padding:2.4rem;}
.mission_wrap .list .con .m_tit {position:absolute; top:-1.2rem; left:-1.2rem; text-transform: capitalize;}
.mission_wrap .list .box {position:relative; width:calc(100% - 394px); border-radius:1.2rem; min-height:18rem; display:flex; align-items:center; justify-content:center; flex-direction: column; background:url('/images/common/event/mission/v2/bg_add_lb.png') 0 bottom no-repeat, url('/images/common/event/mission/v2/bg_add_rb.png') right bottom no-repeat, url('/images/common/event/mission/v2/ptn_paper.png') 0 0 repeat, url('/images/common/event/mission/v2/bg_img.png') 0 0 repeat;}
.mission_wrap .list .box:before {content:''; display:block; position:absolute; top:50%; right:0; transform:translate(50% , -50%); width:5.6rem; height:11.6rem; background:url('/images/common/event/mission/v2/img_tape02.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .box > .btn {width:300px; height:150px; display:flex; align-items:center; justify-content:center; flex-direction: column;}
.mission_wrap .list .box > .btn font {font-size:24px;}
.mission_wrap .list .box > .btn font:first-child:before {content:''; display:block; position:absolute; left:50%; top:-7rem; width:6rem; height:6rem; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/v2/btn_deco.png'); margin-left:-3rem; background-size:100% auto;}
.mission_wrap .list .box > .btn font:first-child:after {content:''; display:block; position:absolute; left:50%; top:-7rem; width:6rem; height:6rem; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/v2/btn_deco_b.png'); margin-left:-3rem; background-size:100% auto;}
.mission_wrap .list .box > .btn_receive font:first-child:after {background-image:url('/images/common/event/mission/v2/btn_deco_p.png');}
.mission_wrap .list .reward {margin:-2.4rem 0; padding:0 5.6rem; width:366px; display: flex; align-items: center; justify-content: center; flex-direction: column; background:url('/images/common/event/mission/v2/bg_reward.png') 0 0 no-repeat; margin-left:28px;}
.mission_wrap .list .reward:before {content:''; display:block; position:absolute; top:50%; right:0; transform:translate(15% , -50%); width:11.8rem; height:8.6rem; background:url('/images/common/event/mission/v2/img_tape03.png') 0 0 no-repeat; background-size:100% auto;}
.reward .go_view {transition:none; position:absolute; right:-1rem; top:50%; margin-top:-12px; font-size:0; width:24px; height:24px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v2/icon_view.png');}
.reward .go_view:hover {background-position:0 -24px;}
.reward .img {position: relative; height:96px; display:flex; align-items:center; justify-content:center;}
.reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.reward {position:relative;}
.reward .tit {position:absolute; top:-1rem; left:0; font-size:16px; color:#000000; font-family: 'Sriracha'; text-transform:capitalize; width:13.8rem; height:4.8rem; background:url('/images/common/event/mission/v2/bg_reward_tit.png') 0 0 no-repeat; display:flex; align-items:center; justify-content:center; background-size:100% auto; padding-bottom: 2px;} 
.reward .name {letter-spacing:0.06em; position:relative; word-break: break-word; font-size:15px; color:#ffffff; text-align:left; margin-top:1.6rem; line-height:1; padding-right:30px; width:100%; min-height: 24px; display:flex; align-items:center;}
.reward .name:before {content:''; display:block; top:50%; bottom:0; left:-1.4rem; width:0.4rem; background:#fff; position:absolute; min-height: 24px; transform: translate(0, -50%);}

.mission_wrap .list .mission {padding: 2.4rem 0; max-width: calc(100% - 500px);}
.mission_wrap .list .mission .txt {font-size:27px; font-weight:700; line-height:normal; color:#000000; word-break: break-word;}
.mission_wrap .list .mission .count {font-size:0; color:#999999; font-size:34px; margin-top:1rem;}
.mission_wrap .list .mission .count * {margin:0 -0.8rem; padding-top:1.5%; width:48px; height:48px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; border-radius:50%; background:rgba(221, 221, 221, 0.3); border:1px solid #bbbbbb; }
.mission_wrap .list .mission .count font {color:#dd0000; border-color:#dd0000; background:#fff;}
.mission_wrap .list .box .state {position:relative; z-index: 1;}
.mission_wrap .list .box .btn_wrap {height:100%; position:absolute; display:flex; flex-direction:column; min-width:192px; right:2.4rem; top:50%; transform:translate(0 , -50%); justify-content: center;}
.mission_wrap .list .box .btn_wrap .btn_line {font-size:17px;}
.mission_wrap .list .box .btn_wrap .btn_clear {height:7.2rem;}
.mission_wrap .list .box .btn_wrap .btn_clear span {text-align:left;}
.mission_wrap .list .box .btn_wrap .btn_clear span font {display:block; margin-left:0;}
.mission_wrap .list .box .btn_wrap .btn_modify {margin-top:1.2rem; height:48px;}
.mission_wrap .list .box .btn_wrap .btn_line {text-align:left; padding:0 44px 0 2rem; justify-content: flex-start;}
.mission_wrap .list .box .btn_wrap .btn_line span {position:static;}
.mission_wrap .list .box .btn_wrap .btn_line span:after {position:absolute; right:1.2rem; top:50%; margin-top:-10px;}
.mission_wrap .list .box .btn_wrap .btn_receive {height:calc(100% - 4.8rem);}

.mission_wrap .list .before .box:after {top:-3.6rem; left:3.6rem; content:''; display:block; position:absolute; width:95rem; height:14.4rem; background:url('/images/common/event/mission/v2/bg_paper.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .ok .mission .txt {color:#aaaaaa; text-decoration: line-through; text-decoration-thickness: 1px;}
.mission_wrap .list .ok .mission .count font {color:#999; border-color:#999999;}
.mission_wrap .list .complete .mission .txt {color:#aaaaaa; text-decoration: line-through; text-decoration-thickness: 1px;}
.mission_wrap .list .complete .mission .count font {color:#999; border-color:#999999;}
.mission_wrap .list .complete .info {padding-bottom: 1%; padding-right:1%; font-style: oblique; display:flex; align-items:center; justify-content:center; line-height: 0.84; text-transform: capitalize; font-size:24px; color:rgba(102, 102, 102, 0.8); font-family: 'Sriracha'; position:absolute; right:2.4rem; top:50%; margin-top:-9.6rem; width:19.2rem; height:19.2rem; border-radius:50%;  background:url('/images/common/event/mission/v2/img_complete.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .complete .info span {transform: rotate(-18deg);}
.mission_wrap .list .lock .box:after {top:-3.6rem; left:3.6rem; content:''; display:block; position:absolute; width:95rem; height:14.4rem; background:url('/images/common/event/mission/v2/bg_paper.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .lock .reward {display: flex; align-items: center; justify-content: center; padding: 0;}
.mission_wrap .list .lock .reward .txt { font-size:22px; font-family: 'Sriracha'; position:relative;}
.mission_wrap .list .lock .reward .txt:before {content:''; display:block; left:0; bottom:5px; right:0; height:1px; background:#aaaaaa; position:absolute;}
.mission_wrap .list .reward.lock_item {background:none; position: relative; z-index: 1;}
.mission_wrap .list .reward.lock_item:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background: url(/images/common/event/mission/v2/bg_ques_item.png) 0 0 no-repeat; z-index:-1;}
.mission_wrap .list .reward.lock_item .txt {color:#aaaaaa; transform:rotate(12deg);}


.mission_wrap .list .reward.lock_item {display: flex; align-items: center; justify-content: center; padding: 0;}
.mission_wrap .list .reward.lock_item .txt { font-size:22px; font-family: 'Sriracha'; position:relative;}
.mission_wrap .list .reward.lock_item .txt:before {content:''; display:block; left:0; bottom:5px; right:0; height:1px; background:#aaaaaa; position:absolute;}



.mission_wrap .list .reward.no_item {padding:0; padding-bottom:1.5%; padding-right:3%; background:none; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;}
.mission_wrap .list .reward.no_item:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background: url(/images/common/event/mission/v2/bg_no_item.png) 0 0 no-repeat;  z-index:-1;}
.mission_wrap .list .reward.no_item:before {display:none;}
.mission_wrap .list .reward.no_item .txt {transform:rotate(-18deg); color:#663300;}
.mission_wrap .list .reward.no_item .txt:before {content:''; display:block; left:0; bottom:5px; right:0; height:1px; background:#663300; position:absolute;}
.mission_wrap .list .reward.no_item .txt { font-size:22px; font-family: 'Sriracha'; position:relative;}

.total_reward {display: flex; align-items: center; justify-content: space-between; padding:3rem 6rem; margin-top:4.8rem; background:rgba(206, 204, 201, 0.5); box-shadow:inset 0 0 4rem rgba(206, 204, 201, 0.4) , 0 0 2rem rgba(206, 204, 201, 0.2); position:relative; text-align:center;}
.total_reward .tit {font-size:20px; color:#000000; letter-spacing:0.06em; text-transform:uppercase; line-height:1.3; text-decoration:underline; text-align: left;}
.total_reward .reward {padding: 0 4.8rem;}
.total_reward .reward .name {color:#000000;}
.total_reward .reward .name:before {background:#000;}
.total_reward .reward .go_view {background-image: url(/images/common/event/mission/v2/icon_view_b.png);}
.total_reward .btn_receive {justify-content: flex-start; min-width:264px;  padding:0 2.4rem 0 60px; height:60px; border-radius:30px; font-size:19px;}
.total_reward .btn_receive:before {border-radius:30px;}
.total_reward .btn_receive:after {left:1.2rem; margin-left:0; top:50%; margin-top:-18px;}
.total_reward .btn_receive span {padding-top:0;}
.total_reward .btn_receive.off {background:rgba(102, 85, 51, 0.15); color:#665533; cursor:default; text-shadow:none}
.total_reward .btn_receive.off:before {display:none;}
.total_reward .btn_receive.off:after {background-position:0 -36px;}
.total_reward .btn_receive.end {background:rgba(102, 85, 51, 0.15); color:#665533; cursor:default; text-shadow:none}
.total_reward .btn_receive.end:before {display:none;}
.total_reward .btn_receive.end:after {background-position:0 0; background-image:url('/images/common/event/mission/v2/icon_recive_end.png');}
.total_reward:before, .total_reward:after {content:''; display:block; position:absolute; width:12.8rem; height:6.6rem; background:url('/images/common/event/mission/v2/img_tape.png') 0 0 no-repeat; background-size:100% auto;}
.total_reward:before {transform:scaleX(-1); top:-1.2rem; left:-2.4rem;}
.total_reward:after {bottom:-1.2rem; left:22.8rem;}


.calendar_wrap {z-index: 1; position:relative; background:url(/images/common/event/mission/v2/police_line.jpg) 0 0 repeat-x; background-color:#222; padding:13.2rem 2.5rem 14.4rem;}
.calendar_wrap:before, .calendar_wrap:after {content:''; display:block; position:absolute;}
.calendar_wrap:before {background:url(/images/common/event/mission/v2/bg_pattern02.png) 0 0 repeat; top:12px; bottom:0; left:0; right:0; opacity:0.5;}
.calendar_wrap:after {top:12px; height:8.4rem; left:0; right:0; background:url('/images/common/event/mission/v2/paper_l.png') 0 0 no-repeat , url('/images/common/event/mission/v2/paper_r.png') right 0 no-repeat; background-size:auto 8.4rem;}
.calendar_wrap .inner {padding-left:0; padding-right:0; max-width:1776px; border:0.4rem solid #666666; position:relative;}
.calendar_wrap .stamp_tit {top:-0.2rem; right:5.6rem; mix-blend-mode: lighten;}
.calendar_wrap .stamp_tit:before {background: url(/images/common/event/mission/v2/effect_grunge_b.png) center center no-repeat;}
.calendar_wrap .count_wrap {border-bottom:0.4rem solid #666666;}
.calendar_wrap .remain {border-bottom:0.4rem solid #666666;}
.calendar_wrap .count_wrap .q_txt {color:#aaaaaa;}
.calendar_wrap .count_wrap .count {color:#aaaaaa;}
.calendar_wrap .count_wrap .count font {color:#ffff00;}
.calendar_wrap .remain > span {text-shadow:none; color:#aaaaaa;}
.calendar_wrap .remain .progress .bar {background:rgba(255, 255, 255, 0.1);}

.calendar {padding:7.2rem 6.8rem 12rem; font-size:0; display: flex; align-items: stretch;}
.calendar > ul {font-size:0; text-align:left;} 
.calendar > ul li {width:calc(100% / 7); display:inline-block; vertical-align:top; position:relative; padding-right:1.2rem; margin-bottom:1.2rem;}
.calendar > ul li .con {text-align:center; position:relative;  padding:11% 14% 7.8rem; box-shadow:inset 0 0 0.2rem rgba(0, 0, 0, 0.3) , 0 0 1rem rgba(0, 0, 0, 0.2); width:100%; height:100%; background:rgba(255, 255, 255, 0.1); min-height:20rem;}
.calendar > ul li .con:before {content:''; display:block; position:absolute; left:0; right:0; top:0; bottom:0; background:url('/images/common/event/mission/v2/grid_l.png') 0 center no-repeat , url('/images/common/event/mission/v2/grid_r.png') right center no-repeat;}
.calendar > ul li .con .day {font-size:17px; color:#888888; margin-bottom:16%; letter-spacing:0.06em; text-align:left; position:relative; text-transform:uppercase;}
.calendar > ul li .con .day:before {content:''; display:block; position:absolute; left:42px; right:30px; top:40%; height:1px; background:#aaaaaa;}
.calendar > ul li .con .day span {position:absolute; right:0;}
.calendar > ul li .con .complete {position:absolute; left:50%; bottom:2.4rem; transform:translate(-50% , 0); font-style: oblique; text-transform: capitalize; font-family: 'Sriracha'; display:flex; align-items:center; justify-content:center; max-width:120px; margin:0 auto; width:80%; background:url('/images/common/event/mission/v2/icon_complete.png') 0 0 no-repeat; background-size:100% auto;}
.calendar > ul li .con .complete:after {content: ""; display: block; padding-bottom: 100%;}
.calendar > ul li .con .complete span {color:#ffdd00; font-size:20px; letter-spacing:0.04em; transform: rotate(-18deg); padding-bottom: 9%;}
.calendar > ul li .con .count {font-size:34px; color:#aaa; font-family: 'Sriracha'; letter-spacing:0.04em; width:100%; border-radius:0.8rem; height:6.6rem; display:flex; align-items:center; justify-content:center; background: rgba(255, 255, 255, 0.1);}
.calendar > ul li .con .count font {color:#fff;}
.calendar > ul li .con .t_tit {font-size:0; display:none;}
.calendar .btn_line {width:80%; position:absolute; bottom:2.4rem; left:50%; transform:translate(-50% , 0); max-width:130px; padding:0; font-size:14px; border:0.2rem solid #aaaaaa; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); background:rgba(0, 0, 0, 0.2); border-radius:1.2rem; height:36px; color:#bbbbbb;}
.calendar .btn_line:before {box-shadow: inset 0 0 0 0.1rem #aaa; border-radius:0.8rem; top:0.2rem; left:0.2rem; right:0.2rem; bottom:0.2rem;}
.calendar .btn_line:after {    background: url(/images/common/event/mission/v2/effect_grunge_b.png) center center repeat;}
.calendar .btn_line span:after {display:inline-block; margin-left:0.5rem; width:6px; height:10px; background-image:url('/images/common/event/mission/v2/icon_arr10.png'); top:-1px;}
.calendar .btn_line:hover {color:#000;}
.calendar .btn_line:hover:before {background:#aaaaaa;}
.calendar .btn_line:hover span:after {background-position:0 -10px;} 
.calendar .paging {position:absolute; bottom:7.2rem; text-align:center; left:6.8rem; width: calc(100% - 372px - 13.6rem); padding-left:36px; padding-right:48px;}
.calendar .paging .btn_cal {position:absolute; bottom:0; width:24px; height:24px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v2/btn_cal_arr.png'); background-color:rgba(255, 255, 255, 0); color:transparent; font-size:0; cursor:pointer;}
.calendar .paging .btn_prev {left:0;}
.calendar .paging .btn_next {right:1.2rem; transform:scaleX(-1);}
.calendar .paging .btn_cal:hover {background-position:0 100%;}
.calendar .paging ul {font-size:0;}
.calendar .paging ul li {display:inline-flex; vertical-align:middle; }

.calendar > ul .bin .con .day {position:static;}
.calendar > ul .bin .con .day:before {display:none;}
.calendar > ul .bin .con .day span {top:50%; left:50%; transform:translate(-50% , -50%); font-size:52px; color:#777777; font-family: 'Sriracha'; right: auto;}
.calendar > ul .bin .con .day span:before {content:''; display:block; position:absolute; top:0; left:50%; transform:translate(-50% , -20%); width:9.2rem; height:7.4rem; background:url('/images/common/event/mission/v2/effect_grunge_s.png') 0 0 no-repeat; background-size:100% auto; opacity:0.4;}

.calendar > ul .today .con {background:rgba(136, 238, 255, 0.1); box-shadow:inset 0 0 0 1px rgba(136, 238, 255, 0.5);}
.calendar > ul .today .con:before {background:url('/images/common/event/mission/v2/grid_l_b.png') 0 center no-repeat , url('/images/common/event/mission/v2/grid_r_b.png') right center no-repeat;}
.calendar > ul .today .con .day {color:#88eeff;}
.calendar > ul .today .con .day:before {background:#88eeff; left:64px;}
.calendar > ul .today .con .count {background:rgba(136, 238, 255, 0.1); color:#88eeff;}
.calendar .today .btn_line {border-color:#88eeff; color:#88eeff;}
.calendar .today .btn_line:before {box-shadow: inset 0 0 0 1px #88eeff;}
.calendar .today .btn_line span:after {background-image:url('/images/common/event/mission/v2/icon_arr10_b.png');}
.calendar .today .btn_line:hover {color:#000;}
.calendar .today .btn_line:hover:before {background:#88eeff;}

.calendar > ul .ok .con {background:rgba(255, 221, 0, 0.2);}
.calendar > ul .ok .con .day {color:#ddcc00;}
.calendar > ul .ok .con .day:before {background:#ddcc00;}
.calendar > ul .ok.today .con {box-shadow:inset 0 0 0 1px rgba(221, 204, 0, 0.8); background:rgba(0, 0, 0, 0.1);}
.calendar > ul .ok.today .con:before {background:url('/images/common/event/mission/v2/grid_l_y.png') 0 center no-repeat , url('/images/common/event/mission/v2/grid_r_y.png') right center no-repeat;}

.calendar > ul {width:calc(100% - 372px); margin-bottom: -1.2rem;}
.calendar .reward_wrap {width:372px;}
.calendar .reward_wrap .reward {display: flex; flex-direction: column; align-items: center; justify-content: space-around; position:relative; padding:3rem 1.2rem 46px; height:calc((100% - 1.2rem) / 2); background:rgba(255, 34, 34, 0.15); box-shadow:0 0 1rem rgba(255, 34, 34, 0.1) , inset 0 0 0 1px rgba(255, 34, 34, 0.8) , inset 0 0 10rem rgba(255, 34, 34, 0.3);}
.calendar .reward_wrap .reward:before {content:''; display:block; position:absolute;}
.calendar .reward_wrap .reward .img {height:82px;}
.calendar .reward_wrap .reward .btn_receive {height:36px; position:absolute; left:0; right:0; bottom:0; border-radius:0; font-size:14px;}
.calendar .reward_wrap .reward .btn_receive:before {vertical-align:middle; margin-right:1rem; z-index: 1; opacity:1; border-radius:50%; position:relative; margin-left: 0; top:auto; left:auto; right:auto; bottom:auto; width: 20px; height: 20px; background-image: url(/images/common/event/mission/v2/icon_recive_r.png); background-repeat:no-repeat; background-position:0 0;}
.calendar .reward_wrap .reward .btn_receive:after {content: ''; margin-left:0; width: auto; height: auto; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; background: url(/images/common/event/mission/v2/effect_light.png) 0 center repeat; mix-blend-mode: screen;}
.calendar .reward_wrap .reward .btn_receive span {padding-top:2px; z-index: 1;}
.calendar .reward_wrap .reward .btn_receive:hover:before {background-position:0 -20px;}

.calendar .reward_wrap .reward .btn_receive.off {color:#ff3333; background:rgba(207, 0, 0, 0.3); cursor: default;}
.calendar .reward_wrap .reward .btn_receive.off:before {background-image:url('/images/common/event/mission/v2/icon_recive_s.png');}
.calendar .reward_wrap .reward .btn_receive.off:after {opacity:0.5;}
.calendar .reward_wrap .reward .btn_receive.off:hover {box-shadow:none; color:#ff3333; background:rgba(207, 0, 0, 0.3); }
.calendar .reward_wrap .reward .btn_receive.off:hover:before {background-position:0 0;}

.calendar .reward_wrap .reward .btn_receive.end {color:#ff3333; background:rgba(207, 0, 0, 0.3); cursor: default;}
.calendar .reward_wrap .reward .btn_receive.end:before {background-image:url('/images/common/event/mission/v2/icon_recive_s_end.png');}
.calendar .reward_wrap .reward .btn_receive.end:after {opacity:0.5;}
.calendar .reward_wrap .reward .btn_receive.end:hover {box-shadow:none; color:#ff3333; background:rgba(207, 0, 0, 0.3); }
.calendar .reward_wrap .reward .btn_receive.end:hover:before {background-position:0 0;}

.calendar .reward_wrap .reward .name {padding-left:14px; margin-top:4px; font-size:14px; line-height:1.07;     display: block;}
.calendar .reward_wrap .reward .name:before {left:0; background:#ff3333; min-height: 24px; transform: translate(0, -50%);}
.calendar .reward_wrap .reward .go_view {right:0;}
.calendar .reward_wrap .reward .name span {display:block; text-transform:uppercase; color:#ff3333;}

.calendar .reward_wrap .reward.mid:before {width:12.8rem; height:6.6rem; background:url('/images/common/event/mission/v2/img_tape.png') 0 0 no-repeat; transform:scaleX(-1); right: -2rem; background-size:100% auto;}
.calendar .reward_wrap .reward.final {margin-top:1.2rem; background:rgba(221, 204, 0, 0.15); box-shadow:0 0 1rem rgba(221, 204, 0, 0.1) , inset 0 0 0 1px rgba(221, 204, 0, 0.8) , inset 0 0 10rem rgba(221, 204, 0, 0.3);}
.calendar .reward_wrap .reward.final:before {width:5.6rem; height:11.6rem; background:url('/images/common/event/mission/v2/img_tape02.png') 0 0 no-repeat; transform:scale(-1 , -1); left:-2rem; bottom:-3.2rem; background-size:100% auto;}
.calendar .reward_wrap .reward.final .name span {color:#ffee00;}
.calendar .reward_wrap .reward.final .name:before {background:#ffee00;}
.calendar .reward_wrap .reward.final .btn_receive {background:#ddcc00; color:#000000;}
.calendar .reward_wrap .reward.final .btn_receive:before {background-image:url('/images/common/event/mission/v2/icon_recive_y.png');}

.calendar .reward_wrap .reward.final .btn_receive.off {color:#ffee00; background:rgba(211, 204, 0, 0.3);}
.calendar .reward_wrap .reward.final .btn_receive.off:before {background-image:url('/images/common/event/mission/v2/icon_recive_y_s.png');}
.calendar .reward_wrap .reward.final .btn_receive.off:hover {box-shadow:none; color:#ffee00; background:rgba(211, 204, 0, 0.3); }

.calendar .reward_wrap .reward.final .btn_receive.end {color:#ffee00; background:rgba(211, 204, 0, 0.3);}
.calendar .reward_wrap .reward.final .btn_receive.end:before {background-image:url('/images/common/event/mission/v2/icon_recive_y_s_end.png');}
.calendar .reward_wrap .reward.final .btn_receive.end:hover {box-shadow:none; color:#ffee00; background:rgba(211, 204, 0, 0.3); }

.calendar .reward_wrap .reward.final .go_view {background-image: url(/images/common/event/mission/v2/icon_view_y.png);}

.calendar .reward_wrap .reward .btn_receive:hover {background:#000000; box-shadow:inset 0 0 0 1px #dd0000; color:#ff3333;}
.calendar .reward_wrap .reward.final .btn_receive:hover {box-shadow:inset 0 0 0 1px #cccc11; color:#ffee00;}

/* 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) {
.btn_history {right:2rem; bottom:2rem;}
header .util {padding:0 3.6rem; max-width: 970px;}
}

@media screen and (max-width: 1800px) {
.stamp_tit {font-size: 30px; box-shadow: inset 0 0 0 0.5rem #dd0000; line-height: 1.5; padding: 0 2rem 0.2rem;}
.mission_wrap .current .stamp_tit {right:-3.6rem;}
.calendar {padding:5rem 2.5rem;}
.calendar_wrap .stamp_tit {right:-2.4rem;}
.calendar .btn_line {width:80%;}
}
	
@media screen and (max-width: 1600px) {
header .util {padding:0 2.4rem; max-width: 760px;}
header .util .user_info > div {padding-left:1.2rem; padding-right:1.2rem; font-size:16px;}
header .util a {min-width:13.4rem; font-size:16px; padding: 0 1.2rem 0 1.6rem;}
header .util .btn_history span {font-size:16px;}
header .util .btn_history span:before {left:1.2rem;}
header .util .user_info {width: calc(100% - 288px);}
.mission_wrap {padding-left: 4.8rem; padding-right: 4.8rem;}
.mission_wrap .list .con .m_tit {width:13.2rem; height:12.6rem; padding-top: 1rem;}
.m_tit {font-size:20px;}
.m_tit span {font-size:50px; margin-top:-1rem;}
.mission_wrap .list .mission { width:100%; padding:0 25rem 0 10rem; max-width:none;}
.mission_wrap .list .before .box:after {width:100%; height:100%; left:-2.4rem;}
.mission_wrap .list .lock .box:after {width:100%; height:100%; left:-2.4rem;}
.calendar > ul li {width: calc(100% / 6);}
}	

@media screen and (max-width: 1400px) {
.cha01 {left:-11%;}
.cha02 {right:-27%;}

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

@media screen and (max-width: 1360px) {
header .util {justify-content:center; border:none; }
header .util:before {display:none;}
header .util .btn_history {display:none;}
header .user_info {display:none;}
.btn_history {display:flex;}
.title_wrap .user_info {display:flex;}
}

@media screen and (max-width: 1280px) {
.line01 {top:3%;}
.line02 {top:5%;}

.count_wrap {flex-direction: column; padding: 4.4rem 2rem;}
.count_wrap .btn {margin-top:8px;}
.count_wrap .q_txt {margin-right:0;}

.mission_wrap {padding:7.2rem 2.5rem;}
.mission_wrap .list .con {display:block;}
.mission_wrap .list .box {width:100%; padding:4.8rem 0;}
.mission_wrap .list .mission {padding:0 12rem;}
.mission_wrap .list .box .btn_wrap {position:static; transform:none; flex-direction: row; margin-top:3.6rem;}
.mission_wrap .list .reward {width:100%; margin:2.4rem auto 0; background:#000; border-radius:4px; box-shadow:inset 0 0 0 0.6rem #fff , 0 1rem 2rem rgba(0, 0, 0, 0.2); min-height:20.4rem; height:auto; padding: 4.8rem 5.6rem 2.4rem;}
.mission_wrap .list .box .btn_wrap .btn_modify {height:7.2rem; margin:0 0 0 2.4rem;}
.mission_wrap .list .box .btn_wrap .btn_receive {height:7.2rem; padding:0 3.6rem 0 7.2rem;}
.mission_wrap .list .mission .count * {padding-top:0.5%;}
.mission_wrap .list .reward.lock_item {background:#ddd url(/images/common/event/mission/v2/bg_ques_item.png) 50% 50% no-repeat; background-size: 110%; align-items: flex-start; }
.mission_wrap .list .reward.no_item {background: rgba(156, 102, 34, 0.5) url(/images/common/event/mission/v2/bg_no_item.png) 0 50% no-repeat; background-size: 110%; align-items: flex-start;}
.mission_wrap .list .lock .reward .txt {position:relative; z-index:2; left: 50%; top: 50%; margin: -10px 0 0 -40px;}
.mission_wrap .list .reward.no_item .txt {margin: -2px 0 0 -10px;}
.mission_wrap .list .reward.no_item .txt {position:relative; z-index:2; left: 50%; top: 50%; margin: -10px 0 0 -40px;}

.mission_wrap .list .reward.lock_item .txt {margin: -2px 0 0 -10px;}
.mission_wrap .list .reward.lock_item .txt {position:relative; z-index:2; left: 50%; top: 50%; margin: -10px 0 0 -40px;}

.btn_receive font {display:inline; margin-left:1.5rem;}
.btn_receive span {padding-top:0;}
.btn_receive:after {top:auto; left:2.4rem; margin-left:0; }
.reward .tit {left:-1.5rem; z-index:2;}

.mission_wrap .list .complete .info {margin-top: -7.2rem; width: 14.4rem; height: 14.4rem; font-size: 20px; right: -1.2rem;}

.mission_wrap .list .reward.lock_item:after {top:1.2rem; bottom:-3.6rem; background-size:auto 100%; z-index:1; display: none;}
.mission_wrap .list .reward.no_item:after {top:1.2rem; bottom:-3.6rem; background-size:auto 100%; z-index:1; display: none;}

.total_reward {padding:3rem 3.6rem;}

.calendar {display:block;}
.calendar > ul {width:auto; margin-right:-2.4rem; display:block; margin-bottom:0;}
.calendar > ul li {width: calc(100% / 6); padding-right:2.4rem; margin-bottom:2.4rem;}
.calendar .reward_wrap {width:100%;}
.calendar .reward_wrap .reward .name span {margin-right: 24px;}

}	

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

@media screen and (max-width: 1023px) {
header {text-align:center; padding-top:3rem;}
header .util {left:auto; transform:none; right:1.2rem; top:1.2rem; padding:0; height:auto; max-width: none; width: auto;}
header .util a {font-size:14px;}
header .util .btn_login {min-width:54px; padding:0 10px; height:54px; border-radius:1rem; color:#fff; width:auto;}
header .util .btn_login span:after {display:none;}

.all_wrap > .inner {padding-top:48%;}
.cha01 {left:0; width:100%; top:10rem; z-index:1;}
.cha02 {display:none;}
.line {width:150%;}
.line01 {top:0;}
.line02 {top:3%;}
.title_wrap > img {max-width:90%;}
.title_wrap .user_info span {padding-left:0;}
.title_wrap .user_info span:before {display:none;}
.total_reward {display:block; text-align:center;}
.total_reward .tit {text-align:center; margin-bottom:2.4rem;}
.total_reward .tit span br {display:none;}
.total_reward .reward {padding:0; margin-bottom:3.6rem;}
.total_reward .reward .name {padding-left:1.4rem;}
.total_reward .reward .name:before {left:0;}
.total_reward .reward .go_view {right:0;}

.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;}

header .bi img {width:24rem;}
header .util a {font-size:2.3rem;}
header .util .btn_login {min-width:48px; height:48px; padding:0 5px;}
.mobile {display:block;}

.btn {font-size:2.6rem; height:30px; padding-right: 1.4rem;}
.btn_line {font-size:3.3rem; padding: 0 2.4rem 0 3.6rem;}
.btn_line span:after {margin-top: -4px;}
.btn_receive:after {width:20px; height:20px; background-size:100% auto; left:2rem;}
.btn_receive:hover:after {background-position: 0 -20px;}

.btn:after {width:16px; height:16px; background-size: 100%;}

.m_tit {font-size:2.4rem;}
.m_tit span {font-size:4.8rem; margin-top:-1.5rem;}

.title_wrap .sub_tit {font-size:4.1rem; margin-top: 1.2rem;}
.title_wrap .sub_tit span {min-height:40px; padding:7px 12px 4px; line-height: 1;}
.title_wrap .user_info {margin-top: 1.2rem;}
.title_wrap .user_info > div {font-size:2.25rem; min-height:30px; letter-spacing: -0.04rem; padding: 0.3rem 0.8rem 0; width: calc((100% - 1.2rem) / 2);}
.title_wrap .user_info .cash span {max-width: calc(100% - 48px);}

.mission_wrap .current .day {font-size:3.3rem;}
.mission_wrap .current .day span {font-size:7.2rem;}

.stamp_tit {font-size:3.2rem;}

.mission_wrap .list .con .m_tit {padding-bottom:2rem;}
.mission_wrap .list .mission {padding: 0 16rem;}
.mission_wrap .list .mission .txt {font-size:3.3rem;}
.mission_wrap .list .box {min-height: 30rem;}
.mission_wrap .list .box .btn_wrap .btn_line {font-size:2.6rem; height: 9rem;}
.mission_wrap .list .box .btn_wrap .btn_line span:after {right: 2.4rem;}
.mission_wrap .list .complete .info {margin-top: -9rem; width: 18rem; height: 18rem; font-size: 14px;}
.mission_wrap .list .mission .count {font-size:4.3rem;}
.mission_wrap .list .mission .count * {width:36px; height:36px; margin:0;}
.mission_wrap .list .reward {padding-left: 4rem; padding-right: 4rem;}

.mission_wrap .list .box .state img {width:8rem;}
.mission_wrap .list .box .btn_wrap .btn_clear {padding: 0 44px 0 3rem;}
.mission_wrap .list .box .btn_wrap .btn_clear span font {line-height:1;}
.mission_wrap .list .lock .reward .txt {font-size:3.1rem;}
.mission_wrap .list .reward.no_item .txt {font-size:3.1rem;}
.mission_wrap .list .reward.lock_item .txt {font-size:3.1rem;}

.count_wrap .q_txt {font-size: 4.1rem;}

.remain > span {font-size:2.65rem;}
.reward .name {font-size:2.4rem;}
.reward .tit {font-size:2.5rem;}

.total_reward .tit {font-size:2.9rem;}
.total_reward .btn_receive {height:7.2rem; font-size:2.8rem; min-width:0; padding: 0 3.6rem 0 7.2rem;}
.total_reward .btn_receive:after {left:2rem; top:auto; margin-top:0;}

.calendar_wrap .stamp_tit {top: -3.2rem; right: 50%; margin-right: -76px;}

.calendar .reward_wrap .reward .name {font-size:2.3rem; padding-left: 8px;}
.calendar .reward_wrap .reward .name span {margin-right: 12px;}
.calendar .reward_wrap .reward .btn_receive {font-size:2.3rem;}
.calendar > ul li .con {padding-bottom:10.8rem;     min-height: 24rem;}
.calendar > ul li .con .day {font-size:2.3rem;}
.calendar > ul li .con .img img {max-width:6rem;}
.calendar .btn_line {font-size:2.3rem; height:auto; padding:0.4rem 0 0.6rem 0; letter-spacing: 0; line-height: 1; width: 88%;}
.calendar .btn_line:before {box-shadow: inset 0 0 0 0.1rem #ccc;}
.calendar > ul li .con .complete span {font-size:2.2rem;}
.calendar > ul .bin .con .day span {font-size:6.1rem;}
.calendar > ul li .con .count {font-size:4.3rem;}
.calendar > ul li .con:before {background-size:1.5rem auto !important;}
.calendar > ul li .con .complete {max-width:68px; bottom: 4rem;}
.calendar .btn_line span:after {display:none;}

.pop_up .pop_layout {width:auto; left:2.4rem; right:2.4rem; transform: translate(0, -50%);}
.pop_up .pop_con h2 {font-size:3.1rem; top:0; }
.pop_up .pop_con .txt {font-size:2.7rem;}
.pop_up .pop_con .y_txt {font-size:5rem;}
.pop_up .btn span {font-size:2.3rem;}
.pop_clear .btn font {font-size:2.5rem;}
.pop_clear .btn {height:56px; max-width: 100%;}
.pop_detail .name {font-size:2.5rem;}
.pop_up .desc .btns button {font-size:2.3rem;}
.pop_up .desc .btns .cash {font-size:2.4rem;}
.pop_day .pop_con, .pop_all .pop_con {padding-bottom:7rem;}
.pop_clear .reward .name {font-size:2.4rem;}
.pop_all .img_list .slick-arrow {margin-top:-4rem;}
.pop_all .img_list .slick-prev {left:-27px;}
.pop_all .img_list .slick-next {right:-27px;}

.btn_history span {padding-top:0.5rem; font-size:2rem;}
.pop_history .list li.top div {font-size:2.3rem; padding-top:1px;}
.pop_history .list li > div {font-size:2.3rem;}
.pop_history .list li > div.mission span {line-height:1;}
.pop_history .list li.none {font-size:2.5rem;}
.pop_history .list li > div.date {width:30%; line-height: 1;}
.pop_history .list li > div.date span {margin-top:0;}
.pop_history .list li > div.mission {width:40%;}

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

@media screen and (max-width: 500px) {
.line {width:250%;}
.line01 {top:-1.5%;}
.line02 {top:2%;}
.calendar > ul li {width: calc(100% / 3);}

.mission_wrap .list .mission {padding: 0 6rem;}
.mission_wrap .list .complete .info {margin-top: -7.2rem; width: 14.4rem; height: 14.4rem; font-size: 12px; padding-bottom: 2%;}
}

@media screen and (max-width: 380px) {
.mission_wrap .list .box .btn_wrap .btn_line {padding: 0 2rem; vertical-align: top;}
.mission_wrap .list .box .btn_wrap .btn_line span:after {display: none;}
.mission_wrap .list .box .btn_wrap .btn_modify {margin-left: 1.2rem;}

.calendar .reward_wrap .reward .name span {margin-right: 0;}
.pop_history .list li > div {font-size:2rem;}
}
	
@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 diaUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }

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

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

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

@keyframes animate-width {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}

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