@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;  box-shadow: 0 4px 6px -2px #ffffff4d;}
.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}


/*主視覺*/

.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%}
.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-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-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-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 rotate360 {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}



.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;}


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%);bottom: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%}



@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:60px}
.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{width:50%;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}


}


/*sub page*/

.sub-kv {position: relative; background:#000; aspect-ratio:4 / 3; width:50%; min-width:320px; margin: 1rem auto; }
.sub-kv .icons-starkol {width:80%; left:10%; top:5%}
.sub-kv .icon-star {top:0}
.sub-kv .icon-kol {top:0; bottom: unset;}
.sub-kv .icon-audiocable {width:25%; left:0}
.sub-kv .icon-lasergun {width:15%; left:20%; top:20%}
.sub-kv .icon-keyboard {width:45%;}
.sub-kv .icon-drum {width:40%;}
.sub-kv .icon-rabbit {width:15%; right:5%; top:10%}
.sub-kv .icon-start3 {width:3%; top:45%; right:25%}
.sub-kv .icon-lightning { aspect-ratio: 93 / 110; width:15%; top:5%; right:15%;transform: rotate(12deg);}

.icon-page {top:10%}

.sub-main {width:90%; max-width:1000px; margin:2rem auto 10rem; }
.sub-main a {color:#fff;text-underline-offset: 5px;}
.sub-title {width:90%; margin:3rem auto 2rem; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.sub-title .slogan {color:#fd62fc;  font-size: clamp(2.2rem, 1.688rem + 2.56vw, 3rem);font-weight: bold;}
.sub-title h1 {color:#fff; margin: 0; font-size: clamp(2.2rem, 1.688rem + 2.56vw, 3rem); font-weight: 500; text-align: center;}
.sub-content {background:linear-gradient(to right,#0f3f3e 0%,#642457 100%); color:#fff;}


/*info*/
.notice ul {list-style: none; padding:2rem; margin:2rem auto;}
.notice li {margin: 1.5rem 0; display: flex;}
.notice li::before {display: inline-block; content: "●"; color: #fd62fc; margin-right: .5rem;}

/*star course*/
.course {display:flex; flex-wrap: wrap; justify-content: space-between; color:#fff; gap:2rem 0;}
.sc-item {width:48%; display:flex; flex-direction: column; border-radius: 2rem; border:1px solid #fff; padding: 3%; gap:1rem; position: relative; overflow: hidden;}
.sc-pin::before {content:''; position: absolute; top:0; right:1rem; background:url(../images/att-icon-01.svg) no-repeat top center / contain; width:10%; aspect-ratio: 11 / 15;}
.sc-info {display:flex; gap:1rem; align-items: flex-start; }
.sc-logo {width:22%; min-width:75px; flex:0 0 auto;border:1px solid #ccc}
.sc-floor {flex:1 0 auto; font-size: 1.2rem; font-weight: 500; display:flex; flex-direction: column; gap:.5rem}
.sc-floor p {display:flex; align-items: center;line-height: 1.2;}
.sc-floor p span {font-size:1rem}
.sc-floor p:first-child {font-size:1rem}
.sc-floor p:first-child::before {content:''; width:20px; background:url(../images/map_on.svg) no-repeat center center / contain; aspect-ratio: 1 / 1; display:inline-block;}
.sc-discount {color:#fd62fc; font-size: clamp(1rem, 0.872rem + 0.64vw, 1.2rem);font-weight: 500;}
.sc-desc {font-size: clamp(0.8rem, 0.672rem + 0.64vw, 1rem);}
.course-notice {color:#fff; margin: 2rem auto; width: 90%;}
.course-notice > div { display:flex; align-items: center; gap:1rem;}
.course-notice > div img {width:2rem; aspect-ratio: 11 / 15; }
.course-notice ul {margin:0 auto; padding:0;}
.course-notice li {margin:.5rem 0;}


/*fun market*/
.funmarket {display:flex; flex-wrap: wrap;    justify-content: space-between; align-items: stretch; gap: 1px; background:#0f3f3e}
.mk-item {width:calc(100% / 3 - 1px); padding:1.5rem; color:#fff; display:flex; background:#000; flex-direction: column; gap:1rem; align-items: center; /*border-right:1px solid #0f3f3e; border-bottom:1px solid #0f3f3e;*/}
/*
.mk-item:nth-child(3n){ border-right:none;}
.mk-item:nth-last-child(-n+2) { border-bottom:none}*/
.sub-title .slogan.txt-grace {color:#21f1c0}
.mk-brand {font-size: clamp(1.2rem, 1.008rem + 0.96vw, 1.5rem); font-weight: 500;}
.mk-desc {font-size: clamp(0.9rem, 0.836rem + 0.32vw, 1rem);}

/*traffic*/

.trafficinfo {display: flex; gap:5%; padding:2rem; }
.traffic-data {width:50%}
.traffic-data h2 {text-align:left; display:flex; align-items: center; gap:1rem; font-size:min(max(3.5vw,1.5rem),2rem);}
.traffic-data h2 span {font-size: min(max(3.5vw,1rem),1.2rem); border-left:2px solid #fff; padding:0 1rem}
.traffic-data p {margin:1rem auto}
.traffic-data p strong {font-size:1.3rem;}
.traffic-map {flex:1 1 auto; }
.googlemap {width:100%; height:100%; min-height:40vh;}


/* timetable */
.starteam {background:#fff; position: relative; width:100%; aspect-ratio:4 / 1; display:flex; flex-direction: column; justify-content: center; gap:1rem; margin:3rem auto; }
.time-info {width:70%;}
.time-period {background:url(../images/timetable-period.png) no-repeat top right; background-size: auto 100%;color:#fff; text-indent: clamp(1rem, 0.36rem + 3.2vw, 2rem); width:60%; font-size: clamp(1.5rem, 0.86rem + 3.2vw, 2.5rem); font-weight: bold;}
.time-star {text-indent:clamp(1rem, 0.36rem + 3.2vw, 2rem); font-size: clamp(1.5rem, 0.86rem + 3.2vw, 2.5rem); font-weight:bold;}
.time-starpic {position: absolute; right:0; bottom:0; width:50%}




@media screen and (max-width: 430px) {
.course {justify-content: center; }
.sc-item {width:90%; padding: 1.5rem;}

/*traffic info*/
.trafficinfo  {flex-direction: column;}
.traffic-data {width:100%}
.traffic-map {order:-1; margin-bottom: 2rem;}

/* timetable */
.time-info {width:100%}
.time-starpic {width:45%}
.time-period {width:60%}


/*funmarket*/
.mk-item {width: 100%;}
.mk-item:empty {display:none}

.r-offset {right:-6%}

}