@charset "utf-8";
@import url("https://use.typekit.net/sit0sqw.css");
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

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

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

/* root */
:root {
--che: 'cheddar-gothic-rough', sans-serif;
--imp: 'impact', sans-serif;
--rbt: 'roboto', sans-serif;
--ari: 'arial', sans-serif;
}

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

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; text-align: center; font-family: 'cheddar-gothic-rough', sans-serif; background:#000;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 400; font-family: 'cheddar-gothic-rough';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'cheddar-gothic-rough'; 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: 'cheddar-gothic-rough'; background-color:rgba(255, 255, 255, 0);}

.mobile {display:none;}
.cha {position:absolute;}
.cha01 {animation: cha-float01 4s 0.5s ease-in-out infinite;}
.cha02 {animation: cha-float01 4s ease-in-out infinite;}
.cha03 {animation: cha-float01 4s 1s ease-in-out infinite;}
.cha04 {width:38%; max-width:978px; left:-5%; bottom:-9%;}
.bird {position:absolute;}
.bird01 {width:19%; max-width:479px; top:-5%; left:-5%; animation:cha-float01 4s ease-in-out infinite;}
.bird02 {width:19%; max-width:477px; bottom:14%; right:-1%; animation:cha-float02 5s ease-in-out infinite;}
.animated .bird01 {animation: slide-bl 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both , cha-float01 4s 0.2s ease-in-out infinite;}
.animated .bird02 {animation: slide-br 0.2s 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both , cha-float02 5s 0.4s ease-in-out infinite;}

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

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

.btn {border:1px solid #ffdd33; box-shadow:0 0.4rem 1.6rem rgba(0, 0, 0, 0.2); text-shadow:0 0 1px rgba(255, 255, 255, 0.3); overflow:hidden; transition:all ease-in-out 0.2s; border-radius:1.2rem; transform:skew(-8deg); font-size:23px; text-transform:uppercase; font-style:italic; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; color:#000;}
.btn:before {transition:all ease-in-out 0.2s; background-position:center center; background-repeat:no-repeat; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:100%; height:100%; opacity:0.5;}
.btn span {transform:skew(8deg);}
.btn font {transition:all ease-in-out 0.2s;}
.btn:hover {color:#fff; background:#000 !important;}
.btn:hover:before {opacity:0.4;}

.btn_receive {font-size:30px; color:#660000; font-style:italic; letter-spacing:0.02em; line-height:1.06; border-color:#ffdd33; background:#ffbb44; border-radius:2.4rem;}
.btn_receive font {color:#000; display:block;}
.btn_receive:before {background-image:url('/images/common/event/mission/indep/bg_grunge_y.png');}
.btn_receive:hover {background:#664411 !important; color:#ffffff;}
.btn_receive:hover font {color:#ffdd66;}
.btn_receive:hover:before {opacity:1; background-image:url('/images/common/event/mission/indep/bg_grunge_bl.png');}

.btn_receive.off {cursor:default; border:none; background:#aa0000; color:#fff; box-shadow:none;}
.btn_receive.off:before {background-image:url('/images/common/event/mission/indep/bg_grunge_g.png');}
.btn_receive.off font {color:#ffdd66;}
.btn_receive.off:hover {background:#aa0000 !important;}
.btn_receive.off:hover:before {opacity:0.5;}

.btn_receive.end {cursor:default; border:none; background:rgba(238, 153, 153, 0.7) url('/images/common/event/mission/indep/ptn_grunge.png') 0 0 repeat; color:#660000; box-shadow:none;}
.btn_receive.end:before {display:none;}
.btn_receive.end font {color:#000;}
.btn_receive.end:hover {background:rgba(238, 153, 153, 0.7) url('/images/common/event/mission/indep/ptn_grunge.png') 0 0 repeat !important;}

.btn_round {transition:none; position:relative; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative; border-radius:50%; width:31.2rem; height:31.2rem; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-size:100% auto; box-shadow:0 2rem 4rem rgba(0, 0, 0, 0.3);}
.btn_round span {transition:all ease-in-out 0.2s; text-transform:uppercase; font-size:38px; letter-spacing:0.01em; color:#880000; font-style:italic; line-height:1.07; position: relative;}
.btn_round span font {transition:all ease-in-out 0.2s; color:#000000; display:block;}
.btn_round:hover {background-position:0 100%; box-shadow:none;}
.btn_round:hover span {color:#ffdd66;}
.btn_round:hover span font {color:#fff;}

.btn_start {background-image:url('/images/common/event/mission/indep/btn_start.png');}

.btn_round.btn_receive {background-image:url('/images/common/event/mission/indep/btn_receive.png');}
.btn_round.btn_receive span {color:#002277;}
.btn_round.btn_receive span font {color:#000000;}
.btn_round.btn_receive:hover {background-image:url('/images/common/event/mission/indep/btn_receive.png') !important; background-position:0 100% !important;}
.btn_round.btn_receive:hover span {color:#aaeeff;}
.btn_round.btn_receive:hover span font {color:#fff;}

.btn_login {border-color:#bbddff; background:#aaddff;}
.btn_login:before {background-image:url('/images/common/event/mission/indep/texture_b.png');}

.btn_history {display:none;}

/* header */
header {text-align:left; position:absolute; top:0; left:0; right:0; z-index:20; padding:3.6rem 58px; background:url('/images/common/event/mission/indep/bg_grunge_l.png') 0 center no-repeat, url('/images/common/event/mission/indep/bg_grunge_r.png') right center no-repeat, url('/images/common/event/mission/indep/ptn_noise.png') 0 0 repeat, rgba(0, 0, 0, 0.5);}
header .bi img {max-width:160px;}
header .util {position:absolute; top:0; left:50%; transform:translate(-50%, 0);}
.util {position:relative; width:100%; max-width:805px; font-size:0; height:9.6rem; display:flex; align-items:center; justify-content:space-between;}
.user_info {word-break:break-all; text-align:center; padding:0 2.4rem; flex:1; min-width:0; font-style:italic; font-size:30px; letter-spacing:0.02em; display: flex; align-items: center; justify-content:center;}
.user_info span {vertical-align:middle; line-height:1; display:inline-block; max-width:50%; text-shadow:0 0 1px rgba(0, 0, 0 ,0.5);}
.user_info .user {color:#fff; padding:0 2px; overflow:hidden; text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.user_info .cash {color:#ffdd66; text-transform:uppercase; margin-left:2.4rem; position:relative;}
.user_info .cash:before {content:'/'; top:50%; transform:translate(0 , -45%); left:-2.2rem; position:absolute; color:#fff;}
.util a {width:192px; height:48px;}

.util .btn_login {position:relative;}
.util .btn_history {position:relative; right:auto; bottom:auto; display:inline-flex; border-color:#ffbbbb; background:#ffcccc;}
.util .btn_history:before {background-image:url('/images/common/event/mission/indep/texture_p.png');}
.util .btn_history font {color:#660000;}
.util .btn_history:hover font {color:#ffbbbb;}
.util .btn_history br {display:none;}

.bg_line {transform:skew(-8deg); border-radius:1.6rem; position:relative; border:2px solid #000000; box-shadow:inset 0 0 0 2px #dd0000; background:#660000;}
.bg_line:before {transition:all ease-in-out 0.2s; background-image:url('/images/common/event/mission/indep/bg_grunge_r.png'); background-position:right center; background-size:auto 100%; background-repeat:no-repeat; content:''; display:block; position:absolute; top:0.2rem; bottom:0.2rem; left:0.2rem; right:0.2rem;}
.bg_line > div {transform:skew(8deg); font-style:italic;}

/* section01 */
.section01 {position:relative; height:100vh; max-height:1080px; background:url('/images/common/event/mission/indep/bg.jpg') center center no-repeat; animation: bg-move 40s linear infinite;}
.section01:after {content:''; display:block; position:absolute; left:0; width:400em; top:44%; height:92.6%; background:url('/images/common/event/mission/indep/effect_smog.png') 0 0 repeat-x; background-size:auto 100%; animation: cloudLoop 100s linear infinite;}
.section01 .cha_wrap {position:absolute; bottom:-16.6%; left:50%; transform:translate(-50% , 0); height:102%; max-height:1092px;}
.section01 .cha_wrap img {max-width:none; height:100%;}
.section01 .cha_wrap .cha {left:0; top:0;}
.section01 .cha_wrap .cha02 {position:relative; z-index:1;}
.section01 .inner {height:100%;}
.section01 .title_wrap {animation-duration:0.6s !important; height:100%; z-index:1; position:relative; padding:9.6rem 0; display:inline-flex; align-items:center; justify-content:flex-end; flex-direction:column; width:fit-content;}
.section01 .title_wrap .tit {position:relative; z-index:1;}
.section01 .title_wrap .tit span {display:block; margin: -2px auto;}
.section01 .title_wrap .date {position:relative; font-size:42px; color:#aaccee; font-style:italic; text-transform:uppercase; width:100%; margin-bottom:1rem; text-align:right;}
.section01 .title_wrap .date div {transform:skew(-8deg); display:inline-flex; align-items:center; justify-content:center; text-align:center; min-width:31.6rem; height:60px; padding:0 2rem; border-radius:1.6rem; background:url('/images/common/event/mission/indep/bg_grunge_b.png') right center no-repeat, rgba(0, 0, 0, 0.8);}
.section01 .title_wrap .date span {transform:skew(8deg);}
.section01 .title_wrap .date font {color:#ffdd66;}
.section01 .title_wrap .user_info {display:none;}

/* mission_wrap */
.mission_wrap {position:relative; background:url('/images/common/event/mission/indep/ptn_noise.png') 0 0 repeat , url('/images/common/event/mission/indep/bg_ms_t.png') center 0 no-repeat , #770000; background-size:auto, 100% auto; z-index:2;}
.mission_wrap .top {z-index:1;}
.mission_wrap:after {content:''; display:block; position:absolute; bottom:-2.2rem; z-index:2; left:50%; margin-left:-42.2rem; width:84.4rem; height:24rem; background:url('/images/common/event/mission/indep/img_dodium.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap:before {content:''; display:block; position:absolute; left:0; right:0; z-index:2; background:#ffbb44; height:0.4rem; bottom:0.4rem;}

.mission_wrap .top {position:relative; margin-bottom:9.6rem;}
.mission_wrap .top .con {position:relative; background:#990000 url('/images/common/event/mission/indep/ptn_noise.png') 0 0 repeat;}
.mission_wrap .top .con:before, .mission_wrap .top .con:after {content:''; display:block; position:absolute; left:0; right:0; height:0.8rem; background:#ffbb44; border:1px solid #ff9977; border-left:0; border-right:0;}
.mission_wrap .top .con:before {top:0.8rem;}
.mission_wrap .top .con:after {bottom:0.8rem;}
.mission_wrap .top:before, .mission_wrap .top:after {content:''; display:block; position:absolute; background-position:0 0; background-repeat:no-repeat; background-size:100% auto; z-index:1;}
.mission_wrap .top:before {right:64%; width:93.6rem; height:29.4rem; background-image:url('/images/common/event/mission/indep/img_ribbon_l.png'); top:-42%;}
.mission_wrap .top:after {left:70%; width:76.6rem; height:50.8rem; background-image:url('/images/common/event/mission/indep/img_ribbon_r.png'); top:-78%;}

.animated.mission_wrap .top:before {animation:fil 0.5s linear;}
.animated.mission_wrap .top:after {animation:fir 0.5s linear;}

.top {position:relative;}
.top .inner {display:flex; align-items:center; justify-content:center; height:168px; position:relative; padding:1.2rem 0; z-index:2;}
.top .m_tit {display:flex; align-items:center; justify-content:center; position:relative; z-index:1;}
.top .m_tit .day {position:relative; top:3%; padding:25% 21% 21%; width:21.6rem; height:26.4rem; display:flex; align-items:center; justify-content:center; position:relative; background:url('/images/common/event/mission/indep/bg_day.png') 0 0 no-repeat; background-size:100% auto;}
.top .m_tit .day font {background:linear-gradient(to bottom, #fff, #ffbbbb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display:flex; align-items:center; justify-content:center; text-transform:uppercase; letter-spacing:0.06em; font-size:23px; font-style:italic; height:15%; left:0; right:0; top:17%; position:absolute;}
.top .m_tit .day span {font-size:74px; color:#ffdd66; font-style:italic;}
.top .sub {position:absolute; top:0; left:0; width:100%; height:100%;}
.top .remain {min-width:28.8rem; font-size:23px; color:#ccc; letter-spacing:0.04em; top:50%; margin-top:-36px; position:absolute; left:3rem; height:72px; padding:0 3.6rem;}
.top .remain > div {display:flex; justify-content:space-between; align-items:center; width:100%; height:100%;}
.top .remain .time {color:#ffdd66;}
.top .remain .tit {text-transform:uppercase;}
.top .etc {position:absolute; right:3rem; top:50%; margin-top:-36px; height:72px; padding:0 1.2rem;}
.top .etc > div {display:flex; align-items:center; justify-content:space-between; width:100%; height:100%;}
.top .etc .count_wrap {width:12.4rem; padding:0 3.6rem 0 2rem; display:flex; align-items:center; justify-content:center; font-size:23px; color:#cccccc; letter-spacing:0.04em;}
.top .etc .count_wrap font {color:#ffdd66;}
.top .etc .btn {border-radius:0.6rem; min-width:14.4rem; height:48px; background:#ffdd88;}
.top .etc .btn font {color:#660000;}
.top .etc .btn:before {background-image:url('/images/common/event/mission/indep/texture_y.png'); opacity:1;}
.top .etc .btn:hover:before {opacity:0.4;}
.top .etc .btn:hover font {color:#ffdd66;}
.mission_wrap .top .m_tit {display:grid; grid-template-columns:1fr auto 1fr;}
.mission_wrap .top .m_tit .txt:first-child {text-align:right;}

.mission_wrap .list_wrap {position:relative; padding-bottom:19.3rem; z-index:1;}
.mission_wrap .list_wrap .inner {position:relative;}
.mission_wrap .list_wrap .slick-list {width:100%;}
.list_wrap .btn_arr {transition:none; top:28%; font-size:0; color:transparent; position:absolute; z-index:2; width:7.2rem; height:14.4rem; background-color:rgba(0, 0, 0, 0); background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/indep/btn_arr.png');}
.list_wrap .btn_prev {left:-8rem;}
.list_wrap .btn_next {right:-8rem; transform:rotate(180deg);}
.list_wrap .btn_arr.slick-disabled {opacity:0;}
.list_wrap .btn_arr:hover {background-position:0 100%;}

.mission_wrap .list {margin-left:-4.2rem; display:flex; flex-wrap:wrap;}
.mission_wrap .list li {width:calc(100% / 3); padding-left:4.2rem; margin-bottom:4.8rem;}
.mission_wrap .list li .con {height:100%; position:relative; background:url('/images/common/event/mission/indep/bg_ms.jpg') center center no-repeat; background-size:cover; border:0.6rem solid #cc0000; border-radius:3rem; padding:3rem 4.2rem 0;}
.mission_wrap .list .box {z-index:2; position:relative; height:100%;}
.mission_wrap .list .box .m_tit {font-size:32px; font-style:italic; letter-spacing:0.01em; color:#aa0000; display:flex; align-items:center; justify-content:flex-start; text-transform:uppercase; width:100%; height:48px; gap:0.7rem; margin-bottom:2.4rem;}
.mission_wrap .list .box .m_tit .num {color:#000000;}
.mission_wrap .list .box .desc {min-height:31.2rem; position:relative; z-index:1; display:flex; align-items: center; justify-content: flex-start; flex-direction:column; height:100%;}
.mission_wrap .list .box .desc img {display:inline;}
.mission_wrap .list .box .bg {display: flex; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%;}
.mission_wrap .list .box .btn_area {position:relative;}

.mission_wrap .list .mission {width:100%; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:24rem; background:#dddddd url('/images/common/event/mission/indep/bg_dot.png') right bottom no-repeat; border-radius:2rem 2rem 0 0; padding:2.4rem;}
.mission_wrap .list .mission .txt {font-family:var(--imp); font-size:30px; letter-spacing:0.005em; line-height:1.2;}
.mission_wrap .list .mission .txt span {background: linear-gradient(to right, #990000, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style:italic; display:block; padding:0 1rem;}
.mission_wrap .list .mission .count {margin-top:1.6rem; font-size:46px; font-family:var(--imp); color:#777777; font-style:italic; line-height:1;}
.mission_wrap .list .mission .count font {color:#cc0000;}
.mission_wrap .list .btn_modify {overflow:hidden; padding-right:0.6rem; font-style:italic; position:absolute; top:0; right:0; width:120px; height:48px; border-radius:1rem; font-size:18.5px; color:#ffffff; letter-spacing:0.04em; text-transform:uppercase; background-color:#660000;}
.mission_wrap .list .btn_modify:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-image:url('/images/common/event/mission/indep/texture_r.png'); background-position:center center; background-repeat:no-repeat;}
.mission_wrap .list .btn_modify:before {position:relative; z-index:1; content:''; display:inline-block; width:18px; height:16px; background:url('/images/common/event/mission/indep/icon_modify.png') 0 0 no-repeat; background-size:100% auto; margin-right:0.6rem;}
.mission_wrap .list .btn_modify span {position:relative; z-index:1; transition:all ease-in-out 0.2s;}
.mission_wrap .list .btn_modify:hover {background-color:#000000; color:#ffdd66;}
.mission_wrap .list .btn_modify:hover:after {opacity:0.7;}
.mission_wrap .list .btn_clear {transition:all ease-in-out 0.2s; font-size:26.5px; text-transform:uppercase; font-style:italic; letter-spacing:0.04em; color:#fff; gap:0.7rem; position:relative; display:flex; align-items:center; justify-content:center; height:72px; border-radius:0 0 2rem 2rem; width:100%; background:url('/images/common/event/mission/indep/btn_grung_b.jpg') center center no-repeat; background-size:cover;}
.mission_wrap .list .btn_clear:before {transition:all ease-in-out 0.2s; opacity:0; border-radius:0 0 2rem 2rem; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/indep/btn_grung_b02.jpg') center center no-repeat; background-size:cover;}
.mission_wrap .list .btn_clear span {position:relative; z-index:1;}
.mission_wrap .list .btn_clear font {color:#ffdd66;}
.mission_wrap .list .btn_clear:hover {color:#ffdd66;}
.mission_wrap .list .btn_clear:hover font {color:#bbddff;}
.mission_wrap .list .btn_clear:hover:before {opacity:1;}

.mission_wrap .list .reward {position:relative; z-index:1; margin-top:3rem; display:flex; align-items: center; justify-content: flex-start; flex-direction:column;}
.mission_wrap .list .reward .reward_inner {width:100%; height:100%;}
.mission_wrap .list .reward .tit {position:relative; text-transform:uppercase; font-size:32px; color:#aa0000; letter-spacing:0.01em; display:flex; align-items:center; font-style:italic; margin-bottom:-1.5rem; z-index:2;}
.mission_wrap .list .reward .img {z-index:1; height:18rem; width:100%; display:flex; align-items:center; justify-content:center; position:relative;}
.mission_wrap .list .reward .img > img {max-width:100%; max-height:100%;}
.mission_wrap .list .reward .img > div {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.mission_wrap .list .reward .lock_item {position:relative;}
.mission_wrap .list .reward .lock_item:before, .mission_wrap .list .reward .lock_item:after {content:''; display:block; position:absolute;}
.mission_wrap .list .reward .lock_item:before {width:40px; height:40px; background:url('/images/common/event/mission/indep/icon_ques.png') 0 0 no-repeat; left:50%; margin-left:-20px; top:-14px; background-size:100% auto;}
.mission_wrap .list .reward .lock_item:after {top:-60px; width:100px; height:100px; background:url('/images/common/event/mission/indep/img_light.png') 0 0 no-repeat; left:50%; margin-left:-50px; animation: fade 3s linear infinite; background-size:100% auto;}
.mission_wrap .list .reward .name {word-break: break-word; z-index:1; height:64px; width:100%; display:flex; align-items:flex-start; padding-bottom:2rem; justify-content:center; color:#000000; font-size:23px; letter-spacing:0.02em; font-style:italic;}
.mission_wrap .list .reward .name span {padding:0 48px; position:relative; display:inline-block;}
.mission_wrap .list .lock .reward .img > div {transform:translate(-50%, -40%);}
.mission_wrap .list .lock .desc .img img {max-width:31.2rem;}
.mission_wrap .list .complete .desc .img img {max-width:31.2rem;}

.go_view {z-index:1; width:36px; height:36px; border-radius:50%; font-size:0; color:transparent; background-image:url('/images/common/event/mission/indep/icon_more.png'); background-position:0 0; background-size:100% auto; background-repeat:no-repeat; position:absolute; top:50%; right:0; margin-top:-18px;}
.go_view:hover {background-position:0 100%;}

.total_reward {position:relative; z-index:1; background:url('/images/common/event/mission/indep/bg_eagle.png') right -2% top 50% no-repeat, url('/images/common/event/mission/indep/ptn_rd.jpg') center center no-repeat , #990000; background-size:auto 100% , cover !important; border:0.4rem solid #ffbb44; border-radius:3rem; display:flex; align-items: center; justify-content: flex-start; flex-direction:column;}
.total_reward:before {z-index:-1; content:''; display:block; position:absolute; top:2rem; bottom:2rem; left:2rem; right:2rem; background:url('/images/common/event/mission/indep/obj_star.png') 0 0 no-repeat, url('/images/common/event/mission/indep/obj_star.png') right 0 no-repeat, url('/images/common/event/mission/indep/obj_star.png') 0 bottom no-repeat, url('/images/common/event/mission/indep/obj_star.png') right bottom no-repeat; background-size:3.6rem auto;}
.total_reward .con {width:100%; height:100%; border-radius:3rem; display: flex; align-items: center; justify-content: space-between; padding:2.4rem 6.8rem;}
.total_reward .tit {line-height:1.37; text-align:left; flex-shrink:0; font-size:32px; color:#fff; letter-spacing:0.02em; font-style:italic; text-transform:uppercase; text-shadow:0 1px 0 rgba(0, 0, 0, 0.2);}
.total_reward .tit span {color:#ffdd66;}
.total_reward .reward .img {position:relative; z-index:1; height:18rem; max-width:420px; margin:0 auto; display:flex; align-items:center; justify-content:center;}
.total_reward .reward .img > img {max-width:100%; max-height:100%;}
.total_reward .reward .name {font-style:italic; text-shadow:0 0 1px rgba(0, 0, 0, 0.2); font-size:23px; color:#ffffff; letter-spacing:0.04em; position:relative; z-index:1; margin-top:1rem; padding-bottom:1.2rem;}
.total_reward .reward .name span {position:relative; display:inline-block; padding:0 48px;}
.total_reward .reward {flex:1; min-width:0; padding: 0 2.4rem;}
.total_reward .btn_receive {line-height:1.06; flex-shrink:0; width:24rem; height:12rem;}
.total_reward .go_view {background-image:url('/images/common/event/mission/indep/icon_more02.png');}

/* calendar_wrap */
.calendar_wrap {position:relative; padding:18rem 0 14.4rem; background:url(/images/common/event/mission/indep/ptn_figure.jpg) 0 0 repeat; z-index:2; border-top:0.4rem solid #dddddd;}
.calendar_wrap:before {content:''; display:block; position:absolute; left:0; right:0; top:0; height:12rem; background:url('/images/common/event/mission/indep/obj_cal.png') center 0 repeat-x; background-size:auto 12rem; width: 400em; animation: cloudLoop 300s linear infinite;}
.calendar_wrap .top {margin-bottom:4rem;}
.calendar_wrap .top .inner {height:auto; min-height:72px; padding:0;}
.calendar_wrap .top .m_tit {font-size:76px; font-family:var(--imp); text-transform:uppercase; letter-spacing:0.01em;}
.calendar_wrap .top .m_tit span {background: linear-gradient(to right, #990000, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; padding:0 1rem; line-height:1; filter: drop-shadow(0 0 2px rgba(0, 0, 0,0.4));}
.calendar_wrap .top .etc {border:none; box-shadow:none; background:#113366;}
.calendar_wrap .top .etc .count_wrap {color:#aaccff;}
.calendar_wrap .top .etc .btn font {color:#002255;}
.calendar_wrap .top .etc .btn:hover font {color:#ffdd66;}
.calendar_wrap .calendar {padding:6rem 6rem 1.8rem; background:url('/images/common/event/mission/indep/bg_cal_lt.png') 0 0 no-repeat, url('/images/common/event/mission/indep/bg_cal_rb.png') right bottom no-repeat, #770000; position:relative; border-radius:3rem; background-size:85.3rem auto, 108rem auto;}
.calendar_wrap .calendar ul {z-index:1; position:relative; margin-left:-3rem; text-align:left;}
.calendar_wrap .calendar ul > li {display: inline-block; vertical-align:top; width:calc(100% / 7); position:relative; padding-left:3rem; text-align:center; margin-bottom:3rem;}
.calendar_wrap .calendar .con {z-index:1; position:relative; width:100%; border-radius:2.4rem; border:0.4rem solid #dd0000; box-shadow:inset 0 0 0 0.4rem #660000; background:url('/images/common/event/mission/indep/bg_cal.jpg') center center no-repeat; background-size:cover;}
.calendar_wrap .calendar .con:after {content:''; padding-bottom:100%; display:block;}
.calendar_wrap .calendar .con_inner {position:absolute; top:0; bottom:0; left:0; right:0; flex-direction:column; display:flex; align-items:center; justify-content:flex-end; padding:8% 10%;}
.calendar_wrap .calendar .num {padding-top:2%; position:absolute; top:1%; width:14%; height:16%; display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .day {position:absolute; top:8%; left:10%; right:10%; text-align:left; text-transform:uppercase; color:#ff6666; font-size:20px; font-style:italic; letter-spacing:0.02em; display:flex; align-items:center;}
.calendar_wrap .calendar .con .day span {color:#ffbb44; margin-left:0.6rem;}
.calendar_wrap .calendar .con .complete {margin:0 -12% -7%;}
.calendar_wrap .calendar .con .fail {width:55%; max-width:84px; margin:0 auto 9.1%;}
.calendar_wrap .calendar .count {font-size:46px; color:#ff6666; letter-spacing:0.1em; font-family:var(--imp); font-style:italic; margin-left:-0.1em;}
.calendar_wrap .calendar .count font {color:#ffbb44;}
.calendar_wrap .btn_day02 {width:100%; max-width:144px; height:36px; border-radius:0.6rem; font-size:20px; margin-left:auto; margin-right:auto; padding-top: 0; color:#660000; border-color:#ffdd33; background:#ffbb44;}
.calendar_wrap .btn_day02 span {transform:none; font-style: normal; font-size: 20.5px;}
.calendar_wrap .btn_day02 font {color:#000;}
.calendar_wrap .btn_day02:before {background-image:url('/images/common/event/mission/indep/bg_grunge_y.png');}
.calendar_wrap .btn_day02:hover {background:#664411 !important; color:#ffffff;}
.calendar_wrap .btn_day02:hover font {color:#ffdd66;}

.calendar_wrap .con_inner .today {position:absolute; width:72px; top:8%; right:-8px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:0.6rem; text-transform:uppercase; color:#000000; font-style:italic; font-size:19.5px; letter-spacing:0.03em; background:#ffbb44;}
.calendar_wrap .calendar .ok .day {color:#333333;}
.calendar_wrap .calendar .ok .day span {color:#224488;}
.calendar_wrap .calendar .ok .con {background:url('/images/common/event/mission/indep/bg_cal_ok.jpg') center center no-repeat; background-size:cover; border:none; box-shadow:none;}
.calendar_wrap .calendar .ok .con_inner {border:none;}
.calendar_wrap .con_inner .ok .today {right:-4px;}
.calendar_wrap .calendar .bin .con {border:none; box-shadow:none; background:#550000 url('/images/common/event/mission/indep/ptn_noise.png') 0 0 repeat;}
.calendar_wrap .calendar .bin .con_inner {border-color:rgba(255, 255, 255, 0); justify-content:center;}
.calendar_wrap .calendar .bin .day {position:static; display:block; padding:0; width:auto; height:auto; font-size:30px; color:#aa0000; letter-spacing:0.02em; font-style:italic;}
.calendar_wrap .calendar .bin .day span {margin-left:0; color:#aa0000;}
.calendar_wrap .calendar .ing .con_inner {justify-content:center; padding-top:12%;}

.calendar_wrap .reward_wrap {position:relative; margin-top:4.8rem; padding-bottom:0; padding-top:0; font-size:0; display:flex; align-items:stretch;}
.calendar_wrap .reward_wrap .con_wrap {position:relative; width:calc((100% - 4rem) / 2); margin:0; vertical-align: top; border:none;}
.calendar_wrap .reward_wrap .con_wrap:before {z-index:0;}
.calendar_wrap .reward_wrap .tit {position:absolute; top:7rem; left:7rem; line-height:1.12;}
.calendar_wrap .reward_wrap .tit span {display:block; color:#ff9999;}
.calendar_wrap .reward_wrap .con {display:block; padding:3.6rem 7.2rem 4.8rem; background-repeat:no-repeat; background-position:center center; background-size:cover; background-image:url('/images/common/event/mission/indep/bg_reward_r.jpg');}
.calendar_wrap .reward_wrap .btn_receive {width:100%; max-width:420px; height:72px; border-radius:2rem; margin-top:5px; transform:none; position:relative;}
.calendar_wrap .reward_wrap .btn_receive span {transform:none; position:relative;}
.calendar_wrap .reward_wrap .btn_receive font {display:inline;}

.calendar_wrap .reward_wrap .con_wrap.final {margin-left:4rem;}
.calendar_wrap .reward_wrap .con_wrap.final .con {background-image:url('/images/common/event/mission/indep/bg_reward_b.jpg');}
.calendar_wrap .reward_wrap .con_wrap.final .tit span {color:#99bbff;}
.calendar_wrap .reward_wrap .con_wrap.final .btn_receive {color:#002255;}
.calendar_wrap .reward_wrap .con_wrap.final .btn_receive:hover {color:#fff;}
.calendar_wrap .reward_wrap .con_wrap.final .btn_receive.off {background:#114488; color:#fff;}
.calendar_wrap .reward_wrap .con_wrap.final .btn_receive.off:hover {background:#114488 !important;}
.calendar_wrap .reward_wrap .con_wrap.final .btn_receive.end {color:#002255; background: rgba(153, 187, 238, 0.7) url(/images/common/event/mission/indep/ptn_grunge.png) 0 0 repeat;}
.calendar_wrap .reward_wrap .con_wrap.final .btn_receive.end:hover {color:#002255; background: rgba(153, 187, 238, 0.7) url(/images/common/event/mission/indep/ptn_grunge.png) 0 0 repeat !important;}

/* footer */
footer {width:100%; padding:8rem 2.4rem; z-index:2; color:#aaaaaa; font-size:14px; font-family:var(--rbt); position: relative; background: #000;}
footer > img {margin-bottom:2.4rem;}
footer .footer {position:relative;}
footer .footer .copy {margin-top:0.7rem;}
footer .footer .cs a {color:#ffee00; font-family:var(--rbt);}
footer .footer .cs a:hover {text-decoration:underline;}
.footer .age {margin-bottom:2rem;}
.footer .age img {max-width:6rem;}

/* popup */
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background:rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 90; display:none;}
.pop_up {width:100%; height:100%; position:fixed; top:0; left:0; z-index:99; display:none;}
.pop_up .pop_layout {width:540px; left:50%; top:50%; transform:translate(-50%, -50%); z-index:99; border-radius:2rem; position:relative; border:0.4rem solid #ffbb44; background:url('/images/common/event/mission/indep/ptn_noise.png') 0 0 repeat, url('/images/common/event/mission/indep/bg_pop_lt.png') 0 0 no-repeat , #770000; border-radius:3rem;}
.pop_up .pop_con {position:relative; z-index:1; padding:0 3.2rem 3.2rem;}
.pop_up .pop_con h2 {font-size:32px; color:#ffdd66; font-style:italic; letter-spacing:0.02em; padding:0 5.6rem; z-index: 2; position:relative; gap:0.7rem; display:flex; align-items:center; justify-content:center; text-transform:uppercase; width:100%; height:8rem;}
.pop_up .pop_con h2 span {color:#fff;}
.pop_up .pop_close {top:50%; margin-top:-18px; color:transparent; font-size:0; right:0; transition:none; position:absolute; width:36px; height:36px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/indep/pop_close.png');}
.pop_up .pop_close:hover {background-position:0 100%;}
.pop_up .pop_con .desc {overflow:hidden; position:relative; z-index:1;}
.pop_up .pop_con .box {z-index: 2; position:relative; border-radius:1.2rem; background:#fff url('/images/common/event/mission/indep/ptn_dot.png') center bottom no-repeat;}
.pop_up .pop_con .box .txt {font-size:24px; font-family:var(--imp); font-style:italic; color:#fff; letter-spacing:0.01em; padding:1.2rem 2.4rem; position:relative; border-radius:1.2rem 1.2rem 0 0; background:#dddddd url('/images/common/event/mission/indep/pop_txt_grunge.png') right center no-repeat;}
.pop_up .pop_con .box .txt span {filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)); padding:0 1rem; background: linear-gradient(to right, #990000, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.pop_up .pop_con .box .cash {gap:0.7rem; height:14.4rem; display:flex; font-family:var(--imp); align-items:center; justify-content:center; color:#224488; font-size:58px; font-style:italic;}
.pop_up .pop_con .box .cash span {margin-right:1rem;}
.pop_up .pop_con .box .cash img {vertical-align:middle; position:relative; top:2px;}
.pop_up .pop_con .day {text-transform:uppercase; font-family:var(--imp); font-style:italic; transform:none; gap: 0.7rem; font-size:36px; color:#ff6666; position:relative; z-index:2; margin-bottom:2.4rem; display:flex; align-items:center; justify-content:center; position:relative; height:60px; border-radius:1.2rem;}
.pop_up .pop_con .day:before {z-index:-1;}
.pop_up .pop_con .day:after {content:''; display:block; position:absolute; top:0; bottom:0; left:1.8rem; right:1.8rem; background:url('/images/common/event/mission/indep/obj_star.png') 0 center no-repeat , url('/images/common/event/mission/indep/obj_star.png') right center no-repeat; background-size:3.6rem auto;}
.pop_up .pop_con .day span {color:#ffbb44; transform:none;}
.pop_up .pop_con .reward {position:relative; padding:5.4rem 2.4rem;}
.pop_up .pop_con .reward .img {height:18rem; display:flex; align-items:center; justify-content:center; margin:0 auto; width:100%;}
.pop_up .pop_con .reward .img > img {max-width:100%; max-height:100%;}
.pop_up .pop_con .reward .name {line-height:1.2; margin-top:1rem; font-size:23px; font-style:italic; color:#000; letter-spacing:0.02em; display:flex; min-height:4.6rem; align-items:flex-start; justify-content:center;}
.pop_up .btns {margin-top:2.4rem; display:flex; gap:1.6rem; align-items:center; justify-content:center; position:relative; z-index: 2;}
.pop_up .btns button {text-shadow:none; font-size:23px; justify-content:space-between; flex:1; height:60px; border-radius:1.2rem; letter-spacing:0.02em; position:relative;}
.pop_up .btns button:before {background-size:cover;}
.pop_up .btns button > span {position:relative;}

.pop_up .btns .btn1 {background:#ffdd88;}
.pop_up .btns .btn1 font {color:#000000;}
.pop_up .btns .btn1:before {background-image:url('/images/common/event/mission/indep/texture_y.png'); opacity:1;}
.pop_up .btns .btn1:hover {color:#ffdd66;}
.pop_up .btns .btn1:hover:before {opacity:0.4;}
.pop_up .btns .btn1:hover font {color:#fff;}

.pop_up .btns .btn2 {background:#ffcccc; color:#660000; border-color:#ffbbbb;}
.pop_up .btns .btn2 font {color:#000000;}
.pop_up .btns .btn2:before {background-image:url('/images/common/event/mission/indep/texture_p.png'); opacity:0.5;}
.pop_up .btns .btn2:hover {color:#ffbbbb;}
.pop_up .btns .btn2:hover:before {opacity:0.4;}
.pop_up .btns .btn2:hover font {color:#fff;}

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

.pop_clear .pop_layout {width:576px;}
.pop_clear .btns {align-items:stretch;}
.pop_clear .btns button {padding:1rem 1.2rem; justify-content:center; height:auto; min-height:7.2rem; flex-direction:column; transform:none; font-size:16px;}
.pop_clear .btns button > span {word-break:break-word; transform:none;}
.pop_clear .btns button .cash {display:block; font-size:30px; width:fit-content; padding-right:30px; position:relative; margin:0 auto;}
.pop_clear .btns .btn1 {color:#660000;}
.pop_clear .btns .btn1:hover {color:#ffdd66;}
.pop_clear .btns button .cash:after {content:''; display:block; position:absolute; top:50%; right:0; width:24px; height:24px; margin-top:-12px; background-image:url('/images/common/event/mission/indep/pb_cash02.png'); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.pop_clear .btns .btn2 .cash:after {background-image:url('/images/common/event/mission/indep/pb_cash03.png');}
.pop_clear .btns button:hover .cash:after {background-position:0 100%;}

.pop_all #pageinfo {background: url(/images/common/event/mission/indep/ptn_noise.png) 0 0 repeat, #770000; border-radius:1.2rem 1.2rem 0 0; position:absolute; left:50%; bottom:0; transform:translate(-50% , 0); min-width:12rem; padding:0 2.4rem; height:3.2rem; display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:#ff6666; letter-spacing:0.02em; font-family:var(--ari);}
.pop_all #pageinfo span {margin-right:0.4rem; color:#ffdd66;}
.pop_all #pageinfo font {margin-left:0.4rem;}
.pop_all .img_list .slick-slide {position: relative;}
.pop_all .img_list .slick-arrow {font-size:0; color:transparent; transition:none; z-index:1; position:absolute; top:50%; margin-top:-32px; display:block; width:29px; height:32px; background-position:0 0; background-size:100% auto; background-repeat:no-repeat; background-image:url('/images/common/event/mission/indep/pop_arr.png');}
.pop_all .img_list .slick-prev {left:-4px;}
.pop_all .img_list .slick-next {right:-4px; 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-bottom:3.4rem;}

.pop_detail .pop_con h2 {font-size:25px; color:#ffdd66; text-align:left; padding:0 56px 0 0; justify-content:flex-start; height:auto; min-height:8rem;}

.pop_history .pop_con {padding-right:1.8rem;}
.pop_history .pop_close {right:1.6rem;}
.pop_history .pop_layout {width:792px;}
.pop_history .list {height:100%; padding-right:1.2rem; overflow-y:auto; max-height:51.6rem; position: relative; z-index: 2;}
.pop_history .list::-webkit-scrollbar {width:1rem;}
.pop_history .list::-webkit-scrollbar-track {background:none;}
.pop_history .list::-webkit-scrollbar-thumb {border-radius:5px; background: #f9b847;}
.pop_history .list li {font-size:0;}
.pop_history .list li > div {align-items:center; justify-content:center; flex-direction:column; height:100%; padding:0 1rem; display:inline-flex; color:#000; vertical-align:top;}
.pop_history .list li > div.date {width:24%;}
.pop_history .list li > div.date span {display:block;}
.pop_history .list li > div.mission {width:50%;}
.pop_history .list li > div.mission span {overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.pop_history .list li > div.item {width:26%;}
.pop_history .list li > div.item span {display:block; width:100%; overflow: hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.pop_history .list li.top {margin-bottom:0; border-radius:1.2rem 1.2rem 0 0; overflow:hidden; background:#aa2222 url('/images/common/event/mission/indep/bg_pop_grunge.png') right center no-repeat;}
.pop_history .list li.top div {vertical-align:top; height:36px; color:#ffbb44; text-transform:uppercase; font-style:italic; font-size:16px;}
.pop_history .list li.bottom {height:6rem; margin-bottom:1px; background:#ddd url('/images/common/event/mission/indep/ptn_dot.png') center center repeat; font-family:var(--ari);}
.pop_history .list li.bottom:last-child {border-radius:0 0 1.2rem 1.2rem;}
.pop_history .list li.bottom div {vertical-align:top; line-height:1.2; font-size:14px;}
.pop_history .list li.bottom .mission {text-align:left;}
.pop_history .list li.bottom .item {color:#660000;}
.pop_history .list li.bottom .date {font-size:13px; color:#990000;}
.pop_history .list li.bottom .date .time {color:#666666;}
.pop_history .list li.none {height:51.6rem; display:flex; align-items:center; justify-content:center; color:#ffbb44; font-style:italic; text-transform:uppercase; font-size:16px;}

@keyframes bg-move {
  0% {background-size: 100% auto;}
  100% {background-size: 150% auto;}
}

@media screen and (max-width: 2200px) {
.inner {max-width:1600px;}

.list_wrap .btn_prev {left:-5.6rem;}
.list_wrap .btn_next {right:-5.6rem;}

.calendar_wrap .calendar ul {margin-left:-2.4rem;}
.calendar_wrap .calendar ul > li {padding-left:2.4rem;}

.cha04 {width:34%; left:-7%;}
}

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

@media screen and (max-width: 1600px) {
.util {max-width:560px;}
.util a {width:130px; font-size:18px;}
.util .btn_history {flex-direction:column;}
.user_info {font-size:24px;}

.top {margin-bottom:4.8rem;}
.top .sub {position:static; display:flex; align-items:center; justify-content:center; margin-top:4.8rem;}
.top .sub .inner {padding:0 3rem; height:auto;}
.top .remain {position:relative; top:auto; left:auto; margin:0 1.2rem;}
.top .etc {position:relative; top:auto; right:auto; margin:0 1.2rem;}
.mission_wrap .top {margin-bottom:4.8rem;}
.mission_wrap .top:before {top:-24%;}
.mission_wrap .top:after {top:-52%;}
.calendar_wrap .top .sub {margin-top:4rem;}

@keyframes bg-move {
  0% {background-size: 110% auto;}
  100% {background-size: 150% auto;}
}
}

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

.calendar_wrap .reward_wrap .tit {position:static; text-align:center; margin-bottom:1rem;}
.calendar_wrap .reward_wrap .tit span {display:inline;}
}

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

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

.cha04 {display:none;}


@keyframes bg-move {
  0% {background-size: 135% auto;}
  100% {background-size: 150% auto;}
}

}

@media screen and (max-width: 1280px) {
header .util {width:auto; max-width:none; border-radius:0; background:none; box-shadow:none; height: auto; top: 2.4rem;}
header .util:before, header .util:after {display:none;}
header .util .btn_history {display:none;}
header .user_info {display:none;}
.btn_history {position:fixed; bottom:3rem; right:3rem; text-transform:uppercase; flex-direction:column; display:flex; align-items:center; justify-content:flex-end; width:96px; height:96px; padding-bottom:1.6rem; border-radius:1.2rem; z-index:7; background:#ffdd88; border:2px solid #ffbb44; font-size:16px; font-family:var(--imp); line-height:1;}
.btn_history font {color:#660000;}
.btn_history span {padding-top:3rem;}
.btn_history span:before {content:''; display:block; position:absolute; left:50%; margin-left:-0.8rem; top:0; width:2.4rem; height:2.4rem; background:url('/images/common/event/mission/indep/icon_history.png') 0 0 no-repeat; background-size:100% auto !important;}
.btn_history:before {background-image:url('/images/common/event/mission/indep/texture_y.png'); opacity:1; background-size:cover; box-shadow:inset 0 0 0 2px #660000; border-radius:1rem;}
.btn_history:hover:before {opacity:0.4;}
.btn_history:hover font {color:#ffdd66;}
.btn_history:hover span:before {background:url('/images/common/event/mission/indep/icon_history_on.png') 0 0 no-repeat;}

.btn_receive:before {background-size:100% auto;}

.section01 {height:auto;}
.section01 .title_wrap {padding:34% 0 5%; width:64%;}
.section01 .title_wrap .user_info {font-size:30px; background: url(/images/common/event/mission/indep/bg_grunge_l.png) 0 center no-repeat, url(/images/common/event/mission/indep/bg_grunge_r.png) right center no-repeat, url(/images/common/event/mission/indep/ptn_noise.png) 0 0 repeat, rgba(0, 0, 0, 0.5); flex: none; z-index:1; word-break: break-word; display:block; position:relative; margin-top:3rem; border-radius:1.2rem; width:100%; max-width:56rem; min-height:7.2rem; padding:1.6rem; display:flex; align-items:center; justify-content:center;}
.section01 .title_wrap .user_info > div {padding:0 2.4rem; max-width: 50%;}
.section01 .title_wrap .user_info .user span {font-size:22px;}
.section01 .title_wrap .user_info .cash {margin-top:0;}
.section01 .title_wrap .date {font-size:30px;}
.section01 .title_wrap .date div {height:48px; min-width:24rem;}
.section01 .cha_wrap {height:auto; width:100%; bottom:-5%; max-height:none;}
.section01 .cha_wrap img {height:auto; width:100%;}

.total_reward {background: url(/images/common/event/mission/indep/bg_eagle.png) right 180% top 50% no-repeat, url(/images/common/event/mission/indep/ptn_rd.jpg) center center no-repeat, #990000;}
.total_reward .con {display:block; padding: 3.6rem 7.2rem 4.8rem;}
.total_reward .reward .name {display:inline-block; height:auto;}
.total_reward .tit {margin-top:0; text-align:center;}
.total_reward .tit br {display:none;}
.mission_wrap .total_reward .reward .img {margin-top:1.2rem; margin-bottom:1.2rem;}
.mission_wrap .total_reward .btn_receive {text-align:center; margin-top:4.8rem; transform:none; width: 100%; max-width: 420px; height: 72px; border-radius: 2rem; position:relative;}
.mission_wrap .total_reward .btn_receive span {transform:none; position:relative; z-index:1;}
.mission_wrap .total_reward .btn_receive font {display:inline;}
.mission_wrap:after {bottom:-4.2rem;}

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

}

@media screen and (max-width: 1023px) {
header {text-align:center;}
header .util {left:auto; transform:none; right:1.2rem; top:50%; transform:translate(0 , -50%); padding:0; height:auto;}
header .util .btn_login {min-width:54px; height:54px; border-radius:1rem; width:auto;}

.top .remain {margin:0 1.2rem;}
.top .etc {margin:0 1.2rem;}

.mission_wrap .list .btn_receive {width:280px; height:280px;}
.mission_wrap .list .btn_receive span:after {width:5rem; height:5rem;}

.mission_wrap .list .clear_area {display:block;}
.mission_wrap .list .clear_area .btn_clear {margin:0.8rem auto 0; width:100%;}

.mission_wrap .list_wrap {padding-bottom:25%;}

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

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

@media screen and (max-width: 768px) {
html {font-size:32%;}
.mobile {display:block;}
.btn {font-size:3.2rem; height:36px;}
.btn_receive {font-size:3.9rem;}
.btn_round span {font-size:4.7rem;}
.btn_history {font-size:2.1rem; width:60px; height:60px; bottom:2.4rem; right:2.4rem;}
.btn_history span {padding-top:3.4rem;}

header .util a {font-size:3.3rem;}
header .util .btn_login {min-width:48px; height:48px; padding:0 5px;}

.section01 {height:auto; max-height:none;}
.section01 .title_wrap {padding: 48% 0 10%; width: 80%;}
.section01 .title_wrap .tit {width:auto; height:auto;}
.section01 .title_wrap .user_info .user span {font-size:3.1rem;}
.section01 .title_wrap .user_info > div {font-size:3.1rem;}
.section01 .title_wrap .date {font-size:3.5rem;}
.section01 .title_wrap .bi img {width:24rem;}
.section01 .title_wrap .user_info {font-size:3.9rem; margin-top:2%;}
.section01 .title_wrap .date div {height:26px;}
.section01 .cha_wrap {width:120%; bottom:0; transform: translate(-46%, 0);}

.top .inner {height:86px;}
.top .m_tit .day span {font-size:8rem;}
.top .m_tit .txt img {height:6.4rem;}
.top .remain {font-size:3.2rem; height:56px;}
.top .remain .time {margin-left:2.4rem;}
.top .etc {height:56px;}
.top .etc .count_wrap {font-size:3.2rem;}
.top .m_tit .day font {font-size:3.2rem;}
.top .etc .btn {height:42px;}
.mission_wrap .top:before {top:;}
.mission_wrap .top:after {top:;}

.mission_wrap .list .box .m_tit {font-size:4.1rem; height:40px;}
.mission_wrap .list .box .desc {min-height:0;}
.mission_wrap .list .btn_clear {height:48px; font-size:3.5rem;}
.mission_wrap .list .btn_receive {width:31.2rem; height:31.2rem;}
.mission_wrap .list .btn_receive {font-size:4.1rem;}
.mission_wrap .list .btn_receive span:after {width:6rem; height:6rem;}
.mission_wrap .list .btn_receive:after {background-size:30rem auto;}
.mission_wrap .list .mission .count {font-size:5.5rem;}
.mission_wrap .list .mission .txt {font-size:3.9rem;}
.mission_wrap .list .btn_modify {font-size:2.7rem; width:100px; height:36px;}
.mission_wrap .list .btn_modify:before {top:1px;}
.mission_wrap .list .mission:before {width: 124px; height: 38px; margin-left:-62px;}
.mission_wrap .list .reward .tit {font-size:4.1rem;}
.mission_wrap .list .reward .name {font-size:3.2rem;}
.mission_wrap .list .clear_area {display:flex;}
.mission_wrap .list .clear_area > span {font-size:2.6rem;}
.mission_wrap .list .clear_area .btn_clear {font-size:2.6rem; margin:auto; width:auto;}
.mission_wrap .list .reward .img > div {height:100%;}

.total_reward {background: url(/images/common/event/mission/indep/bg_eagle.png) left 100% top 50% no-repeat, url(/images/common/event/mission/indep/ptn_rd.jpg) center center no-repeat, #990000;}
.total_reward .tit {font-size:3.9rem;}
.total_reward .reward .name {font-size:3.2rem; margin-left:-48px; margin-right:-48px;}
.mission_wrap .total_reward .btn_receive {height:50px;}

.calendar_wrap .calendar .wrap {padding-bottom:0;}
.calendar_wrap .calendar ul > li {width:calc(100% / 4);}
.calendar_wrap .calendar .con .day {font-size:2.9rem;}
.calendar_wrap .calendar .con .day:after {background-size:0.1rem auto;}
.calendar_wrap .btn_day02 {height:30px; font-size:2.9rem;}
.calendar_wrap .con_inner .today {font-size:2.9rem; width:48px; height:24px;}
.calendar_wrap .calendar .count {font-size:5.5rem;}
.calendar_wrap .calendar .bin .day {font-size:3.9rem;}
.calendar_wrap .reward_wrap .reward .name {position: relative; top:auto; right:auto; display: inline-block; max-width: none; text-align: center;}
.calendar_wrap .reward_wrap .btn_receive {height:50px; margin-top:4.8rem;}
.calendar_wrap .reward_wrap .reward .img {margin:3.6rem auto;}
.calendar_wrap .top .m_tit {font-size:8.5rem;}
.calendar_wrap .calendar {padding:3.6rem 3.6rem 1.2rem;}

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

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

.pop_up .pop_close {width:30px; height:30px; margin-top:-15px;}
.pop_up .pop_layout {width:calc(100% - 4.8rem); left:2.4rem; right:2.4rem; transform:translate(0, -50%);}
.pop_up .btns button {height:40px;}
.pop_up .pop_con h2 {font-size:4.1rem; height:40px;}
.pop_up .pop_con .bg {background-size:1.5rem auto;}
.pop_up .pop_con .day {font-size:4.2rem; height:7.2rem;}
.pop_up .pop_con .box .txt {font-size:3.3rem;}
.pop_up .pop_con .reward {background-size:1.2rem auto;}
.pop_up .pop_con .reward .name {font-size:3.2rem;}
.pop_up .btns button {font-size:3.3rem;}
.pop_up .pop_con .box .cash {font-size:6.2rem;}
.pop_up .pop_con .box .cash img {max-width:4.8rem;}
.pop_clear .btns button {height:auto;}
.pop_clear .btns button .cash {font-size:3.9rem;}
.pop_all #pageinfo {font-size:2.5rem; padding-top: 2px;}
.pop_history .list li.top div {height:6rem;}
.pop_history .list li.bottom {height:8rem;}
.pop_history .list li.top div {font-size:2.5rem;}
.pop_history .list li.bottom div {font-size:2.3rem;}
.pop_history .list li.bottom .date {font-size:2.2rem;}
.pop_history .list li.none {font-size:2.5rem;}
}

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

.total_reward {background: url(/images/common/event/mission/indep/bg_eagle.png) right 130% top 50% no-repeat, url(/images/common/event/mission/indep/ptn_rd.jpg) center center no-repeat, #990000;}

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

@media screen and (max-width: 540px) {
.top .inner {height:70px;}
.top .m_tit .txt img {height:5.4rem;}
.top .sub .inner {display:block; height:auto;}
.top .remain {margin:0 auto 2.4rem;}
.top .etc {margin:0 auto;}
.mission_wrap .top:before {top:-3%; width:57.6rem; right:67%;}
.mission_wrap .top:after {top:-14%; left:67%; width:39.6rem;}

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

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

@media screen and (max-width: 365px) {
.top .inner {height:60px;}
.top .m_tit .txt img {height:4.4rem;}

.calendar_wrap .calendar ul > li {width:50%;}
}

@media screen and (min-width: 1280px) and (max-height: 860px) {
.section01 .title_wrap {width:60%;}
}

@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 aim {
	0% {transform:rotate(0deg);}
	25% {transform:rotate(160deg);}
	50% {transform:rotate(0deg);}
	75% {transform:rotate(160deg);}
	100% {transform:rotate(0deg);}
}

@keyframes detonate{
  0%   { transform: scale(0) rotate(-90deg); filter: brightness(3) blur(4px); opacity:0; }
  35%  { opacity:1; }
  70%  { transform: scale(1.12) rotate(6deg); filter: brightness(1.6) blur(0); }
  100% { transform: scale(1) rotate(0deg);   filter: brightness(1) blur(0); }
}

@keyframes pulse{
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.04) rotate(.6deg); }
}

@keyframes flicker{
  0%, 100% { filter: brightness(1); }
  25%      { filter: brightness(1.22); }
  50%      { filter: brightness(.95); }
  75%      { filter: brightness(1.12); }
}

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

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

@keyframes slide-bl {

  0% {
    -webkit-transform: translateY(100%) translateX(-100%);
            transform: translateY(100%) translateX(-100%);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
  }
}

@keyframes slide-br {

  0% {
    -webkit-transform: translateY(100%) translateX(100%);
            transform: translateY(100%) translateX(100%);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
  }
}

@keyframes cha-float01 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes cha-float02 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 8px; }
}

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