@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&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: 'Rajdhani', 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-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;} 
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 700;  font-family: 'Rajdhani';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'Rajdhani'; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}

.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:1464px; margin-left:auto; margin-right:auto;}

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

.obj {position:absolute; max-width:none;}
.light {top:-52.8%; left:50%; transform:translate(-50% , 0); mix-blend-mode: screen; z-index:1; animation: sway 7s infinite linear; opacity:1;}
.cha_wrap {position:absolute; z-index:1;}
.cha_wrap:before {content:''; display:block; position:absolute; background-position:0 0; background-repeat:no-repeat; background-size:100% auto;  opacity:0;  animation: smoke 5s linear infinite}
.cha_wrap .obj {top:0; left:0; max-width:100%; opacity:0;}
.cha_l {top:0; left:0;}
.cha_l:before {background-image:url('/images/common/event/2024/vote/fog01.png'); width:115.424%; height:83.618%;}
.cha_r {top:0; right:0;}
.cha_r:before {background-image:url('/images/common/event/2024/vote/fog02.png'); width:95.538%; height:70.201%;}

.cha_l .obj {animation: diaUp 0.2s forwards;}
.cha_r .obj {animation: diaDown 0.2s forwards;}
.cha_wrap .obj02 {animation-delay:0.2s;}
.cha_wrap .obj03 {animation-delay:0.4s;}

.btn_top {cursor:pointer; font-family: 'Rajdhani', sans-serif; background-color:rgba(255, 255, 255, 0); position:fixed; z-index:11; right:3rem; bottom:2.4rem; padding-top:2rem;  transition:none; width:6.8rem; height:7.6rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/btn_top.png'); text-align:center;}
.btn_top:before {transform:translate(-50% , 0); content:''; display:block; position:absolute; left:50%; top:0.5rem; width:5rem; height:4rem; background-repeat:no-repeat; background-image:url('/images/common/event/2024/vote/arr_top.png'); background-position:0 0;}
.btn_top span {font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.5));  display: inline-block; background: linear-gradient(to bottom, #fbf6d3, #ffc475); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_top:hover span {background: linear-gradient(to bottom, #fff, #fff);  filter: drop-shadow(0 0 0.6rem #ffda6b); }
.btn_top:hover:before { background-position:0 -4rem;}


/* pop-up */
.dimmed {display:none; width: 100%; height: 100%;  background: #000; opacity: 0.75; filter: alpha(opacity=75); position: fixed; left: 0;  top: 0;     z-index: 99;}
.pop-up {padding:1px; display:none; left:50%; top:50%; width:100%; max-width:622px; transform:translate(-50%, -50%); position: fixed;  z-index:100;}
.pop-up:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background: linear-gradient(to bottom, #988263, #fbf6d3, #c7a87e);} 
.pop-up .pop-layout {padding:11px; position:relative; height:100%; background:url('/images/common/event/2024/vote/pop_ptn.jpg') 0 0 repeat;}
.pop-up .pop-layout > h2 {letter-spacing:0.01rem; position:relative; color:#fff; font-size:20px; font-weight:700; padding:1.7rem; background:#689aff; top: -1px;}
.pop-up .pop-close {cursor:pointer; transition:none; z-index:10; position:absolute; top:-1.2rem; right:-1.2rem; transition:none; width:6.8rem; height:7.6rem; font-size:0; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/pop_close.png'); background-size:100% auto; background-color:rgba(255, 255, 255, 0);}
.pop-up .pop-close:hover {background-position:0 -7.6rem;}
.pop-up .pop-layout .pop_cont {position:relative; z-index:1;}
.pop-up .pop-layout .pop_cont:before {z-index:-1; content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background: linear-gradient(to bottom, #988263, #fbf6d3, #c7a87e);} 
.pop-up .pop_title {position:relative; height:5.4rem; display:flex; align-items:center; justify-content:flex-start; padding:0 3rem; background:#000 url('/images/common/event/2024/vote/pop_tit.jpg') 0 center no-repeat; text-transform:uppercase; }
.pop-up .pop_title h2 {font-size:24px; color:#ffffff; font-weight:700; text-shadow:0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.5);}
.pop-up .pop_title:before {content:''; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; background: linear-gradient(to right, #988263, #fbf6d3, #c7a87e);}
.pop-up .paging_wrap {background:#000; padding:2rem 0 3rem; margin-top:-1px;}
.pop-up .btns {font-size:0;}
.pop-up .btns button {position:relative; cursor:pointer; background-color:rgba(255, 255, 255, 0); font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; transition:none; display:inline-flex; align-items:center; width:16rem; height:6rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; padding:0 3rem;}
.pop-up .btns button:before {content:''; display:block; position:absolute; top:50%; right:1.4rem; transform:translate(0, -50%); background-repeat:no-repeat; background-position:0 0; width:5px; height:9px;} 
.pop-up .btns .btn_yes {background-image:url('/images/common/event/2024/vote/btn_yes.png');  justify-content:space-between; color:#eac491;}
.pop-up .btns .btn_yes:before {background-image:url('/images/common/event/2024/vote/arr_vote01.png');}
.pop-up .btns .btn_no {margin-right:2rem; background-image:url('/images/common/event/2024/vote/btn_no.png');  justify-content:center; color:#adadad;} 
.pop-up .btns .btn_no:before {background-image:url('/images/common/event/2024/vote/arr_vote02.png');}
.pop-up .btns button span {position:relative; font-size:14px; color:#f0ff00; font-weight:700;}
.pop-up .btns button span:before {margin-right:1.2rem; content:''; display:inline-block; vertical-align:middle; position:relative; top:-1px; width:23px; height:15px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/img_ticket.png');}
.pop-up .btns button:hover {background-position:0 -6rem; color:#fff; text-shadow:0 0 1rem #fff;}
.pop-up .btns button:hover span {color:#fff;  text-shadow:0 0 1rem #fff;}
.pop-up .btns button:hover span:before {box-shadow:0 0 1rem #fff; background-position:0 -15px;}

.pop-up .reward_wrap {font-size:0; padding:0 1.5rem;}
.pop-up .reward_wrap > div {border-radius:1rem; overflow:hidden;}
.pop-up .reward_wrap ul {font-size:0; padding-bottom:17px;}
.pop-up .reward_wrap ul li {display:inline-block; text-align:center; vertical-align:middle; margin:0 5px;}
.pop-up .reward_wrap .name {font-family:'Roboto'; font-size:12px; color:#ffedd3; text-transform:uppercase; height:34px; display:flex; align-items:center; justify-content:center;}
.pop-up .reward_wrap .tit {display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:16px; color:#ffe1a2; font-weight:700; height:40px; margin-bottom:1.5rem; letter-spacing: 0.05rem; line-height: 1.4;}
.pop-up .reward_wrap .item {position:relative; margin:0 auto; background:url('/images/common/event/2024/vote/bg_reward.png') 0 0 no-repeat; background-size:100% auto; width:16.4rem; height:12.1rem;}
.pop-up .reward_wrap .day {position:absolute; border-radius:50%; width:30px; height:30px; text-transform:uppercase; font-size:12px; font-weight:700;  display:flex; align-items:center; justify-content:center; background:#f0ff00; font-weight:700; top:-1px; right:-5px;}
.pop-up .reward_wrap .reward01 { display:inline-block; background:rgba(133, 50, 0, 0.7);}
.pop-up .reward_wrap .reward01 .tit {background:rgba(133, 50, 0, 0.7);}
.pop-up .reward_wrap .reward02 { display:inline-block;  background:rgba(37, 19, 80, 0.7);}
.pop-up .reward_wrap .reward02 .tit {background:rgba(37, 19, 80, 0.7); color:#ccb2f6;}

.pop_reward .tabbox02 .day {top:25%; width:40px; border-radius:10px; height:20px; top:22%;}


.pop_history .list {padding:1rem 1rem 1rem 3rem; background:#000; box-shadow:0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.5); font-family:'Roboto';}
.pop_history .list li {text-align:left; font-size:0; position:relative;}
.pop_history .list li p {display:inline-flex; vertical-align:top; height:48px; justify-content:center; align-items:center; border-bottom:1px solid #524637; font-size:14px;}
.pop_history .list li .date {width:17rem; color:#c9aa81; padding:0 1rem; text-align:center;}
.pop_history .list li .detail {width:calc(100% - 19rem);  margin-left:2rem; color:#cbcbcb; justify-content:start; padding:0 2rem;}
.pop_history .list li.none {height:60rem; color:#cbcbcb; font-size:14px; font-weight:700; text-align:center; line-height:60rem; text-transform:uppercase;}
.pop_history .list li.top {position:relative; }
.pop_history .list li.top:before {height:1px; content:''; display:block; position:absolute; left:0; right:0; bottom:0; background:#9d8768;}
.pop_history .list li.top p {text-transform:uppercase; justify-content:center; color:#e1d8b6; font-size:18px; font-weight:700; font-family: 'Rajdhani', sans-serif; border-bottom:none; height:5.3rem;}
.pop_history .ovys {overflow-y:auto;  height:48rem;  background:#000; margin-right:1.2rem;}
.pop_history .ovys::-webkit-scrollbar {width: 0.9rem; }
.pop_history .ovys::-webkit-scrollbar-track {margin-block-start: 2.4rem;}
.pop_history .ovys::-webkit-scrollbar-thumb { border-radius:0.6rem; background: linear-gradient(to bottom,  #988263, #fbf6d3, #c7a87e); }
.pop_history .pop_cont:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:#000; z-index:-1;}



.pop_vote .desc {background:url('/images/common/event/2024/vote/pop_bg.jpg') center bottom no-repeat; background-size:cover; padding-bottom:6rem;}

.pop_fav .desc { padding:8rem 0; }


.pop_vote .desc .txt {padding:0 2.4rem; font-size:30px; color:#fff; font-weight:700; line-height:1.4; word-break:break-word; height:16.6rem; display:flex; align-items:center; justify-content:center;}
.pop_champ .desc {padding-bottom:2rem;}
.pop_champ .reward_wrap {margin-top:6rem;}
.pop_champ .reward_wrap .reward01 {width:calc(100% - 210px);}
.pop_champ .reward_wrap .reward02 {width:200px; margin-left:10px;}
.pop_champ .reward_wrap .tit {font-size:14px; line-height:1.2;}

.pop_reward {max-width:924px; top:2.4rem; bottom:2.4rem; transform:translate(-50% , 0);}
.pop_reward .pop-layout .pop_cont {height:100%;}
.pop_reward .desc {height:calc(100% - 54px); background:url('/images/common/event/2024/vote/pop_bg.jpg') center bottom no-repeat; background-size:cover; padding-bottom:6rem; padding-top:1rem;}
.pop_reward .fix_menu {position:relative !important; margin:0 1rem 1rem;}
.pop_reward .fix_menu ul {padding:1rem 0;}
.pop_reward .fix_menu li a {font-size:18px;}
.pop_reward .tabbox {display:none; position: absolute; left: 0;  bottom: 0; right: 0; top: 135px; overflow-y:scroll; margin:0 1rem;     padding: 0 1rem 0 1.5rem;}
.pop_reward .tabbox::-webkit-scrollbar {width: 0.9rem; }
.pop_reward .tabbox::-webkit-scrollbar-track {margin-block-start: 2.4rem;}
.pop_reward .tabbox::-webkit-scrollbar-thumb { border-radius:0.6rem; background: linear-gradient(to bottom,  #988263, #fbf6d3, #c7a87e); }
.pop_reward .tabbox01 {display:block;}
.pop_reward .reward_wrap .reward01 {display:block; }
.pop_reward .reward_wrap .reward02 {display:block; margin-top:2rem; }
.pop_reward .tit {height:40px; font-size:16px;}
.pop_reward .tit br {display:none;}
.pop_reward .tabbox02 .reward01 {background:rgba(81, 91, 50, 0.7);}
.pop_reward .tabbox02 .reward01 .tit {background:rgba(81, 91, 50, 0.7); color:#ffe1a2;}
.pop_reward .tabbox02 .reward02 {background:rgba(81, 91, 50, 0.7);}
.pop_reward .tabbox02 .reward02 .tit {background:rgba(81, 91, 50, 0.7); color:#ffe1a2;}
.pop_reward .tabbox02 .item {width:100%; height:auto; padding-bottom: 3%;   background: url(/images/common/event/2024/vote/bg_reward02.png) 0 0 no-repeat; background-size:100% auto;     padding-top: 14.81%;}
.pop_reward .tabbox02 .user {padding-top: 2%; position:absolute; left:0; right:0; top:0; height:17.31%; display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:16px; font-weight:700; color:#000000;}
.pop_reward .tabbox02 ul li {width:calc(20% - 10px); margin:0 5px 14px;}
.pop_reward .tabbox02 ul {padding:0 5px 3px;}
.pop_reward .fix_menu li:last-child a {border-right:0;}
.pop_reward .fix_menu li:first-child a {border-left:0;}

.pop_payment .pop-layout ul {font-size:0; background:none; border-radius:0; border:none;}
.pop_payment .pop-layout ul li {padding:0 2rem;  border-radius:1rem; height:50px; border:1px solid #7e7e7e; position:relative; background: linear-gradient(to right, rgba(110, 110, 110, 0.5), rgba(0, 0, 0, 0.8)); font-size:20px; font-weight:500; color:#fff; font-family:'Roboto'; margin-bottom:7px; display:flex; justify-content: space-between;  align-items:center;}
.pop_payment .pop-layout ul li:last-child {margin-bottom:0;}
.pop_payment .pop-layout ul li.total { background: linear-gradient(to right, rgba(0, 0, 0, 0.7), #ff4949); border-color:#80504c;}
.pop_payment .pop-layout ul li .pay img, .pop_pay_result .pop_cont img {margin-right:0.9rem; vertical-align:middle;}
.pop_payment .pop-layout .desc {background:url('/images/common/event/2024/vote/pop_bg.jpg') center bottom no-repeat; background-size:cover; padding:5rem 5rem 4rem;}
.pop_payment .btns {margin-top:3rem;}
.pop_payment .btns button {width:12rem; height:5rem; }
.pop_payment .btns button:before {display:none;}
.pop_payment .btns .btn_yes {background-image:url('/images/common/event/2024/vote/btn_ok.png'); justify-content:center;}
.pop_payment .btns .btn_no {background-image:url('/images/common/event/2024/vote/btn_cancel.png');}
.pop_payment .btns button:hover {background-position:0 -5rem;}

.pop_pay_result .pop_cont {overflow:visible;}
.pop_pay_result .pop_cont .desc {padding:5.6rem 0;}
.pop_pay_result .result {font-size:24px; color:#fff; font-weight:700; text-transform:uppercase; text-shadow:0 0 0.5rem rgba(255, 255, 255, 0.5); margin-top:4rem;}
.pop_payment .pop-layout .subject, .pop_pay_result .pop_cont .subject {font-size:16px; font-weight:600; color:#fff; font-family: 'Rajdhani', sans-serif; text-transform:uppercase; }
.pop_payment .pop-layout .total .subject {color:#ff6055;}
.pop_pay_result .pay {font-size:20px; color:#fff; font-weight:500; margin-top:2.5rem; font-family: 'Roboto';}
.pop_pay_result .pop-layout .desc {background:url('/images/common/event/2024/vote/pop_bg.jpg') center bottom no-repeat; background-size:cover; padding:5rem 5rem 5rem;}
.pop_pay_result .pop-layout .desc > .box {display:flex; align-items:center; justify-content:center; height:164px; border-radius:10px; background:rgba(0, 0, 0, 0.4); border:1px solid #604c1e;     flex-direction: column;}
.pop_pay_result .pop_cont .subject {color:#ff6055;}


/* paging */
.paging_wrap {text-align:center;}
.paging_wrap ul {font-size:0;}
.paging_wrap li {display:inline-block; vertical-align:top; margin:0 0.1rem;}
.paging_wrap li a {position:relative; background:rgba(255, 255, 255, 0); display:block; border:1px solid rgba(255, 255, 255, 0); border-radius:2px; padding:0 2px; min-width:24px; height:24px; line-height:24px; text-align:center; font-size:14px; color:#c9aa81; font-family:'Roboto'; font-weight:700;}
.paging_wrap li a:hover { color:#fff;}
.paging_wrap li.on a, .paging_wrap li.on a:hover {color:#fff; background:rgba(201, 170, 129, 0); border-color:#c9aa81; }
.paging_wrap li.prev a, .paging_wrap li.next a {min-width:0; width:15px; background-image:url('/images/common/event/2024/vote/arr_paging.png'); background-color: rgba(0, 0, 0, 0); background-repeat:no-repeat; background-position:0 0; transition:none; border-color:rgba(255, 255, 255, 0);}
.paging_wrap li.next a, .paging_wrap li.last a {transform:scaleX(-1);}
.paging_wrap li.prev a:hover, .paging_wrap li.next a:hover {background-position:0 -23px;} 
.paging_wrap li.prev {margin-right:0.9rem;}
.paging_wrap li.next {margin-left:0.9rem;}


header {padding:4rem 4rem 0; text-align:left; position:absolute; top:0; left:0; right:0;  z-index: 10;  align-items:center; justify-content:center;}
.user_area {position:fixed; top:5rem; right:4rem; z-index:11;}
.user_area .btn_login {transition:none; display:flex; align-items:center; justify-content:center ; margin-top:-0.5rem; width:16.8rem; height:7.6rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/btn_login.png'); text-align:center;}
.user_area .btn_login span {font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.5));  display: inline-block; background: linear-gradient(to bottom, #fbf6d3, #ffc475); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.user_area .btn_login:hover {background-position:0 -7.6rem;}
.user_area .btn_login:hover span {background: linear-gradient(to bottom, #fff, #fff);  filter: drop-shadow(0 0 0.6rem #ffda6b); }
.user_area .user {margin-right:5px; vertical-align: bottom; font-size:14px; letter-spacing:0.02em; color:#fff; font-family:'Roboto'; display:inline-flex; align-items:center; justify-content:flex-start; width:27.4rem; height:5.1rem; background:url('/images/common/event/2024/vote/bg_user.png') 0 0 no-repeat; text-align:left; padding:0 9rem 0 2.4rem; position:relative;}
.user_area .user:before {position: relative; top: -1px; content:''; margin-right:0.8rem; display:inline-block; vertical-align:middle; width:11px; height:11px; background:url('/images/common/event/2024/vote/icon_user.png') 0 0 no-repeat;}
.user_area .user .ticket {font-size:16px; font-weight:700; color:#f0ff00; letter-spacing:0.02em; padding-left:30px; top:50%; right:0.6rem; transform:translate(0 , -50%); position:absolute; width:76px; height:30px; text-align:center; background:#000000; border:1px solid #6d6655; display:flex; align-items:center; justify-content:center ;}
.user_area .user .ticket:before {position:absolute; top:50%; left:0.8rem; transform:translate(0 , -50%); content:''; display:block; width:23px; height:17px; background:url('/images/common/event/2024/vote/icon_ticket.png') 0 0 no-repeat;}
.user_area .btn_logout {padding-bottom:0.5rem; vertical-align: bottom; transition:none; display:inline-flex; align-items:center; justify-content:center ;  width:10.4rem; height:4.7rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/btn_logout.png'); text-align:center;}
.user_area .btn_logout span {font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.5));  display: inline-block; background: linear-gradient(to bottom, #fbf6d3, #ffc475); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.user_area .btn_logout:hover span {background: linear-gradient(to bottom, #fff, #fff);  filter: drop-shadow(0 0 0.6rem #ffda6b); }
.user_area.fixed {top:10rem;}
.user_area .fix_btns {display:none;}

.fix_btns {position:absolute; top:2rem; left:3rem; font-size:0;  z-index:11; }
.btn_fix {font-family: 'Rajdhani', sans-serif; transition:none; cursor:pointer; display:inline-flex; vertical-align:top;  align-items:center; justify-content:center;  width:16.8rem; height:7.7rem; background-repeat:no-repeat; background-position:0 0; text-align:center; background-color: rgba(0, 0, 0, 0); flex-direction: column;}
.btn_fix span {line-height:1; font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.5));  display: inline-block; background: linear-gradient(to bottom, #fbf6d3, #acd5ff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_fix:hover {background-position:0 -7.7rem;}
.btn_fix:hover span {background: linear-gradient(to bottom, #fff, #fff);  filter: drop-shadow(0 0 0.6rem #b2e8ff); }

.btn_info {background-image:url('/images/common/event/2024/vote/btn_info.png'); position:relative;}
.btn_info:before { animation: blink-1 2s infinite both; content:''; display:block; position:absolute; top:5.4%; bottom:5.4%; left:0; right:0; background-size:100% auto; background:url('/images/common/event/2024/vote/btn_light.png') center 0 no-repeat;}
.btn_info span {animation: blink-1 2s infinite both;}
.btn_history {background-image:url('/images/common/event/2024/vote/btn_history.png'); margin-left:1.6rem;}
.btn_history span {background: linear-gradient(to bottom, #fbf6d3, #ce9eff);}
.btn_history:hover span {background: linear-gradient(to bottom, #fff, #fff); filter: drop-shadow(0 0 0.6rem #b2e8ff); }

.fix_btns.fixed {top:10rem; position:fixed;}


footer {width: 100%; padding:5rem 0; z-index: 3; background:#000000; position:relative; font-family:'Roboto Condensed'; letter-spacing:0.02em; text-transform: uppercase;}
footer > img {margin-bottom: 2rem;}
footer .footer {font-size: 14px; color:#888; position: relative; z-index: 2;}
footer .footer .cs > a {color:#e72427; font-weight:700;}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 0.4rem;}

.sec_tit {font-size:50px; font-weight:700; color:#fff; letter-spacing:0.04em; text-transform:uppercase; text-shadow:0 0 2rem rgba(255, 219, 122, 0.8); opacity:0;}
.sec_tit img {vertical-align:middle; position:relative; top:-2px; margin-right:2rem;}
.animated .sec_tit {animation: fade-in 0.7s ease forwards;}

.section01 {position:relative; overflow:hidden;}
.section01 .title_area {padding-top:10.5rem; padding-bottom:54rem;  background:url('/images/common/event/2024/vote/bg01.jpg') center 0 no-repeat; background-size:cover; position:relative;}
.section01 .title_wrap .title {  position:relative; z-index:2; opacity:0;}
.section01 .title_wrap .title .m {display:none;}
.section01 .title_wrap .date {text-transform:uppercase; z-index: 1; opacity:0; font-size:18px; color:#ffffff; font-size:18px; font-weight:600; letter-spacing:0.02em; background:rgba(0, 0, 0, 0.7) url('/images/common/event/2024/vote/ptn02.png') 0 0 repeat; position:relative; margin:4.8rem auto 0; max-width:51.4rem; height:4.6rem; display:flex; align-items:center; justify-content:center;}
.section01 .title_wrap .date:before {content:''; left:0; right:15px; height:3px; position:absolute; bottom:0; background:#ffd55a;}
.section01 .title_wrap .date:after {content:''; display:block; position:absolute; top:-4px; left:0; right:0; bottom:-4px; background:url('/images/common/event/2024/vote/obj_t02.png') 0 0 no-repeat, url('/images/common/event/2024/vote/obj_b02.png') right bottom no-repeat;}
.animated .title_wrap .title {animation: fade-in 0.7s ease forwards;}
.animated .title_wrap .date {animation: fade-in 0.7s 0.2s ease forwards;} 

.mission_area {position:absolute; z-index:7; bottom:0; left:0; right:0; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); padding:9rem 0 15rem;}
.animated .mission_area {animation: fade-in 0.7s ease forwards;}
.mission_area .inner {max-width:1200px;}
.mission_wrap {font-size:0; display:flex;  align-items: stretch; }
.mission_wrap .mission {display:inline-block; vertical-align:top; position:relative; font-size:0; position:relative;}
.mission_wrap .mission .tit {font-weight:700; text-transform:uppercase; font-size:22px; color:#fff; letter-spacing:0.02em; text-transform:uppercase; position:absolute; top:-5.2rem;}
.mission_wrap .mission .tit span {filter: drop-shadow(0 0 1rem #ffd55a);  background: linear-gradient(to bottom, #ffffff, #f9e7b2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap ul { display:flex;  align-items: stretch; height: 100%;}
.mission_wrap li .con {box-shadow:0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.5); position:relative; background:#000; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 1.4rem 2rem;}
.mission_wrap .con .btn {z-index:1; align-items:center; display:flex; justify-content:center; flex-direction: column; text-transform:uppercase; font-weight:700; line-height:0.9;}
.mission_wrap .con .no {font-weight: 700; font-size:13px; coloR:#373318; width:56px; height:35px; background:url('/images/common/event/2024/vote/img_vote.png') 0 0 no-repeat; z-index: 2; text-transform:uppercase; display:flex; align-items:center; justify-content:center;  position:absolute; top:-0.9rem; left:0.8rem;}
.mission_wrap .con .no span {font-size:18px; color:#740d0d; margin-right:0.5rem;}
.mission_wrap .con .txt {z-index: 1; padding:0 2rem; font-size:18px; color:#ffe7c5; letter-spacing:0.02em; font-weight:600; line-height:1.2;}
.mission_wrap .con .txt span {display:block; color:#ffff00; margin-top:3px;}
.mission_wrap .con .num {z-index: 1; color:#adadad; font-size:22px; font-family:'Roboto'; font-weight:700; letter-spacing:0; margin:1.6rem auto 0;}
.mission_wrap .con .num span {color:#ffff00;}
.mission_wrap .con .btns {font-size:0; width:100%; margin-top:1.4rem; color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;   line-height: 0.9;  flex-direction: column;}
.mission_wrap .con .btns a {transition:color ease-in-out 0.2s; transition:none; position:relative; letter-spacing:0.02em; display:inline-flex; font-size:14px; color:#eac491; font-weight:600; width:110px; padding-right:3px; height:40px; vertical-align:top; font-size:14px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/btns.png');}
.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/vote/img_arr02.png'); width:5px; height:9px;}
.mission_wrap .con .btns a span {color:#000000; font-weight:700; color:#ff0c00;}
.mission_wrap .con .btns .btn_clear {margin-right:10px;}
.mission_wrap .con .btns .btn_clear span {margin-top:2px;}
.mission_wrap .con .btns a:hover {color:#fff; background-position:0 -40px;}
.mission_wrap .con .btns a:hover span {color:#fff;}
.mission_wrap .con .btns a:hover:before {background-position:0 -9px;}
.mission_wrap .con .btn_start {padding-left:0.6rem; position:relative;  width:18rem; height:7rem; background:url('/images/common/event/2024/vote/btn_start.png') 0 0 no-repeat; font-size:20px; }
.mission_wrap .con .btn_start:before {top:50%; left:1.6rem; transform:translate(0, -50%); content:''; display:block; position:absolute; background-image:url('/images/common/event/2024/vote/img_arr01.png'); background-repeat:no-repeat; background-position:0 0; width:2.5rem; height:3.2rem;}
.mission_wrap .con .btn_start span {transition:all ease-in-out 0.2s; filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.5));  background: linear-gradient(to bottom, #fbf6d3, #ead7ff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.mission_wrap .con .btn_start:hover:before {background-position:0 -3.2rem;}
.mission_wrap .con .btn_start:hover span { background: linear-gradient(to bottom, #fff, #fff); filter: drop-shadow(0 0 0.9rem #fff);}
.mission_wrap .complete .num , .mission_wrap .complete .btns {display:none;}
.mission_wrap .complete .txt:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2024/vote/img_complete.png') center center no-repeat, url('/images/common/event/2024/vote/cover.png') center center repeat;}
.mission_wrap .ques .txt:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2024/vote/img_lock.png') center center no-repeat;}
.mission_wrap .daily {width:calc(100% - 280px - 8rem);}
.mission_wrap .all {width:280px; margin-left:8rem;}
.mission_wrap .all ul {width:100%;}
.mission_wrap .all ul li {width:100%;}
.mission_wrap .all li .con {background:url('/images/common/event/2024/vote/bg_all.jpg') center center no-repeat; background-size:cover;}
.mission_wrap .all .con .txt {width:100%; background:rgba(0, 0, 0, 0.5); box-shadow:inset 3px 3px 5px rgba(0, 0, 0, 0.5); padding: 1.7rem 1rem;}
.mission_wrap .all .con .info {color:#ffffff; font-size:16px; font-style:italic; margin-top:1.8rem;}
.mission_wrap .daily ul {font-size:0; margin-left:-3rem;}
.mission_wrap .daily li {width:calc(100% / 3); padding-left:3rem; display:inline-block; min-height: 18rem;}
.mission_wrap .daily li .con:before {position:absolute; display:block; content:''; top:0; left:0; right:0; bottom:0; background: linear-gradient(to bottom, rgba(131, 123, 90, 0.5), #000);}
.mission_wrap .daily li .con:after {z-index: -1; content:''; display:block; position:absolute; background: linear-gradient(to bottom, #988263, #fbf6d3, #c7a87e); top:-2px; bottom:-2px; left:-2px; right:-2px;  }
.fix_menu {position:absolute; left:0; bottom:0; right:0; z-index:10; border-top:1px solid #ffd870; background:#000000; border-bottom:1px solid #393420;}
.fix_menu ul {font-size:0; max-width:1040px; margin:0 auto; padding:2rem 0; overflow:hidden;}
.fix_menu li {display:inline-block; position:relative; vertical-align:top; width:50%;}
.fix_menu li a {display:block; width:100%; height:3rem; line-height:3rem; border-left:0.1rem solid rgba(154, 129, 64, 0.5); text-align:center; font-size:22px; color:#857d68; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;}
.fix_menu li:last-child a {border-right:0.1rem solid rgba(154, 129, 64, 0.5);} 
.fix_menu li a {display:block; width:100%; height:3rem; line-height:3rem; border-left:0.1rem solid rgba(154, 129, 64, 0.5); text-align:center; font-size:22px; color:#857d68; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;}
.fix_menu li a:hover {color:#ffffff; text-shadow:0 0 0.6rem #ffda6b, 0 0.5rem 0 rgba(0, 0, 0, 0.5);}
.fix_menu li.on:before {content:''; display:block; position:absolute; z-index:-1; left:0; right:0; top:-2.1rem; bottom:-2rem; left:50%; transform:translate(-50% , 0); background:url('/images/common/event/2024/vote/tab_on.png') center 0 no-repeat;}
.fix_menu li.on a {color:#ffffff; text-shadow:0 0 0.6rem #ffda6b, 0 0.5rem 0 rgba(0, 0, 0, 0.5);}
.section01 .fix_menu.fixed {position:fixed; bottom:auto; top:0;}

.vote_wrap {opacity:0;}
.animated .vote_wrap {animation: fade-in 0.7s 0.2s ease forwards;}
.vote_wrap ul {font-size:0; margin-left:-4rem;}
.vote_wrap ul li {display:inline-block; vertical-align:top; width:25%; padding-left:4rem; margin-bottom:9%; text-align:center;}
.vote_wrap .con {position:relative;}
.vote_wrap .logo {background-position:0 0; background-repeat:no-repeat; background-size:100% auto; background-image:url('/images/common/event/2024/vote/bg_vote.png');}
.vote_wrap li .con:before, .vote_wrap li .con:after {z-index:-1; left:50%; top:32.4%; transform:translate(-50% , 0); content:''; display:block; position:absolute; width:74.703%; height:94.754%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.vote_wrap li .con:before {background-image:url('/images/common/event/2024/vote/vote_base.png');}
.vote_wrap li .con:after {background-image:url('/images/common/event/2024/vote/vote_light.png'); transform-origin: bottom;}
.vote_wrap .btn_vote {transition:none; padding-left:3rem; position:absolute; left:50%; bottom:6.2%; transform:translate(-50% , 0); font-size:22px; color:#fff; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto; width:17rem; height:5.4rem; background-image:url('/images/common/event/2024/vote/btn_vote.png'); background-position:0 0; background-repeat:no-repeat; text-align:center; border-radius:27px; box-shadow:0.2rem 0.5rem 1rem rgba(0, 0, 0, 0.5);}
.vote_wrap .btn_vote span {filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.5)); background: linear-gradient(to bottom, #988263, #fbf6d3, #c7a87e); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.vote_wrap .btn_vote:before {content:''; display:block; position:absolute; width:4.1rem; height:3.9rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/icon_vote.png'); left:3.6rem; top:50%; margin-top:-2rem;}
.vote_wrap .btn_vote:hover {background-position:0 -5.4rem;}
.vote_wrap .btn_vote:hover span {filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.8)); background: linear-gradient(to bottom, #fff, #fff);}
.vote_wrap .btn_vote:hover:before {background-position:0 -3.9rem;}
.vote_wrap .btn_like {transition:none; padding:0 4rem; position:absolute; left:50%; bottom: -3.75%; transform:translate(-50% , 0); font-size:16px; color:#fff; font-family:'Roboto'; letter-spacing:0.05em;  display:flex; align-items:center; justify-content:center; margin:0 auto; width:240px; height:40px; background-image:url('/images/common/event/2024/vote/btn_like.png'); background-position:0 0; background-repeat:no-repeat; text-align:center; border-radius:20px; box-shadow:0.2rem 0.5rem 1rem rgba(0, 0, 0, 0.5);}
.vote_wrap .btn_like:hover {background-position:0 -40px;}
.vote_wrap.voted {padding:12rem 0 8.4rem;}
.vote_wrap .name {margin:4rem auto 0; position:relative; border-radius: 2rem; font-size:30px; font-weight:700; color:#fff; min-width:43rem; text-shadow:0.5rem 0.5rem 0.3rem rgba(0, 0, 0, 0.3); padding:1.2rem; display:inline-flex; align-items:center; justify-content:center; background:url('/images/common/event/2024/vote/bg_team.png') center center no-repeat; background-size:cover; min-height:7rem;}
.vote_wrap .name:before {opacity:0.5; content: ""; position: absolute;  inset: 0; border-radius: 2rem; padding: 0.1rem; background: linear-gradient(to right ,#eed6a8 ,#ffffff , #bca463 , #fffde6, #bca463, #fffde6, #bca463, #ffeeba, #fff0c2); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;  mask-composite: exclude;}
.vote_wrap.voted .logo {transform-style: preserve-3d; animation: rotate 7s ease-in-out infinite;  max-width:100%; min-width:581px; margin:0 auto; position:relative; display: flex; align-items: center; justify-content: center;}
.vote_wrap.voted .logo:after { content: ""; display: block;  padding-bottom: 100%;}
.vote_wrap.voted .con {display:inline-block; }
.vote_wrap.voted .con:before {transform-origin: center; animation: scaleUpDown 25s ease-out infinite both; z-index:-1; left:50%; top:50%; transform:translate(-50% , -50%); content:''; display:block; position:absolute; width:41.825%; height:126.918%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2024/vote/voted_light.png');}


.explan {display:flex; align-items:flex-start; justify-content:center; margin-top:5.6rem; opacity:0;}
.animated .explan {animation: fade-in 0.7s 0.4s ease forwards;}
.explan .tit {font-size:28px; margin-right:5rem; color:#fff; font-weight:700; text-transform:uppercase; margin-bottom:6px;}
.explan .tit span {filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.5)); background: linear-gradient(to bottom, #988263, #fbf6d3, #c7a87e); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.explan li {font-size:16px; color:#ffffff; line-height:1.5; position:relative; padding-left:2.4rem; text-align:left;}
.explan li:before {content:''; display:block; width:0.5rem; height:1px; top:1rem; left:0; background:#fff; position:absolute;}

.section02 {background:url('/images/common/event/2024/vote/bg02.jpg') center center no-repeat; background-size:cover; position:relative; padding:8rem 0 10rem;}
.section02:before ,.section02:after {content:''; display:block; position:absolute; left:0; bottom:0; top:0; right:0; background-repeat:no-repeat;}
.section02:before {background-position:center 0; background-image:url('/images/common/event/2024/vote/bg02_t.png');}
.section02:after {background-position:center bottom; background-image:url('/images/common/event/2024/vote/bg02_b.png');}
.section02 .inner {position:relative; z-index:1;}
.section02 .sec_tit {margin-bottom:8.4rem;}

.section03 {background:url('/images/common/event/2024/vote/bg03.jpg') center center no-repeat; background-size:cover; position:relative; padding:9rem 0 9rem;}
.section03:before {content:''; display:block; position:absolute; left:0; bottom:0; top:0; right:0; background-repeat:no-repeat; background-position:center bottom; background-image:url('/images/common/event/2024/vote/bg03_b.png'); mix-blend-mode: screen;}
.section03 .inner {position:relative; z-index:1;}
.section03 .sec_tit {margin-bottom:9rem; text-shadow:0 0 2rem rgba(184, 148, 255, 0.8);}
.section03 .progress_wrap {margin:9rem auto 6rem; max-width:1280px; position:relative; opacity:0;}
.animated .progress_wrap {animation: fade-in 0.7s 0.4s ease forwards;}
.section03 .progress_wrap ul {margin-left:-2rem; font-size:0;}
.section03 .progress_wrap ul li {padding-left:2rem; display:inline-block; width:20%;}
.section03 .progress_wrap ul li .con {position:relative;}
.section03 .progress_wrap .item {position:relative;}
.section03 .progress_wrap .vote {border-bottom:2px solid rgba(0, 0, 0, 0.8); height:6rem; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; letter-spacing:0.05em;  font-size:16px; text-transform:uppercase; line-height:1;  background:#ebc83d; position:relative;}
.section03 .progress_wrap .vote:before {z-index:1; content:''; display:block; position:absolute; width:1.6rem; height:0.9rem; background:url('/images/common/event/2024/vote/arr_reward.png') 0 0 no-repeat; left:50%; bottom:-0.9rem; background-size:100% auto !important; transform:translate(-50% , 0);}
.section03 .progress_wrap .vote span {color:#f0ff00; font-size:20px;}
.section03 .progress_wrap .vote font {font-size:16px; font-weight:400; margin-left:0.7rem; }
.section03 .progress_wrap .vote font:after {content:''; display:inline-block; margin:0 0.7rem;  width:2rem; height:1.9rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/icon_vote02.png');  vertical-align:middle; position:relative; top:-4px;}
.section03 .progress_wrap .img {background:rgba(0, 0, 0, 0.3);  border:1px solid rgba(235, 200, 61, 0.8); border-top:0; position:relative;}
.section03 .progress_wrap .img:before {content:''; display:block; position:absolute; width:2rem; height:1.2rem; background:url('/images/common/event/2024/vote/arr_reward02.png') 0 0 no-repeat; left:50%; bottom:-1.2rem; background-size:100% auto !important; transform:translate(-50% , 0);}
.section03 .progress_wrap .bar { width:calc(100% + 2rem); margin-left:calc(-50% - 2rem); border-top:1px solid rgb(104, 69, 255, 0.6); border-bottom:1px solid rgb(104, 69, 255, 0.6); height:1.2rem; background:rgba(0, 0, 0, 0.5); margin-top:6.2rem; position:relative;}
.section03 .progress_wrap .bar:after {content:''; display:block; position:absolute; z-index:1; width:22px; height:22px; right:-11px; top:50%; margin-top:-11px; border-radius:50%; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2024/vote/dot_progress.png');}
.section03 .progress_wrap .bar span {position:absolute; top:0; bottom:0; left:0; background: linear-gradient(to bottom, #f9e56d, #7b06ff); border-radius: 6px;}
.section03 .progress_wrap .name {position:absolute; left:0; right:0; bottom:1rem; font-weight:600; font-size:14px; color:#a0a0a0; line-height:1.1; text-transform:uppercase;}
.section03 .progress_wrap .day {display:flex; width:28px; height:28px; background:#f0ff00; text-transform:uppercase; font-size:16px; font-weight:700; color:#000000; letter-spacing:0.02em; align-items:center; justify-content:center; position:absolute; top:7rem; right:1rem; border-radius:50%; }
.section03 .progress_wrap .ok .bar:after {background-position:0 -22px;}
.section03 .progress_wrap .ok .img:after {z-index:1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2024/vote/img_receive.png') center center no-repeat;}
.section03 .progress_wrap .ok .img:before {background:url('/images/common/event/2024/vote/arr_reward02_on.png') 0 0 no-repeat;}
.section03 .progress_wrap .ok .img {border-color:#ffedb2; background:rgba(0, 0, 0, 0.3);}
.section03 .progress_wrap .ok .vote {background: linear-gradient(to bottom, #c37bf5, #ffedb2); color:#fff; text-shadow:0 0 1rem #fff; border-color:#000;}
.section03 .progress_wrap .ok .vote:before {background:url('/images/common/event/2024/vote/arr_reward_on.png') 0 0 no-repeat;}
.section03 .progress_wrap .ok .vote span {color:#fff;}
.section03 .progress_wrap .ok .vote font:after {width:4rem; height:3.9rem; background-image:url('/images/common/event/2024/vote/icon_vote02_no.png'); margin:0 -0.3rem;}
.section03 .progress_wrap ul li:first-child .bar {width:50%; margin-left:0; border-left:1px solid #6845ff; border-radius: 6px 0 0 6px;}
.section03 .progress_wrap ul li:last-child .bar { border-right:1px solid #6845ff; border-radius:0 6px 6px 0;}
.section03 .progress_wrap .my {position:absolute; bottom:-28px; left:-80px; font-size:14px; color:#f0ff00; font-weight:700; text-transform:uppercase; letter-spacing:0.02em;}
.section03 .progress_wrap .my .num {margin-top:0.9rem; display:block; width:62px; height:62px; position:relative; display:flex; border-radius:50%; justify-content:center; align-items:center; font-size:24px; color:#f0ff00; font-family:'Roboto'; background:#1d009b;}
.section03 .progress_wrap .my .num:before {content:''; display:block; position:absolute; top:-0.4rem; left:-0.4rem; bottom:-0.4rem; right:-0.4rem; background: linear-gradient(to bottom, #bc6efd, #fddf50); border-radius: 50%; z-index: -1;}

.section03 .vote_wrap li .con:before {background-image:url('/images/common/event/2024/vote/vote_base02.png');}
.section03 .vote_wrap li .con:after {background-image:url('/images/common/event/2024/vote/vote_light02.png');}
.section03 .vote_wrap li .con:before, .section03 .vote_wrap li .con:after {height:85.19%; top:41.2%;}
.section03 .vote_wrap .logo { background-image:url('/images/common/event/2024/vote/bg_fav.png');}

.section03 .explan {margin-top:13rem;}
.section03 .explan .tit span {background: linear-gradient(to bottom, #ffffff, #dfb9ff);}
.animated.section03 .explan {animation: fade-in 0.7s 0.6s ease forwards;}



@media screen and (min-width: 2568px) {
.section02:before ,.section02:after, .section03:before {background-size:100% auto;}	
}	

@media screen and (max-width: 2400px) {
.cha_r {right:-16%; top:3%;}
.cha_l {left:-10%; top:3%;}
}	

@media screen and (max-width: 1920px) {
.cha_l {width:51.6%; max-width:992px;}
.cha_r {width:51.3%; max-width:986px;}
}

@media screen and (max-width: 1512px) {
.cha_l {top:7%; left:-12%;}
.cha_r {top:7%; right:-22%;}
	
.inner {max-width:none; padding-left:2.4rem; padding-right:2.4rem;}

.mission_wrap .daily {width: calc(75% + 3rem);}
.mission_wrap .all {width: calc(25% - 3rem);; margin-left: 3rem;}


.section03 .inner {padding-left:9.6rem;}
}	

@media screen and (max-width: 1280px) {
.cha_l {top:18%;}
.cha_r {top:18%;}

.mission_wrap .con .btns {margin-left:-1.4rem; margin-right:-1.4rem;}	
.mission_wrap .con .btns a {width:91px; height:33px; background-size:100% auto; padding-right:9px; font-size:12px;}
.mission_wrap .con .btns a:hover {background-position:0 -33px;}

}

@media screen and (max-width: 1023px) {
header {text-align:center; padding:0; top:12rem;}	
header .bi {max-width:209px;}
.user_area {background:rgba(0, 0, 0, 0.8);}
.user_area.fixed {top:0;}
.user_area .btn_login {display:inline-flex;}
.user_area .btn_logout , .user_area .btn_login {vertical-align:middle; width:84px; height:40px; background:url('/images/common/event/2024/vote/btn_login_m.png'); background-size:100% auto; padding:0;}
.user_area .btn_logout:hover {background-position:0 0;}
.user_area {top:0; right:0; left: 0;  text-align: right; padding:2rem 1rem;}
.user_area .user {width:auto; height:auto; background:none; vertical-align:middle;}
.user_area .user:before {display:none;}
.user_area .user .id {display:none;}
.user_area .user .ticket {width:auto; height:auto; background:none; border:none;}
.user_area .user .ticket:before {left:0;}
.cha_l {width:87%; top:57%; left:-35%;}	
.cha_r {width:100%; top:21%; right:-49%;}
.section01 .fix_menu.fixed {top:8rem;}
.fix_btns {display:none;}
.user_area .fix_btns {display:block; left:1rem; top:50%; transform:translate(0 , -50%);}
.fix_btns.fixed {position:absolute !important;}
.btn_fix {width:130px; height:50px;}
.btn_info {background-image:url('/images/common/event/2024/vote/btn_reward_m.png');}
.btn_history {background-image:url('/images/common/event/2024/vote/btn_history_m.png');}
.btn_fix:hover {background-position:0 0;}
	
.vote_wrap ul li {width:calc(100% / 3);}
.vote_wrap .btn_like {width:205px; height:34px; background-size:100% auto;}
.vote_wrap .btn_like:hover {background-position:0 -34px;}

.section01 .title_area {padding-bottom:8rem; overflow: hidden; padding-top:18rem;}
.section01 .title_wrap .title .m {display:inline;}
.section01 .title_wrap .title .pc {display:none;}
.mission_wrap .mission .tit {position:relative; top:auto; margin-bottom:1.5rem;}

.section03 .inner {padding-left:2.4rem;}
.section03 .progress_wrap .my {position:relative; left:auto; bottom:auto; margin:4rem auto 0; display: inline-block;}
.section03 .explan {margin-top:8rem;}
.section03 .progress_wrap .ovsc {overflow-x:scroll; padding: 2rem 0;}
.section03 .progress_wrap ul {width:974px;}

.mission_wrap {display:block;}
.mission_wrap .mission {display:block; width:auto;}
.mission_wrap .all {margin-left:0; margin-top:3rem;}
.mission_wrap .daily ul {margin-left:0; display:block;}
.mission_wrap .daily li {width:100%; padding-left:0; display:block; margin-bottom:3rem; min-height:0;}
.mission_wrap li .con {min-height:180px;}
.mission_wrap .con .btns a {width: 110px; padding-right: 3px; height: 40px;}
.mission_wrap .con .btns a:hover {background-position:0 -40px;}
.mission_area {max-width:400px; margin:0 auto; text-align:center; position:relative; bottom:auto; left:auto; right:auto; padding:4rem 0 13rem;}
.mission_wrap .con .btns {margin-left:0; margin-right:0;}


}

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}	
header {top:14rem;}
header .bi img {width:24rem;}
.mobile {display:block;}


.btn_fix {width:90px; height:35px;}
.user_area .btn_logout, .user_area .btn_login {width:74px; height:35px;}
.user_area .btn_logout span, .user_area .btn_login span {font-size:2.3rem;}
.pop-up {max-width:none; left:2.4rem; right:2.4rem;  transform:translate(0 , -50%); width:auto;}
.pop_reward {    transform: translate(0 , 0);}
.pop-up .pop_title h2 {font-size:3.3rem;}
.pop_history .list li p {font-size:2.3rem;}
.pop_history .list li.top p {font-size:2.7rem;}
.pop_history .list li.none {font-size:2.3rem;}
.pop_vote .desc .txt {font-size:2.9rem;}
.pop-up .btns button {font-size:2.5rem; width:106px; height:40px;}
.pop-up .btns button:hover {background-position:0 -40px;}
.pop-up .btns button span {font-size:2.3rem;}
.pop-up .reward_wrap .tit {font-size:2.5rem; height:40px;}
.pop-up .reward_wrap .name {font-size:2.1rem;}
.pop-up .reward_wrap .day {font-size:2.1rem; width:24px; height:24px;}
.pop_reward .tabbox02 .day {height:20px; width:36px;}
.pop-up .reward_wrap .reward01 {display:block;}
.pop_reward .fix_menu li.on:before {top:-5px; bottom:-5px;}

.pop_champ .reward_wrap .reward01 {width:100%;}
.pop_champ .reward_wrap .reward02 {width:100%; margin:0; margin-top:1rem;}
.pop_reward .fix_menu li a {font-size:2.7rem;}
.pop-up .reward_wrap .tit {height:30px;}
.pop_reward .tabbox {top:80px;}
.pop_reward .desc {    height: calc(100% - 26px);}
.pop_reward .tabbox02 .user {font-size:2.5rem; padding-top:3%;}
.pop-up .reward_wrap .tit {padding:0 1rem; height:40px; line-height:1;}
.pop_reward .tabbox02 ul li {width:120px;}

.pop_payment .pop-layout .desc {padding:5rem 3rem 3rem;}
.pop_payment .pop-layout ul li {height:40px; font-size:2.9rem;}
.pop_payment .pop-layout .subject, .pop_pay_result .pop_cont .subject {font-size:2.5rem;}
.pop_payment .btns button {height:40px; width:96px;}




/* paging */
.paging_wrap li a {font-size:2.3rem;}

.btn_top {background-size:100% auto;}
.btn_top:before {background-size:100% auto;}
.btn_top span {font-size:2.3rem;}
.user_area .user .ticket {font-size:2.5rem;}
.user_area .user .ticket:before {background-size:100% auto;}

.sec_tit {font-size:5.9rem; margin-bottom:3rem;}
.sec_tit img {max-width:9.9rem;}

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

.explan {display:block;}
.explan .tit {margin-right:0; text-align:left; font-size:3.7rem;}
.explan li {font-size:2.5rem;}

.vote_wrap {max-width:450px; margin:0 auto;}
.vote_wrap.voted .logo {min-width:0; max-width:50%;}
.vote_wrap .name {font-size:2.9rem;}

.vote_wrap ul li {width:50%;}
.vote_wrap .btn_like {font-size:2.5rem; width:175px; height:29px;}
.vote_wrap .btn_like:hover {background-position:0 -29px;}
.vote_wrap .name:before {border-radius:1rem;}
.vote_wrap.voted {padding-top:0;}
.vote_wrap .btn_vote {background-size:100% auto; font-size:3.1rem;}
.vote_wrap .btn_vote:before {background-size:100% auto; left:2.4rem;}

.section01 .fix_menu.fixed {top:56px;}
.fix_menu li a {font-size:3.1rem;}
.fix_menu li.on:before {background-size:100% auto;}
.section01 .title_wrap .date {font-size:2.7rem;}
.section01 .title_area {padding-top:20rem;}
.mission_wrap .all .con .info {font-size:2.5rem;}


.section03 .sec_tit {margin-bottom:3rem;}
.section03 .progress_wrap .vote {font-size:2.5rem;}
.section03 .progress_wrap .vote span {font-size:2.9rem;}
.section03 .progress_wrap .vote font:after {background-size:100% auto; top:-2px;}
.section03 .progress_wrap .ok .img:after {background-size:auto 80%;}
.section03 .progress_wrap .vote font {font-size:2.5rem;}
.section03 .progress_wrap .my {font-size:2.3rem;}
.section03 .progress_wrap .my .num {font-size:3.3rem; width:48px; height:48px;}
.section03 .progress_wrap ul {width:740px;}
.section03 .progress_wrap .name {font-size:2.3rem;}
.section03 .progress_wrap .day {font-size:2.5rem; width:24px; height:24px;}

.mission_wrap li .con {min-height:106px; padding:7.2rem 1.4rem;}
.mission_wrap .all li .con {padding-bottom:2rem;}
.mission_wrap .mission .tit {font-size:3.5rem;}
.mission_wrap .ques .txt:before {background-size:auto 80%;}

.mission_wrap .con .btn_start {font-size:2.9rem; background-size:100% auto;}
.mission_wrap .con .btn_start:before {background-size:100% auto;}
.mission_wrap .con .btns a {font-size:2.3rem;}
.mission_wrap .con .txt {font-size:2.7rem;}
.mission_wrap .complete .txt:before {background-size: auto 80%, cover;}





.btn_fix {background-size:100% auto;}
.btn_fix span {font-size:2.3rem;}
}





@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 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 fil02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 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 fir02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 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 cloudLoop {
  0% {
    transform: translate3d(0, -40%, 0);
  }
  100% {
    transform: translate3d(-50%, -40%, 0);
  }
} 

@keyframes aim {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(160deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(160deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


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

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

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



@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(-50% , 0);
            transform: translate(-50% , 0);
  }
  20% {
    -webkit-transform: translate(calc(-50% - 2px) , 2px);
            transform: translate(calc(-50% - 2px) , 2px);
  }
  40% {
    -webkit-transform: translate(calc(-50% - 2px) , -2px);
            transform: translate(calc(-50% - 2px) , -2px);
  }
  60% {
    -webkit-transform: translate(calc(-50% + 2px) , 2px);
            transform: translate(calc(-50% + 2px) , 2px);
  }
  80% {
    -webkit-transform: translate(calc(-50% + 2px) , -2px);
            transform: translate(calc(-50% + 2px) , -2px);
  }
  100% {
    -webkit-transform: translate(-50% , 0);
            transform: translate(-50% , 0);
  }
} 

@keyframes spider-move-1 {
  0%, 100% {
   bottom: 0;
  }
  67% {
    bottom: 5rem;
  }
}

@keyframes ghost {
  0% {
     transform: translate(0, 200%) skew(0);
    opacity:1;
  }
  20% {
    transform: translate(0, 160%) skew(4deg);
  }
  40% {
    transform: translate(0, 120%) skew(-7deg);
  }
  60% {
    transform: translate(0, 80%) skew(8deg);
  }
  80% {
    transform: translate(0, 40%) skew(-5deg);
  }
  100% {
    transform: translate(0, 0) skew(0);
    opacity: 0;
  }
}
 
@keyframes float {
	0% {opacity:1;}
  50% {
     transform: translate(0, 20px);
     opacity:1;
  }
  100% {opacity:1;}
}

@keyframes pls {
  from {
    -webkit-transform:translate(-50% , 0) scale3d(1, 1, 1);
    transform:translate(-50% , 0) scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform:translate(-50% , 0) scale3d(1.05, 1.05, 1.05);
    transform:translate(-50% , 0) scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform:translate(-50% , 0) scale3d(1, 1, 1);
    transform:translate(-50% , 0) scale3d(1, 1, 1);
  }
}

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

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

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-2rem);
  }
  100% {
    transform: translatey(0px);
  }
}


@keyframes fade-in {
  from {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


@keyframes smoke {
   50% {
        opacity:1;
        transform:scale(1.02);
  }
}



@keyframes scaleUpDown {
  0%,
  100% {
    transform:translate(-50% , -50%) scaleY(0.9);
  }
  50%,
  90% {
    transform:translate(-50% , -50%) scaleY(1.2);
  }
  75% {
    transform:translate(-50% , -50%) scaleY(0.9);
  }
}

@keyframes rotate {
  50% {transform: rotate3d(0, 1, 0, 180deg);}
}

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

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

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

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

@keyframes sway {
  0% {
    transform:translate(-50% , 0) rotate(0deg);
  }
  25% {
    transform:translate(-50% , 0)  rotate(3deg);
  }
  50% {
    transform:translate(-50% , 0)  rotate(0deg);
  }
  75% {
    transform:translate(-50% , 0)  rotate(-3deg);
  }
  100% {
    transform:translate(-50% , 0)  rotate(0deg);
  }
}

@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}