@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&display=swap');

*{box-sizing: border-box;}html{line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;cursor:pointer;display:inline-block;}b,strong{font-weight:bolder}small{font-size:80%}img{display:block;margin: 0 auto;border-style:none}
h2, p {margin:0;}

body{font-family:'Noto Sans TC','Microsoft JhengHei','微軟正黑體',Century Gothic,Helvetica,Verdana,Arial,sans-serif;font-weight:300;background:#000}

.container{width:100%;overflow:hidden;min-height:100vh;position: relative;}
.wrap{width:100%;max-width:1200px;margin:0 auto}
img{height:100%;width:100%;object-fit:contain}
header{display:flex;justify-content:space-between;align-items:center;height:70px;padding:0;}
.main-nav {display: flex; justify-content: space-between;  width:100%; max-width: 1200px; position: relative;margin: 0 auto; height:100%}
nav{display:flex;gap:2rem; align-items: center;}
nav a{color:#fff;text-decoration:none;font-weight:500;}
.menu-logo{aspect-ratio:595 / 146;width:20%;max-width:200px; padding:0 1rem}
.headermenu {padding-right:1rem; align-items: stretch;flex: 1 0 auto; justify-content: flex-end;}
.headermenu a {display: flex; align-items: center;}
.headermenu a span {animation: tada 5s linear forwards infinite;}

.headermenu a:hover {color:#e88cf5; transition: .5s all;}
#navcontrol{display:none}
.nav-control{display:none;position:relative;z-index:999;cursor:pointer;width:50px;aspect-ratio:1 / 1;background:#fd62fc url(../images/menu.svg) no-repeat center / contain; order:-1;}
#navcontrol:checked ~ .nav-control{background-image:url(../images/close.svg)}
#navcontrol ~ .nav{position:fixed;width:100%;height:calc(100vh - 50px);top:50px;left:-100vw;padding:1.5rem 0;background:#fd62fc;transition:all cubic-bezier(1,0.34,0,0.86) 1s;z-index:998;overflow:hidden;display:none;flex-direction:column;justify-content:space-around}
#navcontrol:checked~.nav{left:0}
/*
header.fixedtop{position:fixed;width:100%;z-index:99;top:0;transition:all .5s}
*/

/*主視覺*/
.kv{background:url(../images/bg.jpg) no-repeat top center / cover;aspect-ratio:12 / 8;position:relative}
.icons{position:absolute;z-index:1}
.icons::after{display:block;content:'';position:absolute;background-repeat:no-repeat;background-position:center center;background-size:contain}
.icon-audiocable{top:5%;left:-5%;aspect-ratio:110 / 49;width:20%}
.icon-audiocable::after{width:36%;top:-18%;right:-18%;aspect-ratio:80 / 47;background-image:url(../images/icon-1-1.png);z-index:-1;animation:flash 2s cubic-bezier(0.22,0.79,0.57,1) alternate forwards infinite}
.icon-lasergun{top:18%;left:12%;aspect-ratio:115 / 96;width:12%}
.icon-lasergun::after{width:36%;top:-17%;left:-40%;aspect-ratio:20 / 19;background-image:url(../images/icon-2-1.png);z-index:-1;animation:shakeX 1s ease-in-out alternate forwards infinite}
.icon-earphone{top:30%;left:3%;aspect-ratio:85 / 88;width:15%;animation:swing 4s linear alternate forwards infinite}
.icon-keyboard{top:75%;left:-10%;aspect-ratio:465 / 263;width:40%}
.icons-gramophone{top:30%;left:-10%;aspect-ratio:49 / 42;width:45%;position:absolute;z-index:0}
.icon-turntable{top:15%;left:0;aspect-ratio:1 / 1;width:80%;animation:rotate360 8s linear forwards infinite}
.icon-track{top:0;right:0;aspect-ratio:115 / 174;width:25%}
.icon-trackline{top:0;right:7%;aspect-ratio:83 / 125;width:35%;transform-origin:top right;animation:lineskew 3s linear alternate forwards infinite}
.icon-pedal{bottom:-5%;left:34%;aspect-ratio:65 / 53;width:9%}
.icon-pedal::after{width:70%;top:0;left:0;aspect-ratio:85 / 82;background-image:url(../images/icon-6-2.png);transform-origin:top right;animation:trampling .5s ease-in-out alternate forwards infinite}
.icon-loudspeaker{bottom:0;right:40%;aspect-ratio:61 / 53;width:10%}
.icon-loudspeaker::after{width:70%;top:-45%;right:-20%;aspect-ratio:93 / 110;background-image:url(../images/icon-8-1.png);animation:heartBeat 1s ease-in-out alternate forwards infinite}
.icon-rabbit{top:40%;right:25%;aspect-ratio:59 / 169;width:10%}
.icon-rabbit::after{width:60%;top:40%;right:-30%;aspect-ratio:33 / 25;background-image:url(../images/icon-9-1.png);animation:tada 3s ease-in-out alternate forwards infinite}
.icon-drum{bottom:0;right:-3%;aspect-ratio:315 / 209;width:25%}
.icon-gesture{bottom:25%;right:10%;aspect-ratio:63 / 66;width:5%;animation:bounce 1s ease-in-out alternate forwards infinite}
.icon-box{top:50%;right:-3%;aspect-ratio:45 / 28;width:15%}
.icon-jumpghost{top:40%;right:5%;aspect-ratio:130 / 147;width:10%;animation:pulse 1.5s cubic-bezier(0.18,0.89,0.32,1.28) alternate forwards infinite}
.icon-gong{top:32%;right:15%;aspect-ratio:60 / 43;width:10%;animation:shakeY 1.5s cubic-bezier(0.18,0.89,0.32,1.28) alternate forwards infinite}
.icon-ticket{top:15%;right:2%;aspect-ratio:13 / 30;width:7%}
.icon-mike{top:15%;right:12%;aspect-ratio:20 / 33;width:5%}
.icon-mike::after{width:100%;top:0;left:-100%;aspect-ratio:29 / 35;background-image:url(../images/icon-17.png);animation:bounceIn 1.5s cubic-bezier(0.18,0.89,0.32,1.28) alternate forwards infinite}
.icon-controller{top:5%;right:1%;aspect-ratio:117 / 4;width:40%}
.icon-controller::after{width:6%;top:-25%;left:0;aspect-ratio:11 / 9;background-image:url(../images/icon-18-1.png);animation:controlmove 5s cubic-bezier(0.07,0.52,0.95,0.45) alternate forwards infinite}
.icon-start1{top:8%;right:45%;aspect-ratio:3 / 4;width:1%;animation:fadeIn 1s ease-in-out alternate forwards infinite}
.icon-start2{top:10%;right:60%;aspect-ratio:5 / 6;width:3%;animation:bounceIn 3s ease-in-out alternate forwards infinite}
.icon-start3{top:32%;right:37%;aspect-ratio:37 / 35;width:2%;animation:flash 2s ease-in-out alternate forwards infinite}
.icon-start4{top:35%;left:40%;aspect-ratio:30 / 47;width:3%}
.icon-spring{top:23%;left:24%;aspect-ratio:15 / 13;width:3%}
.icon-discoball{width:7%;aspect-ratio:1 / 1;animation:rotate360 2s linear forwards infinite}
.icons-starkol{top:15%;left:25%;aspect-ratio:1 / 1;width:50%;position:absolute;z-index:0}
.icon-musictitle{top:0;left:0;aspect-ratio:543 / 92;width:100%}
.icon-star{top:10%;left:0;aspect-ratio:1 / 1;width:100%;animation:rotate360 30s linear forwards infinite}
.icon-kol{bottom:8%;left:0;aspect-ratio:1 / 1;width:80%}
@keyframes trampling {
0%{transform:skew(0deg,0deg)}
100%{transform:skew(0deg,5deg)}
}
@keyframes controlmove {
0%{left:0}
100%{left:95%}
}
@keyframes rotate360 {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@keyframes lineskew {
0%{transform:skewY(-4deg)}
100%{transform:skewY(4deg)}
}
.kv-info{background:#a0f4fe;aspect-ratio:12 / 7;position:relative;padding:10% 0 5%}
.kv-info h1{margin:0 auto;width:50%;max-width:375px}
.kv-info h2{margin:2rem auto;width:50%;display:flex;gap:3rem;align-items:center;justify-content:space-between}
.kv-info h2::before,.kv-info h2::after{content:'';width:7%;aspect-ratio:31 / 130;display:block;background:url(../images/kv-time-1.png) no-repeat center center / contain}
.kv-info h2::after{transform:rotate(180deg)}
.kv-info p{width:60%;margin:0 auto;font-size: clamp(1rem, 0.872rem + 0.64vw, 1.2rem);line-height:1.7;text-align:center;}

.btn{display:block;margin:2rem auto;width:50%;max-width:250px;text-align:center;font-size:clamp(1.1rem,0.972rem + 0.64vw,1.3rem);border:2px solid #000;box-shadow:0 6px 0 2px #000;line-height:2;border-radius:2rem;color:#000;text-decoration:none;font-weight:500;background:#fff}
.btn:hover{background:#fd62fc;box-shadow:none}
.btn-y:hover{background:#21f1c0}


.title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;line-height:1.25}
.title .slogan{font-family:sans-serif;font-size:clamp(1.5rem,0.54rem + 4.8vw,3rem);font-weight:900}
.title h2{font-size:clamp(2rem,1.04rem + 4.8vw,3.5rem);font-weight:500;word-break:keep-all;text-align:center}
.title p{font-size:clamp(1rem,0.872rem + 0.64vw,1.2rem);font-weight:500;word-break:keep-all;text-align:center; width:80%; margin:0 auto;}



.event-stage{width:100%;background:linear-gradient(to right,#fc61fb 0%,#a0f4fe 100%);position:relative;display:flex;flex-direction:column;justify-content:space-between}
.event-stage::before,.event-stage::after{display:block;content:'';width:1300px;margin:0 auto;height:30px;background:#000 url(../images/singer-free.jpg) repeat-x center left / contain}
.event-stage::before{margin-top:-15px}
.event-stage::after{width:100%;margin-top:5rem}
.stage-title{display:flex;align-items:center;justify-content:space-between;width:80%;margin:5rem auto;max-width:800px}
.stage-title .icons{position:relative;width:10%;left:unset;right:unset;bottom:unset;top:unset}

.flip-items li div{border-radius:5px;background:#000;padding:.25rem;color:#fff;text-align:center}
.flip-items li div p{margin:.5rem auto;font-size:1.25rem}
.flip-items li div strong{font-size:1.5rem}

.event-vippass{width:100%;position:relative;background:#ddf055;padding:0 0 15%;aspect-ratio:16 / 10;}
.vippass-gift{aspect-ratio:1 / 1}
.vippass-title{background:url(../images/pass-1.jpg) no-repeat left center / contain;display:flex;width:100%;max-width:1000px;margin:0 auto;justify-content:space-between;align-items:center}
.vippass-title .title{width:45%;text-align:center}
.vippass-prod{display:flex;justify-content:space-between; flex-wrap:wrap;font-family:monospace;font-size:1rem}
.vippass-prod strong{font-weight:900}
.vipass-box{background:#ffffff70;width:90%;max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap}
.vipass-box > div{border:1px solid #000;width:50%;padding:3% 5%}
.vipass-box > div > div:last-child { margin:2rem auto 1rem; width:80%}
.vipass-box > div:nth-child(even){border-left:none}
.vipass-box > div:nth-child(n+3){border-top:none}


.fandom-title{color:#fff;margin:10% auto}
.pink-title {width:96%; max-width: 1000px; margin:0 auto;}
.pink-title strong {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#fc61fb; font-size: clamp(4rem, 0.16rem + 19.2vw, 10rem);font-weight: 900;}
.fandom-news{display:flex;flex-direction:column;gap:5rem;margin:5% auto}
.fandom-box{color:#fff;display:flex;width:96%;max-width:1000px;margin:0 auto;position:relative}
.fandom-info{width:80%;border-radius:0 200px 0 0;display:flex;background:linear-gradient(to right,#0f3f3e 0%,#642457 100%);padding:5% 10%;gap:10%;align-items:center;justify-content:space-between;position:relative}
.fandom-box > div:last-child{position:relative;flex:1 1 auto}
.fandom-box:last-child > div:last-child{order:-1}
.fandom-box > div:last-child .icon-gesture{width:25%;left:0;top:0;right:unset;bottom:unset}
.fandom-box > div:last-child .icon-rabbit{width:45%;top:unset;bottom:0;right:25%}
.fandom-box > div:last-child .icon-lasergun{width:40%}
.fandom-box > div:last-child .icon-jumpghost{width:60%;top:unset;bottom:0;transform:scaleX(-1)}
.fandom-info::after{content:'';display:block;width:100%;position:absolute;left:0;bottom:0;height:10px}
.fandom-info::before{font-size:clamp(2.5rem,2.18rem + 1.6vw,3rem);display:block;position:absolute;top:-1.5rem;line-height:1;font-weight:bolder}
.fandom-box:nth-child(1) .fandom-info::before{content:'FLASH SALE';color:#fd62fc;left:0}
.fandom-box:nth-child(2) .fandom-info::before{content:'FAN MARKET';color:#21f1c0;right:0}
.fandom-box:nth-child(1) .fandom-info::after{background:#fd62fc}
.fandom-box:nth-child(2) .fandom-info{border-radius:200px 0 0 0}
.fandom-box:nth-child(2) .fandom-info div:last-child{order:-1}
.fandom-box:nth-child(2) .fandom-info::after{background:#21f1c0}
.fandom-info h3{margin:0 auto;font-size:2rem}
.fandom-info h4{margin:0 auto 2rem;font-size:1.5rem}
.fandom-info div:first-child{width:50%;flex:1 0 auto}
.fandom-footer{position:relative;width:96%;max-width:1000px;margin:0 auto;min-height:100px}
.fandom-footer .icon-controller{width:45%;top:50%;right:15%}
.fandom-footer .icon-discoball{width:4%;right:8%}
.btn-fan{margin:.5rem auto;font-family:fantasy}


.wine{background:url(../images/cocktail-bg.jpg) no-repeat top center / cover;padding-top:5%}
.wine-title{margin:0 auto;max-width:800px}
.wine-box{width:96%;margin:5% auto;max-width:1024px;display:flex;align-items:center;justify-content:center;position:relative}
.wine-box::before{content:'';display:block;background:url(../images/cocktail-letter-01.svg) no-repeat center center / contain;aspect-ratio:300 / 103;width:100%;position:absolute}
.wine-box > div{aspect-ratio:9 / 16;width:18%}
.beer-tips{line-height:2.5;background:#c279f7;color:#000;text-align:center;font-size: clamp(0.8rem, 0.032rem + 3.84vw, 2rem);position:relative;letter-spacing:10px;display:flex;align-items:center;justify-content:center;gap:.5rem}
.icon-tips{width:2rem;aspect-ratio:1 / 1;display:inline-block;margin:0 .5rem}
.sponsor{background:#000;padding:5% 0 150px}
.sponsor-box{width:100%;max-width:800px;margin:0 auto;background:linear-gradient(to right,#10413f 0%,#652458 100%);padding:2rem 0}
.sponsor-main{width:90%;margin:2rem auto}
.sponsor-main h2{color:#fff;margin:4rem auto 2rem;font-size:1rem;text-align:center}
.sponsor-main div{display:flex;flex-wrap:wrap;gap:2rem 5%}
.organizer div {justify-content: center;}
.sponsor-main div a{width:30%}
.partner div a{width:12.5%}

/*Footer*/
footer{background:#e88cf5;width:100%;height:200px;position:relative}
footer small{display:block;width:100%;text-align:center;position:absolute;bottom:20%}
.icons-footer{position:absolute;aspect-ratio:45 / 23;width:40%;max-width:400px;left:50%;transform:translateX(-50%);top:-30%}
.icon-footerlogo{top:0;left:0;aspect-ratio:125 / 58;width:100%}
.icons-footer .icon-loudspeaker{left:-5%;width:25%}
.icons-footer .icon-pedal{bottom:35%;left:50%;width:17%}
.icons-footer .icon-lasergun{bottom:0;right:0;width:20%;top:unset;left:unset}
.icons-footer .icon-audiocable{right:-10%;top:-10%;transform:rotateY(180deg);left:unset}
.icons-footer .icon-discoball{top:-15%;left:-5%}
.icons-footer .icon-start1{width:3%;top:30%;left:-5%}
.icons-footer .icon-start2{width:5%;top:60%;left:35%}
.icons-footer .icon-start3{width:5%;top:20%;left:80%}



/*loading*/

.loading{display:flex;background:#a0f4fe;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100vh;overflow:hidden;position:fixed;z-index:99999}
.load-process{position:relative;width:100%}
.load-mascot{margin:0 auto;width:150px;position:relative}
.load-icon{position:relative;width:150px;aspect-ratio:33 / 30;margin:0 auto}
.load-icon::before,.load-icon::after{display:block;content:'';background-repeat:no-repeat;background-position:center;background-size:contain;position:absolute}
.load-icon::before{background-image:url(../images/Loading.svg);width:100%;aspect-ratio:33 / 30}
.load-icon::after{background-image:url(../images/icon-9-1.png);width:35%;top:10%;right:-0;aspect-ratio:33 / 25;animation:tada 3s ease-in-out alternate forwards infinite}
.load-num{color:#000;font-size:1.5rem;font-family:fantasy;position:absolute;bottom:10%;left:50%;transform:translateX(-50%);width:50px;text-align:center}
.load-bar{height:3px;background:#fff;width:50%;margin-top:2rem;position:relative;overflow:visible!important}
.load-bar::before{display:block;content:'';width:20px;position:absolute;right:-25px;top:-10px;animation:loadbar 3s linear infinite normal;background:url(../images/kv-note1.png) no-repeat center / contain;aspect-ratio:25 / 31;animation:notejump 1s linear infinite normal}
.animated{animation-play-state:running!important}
@keyframes notejump {
0%{transform:translate(0,0) scale(1)}
40%{transform:translate(0,-30%) scale(.7)}
100%{transform:translate(0,0%) scale(1)}
}


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

header{height:50px; position: fixed; top:0; left:0; z-index: 1111; width: 100%; background:#000; }
.wrap {margin-top:50px}
.main-nav { width:unset; max-width: unset; position: static;}
.headermenu{display:none}
#navcontrol ~ .nav {display:flex}
.nav-control{display:block}
.menu-logo{position:absolute;top:0;right:0;width:calc(100vw - 50px);height:50px;z-index:999;display:flex;justify-content:center;align-items:center;max-width:none}
.menu-logo img{height:30px;width:auto}
.menu-base{flex-direction:column;gap:1rem;font-size:clamp(1.1rem,0.524rem + 2.88vw,2rem);text-align:center;line-height:1.2}
.menu-base a span{display:block;font-size:clamp(0.9rem,0.708rem + 0.96vw,1.2rem);font-family:monospace}
.menu-title{height:10%;margin:1rem auto 0}

.followus{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1rem}
.followus > h3{color:#000;flex:0 1 auto}
.followus img{width:50px;height:50px}


.kv{aspect-ratio:9 / 16}
.icons-starkol{width:96%;left:2%;top:20%}
.icon-musictitle{top:-20%}
.icon-star{top:0}
.icon-kol{width:100%;left:-10%;bottom:-8%;transform:rotate(15deg)}
.icon-audiocable{width:30%}
.icon-controller{width:65%}
.icon-drum{width:50%;right:-10%}
.icon-gesture{bottom:15%;right:25%;width:10%}
.icon-rabbit{top:55%;right:7%;width:20%}
.icon-loudspeaker{bottom:16%;right:40%;width:18%;transform:rotate(-75deg)}
.icon-pedal{bottom:18%;left:20%;width:20%}
.icon-keyboard{bottom:-5%;left:-20%;width:80%}
.icons-gramophone{width:60%;left:-15%;top:23%;transform:rotate(20deg)}
.icon-earphone{width:20%;top:20%}
.icon-gong{width:20%;top:68%;right:24%}
.icon-ticket{top:20%;width:12%}
.icon-jumpghost{top:45%;width:15%}
.icon-lasergun{top:20%;left:45%;width:20%}
.icon-mike{top:18%;right:18%;width:8%}
.icon-spring{top:15%;left:1%;width:7%}
.icon-start1{top:7px;right:14%;width:3%}
.icon-start2{width:5%;top:6%}
.icon-start3{width:4%;top:27%;right:23%}
.icon-start4{top:40%;left:40%;width:6%}

.kv-info h1{width:80%}
.kv-info h2{width:80%;gap:0}
.kv-info p{width:95%;word-break: keep-all;}
.kv-info h2 img{width:70%}
.kv-info h2::before,.kv-info h2::after{min-width:20px}

.stage-title{width:100%; position: relative;justify-content: center;}
.stage-title .title {width:80%}
.stage-title .icons {position: absolute; width:15%; max-width: 100px;}
.stage-title .icons.icon-loudspeaker {bottom:-40%; left:5%}
.stage-title .icons.icon-pedal {top:-10%; right:3%}

.vippass-title{flex-direction:column;background-position:top 15% center}
.vippass-title .title,.vippass-gift{width:100%; max-width:600px;}

.fandom-title{margin:10% auto 20%}
.fandom-box{display:block;position:relative}
.fandom-info{width:100%;flex-wrap:wrap;padding:10%;gap:1rem;position:relative}
.fandom-box:nth-child(2) .fandom-info div:last-child{order:1}
.fandom-box:nth-child(2) .fandom-info h3,.fandom-box:nth-child(2) .fandom-info h4,.fandom-box:nth-child(2) .fandom-info p{text-align:right}
.fandom-box > div:last-child{aspect-ratio:1 / 1;position:absolute;z-index:2;width:30%;top:0;right:0}
.fandom-box:nth-child(2) > div:last-child{right:unset;left:0;top:-5%;aspect-ratio:2 / 3}
.fandom-footer .icon-controller{width:80%;right:10%}
.fandom-footer .icon-discoball{width:10%}

.wine{background-image:url(../images/cocktail-bg-ph.jpg);aspect-ratio:130 / 231;display:flex;flex-direction:column;justify-content:space-between}
.wine-title{margin:10% auto 0}
.wine-box::before{background-image:url(../images/cocktail-letter-ph-01.svg);aspect-ratio:53 / 30}
.wine-box > div{width:30%}
.beer-tips{letter-spacing:3px;line-height:3}
.sponsor{padding:0 0 150px}
.sponsor-main div a{width:47.5%}
.partner div a{width:21.25%}
.icons-footer{width:70%; }
}




@media screen and (max-width: 430px) {
.vippass-title .title, .vippass-gift {width:90%}
.vipass-box > div {width:100%}
.vipass-box > div:nth-child(even) {border:1px solid #000}
}