@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

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

html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

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

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

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

.cha {position:absolute; top:0; right:4px;  animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000); max-width:none;}
.fiu {animation: fiu 0.3s;}


.container {overflow:hidden; position:relative; background:url('/images/common/event/mission/v1/bg_bottom.jpg') center bottom no-repeat; background-size:100% auto;}
.all_wrap {overflow:hidden; background:url('/images/common/event/mission/v1/bg_top.jpg') center 0 no-repeat;}
.all_wrap > .inner {position:relative; padding-top:15.8rem; z-index:3;}

#mvArea {overflow:hidden; position:absolute;  width: 100%; height: 100%; }
#mvArea .mvList li:first-child {position:relative;}
#mvArea .mvList li {position: absolute; top: 0;  width: 100%; height: 100%; animation: fade 10s linear infinite; opacity: 0; }
#mvArea .mvList li .mvImg {transition: all .3s;  position: relative; overflow: hidden;} 
#mvArea .mvList li:nth-child(2) { animation-delay: 3s;}
#mvArea .mvList li:last-child { animation-delay: 6s;}
#mvArea .mvList li .mvImg img {max-width:none;}

.btn {cursor:pointer; display:inline-block; position:relative; border-radius:26px; box-shadow:0 0.4rem 0 rgba(69, 34, 122, 0.5); background:linear-gradient(to bottom , #740fca , #1e0293); font-family:'Fugaz One'; text-transform:uppercase; color:#fff;}
.btn:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-image:url('/images/common/event/mission/v1/ptn01.png'); background-position:0 0; background-repeat:repeat; border-radius:26px;}
.btn:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; inset: 0; border-radius: 26px; padding:1px;  background:linear-gradient(to bottom ,#9829ff ,#5600d6); -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;  mask-composite: exclude;}
.btn font {position: relative; z-index: 2; margin-top:-0.6rem; font-size:18px; background:linear-gradient(to  right, #e3c9ff, #fff 80%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0.3rem 0 rgba(76, 35, 123, 0.6));}
.btn font:first-child {margin-top:0;}
.btn:hover {background:linear-gradient(to bottom , #a53bff , #2400c1);}
.btn:hover:before {display:none;}
.btn:hover font {background:linear-gradient(to right, #fff , #fff);}
.btn span {width:100%; height:100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.btn span font {display:block;}
.btn span:before {top:50%; left:22px; margin-top:-22px; content:''; position:absolute; display:block; width:44px; height:44px; border-radius:50%;}

.btn_start {background:linear-gradient(to bottom , #009cec , #003e93);}
.btn span:before {background:url('/images/common/event/mission/v1/icon_start.png') 0 0 no-repeat; box-shadow:0 0 0.5rem rgba(37, 214, 134, 0.4);}
.btn_start font {background:linear-gradient(to right, #cdfcff , #fff 80%); filter: drop-shadow(0 0.3rem 0 rgba(16, 57, 62, 0.5));}
.btn_start:before {background-image:url('/images/common/event/mission/v1/ptn02.png');}
.btn_start:after {background:linear-gradient(to bottom ,#00a8ff ,#0072ff); }
.btn_start:hover {background:linear-gradient(to bottom , #2db7ff , #005a9f);}

.btn_receive span:before {background:url('/images/common/event/mission/v1/icon_receive.png') 0 0 no-repeat; box-shadow:0 0 0.5rem rgba(69, 33, 123, 0.4);}

.btn_modify {cursor: pointer; text-transform:uppercase; display:flex; align-items:center; justify-content:center; font-size:14px; color:#ffffff; height:30px; padding:0 17px 0 10px; border-radius:15px; position:relative; background:rgba(255, 255, 255, 0);}
.btn_modify:before {content:''; display:inline-block; vertical-align:middle; width:13px; margin-right:0.7rem; height:13px; background:url('/images/common/event/mission/v1/icon_modify.png') 0 0 no-repeat;}
.btn_modify:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; inset: 0; border-radius: 15px; padding:0.2rem;  background:linear-gradient(to right ,#00a8ff ,#00dca6); -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;  mask-composite: exclude;}
.btn_modify:hover {background:linear-gradient(to right ,#00a8ff ,#00dca6);}

.btn_clear {background:linear-gradient(to bottom , #009cec , #003e93); height:60px; padding:0 0.4rem 0 2.4rem; border-radius:30px;}
.btn_clear span {box-shadow:inset 0 0.2rem 0 rgba(0, 0, 0, 0.3); flex-direction: row; vertical-align: middle; font-family:'Roboto'; font-size:22px; font-weight:700; color:#ebf902; width:auto; height:calc(100% - 0.8rem); min-width:106px; padding:0 1.2rem; border-radius:26px; display:inline-flex; background:rgba(7, 23, 21, 0.5); margin-left:10px; position:relative;}
.btn_clear span:before {display:none;}
.btn_clear span:after {margin-left:10px; content:''; display:inline-block; vertical-align:middle; width:24px; height:24px; background:url('/images/common/event/mission/v1/icon_pbcash.png') 0 0 no-repeat;}
.btn_clear font {vertical-align: middle; background:linear-gradient(to right, #cdfcff , #fff); filter: drop-shadow(0 0.3rem 0 rgba(16, 57, 62, 0.5));}
.btn_clear:before {background-image:url('/images/common/event/mission/v1/ptn02.png'); border-radius:30px;}
.btn_clear:after {background:linear-gradient(to bottom ,#00a8ff ,#0072ff);  border-radius:30px;}
.btn_clear:hover {background:linear-gradient(to bottom , #2db7ff , #005a9f);}
.btn_clear font:first-child:before {display:none !important;}
.btn_clear font:first-child:after {display:none !important;}

.btn_history {position:fixed; right:4.5rem; bottom:5rem; z-index:7; width:11rem; height:11rem; display:flex; align-items:center; border-radius:50%; justify-content:center; background:linear-gradient(to bottom, rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0) , rgba(5, 169, 255, 0.5)) , #000; box-shadow:0 0 1rem rgba(0, 182, 238, 0.6) , 0 5px 0 rgba(0, 0, 0, 0.2);}
.btn_history:before {content:''; display:block; position:absolute; left:50%; top:0.3rem; width:19.1rem; height:14.6rem; margin-left:-9.55rem; background:url('/images/common/event/mission/v1/btn_light.png') 0 0 no-repeat; background-size:100% auto;}
.btn_history span:before {content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset: 0; border-radius: 50%; padding:0.2rem; background:linear-gradient(to right, #00a8ff , #00dca6); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.btn_history span:after {z-index:-1; transition:all ease-in-out 0.2s; content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset: 0; border-radius: 50%; background: linear-gradient(to right, rgba(0, 168, 255, 0.7), rgba(0, 220, 166, 0.7)); opacity:0;     box-shadow: 0 0 1rem rgba(0, 182, 238, 0.6), 0 5px 0 rgba(0, 0, 0, 0.2);}
.btn_history span {transition:all ease-in-out 0.2s; line-height:1.1; display:inline-block; font-size:16px; font-weight:900; text-transform:uppercase; background:linear-gradient(to right, #00a8ff , #00dca6); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_history:hover span {background:linear-gradient(to right, #fff , #fff);}
.btn_history:hover span:before {display:none;}
.btn_history:hover span:after {opacity:1;}

header { text-align:left; position:absolute; top:0; left:0; right:0;   z-index: 20; padding:3rem 3rem 0;}
header .btn_login {position:relative; transition:all ease-in-out 0.2s; text-transform:uppercase; color:#fff; min-width:16rem; padding:0 2.4rem; font-size:18px; height:5rem; display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; border-radius: 25px; background:rgba(255, 255, 255, 0.2); box-shadow:0 0.5rem 0 rgba(0, 0, 0, 0.4);}
header .btn_login:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; inset: 0; border-radius: 25px; padding:0.2rem;  background:linear-gradient(to right ,#00a8ff ,#00dca6); -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;  mask-composite: exclude;}
header .btn_login:hover {background:linear-gradient(to right ,rgba(0, 168, 255, 0.7) , rgba(0, 220, 166, 0.7));}
header .util { position:absolute; top:3rem; right:3rem; font-size:0;}
header .user_info {vertical-align:middle; display:inline-flex; font-size:0; border-radius:25px; background:rgba(0, 0, 0, 0.5); margin-right:2rem; height:5rem; align-items:center; justify-content:center; }
header .user_info > div {letter-spacing:0.02em; padding:0 2.4rem;}
header .user_info .user {font-size:16px; position:relative;}
header .user_info .user:before, header .user_info .user:after {content:''; display:block; position:absolute;}
header .user_info .user:before {width:26px; height:26px; background:url('/images/common/event/mission/v1/icon_user.png') 0 0 no-repeat; left:1.4rem; top:50%; margin-top:-13px;}
header .user_info .user:after {width:0.3rem; height:1.6rem; background:linear-gradient(to bottom ,rgba(0, 168, 255, 0.7) , rgba(0, 220, 166, 0.7)); border-radius:0.15rem; right:0; top:50%; margin-top:-0.8rem;} 
header .user_info .user span {padding-left:2.4rem; background:linear-gradient(to bottom, #00a8ff , #00dca6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
header .user_info .cash {font-size:13px; color:#d6e9ff; text-transform:uppercase;}
header .user_info .cash span {margin-right:3px;}


footer {width: 100%; padding:8rem 0; z-index: 3; position:relative; font-family:'Roboto';}
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 12px; color:#fff; position: relative; z-index: 2; letter-spacing:0.01em;}
footer .footer .cs > a {color:#ffe84f; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 7px;}
.footer .age {margin-bottom:2rem;}
.footer .age img {max-width:6rem;}

/* popup */
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background:rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 90; display:none;}

.pop_up {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; display: none;}
.pop_up .pop_layout {width:590px; left:50%; top:50%; position: absolute; transform:translate(-50% , -50%); z-index: 99;}
.pop_up .pop_close {margin-top:10px; cursor:pointer; width:40px; height: 40px; font-size: 0; text-indent: -99999px; background-color:rgba(255, 255, 255, 0); background-image:url('/images/common/event/mission/v1/pop_close.png'); background-position:0 0; background-repeat:no-repeat;  transition:none;}
.pop_up .pop_close:hover {background-position:0 -40px;}
.pop_up .pop_con {z-index:1; border-radius:3rem; box-shadow:0 0.5rem 0 rgba(0, 0, 0, 0.6); background: #000 url('/images/common/event/mission/v1/bg_pop.jpg') center 0 no-repeat; background-size:cover; position:relative;}
.pop_up .pop_con:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; inset: 0; border-radius: 3rem; padding:2px;  background:linear-gradient(to bottom ,#2db7ff ,#005a9f); -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 .desc {border-radius:0 0 3rem 3rem; padding:4rem 3rem; position: relative;}
.pop_up .pop_con .txt {color:#fff; font-size:18px; font-weight:500; line-height:1.3;}
.pop_up .pop_con .y_txt {margin:1.7rem auto 3.6rem; font-size:30px; color:#ebf902; font-family:'Roboto'; font-weight:700;}
.pop_up .pop_con .cash {position:relative; padding-right:34px;}
.pop_up .pop_con .cash:after {position:absolute; top:50%; right:0; margin-top:-12px; content:''; display:block; width:24px; height:24px; background:url('/images/common/event/mission/v1/icon_pbcash.png') 0 0 no-repeat;}
.pop_up .pop_con .day {text-transform:uppercase;} 
.pop_up .pop_con h2 {border-radius:3rem 3rem 0 0; background:rgba(0, 71, 167, 0.4); height:60px; display:flex; align-items:center; justify-content:center; font-family:'Fugaz One'; font-size:22px; color:#ffffff; text-transform:uppercase; }
.pop_up .pop_con h2 span {filter: drop-shadow(0 0.3rem 0 rgba(16, 57, 62, 0.5)); background:linear-gradient(to right, #cafcff , #fff 80%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.pop_up .btn {width:130px; height:40px; margin:0 5px; font-family: 'Outfit'; font-weight:600; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);}
.pop_up .btn span {position: relative;}
.pop_up .btn span:before {display:none;}
.pop_up .btn_cancel {background:#36435b; color:#e3e3e3; box-shadow:none;}
.pop_up .btn_cancel:before, .pop_up .btn_cancel:after {display:none;}
.pop_up .btn_complete {background: linear-gradient(to bottom, #009cec, #003e93); box-shadow:0 0.2rem 0 rgba(0, 0, 0, 0.5);}
.pop_up .btn_complete:before {background-image: url(/images/common/event/mission/v1/ptn02.png);}
.pop_up .btn_complete:after {    background: linear-gradient(to bottom, #00a8ff, #0072ff);}
.pop_up .btn_complete span {position:relative;}

.pop_clear .btns {font-size:0; margin-left:-1.6rem; margin-top:4rem;}
.pop_clear .btn {display:inline-flex; max-width:255px; width:calc(50% - 1.6rem); height:70px; margin:0; margin-left:1.6rem; border-radius:35px; padding:0 3rem; vertical-align:top; align-items:center; justify-content:center;}
.pop_clear .btn:before, .pop_clear .btn:after {border-radius:35px;}
.pop_clear .btn:last-child {margin-bottom:0;}
.pop_clear .btn span {text-align:left; display:block; height:auto;}
.pop_clear .btn font {padding-left: 1.2rem; display:block; text-align:right; background:none; color:#ebf902; filter:none; -webkit-text-fill-color:#ebf902 !important; font-size:16px; font-weight:700; font-family:'Roboto';}
.pop_clear .btn_complete {background: linear-gradient(to bottom, #24e3f4, #0090ff);}
.pop_clear .btn_complete:after {background: linear-gradient(to bottom, #00dca6, #00a8ff);}
.pop_clear .pop_con .cash:after {background: url(/images/common/event/mission/v1/icon_pbcash02.png) 0 0 no-repeat;}
.pop_clear .pop_con .y_txt {margin:1.6rem auto ; font-size:22px; position:relative; display:flex; align-items:center; justify-content:center;}
.pop_clear .pop_con .y_txt span {flex-grow: 1; word-break: break-word;}
.pop_clear .pop_con .y_txt:before, .pop_clear .pop_con .y_txt:after {width: 20%; flex-grow: 1;  content:''; display:block; height:3px; background:url('/images/common/event/mission/v1/dot_p.jpg') 0 center no-repeat , url('/images/common/event/mission/v1/dot_p.jpg') right center no-repeat , url('/images/common/event/mission/v1/dot_p_bar.png') 0 center repeat-x;}
.pop_clear .reward {padding:4rem 7.8rem; border-radius:1.1rem; background:rgba(0, 0, 0, 0.8); border:1px solid #7931ea; position:relative; }
.pop_clear .reward .img {height:14rem; display:flex; align-items:center; justify-content:center;}
.pop_clear .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.pop_clear .reward .con {position:absolute; top:1.8rem; left:2rem; right:2rem; display:flex; justify-content:flex-start; align-items:flex-start; font-size:14px;}
.pop_clear .reward .con .tit { margin-right:1rem;}
.pop_clear .reward .name {position:static; font-family: 'Outfit'; margin-top:0;} 
.pop_clear .reward .con .name { margin-top:0.3rem;}
.pop_clear .reward .con .tit:before , .pop_clear .reward .con .tit:after {display:none;}
.pop_clear .reward .con .tit span {background: linear-gradient(to right, #a53bff, #5534ff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}


.pop_day .pop_con:before {background: linear-gradient(to bottom, #a53bff, #2400c1);}
.pop_day .pop_con h2 {background:rgba(98, 20, 107, 0.4);}
.pop_day .pop_con h2 span {filter: drop-shadow(0 0.3rem 0 rgba(76, 35, 123,  0.6)); background:linear-gradient(to right, #dbb5ff , #fff 80%);}
.pop_day .pop_close {background-image:url('/images/common/event/mission/v1/pop_close02.png');}

.pop_all .pop_con:before {background: linear-gradient(to bottom, #ee7cff, #f33aff);}
.pop_all .pop_con h2 {background:rgba(250, 164, 255, 0.3);}
.pop_all .pop_con h2 span {filter: drop-shadow(0 0.3rem 0 rgba(76, 35, 123,  0.6)); background:linear-gradient(to right, #ffbafe , #fff 80%);}
.pop_all .pop_close {background-image:url('/images/common/event/mission/v1/pop_close03.png');}
.pop_all .btn_reward {background: linear-gradient(to bottom, #ea4eff, #990ea4);}
.pop_all .btn_reward:after {background: linear-gradient(to bottom, #eb62ff, #f338ff);}
.pop_all .btn_reward:before {background-image: url(/images/common/event/mission/v1/ptn02.png);}
.pop_all .pop_close {background-image:url('/images/common/event/mission/v1/pop_close03.png');}
.pop_all .reward {border-color:#f069ff; padding:0 10.8rem;}
.pop_all .reward .con .tit span {background: linear-gradient(to right, #f340ff, #5534ff);}
.pop_all .pop_con .y_txt:before, .pop_all .pop_con .y_txt:after {background:url('/images/common/event/mission/v1/dot_pk.jpg') 0 center no-repeat , url('/images/common/event/mission/v1/dot_pk.jpg') right center no-repeat , url('/images/common/event/mission/v1/dot_pk_bar.png') 0 center repeat-x;}
.pop_all .img_list .slick-slide {position: relative;}
.pop_all .img_list .slick-arrow {transition:none; font-size:0; color:transparent; position:absolute; top:50%; margin-top:-13px; display:block; width:26px; height:26px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v1/arr_item.png'); background-color:rgba(255, 255, 255, 0);}
.pop_all .img_list .slick-prev {left:-9rem;}
.pop_all .img_list .slick-next {right:-9rem; transform:scaleX(-1);}
.pop_all .img_list .slick-arrow:hover {background-position:0 -26px;}
.pop_all .img_list .slick-arrow.slick-disabled {background-position:0 -52px; cursor:default;}
.pop_all .reward .img {padding:4rem 0; height:22rem;}
.pop_all .reward .img_list .name {position:absolute; left:0; top:2rem;}
.pop_all #pageinfo {font-size:14px; color:#70197e; font-weight:700; position:absolute; left:0; right:0; bottom:2rem;}
.pop_all #pageinfo span {color:#f258ff; margin-right:0.4rem;}
.pop_all #pageinfo font {margin-left:0.4rem;}

.pop_detail .pop_layout:after {content:''; display:block; padding-bottom:100%;}
.pop_detail .pop_layout .pop_con {position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%;}
.pop_detail .pop_close {position:absolute; top:2rem; right:2rem; margin-top:0; z-index:1;}
.pop_detail .pop_con:before {padding:1px; background: linear-gradient(to right, #00a8ff, #00dca6);}
.pop_detail .pop_con .desc {padding:0; height:100%;}
.pop_detail .pop_con .img {padding:2.4rem;  display:flex; align-items:center; justify-content:center;   height: 100%;}
.pop_detail .pop_con .img img {max-height:100%;}
.pop_detail .pop_con .name {padding-right: 30px; word-break: break-word; text-align:left; position:absolute; top:3.4rem; left:3.4rem; right:3.4rem; font-size:20px; color:#ffffff; font-weight:500; text-shadow:0 0.2rem 0 rgba(0, 0, 0, 0.3);}
.pop_detail .pop_close {width:30px; height:30px; background-image:url('/images/common/event/mission/v1/pop_close04.png');}
.pop_detail .pop_close:hover {background-position:0 -30px;}

.pop_mission .pop_layout {width:450px;}
.pop_mission .pop_con .cash {display:inline-block;}

.pop_history {font-family:'Roboto';}
.pop_history .list { letter-spacing:0; height: 45.6rem; padding-right: 1.2rem; overflow-y: auto ;}
.pop_history .list::-webkit-scrollbar {width: 0.6rem; }
.pop_history .list::-webkit-scrollbar-track {border-radius:0.5rem; background:#000;}
.pop_history .list::-webkit-scrollbar-thumb { border-radius:0.5rem; background:#005a9f; }
.pop_history .list li {border-bottom:1px solid rgba(36, 165, 236, 0.5); font-size: 0;}
.pop_history .list li > div {align-items: center; justify-content: center; flex-direction: column; height:4.8rem; padding:0 1rem; display: inline-flex; vertical-align:middle; text-align:center; font-size:12px; color:#fff;}
.pop_history .list li > div.date { width: 24%; color:#74cdff; text-transform: uppercase;}
.pop_history .list li > div.date span {display:block; color:#2585bb; 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: calc(50% - 10px); margin:0 5px; color:#ffffff; white-space: normal; word-wrap: normal;}
.pop_history .list li > div.mission span {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-height:1.3; text-align:left; -webkit-box-orient: vertical; word-break: break-word;}
.pop_history .list li > div.item {width: 26%; color:#ebf902;}
.pop_history .list li.top {text-transform:uppercase; height:auto; border-bottom:0;}
.pop_history .list li.top div {font-family: 'Fugaz One'; height:4rem; font-size:14px; background:rgba(36, 165, 236, 0.3); border:1px solid #29aff6; border-radius:1rem;}
.pop_history .list li.top div span {display:inline; line-height:1; filter: drop-shadow(0 0.3rem 0 rgba(16, 57, 62, 0.5));  background: linear-gradient(to right, #cafcff, #fff 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.pop_history .list li.none { height: 41.5rem; display:flex; align-items:center; justify-content:center; font-size: 16px; color:#ffffff; text-transform:uppercase; font-family: 'Fugaz One'; border-bottom:none;}
.pop_history .pop_con .desc {padding:3rem;}

.title_wrap {text-align:center; margin-bottom:8rem; padding:0 2.4rem; display: inline-block; position:relative; animation: lsi 1s;}
.title_wrap:before {animation: fade 3s linear infinite; content:''; display:block; position:absolute; top: -21.5%; left:0;width:33.7rem; height:28.8rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/v1/title_light.png');}
.title_wrap .sub_tit {font-family:'Fugaz One'; font-size:32px; text-transform:uppercase; margin-top:6px;}
.title_wrap .sub_tit span {background:linear-gradient(to right, #fff , #00a8ff ,  #00dca6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.title_wrap .date {margin-top:3.2rem; font-weight:300; font-size:18px; height:38px; text-transform:uppercase; color:#fff; display:inline-flex; align-items:center; justify-content:center; min-width:184px; padding:0 2.4rem; border-radius:19px; background:linear-gradient(to right ,rgba(0, 168, 255, 0.5) , rgba(0, 220, 166, 0.5));}

.mission_wrap {margin-bottom:16rem; position:relative;}
/*.mission_wrap:before {height:97.3rem; left:-100%; right:-100%; top:68%; content:''; display:block; position:absolute; background:url('/images/common/event/mission/v1/bg_mid.png') center center no-repeat; background-size:auto 100%;}*/
.m_tit {position:relative; border-radius:0 20px 20px 0; background:linear-gradient(to right , #00a8ff , #00dca6); font-family:'Fugaz One'; color:#fff; font-size:20px; text-transform:uppercase; padding:0 2.4rem; min-width:172px; display:inline-flex; align-items:center; justify-content:center; height:40px;}
.m_tit:before {width:25px; height:48px; content:''; top:-2px; left:-12px; display:block; position:absolute; background-image:url('/images/common/event/mission/v1/obj_tit.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.mission_wrap .top {font-size:0; display:flex; justify-content: space-between; align-items: flex-end; margin-bottom:4rem;}
.mission_wrap .current {background:linear-gradient(to right ,rgba(0, 168, 255, 0.5) , rgba(0, 220, 166, 0.5)); border-radius:30px; height:60px; font-size:0; position:relative; padding-right:0.4rem;}
.mission_wrap .current > div {display:inline-flex; align-items:center; justify-content:center; vertical-align: middle;}
.mission_wrap .current .m_tit {min-width:180px; height:100%; font-size:26px; border-radius:0 30px 30px 0;}
.mission_wrap .current .m_tit:before {width:30px; height:58px; top:1px; left:-15px;}
.mission_wrap .current .tit {font-family:'Fugaz One'; font-size:24px; text-transform:uppercase; padding:0 2.4rem; min-width:33rem;}
.mission_wrap .current .tit span {background:linear-gradient(to right, #00dca6 ,  #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .current .count_wrap {height:calc(100% - 0.8rem); background:rgba(0, 0, 0, 0.5); box-shadow:inset 0 0.3rem 0 rgba(0, 0, 0, 0.5); border-radius:26px;}
.mission_wrap .current .count_wrap .count {font-size:28px; color:#fff; font-weight:700; font-family:'Roboto'; min-width:10rem; padding:0 12px 0 30px;}
.mission_wrap .current .count_wrap .count font {color:#f0ff00;}
.mission_wrap .current .btn_day {height:100%; min-width:16rem; padding:0 2.4rem;}
.mission_wrap .remain {font-size:0;}
.mission_wrap .remain > span {display:inline-block; vertical-align:middle; font-weight:700; text-transform:uppercase; font-size:18px;}
.mission_wrap .remain > span font {background:linear-gradient(to right, #00a8ff , #00dca6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);}
.mission_wrap .remain .time {font-family:'Roboto'; width:84px; text-align:right;}
.mission_wrap .remain .progress {width:30rem; border-radius:10px; background:#000000; padding:5px; box-shadow:0 0.3rem 0.5rem rgba(0, 0, 0, 0.5); margin-left:1rem; position:relative;}
.mission_wrap .remain .progress:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; inset: 0; border-radius: 10px; padding:1px;  background:linear-gradient(to right ,#00a8ff ,#00dca6); -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;  mask-composite: exclude;}
.mission_wrap .remain .progress .bar {opacity:0; height:10px; background:linear-gradient(to right , #00a8ff , #00dca6); border-radius:5px; display:block;}
.animated .remain .progress .bar {animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s 0.2s forwards;}

.mission_wrap .list_wrap .list {display:flex;  margin-left:-5rem; flex-wrap: wrap; align-items: stretch; justify-content: center;}
.mission_wrap .list_wrap .list li {width: calc(100% / 3); flex-grow: 0; padding-left: 5rem;}
.mission_wrap .list .con {opacity:0; animation: flip-in-ver-right 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; position:relative; height:100%; padding:2.4rem 6rem 186px; border-radius:3rem; background:rgba(0, 0, 0, 0.2); position:relative; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);}
.mission_wrap .list li:nth-child(2) .con {animation-delay:0.2s;}
.mission_wrap .list li:nth-child(3) .con {animation-delay:0.4s;}
.mission_wrap .list .con:before {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; inset: 0; border-radius: 3rem; padding:3px;  background:linear-gradient(to right ,#00a8ff ,#00dca6); -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;  mask-composite: exclude;}
.mission_wrap .list .con .m_tit {position:absolute; top:3rem; left:0;}
.mission_wrap .list .box {display:flex; align-items:center; justify-content:center; min-height:36.8rem; flex-direction: column; padding-top:6.4rem; height: 100%;}
.mission_wrap .list .box > .btn {width:300px; height:150px; display:flex; align-items:center; justify-content:center; flex-direction: column;}
.mission_wrap .list .box > .btn font {font-size:24px;}
.mission_wrap .list .box > .btn font:first-child:before {content:''; display:block; position:absolute; left:50%; top:-7rem; width:6rem; height:6rem; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/v1/btn_deco.png'); margin-left:-3rem; background-size:100% auto;}
.mission_wrap .list .box > .btn font:first-child:after {content:''; display:block; position:absolute; left:50%; top:-7rem; width:6rem; height:6rem; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/mission/v1/btn_deco_b.png'); margin-left:-3rem; background-size:100% auto;}
.mission_wrap .list .box > .btn_receive font:first-child:after {background-image:url('/images/common/event/mission/v1/btn_deco_p.png');}
.reward .go_view {transition:none; position:absolute; right:0; top:50%; margin-top:-15px; font-size:0; border-radius:50%; width:30px; height:30px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/v1/icon_view.png');}
.reward .go_view:hover {background-position:0 -30px;}
.mission_wrap .list .con .reward {position:absolute; left:2.4rem; right:2.4rem; bottom:0; padding-bottom:1.2rem;}
.mission_wrap .reward .img {height:140px; display:flex; align-items:center; justify-content:center; min-width: 37rem;}
.mission_wrap .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.reward .tit {font-weight:800; text-transform:uppercase; font-size:18px; text-align:left; position:relative;} 
.reward .tit:before {content:''; display:block; position:absolute; left:87px; right:40px; top:50%; height:1px; background:rgba(1, 168, 255, 0.5);}
.reward .tit:after {content:''; display:block; position:absolute; left:87px; right:40px; top:50%; height:3px; margin-top: -1px; background:url('/images/common/event/mission/v1/dot_b.jpg') 0 0 no-repeat , url('/images/common/event/mission/v1/dot_b.jpg') right 0 no-repeat;}
.reward .tit span {position:relative; background:linear-gradient(to right, #00a8ff ,  #00dca6); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.reward .name {word-break: break-word; position:absolute; font-size:14px; color:#e8e8e8; text-align:left; margin-top:0.4rem;}
.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/v1/icon_ques.png') 0 0 no-repeat; left:50%; margin-left:-20px; top:-14px;}
.mission_wrap .list .reward .lock_item:after {top:-60px; width:100px; height:100px; background:url('/images/common/event/mission/v1/img_light.png') 0 0 no-repeat; left:50%; margin-left:-50px;     animation: fade 3s linear infinite;}
.mission_wrap .list .mission {min-height:20rem; display:flex; align-items:center; flex-direction: column; justify-content:center; position:relative; box-shadow:inset 0 0 0 1px rgba(0, 168, 254, 0.2); border-radius:3rem; width:100%; padding:3.6rem 2.4rem 2rem; background:url('/images/common/event/mission/v1/obj_line_lt.png') 0 0 no-repeat, url('/images/common/event/mission/v1/obj_line_lb.png') 0 bottom no-repeat, url('/images/common/event/mission/v1/obj_line_rt.png') right 0 no-repeat, url('/images/common/event/mission/v1/obj_line_rb.png') right bottom no-repeat;}
.mission_wrap .list .mission .txt {font-size:20px; font-weight:700; line-height:1.5; color:#fff; word-break: break-word;}
.mission_wrap .list .mission .count {font-size:28px; color:#ffffff; font-weight:700; font-family:'Roboto'; margin:1rem 0;}
.mission_wrap .list .mission .count font {color:#f0ff00;}
.mission_wrap .list .box .btn_clear {height:60px; margin-top:3rem; display: inline-block; width: auto;}
.mission_wrap .list .box .btn_clear font {font-size:18px;}
.mission_wrap .list .box .complete {padding-top:4px; line-height:1.25; font-size:24px; font-family: 'Fugaz One'; width:344px; height:157px; background:url('/images/common/event/mission/v1/bg_complete.png') 0 0 no-repeat; display:flex; align-items:center; justify-content:center; flex-direction: column; text-transform:uppercase;}
.mission_wrap .list .box .complete span {filter: drop-shadow(0 0.3rem 0 rgba(33, 61, 113, 0.5)); background: linear-gradient(to right, #ffffff, #00ffc1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .list .box .state {position:relative;}
.mission_wrap .list .box .state:before, .mission_wrap .list .box .state:after {content:''; display:block; position:absolute; left:0; top:0; bottom:0; right:0; width:100%; height:100%;}
.mission_wrap .list .box .state:before {background:url('/images/common/event/mission/v1/img_lock_frame01.png') 0 0 no-repeat;}
.mission_wrap .list .box .state:after {background:url('/images/common/event/mission/v1/img_lock_frame02.png') 0 0 no-repeat; }
.mission_wrap .list .lock .con:before {padding: 1px;}
.mission_wrap .lock .m_tit {background: linear-gradient(to right, rgba(0, 168, 255, 0.5), rgba(0, 220, 166, 0.5)); color:rgba(255, 255, 255, 0.85);}
.list_wrap.on {padding:0 68px 0 70px;}
.list_wrap .btn_arr {z-index: 2; display:none; position:absolute; top:50%; margin-top:-127px; transition:none; width:50px; height:55px; background-image:url('/images/common/event/mission/v1/btn_arr.png'); background-repeat:no-repeat; background-position:0 0; font-size:0; color:transparent; background-color:rgba(255, 255, 255, 0);}
.list_wrap .btn_prev {left:0;}
.list_wrap .btn_next {transform:scaleX(-1); right:0;}
.list_wrap .btn_arr:hover {background-position:0 -55px;}
.list_wrap .btn_arr.slick-disabled {background-position:0 -110px;}

.total_reward {margin-top:4.5rem;}
.total_reward .tit {font-size:18px; text-transform:uppercase; font-weight:800; position:relative;}
.total_reward .tit:before, .total_reward .tit:after {content:''; display:block; position:absolute; top:50%; height:1px; background:rgba(1, 168, 255, 0.5); width:calc((100% - 680px) / 2);}
.total_reward .tit:before {left:0;}
.total_reward .tit:after {right:0;}
.total_reward .tit span {background: linear-gradient(to right, #00a8ff, #00dca6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.total_reward .tit span:before, .total_reward .tit span:after {width: calc((100% - 680px) / 2); content:''; display:block; position:absolute; top:50%; height:3px; margin-top: -1px; background:url('/images/common/event/mission/v1/dot_b.jpg') 0 0 no-repeat , url('/images/common/event/mission/v1/dot_b.jpg') right 0 no-repeat;}
.total_reward .tit span:before {left:0;}
.total_reward .tit span:after {right:0;}
.total_reward .name {font-size: 14px; color: #e8e8e8; max-width:680px; margin:1.4rem auto 0; position: relative;}
.total_reward .reward { max-width:680px; margin:1rem auto 0; position:relative;}
.total_reward .reward .img {display:inline-flex; position:relative;}
.total_reward .reward .img > img {z-index:1;}
.total_reward .reward .img:before, .total_reward .reward .img:after {content:''; display:block; position:absolute; left:50%; }
.total_reward .reward .img:before {width:68.1rem; height:24.4rem; background:url('/images/common/event/mission/v1/bg_total.png') 0 0 no-repeat; margin-left:-34rem; bottom:-10rem;}
.total_reward .reward .img:after {width:38.6rem; height:28.4rem; background:url('/images/common/event/mission/v1/bg_total_light.png') 0 0 no-repeat; margin-left:-19.3rem; bottom:-6.6rem;}
.total_reward .reward .go_view {top:0; right:0; margin-top:0; z-index:2;}
.total_reward .reward .btn_receive {position:absolute; bottom:0; margin-left:3rem; }
.reward .btn_receive {height:8rem; min-width:24rem; border-radius:40px; font-family: 'Outfit'; font-weight:600; font-size: 16px; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);}
.reward .btn_receive:before, .reward .btn_receive:after {border-radius:40px;}
.reward .btn_receive span {flex-direction: row; padding: 0 28px 0 50px; position: relative;}
.reward .btn_receive span:before {margin-top:-10px; border-radius:0; left:27px; display:inline-block; vertical-align:middle; width:12px; height:20px; background:url('/images/common/event/mission/v1/icon_receive_s.png') 0 0 no-repeat;}
.reward .btn_receive.off {box-shadow:none; cursor: default; background:rgba(0, 0, 0, 0.4); color:rgba(238, 220, 255, 0.5);}
.reward .btn_receive.off:before {display:none;}
.reward .btn_receive.off:after {padding:2px; background: linear-gradient(to bottom, rgba(152, 41, 255, 0.6) , rgba(56, 0, 214, 0.6));}
.reward .btn_receive.off span:before {background:url('/images/common/event/mission/v1/icon_receive_s02.png') 0 0 no-repeat;}
.reward .btn_receive.end {box-shadow:none; cursor: default; background:rgba(0, 0, 0, 0.4); color:#e2d1f3;}
.reward .btn_receive.end font {-webkit-text-fill-color: #ae70e9 !important; margin-left: 0.4rem; filter: none; font-size: 16px;}
.reward .btn_receive.end:before {display:none;}
.reward .btn_receive.end:after {padding:2px; background: linear-gradient(to bottom, rgba(152, 41, 255, 1) , rgba(56, 0, 214, 1));}
.reward .btn_receive.end span:before {background:url('/images/common/event/mission/v1/icon_receive_end.png') 0 0 no-repeat; width:20px; height:16px; margin-top:-8px;}

.calendar_wrap {z-index: 1; padding:13rem 2.4rem 4rem; background: linear-gradient(to right, rgba(0, 168, 255, 0.2), rgba(0, 220, 166, 0.2)); border-radius:3rem; position:relative;}
.calendar_wrap:before {z-index: -1; content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset: 0; border-radius: 3rem; background:url('/images/common/event/mission/v1/bg_ptn.png') 0 0 repeat;}
.calendar_wrap:after {z-index: -1; content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset: 0; border-radius: 3rem; padding: 0.1rem; background: linear-gradient(to bottom ,#00a8ff ,#00dca6); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.calendar_wrap .m_tit {font-size:24px; position:absolute; top:3rem; left:0; height:60px; min-width:40rem; border-radius:0 30px 30px 0;}
.calendar_wrap .m_tit span {background: linear-gradient(to right, #f0ff00 , #fff 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.calendar_wrap .m_tit:before {width: 30px; height: 58px; top: 1px; left: -15px;}

.calendar_wrap .btn_all {cursor:pointer; position:absolute; top:3rem; right:4rem; background:linear-gradient(to bottom , #ea4eff , #990ea4); height:60px; padding:0.4rem 0.4rem 0.4rem 4rem; border-radius:30px; display:inline-block;}
.calendar_wrap .btn_all:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-image:url('/images/common/event/mission/v1/ptn03.png'); background-position:0 0; background-repeat:repeat; border-radius:30px;}
.calendar_wrap .btn_all:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; inset: 0; border-radius: 30px; padding:1px;  background:linear-gradient(to bottom ,#eb62ff ,#f338ff); -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;  mask-composite: exclude;}
.calendar_wrap .btn_all span {align-items: center; justify-content: center; box-shadow:inset 0 0.2rem 0 rgba(0, 0, 0, 0.3); flex-direction: row; vertical-align: middle; font-family:'Roboto'; font-size:22px; font-weight:700; color:#ebf902; width:auto; height:100%; width:106px; border-radius:26px; display:inline-flex; background:rgba(7, 23, 21, 0.5); margin-left:2.6rem; position:relative;}
.calendar_wrap .btn_all font {font-family: 'Fugaz One'; vertical-align: middle; text-transform:uppercase; font-size:18px; background:linear-gradient(to right, #ffb7fe , #fff 80%); filter: drop-shadow(0 0.3rem 0 rgba(76, 35, 123, 0.5)); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.calendar_wrap .btn_all:hover:before {display:none;}
.calendar_wrap .btn_all:hover font {background:linear-gradient(to right, #fff , #fff);}
.calendar {max-width:1640px; margin:0 auto;}
.calendar ul {font-size:0; margin-left:-4rem; text-align:left;} 
.calendar ul li {width:calc((100% - 28rem) / 7); display:inline-block; vertical-align:top; position:relative; margin-left:4rem; margin-bottom:4rem;}
.calendar ul li:after {content: ""; display: block; padding-bottom: 100%;}
.calendar ul li .con { padding:10% 2.4rem; box-shadow:inset 0 0.5rem 0 rgba(0, 0, 0, 0.5); display:flex; flex-direction: column; align-items:center; justify-content:center; position:absolute; left:0; padding-top:11.5%; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); border-radius:3rem;}
.calendar ul li .con:before {content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset: 0; border-radius: 3rem; padding: 1px; background: linear-gradient(to right, rgba(0, 168, 255, 0.5), rgba(0, 220, 166, 0.5)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.calendar ul li .con:after {content: ''; display: block; position: absolute; top: 10%; bottom: 10%; left: 10%; right: 10%; background:url('/images/common/event/mission/v1/dot_b.jpg') 0 0 no-repeat, url('/images/common/event/mission/v1/dot_b.jpg') 0 bottom no-repeat, url('/images/common/event/mission/v1/dot_b.jpg') right 0 no-repeat, url('/images/common/event/mission/v1/dot_b.jpg') right bottom no-repeat;}
.calendar ul li .con .day {font-size:18px; position:absolute; left:0; top:2.3rem; right:0;  text-align:center; font-weight:900; text-transform:uppercase;}
.calendar ul li .con .day span {position: relative; background: linear-gradient(to right, rgba(0, 168, 255, 1), rgba(0, 220, 166, 1)); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.calendar ul li .con .complete {display:block; max-width:120px; margin:0 auto; position:relative; width:79%;}
.calendar ul li .con .complete:after {content: ""; display: block; padding-bottom: 100%;}
.calendar ul li .con .complete span {word-break: break-word; text-align: center; padding-bottom:1rem; font-size:14px; color:#fff; font-weight:700; text-shadow:0 0.2rem 0 rgba(0, 0, 0, 0.3); text-transform:uppercase; box-shadow:inset 0 0.5rem 0 rgba(255, 255, 255, 0.3); display:flex; align-items:center; justify-content:center; flex-direction:column; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:linear-gradient(to right, rgba(219, 35, 239, 0.8) , rgba(235, 99, 255, 0.8));}
.calendar ul li .con .complete span:before {content:''; display:block; width: 60.84%; height: 55.46%; background:url('/images/common/event/mission/v1/img_hand.png') 0 0 no-repeat; background-size:100% auto;}
.calendar ul li .con .btn_day {box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.5); max-width:120px; width:100%; font-size:14px;  min-height:30px; position:absolute; bottom:10%; font-family:'Outfit'; z-index:1;}
.calendar ul li .con .count {font-size:28px; color:#ffffff; font-weight:700; font-family:'Roboto'; margin-bottom:0.5rem;}
.calendar ul li .con .count font {color:#f0ff00;}
.calendar ul li .con .t_tit {font-size:0; display:none;}

.calendar ul .ok .con {padding-bottom:0;}
.calendar ul .bin .con .day {font-size:28px; position:static;}
.calendar ul .bin .con .day span {display:block; line-height:1.2; background: linear-gradient(to right, rgba(0, 168, 255, 0.5), rgba(0, 220, 166, 0.5)); }
.calendar ul .today .con {box-shadow: inset 0 0.5rem 0 rgba(0, 0, 0, 0.5) , 0 0.5rem 0 rgba(0, 0, 0, 0.2); padding-top:11%; padding-bottom:0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, rgba(5, 169, 255, 0.5));}
.calendar ul .today .con:before {padding: 0.3rem; background: linear-gradient(to right, rgba(0, 168, 255, 1), rgba(0, 220, 166, 1));}
.calendar ul .today .con:after {background:url('/images/common/event/mission/v1/dot_y.jpg') 0 0 no-repeat, url('/images/common/event/mission/v1/dot_y.jpg') 0 bottom no-repeat, url('/images/common/event/mission/v1/dot_y.jpg') right 0 no-repeat, url('/images/common/event/mission/v1/dot_y.jpg') right bottom no-repeat;}
.calendar ul .today .con .t_tit {border-radius:0 0 1rem 1rem; min-width:80px; max-width:100%; padding:2px 1.2rem 0; height:21px; color:#fff; font-size:14px; font-weight:500; text-transform:uppercase; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:50%; transform:translate(-50% , 0); background: linear-gradient(to right, rgba(0, 168, 255, 1), rgba(0, 220, 166, 1));}
.calendar ul .today .con .day {top:30px;}
.calendar ul .today .con .count {margin-bottom:0;}

.animated .calendar ul li .con {animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.reward_wrap {font-size:0; margin-top: 1.6rem;}
.reward_wrap .reward {display:inline-block; width: 30%; vertical-align:top; margin:0 5%; background:url('/images/common/event/mission/v1/bg_final.png') center bottom no-repeat;}
.reward_wrap .reward .name {position:static;}
.reward_wrap .reward .img {margin:1rem; height:200px; display:flex; align-items:center; justify-content:center; position:relative;}
.reward_wrap .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle; position:relative;}
.reward_wrap .reward .img:before, .reward_wrap .reward .img:after {content:''; display:block; position:absolute; left:50%; mix-blend-mode: screen;}
.reward_wrap .reward .img:before {width:68.1rem; height:24.4rem; background:url('/images/common/event/mission/v1/bg_total.png') 0 0 no-repeat; margin-left:-34rem; bottom:-4rem; background-size:100% auto;}
.reward_wrap .reward .img:after {width:38.6rem; height:28.4rem; background:url('/images/common/event/mission/v1/bg_total_light.png') 0 0 no-repeat; margin-left:-19.3rem; bottom:-0.6rem; background-size:100% auto;}
.reward_wrap .reward .btn_receive {min-width:20rem; height:5rem; box-shadow: 0 0.3rem 0 rgba(0, 0, 0, 0.5); background: linear-gradient(to bottom, #ea4eff, #990ea4);}
.reward_wrap .reward .btn_receive:before {background-image: url(/images/common/event/mission/v1/ptn03.png);}
.reward_wrap .reward .btn_receive:after {background: linear-gradient(to bottom, #eb62ff, #f338ff);}
.reward_wrap .reward .btn_receive span:before {box-shadow:none;}
.reward_wrap .reward .btn_receive:hover { background: linear-gradient(to bottom, #ee7cff, #f33aff);}

.reward_wrap .reward .btn_receive.off {box-shadow:none; background:rgba(0, 0, 0, 0.4);}
.reward_wrap .reward .btn_receive.off:before {display:none;}
.reward_wrap .reward .btn_receive.off:after {padding:2px; background: linear-gradient(to bottom, rgba(152, 41, 255, 0.6), rgba(86, 0, 214, 0.6));}
.reward_wrap .reward .btn_receive.off:hover {background:rgba(0, 0, 0, 0.4);}

.reward_wrap .reward .btn_receive.end {box-shadow:none; background:rgba(0, 0, 0, 0.4);}
.reward_wrap .reward .btn_receive.end:before {display:none;}
.reward_wrap .reward .btn_receive.end:after {padding:2px; background: linear-gradient(to bottom, rgba(152, 41, 255, 1), rgba(86, 0, 214, 1));}
.reward_wrap .reward .btn_receive.end span:before {left:14px;}
.reward_wrap .reward .btn_receive.end:hover {background:rgba(0, 0, 0, 0.4);}


.reward.mid .tit:before, .reward.mid .tit:after {left:160px;}
.reward.final .tit:before, .reward.final .tit:after {left:143px;}

.calendar_wrap .reward_wrap .reward {background:none;}

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

@media screen and (max-width: 2200px){
.btn_history {right:2rem; bottom:4rem;}
}


@media screen and (max-width: 1800px) {
.calendar ul {margin-left:-2.4rem;}	
.calendar ul li {margin-left:2.4rem; margin-bottom:2.4rem; width: calc((100% - 16.8rem) / 7);}
.list_wrap.on {padding: 0 43px 0 45px;}
.list_wrap .btn_prev {left:-16px;}
.list_wrap .btn_next {right:-16px;}
.mission_wrap .list_wrap .list {margin-left:-3.6rem;}	
.mission_wrap .list_wrap .list li {padding-left:3.6rem;}	
.mission_wrap .list .con {padding-left:3.6rem; padding-right:3.6rem;}	
}
	
@media screen and (max-width: 1500px) {
.mission_wrap .list_wrap .list {margin-left:-2.4rem;}	
.mission_wrap .list_wrap .list li {padding-left:2.4rem;}	
.mission_wrap .list .con {padding-left:2.4rem; padding-right:2.4rem;}	
.mission_wrap .list .box > .btn {width:100%; max-width:300px;}
.mission_wrap .list .box .btn_clear {width:auto; max-width:none;}
.calendar ul li {width: calc((100% - 14.4rem) / 6);}
}	

@media screen and (max-width: 1360px) {
.cha {right:auto; left:40%; margin-left:-391px; top:250px;}	
.title_wrap {margin-bottom:0;}
.mission_wrap .top {display:block; margin-top:15.8rem;}	
.mission_wrap .remain { margin:4rem auto 0;}
.mission_wrap .current {border-radius:0; margin:0 -2.4rem;}
.mission_wrap .current {padding:1.5rem 4.8rem; height:auto;}
.mission_wrap .current .m_tit {position:absolute; left:2.4rem; top:0; transform: translate(0, -70%); height:60px;}
.mission_wrap .current .count_wrap {height:52px; display:flex; justify-content: flex-end;}
.mission_wrap .current .tit {position:absolute; top:50%; left:7.8rem; transform:translate(0 , -50%); min-width:0; padding:0;}
.calendar_wrap {padding-top:5rem;}
.calendar_wrap .m_tit {position:absolute; left:4.8rem; top:0; transform: translate(0, -50%); height:60px;}
.calendar_wrap .btn_all {position:relative; top:auto; right:auto;}
.calendar {margin-top:2rem;}
}
	
@media screen and (max-width: 1280px) {
.mission_wrap .list_wrap .list {margin-left:0; display:block;}	
.mission_wrap .list_wrap .list li {padding-left:0; width:100%; margin-bottom:4.8rem;}	
.mission_wrap .list .con {padding-left:2.4rem; padding-right:2.4rem;}	
.calendar ul li {width: calc((100% - 12rem) / 5);}
.reward_wrap .reward { display:block; width:90%; margin:2rem auto; }
}	

@media screen and (max-width: 1160px) {
.cha {top:300px;}	
header {text-align:center; padding-top:10.5rem;}	
header .util {top:0; left:0; right:0; background:#00263f; text-align:left; padding-right:12rem;}
header .user_info {background:none; border-radius:0; height:6rem; margin-right:0; width:100%; display:block; line-height:6rem;}
header .user_info > div {display:inline-block; vertical-align:middle; max-width:50%;}
header .btn_login {top:50%; margin-top:-2.5rem; right:6px; position:absolute; height:5rem; border-radius:0.5rem; min-width:10rem; box-shadow:none;}
header .btn_login:before {border-radius:0.5rem}
header .user_info .user {font-size:18px; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; color: #00a8ff;}
header .user_info .user span {padding-left:3rem;}
header .user_info .cash {font-size:18px; }
header .user_info .cash span {overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; max-width:calc(100% - 60px); display: inline-block; vertical-align: middle; position: relative; top: -2px; min-width: 92px;}

.all_wrap > .inner {padding-top:21.2rem;}

.total_reward .reward .btn_receive {margin:0 auto; position:relative; bottom:auto; display:block;}	
.total_reward .reward {margin-top:2rem;}
.total_reward .reward .img:after {bottom:-16rem;}
.total_reward .reward .img:before {bottom:-20rem;}
.total_reward .tit:before, .total_reward .tit:after {width: calc((100% - 400px) / 2);}
.total_reward .tit span:before, .total_reward .tit span:after {width: calc((100% - 400px) / 2);}
.calendar ul li {width: calc((100% - 9.6rem) / 4);}
.reward_wrap .reward { margin:4.8rem auto; }
}

@media screen and (max-width: 900px) {
.calendar ul li {width: calc((100% - 7.2rem) / 3);}
}	

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

.mobile {display:block;}

header .bi img {width:30rem;}
header .btn_today {font-size:2.7rem; background-size:100% auto; width:28.4rem; height:11.3rem; top:1rem; right:1rem;}
header .btn_today:hover {background-position:0 -11.3rem;}
header .btn_today:before {margin-right:1rem;}
header .util {padding-right:15rem;}
header .btn_login {font-size:2.4rem; height:30px; margin-top:-15px;}
header .user_info {height:40px; line-height:40px;}
header .user_info .user {font-size:2.7rem;}
header .user_info .user span {padding-left:4rem;}
header .user_info .user:before {width:20px; height:20px; background-size:100% auto; margin-top:-10px;}
header .user_info .cash {font-size:2.7rem;}
header .user_info .cash span {max-width: calc(100% - 42px); min-width: 70px;}


.cha {width:100%; left:0; margin-left:-15%; top:4.5%;}

.m_tit {font-size:2.9rem;}
.m_tit:before {width:19px; height:36px; left:-9px; top:-4px;}
.reward .tit {font-size:2.7rem;}
.reward .name {font-size:2.3rem;}
.reward .btn_receive {font-size:2.5rem;}
.btn font {font-size:2.7rem;}
.btn span:before {width:30px; height:30px; margin-top:-15px; background-size:100% auto; left:16px;}
.btn_modify {font-size:2.3rem;} 
.btn_clear span {font-size:3.1rem; min-width:90px;}
.btn_history span {font-size:1.9rem;}

.mission_wrap .list .box > .btn {max-width:200px; height:100px;}
.mission_wrap .list .box .btn_clear {width:auto; max-width:none; height:45px;} 
.mission_wrap .list .box > .btn font {font-size:2.7rem;}
.mission_wrap .list .con {padding-bottom:146px;}
.mission_wrap .list .con .m_tit {min-width:120px; height:30px;}
.mission_wrap .reward .img {height:100px;}
.mission_wrap .list .mission {background-size:4rem auto;}
.mission_wrap .list .box {padding-top:10rem;}
.mission_wrap .list .mission .txt {font-size:2.9rem;}
.mission_wrap .list .mission .count {font-size:3.7rem;}
.mission_wrap .list .box .complete {font-size:3.3rem; width:210px; height:96px; background-size:100% auto;}
.mission_wrap .reward .no_item img, .mission_wrap .reward .lock_item img {max-width:56px;}
.mission_wrap .list .reward .lock_item:before {width:30px; height:30px; background-size:100% auto; margin-left:-15px; top:-10px;}
.mission_wrap .list .reward .lock_item:after {width:76px; height:76px;  background-size:100% auto; margin-left:-34px; top:-45px;}
.mission_wrap .list .box .state {width:142px;}
.mission_wrap .list .box .state:before, .mission_wrap .list .box .state:after {background-size:100% auto;}
.mission_wrap .list .box > .btn font:first-child:before {top:-8rem;}
.mission_wrap .list .box > .btn font:first-child:after {top:-8rem;}
.total_reward .tit {font-size:2.7rem;}
.total_reward .name {font-size:2.3rem;}
.total_reward .reward .img:before, .total_reward .reward .img:after {background-size:100% auto;}
.total_reward .reward .btn_receive {height:45px;}
.total_reward .tit:before, .total_reward .tit:after {width: calc((100% - 260px) / 2);}
.total_reward .tit span:before, .total_reward .tit span:after {width: calc((100% - 260px) / 2);}

.title_wrap {margin-bottom:7%;}
.title_wrap .date {font-size:2.7rem; height:24px;}
.title_wrap .sub_tit {font-size:4.1rem;}

.mission_wrap .current {padding-left:2.4rem; padding-right:2.4rem;}
.mission_wrap .current .tit {font-size:3.3rem; left:4.8rem;}
.mission_wrap .current .m_tit {height:45px; font-size:3.5rem; min-width:125px;}
.mission_wrap .current .m_tit:before {width:23px; height:45px; background-size:100% auto; top:0; left:-11px;}
.mission_wrap .current .count_wrap {height:40px;}
.mission_wrap .current .count_wrap .count {font-size:3.7rem;}
.mission_wrap .remain > span {font-size:2.7rem;}
.calendar_wrap .btn_all font {font-size:2.7rem;}
.calendar_wrap .btn_all span {font-size:3.1rem; width:72px;}
.calendar_wrap {margin:0 -2.4rem; border-radius:0; padding-top:7rem;}
.calendar_wrap:after {display:none;}
.calendar_wrap .m_tit {height:45px; font-size:3.5rem; min-width:125px;}
.calendar_wrap .m_tit:before {width:23px; height:45px; background-size:100% auto; top:0; left:-11px;}
.calendar_wrap .btn_all {height:45px;}
.calendar { padding: 0 3.6rem;}
.calendar ul li:after {padding-bottom:125%;}
.calendar ul li .con .complete {width:90%;}
.calendar ul li .con .complete span {font-size:1.7rem;}
.calendar ul li .con .day {font-size:2.7rem;}
.calendar ul li .con .img img {max-width:6.2rem;}
.calendar ul li .con .btn_day {font-size:2.1rem; width:auto; min-width:0; max-width:120px; width: calc(100% - 4.8rem); min-height: 24px;}
.calendar ul li .con .count {font-size:3.7rem;}
.calendar ul .today .con {padding-top:16%;}
.calendar ul .today .con .t_tit {font-size:2.3rem; min-width:60px; height:17px;}
.calendar ul .today .con .day {top:24px;}
.calendar ul .bin .con .day {font-size:3.7rem;}

.calendar {max-width:640px;}	
.reward_wrap { max-width:640px; margin:0 auto;}

.reward_wrap {padding: 0 3.6rem;}
.reward_wrap .reward .btn_receive {height:45px;}


.pop_up .pop_layout {width:auto; left:2.4rem; right:2.4rem; transform: translate(0, -50%);}
.pop_up .pop_con h2 {font-size:3.1rem; height:45px;}
.pop_up .pop_con .txt {font-size:2.7rem;}
.pop_up .pop_con .y_txt {font-size:3.9rem;}
.pop_up .btn span {font-size:2.3rem;}
.pop_up .pop_con .cash {padding-right:28px;}
.pop_up .pop_con .cash:after {margin-top:-9px; width:18px; height:18px; background-size:100% auto !important;}
.pop_detail .pop_con .name {font-size:2.9rem;}
.pop_clear .btn font {font-size:2.5rem;}
.pop_clear .reward {padding-top:6rem; padding-bottom:6rem;} 
.pop_clear .reward .con .name {margin-top:0;}
.pop_clear .reward .tit {font-size:2.3rem;}
.pop_all #pageinfo {font-size:2.3rem;}
.pop_all .reward {padding:0 14rem;} 
.pop_all .reward .img_list .name {top:9px;}
.pop_all .reward .img {padding:6rem 0; height:26rem;}
.pop_all .img_list .slick-prev {left:-11rem;}
.pop_all .img_list .slick-next {right:-11rem;}

.pop_history .list li {height:6rem; line-height:6rem;}
.pop_history .list li > div {font-size:2.1rem;}
.pop_history .list li > div.mission span {line-height:1.1;}
.pop_history .list li.top div {font-size:2.3rem; height: 5rem; padding-top:2px;}
.pop_history .list li > div.date {width:30%;}
.pop_history .list li > div.date span {margin-top:0;}
.pop_history .list li > div.mission {width: calc(44% - 10px);}
.pop_history .list li.none {font-size:2.5rem;}



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

@media screen and (max-width: 480px) {
.calendar ul li .con .complete {margin-top:20%;}
.reward_wrap .reward { background-size:100%; }	
.pop_clear .btns {margin-left:0;}
.pop_clear .btn {height:56px; width:100%; margin:0 auto 1.6rem; max-width:255px; display:flex;}
}

@media screen and (max-width: 370px) {
.cha {top:5.5%;}
header .user_info .cash span {min-width:0;}
}	

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

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

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

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

    50% {
        z-index: 1
    }

    85% {
        opacity: 0
    }

    to {
        opacity: 0;
    }
}

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

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

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

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

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

@keyframes lsi {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

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

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

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

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

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

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