@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Dosis:wght@200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,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*/
}

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: 'Dosis', sans-serif; background:#000;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wr ap; 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; }
a {color: #fff; font-weight: 400; text-decoration: none; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}
button { font-family: 'Dosis';}

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

.btn01 { transition:none; cursor:pointer; text-align:center; text-transform:uppercase;  border-radius:18px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-image:url('/images/common/event/2024/luckydraw/bg_btn01.jpg');}
.btn01:hover {background-position:0 -228px;}
.btn02 { transition:none; cursor:pointer; text-align:center; text-transform:uppercase;  border-radius:10px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-image:url('/images/common/event/2024/luckydraw/bg_btn02.jpg');}
.btn02:hover {background-position:0 -144px;}

.obj {position:absolute;  animation-fill-mode: forwards !important;}
.cloud01 {top:0; left:0; opacity:0; max-width:340px; width:14.16%;}
.obj01 {top:0; left:0; opacity:0; max-width:820px; width:34.1%;}
.cloud02 {bottom:6.8rem; left:0; opacity:0;  max-width:410px; width:17.08%;}
.cloud03 {top:0; right:0; opacity:0; max-width:480px; width:20%;}
.cloud04 {bottom:0; right:10.8%; opacity:0; max-width:1361px; width:56.7%;}
.bird {right:0; bottom:-28rem; opacity:0; max-width:800px; width:33.33%;}

.animated .cloud01 {animation:fil 1s;}
.animated .obj01 {animation:fil 0.5s; animation-delay:0.2s;}
.animated .cloud02 {animation:fil 1s;  animation-delay:0.3s}
.animated .cloud03 {animation:fir 1s;  animation-delay:0.2s}
.animated .cloud04 {animation:fir 1s;  animation-delay:0.3s}

.animated .bird {animation:fir 1s;}


.cha {position:absolute; opacity:0;  animation-fill-mode: forwards !important;}
.cha01 {right:0; top:16rem; z-index:1; max-width:694px; width:28.9%;}
.cha02 {left:0; top:0;  z-index: 3; top:12rem; max-width:480px; width:36.5%;}
.cha03 {right:0; bottom:0; max-width:878px; width:36.5%;}
.cha04 {left:0; bottom:0; max-width:692px; width:28.8%;}

.animated .cha01 {animation:fir 0.3s; animation-delay:0.4s;}
.animated .cha02 {animation:fil 0.5s; animation-delay:0.2s;}
.animated .cha03 {animation:fir 0.5s; animation-delay:0.2s;}
.animated .cha04 {animation:fil 0.5s; animation-delay:0.2s;}

#confetti {height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 2;}


header {width: 100%; position: absolute; top: 0; left: 0; z-index: 20; padding:2.4rem 2.4rem 0; text-align:left; }
header .bi {display:inline-block; z-index: 3; position:relative;}
header .btn_login {position: absolute; top: 2.4rem; right: 2.4rem; z-index: 3;}
header .btn_login > button { transition:none; cursor:pointer; width:120px; height:36px; line-height:36px; text-align:center; text-transform:uppercase; font-size:16px; coloR:#fff; font-weight:700; letter-spacing:0.04em; border-radius:18px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-image:url('/images/common/event/2024/luckydraw/bg_btn01.jpg');}
header .btn_login > button:hover {background-position:0 -228px;}

.fix {width:142px; position:fixed; top:50%; transform:translate(0 , -50%); z-index:999; left:0.2rem;}
.fix .total_point {background:#ffff00; padding:5px 0; text-align:center; position:relative;}
.fix .total_point:before, .fix .total_point:after {content:''; display:block; left:0; right:0; position:absolute; transform:scaleX(-1);}
.fix .total_point:before {height:55px; background:url('/images/common/event/2024/luckydraw/line_tp_t.png') 0 bottom no-repeat; top:-54px;}
.fix .total_point:after {height:55px; background:url('/images/common/event/2024/luckydraw/line_tp_b.png') 0 0 no-repeat; bottom:-54px;}
.fix .total_point .tit {font-family: 'Bangers'; text-transform:uppercase; color:#ffff00; font-size:19px; display:inline-block; height:24px; line-height:24px; border-radius:12px; padding:0 8px; background:#de0000;}
.fix .total_point .tit span {color:#fff;}
.fix .total_point .num {font-size:52px; font-weight:800;}
.fix .btn_shop {margin-right: 0; margin-left: auto; padding-top:1.4rem; margin-top:3.8rem; font-family: 'Bangers'; font-size:20px; color:#ffffff; text-transform:uppercase; transition:none; display:block; width:134px; height:132px; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2024/luckydraw/btn_redeem.png');}
.fix .btn_shop span {color:#ffff00; font-size:25px; display:block; margin-top:-4px;}
.fix .btn_shop:hover {background-position:0 -132px;}
.fix .btn_lucky {margin-right: 0; margin-left: auto; text-shadow:0 0 0.05rem rgba(221, 0, 0, 0.3); padding-top:1.4rem; margin-top:3.8rem; font-family: 'Bangers'; font-size:20px; color:#ffffff; text-transform:uppercase; transition:none; display:block; width:134px; height:132px; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2024/luckydraw/btn_luckydraw.png');}
.fix .btn_lucky span {color:#ffff00; font-size:25px; display:block; margin-top:-4px;}
.fix .btn_lucky:hover {background-position:0 -132px;}

.container {position: relative; overflow: hidden; background:#cc0000; border-left:0.2rem solid #ffff00;}
section .title {color:#fff; font-size:38px; letter-spacing:0.02em; font-family: 'Bangers'; margin-bottom:3px; margin-bottom:1.5rem; text-shadow:0 0 1rem rgba(255, 0, 0, 0.4);}
section .title span {color:#ffff00; }

.section01 {position:relative; padding:21rem 0 28.8rem; background:linear-gradient(to bottom, #ffe2c1, #ffe2e1); background:url('/images/common/event/2024/luckydraw/bg_sec01.jpg') center 0 no-repeat; background-size:cover;}
.section01 .inner {position:relative; z-index:3;}
.section01:before {content:''; display:block; position:absolute; left:-1px; bottom:-5.8rem; right:-1px; height:35.6rem; background:url('/images/common/event/2024/luckydraw/sec01_obj.png') center 0 repeat-x; z-index:1;}
.section01 .title_wrap {text-shadow:0 0 1rem rgba(255, 0, 0, 0.4); font-family: 'Bangers'; color:#dd0000; font-size:192px; line-height:1;  position:relative;}
.section01 .title_wrap span {display:block;}
.section01 .title_wrap:before, .section01 .title_wrap:after {content:''; display:block; position:absolute;  }
.section01 .title_wrap:before {left:-13%; top:109%; animation:rotate01 linear 5s infinite;} 
.section01 .title_wrap:after {left:-23%; top:172%; animation:rotate02 linear 7s infinite;}
.section01 .title_wrap:before {background:url('/images/common/event/2024/luckydraw/obj_flower01.png') 0 0 no-repeat; width:18rem; height:18rem;}
.section01 .title_wrap:after {background:url('/images/common/event/2024/luckydraw/obj_flower02.png') 0 0 no-repeat; width:24rem; height:24rem;}
.section01 .title_wrap font {display:block; color:#333333; font-size:135px; margin-top:-2.5rem; text-shadow:none;}
.section01 .period {font-size:0; display:inline-block;}
.section01 .period span {font-size:19px; font-weight:700; text-transform:uppercase; display:inline-block; vertical-align:top; height:36px; line-height:34px; padding:0 2.4rem; border-radius:18px;}
.section01 .period .tit {color:#dd0000; font-weight:700; background:#fff; border:1px solid #ff0000;}
.section01 .period .tit font {color:#333333;}
.section01 .period .date {background:#dd0000; color:#fff;}
.section01 .period .date font {color:#ffff00;}
.section01 .period .date font:last-child {color:#ffddcc;}
.animated .title_wrap span {animation:td 1s; animation-delay:0.2s;}

.section02 {margin-bottom:4rem; padding-top:9rem; position:relative;}
.section02 .inner {z-index: 3; position:relative;}
.section02 .mission_wrap {font-size:0; display:flex;  align-items: stretch; }
.section02 .mission_wrap .mission {display:inline-block; vertical-align:top; border-radius:4rem; background:#990000; border:0.4rem solid #fff; position:relative; padding:2rem; padding-left:7.2rem; font-size:0; position:relative;}
.section02 .mission_wrap .mission .tit {padding: 0 1.4rem; background:#ffcccc; border-radius:0 2.8rem 2.8rem 0; font-family: 'Bangers'; text-transform:uppercase; font-size:22px; color:#000000; letter-spacing:0.03em; position:absolute; transform: scale(-1, -1); left: 0.6rem; bottom: 0.6rem; top:0.6rem; writing-mode: vertical-lr;}
.section02 .mission_wrap .mission .tit span {color:#990000}
.section02 .mission_wrap .mission:before, .section02 .mission_wrap .mission:after {content:''; display:block; position:absolute; border-radius:3.4rem;}
.section02 .mission_wrap .mission:before {top:0; bottom:0; left:0; right:0; border:0.2rem solid #ee0000; box-shadow:inset 0 0 0 0.2rem #ffaaaa;}
.section02 .mission_wrap ul { display:flex;  align-items: stretch; height: 100%;}
.section02 .mission_wrap li .con {padding:2rem 1.2rem; position:relative; border-radius:2rem; background:#cc2222; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position:relative;}
.section02 .mission_wrap .con .no {z-index:1; text-transform:uppercase; color:#aa0000; font-size:11px; font-weight:800; flex-direction: column; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#ffff00; position:absolute; top:-6px; right:-6px;}
.section02 .mission_wrap .con .no span {font-size:17px; font-weight:800; color:#000000; margin-bottom:-4px;}
.section02 .mission_wrap .con .txt {padding:0 2rem; font-size:18px; color:#fff; font-weight:600; line-height:1.1;}
.section02 .mission_wrap .con .txt span {display:block; color:#ffff00; margin-top:3px;}
.section02 .mission_wrap .con .num {color:#ff6666; font-size:25px; letter-spacing:0.04em; font-weight:800; margin:2px auto 0;}
.section02 .mission_wrap .con .num span {color:#ffff00;}
.section02 .mission_wrap .con .btns {font-size:0; width:100%; margin-top:1rem;}
.section02 .mission_wrap .con .btns a {position:relative; display:inline-flex; justify-content:center; height:32px; padding-right:2rem; align-items:center; vertical-align:top; width:calc((100% - 1rem) / 2); font-size:14px; flex-direction: column; font-size:14px; color:#aa0000; font-weight:700;}
.section02 .mission_wrap .con .btns a:before {content:''; display:block; position:absolute; top:50%; right:1rem; transform:translate(0 , -50%); background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/luckydraw/img_arr.png'); width:14px; height:14px;}
.section02 .mission_wrap .con .btns a font {color:#000000;}
.section02 .mission_wrap .con .btns .btn_clear {margin-left:1rem;}
.section02 .mission_wrap .con .btns .btn_clear span {margin-top:-2px;}
.section02 .mission_wrap .con .btns a:hover {color:#fff;}
.section02 .mission_wrap .con .btns a:hover font {color:#ffff00;}
.section02 .mission_wrap .ques .txt {font-weight:800; color:#ff8888; font-size:80px;}
.section02 .mission_wrap .complete .num , .section02 .mission_wrap .complete .btns {display:none;}
.section02 .mission_wrap .complete .con:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2024/luckydraw/img_complete.png') center center no-repeat;}
.section02 .mission_wrap .daily {width:calc(100% - 282px - 3.6rem);}
.section02 .mission_wrap .all {width:282px; margin-left:3.6rem;}
.section02 .mission_wrap .all ul {width:100%;}
.section02 .mission_wrap .all ul li {width:100%;}
.section02 .mission_wrap .daily ul {font-size:0; margin-left:-1.2rem;}
.section02 .mission_wrap .daily li {width:calc(100% / 3); padding-left:1.2rem; display:inline-block;  min-height: 14rem;}
.section02 .btn_start {font-family: 'Bangers';  flex-direction: column; font-size:24px; color:#990000; letter-spacing:0.04em; border-radius:20px; position:relative; width:168px; height:96px; display:flex; align-items:center; justify-content:center;}
.section02 .btn_start span {display:block; color:#000; margin-top:-4px; font-size:32px;}
.section02 .btn_start:before {right:0; bottom:0; content:''; display:block; position:absolute; width:50px; height:50px; background:url('/images/common/event/2024/luckydraw/btn_reward_arr.png') 0 0 no-repeat;}
.section02 .btn_start:hover {color:#fff;}
.section02 .btn_start:hover span {color:#ffff00;}

.event_marble {padding-bottom:9.6rem; position:relative; z-index:3;}
.event_marble .marble {width:100%;  border:0.4rem solid #ff6666; box-shadow:inset 0 0 0 0.4rem #cc0000; border-radius:2.4rem; background:rgba(0, 0, 0, 0.5); position: relative; z-index: 13; padding:1rem;}
.event_marble .marble:before {content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; border:0.2rem solid #ff6666; border-radius:1.6rem;}
.event_marble .marble .board {width: 100%; position: relative; z-index: 9;}
.event_marble .marble .board tr {height:100%;}
.event_marble .marble .board td {position:relative;  height:0; width:20%;  padding:0.2rem; vertical-align:top;  padding-top: 11.968%;}
.event_marble .marble .board .con {border-radius:1.2rem; background-position:center 0; background-repeat:no-repeat; font-size:0; color:transparent; position:absolute; top:0.2rem; bottom:0.2rem; left:0.2rem; right:0.2rem; background-size:100% auto;}
.event_marble .marble .board .cell0 .con {background-image:url('/images/common/event/2024/luckydraw/cell_start.png'); }
.event_marble .marble .board .cell0 .con:before {content:''; display:block; position:absolute; left:-15.6%; bottom:0;     width: 66.66%; height: 115.2%; background:url('/images/common/event/2024/luckydraw/cell_cha.png') 0 0 no-repeat; background-size:100% auto;}
.event_marble .marble .board .cell0.stop .con:before {display:none;}
.event_marble .marble .board .cell1 .con {background-image:url('/images/common/event/2024/luckydraw/cell01.png');}
.event_marble .marble .board .cell2 .con {background-image:url('/images/common/event/2024/luckydraw/cell02.png');}
.event_marble .marble .board .cell3 .con {background-image:url('/images/common/event/2024/luckydraw/cell03.png');}
.event_marble .marble .board .cell4 .con {background-image:url('/images/common/event/2024/luckydraw/cell04.png');}
.event_marble .marble .board .cell5 .con {background-image:url('/images/common/event/2024/luckydraw/cell05.png');}
.event_marble .marble .board .cell6 .con {background-image:url('/images/common/event/2024/luckydraw/cell06.png');}
.event_marble .marble .board .cell7 .con {background-image:url('/images/common/event/2024/luckydraw/cell07.png');}
.event_marble .marble .board .cell8 .con {background-image:url('/images/common/event/2024/luckydraw/cell08.png');}
.event_marble .marble .board .cell9 .con {background-image:url('/images/common/event/2024/luckydraw/cell09.png');}
.event_marble .marble .board .cell10 .con {background-image:url('/images/common/event/2024/luckydraw/cell10.png');}
.event_marble .marble .board .cell11 .con {background-image:url('/images/common/event/2024/luckydraw/cell11.png');}
.event_marble .marble .board .cell12 .con {background-image:url('/images/common/event/2024/luckydraw/cell12.png');}
.event_marble .marble .board .cell13 .con {background-image:url('/images/common/event/2024/luckydraw/cell13.png');}
.event_marble .marble .board .cell14 .con {background-image:url('/images/common/event/2024/luckydraw/cell14.png');}
.event_marble .marble .board .cell15 .con {background-image:url('/images/common/event/2024/luckydraw/cell15.png');}
.event_marble .marble .board .pass .con {background-position:center 50%;}
.event_marble .marble .board .stop .con {background-position:center 100%;}
.event_marble .marble .stage {padding:0.4rem; position:relative;}
.event_marble .marble .area { border-radius:2rem;  background:#aa0000; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem;}
.event_marble .marble .area .desc {position:relative; height: 100%;}
.event_marble .marble .btn_start {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); font-size:0; color:transparent; cursor:pointer; background-color:rgba(255, 255, 255, 0); width:32.8rem; height:32.8rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/luckydraw/btn_start.png');}
.event_marble .marble .btn_start:hover {background-position:0 -32.8rem;}
.event_marble .marble .in_area {padding:1.6rem; padding-left:2.3rem;  flex-direction: column; background:#660000; position:absolute; left:20.81%; top:50%; transform:translate(0 , -50%); display:flex; align-items:center; justify-content:center; z-index:9;}
.event_marble .marble .in_area:before , .event_marble .marble .in_area:after {z-index:-1; content:''; display:block; position:absolute; left:0; right:0;}
.event_marble .marble .in_area:before {height:52px; top:-28px; background:url('/images/common/event/2024/luckydraw/line_td01.jpg') right 0 no-repeat;}
.event_marble .marble .in_area:after {height:50px; bottom:-26px; background:url('/images/common/event/2024/luckydraw/line_td02.jpg') right 0 no-repeat;}

.event_marble .marble .total_dice .wrap {padding:3rem 0; min-width:15.7rem; background:#cc2222; border-radius:1.8rem; border:0.4rem solid #ffaaaa; box-shadow:inset 0 0 0 0.8rem #990000;}
.event_marble .marble .total_dice .wrap:before {content:''; display:block; position:absolute; top:1.2rem; left:1.9rem; bottom:1.2rem; right:1.2rem; border:0.4rem solid #fff; box-shadow:inset 0 0 0 0.2rem #ee0000; border-radius:2rem; }
.event_marble .marble .total_dice .tit {    font-family: 'Bangers'; font-size:19px; color:#fff; letter-spacing:0.02em; text-transform:uppercase;}
.event_marble .marble .total_dice .tit span {color:#ffaaaa;}
.event_marble .marble .total_dice .num {font-size:55px; color:#ffff00; font-weight:700;}
.event_marble .marble .btn_history {left:auto; right:20.8%; width:196px;}
.event_marble .marble .btn_history:before , .event_marble .marble .btn_history:after {transform:scaleX(-1);}
.event_marble .marble .btn_history .btn02 {padding-left:2.6rem; font-family: 'Bangers';     flex-direction: column; font-size:33px; color:#990000; letter-spacing:0.05em; border-radius:20px; position:relative; width:168px; height:144px; display:flex; align-items:start; justify-content:center;}
.event_marble .marble .btn_history .btn02 span {display:block; color:#aa0000; margin-top:-6px;}
.event_marble .marble .btn_history .btn02:before {right:0; bottom:0; content:''; display:block; position:absolute; width:50px; height:50px; background:url('/images/common/event/2024/luckydraw/btn_reward_arr.png') 0 0 no-repeat;}
.event_marble .marble .btn_history .btn02:hover {color:#ffff00;}
.event_marble .marble .btn_history .btn02:hover span {color:#fff;}

#result {color:#ffff00; font-size:49px; font-weight:700; width:12rem; height:6rem; line-height:6rem; text-align:center; position:absolute;  display:none; background:#ee1111; border-radius:30px; margin-left: -1rem;     margin-top: 5px;}
#ui_dado {position:absolute; top:44%; left:44%; transform:translate(-50% , -50%); transition: opacity 0.4s; text-align: center; display:none;}
#ui_dado #platform.playing > #dice {animation-duration: 1s;}
#ui_dado #platform.playing {transform-style: preserve-3d; animation: roll 1s linear;}
#ui_dado #platform.stop > #dice, #ui_dado #platform.stop {animation-play-state: paused;}
#ui_dado #platform {margin:0 auto; height: 12rem;}
#ui_dado #dice {position: absolute; width: 10rem; height: 10rem; transform-style: preserve-3d; transform: rotateX(15deg) rotateY(10deg) rotateZ(-15deg);}
#ui_dado #platform.playing > #dice {animation: spin 1.4s infinite linear;}
#ui_dado .side {position: absolute; width: 10rem; height: 10rem; background: #ffdcd9; box-shadow: inset 0 0 40px rgba(255, 0, 0, 0.1); border-radius: 2rem;}
#ui_dado #dice .cover, #ui_dado #dice .inner {background:#ffdecc; box-shadow: none;}
#ui_dado #dice .cover {border-radius: 0;}
#ui_dado #dice .cover.x {transform: rotateY(90deg);}
#ui_dado #dice .cover.z {transform: rotateX(90deg);}
#ui_dado #dice .front {transform: translateZ(5rem);}
#ui_dado #dice .front.inner {transform: translateZ(4.9rem);}
#ui_dado #dice .back {transform: rotateX(-180deg) translateZ(5rem);}
#ui_dado #dice .back.inner {transform: rotateX(-180deg) translateZ(4.9rem);}
#ui_dado #dice .right {transform: rotateY(90deg) translateZ(5rem);}
#ui_dado #dice .right.inner {transform: rotateY(90deg) translateZ(4.9rem);}
#ui_dado #dice .left {transform: rotateY(-90deg) translateZ(5rem);}
#ui_dado #dice .left.inner {transform: rotateY(-90deg) translateZ(4.9rem);}
#ui_dado #dice .top {transform: rotateX(90deg) translateZ(5rem);}
#ui_dado #dice .top.inner {transform: rotateX(90deg) translateZ(4.9rem);}
#ui_dado #dice .bottom {transform: rotateX(-90deg) translateZ(5rem);}
#ui_dado #dice .bottom.inner {transform: rotateX(-90deg) translateZ(4.9rem);}
#ui_dado .dot {position: absolute; width: 2.3rem; height: 2.3rem; border-radius: 2.3rem; background: #d90017;}
#ui_dado .dot.center { margin: 3.8rem 0 0 3.8rem;}
#ui_dado .dot.center.dleft {margin: 3.8rem 0 0 1rem;}
#ui_dado .dot.center.dright {margin: 3.8rem 0 0 6.7rem;}
#ui_dado .dot.dtop {margin-top: 1rem;}
#ui_dado .dot.dleft { margin-left: 6.7rem;}
#ui_dado .dot.dright {margin-left: 1rem;}
#ui_dado .dot.dbottom {margin-top: 6.7rem;}
#ui_dado #dice .one {background:url('/images/common/event/2024/luckydraw/dice_flower.png') center center no-repeat; background-size:71.4% auto;}
#ui_dado #dice .one .dot {opacity:0;}

.section03 {padding:25rem 0 14.4rem; background:#e9e9e9; position:relative;}
.section03 .inner {position:relative; z-index:3;}
.section03:before {content:''; display:block; position:absolute; left:-1px; top:0; right:-1px; height:35.6rem; background:url('/images/common/event/2024/luckydraw/sec01_obj.png') center 0 repeat-x; transform:scaleY(-1);}
.section03 .progress_wrap {margin:6.6rem auto 6rem;}
.section03 .progress_wrap ul {margin-left:-3.2rem; font-size:0;}
.section03 .progress_wrap ul li {padding-left:3.2rem; display:inline-block; width:calc(100% / 6);}
.section03 .progress_wrap ul li .con {border-radius:2.4rem; background:#ffffff; position:relative;}
.section03 .progress_wrap ul li.received .con:before {z-index:1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2024/luckydraw/img_received.png') center center no-repeat;}
.section03 .progress_wrap .item {position:relative;}
.section03 .progress_wrap .name {height:72px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#999999; font-size:16px; text-transform:uppercase; line-height:1;     flex-direction: column;}
.section03 .progress_wrap .name span {color:#ff6633; margin-top:2px; display:block;}
.section03 .progress_wrap .img {margin:0 2.4rem 2.4rem;}
.section03 .progress_wrap .day {font-size:15px; color:#ffffff; font-weight:700; letter-spacing:0.02em; text-shadow:0 0 0.1rem rgba(204, 0, 0, 0.1); position:absolute; top:-1.2rem; right:-1.2rem; width:36px; height:36px; line-height:36px; text-align:center; text-transform:uppercase; background:url('/images/common/event/2024/luckydraw/bg_day.png') 0 0 no-repeat;}
.section03 .progress_wrap .day span {color:#ffeeaa;}
.section03 .progress_wrap .draw {background:#aaaaaa; font-size:22px; border-radius:0 0 2.4rem 2.4rem;  height:48px; line-height:48px; text-align:center;  color:#eeeeee; text-transform:uppercase; font-family: 'Bangers'; letter-spacing:0.04em;}
.section03 .progress_wrap .ok .draw {background: linear-gradient(to right, #ff0000, #ff6600); color:#ffff00;}
.section03 .progress_wrap .draw span {color:#fff;}
.section03 .progress_wrap .bar {border-radius: 6px; width:calc(100% + 3.2rem); margin-left:calc(-50% - 3.2rem); height:1.2rem; background:#fff; margin-top:3rem; position:relative;}
.section03 .progress_wrap .bar:before, .section03 .progress_wrap .bar:after {content:''; display:block; position:absolute; }
.section03 .progress_wrap .bar:before {width:0.4rem; height:3rem; background:#ff0000; right:-0.2rem; top:-3rem;}
.section03 .progress_wrap .bar:after {z-index:1; width:24px; height:24px; right:-12px; top:50%; margin-top:-12px; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2024/luckydraw/check_draw.png');}
.section03 .progress_wrap .bar span {position:absolute; top:0; bottom:0; left:0; background:#dd0000;     border-radius: 6px;}
.section03 .progress_wrap .bar.ok:after {background-position:0 -24px;}
.section03 .progress_wrap ul li:first-child .bar {width:50%; margin-left:0;}
.section03 .total_draw {display:inline-block; font-size:0;}
.section03 .total_draw span {display:inline-flex; align-items:center; justify-content:center; vertical-align:top; height:72px;}
.section03 .total_draw .tit {padding:0 3.6rem; font-size:22px; color:#ffcccc; font-weight:800; text-transform:uppercase; border-radius:2rem 0 0 2rem; background:#dd1122;}
.section03 .total_draw .tit font {color:#fff; margin-right:5px;}
.section03 .total_draw .num {padding:0 3rem; font-size:38px; color:#ffff00; font-weight:800; border-radius:0 2rem 2rem 0; background:#be0012;}
.section03 .btn_claim {box-shadow:0 0.6rem 3rem rgba(255, 85, 0, 0.3); margin:0 auto; display:flex; align-items:center; justify-content:start; width:32rem; height:72px; padding-left:4.8rem; font-size:30px; color:#fff; letter-spacing:0.06em;  font-family: 'Bangers'; position:relative; border-radius:3.6rem;}
.section03 .btn_claim:before {content:''; display:block; position:absolute; top:50%; right:3.6rem; width:3.6rem; height:3.6rem; transform:translate(0 , -50%); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2024/luckydraw/btn_claim.png');}
.section03 .btn_claim:hover {color:#ffff00;}
.section03 .btn_claim:hover:before {background-position:0 -3.6rem;}
.section03 .btn_claim.received {background: linear-gradient(to right, #ff3901, #ff7501); color:#ffff00; box-shadow:none;}
.section03 .btn_claim.received:before {background-position:0 -72px;}

.section04 {padding:13rem 0 12rem; background:#cc0000; border-top:1.2rem solid #ee2222; box-shadow:inset 0 1.2rem 0 #fff; position:relative;}
.section04 .inner {position:relative; z-index:3;}
.section04 .title {font-size:27px; margin-bottom:4rem;}
.section04 li {text-align:left; font-size:16px; color:#ffffff; line-height:1.8; letter-spacing:0.01em; font-weight:600; padding-left:2.4rem; position:relative; margin-bottom:1px;}
.section04 li:last-child {margin-bottom:0;}
.section04 li:before {content:''; display:block; position:absolute; top:9px; left:0; width:12px; height:12px; background:url('/images/common/event/2024/luckydraw/li_dot.png') 0 0 no-repeat;}
.section04 li.in_txt {padding-left:3.6rem;}
.section04 li.in_txt:before {width:6px; height:2px; background:#fff; left:2.4rem; top:13px;}

.section01.deal {background:linear-gradient(to bottom, #ffe2c1, #ffe2e1); padding:12.5rem 0 16.5rem;}
.section01.deal:after {content:''; display:block; position:absolute; top:30%; left:13%; width:12rem; height:12rem; background:url('/images/common/event/2024/luckydraw/obj_flower03.png') 0 0 no-repeat; animation: rotate01 linear 5s infinite;}
.section01.deal .title_wrap:before {left:auto; right:-10%; top:-15%;} 
.section01.deal .title_wrap:after {right:auto; left:-20%; top:95%;}
.section01.deal .title_wrap h3 {font-size:72px; color:#dd0000; letter-spacing:0.02em; text-shadow:none; position: relative;}
.section01.deal .title_wrap h3 font {display:inline; margin:0; font-size:inherit; position: relative;}
.section01.deal .title_wrap h4 {font-size:193px; color:#dd0000; letter-spacing:0.02em;  margin-top:-4px;   text-shadow: 0 0 1rem rgba(255, 0, 0, 0.4);}
.section01.deal .info {margin:3.6rem auto 0; text-align:center; position: relative;}
.section01.deal .info ul {display:inline-block; text-align:left;}
.section01.deal .info li {margin-bottom:1px; color:#666666; font-size:19px; font-weight:700; line-height:1.3; position:relative; padding-left:30px;}
.section01.deal .info li:last-child {margin-bottom:0;}
.section01.deal .info li:before {content:''; display:block; position:absolute; width:20px; height:20px; background:url('/images/common/event/2024/luckydraw/icon_exc.png') 0 0 no-repeat; top:2px; left:0; border-radius:50%; box-shadow:0 0 1rem rgba(255, 0, 0, 0.1);}

.section.shop {padding:9rem 0 7.2rem;}
.section.shop .title {font-size:43px;}
.section.shop .inner {position:relative; z-index:3;}
.section.shop .goods {margin-top:5rem;}
.section.shop .goods ul {font-size:0; margin-left:-4.8rem;}
.section.shop .goods ul li {display:inline-block; vertical-align:top; width:calc(100% / 3); padding-left:4.8rem; margin-bottom:4.8rem;}
.section.shop .goods .con {border:0.4rem solid #ffffff; border-radius:4rem; box-shadow:0 0.6rem 0 #ffaaaa , inset 0 0 0 0.2rem #ee0000;}
.section.shop .goods .con .item {padding: 0.2rem; border:0.4rem solid #ffa9a9; box-shadow:inset 0 0 0 0.2rem #990000; border-radius:3.5rem; background:#fff; position:relative;}
.section.shop .goods .item .img {padding-top:2.8rem; box-shadow: 0rem -0.2rem 0 #ffddd4; margin-top: 0.2rem; border-radius: 3rem;}
.section.shop .goods .con .item .qty {flex-direction: column; text-transform:uppercase; font-size:16px; color:#ffffff; font-weight:700; position:absolute; top:1rem; left:1rem; width:60px; height:60px; display:flex; justify-content:center; align-items:center; border-radius:1.6rem; background: linear-gradient(to bottom, #ff0000, #ff6600);}
.section.shop .goods .con .item .qty span {color:#ffff00;}
.section.shop .goods .con .item .name {padding:0 2.4rem; text-transform:uppercase; font-size:16px; color:#888888; font-weight:700; line-height:1.2; height:8rem; display:flex; justify-content:center; align-items:center;}
.section.shop .goods .con .item .name span {color:#ff6633; margin-left:3px;}
.section.shop .goods .btn_point {position:relative; font-family: 'Bangers'; font-size:27px; color:#ffffff; letter-spacing:0.06em; text-transform:uppercase; border-radius:0 0 3rem 3rem; height:6rem; line-height:6rem; display:block;}
.section.shop .goods .btn_point span {color:#ffff00;}
.section.shop .goods .btn_point:before {content:''; display:block; position:absolute; top:50%; right:3.6rem; width:3.6rem; height:3.6rem; transform:translate(0 , -50%); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2024/luckydraw/btn_claim.png');}
.section.shop .goods .btn_point:hover:before {background-position:0 -3.6rem;}
.section.shop .goods .part {word-break: break-all; justify-content: space-between; display:flex; font-size:16px; color:#ffffff; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:#fff; background: linear-gradient(to right, #ff0000, #ff6600); margin-top:2.4rem; border-radius:1.8rem; padding:1rem 3.6rem;}
.section.shop .goods .part span {color:#ffff00;}

.section04.shop {background:#e9e9e9;}
.section04.shop li:before {background:url('/images/common/event/2024/luckydraw/li_dot02.png') 0 0 no-repeat;}
.section04.shop .title {color:#000000; text-shadow:none;}
.section04.shop .title span {color:#ee0000;}
.section04.shop li {color:#666666;}

.add_item {position:relative; z-index:3; max-width:1080px; margin: -9% auto 0; left: 0; right: 0;}
.add_item ul {font-size:0; margin-left:-2.4rem;}
.add_item ul li {display:inline-block; vertical-align:top; width:25%; padding-left:2.4rem;     animation: up 1.5s infinite;}
.add_item ul li:nth-child(2) {animation-delay:0.1s;}
.add_item ul li:nth-child(3) {animation-delay:0.2s;}
.add_item ul li:nth-child(4) {animation-delay:0.3s;}
.add_item li .con {background:url('/images/common/event/2024/luckydraw/bg_item.png') center center no-repeat; position:relative;} 
.add_item li .con:before {z-index: -1; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:123.81%; height:131.75%; background:url('/images/common/event/2024/luckydraw/bg_item_shd.png') center center no-repeat; }
.add_item li .con .name {font-size:22px; color:#000; font-family: 'Bangers'; line-height:1; position:absolute; top:17.8%; left:0; right:0; }
.add_item .txt {font-size:16px; font-weight:600; color:#fff; width:108px; height:24px; line-height:24px; border-radius:12px; background:#dd0000; bottom:17.8%; left:50%; transform:translate(-50% , 0); position:absolute; text-transform:uppercase;}




footer {width: 100%;  text-transform:uppercase; padding:9.6rem 2.4rem; font-family:'Roboto'; background:#222222;}
footer > img {margin-bottom: 2rem; position:relative; z-index: 3;}
footer .footer {font-size: 12px; color: #999999; position: relative; z-index: 3;}
footer .footer .cs > a {color:#cccccc; font-family: 'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 0.8rem; color:#999999;}

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

.popup {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: none;}
.popup .pop_layout {padding:0 4.4rem 4.4rem; background:#500202; border:0.4rem solid #ff0000; border-radius:5rem; position: absolute; top: 50%; left: 50%; z-index: 1000; transform:translate(-50% , -50%); height:auto; background:rgba(0, 0, 0, 0.2);}
.popup .pop_layout:before {background: linear-gradient(to right, #ee7700, #dd0000); content:''; display:block; position:absolute; top:0.8rem; left:0.8rem; right:0.8rem; bottom:0.8rem;     border-radius: 4rem; z-index: -1;}
.popup .btn_close {position:absolute; top:4.4rem; right:4.4rem; font-size:0; color:transparent; cursor:pointer; width:24px; height:24px; background-position:0 0; background-repeat:no-repeat; transition:none; background-image:url('/images/common/event/2024/luckydraw/pop_close.png');background-color:rgba(255, 255, 255, 0);}
.popup .btn_close:hover {background-position:0 -24px;}
.popup .pop_title {padding:4rem 3.6rem 2rem 0;}
.popup .pop_title h2 {font-family: 'Bangers'; font-size:27px; color:#fff; letter-spacing:0.04em;}
.popup .pop_title h2 span {color:#ffff00}
.popup .pop_title h3 {font-size:16px; color:#ffccaa; font-weight:700; letter-spacing:0.01em; text-transform:uppercase; text-shadow:0 0 1rem rgba(255, 0, 0, 0.4); margin-top:2px;}
.popup .pop_cont {background:#fff; border-radius:3rem; border:0.2rem solid #ffff00; overflow: hidden; border-left:0; border-right:0;}

.pop_layout .btns { position:relative; text-align:center; margin:3.2rem auto 0; font-size:0; }
.pop_layout .btns button {font-family: 'Bangers'; width:144px; height:48px; border-radius:24px; margin:0 0.6rem; font-size:21px; color:#cc0000; letter-spacing:0.04em; text-transform:uppercase;}
.pop_layout .btns .btn_ok {color:#000000;}


.pop_history .pop_layout {width:75.6rem;}
.pop_history .pop_layout .ovys {overflow-y:auto;  height:48rem;     margin-right: 2.4rem;}
.pop_history .pop_layout .ovys::-webkit-scrollbar {width: 1.2rem; }
.pop_history .pop_layout .ovys::-webkit-scrollbar-track {margin-block: 2.4rem;}
.pop_history .pop_layout .ovys::-webkit-scrollbar-thumb { border-radius:0.6rem; background: linear-gradient(to bottom, #ee7700, #dd0000); }
.pop_history .list li {text-align:left; font-size:0; position:relative;}
.pop_history .list li:before {content:''; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; background: linear-gradient(to right, #ee7700, #dd0000); }
.pop_history .list li:last-child:before {display:none;}
.pop_history .list li p {display:inline-flex; vertical-align:top; height:48px; justify-content:center; align-items:center; font-size:16px; font-weight:600;}
.pop_history .list li .date {width:198px; color:#ee6600; background:#ffeeee; padding:0 1rem;}
.pop_history .list li .date .time {color:#888888;  margin-left:0.8rem;}
.pop_history .list li .item {width:calc(100% - 198px); color:#000000; justify-content:start; padding:0 2.4rem; background:#fff;}
.pop_history .list li .item .day {color:#ee6600;  margin-left:0.8rem;} 
.pop_history .list li.none {height:48rem; color:#999999; font-size:16px; font-weight:700; text-align:center; line-height:48rem; text-transform:uppercase; padding-left:2.4rem;}

.pop_payment .pop_layout, .pop_pay_result .pop_layout  { width:54rem;}
.pop_payment .pop_layout ul.pop_cont {font-size:0; background:none; border-radius:0; border:none;}
.pop_payment .pop_layout ul.pop_cont li {padding:0 2.4rem; color:#555555;border-radius:1.2rem; height:48px; border-top:0.2rem solid #ffff00; position:relative; background:#fff; font-size:20px; font-weight:700; margin-bottom:2px; display:flex; justify-content: space-between;  align-items:center;}
.pop_payment .pop_layout ul.pop_cont li:last-child {margin-bottom:0;}
.pop_payment .pop_layout ul.pop_cont li.minus { color:#cc0000;  }
.pop_payment .pop_layout ul.pop_cont li.total { color:#000000; background: linear-gradient(to right, #ffff55, #ffaaaa); border-top:0;}
.pop_payment .pop_layout ul.pop_cont li .pay {font-size:22px;}
.pop_payment .pop_layout ul.pop_cont li .pay img, .pop_pay_result .pop_cont img {margin-right:0.6rem; vertical-align:middle; position:relative; top:-3px;}

.pop_pay_result .pop_cont {overflow:visible;}
.pop_pay_result .pop_cont .desc {padding:5.6rem 0;}
.pop_pay_result .result {margin:0 0 -0.2rem; border-radius:0 0 3rem 3rem; padding:1.8rem 0; background: linear-gradient(to right, #ffff55, #ffaaaa); font-family: 'Bangers'; font-size:22px; color:#222222; letter-spacing:0.04em; text-transform:uppercase;}
.pop_pay_result .result span {color:#cc0000;}
.pop_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {font-size:14px; font-weight:700; color:#cc0000;  text-transform:uppercase; }
.pop_pay_result .pay {font-size:22px; color:#000000; font-weight:700; margin-top:1.5rem;}

.pop_result .pop_layout {width:516px;}
.pop_result .pop_cont {border:none; overflow:visible; background: linear-gradient(to right, #cc0000, #ff0000); padding-top:3.6rem;}
.pop_result .name {margin-top:3.6rem; border-radius:0 0 3rem 3rem; padding:1.8rem 0; background: linear-gradient(to right, #ffff55, #ffaaaa); font-size:16px; color:#222222; font-weight:700; text-transform:uppercase;}
.pop_result .name span {color:#cc0000;}
.pop_result .item .img {position:relative; width:240px; height:144px; background:url('/images/common/event/2024/luckydraw/bg_box.png') center center no-repeat; margin:0 auto; display:flex; justify-content:center; align-items:center; animation: initialShake 0.2s linear 5;}
.pop_result .item .cover {position:absolute; top:0; bottom:0; left:0; right:0; background-repeat:no-repeat; background-position:0 100%;  animation: slide-out-tr 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation-delay:1s;}
.pop_result .item .cell1 {background-image:url('/images/common/event/2024/luckydraw/cell01.png');}
.pop_result .item .cell2 {background-image:url('/images/common/event/2024/luckydraw/cell02.png');}
.pop_result .item .cell3 {background-image:url('/images/common/event/2024/luckydraw/cell03.png');}
.pop_result .item .cell4 {background-image:url('/images/common/event/2024/luckydraw/cell04.png');}
.pop_result .item .cell5 {background-image:url('/images/common/event/2024/luckydraw/cell05.png');}
.pop_result .item .cell6 {background-image:url('/images/common/event/2024/luckydraw/cell06.png');}
.pop_result .item .cell7 {background-image:url('/images/common/event/2024/luckydraw/cell07.png');}
.pop_result .item .cell8 {background-image:url('/images/common/event/2024/luckydraw/cell08.png');}
.pop_result .item .cell9 {background-image:url('/images/common/event/2024/luckydraw/cell09.png');}
.pop_result .item .cell10 {background-image:url('/images/common/event/2024/luckydraw/cell10.png');}
.pop_result .item .cell11 {background-image:url('/images/common/event/2024/luckydraw/cell11.png');}
.pop_result .item .cell12 {background-image:url('/images/common/event/2024/luckydraw/cell12.png');}
.pop_result .item .cell13 {background-image:url('/images/common/event/2024/luckydraw/cell13.png');}
.pop_result .item .cell14 {background-image:url('/images/common/event/2024/luckydraw/cell14.png');}
.pop_result .item .cell15 {background-image:url('/images/common/event/2024/luckydraw/cell15.png');}

.pop_deal .pop_cont {overflow:visible;}
.pop_deal .pop_layout {width:516px;     background: #500202;}
.pop_deal .btn_close {background-image:url('/images/common/event/2024/luckydraw/pop_close02.png');}
.pop_deal .pop_layout:before {background: linear-gradient(to bottom, #ffe2c1, #ffdfdd); }
.pop_deal .pop_title h2 {color:#dd0000;}
.pop_deal .pop_title h2 span {color:#aa0000;}
.pop_deal .pop_cont {border:none; box-shadow:0 1rem 4rem rgba(255, 0, 0, 0.1); padding:0;}
.pop_deal .item .img {padding:3.6rem 0;}
.pop_deal .name {line-height:1.2; margin:0 0 -0.2rem; border-radius:0 0 3rem 3rem; padding:1.8rem 0; background: linear-gradient(to right, #ff2222, #ff6600);  font-size:16px; font-weight:700; color:#ffffff; text-transform:uppercase;}
.pop_deal .name span {color:#ffff00;}

.pop_deal .item .img img {display:none;}
.pop_deal .name {display:none;}



/* popup (login) */
#layer_basic_popup {width: 600px; margin: -210px 0 0 -300px; position: fixed; top: 50%; left: 50%; z-index: 98;}
#layer_basic_popup > iframe {width: 100%; border: none; display: block; position: relative; z-index: 99;}

@media screen and (max-width: 1921px) {
.obj01 {left:-7%;}
.cha01 {right:-3%; top:20rem;}	
.cha02 {left:-8%;}
.cha03 {right:-5%;}
.cha04 {left:-5%;}
}

@media screen and (max-width: 1500px) {
.cha02 , .cha03 ,.cha04 {display:none;}
.cha01 {right:0; top:34rem;}
}	

@media screen and (max-width: 1296px) {
.inner {padding-left:2.4rem; padding-right:2.4rem;}
.event_marble .marble {font-size:0;}
.event_marble .marble .in_area {position:relative; transform:none; left:auto; top:auto; right:auto;  display:inline-flex;  vertical-align: top;}
.event_marble .marble .in_area:before, .event_marble .marble .in_area:after {display:none;}
.event_marble .marble .total_dice {width:calc(100% - 196px);}
.event_marble .marble .total_dice .wrap {min-width:0; width:100%;}
.event_marble .marble .btn_start {width:24.8rem; height:24.8rem; background-size:100% auto;}
.event_marble .marble .btn_start:hover {  background-position: 0 -24.8rem;}
.event_marble .marble .btn_history .btn02 {width:100%;}
.section02 .mission_wrap {display:block;}
.section02 .mission_wrap .daily {width:100%;}
.section02 .mission_wrap .all {margin:3.2rem auto 0; width:100%;}
.cha01 {right:0; top:auto; bottom:-14%;}
.obj01 {left:-10%;}
.section01 .title_wrap {font-size:132px;}
.section01 .title_wrap font {font-size:105px;}

.section.shop .goods .btn_point {padding-right:3.6rem;}
.section.shop .goods ul {margin-left:-2.4rem;}
.section.shop .goods ul li {padding-left:2.4rem;}
.section01.deal .title_wrap:before {right:0;}
.section01.deal .title_wrap:after {left:0;}
.section01.deal:after {left:1%;}

.section03 .progress_wrap ul li.received .con:before {background-size:60% auto;}

.add_item ul li {width:50%; margin:1.2rem 0;}
.add_item li .con {background-size:cover;}
.add_item li .con:before {background-size:cover;}
.add_item {max-width:52.8rem; margin-top:-20%;}
}
	
@media screen and (max-width: 1023px) {
.section.shop .goods ul li {width:50%;}	
}
	
@media screen and (max-width: 768px) {
html {font-size:32%;}


.popup .pop_layout {width:auto; left:2.5rem; right:2.5rem; transform:translate(0 , -50%);}
.popup .btn_close {top:3.4rem;}
.popup .pop_title h2 {font-size:3.9rem;}
.pop_layout .btns button {font-size:3rem; height:40px;}
.pop_layout .btns button {max-width:calc((100% - 2.4rem) / 2)}

.pop_history .list li p {font-size:2.5rem; height:40px;}
.pop_history .list li .date { width: 96px; flex-direction: column;}
.pop_history .list li .date .time {margin-left:0;}
.pop_history .list li .item {    width: calc(100% - 96px);}
.pop_history .list li.none {font-size:2.5rem;}

.pop_payment .pop_layout ul.pop_cont li {height:40px;}
.pop_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {font-size:2.3rem;}
.pop_payment .pop_layout ul.pop_cont li .pay {font-size:3.1rem;}
.pop_payment .pop_layout ul.pop_cont li .pay img, .pop_pay_result .pop_cont img {top:-2px;}
.pop_pay_result .pay {font-size:3.1rem;}
.pop_pay_result .result {font-size:3.1rem;}
.pop_deal .name {font-size:2.5rem;}
.pop_result .name {font-size:2.5rem;}

.section04 .title {font-size:3.6rem;}
.section04 li {font-size:2.5rem; padding-left:3.4rem;}
.section04 li:before {top:6px;}
.section04 li.in_txt {padding-left:4.6rem;}
.section04 li.in_txt:before {top:10px;}

.section03:before {background-size:cover;}
.section03 .total_draw span {height:48px;}
.section03 .total_draw .tit {font-size:3.1rem;}
.section03 .total_draw .num {font-size:4.7rem;}
.section03 .btn_claim {height:48px; font-size:3.9rem;}
.section03 .btn_claim:before {background-size:100% auto;}
.section03 .progress_wrap .name {height:60px; font-size:2.5rem;}
.section03 .progress_wrap .draw {height:30px; line-height:30px; font-size:3.1rem;}
.section03 .progress_wrap .day {font-size:2.4rem; width:30px; height:30px; background-size:100% auto; line-height:30px;}
.section03 .progress_wrap {overflow-x:scroll; padding:2rem 0;}
.section03 .progress_wrap ul {min-width:130rem;}

section .title {font-size:4.7rem;}
.event_marble .marble .total_dice .tit {font-size:2.8rem; margin-right:1rem;}
.event_marble .marble .total_dice .num {font-size:4.8rem;}
.event_marble .marble .total_dice {width:calc(100% - 150px);}
.event_marble .marble .btn_history {width:150px;}
.event_marble .marble .btn_history .btn02 {font-size:4rem;}
.event_marble .marble .btn_history .btn02:before {width:5rem; height:5rem; background-size:100% auto;}
.event_marble .marble .in_area {height:60px;}
.event_marble .marble .total_dice .wrap {padding:0; height:100%; display: flex; justify-content: center; align-items: center;}

.section02 .mission_wrap .all {font-size:3.1rem;}
.section02 .mission_wrap .con .txt {font-size:2.7rem;}
.section02 .mission_wrap .ques .txt {font-size:8.9rem;}
.section02 .mission_wrap .daily ul {margin-left:0; display:block;}
.section02 .mission_wrap .daily li {display:block; width:100%; padding-left:0; margin-bottom:1.2rem;}
.section02 .mission_wrap .daily li:last-child {margin-bottom:0;}
.section02 .mission_wrap .mission .tit {font-size:3.1rem; padding:0 1rem;}
.section02 .mission_wrap .complete .con:before {background-size:12rem auto;}
.section02 .mission_wrap li .con {min-height:15rem;}
.section02 .mission_wrap .con .num {font-size:3.4rem;}
.section02 .mission_wrap .con .btns a {font-size:2.3rem;}
.section02 .mission_wrap .con .no {font-size:2rem;}

.section01:before {background-size:cover;}
.section01 .title_wrap:before, .section01 .title_wrap:after {background-size:100% auto;}
.section01 .title_wrap {font-size:12rem;}
.section01 .title_wrap font {font-size:10rem; margin-top:0;}

header .btn_login > button {font-size:2.5rem; height:30px; line-height:30px; width:80px;}
.section01 .period span {height:30px; line-height:29px; font-size:2.8rem;}
header .bi img {width:24rem;}
.section01 .title_wrap:after {top:188%; width:18rem; height:18rem; right:28%;}
.section01 .title_wrap:before {top:165%; width:15rem; height:15rem;}

.fix {width:14.2rem;}
.fix .btn_shop {width:13.4rem; height:13.2rem; background-size:100% auto; font-size:2.3rem;}
.fix .btn_shop span {font-size:2.8rem; margin-top:0;}
.fix .btn_shop:hover {background-position:0 -13.2rem;}
.fix .total_point .tit {font-size:2.3rem;}
.fix .total_point .num {font-size:6rem;}
.fix .total_point:before, .fix .total_point:after {background-size:100% auto;}
.fix .total_point {padding:0;}
.fix .btn_lucky {width:13.4rem; height:13.2rem; background-size:100% auto; font-size:2.3rem;}
.fix .btn_lucky span {font-size:2.8rem; margin-top:0;}
.fix .btn_lucky:hover {background-size:0 -13.2rem;}

.section.shop .title {font-size:5.2rem;}
.section.shop .goods ul {margin-left:0;}
.section.shop .goods ul li {padding-left:0; display:block; width:100%;}
.section.shop .goods .con .item .qty {font-size:2.5rem; width:40px; height:40px;}
.section.shop .goods .con .item .name {font-size:2.5rem;}
.section.shop .goods .btn_point {padding:0; font-size:3.6rem;}
.section.shop .goods .btn_point:before {background-size:100% auto;}
.section.shop .goods .part {font-size:2.5rem;}

.section01.deal .info li {font-size:2.8rem;}
.section01.deal .title_wrap h4 {font-size:12rem;}
.section01.deal .title_wrap h3 {font-size:9rem;}
.section01.deal .title_wrap h3 font {display:block;}
.section01.deal:after {background-size:100% auto;}
.section01.deal .title_wrap:after {top:132%;}
.section01.deal .title_wrap:before {right:-5%;}
.section02 .btn_start {font-size:3.3rem; height:65px;}
.section02 .btn_start span {font-size:4.1rem;}

#result {font-size:5.9rem;}
#ui_dado {top:40%; left:40%;}

footer .footer {font-size:2.1rem;}
footer > img {width:16.7rem;}

.add_item {margin-top:-16%;}
.add_item li .con .name {font-size:2.7rem; top:12.8%;}
.add_item .txt {font-size:2.1rem; width:68px; height:18px; line-height:18px; bottom:12.8%;}

}

@media screen and (max-width: 500px) {
.section01.deal .title_wrap:after {top:189%;}	
.add_item {margin-top:-26%;}
}	

@keyframes spin {
  0% {
    transform: translateZ(-10rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  16% {
    transform: translateZ(-10rem) rotateX(180deg) rotateY(180deg) rotateZ(0deg);
  }
  33% {
    transform: translateZ(-10rem) rotateX(360deg) rotateY(90deg) rotateZ(180deg);
  }
  50% {
    transform: translateZ(-10rem) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
  66% {
    transform: translateZ(-10rem) rotateX(180deg) rotateY(360deg) rotateZ(270deg);
  }
  83% {
    transform: translateZ(-10rem) rotateX(270deg) rotateY(180deg) rotateZ(180deg);
  }
  100% {
    transform: translateZ(-10rem) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes roll {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  30% {
    transform: translate3d(15rem, -2rem, 0px);
  }
  50% {
    transform: translate3d(0px, -5rem, 0px);
  }
  80% {
    transform: translate3d(-15rem, -2rem, 0px);
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}	

@keyframes initialShake {
    25% {
        transform: rotate(4deg);
    }

    75% {
        transform: rotate(-2deg);
    }
}

@keyframes slide-out-tr {
  0% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
            transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
}

@keyframes rotate01 {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes rotate02 {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}



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

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

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

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

@keyframes td {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes up {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(2%);
    }

    100% {
        transform: translateY(0);
    }
}