@charset "utf-8";
@import url("https://use.typekit.net/bmn8czv.css");
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

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

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

:root {
--ff: 'rigid-square', sans-serif;
--rbt: 'roboto', sans-serif;
}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth; scrollbar-gutter:stable;}
body {width: 100%; height: 100%; font-size: 1.4rem; text-align: center; font-family: var(--ff); background:#000; line-height:1;}
menu, ol, ul, li {vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; list-style: none;}
img {vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {font-family: var(--ff); font-weight:400;}
a {display: inline-block; font-family: var(--ff); text-decoration: none; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
button {cursor:pointer; font-family: var(--ff); background-color:rgba(255, 255, 255, 0); line-height: 1; transition: all ease-in-out 0.2s;}

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

/* 멀티랜딩 예외 */
.landing_sidebar, .landing_controls {position:absolute !important;}
.landing_sidebar.open {position:fixed !important;}
.landing_sidebar.closing {position:fixed !important;}

.inner {max-width:1524px; padding-left:3rem; padding-right:3rem; margin-left:auto; margin-right:auto;}

.btn {flex-direction: column; text-transform:uppercase; font-weight:700; font-size:14px; line-height:1.14; background-repeat:no-repeat; background-position:left 50% top 60%; background-image:url('/images/common/event/2026/pbnc/bg_ptn.png'); position:relative; display:inline-flex; align-items:center; justify-content:center; height:52px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);}
.btn:before, .btn:after {content:''; display:block; position:absolute; top:0; bottom:0;}
.btn:after {left:0; right:0; background:url('/images/common/event/2026/pbnc/btn_l.png') 0 center no-repeat, url('/images/common/event/2026/pbnc/btn_r.png') right center no-repeat; background-size:auto 100%;}
.btn:before {left:1.6rem; right:1.6rem; background:url('/images/common/event/2026/pbnc/btn_m.png') 0 0 repeat-x; background-size:auto 100%;}
.btn01 {background-color:rgba(0, 55, 130, 0.8); color:#beeaff;}
.btn01 span {color:#22ceff; transition: all ease-in-out 0.2s;}
.btn02 {background-color:rgba(186, 0, 158, 0.8); color:#ffe0f6;}
.btn03 {background-color:rgba(0, 0, 0, 0.8); color:#ffe0f6;}

.btn:hover {background-image:url('/images/common/event/2026/pbnc/bg_ptn100.jpg'); color:#fff;}
.btn01:hover {background-position:left 50% top 40%;}
.btn01:hover span {color:#fff;}

.btn_start {flex-direction: column; font-weight:800; text-transform:uppercase; text-shadow: -0.2rem 0 #fff, 0 0.2rem #fff, 0.2rem 0 #fff, 0 -0.2rem #fff, -0.15rem -0.15rem #fff, 0.15rem -0.15rem #fff, 0.15rem 0.15rem #fff, -0.15rem 0.15rem #fff; font-size:24px; color:#c500b4; letter-spacing:0.02em; z-index:4; line-height:1.16; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:64px; box-shadow:0 5px 5px rgba(0, 0, 0, 0.3); transition:none; display:none; align-items:center; justify-content:center; width:294px; height:128px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2026/pbnc/btn_start.png');}
.btn_start:before {content:''; display:block; position:absolute; left:28px; top:50%; margin-top:-25px; background:url('/images/common/event/2026/pbnc/img_arr.png') 0 0 no-repeat; background-size:100% auto; width:42px; height:49px;}
.btn_start span {color:#486fff;}
.btn_start:hover {background-position:0 100%;}

.btn_vote {padding-right:1rem; gap:1.4rem; position:relative; margin:0 auto; font-weight:800; text-transform:uppercase; font-size:24px; color:#c500b4; letter-spacing:0.02em; z-index:4; line-height:1.16; border-radius:3.2rem; box-shadow:0 5px 5px rgba(0, 0, 0, 0.3); transition:none; display:flex; align-items:center; justify-content:center; width:192px; height:64px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2026/pbnc/btn_vote.png');}
.btn_vote:before {content:''; position:relative; top:-2px; display:inline-block; background:url('/images/common/event/2026/pbnc/img_vote.png') 0 0 no-repeat; background-size:100% auto; width:3rem; height:3rem;}
.btn_vote span {filter: drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(1px 0 #fff) drop-shadow(0 -1px #fff); background: linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); -webkit-background-clip: text; background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_vote:hover {background-position:0 50%;}
.btn_vote.done {background-position:0 100%; pointer-events: none;}
.btn_vote.done:before {background-position:0 100%;}
.btn_vote.done span {filter:none; background:#f0ff6f;}

.btn_like {word-break: break-all; padding:0 5.4rem 0 7rem; position:relative; margin:0 auto; font-weight:700; font-style: oblique; text-transform:uppercase; font-size:20px; color:#fff; z-index:4; line-height:1.16; border-radius:3.2rem; box-shadow:0 5px 5px rgba(0, 0, 0, 0.3); transition:none; display:flex; align-items:center; justify-content:center; width:279px; height:64px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2026/pbnc/btn_like.png');}
.btn_like:before {content:''; position:absolute; left:3.4rem; top:50%; margin-top:-1.6rem; display:inline-block; background:url('/images/common/event/2026/pbnc/img_vote02.png') 0 0 no-repeat; background-size:100% auto; width:2.8rem; height:2.8rem; background-position:0 0;}
.btn_like:hover {background-position:0 50%;}
.btn_like.done {background-position:0 100%; color:#f0ff6f; pointer-events: none;}
.btn_like.done:before {background-position:0 100%;}

.cha {position:absolute; top:0; left:0;}
.cha01 {position:relative; animation: popLeft 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) both;}
.cha02 {animation: popLeft 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) both; animation-delay:0.15s;}
.cha03 {animation: popRight 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) both; animation-delay:0.3s;}
.cha04 {animation: popRight 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) both; animation-delay:0.45s;}

.id_logo {position: absolute;}
.id_logo01 {top:96px; left:2rem; height: 9.7%; max-height:116px;}
.id_logo_wrap {top:82px; left:50%; transform:translate(-50% , 0); height: 11.5%; z-index:2; max-height:138px; display: flex; gap: 1.6rem; align-items: center; justify-content: center;}
.id_logo_wrap img {vertical-align: middle; height:100%;}

.cha_wrap {position:absolute; left:50%; top:50%; transform: translate(-50% , -55%); width: max-content;}
.cha_wrap:before {mix-blend-mode: lighten; z-index:1; content:''; display:block; position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%, -50%); background:url('/images/common/event/2026/pbnc/cha_eft.webp') 0 0 no-repeat; background-size:100% auto; animation: eftIn 0.6s 0.3s cubic-bezier(0.34, 2, 0.64, 1) both, eftPulse 3s ease-in-out 0.6s infinite;}

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

header {padding: 3.6rem 58px; text-align:left; position:absolute; top:0; left:0; right:0; z-index: 10; align-items:center; justify-content:center;}
header .bi img {max-width:160px;}

.user_area {position:absolute; top:2.4rem; left:50%; transform:translate(-50% , 0); z-index:11; display:flex; align-items:center; justify-content:center; gap:1.2rem;}
.user_area .btn_login {width:152px;}
.user_area .btn_logout {width:108px;}
.user_area .user {border:1px solid #fff; background:rgba(255, 255, 255, 0.3); border-radius:4px; display:inline-flex; vertical-align:middle; font-size:0; overflow: hidden;}
.user_area .user > div {position:relative;}
.user_area .user > div:before {content:''; display:block; position:absolute; left:1.6rem; top:50%; transform:translate(0 , -50%);}
.user_area .user .id {max-width:192px; font-size:16px; color:#fff; letter-spacing:0.01em; padding:0 1.6rem 0 37px; display:inline-flex; vertical-align:middle; align-items:center; justify-content:flex-start;}
.user_area .user .id:before {width:12px; height:12px; background:url('/images/common/event/2026/pbnc/icon_user.png') 0 0 no-repeat; background-size:100% auto;}
.user_area .user .id span {overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.user_area .user .ticket {background:rgba(0, 43, 92, 0.5); font-size:18px; color:#f0ff6f; font-weight:700; display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 1.4rem; word-break:break-all; padding:0 1.6rem 0 55px;}
.user_area .user .ticket:before {width:28px; height:20px; background:url('/images/common/event/2026/pbnc/icon_ticket.png') 0 0 no-repeat; background-size:100% auto;}

.section01 {position:relative; position: relative; height: 100vh; max-height: 1200px; background:url('/images/common/event/2026/pbnc/bg01.jpg') center 0 no-repeat; background-size:cover;}
.section01:before, .section01:after {content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; background-size:cover;}
.section01:before {background-image:url('/images/common/event/2026/pbnc/bg01_eft.png'); mix-blend-mode: color-dodge;     animation: eftPulse 0.6s ease-in-out infinite;}
.section01:after {background-image:url('/images/common/event/2026/pbnc/bg01_shd.png'); mix-blend-mode: color-dodge;}
.section01 .title_area {height: 100%; z-index: 1; position: relative;}
.section01 .title_wrap {height:100%; padding: 9.6rem 0 3.8%; display: inline-flex; align-items: center; justify-content: flex-end; flex-direction: column;}
.section01 .title {position:relative; display:inline-block; z-index:1; height:86%; max-height:865px;}
.section01 .title > img {max-height:100%; z-index:1; position:relative;}
.section01 .title > img.bg {position:absolute; top:0; left:0;}
.section01 .date {z-index: 1; font-size:24px; color:#fff; font-weight:700; text-shadow:0 3px 2px rgba(3, 8, 46, 0.5); position:absolute; top:10.4%; left:50%;     margin-left: -194px; max-width:389px; width:100%; animation-duration:0.5s;}
.section01 .date:before {content:''; display:block; padding-bottom:20.566%;}
.section01 .date span {color:#7bfff1;}
.section01 .date p {display:flex; align-items:center; justify-content: center; gap:0.7rem; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/images/common/event/2026/pbnc/bg_date.png') 0 0 no-repeat; background-size:100% auto;}

.section02 {position:relative; background:url('/images/common/event/2026/pbnc/bg02.jpg') center 0 no-repeat; background-size:cover; padding-bottom:10rem; z-index: 11;}
.section02:before {content:''; display:block; position:absolute; left:0; right:0; height:32.2rem; top:-32.2rem; background:url('/images/common/event/2026/pbnc/bg02_t.png') center 0 no-repeat; background-size: auto 100%;}
.section02:after {content:''; display:block; position:absolute; left:0; top:-32.2rem; bottom:0; right:0; background:url('/images/common/event/2026/pbnc/bg02_glitch.png') center bottom no-repeat;}

.mission_area {position:relative; display: flex; align-items:center; justify-content:space-between; z-index:1;}
.mission_area .inner {width:100%;}
.mission_wrap {font-size:0; display:flex; align-items: stretch; gap:1.6rem; width: 100%;}
.mission_wrap .mission {display:flex; flex-direction:column; position:relative; font-size:0;}
.mission_wrap .mission .tit {margin-bottom:5.2rem; width:100%; gap:5px; padding:0 3.8rem; font-size:24px; font-weight:800; font-style:oblique; color:#fff; text-transform:uppercase; display:flex; align-items:center; height:48px; clip-path: polygon(2rem 0, 100% 0, calc(100% - 2rem) 100%, 0 100%); text-align:left; background:linear-gradient(to right, rgba(255, 54, 163, 0.8), rgba(60, 31, 203, 0.8), rgba(40, 190, 241, 0.8));}
.mission_wrap .mission .tit span {color:#faffd1;}

.mission_wrap .mission_list {flex:1; position:relative;}
.mission_wrap .mission_list:after {z-index:3; border-radius:5rem; content:""; position:absolute; inset:0; padding:0.6rem; background:linear-gradient(to bottom, #28bef1, #3c1fcb, #ff36a3); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.mission_wrap ul {overflow:hidden; min-height:34rem; display:flex; align-items: stretch; height: 100%; gap:1.6rem;}
.mission_wrap li {position:relative; height:100%;}
.mission_wrap li .con {position:relative; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background:rgba(255, 255, 255, 0.6); box-shadow:inset 0 0 2rem #fff; border-radius:1rem; overflow: hidden;}
.mission_wrap .con .no {width:100%; background:url('/images/common/event/2026/pbnc/ptn_dash.png') 0 0 repeat; flex-shrink:0; font-size:22px; font-weight:800; text-transform:uppercase; height:56px; gap:0.6rem; display:flex; align-items:center; justify-content:center;}
.mission_wrap .con .no span {display:block; background:linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(0 0 2.1rem rgba(255, 255, 255, 0.45));}
.mission_wrap .con .box {padding:0 1.6rem 4.4rem; flex:1; display:flex; align-items:center; justify-content:center; flex-direction: column; width:100%;}
.mission_wrap .con .txt_wrap {flex:1; padding:2rem; display:flex; align-items:center; justify-content:center; flex-direction: column;}
.mission_wrap .con .txt {font-size:20px; color:#000000; font-weight:600; line-height:1.3; word-break: break-word;}
.mission_wrap .con .num {font-size:28px; color:#26baef; font-weight:800; margin-top:1.5rem;}
.mission_wrap .con .num span {color:#006ed9;}
.mission_wrap .con .btn_start {z-index:3; align-items: flex-start; padding-left:72px; height:96px; width:216px; font-size:23px; flex-direction:column; position:relative;}
.mission_wrap .con .btns {flex-shrink: 0; display: flex; gap:1.2rem; width:100%; justify-content: center; flex-wrap:wrap;}
.mission_wrap .con .btns .btn {width:152px; height:60px; flex-shrink: 0; vertical-align:top; color:#ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);}
.mission_wrap .con .btns .btn:after {background:url('/images/common/event/2026/pbnc/btn_l_60.png') 0 center no-repeat, url('/images/common/event/2026/pbnc/btn_r_60.png') right center no-repeat;}
.mission_wrap .con .btns .btn:before {background:url('/images/common/event/2026/pbnc/btn_m_60.png') 0 0 repeat-x;}
.mission_wrap .con .btns .btn span {color:#fffc00;}
.mission_wrap .con .btns .btn:hover span {color:#fff;}

.mission_wrap .daily {flex:1; min-width:0;}
.mission_wrap .daily .mission_list:after {display:none;}
.mission_wrap .daily .tit {justify-content:flex-start; width: calc(100% + 1.6rem);}
.mission_wrap .daily ul {font-size:0;}
.mission_wrap .daily li {width:calc((100% - 3.2rem) / 3); display:inline-block;}
.mission_wrap .daily li:nth-child(1) {animation-delay:0.1s;}
.mission_wrap .daily li:nth-child(2) {animation-delay:0.3s;}
.mission_wrap .daily li:nth-child(3) {animation-delay:0.5s;}
.mission_wrap .daily li:first-child .con {border-radius: 5rem 1rem 1rem 5rem;}
.mission_wrap .daily li:last-child .con {border-radius: 1rem 5rem 5rem 1rem;}

.mission_wrap .daily .mission_list.inactive .btn_start {display:flex;}
.mission_wrap .daily .mission_list.inactive:after {display:block;}
.mission_wrap .daily .mission_list.inactive:before {content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; border-radius: 5rem; background:rgba(255, 255, 255, 0.9); z-index:2;}

.mission_wrap .all {width:348px; flex-shrink: 0; animation-delay:0.2s;}
.mission_wrap .all ul {width:100%;}
.mission_wrap .all ul li {width:100%;}
.mission_wrap .all .box {padding: 2.4rem 5.6rem; position: relative;  z-index: 4;}
.mission_wrap .all .con .txt {text-transform:uppercase; font-weight:700; color:#424bd4; line-height:1.3; min-height:13.2rem; width:100%; border-radius:2rem; background:#c1f5ff; display:flex; align-items:center; justify-content:center; flex-direction:column; border:0.2rem solid #006ed9;}
.mission_wrap .all .con .txt span {color:#f63aa5;}
.mission_wrap .all .con .info {font-size:14px; margin:3.6rem -1rem 0; font-family:var(--rbt); color:#000; line-height:1.28;}
.mission_wrap .all .con .info span {font-weight:700; color:#332acd;}
.mission_wrap .all .tit {justify-content: center;}
.mission_wrap .all li .con {border-radius:5rem; background:#fff;}
.mission_wrap .all .con .no {background:url('/images/common/event/2026/pbnc/ptn_dash02.png') 0 0 repeat;}

.mission_wrap .all .btn {width:224px; height:95px; letter-spacing:0; flex-shrink: 0; vertical-align:top; color:#ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); font-size:20px; font-weight:800; line-height:1.3; background-image: url(/images/common/event/2026/pbnc/bg_ptn100.jpg); background-color:rgba(255, 255, 255, 0);}
.mission_wrap .all .btn:after {background:url('/images/common/event/2026/pbnc/btn_l_95.png') 0 center no-repeat, url('/images/common/event/2026/pbnc/btn_r_95.png') right center no-repeat;}
.mission_wrap .all .btn:before {background:url('/images/common/event/2026/pbnc/btn_m_95.png') 0 0 repeat-x;}
.mission_wrap .all .btn span {color:#fffc00; font-weight:700;}
.mission_wrap .all .btn:hover { background-image: url(/images/common/event/2026/pbnc/bg_ptn.png); background-color:#9b2ac0;}
.mission_wrap .all .btn:hover span {color:#fff;}

.mission_wrap .complete .btns {display:none;}
.mission_wrap .complete .con:before {content:''; display:block; width:22.4rem; height:22.4rem; position:absolute; top:calc(50% + 2.8rem); left:50%; transform:translate(-50%, -50%); background:url('/images/common/event/2026/pbnc/img_clear.png') center center no-repeat; background-size:100% auto;}
.mission_wrap .ques .box {display:none;}
.mission_wrap .ques .con:before {z-index:1; content:''; display:block; width:22.4rem; height:22.4rem; position:absolute; top:calc(50% + 2.8rem); left:50%; transform:translate(-50%, -50%); background:url('/images/common/event/2026/pbnc/img_lock.png') center center no-repeat; background-size:100% auto;}

.fix_menu {transform:translate(0 , 100%); position:absolute; left:0; bottom:0; right:0; z-index:10; padding:0 44rem; background: linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);}
.fix_menu ul {font-size:0; max-width:940px; margin:0 auto; overflow:hidden;}
.fix_menu li {display:inline-block; position:relative; vertical-align:top; width:50%;}
.fix_menu li a {transition:none; text-transform:uppercase; display:block; width:100%; height:7.6rem; display:flex; align-items:center; justify-content:center; font-size:24px; color:rgba(255, 255, 255, 0.5); font-weight:800;}
.fix_menu li a em {font-style:normal;}
.fix_menu li a:hover {background-color:rgba(255, 255, 255, 0.2); box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.3), inset -1px 0 0 0 rgba(0, 0, 0, 0.3);}
.fix_menu li a.f01:hover {box-shadow:inset 1px 0 0 0 rgba(0, 0, 0, 0.3);}

.fix_menu li.on a {position:relative; z-index:0; color:#f0ff6f; box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.55), inset -1px 0 0 0 rgba(255, 255, 255, 0.55); background:url('/images/common/event/2026/pbnc/bg_satin.png') center center no-repeat; background-size:cover;}
.fix_menu li.on a span {color:#fff;}
.fix_menu li.on a:before {content:attr(data-text); position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform:translate(0.1rem, 0.3rem); background:linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

.fix_menu .user_area {display:none; transform:none; top:1.2rem; left:auto; right:1.2rem;}

.fix_menu.show .user_area {display:block;}

.section02 .fix_menu.fixed {position:fixed; bottom:auto; top:0; transform:none;}

.section03 {position:relative; padding:7.6rem 0 9.6rem; overflow:hidden; background:#2c1f2c;}
.section03:before, .section03:after {content:''; display:block; position:absolute;}
.section03:after {width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:url('/images/common/event/2026/pbnc/bg03_brush.png') center center no-repeat; background-size:100% auto; mix-blend-mode: multiply;}
.section03:before {top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2026/pbnc/bg03.jpg') center center no-repeat; background-size:cover;}
.section03 .inner {position:relative; z-index:1;}

.fix_btns {position:absolute; top:1.2rem; left:1.2rem; font-size:0; z-index:11;}
.btn_fix {cursor:pointer; vertical-align:top; width:16rem; flex-direction: column; margin-right:1.2rem; padding:0;}
.fix_btns.fixed {position:fixed; top:1.1rem;}

.sec_tit {padding-top:9rem; margin-bottom:5rem; font-size:44px; color:#fff; font-weight: 800; text-transform: uppercase; font-style: oblique; margin-bottom:4.8rem; position:relative;}
.sec_tit span {position:relative; display: inline-block;}
.sec_tit span:before {content:attr(data-text); position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform:translate(-0.1rem, 0.3rem); background:linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

.vote_wrap ul {font-size:0; margin-left:-5.6rem;}
.vote_wrap ul li {display:inline-block; vertical-align:top; width:25%; padding-left:5.6rem; margin-bottom:5.2rem; text-align:center;}
.vote_wrap ul li:nth-child(4n+2) {animation-delay:0.15s;}
.vote_wrap ul li:nth-child(4n+3) {animation-delay:0.3s;}
.vote_wrap ul li:nth-child(4n+4) {animation-delay:0.45s;}
.vote_wrap .con {padding:2rem 2rem 4rem; position:relative; border-radius: 5rem; box-shadow:inset 0 0 5rem rgba(255, 0, 217, 0.4), 0 1rem 1rem rgba(0, 0, 0, 0.5); background: linear-gradient(to right, rgba(255, 54, 163, 0.14), rgba(60, 31, 203, 0.14), rgba(40, 190, 241, 0.14)), rgba(0, 0, 0, 0.6);}
.vote_wrap .con:before {content:""; position:absolute; border-radius: 5rem; inset:0; padding:0.4rem; background:linear-gradient(to bottom, #ff9ad1, #9bd6ff, #ff36a3); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.vote_wrap .con:after {content:''; display:block; position:absolute; left:0; top:0; bottom:0; right:0; background:url('/images/common/event/2026/pbnc/img_trophy.png') center center no-repeat; background-size:100% auto;}
.vote_wrap .logo {width: 100%; position:relative; margin-bottom:1rem; z-index:1;}
.vote_wrap .logo:after {content:''; display:block; padding-bottom:100%;}
.vote_wrap .logo span {position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center;}
.vote_wrap .logo span img {max-width:100%; max-height:100%;}

.vote_wrap.voted {margin-bottom:5.2rem;}
.vote_wrap.voted .con {max-width:70.4rem; margin:0 auto; padding:15rem 7.2rem 0;}
.vote_wrap.voted .logo {width:31.6rem; margin:0 auto; max-width:100%; transform-style: preserve-3d; animation: rotate 3s ease-in-out infinite;}
.vote_wrap.voted .name {margin:0 -7.2rem; min-height:18.6rem; padding:1.2rem 2.4rem 5.2rem; display:flex; align-items:center; justify-content:center; font-size:20px; color:#f0ff6f; font-weight:700; font-style:oblique; word-break: break-word;}
.vote_wrap.voted .con:after {display:none;}

.explan {display:flex; align-items:flex-start; justify-content:center; margin-top:4.8rem; gap:2.6rem;}
.explan .tit {top:7px; font-size:16px; color:#fff; font-weight:700; text-align:center; text-transform: uppercase; line-height: normal; padding-top:12px; min-width:184px; max-width: 100%; position:relative;}
.explan .tit:before {content:''; display:block; position:absolute; left:0; top:0; right:0; height:0.4rem; background: linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1);}
.explan .tit span {font-weight:400; color:#dfb5f6; display:block; margin-top:1px;}
.explan ul {position:relative;}
.explan li {font-size:16px; position:relative; text-align:left; color:#e8bdff; font-family:var(--rbt); line-height:1.75;}

.section04 {padding:7.6rem 0 9.6rem; position:relative; overflow:hidden; background:url('/images/common/event/2026/pbnc/bg04.jpg') center center no-repeat; background-size:cover;}
.section04:before, .section04:after {content:''; display:block; position:absolute;}
.section04:after {width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:url('/images/common/event/2026/pbnc/bg03_brush.png') center center no-repeat; background-size:100% auto; mix-blend-mode: multiply;}
.section04:before {top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2026/pbnc/bg04_b.png') 0 bottom no-repeat, url('/images/common/event/2026/pbnc/bg04_t.png') right 0 no-repeat;}
.section04 .inner {position:relative; z-index:1;}

.section04 .vote_wrap .con {box-shadow: inset 0 0 5rem rgba(0, 24, 255, 0.4), 0 1rem 1rem rgba(0, 0, 0, 0.5);}
.section04 .vote_wrap .con:before {background: linear-gradient(to bottom, #00bcff, #ff90f6, #28bef1);}
.section04 .vote_wrap .con:after {background:url('/images/common/event/2026/pbnc/img_man.png') center center no-repeat; background-size:100% auto;}

.section04 .progress_wrap {margin:4.8rem auto 8.8rem; position:relative;}
.section04 .progress_wrap .my {padding:1.2rem 5.6rem; position:relative; max-width:100%; width:max-content; margin:0 auto 4.2rem;}
.section04 .progress_wrap .my:before, .section04 .progress_wrap .my:after {width:4.8rem; height:3.6rem; content:''; display:block; position:absolute; background:url('/images/common/event/2026/pbnc/obj_bar.png') 0 0 no-repeat; background-size:100% auto;}
.section04 .progress_wrap .my:before {top:0; left:0;}
.section04 .progress_wrap .my:after {right:0; bottom:0;}
.section04 .progress_wrap .my .txt {text-transform: uppercase; font-size:24px; font-weight:800; margin-right:2rem; background:linear-gradient(to bottom, #ffc9f3 30%, #0076ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.section04 .progress_wrap .my .num {border-radius:8px; display:inline-flex; min-width:18rem; height:32px; padding:0 2.4rem; align-items: center; justify-content: center; font-size:24px; color:#f0ff6f; font-weight:700; background:#202020; position:relative;}
.section04 .progress_wrap .my .num:before {border-radius:8px; content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.section04 .progress_wrap .ovsc {animation-delay:0.2s;}
.section04 .progress_wrap .bar {width:calc(90% + 1.68rem); height:4px; border-radius:2px; margin-bottom:4.2rem; position:relative; background:rgba(255, 255, 255, 0.5);}
.section04 .progress_wrap .bar span {position:absolute; top:-2px; bottom:0; left:0; background:linear-gradient(to right, #0076ff, #f0ff6f); height:8px; border-radius:4px;}
.section04 .progress_wrap ul {margin-left:-4.2rem; font-size:0; display:flex;}
.section04 .progress_wrap ul li {padding-left:4.2rem; display:inline-block; width:20%;}
.section04 .progress_wrap ul li .con {box-shadow:0 0 2rem rgba(0, 0, 0, 0.1); position:relative; border-radius: 5rem; background:url('/images/common/event/2026/pbnc/bg_reward.png') center center no-repeat, #000000; padding:6.4rem 2rem 1.3rem;}
.section04 .progress_wrap ul li .con:before {border-radius:5rem; content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.section04 .progress_wrap ul li .con:after {content:''; display:block; position:absolute; left:50%; margin-left:-4px; top:-48px; width:8px; height:8px; background:#e0aaff; border-radius: 50%;}
.section04 .progress_wrap .vote {text-transform:uppercase; gap:0.5rem; font-size:16px; color:#fff; font-weight:800; height:3.6rem; top:0; display:flex; align-items:center; justify-content:center; font-size:17px; position:relative; width:calc(100% - 4.8rem); max-width:168px; position:absolute; left:50%; transform:translate(-50% , -50%); border-radius:20px; background:#016994;}
.section04 .progress_wrap .vote:before {content:''; display:block; position:absolute; left:50%; bottom:100%; transform:translate(-50%, 0); width:1.6rem; height:1.2rem; background:#016994; clip-path:polygon(50% 0, 0 100%, 100% 100%);}
.section04 .progress_wrap .vote span {color:#f0ff6f;}
.section04 .progress_wrap .vote font {color:#e0aaff;}
.section04 .progress_wrap .img {position:relative; max-width:180px; width:100%; margin:0 auto 5px;}
.section04 .progress_wrap .img:after {content:''; display:block; padding-bottom:66.67%;}
.section04 .progress_wrap .img span {position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center;}
.section04 .progress_wrap .img img {max-width:100%; max-height:100%;}
.section04 .progress_wrap .name {margin:0 -1rem; line-height:1.28; text-transform:uppercase; word-break: break-word; font-size:14px; color:#ffffff; display:flex; align-items:center; justify-content:center; min-height:54px;}
.section04 .progress_wrap .day {font-family: var(--rbt); border-radius:15px; font-weight:700; display:flex; min-width:28px; padding:0 5px; height:28px; font-size:14px; text-transform:uppercase; align-items:center; justify-content:center; position:absolute; top:2.4rem; right:2.4rem; background:linear-gradient(to right, #0076ff, #ffc9f3);}

.section04 .progress_wrap ul li.ok .con:before {background:#f0ff6f;}
.section04 .progress_wrap ul li.ok .con:after {width:16px; height:16px; background:#f0ff6f; margin-left:-8px; top:-52px;}
.section04 .progress_wrap .ok .vote {background:#f0ff6f; color:#000000;}
.section04 .progress_wrap .ok .vote:before {background:#f0ff6f;}
.section04 .progress_wrap .ok .vote span {color:#000;}
.section04 .progress_wrap .ok .vote font {color:#016994;}
.section04 .progress_wrap .ok .item:before {z-index:1; content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/images/common/event/2026/pbnc/img_received.png') center center no-repeat;}

.section04 .explan li {color:#92c3ff;}
.section04 .explan .tit span {color:#92c3ff;}

footer {width: 100%; padding:8rem 2.4rem; z-index:2; position:relative; font-size:14px;}
footer > img {margin-bottom: 2rem;}
footer .footer {position: relative; z-index: 2; color:#fff; font-family:var(--rbt); line-height: normal;}
footer .footer a {color:#a8eaff;}
footer .footer a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 3px;}
footer .footer .age {margin-bottom:2rem;}
footer .footer .age img {max-width:6rem;}

.btn_top {font-size:14px; color:#ffe0f6; font-weight:800; cursor:pointer; position:fixed; z-index:11; right:1.4rem; bottom:1.4rem; width:72px; text-align:center;}
.btn_top span:before {margin-right:3px; content:''; display:inline-block; vertical-align:middle; margin-top:-4px; width:8px; height:8px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2026/pbnc/icon_top.png');}
.btn_top:hover span:before {background-position:0 100%;}

/* pop-up */
body.pop_open {overflow:hidden;}
.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 {display:none; left:50%; top:50%; width:100%; max-width:660px; transform:translate(-50%, -50%); position: fixed; z-index:100;}
.pop-up .pop-layout {overflow: hidden; display:flex; flex-direction:column; max-height:calc(100vh - 7.2rem); position:relative; border-radius:4rem; background: linear-gradient(to right, rgba(255, 54, 163, 0.2), rgba(60, 31, 203, 0.2), rgba(40, 190, 241, 0.2)), #000;}
.pop-up .pop-layout:before {border-radius:4rem; content:""; position:absolute; inset:0; padding:0.4rem; background:linear-gradient(to bottom, #28bef1, #3c1fcb, #ff36a3); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}

.pop-up .pop_cont {display:flex; flex-direction:column; min-height:0;}
.pop-up .pop-close {transition:none; z-index:10; position:absolute; top:1.2rem; right:2.4rem; width:44px ; height:44px; font-size:0; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2026/pbnc/pop_close.png'); border-radius: 50%;}
.pop-up .pop-close:hover {background-position: 0 100%;}
.pop-up .pop_title {flex-shrink: 0; padding: 0.4rem 60px 0; width: 100%; background: url(/images/common/event/2026/pbnc/ptn_dash02.png) 0 0 repeat , #beeeff; text-transform: uppercase; height: 64px; gap: 0.6rem; display: flex; align-items: center; justify-content: center;}
.pop-up .pop_title h2 {background: linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 2.1rem rgba(255, 255, 255, 0.45)); font-weight: 800; font-size: 28px;}
.pop-up .desc {min-height:0; padding:3.2rem 2rem 0 3.6rem; position: relative; display:flex; flex-direction:column;}
.pop-up .desc_in {min-height:0; overflow-y:auto; padding-right:1.6rem;}
.pop-up .desc_in::-webkit-scrollbar {width: 0.8rem;}
.pop-up .desc_in::-webkit-scrollbar-track {border-radius:6px; margin-block-start: 3.2rem; margin-block-end: 3.2rem; background:#000000;}
.pop-up .desc_in::-webkit-scrollbar-thumb {border-radius:6px; background:linear-gradient(to bottom, #ff36a3, #3c1fcb, #28bef1);}
.pop-up .desc .txt {font-size:28px; color:#fff; font-weight:700; line-height:1.2; text-transform: uppercase; padding-top:5rem;}

.pop-up .paging_wrap {padding:2rem 0 3rem; margin-top:-1px;}
.pop-up .pop_cont .btns {flex-shrink: 0; display: flex; gap:1.6rem; width:100%; justify-content: center; flex-wrap:wrap; margin-top:3rem; padding-bottom:3.6rem;}
.pop-up .pop_cont .btns .btn {flex-direction: row; width:152px; height:60px; flex-shrink: 0; vertical-align:top; color:#ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); gap:0.8rem; font-size:18px;}
.pop-up .pop_cont .btns .btn:after {background:url('/images/common/event/2026/pbnc/btn_l_60.png') 0 center no-repeat, url('/images/common/event/2026/pbnc/btn_r_60.png') right center no-repeat;}
.pop-up .pop_cont .btns .btn:before {background:url('/images/common/event/2026/pbnc/btn_m_60.png') 0 0 repeat-x;}
.pop-up .pop_cont .btns .btn span.ticket {color:#fffc00; position: relative;}
.pop-up .pop_cont .btns .btn span.ticket:before {content:''; display:inline-block; vertical-align:middle; position:relative; top:-2px; margin-right:4px; width:16px; height:11px; background:url('/images/common/event/2026/pbnc/icon_ticket.png') 0 0 no-repeat; background-size:100% auto;}
.pop-up .pop_cont .btns .btn03 {color:#ccc;}
.pop-up .pop_cont .btns .btn02 {color:#ffe0f6;}
.pop-up .pop_cont .btns .btn:hover {color:#fff;}

.pop-up .reward_wrap {font-size:0; display:flex; margin-top:5.6rem;}
.pop-up .reward_wrap > div {overflow:hidden; border-radius: 1.2rem;}
.pop-up .reward_wrap ul {font-size:0; padding:2.4rem 1.6rem 1rem; display:flex; gap:1.6rem; align-items: flex-start; justify-content: center;}
.pop-up .reward_wrap ul li {display:inline-block; text-align:center; vertical-align:middle; flex-shrink: 0; width:calc((100% - 0.8rem) / 2); max-width:164px; padding-bottom: 1.2rem;}

.pop-up .reward_wrap .item {position:relative; border-radius: 1.6rem; background:url('/images/common/event/2026/pbnc/bg_reward02.png') center center no-repeat, #000000;}
.pop-up .reward_wrap .item:before {z-index: 1; border-radius:1.6rem; content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(to bottom, #0076ff, #ffc9f3); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.pop-up .reward_wrap .item:after {content:''; display:block; padding-bottom:68.3%;}

.pop-up .reward_wrap .img {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.pop-up .reward_wrap .img img {max-width: 100%; max-height: 100%;}
.pop-up .reward_wrap .name {text-transform:uppercase; font-family:var(--rbt); word-break: break-word; display:flex; align-items:center; justify-content:center; min-height:48px; width:100%; padding:8px 0; font-size:12px; color:#ffffff; line-height:1.16;}
.pop-up .reward_wrap ul li {padding-bottom:0;}

.pop-up .reward_wrap .tit {display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; font-family:var(--rbt); font-weight:700; text-transform: uppercase; height:36px; background:rgba(190, 238, 255, 0.4); line-height:1.16;}
.pop-up .reward_wrap .tit span {margin:0 3px;}
.pop-up .reward_wrap .day {font-family: var(--rbt); border-radius:15px; font-weight:700; display:flex; min-width:28px; padding:0 3px 1px; height:28px; font-size:12px; text-transform:uppercase; align-items:center; justify-content:center; position:absolute; top:1.2rem; right:1.2rem; background:linear-gradient(to right, #0076ff, #ffc9f3);}

.pop-up .reward_wrap .reward01 {margin-right:1.6rem; width:calc(((100% - 1.6rem) / 3) * 2); background:rgba(190, 238, 255, 0.24);}
.pop-up .reward_wrap .reward01 ul li {display:inline-block; text-align:center; vertical-align:middle;}

.pop-up .reward_wrap .reward02 {width:calc((100% - 1.6rem) / 3); background:rgba(190, 238, 255, 0.3);}
.pop-up .reward_wrap .reward02 .tit {flex-direction:column;}
.pop-up .reward_wrap .reward02 ul {}
.pop-up .reward_wrap .reward02 ul li {width:100%; max-width:164px;}

.pop-up .ovys {overflow-y:auto; height:48rem; margin-right:2rem; padding: 3.2rem 1.6rem 3.6rem 3.6rem; position: relative;}
.pop-up .ovys::-webkit-scrollbar {width: 0.8rem;}
.pop-up .ovys::-webkit-scrollbar-track {border-radius:6px; margin-block-start: 3.2rem; margin-block-end: 3.2rem; background:#000000;}
.pop-up .ovys::-webkit-scrollbar-thumb {border-radius:6px; background:linear-gradient(to bottom, #ff36a3, #3c1fcb, #28bef1);}

.pop-up .pay_list li {color:#fff; margin-bottom:8px; border-radius:2rem; padding:1rem 2.8rem; display:flex; align-items:center; justify-content:space-between; min-height:6rem; font-size:16px; font-weight: 700; text-transform: uppercase; background:rgba(190, 238, 255, 0.3);}
.pop-up .pay_list li.total {background:rgba(136, 152, 0, 0.4); margin-bottom:0; color:#f0ff6f;}
.pop-up .pay_list .subject {text-align: left;}
.pop-up .pay_list .pay {font-size:20px; flex-shrink: 0;}
.pop-up .pay_list .pay img {position:relative; top:-2px; vertical-align: middle; margin-right:6px;}

.pop_champ .desc {padding:3.2rem 1.2rem 2rem 2rem;}
.pop_champ .desc_in {padding-right: 0.8rem;}
.pop_champ .reward_wrap .reward01 {flex:1; width:auto;}

.pop_fav .pop_cont > .btns {padding-bottom:6rem;}

.pop_history .list li {text-align:left; font-size:0; position:relative;}
.pop_history .list li p {line-height: 1.2; display:inline-flex; vertical-align:top; min-height:44px; gap:0.5rem; justify-content:center; align-items:center; font-size:14px; color:#fff; font-family:var(--rbt); border-bottom:1px solid #6aa0b3;}
.pop_history .list li .date {width:18.4rem; padding:0 1rem; text-align:center; margin-right:8px; color:#beeeff;}
.pop_history .list li .detail {width:calc(100% - 18.4rem - 8px); justify-content:start; padding:0 1rem;}
.pop_history .list li .detail span {overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space: normal; word-break:normal; word-wrap:normal; max-width:100%;}
.pop_history .list li .detail .sort {color:#1fb4ed; white-space:nowrap;}
.pop_history .list li.none {height:48rem; font-size:14px; text-align:center; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--ff); text-transform: uppercase;}
.pop_history .list li.top {position:relative;}
.pop_history .list li.top p {min-height: 0; justify-content:center; font-size:16px; color:#000000; font-weight: 700; height:36px; font-family:var(--ff); border-radius: 0.8rem; background:#beeeff; text-transform: uppercase; border-bottom:none;}

.pop_reward {max-width:876px;}
.pop_reward .reward_wrap {margin-top:1.6rem;}
.pop_reward .tabbox {display:none; overflow-y:auto; min-height:0; padding-right:0.8rem;}
.pop_reward .tabbox::-webkit-scrollbar {width: 0.8rem;}
.pop_reward .tabbox::-webkit-scrollbar-track {border-radius:6px; margin-block-end: 1rem; background:#000000;}
.pop_reward .tabbox::-webkit-scrollbar-thumb {border-radius:6px; background:linear-gradient(to bottom, #ff36a3, #3c1fcb, #28bef1);}

.pop_reward .reward_wrap .con .user {text-transform: uppercase; border-radius: 1.6rem 1.6rem 0 0; display:flex; align-items:center; justify-content:center; gap:0.4rem; height:20px; font-size:13px; color:#ffffff; font-family: 'Roboto';}
.pop_reward .reward_wrap .con .user span {color:#ffc7ec;}
.pop_reward .reward_wrap .reward02 .con .user span {color:#00ffe4;}

.pop_reward .tabbox01 {display:block;}
.pop_reward .tab_menu {margin:0 -0.8rem 0 -1.6rem; padding:2rem 4.8rem 0; box-shadow: inset 0 -1px 0 #fff;}
.pop_reward .tab_menu ul {font-size:0; margin:0 auto 1px; overflow:hidden; position:relative;}
.pop_reward .tab_menu li {display:inline-block; position:relative; vertical-align:top; width:calc((100% - 1.6rem) / 2); margin-right:1.6rem;}
.pop_reward .tab_menu li:last-child {margin-right:0;}
.pop_reward .tab_menu li a {text-transform:uppercase; display:flex; align-items:center; justify-content:center; width:100%; height:44px; font-size:18px; font-weight:800; border-radius: 1.6rem 1.6rem 0 0; background:rgba(255, 255, 255, 0.3);}
.pop_reward .tab_menu li a span {background:#dedede; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.pop_reward .tab_menu li a.on {background:linear-gradient(to right, rgba(255, 54, 163, 0.1), rgba(60, 31, 203, 0.1), rgba(40, 190, 241, 0.1)) , #fff;}
.pop_reward .tab_menu li a.on span {text-transform: uppercase; background: linear-gradient(to right, #ff36a3, #3c1fcb, #28bef1);}
.pop_reward .desc {display:flex; flex-direction:column; min-height:0; padding:0 1.2rem 2rem 2rem;}
.pop_reward .reward_wrap ul {flex-wrap: wrap; justify-content: center; padding:1.2rem 8px 1rem;}
.pop_reward .reward_wrap .name {display:flex; align-items:center; justify-content:center;}
.pop_reward .reward_wrap .tit {height:36px; padding-top: 2px;}

.pop_reward .reward_wrap .reward01 {margin-right:0; width:100%;}
.pop_reward .reward_wrap .reward02 {width:100%; margin-top:1.2rem;}
.pop_reward .reward_wrap .reward02 ul {gap:4px;}
.pop_reward .reward_wrap .reward02 .tit {flex-direction:row;}

.pop_reward .reward_wrap.tabbox01 ul {align-items:center;}
.pop_reward .reward_wrap .tit {flex-direction:row;}
.pop_reward .reward_wrap.tabbox01 .reward01 .tit {background:rgba(255, 71, 201, 0.4);}
.pop_reward .reward_wrap.tabbox01 .reward02 .tit {background:rgba(223, 84, 240, 0.4);}


.pop_reward .reward_wrap.tabbox02 .day {height:16px; padding:0 4px 1px; top:0.8rem; right:0.8rem;}
.pop_reward .reward_wrap.tabbox02 ul li {flex-basis: calc((100% - 16px) / 5);}
.pop_reward .reward_wrap.tabbox02 .item:after {padding-bottom:65.63%;}
.pop_reward .reward_wrap.tabbox02 ul li:nth-child(n+6) .item:after {padding-bottom:52.24%;}
.pop_reward .reward_wrap.tabbox02 .item {border-radius: 0 0 1.6rem 1.6rem;}
.pop_reward .reward_wrap.tabbox02 .item:before {border-radius: 0 0 1.6rem 1.6rem; padding-top: 0;}

.pop_reward .reward_wrap.tabbox02 ul {gap:4px;}
.pop_reward .reward_wrap.tabbox02 ul li {flex-basis: calc((100% - 16px) / 5); max-width:160px;}
.pop_reward .reward_wrap.tabbox02 ul li:nth-child(n+6) {flex-basis: calc((100% - 12px) / 4); max-width:201px;}

.pop_reward .reward_wrap.tabbox02 .reward01 .tit {background:rgba(71, 52, 114, 0.5);}
.pop_reward .reward_wrap.tabbox02 .reward01 .item:before {background:#473472;}
.pop_reward .reward_wrap.tabbox02 .reward01 .con .user {background:#473472;}

.pop_reward .reward_wrap.tabbox02 .reward01 .tit span {color:#cae5ff;}
.pop_reward .reward_wrap.tabbox02 .reward02 .tit {background:rgba(41, 142, 255, 0.4);}
.pop_reward .reward_wrap.tabbox02 .reward02 .item:before {background:#3a8ef0;}
.pop_reward .reward_wrap.tabbox02 .reward02 .con .user {background:#398ef0;}

.pop_pay .desc {padding-bottom:0;}

.pop_pay_result .result {padding:4rem 3rem 6rem;}
.pop_pay_result .result img {border-radius: 50%; filter:drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.22)) drop-shadow(0 0 55px rgba(255, 255, 255, 0.14)) drop-shadow(0 0 80px rgba(255, 255, 255, 0.08)); animation: resultGlow 2.5s ease-in-out infinite;}

/* 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; display:block; padding:0 2px; min-width:24px; height:24px; line-height:24px; text-align:center; font-size:14px;}
.paging_wrap li.prev a, .paging_wrap li.next a {min-width:0; width:15px;}
.paging_wrap li.next a, .paging_wrap li.last a {transform:scaleX(-1);}
.paging_wrap li.prev {margin-right:0.9rem;}
.paging_wrap li.next {margin-left:0.9rem;}

@media screen and (max-width: 2000px) {
.cha_wrap {height: 126.012%;}
.cha {max-width: none; height: 100%;}
}

@media screen and (max-width: 1700px) {
.section01 .title {width: 80%; height: auto; max-height: none;}
.section01 .title_wrap {padding-bottom:12%;}

.mission_wrap .mission .tit {margin-bottom:3.6rem;}
.mission_wrap .mission_list:after {border-radius: 3rem;}
.mission_wrap .con .txt_wrap {padding:2rem 0;}
.mission_wrap .daily li:first-child .con {border-radius: 3rem 1rem 1rem 3rem;}
.mission_wrap .daily li:last-child .con {border-radius: 1rem 3rem 3rem 1rem;}
.mission_wrap .all .box {padding:1.2rem 2.4rem;}
.mission_wrap .all li .con {border-radius: 3rem;}
.mission_wrap .complete .con:before {background-size:60% auto;}
.mission_wrap .ques .con:before {background-size:60% auto;}

.fix_menu.fixed ul {max-width:none;}

.vote_wrap ul {margin-left:-3.6rem;}
.vote_wrap ul li {padding-left:3.6rem;}
.vote_wrap .con {border-radius: 3rem;}
.vote_wrap .con:before {border-radius: 3rem;}

.section04 .progress_wrap ul {margin-left:-2.4rem;}
.section04 .progress_wrap ul li {padding-left:2.4rem;}
.section04 .progress_wrap ul li .con {border-radius: 3rem;}
.section04 .progress_wrap ul li .con:before {border-radius: 3rem;}
.section04 .progress_wrap .bar {width:calc(90% + 0.96rem);}
}

@media screen and (max-width: 1512px) {
.btn_like {width:240px; height:55px;}

.mission_wrap .all {width:300px;}

.fix_menu {padding:0 36rem;}
.fix_menu li a {font-size:20px;}
.fix_menu .user_area .user .id {max-width:130px;}

.vote_wrap ul {margin-left:-2.4rem;}
.vote_wrap ul li {padding-left:2.4rem;}

.section04 .progress_wrap .ok .item:before {background-size:66% auto;}
}

@media screen and (max-width: 1280px) {
.btn_vote {width:172px; height:56px;}
.btn_vote:before {width:24px; height:24px;}
.btn_like {width:174px; height:40px; font-size:18px; padding: 0 1.2rem 0 4rem;}
.btn_like:before {left:2.4rem; width:2rem; height:2rem; margin-top:-1.2rem;}

.cha_wrap {height:115%; transform: translate(-50%, -60%);}
.id_logo_wrap {height:8%;}
.id_logo01 {height:7%;}

header {text-align:center;}

.user_area {top:auto; bottom: 0; right: 0; left: 0; padding: 1rem; background: rgba(0, 0, 0, 0.8); transform:none; position:fixed; justify-content: flex-end; z-index:12;}
.user_area.fixed {top:auto; bottom: 0; right: 0; left: 0; padding: 1rem; background: rgba(0, 0, 0, 0.8); transform:none; position:fixed; justify-content: flex-end; z-index:12;}
.user_area .btn_login {width:108px;}
.user_area .user .id {max-width:175px;}

.mission_wrap .all {width:240px;}
.mission_wrap .con .box {padding-bottom:2.4rem;}

.fix_menu {padding:0;}
.fix_menu ul {max-width:none;}
.fix_menu li a {font-size:24px;}
.fix_menu .user_area {display:none !important;}
.fix_menu.fixed:before {display:none;}
.fix_menu.fixed .user_area {top:-6rem; right:1rem;}
.section02 .fix_menu.fixed {top:0; padding:0;}

.fix_btns {bottom:1rem; top:auto; left:1rem; position:fixed; display:block !important; z-index:12;}
.fix_btns.fixed {bottom:1rem; top:auto; left:1rem;}

.vote_wrap .con {padding-bottom:3rem;}

.btn_top {bottom:8.4rem;}

.mission_wrap .all .btn {width:190px;}
}

@media screen and (max-width: 1023px) {
.id_logo_wrap {height:72px;}

.section01 {height:auto; max-height:none;}
.section01 .title_wrap {padding-top:20rem;}
.section01 .title {width:65%;}
.section01 .date {width:60%; font-size:20px;        margin-left: -30%;}

.mission_area {padding-top:4.8rem;}
.mission_wrap {display:block;}
.mission_wrap ul {min-height:0; justify-content: stretch; align-items: flex-start;}
.mission_wrap .mission .tit {position:static; margin-bottom:1.2rem; justify-content: flex-start;}
.mission_wrap .daily {display:block; width:100%;}
.mission_wrap .daily ul {display:block;}
.mission_wrap .daily li {display:block; width:auto; margin-bottom:16px;}
.mission_wrap .daily li .con {min-height:30rem;}
.mission_wrap .all {display:block; width:100%; margin-left:0; margin-top:2.4rem;}
.mission_wrap .all .box {padding:2.4rem;}
.mission_wrap .complete .con:before {background-size:100% auto;}
.mission_wrap .ques .con:before {background-size:100% auto;}
.mission_wrap .all .btn {width:224px;}

.vote_wrap ul li {width:calc(100% / 3); max-width:260px;}

.explan {display:block;}
.explan .tit {text-align:left; width:auto;}
.explan .tit:before {width:200px;}
.explan .tit br {display:none;}
.explan ul {margin-top:2.4rem; margin-left:0;}

.section04 .progress_wrap .ovsc {overflow-x:scroll; padding: 6px 0 5rem;}
.section04 .progress_wrap .ovsc::-webkit-scrollbar {height:6px; background:#000;}
.section04 .progress_wrap .ovsc::-webkit-scrollbar-thumb {border-radius:6px; background:#f0f688;}
.section04 .progress_wrap ul {width:120rem;}
.section04 .progress_wrap .bar {width:106.8rem;}

.pop_reward .tab_menu {padding-left:2rem; padding-right:2rem;}
}

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}
.mobile {display:block;}

.btn {font-size:2.6rem;}
.btn_start {font-size:3.3rem; width:220px; height:96px;}
.btn_start:before {left:20px;}
.btn_vote {font-size:3.3rem; width: 123px; height: 40px;}
.btn_vote:before {width:20px; height:20px; top:0;}
.btn_like {font-size:2.9rem; padding: 0 3.6rem 0 7rem; width:157px; height:36px;}
.btn_like:before {width:18px; height:18px; margin-top:-11px; left:4rem;}

.id_logo_wrap {height:auto; left:3rem; right:3rem; transform:none; right:0; max-height:none; font-size:0; top:50px;}
.id_logo_wrap img {max-width:50%; max-height:50px;}
.id_logo01 {top:58px; height:40px;}

.user_area .btn_logout {font-size:2rem; height:40px; width: 17.6rem; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);}
.user_area .btn_login {height:40px; font-size:2rem; width: 17.6rem; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);}
.user_area .user .id {display:none;}
.user_area .user .ticket {font-size:2.5rem; height:36px; padding-left:36px;}
.user_area .user .ticket:before {width:20px; height:14px;}

.btn_fix {font-size:2rem; width:17.6rem; height:40px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);}

.section01 .title_wrap {padding-top:26rem; padding-bottom: 10%;}
.section01 .title {width:70%;}
.section01 .date {font-size:2.7rem; top:6%; width:80%;         margin-left: -40%;}

.sec_tit {font-size:6rem;}

.mission_wrap .mission .tit {font-size:3.3rem; height:36px;}
.mission_wrap .con .no {height:36px; font-size:3.1rem;}
.mission_wrap .con .txt {font-size:2.9rem;}
.mission_wrap .con .num {font-size:3.7rem;}
.mission_wrap .con .btn_start {font-size:3.2rem;}
.mission_wrap .daily ul {display:block;}
.mission_wrap .daily li {width:100%; display:block;}
.mission_wrap .daily li .con {min-height:34rem;}
.mission_wrap .all .con .info {font-size:2.3rem;}
.mission_wrap .complete .con:before {top: calc(50% + 15px);}
.mission_wrap .ques .con:before {top: calc(50% + 15px);}

.fix_menu li a {font-size:2.7rem;}

.section03 .sec_tit img {max-width:13.8rem;}

.vote_wrap .btn {font-size:3.2rem; height:45px;}
.vote_wrap.voted .name {font-size:3.4rem;}

.explan .tit {font-size:3.3rem;}
.explan li {font-size:2.5rem; line-height: 1.4;}

.section04 .progress_wrap ul {width:160rem;}
.section04 .progress_wrap ul li .con:after {top:-42px;}
.section04 .progress_wrap ul li.ok .con:after {top:-45px;}
.section04 .progress_wrap .vote {font-size:2.6rem; height:24px;}
.section04 .progress_wrap .vote:before {bottom:98%;}
.section04 .progress_wrap .vote span {font-size:2.9rem;}
.section04 .progress_wrap .name {font-size:2.3rem;}
.section04 .progress_wrap .day {font-size:2.2rem; min-width: 24px; height:24px; padding:0 3px; right:1.2rem; top:3.6rem;}
.section04 .progress_wrap .bar {width:142.8rem; margin-bottom:7rem;}
.section04 .progress_wrap .my {font-size:2.7rem;}
.section04 .progress_wrap .my .txt {font-size:3.3rem;}
.section04 .progress_wrap .my .num {font-size:4rem;}

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

.btn_top {clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);}
.btn_top {height:40px; font-size:2.3rem; bottom:11.4rem; width:60px;}
.btn_top span {font-size:2.3rem;}

.pop-up {max-width:none; left:2.4rem; right:2.4rem; transform:translate(0 , -50%); width:auto;}
.pop-up .pop-layout {max-height:calc(100vh - 4.8rem);}
.pop-up .pop_title {height:56px;}
.pop-up .pop_title h2 {font-size:3.7rem;}
.pop-up .desc .txt {font-size:3.7rem;}
.pop-up .btns .btn {height:45px;}
.pop-up .reward_wrap .tit {font-size:2.1rem; flex-direction: column; height:30px; padding-top:0;}
.pop-up .reward_wrap .name {font-size:2.1rem; min-height: 30px;}
.pop-up .reward_wrap .day {font-size:2.1rem; min-width:20px; height:20px;}
.pop-up .reward_wrap .reward02 {width:auto;}
.pop-up .pay_list li {min-height:45px; font-size:2.5rem;}
.pop-up .pay_list li .subject {font-size:2.2rem;}
.pop-up .pay_list li .pay {font-size:2.9rem;}

.pop_champ .reward_wrap {flex-direction:column;}
.pop_champ .reward_wrap .reward01 {margin-right:0; margin-bottom:16px;}
.pop_champ .reward_wrap ul li {flex-basis: calc((100% - 8px) / 4);}

.pop_history .list li p {font-size:2.3rem; min-height:36px;}
.pop_history .list li.none {font-size:2.3rem;}
.pop_history .list li.top p {font-size:2.2rem; height:30px;}

.pop_reward .tab_menu li a {font-size:2.3rem; height:30px;}
.pop_reward .reward_wrap .con .user {font-size:2.3rem; height:20px;}
.pop_reward .reward_wrap ul li {flex-basis: calc((100% - 16px) / 4);}
.pop_reward .reward_wrap.tabbox02 ul li {flex-basis: calc((100% - 16px) / 4);}
.pop_reward .reward_wrap.tabbox02 ul li:nth-child(n+6) {flex-basis: calc((100% - 16px) / 4);}
.pop_reward .reward_wrap.tabbox02 ul li:nth-child(n+6) .item:after {padding-bottom:65.63%;}

.pop_pay_result .result {font-size:4.9rem;}

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

@media screen and (max-width: 600px) {
.vote_wrap ul li {width:50%; max-width:190px;}
.pop_champ .reward_wrap ul li {flex-basis: calc((100% - 8px) / 3);}
.pop_reward .reward_wrap ul li {flex-basis: calc((100% - 16px) / 3);}
.pop_reward .reward_wrap.tabbox02 ul li {flex-basis: calc((100% - 16px) / 3);}
.pop_reward .reward_wrap.tabbox02 ul li:nth-child(n+6) {flex-basis: calc((100% - 16px) / 3);}
}

@media screen and (max-width: 450px) {
.btn_vote:before {width:18px; height:18px;}
.btn_like {width: 140px; height:32px; padding-left:6rem;}
.btn_like:before {width:15px; height:15px; margin-top:-8px; left:3rem;}
}

@media screen and (max-width: 380px) {
.btn_like {width: 131px; height:30px;}

.vote_wrap .btn_vote {padding-left:1rem; padding-right:1rem;}
}

@media screen and (max-width: 350px) {
.btn_vote {width:110px; height:36px;}
.btn_like {width: 109px; height:25px; padding: 0 2.4rem 0 5rem; font-size: 2.4rem;}
.btn_like:before {width:13px; height:13px; margin-top:-7px; left:2rem;}

.user_area .btn_logout, .user_area .btn_login {width:13rem; font-size:1.9rem;}
.user_area .user .ticket {padding-left:30px;}
.user_area .user .ticket:before {width:16px; height:11px;}

.section01 .date {font-size:2.4rem;}

.fix_menu li a {font-size:2.4rem;}

.btn_fix {font-size:1.9rem;}
.btn_history {width:13rem;}
}

@media screen and (min-width: 1024px) and (max-height: 1200px) {
.cha_wrap {height: 126.012%;}
.cha {max-width: none; height: 100%;}
}

@media screen and (min-width: 1024px) and (max-height: 800px) {
.cha_wrap {height: 115%;}
.id_logo_wrap {height:11.5%;}

.section01 .title {width:auto; height: 86%; max-height: 865px;}
.section01 .title_wrap {padding-bottom:3.8%;}
}

@media screen and (min-width: 1280px) and (max-height: 800px) {
.cha_wrap {height: 126.012%;}
}

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

@keyframes popLeft {
  from {opacity:0; transform:translateX(14%) scale(0.6);}
}

@keyframes popRight {
  from {opacity:0; transform:translateX(-14%) scale(0.6);}
}

@keyframes eftIn {
  from {opacity:0; transform:translate(-50%, -50%) scale(0.3);}
  to {opacity:1; transform:translate(-50%, -50%) scale(1);}
}

@keyframes eftPulse {
  0%, 100% {opacity:1;}
  50% {opacity:0.55;}
}

@keyframes resultGlow {
  0%, 100% {filter:drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.22)) drop-shadow(0 0 55px rgba(255, 255, 255, 0.14)) drop-shadow(0 0 80px rgba(255, 255, 255, 0.08));}
  50% {filter:drop-shadow(0 0 6px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.12)) drop-shadow(0 0 28px rgba(255, 255, 255, 0.08)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.04));}
}