@charset "utf-8";
@import url("https://use.typekit.net/lko5hnv.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;
--osw : 'oswald', sans-serif;
--ble : 'blenny-thai', sans-serif;
--gre : 'greycliff-thai-cf', sans-serif;
}

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

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; line-height: 1.1; text-align: center; font-family: 'greycliff-thai-cf', sans-serif; background:#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: 'greycliff-thai-cf';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'greycliff-thai-cf'; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}
button {cursor:pointer; transition:all ease-in-out 0.2s; font-family: 'greycliff-thai-cf';}

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

 .svg-filters { position: absolute; width: 0;  height: 0; overflow: hidden;}

.fiu {animation: fiu 0.3s;}

.obj {position:absolute;}
.tube {transform: translate(0, -73%); right: -4.5%; max-width:48rem; width:19%; animation: up01 1.5s 0.2s infinite; top:0;}
.ball {transform: translate(0, -32%); right:7% ; max-width:23rem; width:9%; animation: up02 1.5s infinite; top:0;}
.parasol {bottom:0; transform: translate(0, -13%); left: -10.5%; max-width:76.1rem; width:30%; animation: spin 50s linear infinite; transform-origin: center center;}

.container {overflow:hidden; position:relative; background:#000;}
.all_wrap {background:#00ffff;}

.cha_wrap {animation-duration:0.5s; position:absolute;}
.cha_wrap span {position:absolute; pointer-events: none;}
.cha_wrap span img {position:absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; will-change: opacity, transform; }
.cha_wrap01 {left: 2.6%; top:31%;  width:36.5%; max-width:936px;}
.cha_wrap01 span {left:-9%; bottom:-14.5%; width: 110.882%; height: 49.604%;}
.cha_wrap02 {right: 13.8%; top:26%; width:15.6%; max-width:400px;}
.cha_wrap02 span {width: 150%; height: 31.778%; bottom: -1%; left: -35%;}

.animated .cha_wrap01 {animation:fil 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);}
.animated .cha_wrap01 .splash01 { animation: splashPop 0.2s ease-out 0.30s forwards; }
.animated .cha_wrap01 .splash02 { animation: splashPop 0.2s ease-out 0.36s forwards; }
.animated .cha_wrap01 .splash03 { animation: splashPop 0.2s ease-out 0.42s forwards; }
.animated .cha_wrap01 .splash04 { animation: splashPop 0.2s ease-out 0.48s forwards; }
.animated .cha_wrap01 .splash05 { animation: splashPop 0.2s ease-out 0.42s forwards; }
.animated .cha_wrap01 .splash06 { animation: splashPop 0.2s ease-out 0.25s forwards; }
.animated .cha_wrap01 .splash07 { animation: splashPop 0.2s ease-out 0.30s forwards; }

.animated .cha_wrap02 {animation:fir 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);}
.animated .cha_wrap02 .splash01 { animation: splashPop 0.2s ease-out 0.30s forwards; }
.animated .cha_wrap02 .splash02 { animation: splashPop 0.2s ease-out 0.36s forwards; }



.btn {z-index:1; padding:0.1rem 2.5rem 0; color:#000000; text-shadow:0 0 2px rgba(0, 0, 0, 0.2); letter-spacing:0; border:1px solid #55eedd;  display:flex; height:48px; align-items:center; justify-content:center; text-transform:uppercase; font-family:var(--gre); font-size:16px; font-weight:600; border-radius:24px; position:relative; box-shadow:inset 0 -1rem 2rem rgba(255, 255, 255, 0.8), 0 4px 10px rgba(0, 0, 0, 0.2); background: linear-gradient(to right, #44ccff, #66ff88); transition:all ease-in-out 0.2s;}
.btn:before {opacity:0; z-index:-1; position:absolute; content:''; display:block; top:2px; left:2px; right:2px; bottom:2px; background:#000000; border-radius:22px; transition:all ease-in-out 0.2s;}
.btn:after {content:''; display:block; position:absolute; width:1.4rem; height:2.6rem; background:url('/images/common/event/mission/songkran/obj_btn.png') 0 0 no-repeat; background-size:100% auto; top:0.7rem; left:0.6rem;}
.btn font {color:#001188; transition:all ease-in-out 0.2s;}
.btn:hover {color:#44ccff;}
.btn:hover:before {opacity:1;}
.btn:hover font {color:#66ff88;}
.btn_r {border-color:#ffbbdd; box-shadow:inset 0 -1rem 2rem #fff, 0 4px 10px rgba(0, 0, 0, 0.2); background: linear-gradient(to right, #ffbbdd, #ffcc88);}
.btn_r:hover {color:#ffbbdd;}
.btn_o {border-color:#ffddaa; box-shadow:inset 0 -1rem 2rem #fff, 0 4px 10px rgba(0, 0, 0, 0.2); background: linear-gradient(to right, #ffaa77, #ffee88);}
.btn_o font {color:#883300;}
.btn_o:hover {color:#ffaa77;}
.btn_o:hover font {color:#ffee88;}

.btn_receive {box-shadow:0 2rem 4rem rgba(0, 51, 153, 0.8); transition:none; position:relative; font-family:var(--ble); font-size:45px; font-weight:900; line-height:0.93; text-transform:uppercase; background-repeat:no-repeat; background-position:0 0; background-repeat:no-repeat; background-size:100% auto; background-color:rgba(0, 0, 0, 0); display:flex; align-items:center; justify-content:center;}
.btn_receive:before, .btn_receive:after {content:''; display:block; position:absolute; background-repeat:no-repeat; background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.btn_receive:before {background-image:url('/images/common/event/mission/songkran/img_flower02.png'); width:11.5rem; height:12rem; top: -7%; left: -19%;  animation: sway01 2s infinite ease-in-out;}
.btn_receive:after {background-image:url('/images/common/event/mission/songkran/img_starfish02.png'); width:5.6rem; height:7.4rem; bottom: 12%; right: 6%; animation: sway02 2s 0.2s infinite ease-in-out;}
.btn_receive span {background: linear-gradient(to bottom, #000000, #663300); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter:drop-shadow(0 1px 1px rgba(255, 255, 187, 0.5)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));}
.btn_receive font {color:#000000;}
.btn_receive:hover {background-position:0 100%;}
.btn_receive:hover font {color:#ffddaa;}
.btn_receive:hover span {background: linear-gradient(to bottom, #ffddaa, #fff); filter:drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));}
.btn_receive:hover:before, .btn_receive:hover:after {animation:none;}

.btn_history.fix {border-radius:50%; display:none; transition:none; position:fixed; z-index:11; right:3rem; bottom:3rem; width:9.6rem; height:9.6rem; font-size:14px; box-shadow:0 1.2rem 2rem rgba(0, 51, 102, 0.4);}
.btn_history.fix:before {border-radius:50%;}
.btn_history.fix:after {width:1.7rem; height:3.4rem; background:url('/images/common/event/mission/songkran/obj_btn02.png') 0 0 no-repeat; background-size:100% auto; top:1.6rem; left:0.8rem;}
.btn_history.fix span:after {content:''; top:0; left:0; display:block; position:absolute; width:100%; height:100%; background:url('/images/common/event/mission/songkran/bg_history.png') 0 0 no-repeat; background-size:100% auto;}


.user_info {padding:0 2.4rem; text-align:center;}
.user_info .user {font-size:17px; color:#fff; letter-spacing:0.02em; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; max-width: 100%; white-space: nowrap; word-wrap: normal;}
.user_info .cash {font-weight:500; color:#ffff66; font-size:22px; letter-spacing:0.02em; text-transform:uppercase;}
.user_info .cash span {margin-right:0.6rem;}

header { text-align:left; position:absolute; top:0; left:0; right:0; z-index: 20; padding:3.6rem 4rem 0;}
header .bi img {max-width:160px;}
header .util {flex-wrap:wrap; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); box-shadow:0 1rem 2rem rgba(0, 37, 221, 0.2); background:linear-gradient(to bottom, #0088ff , rgba(0, 0, 0, 0)) , rgba(51, 68, 187, 0.7); border-radius:0 0 4rem 4rem; position:absolute; top:0; left:50%; height:96px; transform:translate(-50% , 0); max-width:864px; width:100%; display:flex; padding:0 2.4rem; align-items:center; justify-content:space-between; }
header .util .btn {min-width:192px;}
header .util .user_info {width:calc(100% - 394px);}
header .util .user_info .cash {margin-top:0.6rem;}

footer {width: 100%; padding:10rem 2.4rem; background:#000; font-family:'Roboto'; z-index:2;}
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 14px; color:#aaaaaa; position: relative; letter-spacing:0.01em;}
footer .footer .cs > a {color:#ffee00; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 7px; font-size:14px; color:#aaaaaa;}
.footer .age {margin-bottom:2rem;}
.footer .age img {max-width:6rem;}

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

.pop_up {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; display: none;}
.pop_up .pop_layout {width:540px; left:50%; top:50%; transform:translate(-50% , -50%); z-index: 99; border-radius:0 3rem 3rem 3rem; position: relative; background: #00eeff url(/images/common/event/mission/songkran/bg_pop.png) 0 0 repeat; box-shadow: 0 0 4rem rgba(0, 102, 255, 0.2); position: relative;}
.pop_up .pop_close {right:1.2rem; top:-36px; position:absolute; cursor:pointer; width:24px; height: 24px; 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/songkran/pop_close.png'); background-size:100% auto;}
.pop_up .pop_close:hover {background-position:0 100%;}

.pop_up .pop_con h2 {max-width: calc(100% - 110px); text-align: left; position:absolute; left:0; top:-4.7rem; letter-spacing: 0.02rem; padding:1.2rem 3.6rem 0; margin-left:0; margin-right:auto; font-size:23px; font-weight:900; -webkit-text-stroke: 0.02rem #77eeff; paint-order: fill stroke; border-radius:2.4rem 2.4rem 0 0; display:inline-flex; height:4.8rem; text-transform:uppercase; color:#bbffff; font-family:var(--ble); background:#0077ff url('/images/common/event/mission/songkran/obj_btn02.png') 0.6rem 0.7rem no-repeat; align-items:center; justify-content:center;}
.pop_up .pop_con h2:before {content:''; display:block; position:absolute; top:0; bottom:0; right:-1.8rem; background:url('/images/common/event/mission/songkran/stit_add.png') right bottom no-repeat; width:1.8rem; background-size:100% auto;}
.pop_up .pop_con h2:after {position:absolute; top: -3.2rem; right: -5.4rem; content:''; display:inline-block; vertical-align:middle; width:6.6rem; height:4.8rem; background:url('/images/common/event/mission/songkran/stitle_splash.png') 0 0 no-repeat; background-size:100% auto;}
.pop_up .pop_con h2 font {color:#fff; margin-right:0.5rem;}

.pop_up .pop_con {position: relative; z-index: 1;}
.pop_up .pop_con .desc {padding:3.6rem; position: relative;}
.pop_up .pop_con .desc:after {content:''; display:block; position:absolute; bottom:-1.1rem; height:1.2rem; width:12.4rem; right:4.8rem; background:url('/images/common/event/mission/songkran/bg_hidden.png') 0 0 no-repeat; background-size:100% auto;}
.pop_up .pop_con .txt {min-height:6rem; padding:1.2rem 2rem 1rem; display:flex; align-items:center; justify-content:center; letter-spacing:0; position:relative; word-break: break-word; font-size:17px; color:#bbffff; background: linear-gradient(to bottom, #003399, #0055ee); border-radius:2.4rem 2.4rem 0 0;}
.pop_up .pop_con .txt span {color:#ffff66; margin-left:0.4rem;}
.pop_up .pop_con .day {margin-bottom:2.4rem; padding-top:2rem; letter-spacing:0.02rem; text-shadow:0 0 4px #0044ff; text-transform:uppercase; font-family:var(--ble); font-size:36px; color:#bbffff; font-weight:900; -webkit-text-stroke: 0.02rem #77eeff; paint-order: fill stroke;  display:flex; align-items:center; justify-content:center; height:6rem; border-radius:30px; background: linear-gradient(to bottom, rgba(0, 17, 68, 0.8), rgba(0, 85, 238, 0.8));}
.pop_up .pop_con .day span {color:#fff; margin:0 0.8rem;}

.pop_up .pop_con .reward {box-shadow:0 2px 0 #55ffff, 0 1rem 4rem rgba(0, 85, 204, 0.2); position:relative; background:url('/images/common/event/mission/songkran/bg_reward.jpg') right center no-repeat; background-size:cover; border-radius:0 0 3rem 3rem; padding:2.4rem;}
.pop_up .pop_con .reward .name {color:#000000; letter-spacing:0.02em; font-size:16px; margin-top:1rem; word-break: break-word;}
.pop_up .pop_con .img {max-width:42rem; position:relative; z-index:1; height:18rem; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.pop_up .pop_con .img > img {max-width:100%; max-height:100%; vertical-align:middle;}

.pop_up .pop_con .box {padding:0; position:relative; border-radius:2.4rem; }
.pop_up .pop_con .box > .cash {padding-top:2rem; min-height:14.4rem; display:flex; align-items:center; justify-content:center; position:relative; font-size:48px; z-index:1; font-weight:900; font-family:var(--ble); border-radius:0 0 2.4rem 2.4rem; box-shadow:inset 0 0 6px rgba(0, 221, 255, 0.5), 0 1rem 2rem rgba(0, 119, 221, 0.5); background: linear-gradient(to bottom, #99ffff, #fff);}
.pop_up .pop_con .cash > span:after {margin-left:1.2rem; position:relative; top:-0.5rem; content:''; display:inline-block; vertical-align:middle; width:4.8rem; height:4.8rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/songkran/icon_pbcash.png');}
.pop_up .btns {font-size:0; margin:2.4rem -3.6rem 0;}
.pop_up .btns button {letter-spacing:-0.01em; box-shadow:0 1rem 3rem rgba(0, 51, 153, 0.8); transition:none;text-transform:uppercase; position:relative; padding:0.5rem 2.4rem 0; margin-left:1.6rem; text-align:center; font-size:15px; font-weight:700; flex-direction:column; line-height:1.06; display:inline-flex; vertical-align:top; align-items:center; justify-content:center; height:7.2rem;  border-radius:36px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-color:rgba(255, 255, 255, 0);}
.pop_up .btns button:first-child {margin-left:0;}
.pop_up .btns button > span {-webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 1px 1px rgba(255, 255, 187, 0.5)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));}
.pop_up .btns button > font {margin-top:2px; font-weight:900; font-size:24px; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.pop_up .btns .btn01 {background-image:url('/images/common/event/mission/songkran/btn_pop01.png'); width:23.8rem; }
.pop_up .btns .btn01:before {content:''; display:block; position:absolute; width:5.6rem; height:7.4rem; top:-0.7rem; right:-2rem; background:url('/images/common/event/mission/songkran/img_starfish02.png') 0 0 no-repeat; background-size:100% auto;}
.pop_up .btns .btn01 > span {background: linear-gradient(to bottom, #000000, #663300);}
.pop_up .btns .btn01 > font {background: linear-gradient(to bottom, #000000, #880000);}
.pop_up .btns .btn02 {background-image:url('/images/common/event/mission/songkran/btn_pop02.png'); width:25rem; }
.pop_up .btns .btn02 > span {background: linear-gradient(to bottom, #000000, #003388);}
.pop_up .btns .btn02 > font {background: linear-gradient(to bottom, #000000, #003399);}

.pop_up .btns .btn01:hover > span {background: linear-gradient(to bottom, #ffddaa, #fff);}
.pop_up .btns .btn01:hover > font {background: linear-gradient(to bottom, #ffff66, #fff);}
.pop_up .btns .btn02:hover > span {background: linear-gradient(to bottom, #aaddff, #fff);}
.pop_up .btns .btn02:hover > font {background: linear-gradient(to bottom, #aaddff, #fff);}
.pop_up .btns button:hover {background-position:0 100%;}
.pop_up .btns button:hover > span {filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));}

.pop_mission .btns button {font-size:18px;}
.pop_mission .btns .btn01 {width:18rem; height:6rem; background-image:url('/images/common/event/mission/songkran/btn_pop03.png');}
.pop_mission .btns .btn02 {width:18rem; height:6rem; background-image:url('/images/common/event/mission/songkran/btn_pop04.png');}
.pop_mission .pop_con .cash > span {background: linear-gradient(to bottom, #000000, #880000); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.pop_clear .pop_layout {width:576px;}
.pop_clear .btns .cash span:after {width:24px; height:24px; margin-left:5px; top:-0.3rem;}
.pop_clear .btn01 .cash span:after {background-image:url('/images/common/event/mission/songkran/icon_pbcash_r.png');}
.pop_clear .btn02 .cash span:after {background-image:url('/images/common/event/mission/songkran/icon_pbcash_b.png');}
.pop_clear .btns button:hover .cash span:after {background-position:0 100%;}

.pop_all .pop_con .reward {padding:2.4rem 0 48px;}
.pop_all .pop_con .desc {padding-top:1.6rem;}
.pop_all #pageinfo {display:inline-flex; align-items:center; justify-content:center; min-width:12rem; padding:3px 2.4rem 0; height:3.2rem; background:#55ffff; border-radius:1.2rem 1.2rem 0 0; font-size:16px; color:#003399; letter-spacing:0.02em; font-weight:500; position:absolute; left:50%; bottom:0; transform:translate(-50% , 0);}
.pop_all #pageinfo span {color:#000000; 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:36px; height:36px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/mission/songkran/btn_arr.png'); background-color:rgba(255, 255, 255, 0); background-size:100% auto; border-radius:50%; box-shadow:0 1rem 2rem rgba(0, 136, 221, 0.8);}
.pop_all .img_list .slick-prev {left:-18px;}
.pop_all .img_list .slick-next {right:-18px; 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_detail .pop_con .reward {border-radius:3rem;}
.pop_detail .pop_con h2 {font-size:17px; font-weight:500; letter-spacing:0.01em; font-family:var(--gre); text-transform: none; -webkit-text-stroke: 0px; padding-top: 3px;}

.pop_history .pop_layout {width:792px;}
.pop_history .pop_con .desc {padding:3rem; position:relative;}
.pop_history .pop_con .desc:before {z-index:-1; content:''; display:block; position:absolute; top:3rem; left:3rem; bottom:3rem; right:5.4rem; background: linear-gradient(to bottom, #99ffff ,#fff); border-radius:1rem;}
.pop_history .list { letter-spacing:0; height: 100%; padding-right: 1.4rem; overflow-y: scroll ; max-height:46.2rem; position:relative; z-index:1;}
.pop_history .list::-webkit-scrollbar {width: 1rem; }
.pop_history .list::-webkit-scrollbar-track {border-radius:5px; background:rgba(0, 0, 0, 0);}
.pop_history .list::-webkit-scrollbar-thumb { border-radius:5px; background:#003399;}
.pop_history .list li {border-bottom:1px solid #33bbdd; font-size: 0;}
.pop_history .list li.bottom:last-child {border-radius:0 0 1rem 1rem;}
.pop_history .list li > div {font-weight:500; align-items: center; justify-content: center; flex-direction: column; height:6rem; padding:0.2rem 1rem 0; display: inline-flex; vertical-align:middle; text-align:center; font-size:15px; color:#000000;}
.pop_history .list li > div.date {text-transform: uppercase; width:24%;}
.pop_history .list li > div.date span {display:block; color:#003399; margin-top:3px; font-size:14px;}
.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%;}
.pop_history .list li.bottom > div.date {line-height:1.1;}
.pop_history .list li > div.mission {width:50%; 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%;}
.pop_history .list li:last-child { overflow:hidden; border-bottom:none;}
.pop_history .list li.top {border-radius:1rem 1rem 0 0; overflow:hidden; text-transform:uppercase; height:auto; border-bottom:0;  background: linear-gradient(to bottom, #001144 ,#0055ee); padding-top:0;}
.pop_history .list li.top div { height:36px; font-size:15px;}
.pop_history .list li.top div span {display:inline; line-height:1; color:#bbffff; font-weight:700; margin-top: 1px;}
.pop_history .list li.none {font-weight:500; height: 46.4rem; border-bottom:none; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size: 15px; color:#000000; background: linear-gradient(to bottom, #99ffff ,#fff); text-transform:uppercase; }

.section01 {position:relative; text-align:center; background:url('/images/common/event/mission/songkran/bg01.jpg') center bottom no-repeat;}
.section01 .title_wrap {height:100vh; padding:15rem 0 0;}
.section01 .title_wrap .user_info {display:none; text-align:center;}
.section01 .title_wrap .date {text-transform:uppercase; color:#ff4488; font-size:34px; text-shadow: -0.2rem 0px #fff, 0px 0.2rem #fff, 0.2rem 0px #fff, 0px -0.2rem #fff; margin-bottom:5.6%;}
.section01 .title_wrap .date span {color:#112299;}
.section01 .title_wrap .tit {display:inline-block; position:relative; z-index:1; height:calc(94.4% - 37px - 15rem); opacity: 0;}
.section01 .title_wrap .tit .title {height:100%;}
.section01 .title_wrap .tit:before {content:''; display:block; position:absolute; z-index:-1; top: -21%; right: -16%; width: 66.116%; height:101.154%; background:url('/images/common/event/mission/songkran/splash.png') 0 0 no-repeat; background-size:auto 100%; opacity:0;}
.section01 .title_wrap .tit .light {position:absolute; width:24.08%;     mix-blend-mode: screen;}
.section01 .title_wrap .tit .light01 {top:16.14%; left:63.2%; animation: blink 3s ease-in-out infinite;}
.section01 .title_wrap .tit .light02 {top:43.16%; left:43.44%; animation: blink 3s ease-in-out 1s infinite;}
.section01 .title_wrap .tit .light03 {top:48.43%; left:17.7%; animation: blink 3s ease-in-out 2s infinite;}

.animated .title_wrap .tit {animation: emerge 1s cubic-bezier(0.175, 0.885, 0.32, 1.5) 0.2s forwards;;}
.animated .title_wrap .tit:before {animation: splashPop 0.2s ease-out 0.7s forwards;}


.top {padding-top:1.5rem; }
.top .inner {position:relative; text-align:center;}
.top .remain {padding:0 2rem 0 3.2rem; top:50%; transform:translate(0 , -50%); font-size:17px; font-weight:600; color:#661100; text-transform:uppercase; position:absolute; left:1.2rem; padding-top:20px; width:300px; height:90px; background:url('/images/common/event/mission/songkran/bg_time.png') 0 0 no-repeat; background-size:100% auto; display:flex; align-items:center; justify-content:space-around;}
.top .remain .time {color:#000000; text-shadow: -2px 0px 2px #eecc88; font-weight:900;}
.top .m_tit { display: flex; align-items: center; justify-content: center;}
.top .m_tit .txt {margin:0 -5.4rem; position:relative;}
.top .m_tit .txt span {font-size:0; display:none; color:transparent;}
.top .m_tit .day {letter-spacing:0.06em;  padding-top:1%; font-size:14px; font-weight:600; text-transform:uppercase; text-shadow: 0 0 2px rgba(0, 136, 255, 1); color:#000000; display:flex; align-items:center; justify-content:center; flex-direction:column; width:21.8rem; height:21.4rem; background:url('/images/common/event/mission/songkran/bg_day.png') 0 0 no-repeat; background-size:100% auto;}
.top .m_tit .day span {margin-top:1px; display:block; padding-top:3px; font-family:var(--ble); font-size:42px; font-weight:900; background: linear-gradient(to bottom, #000000 ,#0066ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;}
.top .etc {border-radius:36px; background:rgba(0, 17, 68, 0.8); padding:1.2rem; position:absolute; right:3rem; top:50%; transform:translate(0 , -50%); display:flex; align-items:center; justify-content:flex-end;}
.top .etc .count_wrap {min-width:12rem; padding-right:1.2rem;}
.top .etc .count {font-size:22px; color:#ffffff; letter-spacing:0.04em;}
.top .etc .count font {color:#ffff66;}

.mission_wrap {border-bottom:0.2rem solid #fff; padding-bottom:14.4rem; background:url('/images/common/event/mission/songkran/bg02.jpg') center 6.2rem no-repeat , url('/images/common/event/mission/songkran/bg_ptn.jpg') center 0 repeat-y; margin-top:-6.2rem;}
.mission_wrap .list_wrap {position:relative; overflow:hidden;}
.mission_wrap .list_wrap .inner {position:relative;}
.mission_wrap .list_wrap .slick-list { width:100%;}
.mission_wrap .list {margin-left:-4rem; flex-wrap: wrap; display:flex; flex-wrap: wrap;}
.mission_wrap .list li {width:calc(100% / 3); padding-left:4rem; margin-bottom:4rem;}
.mission_wrap .list li .con {height:100%; position:relative; text-align:left;}
.mission_wrap .list .m_tit {letter-spacing: 0.02rem; padding:1rem 3rem 0; margin-left:0; margin-right:auto; font-size:24px; font-weight:900; -webkit-text-stroke: 0.02rem #77eeff; paint-order: fill stroke; border-radius:2.4rem 2.4rem 0 0; display:inline-flex; height:48px; text-transform:uppercase; color:#bbffff; font-family:var(--ble); background:#0077ff; position:relative; align-items:center; justify-content:center;}
.mission_wrap .list .m_tit:before {content:''; display:block; position:absolute; top:0; bottom:0; right:-1.8rem; background:url('/images/common/event/mission/songkran/stit_add.png') right bottom no-repeat; width:1.8rem; background-size:100% auto;}
.mission_wrap .list .m_tit font {color:#fff; margin-right:0.5rem;}
.mission_wrap .list .box {text-align:center; padding:11%; position:relative; min-height:48rem; border-radius:0 3rem 3rem 3rem; background: url('/images/common/event/mission/songkran/bg_mission.png') center center no-repeat; background-size:cover; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);}
.mission_wrap .list .slick-active .box {box-shadow:0 0 4rem rgba(0, 102, 255, 0.2);}
.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 {width:100%; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:26.4rem; padding:60px 5rem 4.8rem; border-radius:2.4rem; background: linear-gradient(to bottom, #99ffff, #fff); box-shadow:inset 0 0 0.6rem rgba(0, 221, 255, 0.5), 0 1rem 2rem rgba(0, 119, 221, 0.5);}
.mission_wrap .list .mission .txt {font-size:22px; color:#000000; line-height:1.36; letter-spacing:0.005em;}
.mission_wrap .list .mission .count {font-size:50px; font-family:var(--ble);  margin-top:1.7rem; font-weight:900; }
.mission_wrap .list .mission .count * {display:inline-block; vertical-align:top; height: 65%; padding-top: 3px;}
.mission_wrap .list .mission .count span {background: linear-gradient(to bottom, #000000, #0066ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .list .mission .count font {background: linear-gradient(to bottom, #000000, #cc3300); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .list .mission .btn_modify {height:36px; display:flex; border-radius:0 0 24px 24px; background:#003399; align-items:center; justify-content:center; position:absolute; top:0; left:50%; transform:translate(-50% , 0); min-width:144px; padding:0 2.4rem; font-size:14px; text-transform:uppercase; font-weight:700;}
.mission_wrap .list .mission .btn_modify:before, .mission_wrap .list .mission .btn_modify:after {content:''; display:block; position:absolute; top:0; bottom:0; width:18px; background:url('/images/common/event/mission/songkran/btn_add.png') 0 0 no-repeat; background-size:100% auto; }
.mission_wrap .list .mission .btn_modify:before {left:-17px;}
.mission_wrap .list .mission .btn_modify:after {right:-17px; transform:scaleX(-1);}
.mission_wrap .list .mission .btn_modify span {background: linear-gradient(to bottom, #44ccff, #66ff88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .list .mission .btn_modify img {vertical-align:middle; position:relative; top:0; margin-right:0.8rem;}
.mission_wrap .list .mission .btn_modify:hover {background:#000;}
.mission_wrap .list .mission .btn_modify:hover:before, .mission_wrap .list .mission .btn_modify:hover:after {background-position:0 100%;}

.mission_wrap .btn_start {position:relative; transition:none; width:31.2rem; height:31.2rem; overflow:hidden; border-radius:50%; box-shadow:0 1rem 4rem rgba(0, 51, 153, 0.8); padding-top:9%;}
.mission_wrap .btn_start:before {filter: url(#water-distortion); content:''; display:block; width:100%; height:100%; top:0; left:0; transition:none; position:absolute; background-repeat:no-repeat; background-size:100% auto; background-position:0 0; background-size:100% auto; overflow:hidden; border-radius:50%; background-image:url('/images/common/event/mission/songkran/btn_start.png');}
.mission_wrap .btn_start > div {position:relative; color:#fff; font-weight:900; font-size:45px; font-family:var(--ble); text-transform:uppercase; line-height:0.93;  -webkit-text-stroke: 0.02rem rgba(119, 238, 255, 0.5); paint-order: fill stroke; text-shadow:0 0.4rem 1.6rem rgba(0, 51, 187, 0.8);}
.mission_wrap .btn_start > div:after {margin:2px auto 0; content:''; display:block; width:3.6rem; height:4.2rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/songkran/btn_start_arr.png');}
.mission_wrap .btn_start > div font {transition:all ease-in-out 0.2s; color:#ffff66;}
.mission_wrap .btn_start:hover > div font {color:#aaffff;}
.mission_wrap .btn_start:hover:before {background-position:0 100%;}
.mission_wrap .btn_start:hover > div:after {background-position:0 100%;}

.mission_wrap .list .btn_receive {padding-top: 7%; background-image:url('/images/common/event/mission/songkran/btn_reward.png'); border-radius:50%; width:31.2rem; height:31.2rem;}
.mission_wrap .list .btn_receive:before {width:16.6rem; height:18rem; background-image:url('/images/common/event/mission/songkran/img_flower.png'); top:3rem; left:-7rem;}
.mission_wrap .list .btn_receive:after {width:12rem; height:11.2rem; background-image:url('/images/common/event/mission/songkran/img_starfish.png'); bottom:3rem; right:0;}
.mission_wrap .list .btn_receive > div:after {margin:2px auto 0; content:''; display:block; width:3.6rem; height:3.5rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/mission/songkran/btn_reward_arr.png');}

.mission_wrap .list .btn_clear {transition:all ease-in-out 0.2s; background: linear-gradient(to right, #003399, #0044cc); border-radius:36px; box-shadow:inset 0 1rem 4rem #0077ff, 0 0.4rem 1rem rgba(0, 51, 255, 0.2); margin-top:2.4rem; min-width:28.8rem; padding:1.2rem 1.2rem 1.2rem 3rem; display:flex; align-items:center; justify-content:space-between;}
.mission_wrap .list .btn_clear .txt {margin-right:2.4rem; text-shadow:0 0 2px rgba(0, 0, 0, 0.2); padding-top:3px; font-size:17px; color:#ffffff; line-height:1.17; font-weight:500; text-align:left; text-transform:uppercase;}
.mission_wrap .list .btn_clear .txt font {color:#99ffff;}
.mission_wrap .list .btn_clear:hover {background: linear-gradient(to right, #003399, #0088bb); }

.mission_wrap .list .reward {text-align:center; padding:3rem 3.6rem; margin-top:2.4rem; position:relative; z-index:1; background:url(/images/common/event/mission/songkran/bg_reward.jpg) right center repeat; background-size:cover; border-radius:3rem; box-shadow:inset 0 -2px 2px #55ffff;}
.mission_wrap .list .slick-active .reward {box-shadow:inset 0 -2px 2px #55ffff , 0 1rem 4rem rgba(0, 85, 204, 0.2);}
.mission_wrap .list .reward:before {content:''; display:block; position:absolute; top:0; height:1.2rem; width:12.4rem; right:3.6rem; background:url('/images/common/event/mission/songkran/bg_hidden.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .reward .tit {position:relative; font-family:var(--ble); width:max-content; text-transform:uppercase; text-align:left; font-size:25px; color:#bbffff; font-weight:900; letter-spacing:0.02em; text-shadow:0 0.4rem 3rem rgba(0, 2, 102, 0.3); -webkit-text-stroke: 0.02rem #77eeff; paint-order: fill stroke;}
.mission_wrap .list .reward .tit:after {position:absolute; bottom: 2.2rem; right: -5.4rem; content:''; display:inline-block; vertical-align:middle; width:6.6rem; height:4.8rem; background:url('/images/common/event/mission/songkran/stitle_splash.png') 0 0 no-repeat; background-size:100% auto;}
.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-size:16px; color:#000000; letter-spacing:0.02em; }

.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/songkran/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/songkran/img_light.png') 0 0 no-repeat; left:50%; margin-left:-5rem; animation: fade 3s linear infinite; background-size:100% auto;}


.total_reward {position:relative; z-index:1;}
.total_reward .con {padding:3rem 4.2% 3.6rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; background:url('/images/common/event/mission/songkran/bg_total.jpg') center center no-repeat; background-size:cover; position:relative; border-radius:3rem;}
.mission_wrap .total_reward .tit {line-height: 1.15; z-index:1; position:relative; padding-top:1%; text-align:left; text-shadow:0 0.4rem 2rem rgba(0, 2, 102, 0.3); -webkit-text-stroke: 0.02rem #ffdd99; paint-order: fill stroke; color:#ffffdd; font-family:var(--ble); font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:0.02rem;}
.mission_wrap .total_reward .tit:before {z-index:-1; top: -1.8rem; right: -14.5rem; content:''; position:absolute; width:14.4rem; height:10rem; background:url('/images/common/event/mission/songkran/img_duck.png') 0 0 no-repeat; background-size:100% auto;   will-change: transform; animation: swim 3.5s ease-in-out infinite;}
.mission_wrap .total_reward .tit .wh {color:#fff; -webkit-text-stroke: 0.02rem #77eeff; paint-order: fill stroke; }
.mission_wrap .total_reward .tit .bl {color:#bbffff; -webkit-text-stroke: 0.02rem #77eeff; paint-order: fill stroke; }
.total_reward .reward .img {position:relative; z-index:1; height:18rem; max-width:420px; margin:0 auto; display:flex; align-items:center; justify-content:center;}
.total_reward .reward .img > img {max-width:100%; max-height:100%; vertical-align:middle;}
.total_reward .reward .name {text-shadow:0 0 2px rgba(0, 51, 153, 0.4); margin:5px 0 -4px; font-size: 16px; color:#fff; display:inline-block; position:relative; padding:4px 48px 0; }
.total_reward .reward .name .go_view {top:50%; right:0; margin-top:-18px;}

.total_reward .btn_receive {padding-top:1%; width:26.4rem; height:12rem; font-size:32px; background-image:url('/images/common/event/mission/songkran/btn_reward02.png'); border-radius:6rem;}
.total_reward .btn_receive.end {background-position:0 100%; cursor: default;}
.total_reward .btn_receive.end:before, .total_reward .btn_receive.end:after{display:none;}
.total_reward .btn_receive.end font {color:#ffddaa;}
.total_reward .btn_receive.end span {background: linear-gradient(to bottom, #ffddaa, #fff); filter:drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));}
.total_reward .btn_receive.end > div {padding-left:5.2rem; padding-right:4px; display: inline-block; position: relative;}
.total_reward .btn_receive.end > div:before {content:''; display:inline-block; position:absolute; top:50%; left:0; margin-top:-2.8rem;  width:4rem; height:4rem; background:url('/images/common/event/mission/songkran/icon_received.png') 0 0 no-repeat; background-size:100% auto;}
.total_reward .btn_receive.end:hover {background-position:0 100%;}

.total_reward .btn_receive.off {background:rgba(17, 68, 136, 0.7); box-shadow:inset 0 0 3rem rgba(17, 68, 136, 0.4); cursor: default;}
.total_reward .btn_receive.off:before, .total_reward .btn_receive.off:after{display:none;}
.total_reward .btn_receive.off font {background: linear-gradient(to bottom, #55bbff, #88ddff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.total_reward .btn_receive.off span {background: linear-gradient(to bottom, #55bbff, #88ddff); filter:none; }

.go_view {transition:none; z-index:1; font-size:0; color:transparent; position:absolute; width:36px; height:36px; border-radius:50%; background-position:0 0; background-image:url('/images/common/event/mission/songkran/btn_view.png'); background-size:100% auto; background-repeat:no-repeat; top:2.4rem; right:2.4rem; box-shadow:0 0.4rem 1rem rgba(0, 0, 0, 0.2);}
.go_view:hover {background-position:0 100%;}

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


.calendar_wrap {border-top:1rem solid #ffeecc; background:url('/images/common/event/mission/songkran/bg_calendar.jpg') 0 0 repeat;  position:relative; padding-bottom:14.4rem;}
.calendar_wrap .top {padding:12.9rem 0 4.7rem;}
.calendar_wrap .top .etc {background:rgba(85, 34, 0, 0.8);}
.calendar_wrap .top .m_tit .txt {margin:0;}
.calendar_wrap .top .btn_all {padding-top:1%;}

.calendar_wrap .calendar {padding:1.2rem; border:0.2rem solid #ffeecc; position:relative; background:#fff8ee; border-radius:3rem; box-shadow:0 2rem 4rem rgba(51, 17, 0, 0.2);}
.calendar_wrap .calendar .wrap {padding:4.8rem 4.6rem 1.8rem; border-radius:3rem; background:url('/images/common/event/mission/songkran/bg_cal_con.jpg') center 0 repeat;}
.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 {position:relative;}
.calendar_wrap .calendar .con:after {padding-bottom:100%; content:''; display:block; }
.calendar_wrap .calendar .con .bg {position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; padding:0 0 7%; flex-direction:column; display:flex; align-items:center; justify-content: flex-start; background-repeat:no-repeat; background-image:url('/images/common/event/mission/songkran/bg_base.jpg'); background-position:center center; background-size:cover; border-radius:3rem; border:0.2rem solid #0066aa; box-shadow:inset 0 0 3rem rgba(0, 153, 255, 0.5) , 0 0 0.6rem rgba(0, 51, 85, 0.1);}
.calendar_wrap .calendar .con .day {font-size:17px; color:#77ddff; text-transform:uppercase; letter-spacing:0.04em; border-radius:2.8rem 2.8rem 0 0; height:36px; width:100%; display:flex; align-items:center; justify-content:center; background: linear-gradient(to bottom, #003366 , #004488);}
.calendar_wrap .calendar .con .day font {color:#ffff66;}
.calendar_wrap .calendar .con .state {display:flex; align-items:center; justify-content:center;  width: 86%; max-width:144px; height:36px; margin:0 auto; border-radius:18px; background:#0066aa; font-size:14px; color:#77eeff; font-weight:500; text-transform:uppercase;}
.calendar_wrap .calendar .con .btn {width:86%; max-width:144px; height:36px; font-size:14px; font-weight:600; padding-top: 0; padding-bottom: 0.02rem; }
.calendar_wrap .calendar .con .btn:after {width:1rem; height:1.8rem; top:0.5rem;}
.calendar_wrap .calendar .con .img {padding:2.4%; height:calc(100% - 72px); display: flex; align-items: center; justify-content: center;}
.calendar_wrap .calendar .con .img img {max-height:100%;}
.calendar_wrap .calendar .con .count {padding-top:12%; height:calc(100% - 36px); display: flex; align-items: center; justify-content: center; font-size:42px; font-weight:900; color:#0066aa; font-family:var(--ble);}
.calendar_wrap .calendar .con .count font {color:#bb1100; margin-right:1rem;}
.calendar_wrap .calendar .con .count span {margin-left:1rem;}

.calendar_wrap .calendar .fail .bg {background-image:url('/images/common/event/mission/songkran/bg_fail.jpg'); }

.calendar_wrap .calendar .today .bg {border-color:#ffff66;}
.calendar_wrap .calendar .today .label {line-height:2.6rem; top:-2.4rem; position:absolute; text-align:center; height:4.8rem; background:#ffff66; border-radius:1rem 1rem 0 0; font-size:14px; color:#000000; font-weight:600; text-transform:uppercase; display:inline-block; min-width:90px; padding:3px 1.2rem 0; }
.calendar_wrap .calendar .today .label:before {content:''; display:block; position:absolute; top:0; height:2.6rem; width:1rem; right:-1rem; background:url('/images/common/event/mission/songkran/add_today.png') right bottom no-repeat; background-size:100% auto;}

.calendar_wrap .calendar .bin .bg {background-image:url('/images/common/event/mission/songkran/bg_bin.png'); border-radius:50%; border:none; box-shadow:0 0.4rem 1rem rgba(119, 255, 255, 0.2); justify-content:center; padding: 5% 0 0;}
.calendar_wrap .calendar .bin .con .day {letter-spacing:0.02em; background:none; height:auto; font-size:27px; color:#0066aa; text-transform:uppercase; font-weight:900; font-family:var(--ble);}
.calendar_wrap .calendar .bin .con .day font {color:#004488;}

.calendar_wrap .reward_wrap {position:relative; font-size:0; margin-top:4.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4rem; padding-bottom:0; padding-top:0;}
.calendar_wrap .reward_wrap .con {z-index:1; box-shadow:inset 0 1px 2px rgba(51, 17, 0, 0.2) , 0 1rem 4rem rgba(51, 17, 0, 0.4); position:relative; border-radius:3rem; overflow:hidden; background:url('/images/common/event/mission/songkran/bg_reward02.jpg') 0 0 no-repeat; padding:3.6rem 3.6rem 4.8rem; display:inline-block; flex-grow: 1; min-height:38.4rem; position:relative; max-width:none; margin:0; max-width:calc((100% - 4rem) / 2); background-size:cover;}
.calendar_wrap .reward_wrap .con:before {content: ''; display: block; position: absolute; inset: 0; border-radius: 3rem; padding: 0.4rem; background: linear-gradient(to bottom ,#eeddcc ,#ffeecc); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.calendar_wrap .reward_wrap .con:after {z-index:-1; content:''; display:block; position:absolute; top:1.4rem; bottom:1.4rem; left:1.4rem; right:1.4rem; background:rgba(51, 17, 0, 0.8); border-radius:1.6rem; box-shadow:inset 0 0 4rem rgba(0, 0, 0, 0.5) , 0 0 2px rgba(255, 238, 204, 0.1);}

.calendar_wrap .reward_wrap .con .reward {height:100%;  position:relative; z-index:1; padding-top:3rem;}
.calendar_wrap .reward_wrap .con .reward .img {margin-bottom:1.2rem;}
.calendar_wrap .reward_wrap .con .tit {color:#fff; -webkit-text-stroke: 0.02rem #ffddbb; text-shadow:0 0.4rem 2rem rgba(51, 17, 0, 0.3); paint-order: fill stroke; text-align:center; margin-top:0; position:absolute; top:3.6rem; left:3.6rem; font-size:30px; font-family:var(--ble); font-weight:900; text-transform:uppercase; letter-spacing:0.02rem; }
.calendar_wrap .reward_wrap .con .tit span {color:#ffeedd;}
.calendar_wrap .reward_wrap .name { font-size: 16px; color:#ffeecc; display:inline-block; position:absolute; right:3rem; top:4rem; padding-right:48px; max-width: calc(100% - 408px); text-align: right; z-index:2; letter-spacing: 0.01rem;}
.calendar_wrap .reward_wrap .name .go_view {top:50%; right:0; margin-top:-18px; background-image:url('/images/common/event/mission/songkran/btn_view02.png'); }

.calendar_wrap .total_reward .btn_receive {width:42rem; height:7.2rem; background-image: url(/images/common/event/mission/songkran/btn_reward03.png); padding-top:2%; box-shadow:0 1rem 4rem rgba(34, 17, 0, 0.8); margin:0 auto;}
.calendar_wrap .total_reward .btn_receive br {display:none;}
.calendar_wrap .total_reward .btn_receive:before {top: -60%; left: -11%;}
.calendar_wrap .total_reward .btn_receive:after {bottom: -30%; right: 2%;}
.calendar_wrap .total_reward .btn_receive.off {background:rgba(34, 17, 0, 0.7);}
.calendar_wrap .total_reward .btn_receive.off span {background: linear-gradient(to bottom, #886f66, #cc9966);}
.calendar_wrap .total_reward .btn_receive.off font {background: linear-gradient(to bottom, #886f66, #cc9966);}


/* 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;}

.cha_wrap02 {right:5.8%;}
}


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



}


@media screen and (max-width: 1800px) {
.cha_wrap01 {left:-2%;}
.cha_wrap02 {top: 34%; width: 20%; right:0;}

.calendar_wrap .calendar ul {margin-left:-2rem;}
.calendar_wrap .calendar ul > li {padding-left:2rem;}
.calendar_wrap .reward_wrap .con .tit {font-size:26px;}
.calendar_wrap .reward_wrap .name {max-width: calc(100% - 380px);}

.top .etc .count_wrap {min-width:10rem;}

header .util {max-width:620px;}
header .util .btn {min-width:0; text-align:center;}
header .util .btn font {display:block; flex-direction:column;}
header .util .user_info {width: calc(100% - 290px);}


}

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

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


.list_wrap .btn_arr {margin-top:-14.2rem;}




}

@media screen and (max-width: 1360px) {
header .util {max-width: 510px;}
header .util .btn { padding: 0.1rem 2rem 0; font-size:14px;}
header .util .user_info {        width: calc(100% - 240px);}

.top .remain {position:static; margin-right:2.4rem; transform:none; display:inline-flex; vertical-align:bottom;}
.top .etc {position:static; margin:0 auto; transform:none; display:inline-flex; vertical-align:bottom;}
.top .etc .count_wrap {min-width:12rem;}

.mission_wrap .list_wrap {margin-top:6rem;}
.mission_wrap .list li {width:50%;}
.mission_wrap .top .m_tit {padding-right:3.5%;}
.mission_wrap .total_reward .tit br {display:none;}
.mission_wrap .total_reward .btn_receive {margin:3rem auto 0;}

.total_reward .con {display:block; text-align:center;}
.total_reward .tit {text-align:center; width:max-content; margin:0 auto; max-width:100%;}



.calendar_wrap .calendar ul > li {width: calc(100% / 6);}
.calendar_wrap .reward_wrap  {display:block;}
.calendar_wrap .reward_wrap .con {display:block; max-width:none; margin-bottom:4rem; text-align:left;}
.calendar_wrap .reward_wrap .con.final {margin-bottom:0;}

.calendar_wrap .top .etc {margin-top:4rem;}

}

@media screen and (max-width: 1280px) {
.cha_wrap01 {left: -2.4%; top: 78%;}
.cha_wrap02 {right: 0; top: 62%; width:20%;}

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

header .util {width: auto; max-width: none; background: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);}
header .util .btn_history {display:none;}
header .util .btn_login {min-width:192px;}
header .util .user_info {display:none;}
.btn_history.fix {display:flex;}

.section01 {background-size:auto 100%;}
.section01 .title_wrap .user_info {max-width: 100%; margin-top:3.6rem; height:66px; display: inline-flex; padding: 0 2.4rem; align-items: center;  justify-content: space-between; flex-wrap: wrap;  -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); box-shadow: 0 1rem 2rem rgba(0, 37, 221, 0.2); background: linear-gradient(to bottom, #0088ff, rgba(0, 0, 0, 0)), rgba(51, 68, 187, 0.7); border-radius: 40px;}
.section01 .title_wrap .user_info .user {max-width:50%; margin-right:2rem;}
.section01 .title_wrap .user_info .cash {font-size:17px; display: inline-block; text-transform: uppercase;}

.section01 .title_wrap {height:auto; padding-bottom:9.6rem;}
.section01 .title_wrap .tit {height:auto; display: block; max-width: max-content; margin: 0 auto; padding: 0 10%;}
.section01 .title_wrap .tit .title {height:auto;}
.section01 .title_wrap .date {margin-bottom:9.2rem;}


}

@media screen and (min-width: 1281px) and (min-height: 1045px) {
.section01 .title_wrap {height: 1044px;}
.section01 .title_wrap .date {margin-bottom:9.6rem;}
.section01 .title_wrap .tit {height:auto;}
.section01 .title_wrap .tit .title {height:auto;}

.cha_wrap01 {left:-4%; top:50%;}
.cha_wrap02 {top:48%; right:0; width:20%; }
}

@media screen and (min-width: 1500px) and (min-height: 1045px) {
.cha_wrap01 {left:-3%; top:39%;}
.cha_wrap02 {top:36%;}
}

@media screen and (min-width: 2200px) and (min-height: 1045px) {
.cha_wrap01 { left: 2.6%; top: 31%;}
.cha_wrap02 {right:13.8%; top:26%;}
}

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

header {text-align:center; padding-top:3rem;}
header .util {height:auto; top:1.2rem; right:1.2rem; left:auto; transform:none; padding:0;}
header .util .btn_login {min-width:0; border-radius:1rem;}
header .util .btn_login:before {border-radius:1rem;}

}

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

.cha_wrap01 {top: 70%;}

.btn {font-size:2.7rem; height:36px;}
.btn_receive {font-size:5.4rem;}
.btn_history.fix {font-size:2rem; width:64px; height:64px;}

.go_view {width:30px; height:30px;}


header .bi img {max-width:24rem;}

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

.top .m_tit .day {font-size:2.3rem; padding-top:2%;}
.top .m_tit .day span {font-size:5.1rem; margin-top:0;}
.top .etc {margin-top:2rem;}
.top .etc .count {font-size:3.1rem;}
.top .remain {font-size: 2.7rem; width: auto; height: auto; background: none; padding: 0; display: flex; justify-content: center;}
.top .remain .tit {margin-right:0.8rem;}

.mission_wrap .top .m_tit .txt img {height:6rem;}
.mission_wrap .list .m_tit {height:36px; font-size:3.3rem; padding-top:2rem;}
.mission_wrap .list .box .desc .img img {max-width:31.2rem;}
.mission_wrap .btn_start > div {font-size:5.5rem;}
.mission_wrap .list .mission .txt {font-size:3.1rem;}
.mission_wrap .list .mission .count {font-size:5.9rem;}
.mission_wrap .list .btn_clear .txt {font-size:2.6rem;}

.mission_wrap .list .reward .tit {font-size:3.4rem;}
.mission_wrap .list .reward .name {font-size:2.5rem;}
.mission_wrap .total_reward .tit {font-size:3.9rem; text-align:center;}
.mission_wrap .total_reward .tit br:first-of-type {display:block;}


.total_reward .reward .name {font-size:2.5rem; padding-right:40px;}
.total_reward .btn_receive {font-size:3.7rem; padding-top:3%;}
.total_reward .reward .name .go_view {margin-top:-15px;}

.calendar_wrap .top .m_tit .txt img {max-height:6.4rem;}

.calendar_wrap .calendar .con .img {height: calc(100% - 60px);}
.calendar_wrap .calendar .con .day {height:30px; font-size:2.6rem;}
.calendar_wrap .calendar .con .btn {height:30px; font-size:2.3rem;}
.calendar_wrap .calendar .con .state {height:30px; font-size:2.3rem;}
.calendar_wrap .calendar .con .count {font-size:5.1rem;}
.calendar_wrap .calendar .bin .con .day {font-size:3.6rem;}
.calendar_wrap .calendar .today .label {font-size:2rem;}

.calendar_wrap .calendar ul {margin-left:-3rem;}
.calendar_wrap .calendar ul > li {padding-left:3rem; margin-bottom:4rem;}

.calendar_wrap .reward_wrap .con {padding:4.8rem;}
.calendar_wrap .reward_wrap .con .tit {position:static; text-align:left; width:auto; font-size:3.9rem;}
.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; font-size:2.5rem; padding-right:40px;}
.calendar_wrap .reward_wrap .name .go_view {margin-top:-15px;}

.section01 .title_wrap {padding-top:12rem;}
.section01 .title_wrap .date {font-size:4.3rem; margin-bottom:4.8rem;}
.section01 .title_wrap .user_info {height:40px;}
.section01 .title_wrap .user_info .user {font-size:2.6rem;}
.section01 .title_wrap .user_info .cash {font-size:2.6rem;}

.pop_up .pop_layout {width:calc(100% - 6rem); left:3rem; right:3rem; transform:translate(0 , -50%);}
.pop_up .pop_con h2 {background-size:1.7rem auto; font-size:3.3rem; padding-top:1.8rem;}
.pop_up .pop_con .day {font-size:3.5rem;}
.pop_up .pop_con .txt {font-size:2.6rem; padding-top:1rem;}
.pop_up .pop_con .box > .cash {font-size:5.6rem;}
.pop_mission .pop_con .cash > span {padding-top:2px;}
.pop_up .pop_con .reward .name {font-size:2.5rem;}
.pop_up .btns button {font-size:2.3rem; padding-left: 1.2rem; padding-right: 1.2rem; height:9.2rem;}
.pop_up .btns button > font {font-size:2.7rem;}
.pop_up .btns .btn01 {width:30.4rem;}
.pop_up .btns .btn02 {width:31.9rem;}

.pop_clear .btns .cash span:after {width:15px; height:15px;}

.pop_mission .btns .btn01 {width:18rem; height:6rem;}
.pop_mission .btns .btn02 {width:18rem; height:6rem;}

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

.pop_detail .pop_con h2 {font-size:2.6rem; padding-top:3px;}

.pop_history .list li > div {font-size:2.2rem; height:7rem;}
.pop_history .list li > div.date span {font-size:2rem;}
.pop_history .list li.none {font-size:2.4rem;}
.pop_history .list li > div.date {width:26%;}
.pop_history .list li > div.mission {width:48%;}
.pop_history .list li.top div {font-size:2.4rem; height:30px;}



}

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

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

@media screen and (max-width: 370px) {
.calendar_wrap .calendar ul > li {width:50%;}
.mission_wrap .top .m_tit {padding-left:10.5%;}
.mission_wrap .top .m_tit .txt img {height:4rem;}

.pop_up .btns button {font-size:1.8rem; height:7.2rem;}
.pop_up .btns .btn01 {width:23.8rem;}
.pop_up .btns .btn02 {width:25rem;}
}




@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 spin {
  100% { transform:translate(0, -13%) rotate(360deg);}
}

@keyframes up01 {
    70% {
        transform: translate(0, -73%);
    }

    80% {
        transform: translate(0, -75%);
    }

    100% {
        transform: translate(0, -73%);
    }
}

@keyframes up02 {
    70% {
        transform: translate(0, -32%);
    }

    80% {
        transform: translate(0, -34%);
    }

    100% {
        transform: translate(0, -32%);
    }
}

@keyframes float {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1) translateY(-1rem); }
}

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

@keyframes splashPop {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes swim {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(1.5deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(-3px) rotate(-1.5deg); }
}

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

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

@keyframes emerge {
    0% {
      opacity: 0;
      transform: translateY(150px) scale(0);
    }
    45% {
      opacity: 1;
      transform: translateY(-20px) scale(1);
    }
    65% {
      transform: translateY(8px) scale(0.83);
    }
    80% {
      transform: translateY(-5px) scale(0.98);
    }
    90% {
      transform: translateY(2px) scale(0.88);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

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