@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Stick+No+Bills:wght@200..800&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; line-height: 1.1; text-align: center; font-family: 'Stick No Bills', 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: 'Stick No Bills';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'Stick No Bills'; 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: 'Stick No Bills';}

.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; top:0; right:4px; max-width:none; z-index:1;}
.cha01 {animation: fil 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000); top:10.6rem; left:8.7%;}
.cha02 {animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000); top:0; right:4.5%;}
.fiu {animation: fiu 0.3s;}


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

.btn {transition:none; display:flex; align-items:center; justify-content:center; font-weight:600; font-family: 'din-2014-narrow'; font-size:18px; letter-spacing:0.1em; background-color:rgba(255, 255, 255, 0); text-transform:uppercase; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}

.btn_day {width:200px; height:66px; color:#fff6bb; background-image:url('/images/common/event/mission/v4/bg_day.png');}
.btn_day:hover {background-position:0 100%;}

.btn_clear {font-size:16px; color:#34601e; width:200px; height:57px; background-image:url('/images/common/event/mission/v4/bg_clear.png'); letter-spacing:0;}
.btn_clear .cash {margin-top:-1px; font-size:13px; color:#fff; font-family:'Roboto'; min-width:84px; padding:0 1.2rem; height:16px; display:flex; align-items:center; justify-content:center; text-transform:uppercase; border-radius:8px; background:#5b8f26;}
.btn_clear:hover {background-position:0 100%; color:#2b8e00;}
.btn_clear:hover .cash {background:#2b8e00;}

.btn_all {font-size:20px; color:#274300; width:20rem; height:6.7rem; background-image:url('/images/common/event/mission/v4/btn_clear.png');}
.btn_all:hover {background-position:0 100%; color:#993e3e;}

.btn_receive {font-size:20px; color:#34601e; text-transform:uppercase; letter-spacing:0.05em; background-image:url('/images/common/event/mission/v4/btn_reward.png'); width:214px; height:131px; flex-direction: column;}
.btn_receive:after {content:''; display:block; width:16px; height:18px; background-image:url('/images/common/event/mission/v4/icon_receive.png'); background-repeat:no-repeat; background-position:0 0; margin-top:0.5rem;}
.btn_receive:hover {background-position:0 100%; color:#2b8e00;}
.btn_receive:hover:after {background-position:0 -18px;}

.btn_receive02 {color:#fff6bb; font-weight:500; text-transform:uppercase; letter-spacing:0; font-size:16px; background-image:url('/images/common/event/mission/v4/btn_receive.png'); width:140px; height:80px; flex-direction: column;}
.btn_receive02 span:before {content:''; display:block; margin:0 auto; width:16px; height:13px; background-image:url('/images/common/event/mission/v4/icon_receive02.png'); background-repeat:no-repeat; background-position:0 0; margin-bottom:0.5rem;}
.btn_receive02:hover {background-position:0 -80px; color:#fcff00;}
.btn_receive02:hover span:before {background-position:0 -13px;}
.btn_receive02.off {cursor:default; background-position:0 -160px; color:#b30000;}
.btn_receive02.off span:before {background-position:0 -26px;}
.btn_receive02.end {cursor:default; background-position:0 0; color:#fff6bb; background-image:url('/images/common/event/mission/v4/btn_receive_end.png');}
.btn_receive02.end span:before {background-position:0 0; background-image:url('/images/common/event/mission/v4/icon_received.png'); height:12px;}


.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:1rem; 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; font-weight:800; letter-spacing:0.05em; 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/v4/bg_start.png');}
.btn_round.btn_start:before {background-image:url('/images/common/event/mission/v4/bg_round_g.png'); width:18.6rem; height:18.6rem;  animation: spin 3s infinite linear;}
.btn_round.btn_start:after {background-image:url('/images/common/event/mission/v4/bg_start_point.png'); animation: aim 10s infinite linear;}
.btn_round.btn_start span {color:#c1ff55;}
.btn_round.btn_start span:after {width:2.1rem; height:1.7rem; background-size:100% auto; background-image:url('/images/common/event/mission/v4/icon_down.png');}
.btn_round.btn_start:hover:before {background-position:0 -18.6rem;}
.btn_round.btn_start:hover span {color:#fff;}
.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_modify {line-height:1; display:flex; align-items:center; justify-content:center; height:34px; border-radius:5px; padding:0 1rem; min-width:8.7rem; max-width:100%; background:#000; border:1px solid #ff8a00; font-size:14px; color:#fe8b01; letter-spacing:0.02em; text-transform:uppercase; font-family: 'din-2014-narrow';}
.btn_modify:before {content:''; display:inline-block; margin-right:1rem; width:16px; height:16px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v4/icon_modify.png');}
.btn_modify:hover {color:#fff; background:#fe8b01;}
.btn_modify:hover:before {background-position:0 -16px;}

.btn_history {transition:none; z-index:7; position:fixed; width:10rem; height:10rem; display:none; align-items:center; justify-content:center; bottom:5rem; right:5rem; border-radius:50%; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v4/btn_history.png'); background-size:100% auto;}
.btn_history:before {content:''; display:block; position:absolute; width:10.3rem; height:10.3rem; top:50%; left:50%; margin-top:-5.15rem; margin-left:-5.15rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v4/btn_history_point.png'); animation: aim 10s infinite linear; background-size:100% auto;}
.btn_history span {text-transform:uppercase; color:#ebe199; font-size:18px; font-weight:700; line-height:1.12;}
.btn_history:hover {background-position:0 100%;}
.btn_history:hover:before {background-position:0 100%;}
.btn_history:hover span {color:#fff;}


.user_info {flex-wrap: wrap; font-size:0; z-index:1; background:rgba(60, 60, 60, 0.4); position:relative; box-shadow:inset 0 0 0 1px #c1ff55; height:66px; display:inline-flex; align-items:center; justify-content:space-between; padding:0 2.6rem 0 2rem;}
.user_info:before {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/v4/bg_gr_t.png') center 0 no-repeat , url('/images/common/event/mission/v4/bg_gr_r.png') right center no-repeat, url('/images/common/event/mission/v4/bg_gr_b.png') center bottom no-repeat, url('/images/common/event/mission/v4/bg_gr_l.png') 0 center no-repeat;}
.user_info > div {max-width:calc((100% - 4.5rem) / 2);}
.user_info .user {margin-right:4.5rem; font-family: 'din-2014-narrow'; font-size:18px; color:#fff; font-weight:800; display: block; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis; white-space: nowrap; word-break: break-all; word-wrap: normal;}
.user_info .user:before {position: relative; top: -2px; content:''; display:inline-block; vertical-align:middle; width:22px; height:21px; background:url('/images/common/event/mission/v4/icon_user.png') 0 0 no-repeat; margin-right:1.5rem;}
.user_info .cash {display:inline-block; font-family:'Roboto'; color:#000000; font-size:14px; font-weight:700; border-radius:12px; background:#c1ff55; padding:5px 1.5rem 3px; text-transform:uppercase;}

header { text-align:left; position:absolute; top:0; left:0; right:0; z-index: 20; padding:3.6rem 58px 0; font-weight: 600;}
header .bi img {max-width:160px;}
header .util {flex-wrap: wrap; padding:0 20px 0 30px; display:flex; align-items:center; justify-content:space-between; position:absolute; top:0; left:50%; transform:translate(-50% , 0); width:864px; height:96px; background:url('/images/common/event/mission/v4/bg_util.png') 0 0 no-repeat; background-size:100% auto;}
header .util a {position:relative; transition:none; font-family: 'din-2014-narrow'; font-weight:600; font-size:16px; letter-spacing:0.02em; background-position:0 0; background-repeat:no-repeat; text-transform:uppercase; z-index:1; width:180px; height:56px; display:flex; align-items:center; justify-content:center; background-size:100% auto;}
header .util .btn_login { background-image:url('/images/common/event/mission/v4/btn_login02.png'); color:#34601e;}
header .util .btn_history {right:auto; bottom:auto; border-radius:0; background-image:url('/images/common/event/mission/v4/btn_history02.png');}
header .util .btn_history:before {display:none;}
header .util .btn_history span {color:#3e3705; font-size:16px;}
header .util .btn_history br {display:none;}
header .util .user_info {height:auto; box-shadow:none; background:none; width: calc(100% - 360px); justify-content: center; flex-wrap: wrap;}
header .util .user_info:before {display:none;}
header .util a:hover {background-position:0 100%;}
header .util .btn_history:hover span {color:#fff;}
header .util .btn_login:hover {color:#2b8e00;}

footer {width: 100%; padding:8rem 0; position:relative; font-family:'Roboto';}
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 12px; color:#849576; position: relative; z-index: 2; letter-spacing:0.01em;}
footer .footer .cs > a {color:#ffe84f; 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:582px; left:50%; top:50%; position: absolute; transform:translate(-50% , -50%); z-index: 99; background:#000000; border:0.2rem solid #ff0000;}
.pop_up .pop_layout:before {content:''; display:block; position:absolute; top:-0.2rem; bottom:-0.2rem; left:-0.2rem; right:-0.2rem; background:url('/images/common/event/mission/v4/pop_obj_lb.jpg') 0 bottom no-repeat , url('/images/common/event/mission/v4/pop_obj_lt.jpg') 0 0 no-repeat , url('/images/common/event/mission/v4/pop_obj_rb.jpg') right bottom no-repeat;}
.pop_up .pop_close {top:0; right:0; border-left:1px solid #ff0000; position:absolute; cursor:pointer; width:6.2rem; height: 6.2rem; font-size: 0; text-indent: -99999px; background-color:rgba(255, 255, 255, 0); transition:none;}
.pop_up .pop_close:before {content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:5.8rem; height:5.8rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v4/pop_close.png'); background-size:100% auto;}
.pop_up .pop_close:hover:before {background-position:0 -5.8rem;}
.pop_up .pop_con {z-index:1; position:relative;}
.pop_up .pop_con .desc { padding:4rem 4rem 6rem; position: relative;}
.pop_up .pop_con .txt {letter-spacing:0.04em; position:relative; word-break: break-word; border:1px solid #7f7f7f; font-size:20px; color:#ffffff; font-family: 'din-2014-narrow'; padding:1.8rem 2.4rem;}
.pop_up .pop_con .txt:before {content:''; display:block; position:absolute; top:0.3rem; bottom:0.3rem; left:0.3rem; right:0.3rem; background:url('/images/common/event/mission/v4/pop_obj01.png') 0 0 no-repeat , url('/images/common/event/mission/v4/pop_obj01.png') 0 bottom no-repeat , url('/images/common/event/mission/v4/pop_obj02.png') right 0 no-repeat ,url('/images/common/event/mission/v4/pop_obj02.png') right bottom no-repeat;}
.pop_up .pop_con .day {margin-bottom:2rem; position:relative; text-transform:uppercase; padding:1.8rem 3rem 1.4rem; line-height:1; color:#ff0000; font-size:30px; font-weight:800; letter-spacing:0.02em; background:rgba(0, 0, 0, 0.9); border:1px solid #ff0000;}
.pop_up .pop_con .day:before {content:''; display:block; position:absolute; left:-0.4rem; right:-0.4rem; top:1.1rem; bottom:1.1rem; background:url('/images/common/event/mission/v4/dot_g.png') 0 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') 0 center no-repeat , url('/images/common/event/mission/v4/dot_g.png') 0 bottom no-repeat , url('/images/common/event/mission/v4/dot_g.png') right 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') right center no-repeat , url('/images/common/event/mission/v4/dot_g.png') right bottom no-repeat;}
.pop_up .pop_con .day span {color:#ffde00;}
.pop_up .pop_con h2 {border-bottom:1px solid #ff0000; height:6.3rem; display:flex; padding:0 63px 0 2.4rem; align-items:center; justify-content:flex-start; font-size:30px; color:#e3ef3c; letter-spacing:0.3em; text-transform:uppercase; position:relative; }
.pop_up .pop_con .reward {padding:4rem 6rem 10px; border:1px solid #7f7f7f; border-top:0; position:relative;}
.pop_up .pop_con .reward:before {position:absolute; content:''; display:block; background-repeat:no-repeat; background-position:0 0 , right bottom; background-image:url('/images/common/event/mission/v4/pop_deco_l.jpg') , url('/images/common/event/mission/v4/pop_deco_r.jpg'); left:-1px; right:-1px; top:3rem; bottom:3rem;}
.pop_up .pop_con .reward:after {content:''; display:block; position:absolute; bottom:0; left:0; right:0; height:1.1rem; border-top:1px solid #7f7f7f; background:url('/images/common/event/mission/v4/pop_obj03.png') left 0.2rem top 50% no-repeat , url('/images/common/event/mission/v4/pop_obj04.png') right 0.2rem top 50% no-repeat;}
.pop_up .pop_con .img {position:relative; z-index:1; height:14rem; display:flex; align-items:center; justify-content:center;}
.pop_up .pop_con .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.pop_up .pop_con .reward .name {font-size:16px; color:#c1ff55; font-family: 'din-2014-narrow'; padding:7px 2.4rem 2rem;}
.pop_up .pop_con .box {padding:5.4rem 5rem; border:1px solid #7f7f7f; position:relative;}
.pop_up .pop_con .box:before {position:absolute; content:''; display:block; background-repeat:no-repeat; background-position:0 0 , right bottom; background-image:url('/images/common/event/mission/v4/pop_deco_l.jpg') , url('/images/common/event/mission/v4/pop_deco_r.jpg'); left:-1px; right:-1px; top:3rem; bottom:3rem;}
.pop_up .pop_con .box:after {content:''; display:block; position:absolute; bottom:0; left:0; right:0; height:11px; border-top:1px solid #7f7f7f; background:url('/images/common/event/mission/v4/pop_obj03.png') left 2px top 50% no-repeat , url('/images/common/event/mission/v4/pop_obj04.png') right 2px top 50% no-repeat;}
.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/v4/pb_cash_g02.png');}
.pop_up .btns {font-size:0; margin-left:-1.8rem; margin-top:2rem;}
.pop_up .btns button {margin-left:1.8rem; text-align:left; font-family: 'din-2014-narrow'; font-size:14px; letter-spacing:0.1em; line-height:1.28; display:inline-flex; vertical-align:top; align-items:center; justify-content:space-evenly; width:240px; height:60px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;} 
.pop_up .btns button:hover {background-position:0 100%; }

.pop_mission .pop_con .desc {padding:3rem 4rem;}
.pop_mission .pop_con .txt {border:none; padding:0; margin-top:2rem;}
.pop_mission .pop_con .txt:before {display:none;}
.pop_mission .pop_con .cash { border:1px solid #a2ff00; padding:1.4rem 2.4rem;  font-size:30px; }
.pop_mission .btns {margin-left:0; margin-top:3rem;}
.pop_mission .btns button {margin:0 1rem; width:140px; font-size:16px;}
.pop_mission .btns button span {line-height:1;}
.pop_mission .btns .btn_cancel {background-image:url('/images/common/event/mission/v4/btn_pop03.png'); color:#617d31;}
.pop_mission .btns .btn_complete {background-image:url('/images/common/event/mission/v4/btn_pop04.png'); color:#c1ff55;}
.pop_mission .btns .btn_cancel:hover {color:#90c13c;}
.pop_mission .btns .btn_complete:hover {color:#0b2200;}

.pop_detail .pop_con .desc {padding:5rem 2.4rem;}
.pop_detail .pop_con .img {height:18rem; max-width: 42rem; margin: 0 auto; position:relative;}
.pop_detail .pop_con .img:before, .pop_detail .pop_con .img:after {content:''; display:block; position:absolute; width:2.8rem; height:14.4rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.pop_detail .pop_con .img:before {background-image:url('/images/common/event/mission/v4/img_detail_l.png'); left:-4.7%; top:-5rem;}
.pop_detail .pop_con .img:after {background-image:url('/images/common/event/mission/v4/img_detail_r.png'); right:-4.7%; bottom:-5.4rem;}

.pop_detail .pop_con h2 {font-family: 'din-2014-narrow'; font-size:20px; color:#e3ef3c; letter-spacing:0.05em; font-weight:400;}

.pop_clear .btns button .cash:after {margin-left:5px; content:''; display:inline-block; vertical-align:middle; width:24px; height:24px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; position:relative; top:-1px;}
.pop_clear .btns button:hover {color:#ff0000;}
.pop_clear .btns button:hover .cash {color:#ff0000;}
.pop_clear .btns button:hover .cash:after {background-position:0 100%;}
.pop_clear .btns .btn_reward {background-image:url('/images/common/event/mission/v4/btn_pop01.png'); color:#427827;}
.pop_clear .btns .btn_reward .cash {color:#338b08; letter-spacing:0;}
.pop_clear .btns .btn_reward .cash:after {background-image:url('/images/common/event/mission/v4/pb_cash_g.png');}
.pop_clear .btns .btn_complete {background-image:url('/images/common/event/mission/v4/btn_pop02.png'); color:#c1ff55;}
.pop_clear .btns .btn_complete .cash {color:#f4d400;}
.pop_clear .btns .btn_complete .cash:after {background-image:url('/images/common/event/mission/v4/pb_cash_y.png');}


.pop_all #pageinfo {font-size:16px; color:#7f7f7f; font-family: 'din-2014-narrow'; letter-spacing:0.05em; font-weight:600; padding:7px 2.4rem 2rem;}
.pop_all #pageinfo span {color:#c1ff55; margin-right:0.4rem;}
.pop_all #pageinfo font {color:#303e16; margin-left:0.4rem;}
.pop_all .img_list .slick-slide {position: relative;}
.pop_all .img_list .slick-arrow {z-index:1; transition:none; font-size:0; color:transparent; position:absolute; top:50%; margin-top:-15px; display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v4/arr_item.png'); background-color:rgba(255, 255, 255, 0);}
.pop_all .img_list .slick-prev {left:-3.2rem;}
.pop_all .img_list .slick-next {right:-3.2rem; transform:scaleX(-1);}
.pop_all .img_list .slick-arrow:hover {background-position:0 100%;}
.pop_all .img_list .slick-arrow.slick-disabled {opacity:0.4; cursor:default;}
.pop_all .pop_con .reward {padding-top:2rem;}
.pop_all .pop_con .reward .name {padding:0 2.4rem 7px;}

.pop_history {font-family:'Roboto';}
.pop_history .list { letter-spacing:0; height: 45.6rem; padding-right: 1.2rem; padding-left:0.3rem; overflow-y: auto ; position:relative;}
.pop_history .list::-webkit-scrollbar {width: 0.6rem; }
.pop_history .list::-webkit-scrollbar-track {background:#2c2c2c;}
.pop_history .list::-webkit-scrollbar-thumb {background:#806f00;}
.pop_history .list li {border-bottom:1px solid #7f7f7f; font-size: 0;}
.pop_history .list li > div {align-items: center; justify-content: center; flex-direction: column; height:5rem; padding:0 1rem; display: inline-flex; vertical-align:middle; text-align:center; font-size:12px; color:#fff; letter-spacing:0.02em;}
.pop_history .list li > div.date { width: 24%; color:#ddd7b3; text-transform: uppercase;}
.pop_history .list li > div.date span {display:block; color:#ad9f43; margin-top:3px;}
.pop_history .list li > div.item span {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-height: 1.3; text-align: center; -webkit-box-orient: vertical; word-break: break-word;}
.pop_history .list li.bottom > div.date {line-height:1.1;}
.pop_history .list li > div.mission {width: 50%; color:#ffffff; white-space: normal; word-wrap: normal;}
.pop_history .list li > div.mission span {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-height:1.3; text-align:left; -webkit-box-orient: vertical; word-break: break-word;}
.pop_history .list li > div.item {width: 26%; color:#ddd7b3;}
.pop_history .list li.none { height: 41.5rem; display:flex; align-items:center; justify-content:center; font-size: 18px; color:#ddd7b3; text-transform:uppercase; border-bottom:none; letter-spacing:0.05em; font-family: 'din-2014-narrow';}
.pop_history .list li.top {border-bottom:0; border:1px solid #ff0000; margin-bottom:3.2rem;}
.pop_history .list li.top > div {font-size:20px; color:#ff0000; text-transform:uppercase; position:relative; font-family: 'din-2014-narrow'; height: 4.4rem;}
.pop_history .list li.top > div:before {content:''; display:block; position:absolute; left:-0.4rem; right:-0.4rem; top:1.1rem; bottom:1.1rem; background:url('/images/common/event/mission/v4/dot_g.png') 0 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') 0 center no-repeat , url('/images/common/event/mission/v4/dot_g.png') 0 bottom no-repeat , url('/images/common/event/mission/v4/dot_g.png') right 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') right center no-repeat , url('/images/common/event/mission/v4/dot_g.png') right bottom no-repeat; background-size:0.8rem auto;}
.pop_history .list li.top > div.mission {border-left:1px solid #ff0000; border-right:1px solid #ff0000;}
.pop_history .list li.top > div.date span {margin-top:0; color:#ff0000;}

.pop_history .pop_con .desc {padding:3.2rem 2.4rem 3.2rem 2.9rem; position:relative;}
.pop_history .pop_con .list:before, .pop_history .pop_con .list:after {content:''; display:block; height:12px; border-top:1px solid #7f7f7f; border-bottom:1px solid #7f7f7f; background:url('/images/common/event/mission/v4/bar_obj_l.png') 0 center no-repeat, url('/images/common/event/mission/v4/bar_obj_r.png') right center no-repeat;}
.pop_history .pop_con .list:before {top:64px; position:absolute; left:0.3rem; right:1.2rem;}
.pop_history .pop_con .list:after {position:relative; margin-top:-1px;}

.section01 {text-align:center; position:relative;/*  animation: lsi 1s; */ padding:21.4rem 3rem 17rem; background:url('/images/common/event/mission/v4/bg01.jpg') center 0 no-repeat; background-size:cover;}
.title_wrap {display:inline-block; max-width:100%;}
.title_wrap .tit_img {position: relative; z-index: 1;}
.title_wrap .sub_tit {position: relative; z-index: 1; margin-top:2.6rem; padding:0 6px 0 11px; font-size:30px; color:#fff; font-weight:700; letter-spacing:0.04em; display:inline-block; background:url('/images/common/event/mission/v4/bg_tit_l.png') 0 center no-repeat , url('/images/common/event/mission/v4/bg_tit_r.png') right center no-repeat;}
.title_wrap .sub_tit span {padding:1rem 6.5rem 1rem 6rem; background:url('/images/common/event/mission/v4/bg_tit.jpg') 0 0 repeat; display:flex; align-items:center; justify-content:center; min-height:64px; min-width: 65rem;}
.title_wrap .date {margin-top:1rem; display:block; color:#c1ff55; font-family: 'din-2014-narrow'; letter-spacing:0.1em; text-shadow:0 0.2rem 0 rgba(0, 0, 0, 0.5); font-size:22px; text-transform:uppercase; position: relative; z-index: 1;}
.title_wrap .user_info {display:none;}

.mission_wrap {border-top:1px solid #000000; border-bottom:1px solid #ff0000; position:relative; background:#000; z-index:2;}
.mission_wrap:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/v4/ptn_ms.png') 0 0 repeat;}
.mission_wrap:after {content:''; display:block; position:absolute; width:9.8rem; height:0.7rem; background:url('/images/common/event/mission/v4/obj_bot_r.png') 0 0 no-repeat; left:50%; bottom:-0.7rem; transform:translate(-50% , 0); background-size:100% auto;}
.mission_wrap .top {position:relative; background:rgba(0, 0, 0, 0.9); border-top:1px solid rgba(255, 0, 0, 0.5); border-bottom:1px solid rgba(255, 0, 0, 0.5);}
.mission_wrap .top .inner {position:relative;}
.mission_wrap .top:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:linear-gradient(to bottom, #9f9f9f, #ffef87); mix-blend-mode: darken;}
.mission_wrap .top .current {position:relative;}
.mission_wrap .top .current .tit {display:flex; align-items:center; justify-content:center; width:54rem; height:11rem; background:url('/images/common/event/mission/v4/bg_daily_tit.png') 0 0 no-repeat; background-size:100% auto; margin:0 auto; text-align:center; color:#c1ff55; font-size:56px; text-transform:uppercase; letter-spacing:0.02em; text-shadow:-1px 0 0 #ff8a00, 1px 0 0 #0018ff; font-weight:800;}
.mission_wrap .top .current .tit:before {content:''; display:block; position:absolute; top:-0.2rem; left:50%; transform:translate(-50% , 0); width:24.9rem; height:0.7rem; background:url('/images/common/event/mission/v4/bg_gr_ll.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .top .m_tit {text-shadow:none; padding:0.8rem 3rem 0.4rem; line-height:1; color:#c1ff55; font-size:50px; font-weight:800; letter-spacing:0.02em; position:absolute; left:0; top:50%; transform:translate(0 , -50%); display:inline-block; background:rgba(0, 0, 0, 0.9); border:1px solid #ff0000;}
.mission_wrap .top .m_tit:before {content:''; display:block; position:absolute; left:-0.4rem; right:-0.4rem; top:1.1rem; bottom:1.1rem; background:url('/images/common/event/mission/v4/dot_g.png') 0 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') 0 center no-repeat , url('/images/common/event/mission/v4/dot_g.png') 0 bottom no-repeat , url('/images/common/event/mission/v4/dot_g.png') right 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') right center no-repeat , url('/images/common/event/mission/v4/dot_g.png') right bottom no-repeat;}
.mission_wrap .top .btn_day {position:absolute; top:50%; right:3rem; transform:translate(0 , -50%);}
.mission_wrap .top .remain {display:inline-flex; border-radius:5px; border:1px solid #ff0000; padding:0 2rem; position:absolute; left:50%; transform:translate(-50% , 0); height:34px; align-items:center; justify-content:center; margin-top:-1.3rem; background:#000 url(/images/common/event/mission/v4/ptn_dot.png) 0 0 repeat;}
.mission_wrap .top .remain:before {content:''; display:block; position:absolute; left:0.4rem; right:0.4rem; top:0; bottom:0; border-left:1px solid #ff0000; border-right:1px solid #ff0000;}
.mission_wrap .top .remain span {vertical-align:middle; line-height:1;}
.mission_wrap .top .remain .tit {font-size:20px; color:#ff0000; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; position: relative; top: 1px;}
.mission_wrap .top .remain .time {font-size:20px; font-family:'Roboto'; color:#c1ff55; letter-spacing:0.02em; margin-left:1rem;}
.mission_wrap .top .remain .time font {color:#ff0000; margin: 0 0.5rem; position: relative; top: -2px;}
.mission_wrap .top .count_wrap {font-size:40px; color:#ff0000; font-weight:800; letter-spacing:0.2em; position:absolute; top:50%; right:25rem; transform:translate(0 , -50%);}
.mission_wrap .top .count_wrap font {color:#c1ff55;}

.mission_wrap .list_wrap {background:#1a1f1b; padding-top:5.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%;}
.mission_wrap .list .box {padding:3rem 3rem 5rem; position:relative; background: url('/images/common/event/mission/v4/box_deco_lt.png') 0 0 no-repeat , url('/images/common/event/mission/v4/box_deco_rt.png') right 0 no-repeat , url('/images/common/event/mission/v4/box_deco_lb.png') 0 bottom no-repeat , url('/images/common/event/mission/v4/box_deco_rb.png') right bottom no-repeat; background-color:rgba(0, 0, 0, 0.6); border:1px solid #c1ff55;}
.mission_wrap .list .box:before, .mission_wrap .list .box:after {content:''; display:block; position:absolute; }
.mission_wrap .list .box:before {width:2.1rem; height:13.5rem; background:url('/images/common/event/mission/v4/box_obj_l.jpg') 0 0 no-repeat; left:-1px; top:12.1rem;}
.mission_wrap .list .box:after {width:13.2rem; height:24.8rem; background:url('/images/common/event/mission/v4/box_obj_b.jpg') 0 bottom no-repeat , url('/images/common/event/mission/v4/box_obj_r.jpg') right 0 no-repeat; right:0; bottom:-1px;}
.mission_wrap .list .m_tit {font-size:30px; text-transform:uppercase; color:#ff0000; letter-spacing:0.3em; font-weight:800; margin-bottom:1.8rem;}
.mission_wrap .list .m_tit span {margin-right:1rem; color:#c1ff55; letter-spacing:0.1em; position:relative; border-radius:5px; border:1px solid #ff0000; padding:2px 2rem 0; display:inline-flex; align-items:center; justify-content:center;  height:36px;}
.mission_wrap .list .m_tit span:before {content:''; display:block; position:absolute; left:0.4rem; right:0.4rem; top:0; bottom:0; border-left:1px solid #ff0000; border-right:1px solid #ff0000;}
.mission_wrap .list .box .desc {border:1px solid #fff; position:relative; padding:20px 10px;}
.mission_wrap .list .box .desc:before {content:''; display:block; position:absolute; top:0; left:0; right:0; height:10px; border-bottom:1px solid #fff; background:url('/images/common/event/mission/v4/line_y_lt.png') left 2px top 50% no-repeat , url('/images/common/event/mission/v4/line_y_rt.png') right 2px top 50% no-repeat;}
.mission_wrap .list .box .desc:after {content:''; display:block; position:absolute; bottom:0; left:0; right:0; height:10px; border-top:1px solid #fff; background:url('/images/common/event/mission/v4/line_y_lb.png') left 2px top 50% no-repeat , url('/images/common/event/mission/v4/line_y_rb.png') right 2px top 50% no-repeat;}
.mission_wrap .list .box .desc .line {display:flex;  box-shadow: inset 0 0 0 1px #ff8a00; min-height:29.6rem; background:url(/images/common/event/mission/v4/dot_lt.jpg) 0 0 no-repeat , url(/images/common/event/mission/v4/dot_lb.jpg) 0 bottom no-repeat , url(/images/common/event/mission/v4/dot_rt.jpg) right 0 no-repeat , url(/images/common/event/mission/v4/dot_rb.jpg) right bottom no-repeat , url(/images/common/event/mission/v4/ptn02.png) 0 0 repeat; background-color:rgba(0, 0, 0, 0.3); padding:2.4rem; align-items:center; justify-content:center;}
.mission_wrap .list .box .desc .line:before, .mission_wrap .list .box .desc .line:after {content:''; display:block; position:absolute; }
.mission_wrap .list .box .desc .line:before {width:2.8rem; height:9.5rem; background:url('/images/common/event/mission/v4/desc_obj_l.jpg') 0 0 no-repeat; left:-1px; bottom:6.2rem;}
.mission_wrap .list .box .desc .line:after {width:2.7rem; height:9.3rem; background:url('/images/common/event/mission/v4/desc_obj_r.jpg') 0 0 no-repeat; right:-1.6rem; top:5.4rem;}
.mission_wrap .list .box .desc .mission {margin-bottom:30px; padding:3rem 3rem 0;}
.mission_wrap .list .box .desc .mission .line {min-height:16rem; flex-direction: column; padding-top:2rem; padding-bottom:3.6rem;}
.mission_wrap .list .box .desc img {display:inline;}
.mission_wrap .list .mission .txt {font-size:20px; color:#fff; text-transform:uppercase; font-weight:700; letter-spacing:0.02em; line-height:1.3; font-family: 'din-2014-narrow';}
.mission_wrap .list .mission .count {margin-top:10px; font-size:25px; color:#fff; font-weight:700; font-family:'Roboto'; letter-spacing:0.05em; height:44px; display:flex; min-width:15rem; max-width:100%; padding:0 2.4rem; align-items:center; justify-content:center; box-shadow: inset 0 0 0 1px #ff8a00; background:url(/images/common/event/mission/v4/dot_lt.jpg) 0 0 no-repeat , url(/images/common/event/mission/v4/dot_lb.jpg) 0 bottom no-repeat , url(/images/common/event/mission/v4/dot_rt.jpg) right 0 no-repeat , url(/images/common/event/mission/v4/dot_rb.jpg) right bottom no-repeat;}
.mission_wrap .list .mission .count font {color:#ffde00; margin-right:0.8rem;}
.mission_wrap .list .box .desc .line.no_bg {background: url(/images/common/event/mission/v4/dot_lt.jpg) 0 0 no-repeat, url(/images/common/event/mission/v4/dot_lb.jpg) 0 bottom no-repeat, url(/images/common/event/mission/v4/dot_rt.jpg) right 0 no-repeat, url(/images/common/event/mission/v4/dot_rb.jpg) right bottom no-repeat; background-color: rgba(0, 0, 0, 0.3);}

.mission_wrap .list .box .desc .mission .line {position:relative; background: url(/images/common/event/mission/v4/dot_lt.jpg) 0 0 no-repeat, url(/images/common/event/mission/v4/dot_lb.jpg) 0 bottom no-repeat, url(/images/common/event/mission/v4/dot_rt.jpg) right 0 no-repeat, url(/images/common/event/mission/v4/dot_rb.jpg) right bottom no-repeat; background-color: rgba(0, 0, 0, 0.3);}
.mission_wrap .list .box .desc .mission .line:before {width:1.2rem; height:5.5rem; background:url('/images/common/event/mission/v4/ms_obj_ol.jpg') 0 0 no-repeat; left:0; bottom:3rem;}
.mission_wrap .list .box .desc .mission .line:after {width:1.1rem; height:5.2rem; background:url('/images/common/event/mission/v4/ms_obj_or.jpg') 0 0 no-repeat; right:-1rem; top:3.7rem;}
.mission_wrap .list .box .desc .mission:before, .mission_wrap .list .box .desc .mission:after {content:''; display:block; position:absolute;}
.mission_wrap .list .box .desc .mission:before {width:1.7rem; height:7.4rem; background:url('/images/common/event/mission/v4/ms_obj_wl.jpg') 0 0 no-repeat; left: -1px; bottom: 6.2rem;}
.mission_wrap .list .box .desc .mission:after {width:1.6rem; height:9.3rem; background:url('/images/common/event/mission/v4/ms_obj_wr.jpg') 0 0 no-repeat; right: -1.6rem; top: 5.4rem;}

.mission_wrap .list .box .rd_txt {font-size:18px; color:#ff8a00; text-transform:uppercase; letter-spacing:0.02em; position:absolute; bottom:1.2rem; left:2.4rem; font-weight:800; line-height:1;}
.mission_wrap .list .box .rd_txt:before {content:''; display:block; position:absolute; width:4.8rem; height:9.1rem; background:url('/images/common/event/mission/v4/obj_reward.png') 0 0 no-repeat; right:-4rem; top:0.2rem;}

.mission_wrap .list .box .complete {position:relative;}
.mission_wrap .list .box .complete span {display:block; font-size:40px; color:#ffde00; font-weight:800; text-transform:uppercase; margin-top:1.5rem;} 
.mission_wrap .list .box .state {position:relative;}
.mission_wrap .list .box .state span {font-size:0; color:transparent;} 
.bg_text {text-transform:uppercase; position:absolute;  background: url(/images/common/event/mission/v4/ptn_text.png) 0 0 repeat; color:#fff; font-weight:800; background-clip: text !important; -webkit-background-clip: text !important; color: transparent !important;}
.mission_wrap .list .box .bg_text {top:50%; left:50%; transform:translate(-50% , -50%); font-size:140px; line-height:1; }
.mission_wrap .list .box .bg_text font {font-size:115px; line-height:1;}

.mission_wrap .list .btn_modify {position:absolute; left:50%; bottom:0; transform:translate(-50% , 50%); z-index:1;}
.mission_wrap .list .btn_clear {flex-direction:column; margin:0 auto 2rem;}
.mission_wrap .list .reward {margin:2rem 3rem 0; box-shadow:inset 0 0 0 1px #c1ff55; position:relative; padding:1rem 5.6rem 5.6rem;}
.mission_wrap .list .reward:before, .mission_wrap .list .reward:after {content:''; display:block; position:absolute;}
.mission_wrap .list .reward:before {top:0.8rem; left:1rem; right:1rem; bottom:0.8rem; box-shadow:inset 0 0 0 1px #ff8a00; background:url('/images/common/event/mission/v4/bg_reward_obj01.png') left 3px top 3px no-repeat , url('/images/common/event/mission/v4/bg_reward_obj02.png') left 50% top 5px no-repeat , url('/images/common/event/mission/v4/bg_reward_obj03.png') right 3px top 3px no-repeat , url('/images/common/event/mission/v4/bg_reward_obj04.png') left 3px bottom 3px no-repeat , url('/images/common/event/mission/v4/bg_reward_obj02.png') left 50% bottom 5px no-repeat;}
.mission_wrap .list .reward:after {top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/v4/reward_obj_l.jpg') left 0 top 3.8rem no-repeat , url('/images/common/event/mission/v4/reward_obj_r.jpg') right 0 bottom 6.2rem no-repeat;}
.mission_wrap .list .reward .img { z-index:1; height:12.4rem; 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 {font-size:18px; color:#ff8a00; font-weight:700; letter-spacing:0.02em; font-family: 'din-2014-narrow'; margin-bottom:1.5rem;}
.mission_wrap .list .reward .img > div {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);} 

.mission_wrap .list .reward .lock_item {position:relative;}
.mission_wrap .list .reward .lock_item:before, .mission_wrap .list .reward .lock_item:after {content:''; display:block; position:absolute;}
.mission_wrap .list .reward .lock_item:before {width:4rem; height:4rem; background:url('/images/common/event/mission/v4/icon_ques.png') 0 0 no-repeat; left:50%; margin-left:-2rem; top:-1.4rem; background-size:100% auto;}
.mission_wrap .list .reward .lock_item:after {top:-6rem; width:10rem; height:10rem; background:url('/images/common/event/mission/v4/img_light.png') 0 0 no-repeat; left:50%; margin-left:-5rem; animation: fade 3s linear infinite; background-size:100% auto;}


.go_view {z-index:1; font-size:0; color:transparent; position:absolute; width:30px; height:30px; border-radius:3px; background: linear-gradient(to bottom, #c1ff55, #ffde00); bottom:2rem; right:2rem;}
.go_view:before {content:''; display:block; position:absolute; top:50%; left:50%; margin-top:-8px; margin-left:-8px; width:17px; height:17px; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/v4/icon_view.png');}
.go_view:hover {background: linear-gradient(to bottom, #a2ff00, #ff8a00);}
.go_view:hover:before {background-position:0 -17px;}

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

.total_reward {position:relative; padding:2.7rem 0 8rem;}
.total_reward .con {border:1px solid #820000; position:relative;}
.total_reward .con:before, .total_reward .con:after {content:''; display:block; position:absolute; background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.total_reward .con:before {width:2.1rem; top:3rem; height:18.4rem; background-image:url('/images/common/event/mission/v4/bg_total_l.jpg'); left:-1px;}
.total_reward .con:after {width:1.1rem; bottom:2.2rem; height:7.7rem; background-image:url('/images/common/event/mission/v4/bg_total_r.jpg'); right:-1px;}
.total_reward .reward {max-width:790px; margin:-1px auto; border:1px solid #c1ff55; background:rgba(0, 0, 0, 0.8); position:relative; padding-bottom:2.4rem;}
.total_reward .reward:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('/images/common/event/mission/v4/obj_reward_lt.jpg') 0 0 no-repeat , url('/images/common/event/mission/v4/obj_reward_rt.jpg') right 0 no-repeat , url('/images/common/event/mission/v4/obj_reward_lb.jpg') 0 bottom no-repeat , url('/images/common/event/mission/v4/obj_reward_rb.jpg') right bottom no-repeat;}
.total_reward .reward .tit {margin-top: -1px; max-width:100%; padding:2px 20px 0; position:relative; min-width:450px; display:inline-flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#c1ff55; height:50px; border:1px solid #c1ff55; background:url('/images/common/event/mission/v4/bg_reward_t.png') center 0 no-repeat;}
.total_reward .reward .tit:before, .total_reward .reward .tit:after {content:''; display:block; position:absolute; top:-1px; bottom:-1px; background-repeat:no-repeat; background-position:0 0; width:11px;}
.total_reward .reward .tit:before {background-image:url('/images/common/event/mission/v4/bg_reward_l.jpg'); left:-1px;}
.total_reward .reward .tit:after {background-image:url('/images/common/event/mission/v4/bg_reward_r.jpg'); right:-1px;}
.total_reward .reward .go_view {bottom:1rem; right:1rem; z-index:2;}
.total_reward .reward .img {position:relative; z-index:1; height:18rem; max-width:420px; padding:1.2rem 0; margin:0 auto; display:flex; align-items:center; justify-content:center;}
.total_reward .reward .img:before {content:''; display:block; position:absolute; width:7.9rem; height:9.8rem; background:url('/images/common/event/mission/v4/line_reward_l.png') 0 0 no-repeat; top:-1px; left:-7.9rem; background-size:100% auto;} 
.total_reward .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}

.total_reward .reward .name {font-size:14px; color:#c1ff55; letter-spacing:0.02em; font-family: 'din-2014-narrow'; position:relative; margin-top:5px; padding: 0 4.8rem; max-width: 420px; margin: 0 auto; line-height: 1.2;}
.total_reward .btn_receive02 {position:absolute; z-index:1; top:50%; transform:translate(0,  -50%); right:3.6rem;}
.total_reward .btn_receive02:before, .total_reward .btn_receive02:after {content:''; display:block; position:absolute;}
.total_reward .btn_receive02:before {width:6.4rem; height:5.2rem; background:url('/images/common/event/mission/v4/line_reward_rt.png') 0 0 no-repeat; top:-5.2rem; left:0.7rem;}
.total_reward .btn_receive02:after {width:7.9rem; height:6.6rem; background:url('/images/common/event/mission/v4/line_reward_rb.png') 0 0 no-repeat; bottom:-6.7rem; left:-0.6rem;}
.total_reward .bg_text {font-size:150px; font-weight:800; text-transform:uppercase; background: url(/images/common/event/mission/v4/ptn_text_r.png) 0 0 repeat; bottom:-1.6rem; line-height:1;}
.total_reward .bg_text_l {left:22px;}
.total_reward .bg_text_r {right:12px;}

.calendar_wrap {background:url('/images/common/event/mission/v4/bg_calendar.jpg') center center no-repeat; background-size:cover; position:relative; padding:8rem 0; z-index:1; border-bottom:1px solid #ff0000;}
.calendar_wrap:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/v4/ptn_plus.png') 0 0 repeat;}
.calendar_wrap:after {content:''; display:block; position:absolute; width:9.8rem; height:0.7rem; background:url('/images/common/event/mission/v4/obj_bot_r.png') 0 0 no-repeat; left:50%; bottom:0; transform:scaleY(-1) translate(-50% , 0); background-size:100% auto;}
.calendar_wrap .calendar {box-shadow: inset 0 0 0 1px #fad900; background:rgba(0, 0, 0, 0.4); position:relative;  padding:6rem 6rem 1rem;}
.calendar_wrap .calendar:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/mission/v4/bg_cal_lt.jpg') 0 0 no-repeat , url('/images/common/event/mission/v4/bg_cal_rt.jpg') right 0 no-repeat , url('/images/common/event/mission/v4/bg_cal_lb.jpg') 0 bottom no-repeat, url('/images/common/event/mission/v4/bg_cal_rb.jpg') right bottom no-repeat; }
.calendar_wrap .calendar .m_tit {position:relative;}
.calendar_wrap .calendar .info {position:relative;}
.calendar_wrap .calendar ul {position:relative; margin-left:-3rem; text-align:left; margin-top:6rem;}
.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:6.5% 0; flex-direction:column; display:flex; align-items:center; justify-content: flex-start; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v4/bg_cal_pass.png'); background-size:100% 100%; position:absolute; top:0; left:3rem; bottom:0; right:0;}
.calendar_wrap .calendar .con .day {padding-top:0.2rem; text-align:center; position:relative; height:22%; display:flex; align-items:center; justify-content:center; width:70%; line-height:1; color:#c1ff55; font-size:24px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; background:rgba(0, 0, 0, 0.9); border:1px solid #c1ff55;}
.calendar_wrap .calendar .con .day:before {content:''; display:block; position:absolute; left:-0.4rem; right:-0.4rem; top:24%; bottom:24%; background:url('/images/common/event/mission/v4/dot_g.png') 0 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') 0 bottom no-repeat , url('/images/common/event/mission/v4/dot_g.png') right 0 no-repeat , url('/images/common/event/mission/v4/dot_g.png') right bottom no-repeat;}
.calendar_wrap .calendar .con .complete {width:60%; margin-top:5%; display:inline-block; position:relative;}
.calendar_wrap .calendar .con .complete span {flex-direction: column; top:0; bottom:0; left:0; right:0; position:absolute; display:flex; align-items:center; justify-content:center; text-transform:uppercase; color:#c1ff55; font-size:18px; font-weight:800; font-family: 'din-2014-narrow'; 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/v4/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 {width: 32.5%; height:53%; display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .count {font-size:40px; color:#ff0000; font-weight:800; letter-spacing:0.2em; height:53%; display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .count font {color:#fad900;}
.calendar_wrap .calendar .btn_day {width: 70%; height: 18%; max-width:14rem; max-height:3.6rem; position:absolute; bottom:10%; left:50%; transform:translate(-50% , 0); background-image:url('/images/common/event/mission/v4/bg_day_s.png'); font-size:16px; color:#fff; }
.calendar_wrap .calendar .btn_day:hover {background-position:0 100%; color:#fcf802;}
.calendar_wrap .calendar .today .con {background-image:url('/images/common/event/mission/v4/bg_cal_today.png'); }
.calendar_wrap .calendar .today .t_tit {display:flex; align-items:center; justify-content:center; text-transform:uppercase; position:absolute; left:0.6rem; top:-2.8rem; width:7.3rem; padding-top:0.5rem; height:2.8rem; background:url('/images/common/event/mission/v4/bg_today.png') 0 0 no-repeat; background-size:100% auto; font-size:15px; color:#fad900; letter-spacing:0.08em; font-family: 'din-2014-narrow';}
.calendar_wrap .calendar .today .con .count {height:78%;}
.calendar_wrap .calendar .bin .con {background-image:url('/images/common/event/mission/v4/bg_cal_li.png'); justify-content:center; padding:0;}
.calendar_wrap .calendar .bin .con .day {font-size:32px; color:#4c7700; border:none; background:none;}
.calendar_wrap .calendar .bin .con .day:before {display:none;}

.calendar_wrap .m_tit {align-items:center; justify-content:center; height:6.7rem; font-size:50px; color:#fad900; font-weight:800; text-transform:uppercase; display:inline-flex; letter-spacing:0.02em; min-width:54rem; max-width:100%; padding:0 2.4rem; background:#000; border:1px solid #ff0000; border-left:0; border-right:0;}
.calendar_wrap .m_tit:before, .calendar_wrap .m_tit:after {content:''; display:block; position:absolute; top:-1px; bottom:-1px; width:1.2rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.calendar_wrap .m_tit:before {left:-1.2rem; background-image:url('/images/common/event/mission/v4/ojb_ms_tit_l.png');}
.calendar_wrap .m_tit:after {right:-1.2rem; background-image:url('/images/common/event/mission/v4/ojb_ms_tit_r.png');}
.calendar_wrap .rate_info {top:5.8rem; right:5.8rem; position:absolute; font-size:0;}
.calendar_wrap .rate_info .rate {font-size:20px; font-weight:800; color:#fad900; font-family:'Roboto'; letter-spacing:0.1em; width:12rem; height:6rem; display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; background:#000000; border:1px solid #857300; border-radius:3px 0 0 3px; margin-right:-0.6rem;}
.calendar_wrap .rate_info .btn_all {display:inline-flex; vertical-align:middle;}

.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 .reward {display:inline-block; flex-grow: 1; padding:0 87px 0 109px; height:28.2rem; position:relative; max-width:none; margin:0; border:none; background:none; max-width:calc((100% - 4rem) / 2);}
.calendar_wrap .reward_wrap .reward:before, .calendar_wrap .reward_wrap .reward:after {content:''; position:absolute; top:0; bottom:0; background-repeat:no-repeat; background-position:0 0;}
.calendar_wrap .reward_wrap .reward:before {background-image:url('/images/common/event/mission/v4/reward_l.png'); width:109px; left:0;}
.calendar_wrap .reward_wrap .reward:after {background-image:url('/images/common/event/mission/v4/reward_r.png'); width:87px; right:0;}
.calendar_wrap .reward_wrap .reward .con {height:100%; border:none; border-top:0.1rem solid #fad900; border-bottom:0.1rem solid #fad900; position:relative; background:rgba(0, 0, 0, 0.8); z-index:1;}
.calendar_wrap .reward_wrap .reward .con:before {height:auto; width:auto; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(250, 217, 0, 0.01); z-index:-1;}
.calendar_wrap .reward_wrap .reward .con:after {display:none;}
.calendar_wrap .reward_wrap .reward .btn_receive02 {right:4.6rem;}
.calendar_wrap .reward_wrap .reward .go_view {right:3rem;}
.calendar_wrap .reward_wrap .reward .name {color:#fad900;}

.calendar_wrap .reward_wrap .btn_receive02 {background-image: url(/images/common/event/mission/v4/btn_receive03.png); color:#274300;}
.calendar_wrap .reward_wrap .btn_receive02 span:before {background-image: url(/images/common/event/mission/v4/icon_receive04.png);}
.calendar_wrap .reward_wrap .btn_receive02:hover {color:#ff0000;}
.calendar_wrap .reward_wrap .btn_receive02.off {color:#708900;}
.calendar_wrap .reward_wrap .btn_receive02.end {background-image: url(/images/common/event/mission/v4/btn_receive_end02.png); color:#d1ff00;}
.calendar_wrap .reward_wrap .btn_receive02.end span:before {background-image: url(/images/common/event/mission/v4/icon_received02.png);}

.calendar_wrap .reward_wrap .reward .tit {background: url(/images/common/event/mission/v4/bg_reward_t02.png) center 0 no-repeat; border-color:#fad900; color:#fad900;}
.calendar_wrap .reward_wrap .reward .tit:before {background-image: url(/images/common/event/mission/v4/bg_reward_l02.jpg);}
.calendar_wrap .reward_wrap .reward .tit:after {background-image: url(/images/common/event/mission/v4/bg_reward_r02.jpg);}

/* 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 {right:0;}	
.list_wrap .btn_prev {left:-7.2rem;}
.list_wrap .btn_next {right:-7.2rem;}
.btn_history {bottom:2rem; right:2rem;}
}


@media screen and (max-width: 1920px) {
.list_wrap .btn_arr {top:36%;}
.list_wrap .btn_prev {left:0;}
.list_wrap .btn_next {right:0;}	
}
	
@media screen and (max-width: 1800px) {
.cha01 {left:-7%;}
.cha02 {right:-8%;}	
	
.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;}
.calendar_wrap .calendar .con {left:2rem;}
}
	
@media screen and (max-width: 1500px) {
.cha01 {width:50%;}
.cha02 {width:80%;}	
	
.mission_wrap .list {margin-left:-3rem;}	
.mission_wrap .list li {padding-left:3rem; margin-bottom:3rem;}
.mission_wrap .list .box .bg_text {font-size:100px;}
.mission_wrap .list .box .bg_text font {font-size:76px;}

header .util {width:730px; height:81px; background-size:100% auto;}
header .util a {width:151px; height:47px; font-size:14px;}
header .util .user_info {width: calc(100% - 320px);}
header .util .btn_history span {font-size:14px;}

.calendar_wrap .calendar .m_tit {margin-bottom:4rem;}
.calendar_wrap .rate_info {position:relative; top:auto; right:auto;}
.calendar_wrap .reward_wrap {display:block;}
.calendar_wrap .reward_wrap .reward {max-width:790px; margin:5.4rem auto; display:block;}
.calendar_wrap .calendar .con .count {letter-spacing:0.1em;}

}	

@media screen and (max-width: 1360px) {
header .util {background:none; justify-content:center;}
header .util .btn_history {display:none;}
header .user_info {display:none;}
.title_wrap .user_info {display:flex; max-width:667px; margin:2.5rem auto 0; flex-wrap:wrap; width:100%;}
.btn_history {display:flex;}

header .util {height:96px;}
header .util .btn_login {width: 180px; height: 56px; font-size:16px;}

.mission_wrap .top .m_tit {position:relative; top:auto; left:auto; transform:none; padding:0; border:none; font-size:56px; margin-right:2rem; color:#ff0000;}
.mission_wrap .top .m_tit:before {display:none;}
.mission_wrap .list li {width:50%;}
.mission_wrap .top .count_wrap {right:auto; top:auto; left:50%; transform:translate(-50% , 0); margin-top:2.1rem;}
.mission_wrap .top .btn_day {right:auto; top:auto; left:50%; transform:translate(-50% , 0); margin-top:7.7rem;}
.mission_wrap .list_wrap {padding-top:23rem;}

.calendar_wrap .calendar ul > li {width: calc(100% / 6);}
.calendar_wrap .calendar .con .count {font-size:30px;}
}
	
@media screen and (max-width: 1280px) {
.cha01 {display:none;}
.cha02 {right:0; width:auto;}
	
header .user_info {display:none;}
.section01 {padding: 45rem 3rem 17rem;}
.title_wrap .date {margin-top:1.5rem;}
}	

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

@media screen and (max-width: 1023px) {
header {padding-top:3rem; text-align:center;}
header .util .btn_login {width:54px; height:54px; background:url('/images/common/event/mission/v4/btn_log.png') 0 0 no-repeat; background-size:100% auto; font-size:0; color:transparent;}
header .util .btn_login:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-repeat:no-repeat; background-position:center center; background-image:url('/images/common/event/mission/v4/btn_log_img.png');}
header .util .btn_login:hover {background-position:0 0;}
header .util {width:auto; height:auto; top:1.2rem; right:1.2rem; display:inline-flex; transform:none; left:auto; padding:0;}

.cha02 {right:-11%; width: 170%;}

.section01 {padding:64% 3rem 5rem;}

.total_reward {padding:2.7rem 0;}
.total_reward .con {border:none;}
.total_reward .con:before, .total_reward .con:after {background:none;}

.calendar_wrap .m_tit {padding:0; min-width:0; height:auto; border:none; background:none;}
.calendar_wrap .m_tit:before, .calendar_wrap .m_tit:after {display:none;}

}	

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

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

.mobile {display:block;}

header .bi img {width:30rem;}
header .util .btn_login {width:40px; height:40px;}
header .util .btn_login:before {background-size:14px auto;}

.btn {font-size:2.5rem;}
.btn_round {background-size:100% auto;}
.btn_round span {font-size:3.5rem;}
.btn_round.btn_start:before, .btn_round.btn_start:after {background-size:100% auto;}

.btn_receive {font-size:2.9rem; width:170px; height:104px;}
.btn_receive02 {font-size:2.5rem; width:100px; height:57px; background-size:100% auto;}
.btn_receive02:hover {background-position:0 -57px;}
.btn_receive02.off {background-position:0 -114px;}

.btn_modify {font-size:2.3rem; height:30px;}
.btn_clear {font-size:2.5rem; width:168px; height:48px; padding-bottom: 3px;}
.btn_clear .cash {font-size:2.2rem; margin-top: 0;}

.btn_day {width:136px; height:45px;}
.btn_history {width:14rem; height:14rem;}
.btn_history:before {width:14.3rem; height:14.3rem; margin-top: -7.15rem; margin-left: -7.15rem;}
.btn_history span {font-size:2.8rem;}

.title_wrap .user_info {display:flex; height:40px;}
.user_info:before {background-size:12.8rem auto, 0.7rem auto, 12.8rem auto, 0.7rem auto;}
.user_info .user {font-size:2.7rem; word-break: break-all;}
.user_info .user:before {width:16px; height:15px; background-size:100% auto;}
.user_info .cash {font-size:2.3rem;}


.pop_up .pop_layout {width:auto; left:2.4rem; right:2.4rem; transform: translate(0, -50%);}
.pop_up .pop_layout:before {background-size:6rem auto, 6rem auto, 12rem auto;}
.pop_up .pop_con h2 {font-size:3.1rem; letter-spacing:0.1em;}
.pop_up .pop_con .txt {font-size:2.9rem;}
.pop_up .pop_con .y_txt {font-size:3.9rem;}
.pop_up .btn span {font-size:2.3rem;}
.pop_up .pop_con .day {font-size:3.9rem;}
.pop_up .pop_con .txt:before {background-size:6.7rem auto, 6.7rem auto, 8.1rem auto, 8.1rem auto;}
.pop_up .pop_con .reward .name {font-size:2.3rem;}
.pop_up .pop_con .reward:after {background-size:2.1rem auto, 8.1rem auto;}
.pop_up .pop_con .cash {font-size:2.9rem;}
.pop_up .btns {margin-left:0;}
.pop_up .btns button {width:192px; height:48px; margin:2.4rem auto; display:flex;}
.pop_up .pop_con .cash span:after {width:18px; height:18px;}
.pop_up .pop_con .box:before {background-size:1.7rem auto;}

.pop_clear .btns button .cash:after {width:18px; height:18px;}
.pop_mission .btns button {width:112px; font-size:2.5rem; margin:0 1.2rem; display:inline-flex;}

.pop_all #pageinfo {font-size:2.5rem;}
.pop_all .img_list .slick-next {right:-5.6rem;}
.pop_all .img_list .slick-prev {left:-5.6rem;}

.pop_history .list li > div {font-size:2.1rem; height:6rem;}
.pop_history .list li.top > div {font-size:2.9rem;}
.pop_history .list li > div.date span {margin-top:0;}
.pop_history .list li.none {font-size:2.7rem;}
.pop_history .pop_con .list:before {top:29px;}
.pop_history .list li > div.mission span, .pop_history .list li > div.item span {line-height:1.1;}

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

.title_wrap .sub_tit {font-size:3.9rem; background-size:auto 50px; padding: 0 5px 0 9px;}
.title_wrap .sub_tit span {min-height:50px; min-width:0;} 
.title_wrap .date {font-size:3.1rem;}

.mission_wrap:before {background-size:22.5rem auto;}
.mission_wrap .top .count_wrap {font-size:4.9rem; margin-top:6rem;}
.mission_wrap .top .remain .tit {font-size:2.9rem;}
.mission_wrap .top .remain .time {font-size:3rem;}
.mission_wrap .top .current .tit {font-size:4.9rem; background-size: 100% auto;}
.mission_wrap .top .m_tit {font-size:5.9rem;}
.mission_wrap .top .btn_day {margin-top:11.7rem;}
.mission_wrap .list_wrap {padding-top:26rem;}
.mission_wrap .list .m_tit {font-size:3.9rem; letter-spacing: 0.15em;}
.mission_wrap .list .m_tit span {height:24px;}
.mission_wrap .list .reward {height:auto !important;}
.mission_wrap .list .reward .name {font-size:2.7rem;}
.mission_wrap .list .reward:before {background-size:1.4rem auto, 4rem auto, 1.4rem auto, 1.7rem auto, 4rem auto;}
.mission_wrap .list .reward:after {background-size:3.1rem auto, 2.1rem auto;}
.mission_wrap .list .box {background-size:40.7rem auto, 9.6rem auto, 5.6rem auto, 5.7rem auto; height:auto !important; padding-bottom:6rem;}
.mission_wrap .list .box:before {background-size:2.1rem auto;}
.mission_wrap .list .box:after {background-size:8.6rem auto , 2rem auto; bottom:-2px;}
.mission_wrap .list .box .desc .line:before {background-size:2.8rem auto;}
.mission_wrap .list .box .desc .line:after {background-size:2.7rem auto;}
.mission_wrap .list .box .desc {padding:20px 4px;}
.mission_wrap .list .box .desc:before {background-size:6.7rem auto, 8.1rem auto;}
.mission_wrap .list .box .desc:after { background-size:2.1rem auto, 8rem auto;}
.mission_wrap .list .box .desc .mission .line {padding-bottom:5.6rem;}
.mission_wrap .list .box .desc .mission .line:after, .mission_wrap .list .box .desc .mission .line:before, .mission_wrap .list .box .desc .mission:after, .mission_wrap .list .box .desc .mission:before {background-size:100% auto;}
.mission_wrap .list .box .desc .line, .mission_wrap .list .box .desc .mission .line {background-size:1.1rem auto;}
.mission_wrap .list .box .rd_txt {font-size:2.7rem;}
.mission_wrap .list .box .bg_text {font-size:15rem;}
.mission_wrap .list .box .bg_text font {font-size:15rem;}
.mission_wrap .list .box .rd_txt:before {background-size:100% auto; top:8px;}
.mission_wrap .list .mission .count {font-size:3.4rem; background-size:1.1rem auto; height:30px;}
.mission_wrap .list .box .desc .line.no_bg {background-size:1.1rem auto;}

.mission_wrap .list .box .complete img {max-width:7.4rem;}
.mission_wrap .list .box .complete span {font-size:4.9rem;}
.mission_wrap .list .box .state {max-width:7.4rem;}

.mission_wrap .list .reward .img .no_item img {max-width:7.6rem;}
.mission_wrap .list .reward .img .lock_item img {max-width:7.6rem;}

.mission_wrap .list .mission .txt {font-size:2.9rem;}

.total_reward .reward:before {background-size:8.8rem auto, 6.7rem auto, 5.9rem auto, 5.8rem auto;}
.total_reward .reward .tit {font-size:2.5rem; min-width:0; background-size:28rem auto; height:30px;}
.total_reward .reward .tit:before, .total_reward .reward .tit:after {background-size:auto 30px; }
.total_reward .reward .tit:after {right:-5px;}
.total_reward .reward .name {padding:0 8.6rem; font-size:2.3rem;}
.total_reward .reward .go_view {right:2rem;}
.total_reward .btn_receive02 {right:2.4rem;}
.total_reward .btn_receive02:before, .total_reward .btn_receive02:after {background-size:100% auto; left:auto; right:1rem;}
.total_reward .reward .img:before {left:2rem;}

.calendar_wrap .calendar:before {background-size:23.8rem auto, 7.7rem auto, 5.8rem auto, 15.3rem auto;}
.calendar_wrap .m_tit {font-size:5.9rem;}
.calendar_wrap .rate_info .rate {font-size:2.9rem;}
.calendar_wrap .reward_wrap .reward {padding:0 8.7rem 0 10.9rem;}
.calendar_wrap .reward_wrap .reward .tit {background-size:28rem auto; min-width: 32rem;}
.calendar_wrap .reward_wrap .reward .name {padding:0;}
.calendar_wrap .reward_wrap .reward:before {width:10.9rem; background-size:100% auto;}
.calendar_wrap .reward_wrap .reward:after {width:8.7rem; background-size:100% auto;}
.calendar_wrap .reward_wrap .reward .btn_receive02 {right:3.6rem;}
.calendar_wrap .total_reward .reward .img:before {left:-6rem;}

.calendar_wrap .calendar .con .day {font-size:2.7rem;}
.calendar_wrap .calendar .con .day:before {background-size:0.8rem auto;}
.calendar_wrap .calendar .btn_day {font-size:2.1rem;}
.calendar_wrap .calendar .bin .con .day {font-size:4.1rem;}
.calendar_wrap .calendar .con .count {font-size:4.9rem;}
.calendar_wrap .calendar .con .img {max-width:6.5rem;}
.calendar_wrap .calendar .today .t_tit {font-size:2rem;}
.calendar_wrap .calendar .con .complete span {font-size:2rem;}



}

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

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

@media screen and (max-width: 365px) {
.calendar_wrap .calendar ul > li {width:50%;}
.pop_history .list li > div.date {width:30%;} 
.pop_history .list li > div.mission {width:44%;}
}

@keyframes twinkle {
	from {
		background-position: 0 0;
	} 
	to {
		background-position: 0 -333rem;
		}
	}

@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 lsi {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(0);
    transform: skewX(0);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

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

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

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

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