@charset "UTF-8";
* {font-family:'Pretendard','Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;}
body {background:#000;}
section, .section {position:relative; z-index:2;box-sizing: border-box; color:#222222;}


body {position: relative;}
.bg-gray {background-color:#1D1D21;}
.inner {overflow: visible;}
main {overflow: hidden;}

.ir{ text-indent: -999em; overflow: hidden;}
.accordion-block .accordion-btn .icon-plus {top:0;}



.section-kv {width:100%; height:100vh; max-width:315px; margin:0 auto 188px; padding:0; color:#fff;}
.section-kv .area li {position:relative;}
.section-kv .logo {position:relative; width:292px; height:90px; padding:26px 0 0; z-index:1; overflow: hidden;}
.section-kv .logo canvas {position:absolute; top:0; left:0; width:100%; height:100%;}
.section-kv .logo .thumb {display: block; position:relative; width:100%; height:100%; background:url("https://og.kakaobank.io/view/97a5e0b4-7270-460c-80cd-f500f21a1cae") no-repeat 0 0 / 100%;}
.section-kv .area .kv-obj {width:100%; height:354px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -80px;}
.section-kv .obj-inner {position:absolute; top:50%; left:50%;}
.section-kv .obj-inner li {position:absolute; top:0; left:0;}
.section-kv .obj-inner .line {top:-338px; left:-420px; width:701px; height:476px; background:url("https://og.kakaobank.io/view/6cfda8eb-6faf-4de8-bf85-7ceaac6689c5") no-repeat 0 0 / 100%;}
.section-kv .obj-inner .dia {top:-188px; left:30px; width:188px; height:188px; background:url("https://og.kakaobank.io/view/e8b6b42e-c1b8-4038-9872-b093e17bbafa") no-repeat 0 0 / 100%;}
.section-kv .obj-inner .seq {top:-148px; left:-150px; width:334px; height:334px; background:url("https://og.kakaobank.io/view/7385b952-9858-4b33-9052-231bc682e779") no-repeat 0 0 / 334px 15364px;
  animation:seq-ani 2.2s steps(45) infinite;
}
.section-kv .obj-inner .song {top:-8px; left:-236px; width:174px; height:174px; background:url("https://og.kakaobank.io/view/04bc61d0-c0dc-462a-a551-ac0ffdcfdf4c") no-repeat 0 0 / 100%;}
.section-kv .copys {position:absolute; bottom:0; left:0; width:100%; padding:0 0 46px; box-sizing: border-box;}
.section-kv .copys h2 {font-size:30px; line-height: 40px; margin-bottom:22px; font-weight: 700;}
.section-kv .copys span {display: block; font-size:14px; line-height: 17px; font-weight: 500; color:rgba(255,255,255,0.8)}
.section-kv .copys .copyright {position:absolute; bottom:30px; left:0; width:59px;}
.section-kv .copys .arrow {width:17px; margin:43px auto 0;}
.section-kv .copys .obj {position:absolute; top:80px; left:50%;}
.section-kv .copys .obj li {position:absolute; top:0; left:0;}
.section-kv .copys .obj .line {top:0; left:-120px; width:calc(1250px/2); height:calc(814px/2); background:url("https://og.kakaobank.io/view/e6f812ea-4a50-4d3d-a606-418da14e841a") no-repeat 0 0 / 100%;}
.section-kv .copys .obj .plus {top:-2px; left:40px; width:169px; height:169px; background:url("https://og.kakaobank.io/view/bb6b323c-c6fc-48bf-9590-f00d2c5ce0f2") no-repeat 0 0 / 100%;}
.section-kv .copys .obj .shot {top:260px; left:20px; width:188px; height:188px; background:url("https://og.kakaobank.io/view/8a1940f6-46b4-4bbb-8d9e-c586574e954e") no-repeat 0 0 / 100%;}



.section-vote {max-width:315px; margin:0 auto; padding:0 0 202px;}
.section-vote .dday {display: inline-block; font-size:18px; line-height: 27px; color:#BDFF01; font-weight: 700; background-color:#222222; border-radius: 40px; padding:12px 21px; margin-bottom:30px;}
.section-vote h2 {font-size:27px; line-height: 32px; color:#BDFF01; font-weight: 700; margin-bottom:15px;}
.section-vote .desc {font-size:15px; line-height: 18px; font-weight: 500; color:rgba(255,255,255,0.5); margin-bottom:30px;}
.section-vote .desc > span {font-weight: 700; color:#fff;}
.section-vote .thumb {margin-bottom:30px;}

.section-vote .vote-list {margin-bottom:30px;}
.section-vote .vote-list ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.section-vote .vote-list input[type="radio"] {display: none;/*visibility: hidden;*/}
.section-vote .vote-list li { position: relative; overflow: hidden; width: 150px; margin-bottom: 15px; border-radius: 2px; color: #fff; background: #1D1D1D; box-sizing: border-box;}
.section-vote .vote-list label { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.section-vote .vote-list label::after {content: ''; position: absolute;
    width: 28px; height: 27px; top:0; right:0; background: url("https://og.kakaobank.io/view/a96f5a7d-d2e8-43fa-a57d-ccbd91751596") no-repeat top left / 28px 27px; }
.section-vote .vote-list input[type="radio"].checked + label::before {content: ''; position: absolute; width: 100%;
    height: 100%; top:0; left: 0; border: 3px solid #BDFF01; border-radius: 2px; box-sizing: border-box;}
.section-vote .vote-list input[type="radio"].checked + label::after {background: url("https://og.kakaobank.io/view/d428f719-d3c2-4f9d-85a0-80ecce7e5761") no-repeat top left / 28px 27px; }
.section-vote .vote-list .vote-text {padding: 14px 12px 12px; text-align: left;}
.section-vote .vote-list .vote-text .vote-name {display: block;}
.section-vote .vote-list .vote-rank {margin-right: 6px; font-size: 15px; font-weight: 600; line-height: 18px; color: #BDFF01;}
.section-vote .vote-list .vote-name {font-size: 14px; font-weight: 600; line-height: 18px; vertical-align: middle; overflow: hidden; white-space: nowrap;}
.section-vote .vote-list .vote-number {font-size: 11px; font-weight: 600; color: #888888;}
.section-vote .vote-list .vote-progress {width: 100%;height: 4px; margin:10px 0; background: #303030;}
.section-vote .vote-list .vote-progress-bar{width: 0%;height: 100%;background: #BDFF01; text-indent: -9999px;}
.section-vote .vote-list .icon-voted {position:absolute; top:0; right:0; width:79px; height:26px; background:url("https://og.kakaobank.io/view/34799499-cecc-479e-94c9-5a2898b67420") no-repeat 0 0 / 100%; display: none;}

.section-vote .vote-list.voted label::after {display: none;}
.section-vote .vote-list.voted li.on .icon-voted {display: block;}



.section-vote .vote-title {overflow: hidden;display: flex;align-items: center;}
.section-vote .vote-title .static-text {overflow: hidden;}
.section-vote .vote-title .flow-container {display: none;}
.section-vote .flow .vote-title .static-text{display: none;}
.section-vote .flow .vote-title .flow-container{display: block;}
.section-vote .vote-list .flow-text {display: flex;flex: 0 0 auto;white-space: nowrap;overflow: hidden;transition: 0.3s;font-size: 15px;font-weight:600;color: #fff;}
.section-vote .vote-list .flow-text:hover {color: #fff;}
.section-vote .vote-list .flow-text:hover .flow-wrap {animation-play-state: paused;cursor: pointer;}
.section-vote .vote-list .flow-wrap {animation: textLoop 10s linear infinite;padding-right: 1.4881vw;}

.section-vote .vote-info {color:#fff; border-bottom:2px solid #BDFF01;}
.section-vote .vote-info li {margin-bottom:25px;}
.section-vote .vote-info .vote-title {color:#BDFF01; font-size:17px; line-height: 20px; font-weight: 600; margin-bottom:10px;}
.section-vote .vote-info .icon {display: inline-block; width:16px; vertical-align: top; margin:1px 8px 0 0;}
.section-vote .vote-info .vote-desc {font-size:15px; line-height: 18px;}
.section-vote .vote-info .vote-desc span {display: inline-block; color:#BDFF01;}


/* 투표이전 */
.section-vote.comming .vote-opendate{display: block;}
.section-vote.comming .vote-list{display: none;}

/* 투표완료 */
.section-vote.complete .vote-list label::after{display: none;}

/* 웹 */
.section-vote.web .inmotion .vote-list li { height: 179px; transition: all 0s; transition-delay: 0s; }
.section-vote.web .vote-list .vote-text {padding: 10px 11px; text-align: left;}
.section-vote.web .vote-list .vote-rank {display: none;}
.section-vote.web .vote-list .vote-number {display: none;}
.section-vote.web .vote-list .vote-progress {display: none;}
/* .section-vote.web .vote-list label::after{display: none;} */



.section-invite {max-width:315px; margin:0 auto; padding:0; color:#fff;}
.section-invite .smile {position:absolute; top:-178px; left:200px; width:201px; height:204px; background:url("https://og.kakaobank.io/view/a56acb10-3aa1-4655-a7cd-795807a6a5ff") no-repeat 0 0 / 100%;}
.section-invite h2 {font-size:27px; line-height: 28px; color:#FFF500; margin-bottom:15px;}
.section-invite h2 span {color:rgba(255, 245, 0, 0.5)}
.section-invite p {font-size:15px; line-height: 18px; font-size:500; margin-bottom:30px;}
.section-invite .thumb {margin-bottom:25px;}
.section-invite .invite-info > li {margin-bottom:25px;}
.section-invite .invite-info > li:last-child {margin-bottom:30px;}
.section-invite .invite-info .invite-title {color:#FFF500; font-size:17px; line-height: 20px; font-weight: 600; margin-bottom:10px;}
.section-invite .invite-info .icon {display: inline-block; width:16px; vertical-align: top; margin:1px 8px 0 0;}
.section-invite .invite-info .invite-desc {font-size:15px; line-height: 18px;}
.section-invite .invite-info .invite-desc ul li {position:relative; padding-left:15px; margin-bottom:5px;}
.section-invite .invite-info .invite-desc ul li::before {content: ""; position: absolute; top: 7px; left: 1px; display: inline-block; width: 2px; height: 2px; background: #fff; border-radius: 50%;}
.section-invite .invite-info .invite-desc span {display: inline-block; color:#FFF500;}
.section-invite .btn-box {position:relative; text-align: center; margin-bottom:40px;}
.section-invite .btn-invite {display: inline-block; font-size:20px; line-height: 20px; color:#000; background-color:#FFF500; padding:24px 0; margin:0 auto; border-radius: 2px; width:207px;}
.section-invite .btn-invite.joined {background-color:#444444; color:#989898;}

.section-invite .accordion-block {position:relative; border-top: 2px solid #FFF500; border-bottom: 2px solid #FFF500; color:#FFF500; z-index:1;}
.section-invite .accordion-block button {color:#FFF500; font-weight: 600;}
.section-invite .accordion-block .title img {width:17px; vertical-align: top; margin:5px 7px 0 0;}
.section-invite .accordion-btn.is-active .icon-plus svg {transform:rotate(180deg);}
.section-invite .accordion-block .info-list {padding-top:10px; opacity:0.5;}
.section-invite .accordion-block .info-list li {position:relative; padding-left: 10px;}
.section-invite .accordion-block .info-list li::before {content: ""; position: absolute; top:9px; left: 1px; display: inline-block; width: 2px; height: 2px; background: rgba(255,245,0,1); border-radius: 50%;}
.section-invite .line-pk {position:absolute; bottom:-708px; left:-10px; width:1372px; height:1053px; background:url("https://og.kakaobank.io/view/a77ef897-944a-4e55-a936-2c5246a89ff7") no-repeat 0 0 / 100%;}
.theme-default #share {background:transparent;}
.theme-default #share .share-btn .btn {background-color:#F1F1F1;}

.section-share {padding:90px 0 60px;}
.section-share a {position:relative;}
.section-share .up {position:absolute; top:-57px; right:16px; width:95px;}

#btnApply {bottom:0; display: none;}
#btnApply.on {display: block;}
#btnApply .apply-btn {border-radius: 0; width: 100%; height: auto; line-height: 1; padding: 27px 0; font-weight: 700; background-color:#BDFF01;}
#btnApply .apply-btn.inApp_iphonex {padding:27px 0 36px;}

.popups .okay-btn .btn-ok {background-color:#111111; color:#fff;}
.popups .okay-btn.cnt-2 .btn-ok {width:auto; color:#000; margin-right:5px;}
.popups .okay-btn.cnt-2 .btn-ok+.btn-ok {background-color:#111111; color:#fff; margin-left:5px; margin-right:0;}
.popups .title span {display: block; font-size:15px; line-height: 18px; font-weight: 400; margin-top:20px;}
.popups .title span b {display: block; margin-bottom:5px;}
.popups .title img {padding:35px 0 0;}
.popups[name="VOTE_CHECK"] .okay-btn a:nth-of-type(1) {width:60%; flex:none;}
.popups[name="AGE_1"] .okay-btn a:nth-of-type(1) {width:40%; flex:none;}
.popups[name="AGE_2"] .okay-btn a:nth-of-type(1) {width:50%; flex:none; background-color:#111111; color:#fff;}
.popups[name="AGE_3"] .okay-btn a:nth-of-type(1) {width:40%; flex:none;}
.popups[name="NO_AGE"] .okay-btn a:nth-of-type(1) {width:50%; flex:none; background-color:#111111; color:#fff;}


@keyframes seq-ani {
  100% {background-position:0 100%;}
}


.ani-float {animation:floating-ani 4s infinite; transform-origin: center;}
.dia {animation-delay: 1.2s; transform:rotate(-3deg);}
.plus {animation-delay: 0.8s; transform:rotate(3deg);}
.shot {transform:rotate(-3deg);}

@keyframes floating-ani {
  50% {transform:translate(0, 20px) rotate(0deg);}
}


.mot {transform:translate(0, 50px); opacity:0;}
.is-active .mot {transform:translate(0,0); opacity:1; transition:transform 0.7s, opacity 0.7s;}
.bounce {animation:arrow-bounce-ani 2s infinite;}
.up.bounce {animation:arrow-bounce-reverse-ani 2.5s infinite;}

.copys h2.mot {transition-delay: 0.7s;}
.copys span.mot {transition-delay: 0.8s;}
.copys .arrow.mot {transition-delay: 0.9s;}

.kv-obj .line {transform:translate(-50px, 0) rotate(-10deg); opacity:0;}
.is-active .kv-obj .line {transform:translate(0,0) rotate(0); opacity:1; transition:transform 0.7s, opacity 0.7s; transition-delay: 0.7s;}

.copys .line {transform:translate(50px, 0) rotate(10deg); opacity:0;}
.is-active .copys .line {transform:translate(0,0) rotate(0); opacity:1; transition:transform 0.7s, opacity 0.7s; transition-delay: 0.9s;}


.section-vote.is-active .dday {transition-delay: 0.2s;}
.section-vote.is-active h2 {transition-delay: 0.3s;}
.section-vote.is-active .desc {transition-delay: 0.4s;}
.section-vote.is-active .thumb {transition-delay: 0.5s;}
.section-vote.is-active .vote-list li:nth-of-type(1) {transition-delay: 0.8s;}
.section-vote.is-active .vote-list li:nth-of-type(2) {transition-delay: 0.9s;}
.section-vote.is-active .vote-list li:nth-of-type(3) {transition-delay: 1s;}
.section-vote.is-active .vote-list li:nth-of-type(4) {transition-delay: 1.1s;}
.section-vote.is-active .vote-list li:nth-of-type(5) {transition-delay: 1.2s;}
.section-vote.is-active .vote-list li:nth-of-type(6) {transition-delay: 1.3s;}
.section-vote.is-active .vote-list li:nth-of-type(7) {transition-delay: 1.4s;}
.section-vote.is-active .vote-list li:nth-of-type(8) {transition-delay: 1.5s;}
.section-vote.is-active .vote-list li:nth-of-type(9) {transition-delay: 1.6s;}
.section-vote.is-active .vote-list li:nth-of-type(10) {transition-delay: 1.7s;}

.section-vote.is-active .vote-info li:nth-of-type(1) {transition-delay: 1.9s;}
.section-vote.is-active .vote-info li:nth-of-type(2) {transition-delay: 2s;}
.section-vote.is-active .vote-info li:nth-of-type(3) {transition-delay: 2.1s;}
.section-vote.is-active .vote-info li:nth-of-type(4) {transition-delay: 2.2s;}


.section-invite.is-active h2 {transition-delay: 0.2s;}
.section-invite.is-active p {transition-delay: 0.3s;}
.section-invite.is-active .thumb {transition-delay: 0.4s;}
.section-invite.is-active .invite-info li:nth-of-type(1) {transition-delay: 0.6s;}
.section-invite.is-active .invite-info li:nth-of-type(2) {transition-delay: 0.7s;}
.section-invite.is-active .invite-info li:nth-of-type(3) {transition-delay: 0.8s;}
.section-invite.is-active .btn-box {transition-delay: 0.9s;}
.section-invite.is-active .accordion-block {transition-delay: 1s;}

@keyframes arrow-bounce-ani {
  0%, 100%, 20%, 50%, 80% {transform:translateY(0);}
  40% {transform:translateY(-10px);}
  60% {transform:translateY(-5px);}
}

@keyframes arrow-bounce-reverse-ani {
  10%, 30% {transform:translateY(-10px)}
  20% {transform:translateY(0);}
  40% {transform:translateY(0);}
}


@media screen and (max-width: 320px) {
  .section-kv {padding:0 10px;}
  .section-kv .copys {padding:0 10px 46px;}

  .section-vote {padding:0 10px 202px;}
  .section-vote .vote-list li {width:140px;}

  .section-invite {padding:0 10px;}
  .theme-default #eventInfo {padding:0 10px;}

}