@charset "utf-8";
@import url("https://use.typekit.net/wlg5zuv.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 {
--gre: 'greycliff-thai-cf', sans-serif;
--hot: 'hotel-mn', sans-serif;
--rbt: 'roboto', sans-serif;
}

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

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; line-height: 1.1; text-align: center; font-family: 'greycliff-thai-cf', 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: 'greycliff-thai-cf';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'greycliff-thai-cf'; 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: 'greycliff-thai-cf'; background-color:rgba(255, 255, 255, 0);}

.mobile {display:none;}

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

.cha {position:absolute;}
.cha01 {left:-47.8%; bottom:0; width:65.5%; max-width:479px; z-index:1; animation-duration:0.5s !important;}
.cha02 {right:-57.3%; bottom:0; width:94.6%; max-width:692px; z-index:1; animation-duration:0.5s !important;}
.cha03 {left:0; bottom:0; width:18%; max-width:459px; animation-duration:0.5s !important;}
.cha04 {right:0; bottom:0; width:31%; max-width:792px; animation-duration:0.5s !important;}

.cha .float {position:absolute; max-width:none; z-index:-1;}
.cha .eft {position:absolute; max-width:none;}

.cha01 .eft {width:81.9%; max-width:392px; top:-1%; right:-51%; opacity: 0; transform-origin:left bottom; will-change:transform, opacity; animation:fire .55s 0.4s ease-out both;}
.cha01 .float {width:48.1%; max-width:230px; left:-38%; top:24%; animation:balloonFloat 3.6s ease-in-out infinite;}
.cha02 .float {width:35.9%; max-width:248px; top: 32%; right: -22.5%; animation:balloonFloat 3.6s 0.6s ease-in-out infinite;}

.light {position:absolute; transform-origin:center center; opacity:0; transform:scale(0);}
.light01 {width:42%; max-width:308px; top: 5%; left: -50%; animation-delay:0.1s !important;}
.light02 {width:42%; max-width:308px; top: 5%; left: -50%; animation-delay:0s !important;}
.light03 {width:19%; max-width:136px; top: 16%; right: 10%; animation-delay:0.15s !important;}
.light04 {width:23%; max-width:166px; top: 7%; right: -40%; animation-delay:0.05s !important;}

.animated .light {animation:lightBurst 1.4s cubic-bezier(.15,.85,.25,1) forwards;}

.bl {position:absolute; animation:balloonFloat 3.6s ease-in-out infinite;}
.bl01 {max-width:6.6rem; top:-4px; left:-4px; animation-duration:3.8s; animation-delay:0s;}
.bl02 {max-width:8.8rem; top:21.2rem; left:-3.6rem; animation-duration:4.4s; animation-delay:0.6s;}
.bl03 {max-width:9.6rem; top:2.6rem; left:-6.7rem; z-index:2; animation-duration:3.2s; animation-delay:1s;}
.bl04 {max-width:8.8rem; top:4.5rem; right:-6.2rem; animation-duration:4s; animation-delay:0.3s;}
.bl05 {max-width:9.6rem; top:15.2rem; right:-3.9rem; z-index:2; animation-duration:4.6s; animation-delay:1.4s;}

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

.btn {transition:all ease-in-out 0.2s; font-size:16px; padding:2px 12px 0; background:#ddbb66; border:0.2rem solid #ffcc55; box-shadow:inset 0 1rem 2rem rgba(255, 255, 255, 0.2); text-shadow:0 0 2px rgba(0, 0, 0, 0.3); position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:1.2rem; height:48px; font-weight:800; text-transform:uppercase; color:#000000; letter-spacing:0.02em;}
.btn span {transition:all ease-in-out 0.2s; color:#553300; margin-left:0.4rem;}
.btn:hover {border-color:#ffcc55; box-shadow:none; color:#ffcc55; background:#331100;}
.btn:hover span {color:#fff;}

.bg_line {padding:10px; border-radius:12px; border:0.2rem solid #ddc288; position:relative;}
.bg_line:before {content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; border-radius:8px; border:0.2rem solid #bbbbbb;}

.btn_receive {padding:1.2rem 3rem; border:0.2rem solid #ddc288; border-radius:2.4rem; box-shadow:inset 0 0 0 0.6rem #2b3350; position:relative; font-family:var(--hot); font-size:24px; color:#aabbff; text-transform:uppercase; line-height:1; background-color:#2b3350; background-image:url('/images/common/event/mission/anniv17/ptn2.png'); background-position:0 0; background-repeat:repeat;}
.btn_receive:after {overflow:hidden; border-radius:2rem; content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; box-shadow:inset 0 0 0 0.2rem #ddc288; background:url('/images/common/event/mission/anniv17/btn_obj_l.png') 0 center no-repeat , url('/images/common/event/mission/anniv17/btn_obj_r.png') right center no-repeat;}
.btn_receive span {transition:all ease-in-out 0.2s; color:#ddc288;}
.btn_receive:hover {box-shadow:inset 0 0 0 0.6rem #331100; background-color:#331100; color:#ffcc55;}
.btn_receive:hover span {color:#fff;}

.btn_receive.off {cursor:default; box-shadow:none; background:rgba(43, 51, 80, 0.2); color:#2b3350; border:none;}
.btn_receive.off span {color:#2b3350;}
.btn_receive.off:after {display:none;}

.btn_receive.end {cursor:default; background:none; color:#000000; border-color:#553300; box-shadow:inset 0 0 0 0.6rem #c39658;}
.btn_receive.end span {color:#553300;}
.btn_receive.end:after {background:none; box-shadow:inset 0 0 0 0.2rem #553300;}

.btn_start {box-shadow:0 2rem 4rem rgba(0, 0, 0, 0.2); z-index:1; position:relative; overflow:hidden; background-image:url('/images/common/event/mission/anniv17/btn_start.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto; width:31.2rem; height:31.2rem; border-radius:50%; line-height:1; text-transform:uppercase; letter-spacing:-0.02em; font-size:42px; font-family:var(--hot); text-shadow: -0.2rem 0 #ffeecc, 0.2rem 0 #ffeecc, 0 -0.2rem #ffeecc, 0 0.2rem #ffeecc, -0.2rem -0.2rem #ffeecc, 0.2rem -0.2rem #ffeecc, -0.2rem 0.2rem #ffeecc, 0.2rem 0.2rem #ffeecc;}
.btn_start:before {width: 98.72%; height: 44.872%; z-index: -1; margin-left:-49.36%; left:50%; bottom:0; content:''; display:block; position:absolute; background-image:url('/images/common/event/mission/anniv17/btn_start_obj.png'); background-position:center 0; background-repeat:no-repeat; background-size:100% auto;}
.btn_start span {transition:all ease-in-out 0.2s; color:#991144;}
.btn_start:hover {background-image:url('/images/common/event/mission/anniv17/btn_start_on.png'); color:#334477;}
.btn_start:hover:before {background-image:url('/images/common/event/mission/anniv17/btn_start_obj_on.png');}
.btn_start:hover span {color:#000000;}

.btn_history {position:fixed; right:3rem; bottom:3rem; z-index:7; display:none;}
.btn_history:hover { background:#2b3350;}
.btn_history:hover span {color:#fff;}
.btn_login {background:#aaaaaa; border-color:#c0c0c0;}
.btn_login:hover {border-color:#bbbbbb; box-shadow:none; color:#bbbbbb; background:#2b3350;}
.btn_top {border-radius:50%; position:fixed; z-index:11; right:2.5rem; bottom:2.5rem; width:68px; height:68px; display:flex; align-items:center; justify-content:center;}

/* header */
header {text-align:left; position:absolute; top:0; left:0; right:0; z-index:20; padding:3.6rem 58px 0;}
header .bi img {max-width:160px;}
header .util {position:absolute; top:0; left:50%; transform:translate(-50%, 0);}
.util {position:relative; box-shadow:0 0 10rem rgba(85, 10, 153, 0.4) , inset 0 0 4rem rgba(0, 0, 0, 0.4); background:rgba(48, 55, 80, 0.5); padding:0 3rem 1.2rem; border-radius:0 0 3.6rem 3.6rem; width:100%; max-width:864px; font-size:0; height:9.6rem; display:flex; align-items:center; justify-content:space-between;}
.util:before, header .util:after {z-index:-1; content: ''; display: block; position: absolute; padding:0.4rem;}
.util:before {border-radius:0 0 2.8rem 2.8rem; inset: -0.4rem 0.8rem 0.8rem; background:linear-gradient(to bottom, #bbbbbb, #aaaaaa); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.util:after {border-radius:0 0 3.6rem 3.6rem; inset: -0.4rem 0 0; background:linear-gradient(to bottom, #b28844, #ffdd99); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.user_info {word-break:break-all; text-align:center; padding:0 2.4rem; flex:1; min-width:0;}
.user_info .user {position:relative;}
.user_info .user span {font-size:17px; color:#cccccc; letter-spacing:0.03em; overflow:hidden; text-overflow:ellipsis; -ms-text-overflow:ellipsis; max-width:100%; white-space:nowrap; word-wrap:normal; display:block;}
.user_info .cash {font-size:22px; font-weight:500; color:#ee7799; letter-spacing:0.02em; margin-top:0.6rem; text-transform:uppercase;}
.user_info .cash span {margin-right:0.6rem;}
.util a {width:192px;}
.util .btn {padding-top: 4px;}
.util .btn_login {position:relative;}
.util .btn_history {position:relative; right:auto; bottom:auto; display:inline-flex;}
.util .btn_history br {display:none;}

/* section01 */
.section01 {position:relative; height:100vh; max-height:1080px; background:url('/images/common/event/mission/anniv17/bg.jpg') center center no-repeat; background-size:cover;}
.section01 .inner {height:100%;}
.section01 .title_wrap {height:100%; z-index:1; position:relative; padding:13rem 0 3rem; display:inline-flex; align-items:center; justify-content:flex-start; flex-direction:column;}
.section01 .title_wrap .tit {position:relative; z-index:1; height:88.37%;}
.section01 .title_wrap .tit span {display:block;}
.section01 .title_wrap .tit span img {max-width:none; height:100%;}
.section01 .title_wrap .tit .num {margin-bottom:-3%; height: 46.987%; position:relative; transform-origin:center bottom;}
.section01 .title_wrap .tit .num:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/anniv17/title_num_on.png') 0 0 no-repeat; background-size:100% auto; animation:titleNumShine 7s linear infinite;}
.section01 .title_wrap .tit .cake {position:relative; height: 55.72%;}
.section01 .title_wrap .date {position:relative; font-size:36px; color:#bbbbbb; letter-spacing:-0.02em; text-transform:uppercase; font-family:var(--hot); margin-bottom:4.55%;}
.section01 .title_wrap .date span {color:#ddc288;}
.section01 .title_wrap .user_info {display:none;}

.animated .title_wrap .tit .num { animation:numCandle 0.7s cubic-bezier(.4, 0, .2, 1) 0.3s both;}

#confetti-mission, #confetti-calendar {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}

/* mission_wrap */
.mission_wrap {position:relative; background:#2b3147 url('/images/common/event/mission/anniv17/ptn.png') 0 0 repeat;}
.mission_wrap .top { z-index:1;}
.mission_wrap canvas {position:absolute; left:0; top:0; pointer-events:none; width:100%; height:100%;}

.top {position:relative; margin-bottom:9.6rem;}
.top .con {position:relative; background:rgba(43, 49, 71, 0.8);}
.top .con:before, .top .con:after {content:''; display:block; position:absolute; background:url('/images/common/event/mission/anniv17/ptn_bar.png') 0 0 repeat-x; background-size:auto 100%; left:0; right:0; height:1.2rem;}
.top .con:before {top:0;}
.top .con:after {bottom:0; transform:scaleY(-1);}
.top .con:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0;}
.top .inner {display:flex; align-items:center; justify-content:center; height:168px; position:relative; padding:1.2rem 0;}
.top .m_tit { display:flex; align-items:center; justify-content:center; position:relative; z-index:1;}
.top .m_tit .day {padding-top: 1.8rem; margin:0 2.4rem; width:16.8rem; height:16.8rem; display:flex; align-items:center; justify-content:center; position:relative; background:url('/images/common/event/mission/anniv17/bg_day.png') 0 0 no-repeat; background-size:100% auto;}
.top .m_tit .day:before {transform-origin: center; animation: detonate 1.1s cubic-bezier(.13,.7,.2,1) both, pulse 3.2s ease-in-out 1.1s infinite, flicker 4.7s steps(1) 1.1s infinite; will-change: transform, filter; z-index:-1; content:''; display:block; position:absolute; left:50%; top:50%; margin-top:-13.2rem; margin-left:-13.2rem; width:26.4rem; height:26.4rem; background:url('/images/common/event/mission/anniv17/bg_day_obj.png'); background-size:100% auto;}
.top .m_tit .day font {display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:14px; color:#bbbbbb; letter-spacing:0.06em; font-weight:500; height:16%; padding-top:1%; left:0; right:0; top:20%; position:absolute;}
.top .m_tit .day span {font-family:var(--hot); font-size:71px; letter-spacing:-0.08em; background:linear-gradient(to bottom, #fff, #bbb); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.top .m_tit .txt {position: relative; min-width:max-content;}
.top .m_tit .txt img {width:auto; height:auto;}
.top .sub {position:absolute; top:0; left:0; width:100%; height:100%;}
.top .remain {min-width:28.8rem; font-size:19px; font-weight:800; color:#fff; letter-spacing:0.02em; top:50%; transform:translate(0, -50%); position:absolute; left:3rem; height:72px; padding:0 4rem; display:flex; justify-content:space-between; align-items:center; border-radius:12px; box-shadow:0 1rem 2rem rgba(221, 194, 136, 0.1);}
.top .remain .time {color:#ee7799;}
.top .remain .tit {text-transform:uppercase;}
.top .remain .tit font {color:#ddc288;}
.top .etc {position:absolute; right:3rem; top:50%; transform:translate(0, -50%); display:flex; align-items:center; justify-content:space-between; height:72px;}
.top .etc .count_wrap {width:12.4rem; padding:0 2rem; display:flex; align-items:center; justify-content:center; font-size:19px; color:#ddc288; letter-spacing:0.04em; font-weight:800;}
.top .etc .count_wrap font {color:#ee7799;}
.top .etc .btn {border-radius:0.6rem; min-width:14.4rem;}

.mission_wrap .list_wrap {position:relative; overflow:hidden; padding-bottom:9.6rem;}
.mission_wrap .list_wrap .inner {position:relative;}
.mission_wrap .list_wrap .slick-list {width:100%;}
.list_wrap .btn_arr {top:36%; font-size:0; color:transparent; position:absolute; z-index:2; width:7.2rem; height:7.2rem; background-color:rgba(0, 0, 0, 0); background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/anniv17/btn_arr.png');}
.list_wrap .btn_prev {left:-7.2rem;}
.list_wrap .btn_next {right:-7.2rem; transform:scaleX(-1);}
.list_wrap .btn_arr.slick-disabled {opacity:0;}
.list_wrap .btn_arr:hover {background-position:0 100%;}

.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 .top .m_tit .txt {z-index:-2;}
.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;}
.mission_wrap .list .box {z-index:2; position:relative; border-radius:3rem; height:100%;}
.mission_wrap .list .box .m_tit {text-shadow:0 1px 0 rgba(255, 255, 255, 0.2); font-size:27px; color:#223355; font-family:var(--hot); box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.1); display:flex; align-items:center; justify-content:center; text-transform:uppercase; border-radius:2.4rem 2.4rem 0 0; width:100%; height:48px; background:url('/images/common/event/mission/anniv17/ptn.png') 0 0 repeat , linear-gradient(to right, #b38945, #c09d60 , #b38945);}
.mission_wrap .list .box .m_tit .num {color:#000000; margin-right:0.7rem;}
.mission_wrap .list .box .desc {background:#303750; padding:0.8rem; box-shadow:inset 0 0 10rem rgba(0, 0, 0, 0.5); min-height:48rem; position:relative; z-index:1; display:flex; align-items: center; justify-content: flex-start; flex-direction:column; height:100%; border-radius:0 0 3rem 3rem;}
.mission_wrap .list .box .desc:before {z-index:-1; content: ''; display: block; position: absolute; padding:0.4rem; border-radius:0 0 3rem 3rem; inset:0; background:linear-gradient(to right, #b28844, #ffdd99, #b28844); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission_wrap .list .box .desc img {display:inline;}
.mission_wrap .list .box .bg {display: flex; flex-direction: column; align-items: center; justify-content: center; padding:4rem 5.2rem; box-shadow:inset 0 0 0 0.2rem #aaaaaa; width:100%; height:100%; border-radius:0 0 2.4rem 2.4rem; background:url('/images/common/event/mission/anniv17/bg_mission.png') 0 0 no-repeat; background-size:100% 100%;}
.mission_wrap .list .box .btn_area {position:relative;}

.mission_wrap .list .mission {width:100%; margin-bottom:2.4rem; position:relative; display:flex; align-items:center; justify-content:flex-start; flex-direction:column; min-height:28.8rem; background:url('/images/common/event/mission/anniv17/bg_ms.jpg') center center no-repeat; background-size:cover; box-shadow:inset 0 0 0 0.8rem #2b3350; border:0.4rem solid #ddc288; border-radius:2.4rem; padding:9.6rem 0.8rem 4.8rem;}
.mission_wrap .list .mission:before { width:168px; height:50px; background:#2b3350; content:''; display:block; position:absolute; left:50%; margin-left:-84px; top:0; border-radius:0 0 16px 16px;}
.mission_wrap .list .mission .txt {text-shadow:0 0 2px rgba(0, 0, 0, 0.3); font-size:22px; color:#000000; letter-spacing:0.005em; line-height:1.36;}
.mission_wrap .list .mission .count {margin-top:0; font-size:51px; color:#223355; font-family:var(--hot); margin-top:6px;}
.mission_wrap .list .mission .count font {color:#553300;}
.mission_wrap .list .btn_modify {transition:none; font-size:14px; color:#ddc288; letter-spacing:0.02em; text-transform:uppercase; position:absolute; top:-0.4rem; width:156px; height:48px; border-radius:0 0 12px 12px; display:flex; align-items:center; justify-content:center; background-position:0 0; background-repeat:no-repeat; background-size:100% auto; background-image:url('/images/common/event/mission/anniv17/btn_modify.png');}
.mission_wrap .list .btn_modify span:before {margin-right:0.8rem; vertical-align:middle; position:relative; top:-2px; content:''; display:inline-block; width:18px; height:16px; background-position:0 0; background-repeat:no-repeat; background-size:100% auto; background-image:url('/images/common/event/mission/anniv17/icon_modify.png');}
.mission_wrap .list .btn_modify:hover {color:#fff; background-position:0 100%;}
.mission_wrap .list .btn_modify:hover span:before {background-position:0 100%;}
.mission_wrap .list .clear_area {padding:0.8rem; z-index:1; width:100%; display:flex; align-items:center; justify-content:space-between; border-radius:2.4rem; border:0.4rem solid #ddc288; background:#2b3350;}
.mission_wrap .list .clear_area > span {font-size:17px; color:#ffffff; letter-spacing:0.02em; text-transform:uppercase; font-weight:700; flex:1; padding:0 2.4rem; text-align:left;}
.mission_wrap .list .clear_area > span font {color:#ddc288;}
.mission_wrap .list .clear_area .btn_clear {display:flex; font-size:17px; font-weight:500; min-width:16.8rem; padding:0 48px 0 12px; position:relative;}
.mission_wrap .list .clear_area .btn_clear:before {content:''; display:block; position:absolute; top:50%; right:1.2rem; margin-top:-12px; width:24px; height:24px; background-image:url('/images/common/event/mission/anniv17/arr_cash.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.mission_wrap .list .clear_area .btn_clear:hover:before {background-position:0 100%;}

.mission_wrap .list .btn_receive {font-size:42px; width:31.2rem; height:31.2rem; border-radius:50%; border:0.2rem solid #cccccc; box-shadow:inset 0 0 0 1rem #aaaaaa; padding:0;}
.mission_wrap .list .btn_receive:after {background: url('/images/common/event/mission/anniv17/btn_obj_t.png') center 2.2rem no-repeat, url('/images/common/event/mission/anniv17/btn_obj_b.png') left 1rem bottom 4rem no-repeat; border-radius:50%; top:1.6rem; bottom:1.6rem; right:1.6rem; left:1.6rem; box-shadow:inset 0 0 0 0.4rem #cccccc;}
.mission_wrap .list .btn_receive:before {animation: aim 100s infinite linear; transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; top:50%; left:50%; margin-left:-60.39%; margin-top:-60.39%; width:120.78%; height:120.78%; background-image: url('/images/common/event/mission/anniv17/btn_obj_holo.png'); background-position:0 0; background-repeat: no-repeat; background-size:100% auto;}
.mission_wrap .list .btn_receive span {transition:all ease-in-out 0.2s; display:block;}
.mission_wrap .list .btn_receive span:after {z-index:2; border-radius:50%; content:''; display:block; width:6rem; height:6rem; background-color:#111b33; background-image:url('/images/common/event/mission/anniv17/obj_receive.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto; position:absolute; left:50%; margin-left:-3rem; bottom:4.5rem;}
.mission_wrap .list .btn_receive:hover {background-color:#331100; color:#ffcc55;}
.mission_wrap .list .btn_receive:hover span {color:#fff;}
.mission_wrap .list .btn_receive:hover:before {background-image:url('/images/common/event/mission/anniv17/btn_obj_holo_on.png');}
.mission_wrap .list .btn_receive:hover span:after {background-color:#331100;}

.mission_wrap .list .reward {position:relative; z-index:1; margin-top:2.4rem;background:#303750; padding:0.8rem; box-shadow:inset 0 0 10rem rgba(0, 0, 0, 0.5); display:flex; align-items: center; justify-content: flex-start; flex-direction:column; border-radius:3rem;}
.mission_wrap .list .reward:before {z-index:-1; content: ''; display: block; position: absolute; padding:0.4rem; border-radius:3rem; inset:0; background:linear-gradient(to right, #b28844, #ffdd99, #b28844); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission_wrap .list .reward .reward_inner {padding:2.4rem 2.4rem 0.2rem; box-shadow:inset 0 0 0 0.2rem #aaaaaa; width:100%; height:100%; border-radius:2.4rem;}
.mission_wrap .list .reward .tit {position:relative; text-transform:uppercase; font-family:var(--hot); font-size:24px; color:#bbbbbb; display:flex; align-items:center; gap:1.2rem;}
.mission_wrap .list .reward .tit:after {content:''; flex:1; height:0.2rem; background:#bbbbbb;}
.mission_wrap .list .reward .reward_inner.no_line .tit:after {display:none;}
.mission_wrap .list .reward .tit span {text-shadow:0 0 2px #000;}
.mission_wrap .list .reward .img {z-index:1; height:14.4rem; 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/anniv17/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/anniv17/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:44px; width:100%; display:flex; align-items:center; justify-content:center; color:#ddc288; font-size:16px; letter-spacing:0.02em;}
.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;}
.mission_wrap .total_reward .btn_receive {padding-left:6.4rem;}
.mission_wrap .total_reward .btn_receive:before {vertical-align:middle; position:absolute; left:4.4rem; text-align:left; top:50%; margin-top:-14px; border-radius:50%; content:''; display:inline-block; width:28px; height:28px; background-color:#111b33; background-image:url('/images/common/event/mission/anniv17/obj_receive02.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.mission_wrap .total_reward .btn_receive:hover:before {background-color:#331100;}
.mission_wrap .total_reward .btn_receive.end {padding-left:3rem; text-align:center;}
.mission_wrap .total_reward .btn_receive.off {padding-left:3rem; text-align:center;}
.mission_wrap .total_reward .btn_receive.end:before, .mission_wrap .total_reward .btn_receive.off:before {display:none;}

.go_view {z-index:1; flex-shrink:0; width:36px; height:36px; border-radius:50%; font-size:0; color:transparent; background-image:url('/images/common/event/mission/anniv17/btn_view.png'); background-position:0 0; background-size:100% auto; background-repeat:no-repeat; order:1;}
.go_view:hover {background-position:0 100%;}

.total_reward {position:relative; z-index:1; background:#303750; padding:0.8rem; box-shadow:inset 0 0 10rem rgba(0, 0, 0, 0.5); position:relative; z-index:1; display:flex; align-items: center; justify-content: flex-start; flex-direction:column; border-radius:3rem;}
.total_reward:before {z-index:-1; content: ''; display: block; position: absolute; padding:0.4rem; border-radius:3rem; inset:0; background:linear-gradient(to right, #b28844, #ffdd99, #b28844); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.total_reward .con { width:100%; height:100%; border-radius:2.4rem; background:linear-gradient(to right, #b28844, #c1985f, #b28844); display: flex; align-items: center; justify-content: space-between; padding:2.4rem 6.4rem 0;}
.total_reward .tit {line-height:1.2; margin-top:-2.4rem; text-align:left; flex-shrink:0; font-size:30px; color:#000000; letter-spacing:-0.02em; font-family:var(--hot); text-transform:uppercase; text-shadow:0 1px 0 rgba(255, 255, 255, 0.2);}
.total_reward .tit span {color:#223355;}
.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-size:16px; color:#000; letter-spacing:0.01em; position:relative; z-index:1; padding:0 48px; display:inline-flex; height:52px; align-items:flex-start; justify-content:center;}
.total_reward .reward {flex:1; min-width:0; padding: 0 2.4rem;}
.total_reward .btn_receive {flex-shrink:0; width:264px; height:12rem; margin-top:-2.4rem}
.total_reward .go_view {background-image:url('/images/common/event/mission/anniv17/btn_view02.png'); position:absolute; right:0; top:0; margin-top:-12px;}

/* calendar_wrap */
.calendar_wrap {position:relative; padding-bottom:12rem; background: #553300 url(/images/common/event/mission/anniv17/ptn.png) 0 0 repeat;}
.calendar_wrap .top .con {background:#553300;}
.calendar_wrap .top .m_tit:before {transform-origin: center; animation: detonate 1.1s cubic-bezier(.13,.7,.2,1) both, pulse 3.2s ease-in-out 1.1s infinite, flicker 4.7s steps(1) 1.1s infinite; will-change: transform, filter; z-index:-1; content:''; display:block; position:absolute; left:50%; top:50%; margin-top:-13.2rem; margin-left:-13.2rem; width:26.4rem; height:26.4rem; background:url('/images/common/event/mission/anniv17/bg_day_obj.png'); background-size:100% auto;}
.calendar_wrap .calendar {background:#553300; position:relative; border-radius:3rem; border: 0.4rem solid #ddc288;}
.calendar_wrap .calendar:before {border-radius:2.4rem; top:0.6rem; bottom:0.6rem; right:0.6rem; left:0.6rem;}
.calendar_wrap .calendar .wrap {padding:5rem 5rem 2rem;}
.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:3rem; border:0.4rem solid #ddc288; background:#553300; padding:0.4rem;}
.calendar_wrap .calendar .con:after {content:''; padding-bottom:100%; display:block;}
.calendar_wrap .calendar .con_inner {border-radius:2.2rem; border:0.2rem solid #ddc288; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; flex-direction:column; display:flex; align-items:center; justify-content:flex-end; padding: 6.2% 9.3%;}
.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:6.2%; left:9.3%; right:9.3%; text-align:left; text-transform:uppercase; color:#bbbbbb; font-size:14px; letter-spacing:0.06em; font-weight:500; display:flex; align-items:center;}
.calendar_wrap .calendar .con .day:after {content:''; flex:1; height:0.6rem; background-image:url('/images/common/event/mission/anniv17/bar_day.png'); background-position:0 0; background-repeat:repeat-x; margin-left: 1.4rem; margin-right: -11.3%;}
.calendar_wrap .calendar .con .day span {color:#ddc288; margin-left:0.6rem;}
.calendar_wrap .calendar .con .complete {width:91%; max-width:132px; margin:0 auto;}
.calendar_wrap .calendar .con .fail {width:46%; max-width:66px; margin:0 auto 13.8%;}
.calendar_wrap .calendar .count {font-size:45px; color:#bbbbbb; font-family:var(--hot);}
.calendar_wrap .calendar .count font {color:#ee7799;}
.calendar_wrap .btn_day02 {width:100%; max-width:144px; height:36px; border-radius:1.2rem; font-size:14px; font-weight:500; margin-left:auto; margin-right:auto; padding-top: 0;}
.calendar_wrap .con_inner .today {position:absolute; width:96px; top:-30px; left:50%; margin-left:-48px; display:flex; align-items:center; justify-content:center; height:24px; border-radius:1.2rem 1.2rem 0 0; text-transform:uppercase; color:#000000; font-weight:500; font-size:14px; letter-spacing:0.04em; background:#ddc288;}
.calendar_wrap .calendar .fail .con {background:#2b3350; border-color:#bbbbbb;}
.calendar_wrap .calendar .fail .con_inner {border-color:#bbbbbb;}
.calendar_wrap .calendar .fail .con .day:after {background-image:url('/images/common/event/mission/anniv17/bar_day02.png');}
.calendar_wrap .calendar .ing .con {background:#2b3350; border-color:#bbbbbb;}
.calendar_wrap .calendar .ing .con_inner {border-color:#bbbbbb; justify-content:center;}
.calendar_wrap .calendar .ing .con .day:after {background-image:url('/images/common/event/mission/anniv17/bar_day02.png');}
.calendar_wrap .ing .con_inner .today {background:#bbbbbb;}
.calendar_wrap .calendar .bin .con {border-color:rgba(255, 255, 255, 0); background-color:rgba(137, 96, 48, 0.3);}
.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:25px; color:#ddc288; font-family:var(--hot); letter-spacing:-0.01em;}
.calendar_wrap .calendar .today .num {top:-1%; padding-top:0; width:24.596%; height:20.69%;}

.calendar_wrap .reward_wrap {position:relative; margin-top:4.8rem; padding-bottom:0; padding-top:0; font-size:0;}
.calendar_wrap .reward_wrap .con_wrap { display:inline-block; position:relative; width:calc((100% - 4rem) / 2); margin:0; vertical-align: top;}
.calendar_wrap .reward_wrap .tit {position:static; margin-top:0; line-height:1; text-align:left;}
.calendar_wrap .reward_wrap .tit span {display:block; color:#513100;}
.calendar_wrap .reward_wrap .reward {margin-top:-3rem;}
.calendar_wrap .reward_wrap .reward .name {height:auto; display:block; position:absolute; top:4.2rem; right:3rem; max-width:50%; text-align:right;}
.calendar_wrap .reward_wrap .reward .name .go_view {top:50%; margin-top:-18px;}
.calendar_wrap .reward_wrap .con {display:block; padding:2.7rem 2.7rem 4rem;}
.calendar_wrap .reward_wrap .btn_receive {width:100%; max-width:420px; height:72px; border-radius:2rem; margin-top:1.2rem;}
.calendar_wrap .reward_wrap .btn_receive:after {border-radius:1.4rem;}
.calendar_wrap .reward_wrap .btn_receive:before {vertical-align:middle; position:relative; top:-1px; margin-right:1.2rem; border-radius:50%; content:''; display:inline-block; width:28px; height:28px; background-color:#111b33; background-image:url('/images/common/event/mission/anniv17/obj_receive02.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.calendar_wrap .reward_wrap .btn_receive:hover:before {background-color:#331100;}
.calendar_wrap .reward_wrap .btn_receive.end:before, .calendar_wrap .reward_wrap .btn_receive.off:before {display:none;}

.calendar_wrap .reward_wrap .con_wrap.final {margin-left:4rem;}

/* footer */
footer {width:100%; padding:8rem 2.4rem; z-index:2; color:#aaaaaa; font-size:14px; font-family:var(--rbt);}
footer > img {margin-bottom:2.4rem;}
footer .footer {position:relative;}
footer .footer .copy {margin-top:0.7rem;}
footer .footer .cs a {color:#ffee00;}
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; background:#303750; border-radius:3rem;}
.pop_up .pop_con {position:relative; z-index:1;}
.pop_up .pop_con h2 {padding:0 5.6rem; z-index: 2; position:relative; gap:0.7rem; text-shadow:0 1px 0 rgba(255, 255, 255, 0.2); font-size:27px; color:#223355; font-family:var(--hot); box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.1); display:flex; align-items:center; justify-content:center; text-transform:uppercase; border-radius:2.4rem 2.4rem 0 0; width:100%; height:48px; background:url('/images/common/event/mission/anniv17/ptn.png') 0 0 repeat , linear-gradient(to right, #b38945, #c09d60 , #b38945);}
.pop_up .pop_con h2 span {color:#000000;}
.pop_up .pop_close {top:50%; margin-top:-10px; color:transparent; font-size:0; right:2.4rem; transition:none; position:absolute; width:24px; height:21px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/anniv17/pop_close.png');}
.pop_up .pop_close:hover {background-position:0 100%;}
.pop_up .pop_con .desc {background:#303750; padding:0.4rem; overflow:hidden; box-shadow:inset 0 0 10rem rgba(0, 0, 0, 0.5); position:relative; z-index:1; border-radius:0 0 3rem 3rem;}
.pop_up .pop_con .desc:before {z-index:1; content: ''; display: block; position: absolute; padding:0.4rem; border-radius:0 0 3rem 3rem; inset:0; background:linear-gradient(to right, #b28844, #ffdd99, #b28844); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.pop_up .pop_con .bg {padding:3.2rem; background:url('/images/common/event/mission/anniv17/pop_obj_lt.png') 0 0 no-repeat, url('/images/common/event/mission/anniv17/pop_obj_rt.png') right 0 no-repeat, url('/images/common/event/mission/anniv17/pop_obj_lb.png') 0 bottom no-repeat, url('/images/common/event/mission/anniv17/pop_obj_rb.png') right bottom no-repeat;}
.pop_up .pop_con .box {z-index: 2; position:relative; border-radius:3rem; background:#2b3350; border:0.4rem solid #ddc288;}
.pop_up .pop_con .box .txt {font-size:17px; color:#fff; letter-spacing:0.01em; padding:1.5rem 2.4rem; position:relative; border-bottom:0.4rem solid #ddc288;}
.pop_up .pop_con .box .txt span {color:#ddc288;}
.pop_up .pop_con .box .cash {height:13.9rem; display:flex; align-items:center; justify-content:center; color:#ee7799; font-size:54px; font-family:var(--hot); letter-spacing:-0.02em;}
.pop_up .pop_con .box .cash span {margin-right:1rem;}
.pop_up .pop_con .box .cash img {vertical-align:middle;}
.pop_up .pop_con .day {gap: 1rem; font-size:33px; color:#ddc288; font-family:var(--hot); 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; border:0.4rem solid #ddc288;}
.pop_up .pop_con .day span {color:#ee7799;}
.pop_up .pop_con .reward {position:relative; border-radius:2.4rem; margin:0.8rem; padding:2.6rem; border:0.2rem solid #aaaaaa; background:url('/images/common/event/mission/anniv17/obj_item_lt.png') 1.2rem 1.2rem no-repeat , url('/images/common/event/mission/anniv17/obj_item_rt.png') right 1.2rem top 1.2rem no-repeat , url('/images/common/event/mission/anniv17/obj_item_rb.png') right 1.2rem bottom 1.2rem no-repeat , url('/images/common/event/mission/anniv17/obj_item_lb.png') left 1.2rem bottom 1.2rem no-repeat;}
.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:1.2rem; font-size:16px; color:#fff; letter-spacing:0.02em;}
.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:18px; font-weight:900; letter-spacing:0.015em; display:inline-flex; align-items:center; justify-content:space-between; flex:1; height:60px; border-radius:1.2rem;}
.pop_up .btns button span {background: linear-gradient(to bottom, #000 1%, #553300); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; margin-left:0;}
.pop_up .btns .btn1:hover {background:#2b3350;}
.pop_up .btns .btn1:hover span {background:#ffcc55;}
.pop_up .btns .btn2 {background:#aaaaaa; border-color:#c0c0c0;}
.pop_up .btns .btn2 span {background: linear-gradient(to bottom, #000 1%, #333);}
.pop_up .btns .btn2:hover {background:#2b3350;}
.pop_up .btns .btn2:hover span {background:#aaaaaa;}

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

.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;}
.pop_clear .btns button > span {word-break:break-word; font-size:13px;}
.pop_clear .btns button font {display:block; padding-right:30px; position:relative; font-size:24px; font-weight:900; letter-spacing:0;}
.pop_clear .btns .btn1 font span {background:#553300;}
.pop_clear .btns .btn2 font span {background:#333333;}
.pop_clear .btns button font:after {content:''; display:block; position:absolute; top:50%; right:0; width:24px; height:24px; margin-top:-12px; background-image:url('/images/common/event/mission/anniv17/pb_cash02.png'); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.pop_clear .btns .btn2 font:after {background-image:url('/images/common/event/mission/anniv17/pb_cash03.png');}
.pop_clear .btns button:hover font:after {background-position:0 100%;}

.pop_all #pageinfo {background:#ddc288; 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:#553300; letter-spacing:0.02em; font-weight:500;}
.pop_all #pageinfo span {margin-right:0.4rem; color:#000;}
.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:35%; display:block; width:36px; height:48px; background-position:0 0; background-size:100% auto; background-repeat:no-repeat; background-image:url('/images/common/event/mission/anniv17/pop_arr.png');}
.pop_all .img_list .slick-prev {left:-6.2rem;}
.pop_all .img_list .slick-next {right:-6.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-bottom:3.4rem;}

.pop_detail .pop_con .reward {margin:0.4rem; padding:3.4rem 1.6rem;}
.pop_detail .pop_con h2 {font-family:var(--gre); font-size:17px; font-weight:500; letter-spacing:0.01em; height:auto; min-height:48px; padding:1.2rem 5.6rem 1rem;}

.pop_history .pop_layout {width:792px;}
.pop_history .pop_con .desc {padding:3.2rem 1.4rem 3.2rem 3.2rem;}
.pop_history .list {height:100%; padding-right:2.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: #bbbbbb; border:0.2rem solid #ddc288; box-shadow:inset 0 0 0 0.2rem #2b3350;}
.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; font-size:15px; color:#fff; 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:2rem 2rem 0 0; overflow:hidden;}
.pop_history .list li.top div {vertical-align:top; height:36px; background:#999ab8; font-weight:700; color:#2b3350; text-transform:uppercase; padding-top: 4px;}
.pop_history .list li.bottom {height:6rem; margin-bottom:1px; background:#53547c;}
.pop_history .list li.bottom:last-child {border-radius:0 0 2rem 2rem;}
.pop_history .list li.bottom div {vertical-align:top; line-height:1.2;}
.pop_history .list li.bottom .mission {text-align:left;}
.pop_history .list li.bottom .item {color:#bbbbbb;}
.pop_history .list li.bottom .date {font-size:14px; color:#ddc288;}
.pop_history .list li.bottom .date .time {color:#bbbbbb;}
.pop_history .list li.none {height:51.6rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; text-transform:uppercase;}

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

.cha03 {width:11%;}
.cha04 {width:20%;}

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

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

@media screen and (max-width: 1900px) {
.light03 {right:-6%;}

.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;}
.util .btn_history {flex-direction:column;}

.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; transform:none; margin:0 2.4rem;}
.top .etc {position:relative; top:auto; right:auto; transform:none; margin:0 2.4rem;}
}

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

.mission_wrap .list .box .bg {padding:4rem 2rem;}
}

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

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

@media screen and (max-width: 1280px) {
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 {font-size:14px; color:#000000; letter-spacing:0.02em; line-height:1.14; font-weight:500; text-transform:uppercase; flex-direction:column; display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:1.2rem; background:#ddbb66; border:0.2rem solid #ffcc55; box-shadow:inset 0 0 0 0.2rem #553300, 0 1rem 2rem rgba(255, 255,255, 0.2);}
.btn_history:before {content:''; display:block; margin:0 auto 1rem; width:2rem; height:2.4rem; background:url('/images/common/event/mission/anniv17/icon_history.png') 0 0 no-repeat; background-size:100% auto;}
.btn_history span {color:#553300;}
.btn_history:hover {background:#ddbb66;}
.btn_history:hover span {color:#553300;}

.cha01 .eft {width:44%; top:16%; right:-20%;}
.cha01 .float {left:0; top:12%;}
.cha02 .float {right:0; top:10%;}

.light01 {top:12%;}
.light02 {top:12%;}
.light03 {top:25%; right:-12%;}
.light04 {top:14%;}

.section01 .title_wrap .tit {height:77%;}
.section01 .title_wrap .user_info {flex: none; z-index:1; word-break: break-word; display:block; position:relative; margin-bottom:3rem; box-shadow:0 0 10rem rgba(85, 10, 153, 0.4) , inset 0 0 4rem rgba(0, 0, 0, 0.4); background:rgba(48, 55, 80, 0.5); padding:1.4rem 3rem 1.2rem; border-radius:3.6rem; width:100%; max-width:56rem; font-size:0; height:7.2rem; display:flex; align-items:center; justify-content:center;}
.section01 .title_wrap .user_info:before, .section01 .title_wrap .user_info:after {z-index:-1; content: ''; display: block; position: absolute; padding:0.4rem;}
.section01 .title_wrap .user_info:before {border-radius:2.8rem; inset: 0.8rem; background:linear-gradient(to bottom, #bbbbbb, #aaaaaa); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.section01 .title_wrap .user_info:after {border-radius:3.6rem; inset: 0; background:linear-gradient(to bottom, #b28844, #ffdd99); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.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 .user:after {content:''; display:block; position:absolute; top:50%; margin-top:-0.2rem; right:0; width:0.4rem; height:0.4rem; border-radius:50%; background:#ddc288;}
.section01 .title_wrap .user_info .cash {margin-top:0;}
.section01 .title_wrap .date {position:relative; bottom:auto; left:auto; transform:none; margin:0 auto 4.55%;}

.total_reward .con {display:block; padding:2.4rem;}
.mission_wrap .total_reward .btn_receive {width: 100%; max-width: 420px; height: 72px; border-radius: 2rem; margin-top: 1.2rem;}
.mission_wrap .total_reward .btn_receive:after {border-radius:1.4rem;}
.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 {padding-left:3rem; text-align:center; margin-top:4.8rem;}
.mission_wrap .total_reward .btn_receive:before {position:relative; top:-1px; left:auto; margin-right:1.2rem; margin-top:0;}
.total_reward .tit span {display:block;}

.calendar_wrap .calendar ul > li {width:calc(100% / 5);}
.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; padding-top:3rem;}
header .util {left:auto; transform:none; right:1.2rem; top:1.2rem; padding:0; height:auto;}
header .util a {font-size:14px;}
header .util .btn_login {min-width:54px; padding:4px 10px 0 12px; height:54px; border-radius:1rem; width:auto;}

.cha01 {left:-6%; width:34%;}
.cha01 .eft {right:-18%;}
.cha02 {right:-10%; width:48%;}

.cha01 .float {top:-10%;}
.cha02 .float {top:-10%;}

.light01 {left:-8%; top:20%;}
.light02 {left:-8%; top:20%;}
.light03 {top:24%; right:8%;}
.light04 {right:-5%; top:15%;}

.section01 .title_wrap {width:100%;}

.top .m_tit .txt img {height:45px;}
.top .remain {margin:0 1.2rem;}
.top .etc {margin:0 1.2rem;}

.btn_start {width:280px; height:280px;}
.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);}
.calendar_wrap {padding-bottom:25%;}
}

@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:2.5rem; height:36px;}

.btn_start {width:31.2rem; height:31.2rem;}
.btn_start {font-size:4.1rem;}
.btn_receive {font-size:3.3rem;}
.btn_history {font-size:2.1rem; width:60px; height:60px; bottom:2.4rem; right:2.4rem;}

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

.section01 {height:auto; max-height:none;}
.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:4.5rem;}
.section01 .title_wrap .tit .num {height:auto;}
.section01 .title_wrap .tit .cake {height:auto;}
.section01 .title_wrap .tit span img {height:auto; max-width:100%;}
.section01 .title_wrap .bi img {width:24rem;}

.top .inner {height:86px;}
.top .m_tit .day {padding-top:2rem;}
.top .m_tit .day span {font-size:8rem;}
.top .m_tit .txt img {height:6.4rem;}
.top .remain {font-size:2.8rem; height:56px;}
.top .remain .time {margin-left:2.4rem;}
.top .etc {height:56px;}
.top .etc .count_wrap {font-size:2.8rem;}

.mission_wrap .list .box .m_tit {font-size:3.6rem; height:40px;}

.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.1rem;}
.mission_wrap .list .mission {padding-top:10.2rem;}
.mission_wrap .list .mission .txt {font-size:3.1rem;}
.mission_wrap .list .btn_modify {font-size:2.3rem; width:117px; height:36px;}
.mission_wrap .list .mission:before {width: 124px; height: 38px; margin-left:-62px;}

.mission_wrap .list .reward .tit {font-size:3.3rem;}
.mission_wrap .list .reward .name {font-size:2.5rem;}

.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 .tit {font-size:3.9rem;}
.total_reward .reward .name {font-size:2.5rem;}
.mission_wrap .total_reward .btn_receive {height:50px;}

.calendar_wrap .calendar .wrap {padding-bottom:0;}
.calendar_wrap .calendar ul > li {width:calc(100% / 4); margin-bottom:6rem;}
.calendar_wrap .calendar .con .day {font-size:2.3rem;}
.calendar_wrap .calendar .con .day:after {background-size:0.1rem auto;}
.calendar_wrap .btn_day02 {height:30px; font-size:2.3rem;}
.calendar_wrap .con_inner .today {font-size:2.3rem; height:20px; top:-24px; padding-top:2px; width:86px; margin-left:-43px;}
.calendar_wrap .calendar .count {font-size:7.2rem;}
.calendar_wrap .calendar .bin .day {font-size:3.4rem;}

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

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_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:3.6rem; 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:2.6rem;}
.pop_up .pop_con .reward {background-size:1.2rem auto;}
.pop_up .pop_con .reward .name {font-size:2.5rem;}
.pop_up .btns button {font-size:2.7rem;}
.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 > span {font-size:2.2rem;}
.pop_clear .btns button {height:auto;}
.pop_clear .btns button font {font-size:3.3rem;}

.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 > div {font-size:2.3rem;}
.pop_history .list li.bottom .date {font-size:2.3rem;}
.pop_history .list li.bottom .date .time {font-size: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;}

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

@media screen and (max-width: 540px) {
.calendar_wrap .calendar ul > li {width:calc(100% / 2);}
.calendar_wrap .calendar .con {left:1rem;}
.top .inner {height:70px;}
.top .m_tit .txt img {height:4.4rem;}

.top .sub .inner {display:block; height:auto;}
.top .remain {margin:0 auto 2.4rem;}
.top .etc {margin:0 auto;}

.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) {
.calendar_wrap .calendar ul > li {width:50%;}

.top .inner {height:60px;}
.top .m_tit .txt img {height:3.4rem;}
}

@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 balloonFloat {
	0%, 100% {transform:translateY(0) rotate(-1deg);}
	50% {transform:translateY(-4%) rotate(1deg);}
}

@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 titleNumShine {
	0%, 100% {opacity:0;}
	8% {opacity:1;}
	14% {opacity:0.2;}
	22% {opacity:1;}
	28% {opacity:0.4;}
	36% {opacity:1;}
	48% {opacity:0.1;}
	60% {opacity:1;}
	72% {opacity:0.3;}
	82% {opacity:1;}
	92% {opacity:0;}
}

@keyframes numCandle {
	0% {transform:translateY(-180%) rotate(-10deg); opacity:0;}
	20% {opacity:1;}
	65% {transform:translateY(0) rotate(6deg);}
	78% {transform:translateY(0) rotate(-4deg);}
	88% {transform:translateY(0) rotate(2deg);}
	95% {transform:translateY(0) rotate(-1deg);}
	100% {transform:translateY(0) rotate(0); opacity:1;}
}

@keyframes lightBurst {
	0% {transform:scale(0); opacity:0; filter:brightness(3) blur(3px);}
	12% {transform:scale(1.9); opacity:1; filter:brightness(2.4) blur(0);}
	28% {transform:scale(1); filter:brightness(0.85);}
	42% {filter:brightness(1.8);}
	56% {filter:brightness(0.95);}
	70% {filter:brightness(1.5);}
	84% {filter:brightness(1.1);}
	100% {transform:scale(1); opacity:1; filter:brightness(1);}
}

@keyframes fire {
  0%   { opacity: 0; transform: scale(.02); }
  35%  { opacity: 1; }
  55%  { transform: scale(1.14); }
  72%  { transform: scale(.96); }
  86%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}