@charset "utf-8";
@import url("https://use.typekit.net/edy4qta.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 {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

/* root */
:root {
--rbt : 'roboto', sans-serif; 
--ko : 'kumar-one', sans-serif; 
--hel : 'helvetica-neue-world', 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: 'kumar-one', sans-serif; background:#010917;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;} 
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 400;  font-family: 'kumar-one';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'kumar-one'; 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: 'kumar-one';}

.mobile {display:none;} 
.s_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}

.inner {max-width:1760px; margin-left:auto; margin-right:auto; padding-left:3rem; padding-right:3rem;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

.cha {position:absolute;}
.cha01 {bottom:0; left:-60%;}
.cha02 {bottom:0; right:-70%;}
.cha03 {bottom:0; left:0;} 
 
.moon { top:0; left:-14%; animation: float 3s ease-in-out infinite;}
.sway {position:absolute; top:0;}
.sway span {position:absolute; top:0; display: inline-block; width: max-content;     transform-origin: top;}
.sway_l {left:7.6%; width:492px;}
.sway_r {right:11.6%; width:642px;}

.sway_l .light {left:0;}
.sway_l .lamp {left:-166%; animation: star 4s infinite ease-in-out;}
.sway_l .lamp img {margin-top:-10%;}
.sway_l .sw01 {left:32.3%; animation: star 2.4s infinite ease-in-out;}
.sway_l .sw01:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/ramadan/lamp02_light.png') 0 0  no-repeat; background-size:100% auto; animation: blink-2 2s infinite;}
.sway_l .sw02 {left:38.6%; animation: star 2.2s infinite ease-in-out;}
.sway_l .sw03 {left:82.9%; animation: star 1.8s infinite ease-in-out;}
.sway_l .sw04 {left:17.8%; animation: star 2s infinite ease-in-out;}
.sway_l .sw05 {left:45.7%; animation: star 2s infinite ease-in-out;}

.sway_r .light {right:13%;}
.sway_r .sw06 {right:0; animation: star 2.4s infinite ease-in-out;}
.sway_r .sw06:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/ramadan/lamp02_light.png') 0 0  no-repeat; background-size:100% auto; animation: blink-2 2s 1s infinite;}
.sway_r .sw07 {right:37.2%; animation: star 1.8s infinite ease-in-out}
.sway_r .sw08 {right:9.5%; animation: star 2s infinite ease-in-out;}
.sway_r .sw09 {right:83.4%; animation: star 2s infinite ease-in-out;}
.sway_r .sw10 {right:0; animation: star 2.2s infinite ease-in-out; }
.sway_r .lamp {right:-7%;animation: star 2.4s infinite ease-in-out;}
.sway_r .lamp img {margin-top:-38%;}

.ms_obj {position:absolute; bottom:0; right:0; width:22.89%; max-width:588px; animation: float 3s ease-in-out infinite;}
.ms_obj:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/mission/ramadan/obj01_light.png') 0 0  no-repeat; background-size:100% auto;}

.obj_sc04 {position:absolute; top:0; right:-1%; z-index:-1; width:23.75%; max-width:610px; animation: star 2.4s infinite ease-in-out; transform-origin: top;}

.cal_obj {position:absolute; top:-4%; left:11.3%; z-index:-1; width:362px; position:relative;}
.cal_obj:before, .cal_obj:after {content:''; display:block; position:absolute; background-repeat:no-repeat; background-size:100% auto; background-position:center center;}
.cal_obj:before {background-image:url('/images/common/event/mission/ramadan/sc03_light01.png'); width:100%; padding-top: 115.75%; margin-top: -37%; margin-left: -10%;}
.cal_obj:after {background-image:url('/images/common/event/mission/ramadan/sc03_light02.png'); width: 350.553%; padding-top: 214.365%; margin-left: -79%; margin-top: -18%; animation: blink-2 5s infinite;}
.cal_obj img {position:absolute; top:0; display: inline-block; width: max-content; margin-top:-29%; transform-origin: top;}
.cal_obj .sc03_line01 {left:0; width:34.5%; animation: star 2s infinite ease-in-out;}
.cal_obj .sc03_line02 {left:39.2%; width:19.06%;    animation: star 2.2s infinite ease-in-out;}
.cal_obj .sc03_line03 {left:31.2%; width:68.5%;    animation: star 2.4s infinite ease-in-out;}

.fiu {animation: fiu 0.3s;}


.container {overflow:hidden; position:relative; background:#000;}
.all_wrap {background: #010d1a;}

.btn {line-height:1.3; text-transform:uppercase; transition:none; background-color:rgba(255, 255, 255, 0); position:relative; font-size:20px; letter-spacing:0.1em; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; }
.btn span {display:block; background: linear-gradient(to bottom, #fff, #f4e084, #f4e084); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn:hover {background-position:0 100%;}

.etc .btn {width:27.8rem; height:10.2rem; background-image:url('/images/common/event/mission/ramadan/btn_day.png'); flex-direction:column;}

.btn_day02 {font-family:var(--hel); font-size:13px; font-weight:600; width:134px; height:26px; background-image:url('/images/common/event/mission/ramadan/btn_day02.png'); letter-spacing:0.05em;}
.btn_day02 span {background: linear-gradient(to bottom, #fff, #ffc64c, #ffc64c);}

.btn_modify {padding-left:20px; width:134px; height:32px; background-image:url('/images/common/event/mission/ramadan/btn_modify.png'); font-size:13px; font-family:var(--hel); font-weight:600; letter-spacing:0.05em; }
.btn_modify:before {content:''; display:block; position:absolute; width:16px; height:15px; left:26px; top:50%; margin-top:-8px;   background:url('/images/common/event/mission/ramadan/icon_modify.png') 0 0 no-repeat; background-size:100% auto;}
.btn_modify span {background: linear-gradient(to bottom, #fff, #ffc64c, #ffc64c);}

.btn_receive {width:30.8rem; height:14.2rem; background-image:url('/images/common/event/mission/ramadan/btn_reward.png'); flex-direction:column; font-size:24px; letter-spacing:0.05em;}
.btn_receive span {background: linear-gradient(to bottom, #fff, #7fd3ff, #7fd3ff);}
.btn_receive:hover span {background: linear-gradient(to bottom, #fff, #ffefc8, #ffefc8);}

.btn_clear {width:34.8rem; height:10.2rem; background-image:url('/images/common/event/mission/ramadan/btn_clear.png'); flex-direction:column; padding-bottom:0.8rem;}
.btn_clear span {background: linear-gradient(to bottom, #fff, #7fd3ff, #7fd3ff);}
.btn_clear font {margin-top:2px; padding-bottom:0.5rem; font-size:18px; color:#ffd560; font-family:var(--hel); font-weight:300; text-transform:uppercase; display:inline-flex; min-width:17rem; height:24px; align-items:center; justify-content:center; border-radius:12px; border:1px solid #ffd560; background:#000;}
.btn_clear:hover span {background: linear-gradient(to bottom, #fff, #ffefc8, #ffefc8);}

.btn_receive02 {width:34.8rem; height:10.2rem; background-image:url('/images/common/event/mission/ramadan/btn_clear.png'); flex-direction:column; padding-bottom:0.8rem;}
.btn_receive02 span {background: linear-gradient(to bottom, #fff, #7fd3ff, #7fd3ff);}
.btn_receive02 font {margin-top:2px; padding-bottom:0.5rem; font-size:18px; color:#ffd560; font-family:var(--hel); font-weight:300; text-transform:uppercase; display:inline-flex; min-width:170px; height:24px; align-items:center; justify-content:center; border-radius:12px; border:1px solid #ffd560; background:#000;}
.btn_receive02:hover span {background: linear-gradient(to bottom, #fff, #ffefc8, #ffefc8);}

.btn_receive02.off {background-image:url('/images/common/event/mission/ramadan/btn_receive_off.png');     cursor: default;} 
.btn_receive02.off span {background:#79745c;}

.btn_receive02.end {background-image:url('/images/common/event/mission/ramadan/btn_receive_end.png');     cursor: default;} 
.btn_receive02.end span {background:#b2a56b;}


.btn_round {z-index:1; display:inline-block; position:relative; width:30rem; height:30rem; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.btn_round > div {text-transform:uppercase; transition:all ease-in-out 0.2s; position:relative; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative; border-radius:50%; width:100%; height:100%;}
.btn_round.btn_start {letter-spacing:0.05em; border-radius:50%; padding-top:2rem; font-size:26px; background-image:url('/images/common/event/mission/ramadan/btn_start.png'); background-size:100% auto; box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);}
.btn_round.btn_start:before, .btn_round.btn_start:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.btn_round.btn_start:before {background-image:url('/images/common/event/mission/ramadan/btn_start_rotate01.png');  animation: spin 30s infinite linear;}
.btn_round.btn_start:after {background-image:url('/images/common/event/mission/ramadan/btn_start_rotate02.png');animation: aim 10s infinite linear;}
.btn_round.btn_start span {display:block; background: linear-gradient(to bottom, #ffea00, #00ff90, #ffea00); z-index:1; position:relative;}
.btn_round.btn_start span:after {margin:0 auto; content:''; display:block; width:2.1rem; height:1.7rem; background-size:100% auto; background-image:url('/images/common/event/mission/ramadan/icon_down.png');}
.btn_round.btn_start:hover:before {background-position:0 100%;}
.btn_round.btn_start:hover span {color:#fff;}
.btn_round.btn_start:hover span:after {background-position:0 100%;}

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


.btn_top {transition:none; position:fixed; padding-bottom:5px; z-index:11; right:2.5rem; bottom:2.8rem; display:block; width:13rem; height:7.4rem; display:flex; align-items:center; justify-content:center; background-image:url('/images/common/event/mission/ramadan/btn_top.png'); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.btn_top span {filter: drop-shadow(2px 5px 2px rgba(0, 0, 0, 04)); font-weight:800; font-family:var(--hel); color:#fff; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; background: linear-gradient(to bottom, #ffcccc , #ffdd78); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_top:hover {background-position:0 100%;}

.btn_history {transition:none; position:fixed; padding-bottom:5px; z-index:11; right:2.5rem; top:50%; margin-top:-3.7rem; display:block; width:13rem; height:7.4rem; display:flex; align-items:center; justify-content:center; background-image:url('/images/common/event/mission/ramadan/btn_top.png'); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.btn_history:after {content:''; display:block; width:1.7rem; height:5.1rem; background:url('/images/common/event/mission/ramadan/btn_history_obj.png') 0 0 no-repeat; background-size:100% auto; position:absolute; bottom:-5.1rem; left:50%; margin-left:-0.85rem;}
.btn_history span {filter: drop-shadow(2px 5px 2px rgba(0, 0, 0, 04)); font-weight:800; font-family:var(--hel); color:#fff; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; background: linear-gradient(to bottom, #ffcccc , #ffdd78); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_history:hover {background-position:0 100%;}

header { text-align:center; position:absolute; top:0; left:0; right:0; z-index: 20; padding:3rem 3rem 0;}
header .user_info {padding:0 1.5rem 1.1rem 3.3rem; font-family:var(--hel); position:absolute; top:3rem; left:3rem; width:330px; height:63px; display:flex; align-items:center; justify-content:space-between; background:url('/images/common/event/mission/ramadan/bg_user.png') 0 0 no-repeat; background-size:100% auto;}
header .user_info .user {color:#fff; font-size:16px; }
header .user_info .cash {letter-spacing:0.05em; text-transform:uppercase; padding:0 1rem 2px; min-width:12rem; height:30px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fdff74; border-radius:15px; background: linear-gradient(to bottom, #2f2b28 ,#4e3210);}
header .user_info .cash span {margin:0 3px;}
header .btn_login {width:21.8rem; height:9.2rem; background-image:url('/images/common/event/mission/ramadan/btn_login.png'); position:absolute; top:2.3rem; right:1.8rem;}


footer {width: 100%; padding:0 2.4rem 9.6rem; left:0; right:0; bottom:0; position:absolute; font-family:'Roboto'; z-index:2;}
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 12px; color:#fff; position: relative; letter-spacing:0.01em;}
footer .footer .cs > a {color:#ffdd00; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 7px; font-size:11px; color:#b7b7b7;}
.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 {padding:0.3rem; width:600px; left:50%; top:50%; transform:translate(-50% , -50%); z-index: 99; border-radius:1rem; position: relative; background: #152648 url(/images/common/event/mission/ramadan/ptn.png) 0 0 repeat; box-shadow: inset 0 5px 3px rgba(0, 0, 0, 0.6), 5px 5px 5px rgba(0, 0, 0, 0.5); position: relative;}
.pop_up .pop_layout:after {border-radius:1rem; content: ''; position: absolute; inset:0; width:100%; height:100%; padding:0.3rem; background: linear-gradient(to bottom, #ffdd79, #de9400);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}

.pop_up .pop_close {border-radius:1rem; box-shadow:5px 2px 5px rgba(0, 0, 0, 0.2); top:50%; margin-top:-2.2rem; right:1.3rem; position:absolute; cursor:pointer; width:4.4rem; height: 4.4rem; font-size: 0; text-indent: -99999px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/ramadan/pop_close.png'); background-size:100% auto;}
.pop_up .pop_close:hover {background-position:0 100%;}

.pop_up .pop_con {position: relative; z-index: 1;}
.pop_up .pop_con .desc {padding:5rem 5.3rem; position: relative;}
.pop_up .pop_con .txt {min-height:5rem; padding:0.8rem 2rem 1.2rem; display:flex; align-items:center; justify-content:center; font-family:var(--hel); border-bottom:1px solid #6f6124; letter-spacing:0.02em; position:relative; word-break: break-word; font-size:18px; color:#fff; background:#191400 url(/images/common/event/mission/ramadan/ptn.png) 0 0 repeat;; border-radius:1rem 1rem 0 0;}
.pop_up .pop_con .day {text-transform:uppercase; z-index:1; position:absolute; top:-9rem; left:50%; margin-left:-5rem; padding-top: 1.7%; display:flex; align-items:center; justify-content:center; flex-direction:column; width:10rem; height:10rem; box-shadow:2px 5px 3px rgba(0, 0, 0, 0.6); border-radius:50%; background:url('/images/common/event/mission/ramadan/bg_day.png') 0 0 no-repeat; background-size:100% auto;}
.pop_up .pop_con .day span {font-size:32px; letter-spacing:0.05em; line-height:1.2; background: linear-gradient(to bottom, #fff, #f4e188);-webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));}
.pop_up .pop_con .day span:first-child {font-size:16px;}

.pop_up .pop_con h2 {padding-top:0.6rem; border-radius:0.8rem 0.8rem 0 0; height:7.2rem; display:flex; align-items:center; justify-content:center; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; position:relative; background:rgba(36, 76, 131, 0.5);}
.pop_up .pop_con h2 span {background: linear-gradient(to bottom, #f8e972, #e69d3d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));}
.pop_up .pop_con .reward {position:relative; background:#000; border-radius:1rem;}
.pop_up .pop_con .reward .name {font-size:14px; color:#e4ca89; font-family:var(--hel); margin-top:3px; letter-spacing:0.04em; padding:0 2.4rem 1.5rem; word-break: break-word;}
.pop_up .pop_con .img {max-width:48rem; position:relative; z-index:1; height:18rem; display:flex; align-items:center; justify-content:center; margin:0 auto; padding:7px 2rem 0;}
.pop_up .pop_con .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.pop_up .pop_con .ms_txt {text-transform:uppercase; margin:0 auto 1.6rem; flex-direction:column; font-size:14px; color:#2f1e03; letter-spacing:0.05em; font-weight:700; font-family:var(--hel); width:22.6rem; height:6.7rem; display:flex; align-items:center; justify-content:center; background:url('/images/common/event/mission/ramadan/bg_pop_ms.png') 0 0 no-repeat; background-size:100% auto;}
.pop_up .pop_con .ms_txt span {font-family:var(--ko); font-weight:400; font-size:28px; margin-bottom:-1rem;}

.pop_up .pop_con .box {padding:0; background:#000; position:relative; border-radius:1rem; }
.pop_up .pop_con .cash {font-family:'Roboto'; min-height:15.3rem; display:flex; align-items:center; justify-content:center; position:relative; font-size:30px; z-index:1; font-weight:500; color:#fffc00;}
.pop_up .pop_con .cash span:after {margin-left:1rem; position:relative; top:-1px; content:''; display:inline-block; vertical-align:middle; width:24px; height:24px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/ramadan/pb_cash01.png');}
.pop_up .btns {font-size:0; margin-left:-2rem; margin-top:2rem;}
.pop_up .btns button {text-transform:uppercase; position:relative; transition:all ease-in-out 0.2s; padding:0 2.4rem 0.4rem; margin-left:2rem; text-align:center; font-size:14px; color:#e4ca89; font-weight:700; font-family:var(--hel); line-height:1.06; display:inline-flex; vertical-align:top; align-items:center; justify-content:space-evenly; width:calc((100% - 4rem) / 2); height:50px; background: linear-gradient(to bottom, rgba(122, 99, 24, 0.72), rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)) , url('/images/common/event/mission/ramadan/ptn04.png') 0 0 repeat, rgba(0, 0, 0, 0.5); border-radius:1rem;} 
.pop_up .btns button:before {border-radius:1rem; content: ''; position: absolute; inset:0; width:100%; height:100%; padding:0.2rem; background: linear-gradient(to bottom, #ffdd79, #de9400);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.pop_up .btns .btn_cancel {color:#a8965a; background: linear-gradient(to bottom, rgba(122, 99, 24, 0.82), rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)), #000;}
.pop_up .btns .btn_cancel:before {background: linear-gradient(to bottom, #6e633e, #3a3a3a);}

.pop_up .btns .btn_reward {text-align:left; color:#3eb4ff; background: linear-gradient(to bottom, rgba(30, 144, 209, 0.72), rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('/images/common/event/mission/ramadan/ptn03.png'), rgba(0, 0, 0, 0.5);}
.pop_up .btns .btn_reward:before {background: linear-gradient(to bottom, #77caff, #0e84cf);}
.pop_up .btns .btn_reward .cash {color:#67ff3e;}
.pop_up .btns .btn_reward .cash span:after {background-image:url('/images/common/event/mission/ramadan/pb_cash02.png');}

.pop_up .btns .btn_complete02 {padding-left:2.2rem; text-align:left; color:#ff8bf1; background: linear-gradient(to bottom, rgba(164, 95, 255, 0.72), rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('/images/common/event/mission/ramadan/ptn03.png'), rgba(0, 0, 0, 0.5);}
.pop_up .btns .btn_complete02:before {background: linear-gradient(to bottom, #bfb6ef, #e282d6);}
.pop_up .btns .btn_complete02 .cash {color:#e2d4ff;}
.pop_up .btns .btn_complete02 .cash span:after {background-image:url('/images/common/event/mission/ramadan/pb_cash03.png');}

.pop_up .btns button:hover {color:#fff; background: linear-gradient(to bottom, #d7aa3d, #453500);}
.pop_up .btns .btn_cancel:hover {background: linear-gradient(to bottom, rgba(122, 99, 24, 0.5), rgba(0, 0, 0, 0.5)) , rgba(0, 0, 0, 0.5);}
.pop_up .btns .btn_reward:hover {background: linear-gradient(to bottom, #1e90d1, #00283e);}
.pop_up .btns .btn_complete02:hover {background: linear-gradient(to bottom, #a462ff, #000000);}

.pop_mission .pop_layout {width:540px;}
.pop_mission .btns button {max-width:145px;}

.pop_clear .pop_con .desc {padding-top:10.9rem;}
.pop_clear .btns button {padding:0 1.2rem 0.4rem; justify-content: space-between; height:60px;}
.pop_clear .btns button .cash {font-size:20px; min-height:0;}


.pop_all .pop_con .desc {padding-top:1.6rem;}
.pop_all #pageinfo {font-size:20px; color:#e4ca89; padding-top:1.6rem;; font-family:var(--hel); letter-spacing:0.04em; font-weight:700;}
.pop_all #pageinfo span {color:#e7a732; margin-right:0.4rem;}
.pop_all #pageinfo font {margin-left:0.4rem;}
.pop_all .img_list .slick-slide {position: relative;}
.pop_all .img_list .slick-arrow {z-index:1; transition:none; font-size:0; color:transparent; position:absolute; top:35%; display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/ramadan/pop_arr.png'); background-color:rgba(255, 255, 255, 0); background-size:100% auto; border-radius:5px; box-shadow:5px 7px 5px rgba(0, 0, 0, 0.7);}
.pop_all .img_list .slick-prev {left:-1.5rem;}
.pop_all .img_list .slick-next {right:-1.5rem; 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 .day {background:url('/images/common/event/mission/ramadan/pop_ms.png') 0 0 no-repeat;}
.pop_all .btns {margin-top:2rem;}

.pop_detail .pop_con .desc {padding:3rem;}
.pop_detail .pop_con .box {padding:6.7rem;}
.pop_detail .pop_con .img {padding:0;}
.pop_detail .pop_con h2 {justify-content:flex-start; font-size:18px; font-weight:700; padding:0 7rem 0 3.3rem; letter-spacing:0.02em; font-family:var(--hel); color:#fff;}
.pop_detail .pop_con h2 span {background:#fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter:none;}

.pop_history .pop_con .desc {padding:3rem;}
.pop_history {font-family:'Roboto';}
.pop_history .list { letter-spacing:0; height: 100%; padding-right: 1.2rem; overflow-y: auto ; max-height:46.4rem;}
.pop_history .list::-webkit-scrollbar {width: 0.5rem; }
.pop_history .list::-webkit-scrollbar-track {border-radius:0.5rem; background:#000;}
.pop_history .list::-webkit-scrollbar-thumb { border-radius:0.5rem; background: linear-gradient(to bottom, #e29208, #f2ff92);  }
.pop_history .list li {border-bottom:1px solid #383838; background:#000; font-size: 0;}
.pop_history .list li.bottom:last-child {border-radius:0 0 1rem 1rem;}
.pop_history .list li > div {align-items: center; justify-content: center; flex-direction: column; height:5rem; padding:0 1rem; display: inline-flex; vertical-align:middle; text-align:center; font-size:12px; color:#c4c4c4;}
.pop_history .list li > div.date { width: 24%; color:#ffc77a; text-transform: uppercase;}
.pop_history .list li > div.date span {display:block; color:#a0937f; margin-top:3px;}
.pop_history .list li > div.item span {display:block; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal; width: 100%; line-height:1;}
.pop_history .list li.bottom > div.date {line-height:1.1;}
.pop_history .list li > div.mission {width:50%; color:#c4c4c4; white-space: normal; word-wrap: normal;}
.pop_history .list li > div.mission span {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-height:1.3; text-align:left; -webkit-box-orient: vertical; word-break: break-word;}
.pop_history .list li > div.item {width: 26%; color:#f4be74;}
.pop_history .list li:last-child { overflow:hidden; }
.pop_history .list li.top {border-radius:1rem 1rem 0 0; overflow:hidden; text-transform:uppercase; height:auto; border-bottom:0; background: #191400 url(/images/common/event/mission/ramadan/ptn.png) 0 0 repeat; padding-top:0; border-bottom: 1px solid #6f6124;}
.pop_history .list li.top div {font-family:var(--hel); letter-spacing:0.1em; height:5rem; font-size:16px;}
.pop_history .list li.top div span {display:inline; line-height:1; color:#a7933d; font-weight:700;}
.pop_history .list li.top > div.mission {border-left:1px solid #6f6124; border-right:1px solid #6f6124;}
.pop_history .list li.none {letter-spacing:0.02em; height: 46.4rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size: 14px; color:#f4be74; text-transform:uppercase; }


.section01 {text-align:center; position:relative; background:#011b2b; text-align:center; overflow:hidden;} 
.section01 .title_wrap {z-index:1; position:relative; padding:22rem 0 13.2rem; display:inline-block;}
.section01 .title_wrap:after {z-index:-1; content:''; display:block; position:absolute; bottom:0; left:0; margin-left:-32.5%; width: 163.99%; height: 121.378%; background:url('/images/common/event/mission/ramadan/bg_tit.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .tit {margin:5rem auto 1.2rem; position:relative;}
.section01 .title_wrap .tit:before {animation:glow 2s ease-in-out infinite; mix-blend-mode:screen; content:''; display:block; position:absolute; top:-6%; right:15%; margin-left:0; width: 117.876%; height: 103.43%; background:url('/images/common/event/mission/ramadan/tit_eft01.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .sub_tit {width:772px; margin:3rem auto 0; position:relative;}
.section01 .title_wrap .sub_tit:after {content:''; display:block; padding-bottom:18.135%;}
.section01 .title_wrap .sub_tit span {font-size:38px; letter-spacing:0.1em; text-transform:uppercase; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:url('/images/common/event/mission/ramadan/bg_sub_tit.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .sub_tit span font {background: linear-gradient(to bottom, #46c4ff, #fff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.section01 .title_wrap .sub_tit span font:last-child {margin-left:7rem; position:relative;}
.section01 .title_wrap .sub_tit span font:last-child:before {content:''; display:block; position:absolute; margin-top:-3.6rem; top:50%; left:-6.6rem; width:5.9rem; height:5.3rem; background:url('/images/common/event/mission/ramadan/ojb_sub_tit.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .date {margin-top:9rem; font-size:25px; color:#87ddff; letter-spacing:0.1rem; text-transform:uppercase; text-shadow:4px 6px 3px rgba(0, 0, 0, 0.5); position:relative;}
.section01 .title_wrap .date:before {mix-blend-mode:screen; content:''; display:block; position:absolute; top:0; top: -240%; left: 50%; margin-left: -75%; width: 152.332%; height: 1040%; background:url('/images/common/event/mission/ramadan/tit_eft02.png') 0 0 no-repeat; background-size:100% auto;}

.top {padding-top:1.5rem; }
.top .inner {position:relative; text-align:center;}
.top .remain {padding:0 3.6rem 0 4rem; top:50%; transform:translate(0 , -50%); font-family:'Roboto'; font-size:18px; letter-spacing:0.1em; color:#fff; text-transform:uppercase; position:absolute; left:3rem; width:283px; height:74px; background:url('/images/common/event/mission/ramadan/bg_time.png') 0 0 no-repeat; background-size:100% auto; display:flex; align-items:center; justify-content:space-between;}
.top .remain .time {color:#f5df84; font-weight:600;}
.top .etc {position:absolute; right:1.8rem; top:50%; transform:translate(0 , -50%);}
.top .m_tit {font-size:42px; color:#2f1e03; letter-spacing:0.1em; text-transform:uppercase; display: flex; align-items: center; justify-content: center;}
.top .m_tit span {background: linear-gradient(to bottom, #f8e972, #a6702a); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter:drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5))}
.top .m_tit .in_dot span span {position:relative; margin-left:1.4rem;}
.top .m_tit .in_dot span span:before {background: linear-gradient(to bottom, #ffae38, #efe08d); box-shadow:0 0 8px rgba(0, 20, 44, 0.5), 2px 3px 2px rgba(0, 0, 0, 0.5); content:''; display:block; position:absolute; width:0.6rem; height:0.6rem; border-radius:50%; top:50%; margin-top:-1.4rem; right:-0.8rem;}
.top .m_tit .in_dot span span:last-child:before {display:none;}
.top .m_tit .day {margin:0 4rem 0 2rem; padding-top: 0.7%; display:flex; align-items:center; justify-content:center; flex-direction:column; width:12.8rem; height:12.8rem; box-shadow:2px 5px 3px rgba(0, 0, 0, 0.6); border-radius:50%; background:url('/images/common/event/mission/ramadan/bg_day.png') 0 0 no-repeat; background-size:100% auto;}
.top .m_tit .day span {line-height:1.2; font-size:42px;  background: linear-gradient(to bottom, #fff, #f4e188); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));}
.top .m_tit .day span:first-child {font-size:22px; margin-bottom:-3px;}
.top .etc {display:flex; align-items:center; justify-content:flex-end;}
.top .etc .count_wrap {height:74px; width:178px; margin-right:-40px; margin-bottom:7px; display:flex; align-items:center; justify-content:center; background:url('/images/common/event/mission/ramadan/bg_line.png') 0 center no-repeat;  }
.top .etc .count {font-size:29px; font-weight:700; letter-spacing:0.1em; font-family:'Roboto'; }
.top .etc .count font {background: linear-gradient(to bottom, #fff, #5d5d5d); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.top .etc .count font:first-child {background: linear-gradient(to bottom, #fff, #97ff29);}

.mission_wrap {background:#101820 url('/images/common/event/mission/ramadan/ptn02.png') 0 0 repeat; position:relative; padding-top:4.5rem; padding-bottom:10rem; z-index:2;}
.mission_wrap:before {box-shadow:0 0 1rem rgba(0, 20, 44, 0.5); content:''; display:block; position:absolute; top:0; left:0; right:0; height:4.5rem; background:url('/images/common/event/mission/ramadan/ptn_ribbon.png') 0 center repeat-x , url('/images/common/event/mission/ramadan/ptn.png') 0 0 repeat; background-color:#0b1d41;}
.mission_wrap:after {height:4.5rem; content: ''; position: absolute; inset:0; padding:1px 0; background: linear-gradient(to right, #cdaa4b, #f8e972, #a6702a);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission_wrap .list_wrap {padding-top:1.5rem; position:relative; overflow:hidden;}
.mission_wrap .list_wrap .inner {position:relative;}
.mission_wrap .list_wrap .slick-list { width:100%; padding-top:5.2rem;}
.mission_wrap .list {margin-left:-4rem; flex-wrap: wrap; display:flex; flex-wrap: wrap;}
.mission_wrap .list li {width:calc(100% / 3); padding-left:4rem; margin-bottom:4rem;}
.mission_wrap .list li .con {height:100%; position:relative;}
.mission_wrap .list .box {padding:9.6% 12%; box-shadow:inset 0 5px 3px rgba(0, 0, 0, 0.6) , 5px 5px 5px rgba(0, 0, 0, 0.5); position:relative; min-height:48rem; border-radius:2rem; background:#152648 url('/images/common/event/mission/ramadan/ptn.png') 0 0 repeat;}
.mission_wrap .list .box:after {border-radius:2rem; content: ''; position: absolute; inset:0; width:100%; height:100%; padding:1px; background: linear-gradient(to bottom, #ffdd79, #de9400);  -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 .m_tit {z-index:1; top:-5.2rem; left:50%; margin-left:-11rem; padding-top:3.1rem; font-size:20px; color:#2f1e03; letter-spacing:0.05em; text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); text-transform:uppercase; position:absolute; width:22rem; height:8.1rem; background:url('/images/common/event/mission/ramadan/bg_ms.png') 0 0 no-repeat; background-size:100% auto; display:flex; align-items:center; justify-content:center;}
.mission_wrap .list .box .m_tit font {position:relative; top:1px; margin-right:0.8rem; font-size:26px; color:#c40000; text-shadow:0 0 5px rgba(255, 255, 255, 0.2) , 1px 1px 0 rgba(0, 0, 0, 0.5);}
.mission_wrap .list .btn_receive {position:relative;}
.mission_wrap .list .btn_receive:before {z-index:-1; content:''; display:block; width:28.9rem; height:29rem; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); background:url('/images/common/event/mission/ramadan/obj_reward.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .box .desc {display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column; position: relative; z-index: 1;}
.mission_wrap .list .box .desc img {display:inline;}
.mission_wrap .list .mission {position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:23rem; padding:4rem 3rem 3rem;}
.mission_wrap .list .mission:after {content: ''; position: absolute; inset:0; width:100%; height:100%; padding:1px 0; background: linear-gradient(to right, #a6702a, #cdaa4b);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission_wrap .list .mission .txt {font-size:30px; color:#ffe9b4; line-height:1.25; font-weight:700; font-family:var(--hel);}
.mission_wrap .list .mission .count {font-size:40px; color:#ffd560; letter-spacing:0.1em; margin-top:2.7rem;; font-weight:700; font-family:var(--hel);}
.mission_wrap .list .mission .count font {color:#fff;}

.mission_wrap .list .btn_modify {z-index:1; position:absolute; top:-16px; left:50%; margin-left:-67px;}
.mission_wrap .list .btn_clear {margin-top:4.8rem;}
.mission_wrap .list .state span {filter:drop-shadow(2px 8px 5px rgba(0, 0, 0, 0.5)); text-transform:uppercase; background: #6ca1ff; font-size:24px; letter-spacing:0.1em;  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.mission_wrap .list .complete .state span {line-height:1.3; font-size:38px; display:block; background: linear-gradient(to bottom, #fff, #ffba2e);}
.mission_wrap .list .complete .state {margin-top:1rem;}
.mission_wrap .list .complete .desc .img {position:relative;}
.mission_wrap .list .complete .desc .img:before {z-index:-1; top: -75%; left: -75%; content:''; display:block; position:absolute; width: 250%; height: 250%; background:url('/images/common/event/mission/ramadan/light.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .lock .state {margin-top:1.5rem;}

.mission_wrap .list .reward {padding:2.4rem; margin-top:1rem; position:relative; z-index:1; background: #14242a url(/images/common/event/mission/ramadan/ptn.png) 0 0 repeat; border-radius:2rem; box-shadow:inset 1px 1px 0 rgba(169, 207, 214, 0.4) , inset 0 0 1px rgba(0, 0, 0, 0.5), 3px 5px 3px rgba(0, 0, 0, 0.5);}
.mission_wrap .list .reward:before {content:''; display:block; position:absolute; top:0; height:3.4rem; margin-top:-1.7rem; left:12%; right:12%; background:url('/images/common/event/mission/ramadan/bar_reward.png') 0 0 no-repeat , url('/images/common/event/mission/ramadan/bar_reward.png') right 0 no-repeat; background-size:3.2rem auto;}
.mission_wrap .list .reward .tit {text-transform:uppercase; font-size:22px; letter-spacing:0.05em; filter:drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));}
.mission_wrap .list .reward .tit span {background: linear-gradient(to bottom, #f8e972 ,#a6702a); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .list .reward .img { z-index:1; height:18rem; display:flex; align-items:center; justify-content:center;}
.mission_wrap .list .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.mission_wrap .list .reward .name {font-family:var(--hel); font-size:16px; color:#e4ca89; }
.mission_wrap .list .reward .img > div {position:absolute; top:50%; left:50%; transform:translate(-50% , -40%);} 

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

.calendar_wrap .calendar .con .complete {width:100%; height:calc(100% - 4rem); display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .complete img {max-width:150px; width:80%;}
.calendar_wrap .calendar .con .img {width:100%; height:calc(100% - 4rem); display:flex; align-items:center; justify-content:center;}
.calendar_wrap .calendar .con .img img {max-width:150px; width:80%;}

.total_reward {position:relative; margin-top:1rem;}
.mission_wrap .total_reward:before, .mission_wrap .total_reward:after {content:''; display:block; position:absolute; left:50%; width:11.9rem; height:3rem; background-repeat:no-repeat; background-position:center 0; background-size:100% auto; margin-left:-5.95rem;}
.mission_wrap .total_reward:before {top:-3rem; background-image:url('/images/common/event/mission/ramadan/obj_total_t.png');}
.mission_wrap .total_reward:after {bottom:-3rem; background-image:url('/images/common/event/mission/ramadan/obj_total_b.png');}
.total_reward .con {padding:2rem; background:url('/images/common/event/mission/ramadan/obj_total.png') center center no-repeat , url('/images/common/event/mission/ramadan/ptn03.png') 0 0 repeat; position:relative;}
.total_reward .con:before {border-radius:2rem; content: ''; position: absolute; inset:0; width:100%; height:100%; padding:1px; background: linear-gradient(to bottom, #ffdd79, #de9400);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission_wrap .total_reward .tit {font-size:22px; text-transform:uppercase; letter-spacing:0.06em; color:#e4ca89;}
.mission_wrap .total_reward .tit span {background: linear-gradient(to bottom, #fff, #e4ca89); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter:drop-shadow(0 0 6px rgba(0, 14, 30, 0.7)) drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.5));}
.total_reward .reward .img {position:relative; z-index:1; height:18rem; max-width:480px; margin:0 auto; display:flex; align-items:center; justify-content:center; margin-top:3rem;}
.total_reward .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.total_reward .reward .name {margin-top:3px; font-family: var(--hel); font-size: 16px; color: #e4ca89; display:inline-block; position:relative; padding:0 42px; }
.total_reward .reward .name .go_view {top:50%; right:0; margin-top:-15px;}
.total_reward .btn_receive {position:absolute; top:50%; right:7.5%; margin-top:-6.95rem;}

.total_reward .btn_receive.off {background-image:url('/images/common/event/mission/ramadan/btn_reward_off.png');     cursor: default;} 
.total_reward .btn_receive.off span {background:#79745c;}
.total_reward .btn_receive.off:hover {background-position:0 0;}

.total_reward .btn_receive.end {background-image:url('/images/common/event/mission/ramadan/btn_reward_end.png');     cursor: default;} 
.total_reward .btn_receive.end span {background:#b2a56b;}
.total_reward .btn_receive.end:hover {background-position:0 0;}


.go_view {transition:none; z-index:1; font-size:0; color:transparent; position:absolute; width:30px; height:30px; border-radius:50%; background-position:0 0; background-image:url('/images/common/event/mission/ramadan/btn_view.png'); background-size:100% auto; background-repeat:no-repeat; top:3rem; right:3rem;}
.go_view:hover {background-position:0 100%;}

.list_wrap .btn_arr {border-radius:1.2rem; box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.4); top:50%; font-size:0; position:absolute; color:transparent; margin-top:-6.8rem; transition:non; z-index: 2; width:6.8rem; height:6.8rem; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/ramadan/btn_arr.png'); background-size:100% auto; background-color:rgba(255, 255, 255, 0);}
.list_wrap .btn_prev {left:-8.8rem; transform:scaleX(-1);}
.list_wrap .btn_next {right:-8.8rem;}
.list_wrap .btn_arr:hover {background-position:0 100%;}
.list_wrap .btn_arr.slick-disabled {opacity:0;}


.calendar_wrap { z-index:1; background:#010d1a url('/images/common/event/mission/ramadan/ptn04.png') 0 0 repeat; position:relative; padding-top:4.5rem; padding-bottom:32.3rem;}
.calendar_wrap:before {box-shadow:0 0 1rem rgba(0, 20, 44, 0.5); content:''; display:block; position:absolute; top:0; left:0; right:0; height:4.5rem; background:url('/images/common/event/mission/ramadan/ptn_ribbon.png') 0 center repeat-x , url('/images/common/event/mission/ramadan/ptn.png') 0 0 repeat; background-color:#0b1d41;}
.calendar_wrap:after {height:4.5rem; content: ''; position: absolute; inset:0; padding:1px 0; background: linear-gradient(to right, #cdaa4b, #f8e972, #a6702a);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.calendar_wrap .top {padding:9rem 0;}
.calendar_wrap .top .m_tit span:before , .calendar_wrap .top .m_tit span:after {margin:0 2.4rem; width:7.6rem; height:1.6rem; content:''; display:inline-block; vertical-align:middle; background:url('/images/common/event/mission/ramadan/tit_dot.png') 0 0 no-repeat; background-size:100% auto;}

.calendar_wrap .calendar {padding:6rem 6rem 3rem; border:1px solid #dead43; position:relative; background:url('/images/common/event/mission/ramadan/obj_cal.png') left 2.5rem top 2.5rem no-repeat, url('/images/common/event/mission/ramadan/obj_cal.png') right 2.5rem top 2.5rem no-repeat, url('/images/common/event/mission/ramadan/obj_cal.png') left 2.5rem bottom 2.5rem no-repeat, url('/images/common/event/mission/ramadan/obj_cal.png') right 2.5rem bottom 2.5rem no-repeat;}
.calendar_wrap .calendar:before {content: '';position: absolute; inset:0; padding: 1.6rem; background: #0b1d41 url('/images/common/event/mission/ramadan/ptn.png') 0 0 repeat; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;}

.calendar_wrap .calendar .wrap:before, .calendar_wrap .calendar .wrap:after {content:''; display:block; position:absolute;} 
.calendar_wrap .calendar .wrap:before {left:1.5rem; right:1.5rem; border:1px solid #dead43; border-top:0; border-bottom:0; top:0; bottom:0;}
.calendar_wrap .calendar .wrap:after {top:1.5rem; bottom:1.5rem; border:1px solid #dead43; border-left:0; border-right:0; left:0; right:0;}

.calendar_wrap .calendar .info {position:relative;}
.calendar_wrap .calendar ul {z-index:1; position:relative; margin-left:-3rem; text-align:left;}
.calendar_wrap .calendar ul > li {padding-left:3rem; display:inline-block; vertical-align:top; width:calc(100% / 7); position:relative; margin-bottom:3rem;}
.calendar_wrap .calendar .con {z-index:1; min-height:20rem; padding:1px 1px 6px; position:relative; flex-direction:column; display:flex; align-items:center; justify-content: flex-start; background:#000000 url('/images/common/event/mission/ramadan/ptn.png') 0 0 repeat; border-radius:1rem; box-shadow:3px 5px 5px rgba(0, 0, 0, 0.5);}
.calendar_wrap .calendar .con:before {border-radius:1rem; content: ''; position: absolute; inset:0; padding:1px; background: linear-gradient(to bottom, #59554b, #9d7d3e);  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.calendar_wrap .calendar .con .day {padding-top:0.6rem; z-index:-1; margin-bottom:2px; border-bottom:1px solid #937740; background:#191400 url('/images/common/event/mission/ramadan/ptn.png') 0 0 repeat; width:100%; border-radius:1rem 1rem 0 0; text-transform:uppercase; text-align:center; position:relative; height:4rem; font-size:20px; color:#fff; letter-spacing:0.1em; display:flex; align-items:center; justify-content:center; }
.calendar_wrap .calendar .con .day span {padding-top:1px; filter:drop-shadow(0 0 6px rgba(0, 14, 30, 0.2)) drop-shadow(3px 2px 2px rgba(0, 0, 0 ,0.5)); background: linear-gradient(to bottom, #fff, #ffc64c); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.calendar_wrap .calendar .con .day span font {background: linear-gradient(to bottom, #fff, #97ff29); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.calendar_wrap .btn_day02 {position:absolute; left:50%; bottom:10px; margin-left:-67px;}
.calendar_wrap .calendar .count {font-size:34px; color:#7b7b7b; font-family:'Roboto'; letter-spacing:0.1em; width:100%; height:calc(100% - 40px); display:flex; align-items:center; justify-content:center; background:url('/images/common/event/mission/ramadan/bg_cal.png') center center no-repeat; background-size:75% auto;}
.calendar_wrap .calendar .count font {font-weight:700; background: linear-gradient(to bottom, #fff, #97ff29); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.calendar_wrap .calendar .count span {color:#eac87f; font-weight:700;}

.calendar_wrap .calendar .bin .con .day {border:none; width:100%; height:100%; background:none;}
.calendar_wrap .calendar .bin .con .day span {background: linear-gradient(to bottom, rgba(59, 85, 75, 0.5), rgba(157, 125, 62, 0.5)), #a8a8a8;}
.calendar_wrap .calendar .bin .con .day span font {background: linear-gradient(to bottom, rgba(59, 85, 75, 0.5), rgba(157, 125, 62, 0.5)), #a8a8a8;;}

.calendar_wrap .calendar .ok .con:before {padding:0.2rem; background:linear-gradient(to bottom, #ffdd79, #de9400);}
.calendar_wrap .calendar .ok .con .day {border-color:#f7cc5c;}

.calendar_wrap .calendar .today .con:after {content:''; display:block; position:absolute; top:-3.2rem; left:-1.8rem; width:10.9rem; height:3.8rem; background:url('/images/common/event/mission/ramadan/img_today.png') 0 0 no-repeat; background-size:100% auto;}
.calendar_wrap .calendar .today .con:before {padding:0.5rem; background:url('/images/common/event/mission/ramadan/ptn.png') 0 0 no-repeat, linear-gradient(to bottom, #ffdd79, #de9400);}
.calendar_wrap .calendar .today .con .day {border-color:#f7cc5c;}



.calendar_wrap .reward_wrap {position:relative; font-size:0; margin-top:5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4rem; padding-bottom:0; padding-top:0;}
.calendar_wrap .reward_wrap .con {padding:5rem 3rem 0.05rem; display:inline-block; flex-grow: 1; min-height:33.5rem; position:relative; max-width:none; margin:0; max-width:calc((100% - 4rem) / 2); background:url(/images/common/event/mission/ramadan/ptn03.png) 0 0 repeat;}
.calendar_wrap .reward_wrap .con .reward {height:100%;  position:relative; z-index:1;}
.calendar_wrap .reward_wrap .con:after {content:''; display:block; position:absolute; left:2.5rem; width:11.9rem; height:3rem; background-repeat:no-repeat; background-position:center 0; background-size:100% auto; top:-3rem; background-image:url('/images/common/event/mission/ramadan/obj_total_t.png');}
.calendar_wrap .reward .img {margin-top:0;}
.calendar_wrap .reward_wrap .con .go_view {right:1.2rem; top:1.2rem;}
.calendar_wrap .reward_wrap .con .tit {text-align:center; margin-top:0; position:absolute; top:3rem; left:3rem; font-size:22px; text-transform:uppercase; letter-spacing:0.06em; }
.calendar_wrap .reward_wrap .con .tit span {background: linear-gradient(to bottom, #fff, #00f6ff, #00f6ff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter:drop-shadow(0 0 6px rgba(0, 14, 30, 0.7)) drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.5));}
.calendar_wrap .reward_wrap .con .btn_receive02 {z-index:1; margin-top:2px; }
.calendar_wrap .reward_wrap .name { font-family: var(--hel); font-size: 15px; color: #44acb0; display:inline-block; position:absolute; right:3rem; top:2.5rem; padding:0 42px; max-width: calc(100% - 220px); text-align: right;}
.calendar_wrap .reward_wrap .name .go_view {top:50%; right:0; margin-top:-12px;}

.calendar_wrap .reward_wrap .final .tit span {background: linear-gradient(to bottom, #fff, #00ff78, #00ff78);}
.calendar_wrap .reward_wrap .final .name {color:#18b866;}

/* loading */
.loading {width:100%; height:100%; background:rgba(0, 0, 0, 0.7); position:fixed; z-index:9999; top:0;}
.loading .load {top:50%; transform:translate(0 , -100%); width:60px; height:60px; margin:0 auto;  position: relative; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; /* overflow: hidden; */}
.loading .circle-loader {position: relative; width: auto; height: auto;}
.loading .circle-loader div { height: 10px; width: 10px; background-color: #515457; border-radius: 50%; position: absolute; animation: shadowPulse01 8s linear infinite, 0.8s opaque ease-in-out infinite both; }
.loading .circle-loader > div:nth-child(1) { top: -25px; left: 0;}
.loading .circle-loader > div:nth-child(2) { top: -17px;left: 17px; animation-delay: 0.1s;}
.loading .circle-loader > div:nth-child(3) {top: 0; left: 25px; animation-delay: 0.2s;}
.loading .circle-loader > div:nth-child(4) { top: 17px; left: 17px; animation-delay: 0.3s;}
.loading .circle-loader > div:nth-child(5) { top: 25px; left: 0; animation-delay: 0.4s;}
.loading .circle-loader > div:nth-child(6) { top: 17px; left: -17px; animation-delay: 0.5s;}
.loading .circle-loader > div:nth-child(7) {top: 0; left: -25px; animation-delay: 0.6s;}
.loading .circle-loader > div:nth-child(8) { top: -17px; left: -17px; animation-delay: 0.7s;}
.loader {position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; width: 100px; height: 100px;}
.loader span { border: 10px solid transparent; background-image: linear-gradient(#000, #000),  linear-gradient(to right, rgba(255, 555, 255, 0.4) 65%,  #fff 100%); background-origin: border-box; background-clip: content-box, border-box;  border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite;}
.loader span+ font {position: relative; font-size:10px; line-height:100px; font-family:'Roboto'; font-weight:700; display:block;  text-align:center; color:#fff; text-transform:uppercase;}


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

.sway_l {left: -4.4%;}
.sway_r {right:0.6%;}

.cha03 { max-width:1000px; width:38.9%; right:-4%;} 
.cal_obj {left:0;}
.obj_sc04 {right:-12%;}
}


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

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

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

.list_wrap .btn_prev {left:0;}
.list_wrap .btn_next {right:0;}	

.sway_l { width:25%; left:0;}
.sway_r { width:34%; right:0;}

.sway_l .light {width:73.5%;}
.sway_l .lamp {width:309.7%;}
.sway_l .sw01 {width:67.6%;}
.sway_l .sw02 {width:7.72%;}
.sway_l .sw03 {width:7.72%;}
.sway_l .sw04 {width:31.5%;}
.sway_l .sw05 {width:16.4%;}

.sway_r .light {width:39.25%;}
.sway_r .lamp {width:114.3%;}
.sway_r .sw06 {width:70.5%;}
.sway_r .sw07 {width:5.9%;}
.sway_r .sw08 {width:5.9%;}
.sway_r .sw09 {width:16.5%;}
.sway_r .sw10 {width:30%;}


}

	
@media screen and (max-width: 1800px) {
.calendar_wrap .calendar ul {margin-left:-2rem;}
.calendar_wrap .calendar ul > li {padding-left:2rem;}

.cha01 {width:66%;}
.cha02 {width:80%;}
.moon {width:35%;}


.section01 .title_wrap {width:50%; padding: 13% 0 6.5%;}
.section01 .title_wrap .date {margin-top:4.5%;}
.section01 .title_wrap .sub_tit {width:100%;}
.section01 .title_wrap .sub_tit span {font-size:32px;}
}

@media screen and (max-width: 1600px){
.top .m_tit .day {margin-right:2rem;}
.top .etc .count_wrap {width:150px;}
}
	
@media screen and (max-width: 1500px) {
.mission_wrap .list {margin-left:-3rem;}	
.mission_wrap .list li {padding-left:3rem; margin-bottom:3rem;}


.calendar_wrap .top {padding:7rem 0 4rem;}
.calendar_wrap .top .m_tit span:before, .calendar_wrap .top .m_tit span:after {display:none;}
.list_wrap .btn_arr {margin-top:-14.2rem;}
.calendar_wrap .top .etc {margin-top:3rem;}

.top .remain {position:relative; top:auto; left:auto; transform:none; margin:2rem auto; display:block; width:auto; height:auto; background:none;}
.top .etc {position:relative; top:auto; right:auto; transform:none; margin:0 auto; justify-content:center;}
.top .etc .count_wrap {width:178px;}

.cal_obj {left:-5%; width:24.1%; top:0;}
.obj_sc04 {right:-9%;}


}	

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

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


.total_reward .btn_receive {right:2.5%;}

.calendar_wrap .reward_wrap  {display:block;}
.calendar_wrap .reward_wrap .con {display:block; max-width:none; margin-bottom:4rem; padding:3rem; text-align:left;}
.calendar_wrap .reward_wrap .con.final {margin-bottom:0;}
.calendar_wrap .reward_wrap .con .tit {position:static; text-align:left;}
.calendar_wrap .reward_wrap .name {right:auto; position:relative; padding-left:0; top:auto; text-align:left; margin:0.8rem 0 2rem; max-width:none;}
.calendar_wrap .reward_wrap .con .btn_receive02 {display:flex; margin:2rem auto 0;}
.calendar_wrap {padding-bottom:44rem;}

.btn_history {right:auto; left:2.5rem; bottom:2.8rem; top:auto; margin-top:0;}
.btn_history:after {display:none;}
footer {padding-bottom:15.6rem;}

.section01 .title_wrap .sub_tit span {font-size:28px;}
}
	
@media screen and (max-width: 1280px) {
.total_reward .con {padding:3rem 3rem 2rem; background: url(/images/common/event/mission/ramadan/obj_total.png) center 33% no-repeat, url(/images/common/event/mission/ramadan/ptn03.png) 0 0 repeat;}	
.total_reward .btn_receive {position:relative; margin-top:2rem; right:auto;}
.calendar_wrap .calendar ul > li {width: calc(100% / 5);}	

.section01 .title_wrap .sub_tit span {font-size:21px;}
.section01 .title_wrap .sub_tit span font:last-child:before {width:4.9rem; height:4.4rem; margin-top:-2.8rem; left:-6rem; }

}	

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

.section01 .title_wrap .sub_tit {width:auto; margin: 5rem -6rem 0;}
.section01 .title_wrap .sub_tit:after {display:none;}
.section01 .title_wrap .sub_tit span {position:static; width:auto; left:auto; background:none;}
.section01 .title_wrap .date {margin:2rem auto;}
.section01 .title_wrap .date:before {display:none;}

.section01 .title_wrap {width:100%; padding:12rem 6rem 80%;}
.section01 .title_wrap:after {position:absolute; right:0; background-size:90% auto; height:100%; margin:0 auto; background-position:center bottom; width:auto;}
.section01 .title_wrap .tit:before {display:none;}
.section01 .title_wrap .sub_tit span {font-size:32px;}
.section01 .title_wrap .sub_tit span font:last-child:before {margin-top: -3.6rem; left: -6.6rem; width: 5.9rem; height: 5.3rem;}
header .user_info {justify-content: center; background:rgba(0, 0, 0, 0.8); box-shadow:2px 5px 3px rgba(0, 0, 0 ,0.2); width:auto; height:5.3rem; min-width:31rem; padding:0 3rem 5px; top:2rem; left:2rem;}
header .user_info:after {content: ''; position: absolute; inset:0; width:100%; height:100%; padding:1px; background: linear-gradient(to bottom, rgba(255, 221, 121, 0.5), rgba(222, 148, 0, 0.5));  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
header .user_info .cash {position:relative; margin-left:2rem; min-width:0; display:inline-block; height:auto; background:none; padding:0;}
header .user_info .cash:before {content:''; display:block; position:absolute; top:50%; width:2px; height:1.6rem; margin-top:-0.6rem; background:#838383; left:-0.8rem;}
header .btn_login {width:5.2rem; height:5.2rem; background-image:url('/images/common/event/mission/ramadan/btn_login_m.png'); top:2rem; right:2rem; font-size:0; color:transparent;}
header .btn_login:hover {background-position:0 0;}

.cha01 {width:50%; left:-10%;}
.cha02 {width:70%; left:50%; margin-left:-35%;}
.moon {width: 24%; left: auto; right: 0;  top: auto; bottom: 36%;}
.sway_l {width:30%;}
.sway_r {width:49%;}
.sway_r .lamp {right:-24%; width:86;}
.sway_r .sw06 {right:-30%;}
.sway_r .sw09 {right:50%;}
.sway_r .sw10 {width:23%; right:26%;}

.cha03 {position: relative; width: 80%; transform: translate(14%, 0);  margin: -17% 0; z-index: -1; left:auto; bottom:auto;}
.ms_obj {position: relative; width: 60%; transform: translate(-50%, 0); left:50%; margin: -11% 0 -5%; z-index: -1; right:auto; bottom:auto; animation:none;}
}	

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

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

}	

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

.mobile {display:block;}

.cal_obj {width:35%;}
.obj_sc04 {right:-21%; width:50%;}

header .user_info .user {font-size:2.5rem;}
header .user_info .cash {font-size:2.3rem;}

.btn {font-size:2.9rem; line-height:1.2;}
.btn_round.btn_start {font-size:3rem;}
.btn_clear {width:46rem; height:13.5rem;}
.btn_clear font {font-size:2.4rem; margin-top:0; height:20px;}
.btn_history {width:18.1rem; height:10.3rem;}
.btn_history span {font-size:2rem;}
.btn_top {width:18.1rem; height:10.3rem;}
.btn_top span {font-size:2rem;}

.pop_up .pop_layout {width:calc(100% - 4.8rem); left:2.4rem; right:2.4rem; transform: translate(0, -50%);}
.pop_up .pop_con h2 span {font-size:3.3rem;} 
.pop_up .pop_con .txt {font-size:2.7rem; min-height:7rem;}
.pop_up .pop_con .reward .name {font-size:2.3rem;}
.pop_up .pop_con .ms_txt {font-size:2.3rem;}
.pop_up .pop_con .ms_txt span {font-size:2.7rem;}
.pop_up .btns button {font-size:2.1rem;}

.pop_up .pop_con .day span {font-size:3rem; }
.pop_up .pop_con .day span:first-child {font-size:2.1rem;}

.pop_clear .btns button {flex-direction: column; text-align: center !important; justify-content: space-evenly;}
.pop_clear .btns button .cash {font-size:2.3rem;}
.pop_clear .btns button .cash span:after {width:17px; height:17px; top:0;}

.pop_all #pageinfo {font-size:2.9rem;}

.pop_history .list li > div {font-size:2.1rem; height:7rem;}
.pop_history .list li.top div {font-size:2.5rem; height:6rem;}
.pop_history .list li.none {font-size:2.5rem;}

.pop_detail .pop_con h2 {font-size:2.7rem;}



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


.mission_wrap:before {background-size: 5.1rem auto, auto auto; }

.top .m_tit {font-size:4.1rem;}
.top .m_tit .day {width:14.8rem; height:14.8rem;}
.top .m_tit .day span {font-size:5.1rem;}
.top .m_tit .day span:first-child {font-size:2.4rem;}
.top .remain {font-size:2.7rem;}
.top .etc .count_wrap {background-size:auto 100%; height:41px; margin-bottom:5px; width:115px; padding-right:4rem;}
.top .etc .count {font-size:3.8rem;}


.mission_wrap .list_wrap .slick-list {padding-top:7.2rem;}
.mission_wrap .list .box { padding: 13.6% 12%;}
.mission_wrap .list .box .m_tit {width:30rem; height:11rem; padding-top:5.1rem; margin-left:-15rem; top:-7.2rem; font-size:2.9rem;}
.mission_wrap .list .box .m_tit font {font-size:3.5rem;}
.mission_wrap .list .reward .tit {font-size:3.1rem;}
.mission_wrap .list .reward .name {font-size:2.5rem;}
.mission_wrap .list .mission .txt {font-size:3.9rem;}
.mission_wrap .list .mission .count {font-size:4.9rem;}
.mission_wrap .list .complete .desc .img {max-width:20.4rem;}
.mission_wrap .list .complete .state span {font-size:4.7rem;}
.mission_wrap .list .lock .box .desc img {max-width:14.5rem;}
.mission_wrap .list .state span {font-size:3.1rem;}
.mission_wrap .list .reward .img > div {max-width:9.6rem;}
.calendar_wrap .btn_day02 {font-size:2.2rem; width:113px; height:22px; margin-left:-56px;}

.mission_wrap .total_reward .tit {font-size:3.1rem; max-width:50rem; margin:0 auto;}
.total_reward .reward .name {font-size:2.5rem;}

.calendar_wrap:before {background-size: 5.1rem auto, auto auto;}
.calendar_wrap .calendar {background-size:3.3rem auto;}
.calendar_wrap .calendar .con .day {font-size:2.9rem; height:6rem;}
.calendar_wrap .calendar .con .complete {height:calc(100% - 6rem);}
.calendar_wrap .calendar .con .img {height:calc(100% - 6rem);}
.calendar_wrap .calendar ul > li {width: calc(100% / 4);}
.calendar_wrap .calendar .count {height:calc(100% - 6rem); font-size:4.3rem;}
.calendar_wrap .reward_wrap .con .tit {font-size:3.1rem;}
.calendar_wrap .reward_wrap .name {font-size:2.4rem;}
.calendar_wrap .reward_wrap .con .btn_receive02 {padding-bottom:0;}

.section01 .title_wrap .bi img {width:24rem;}
.section01 .title_wrap .sub_tit span {font-size:4.1rem;}
.section01 .title_wrap .date {font-size:3.4rem;}


}

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

.pop_history .list li > p.date {width:30%;}
.pop_history .list li > p.quest {width:40%;}

.moon {bottom:33%;}
.sway_l {width:35%;}
.sway_r {width:56%;}
}	

@media screen and (max-width: 365px) {
.calendar_wrap .calendar ul > li {width:50%;}
.total_reward .con .tit span:before {margin-right:1rem;}
.total_reward .con .tit span:after {margin-left:1rem;}
.section01 .title_wrap .sub_tit span {font-size:3.4rem;}
.section01 .title_wrap .date {font-size:3rem;}
}



@keyframes fade {
    0% {
        opacity: 0;
        z-index: 2
    }

    15% {
        opacity: 1;
        z-index: 2
    }

    49% {
        opacity: 1;
        z-index: 2
    }

    50% {
        z-index: 1
    }

    85% {
        opacity: 0
    }

    to {
        opacity: 0;
    }
}

@keyframes fir {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes fil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes flip-in-ver-right {
  0% {
    -webkit-transform: rotateY(-120deg);
            transform: rotateY(-120deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}

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

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


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

@keyframes aim {
	0% {transform: rotate(0deg);}
	25% {transform: rotate(160deg);}
	50% {transform: rotate(0deg);}
	75% {transform: rotate(160deg);}
	100% {transform: rotate(0deg);}
}

@keyframes shadowPulse01 {
  22% {
    background: #fff;
  }
  44% {
    background: #ffea00;
  }
  66% {
    background: #ff0000;
  }
  88% {
    background: #86cefe;
  }
  100% {
    background: #fff;
  }
} 

@keyframes opaque {
  0% {
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1;
  }
}

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


 
@keyframes float {
	0% {opacity:1;}
  50% {
     transform: translate(0, -2%);
     opacity:1;
  }
  100% {opacity:1;}
}

@keyframes star { 
	0%,100% { 
	transform: rotate(-1deg); 
	} 
	50% { transform: rotate(1deg); 
	} 
}

@keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tit {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(-3deg); }
  33%  { transform: rotate(1deg); }
  52%  { transform: rotate(-2deg); }
  72%  { transform: rotate(2.5deg); }
  80%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes glow {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}