*{box-sizing: border-box;}
html{line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0}main{display:block}

a{text-decoration: none;background-color:transparent;cursor:pointer;display:inline-block;}
b,strong{font-weight:bolder}
small{font-size:80%}
html,body{font-family:'Microsoft JhengHei','微軟正黑體',Century Gothic,Helvetica,Verdana,Arial,sans-serif;font-weight:400;scroll-behavior:smooth; }
h1,h2,h3,ul,ol,li,p{margin:0;padding:0}
img{display:block; width:auto; max-width:100%;}
h2{font-size:min(max(3.5vw,2rem),3rem);text-align:center;}
h3{font-size:min(max(3.5vw,2.2rem),3.5rem);text-align:center}


/*menu*/
.menubox{position:relative;width:100%;height:60px;z-index:9999;opacity:1; background: #083181;}
.menubox.fixedtop {position: fixed; top:0;  transition: all .5s;}
.headermenu{display:flex;justify-content:space-between;align-items:center;position:relative;top:0;left:0;z-index:999;width:100%;height:100%;max-width:1200px;margin:0 auto}
.logo{padding-left:5%;display:flex;align-items: center;}
.logo img{height:40px;width:auto}
.menu-tb{display:flex;gap:2rem;margin-right:5%}
.menu-tb a{color:#fff;text-decoration:none;position:relative;}
.menu-tb a::before{content:'';position:absolute;width:0;height:2px;background-color:#ffdee8;bottom:0;left:0;transition:all .3s ease-in-out}
.menu-tb a:hover{color:#ffdee8;}
.menu-tb a:hover::before{width:100%}
#navcontrol{display:none}
.nav-control{display:none;position:relative;z-index:999;margin:0 0 30px;cursor:pointer;width:50px;height:50px;background:#000 url(../images/menu.svg) no-repeat center / contain;}
#navcontrol:checked ~ .nav-control{background-image:url(../images/close.svg);}
#navcontrol ~ .nav{position:fixed; width:100%;height:100vh;top:-100vh;left:0;padding:2rem 0; background:#e0e0e0; transition:all cubic-bezier(1,0.34,0,0.86) 1s; z-index:998;overflow:hidden}
#navcontrol:checked~.nav{top:50px}
.menu-logo{display:none}

/*content*/
.wrap {overflow: hidden; width:100%; min-height:100vh; position: relative; z-index: 1; background-color:#f19db6;}

/*footer*/
footer {background:#fff; text-align: center; position: relative; z-index: 1;  }
.footer-info {display:flex; justify-content: space-between; align-items: center; border-top: 2px solid #ccc; width:100%; max-width:980px; margin:0 auto; padding:1rem; }
.footer-info a {width:30%; max-width:200px; display:inline-block;  }

/*end*/
.end {width:100%; height:100vh; background:#176db6 url(../images/footer.png) no-repeat center bottom / 50%; position: fixed; bottom:0; z-index: 0; }
.end-box {position: absolute; width:50%; bottom:0; left:50%; transform: translateX(-50%); aspect-ratio: 1200 / 405;}
.end strong {width:100%; display:flex; justify-content: center; align-items: center; position: absolute; top:-50%; color:#fff; font-size:min(max(3.5vw,1.3rem),2rem); text-align: center; letter-spacing: 1px; font-family:sans-serif; gap:1rem}
.end strong::before, .end strong::after {display:block; content:'';  background-repeat:no-repeat;  background-size:contain; width:50px; aspect-ratio: 1 / 1; }
.end strong::before {background-image: url(../images/footer-note1.png); background-position:center; }
.end strong::after {background-image: url(../images/footer-note2.png);}
.end-mask { width:100%; height:70vh; position: relative; background:url(../images/footerimg-pink.png) no-repeat top center / contain; z-index: 1; }
.end .icon-blackcat { top:-20%; right:5%; width:20%;}


/*icon setting*/

.icons {position: absolute; z-index: 1;}
.icons img {display: block; width:100%; }
.icon-party {top:-7%; left:33%; z-index: 5; aspect-ratio: 60 / 19;}
.icon-ball1 {width:30%; top:-20%; left:0%; aspect-ratio: 230 / 273;}
.icon-ball2 {width:60%; top:-35%; right:0%; aspect-ratio: 53 / 43;}
.icon-blackcat {aspect-ratio: 13 / 12; }
.icon-blackcat::before, .icon-blackcat::after { display: block; content:''; position: absolute; z-index: 1; background-repeat: no-repeat; background-size: contain; background-position: center;}
.icon-blackcat::before {width:14%; top:-30%; right:10%; aspect-ratio: 3 / 8;  background-image:url(../images/footer-cat-1.png); transform-origin:bottom; animation: tailmove 1s linear alternate forwards infinite; }
.icon-blackcat::after {width:43%; top:0; left:-23%; aspect-ratio: 19 / 23;  background-image:url(../images/footer-cat-2.png); transform-origin:bottom; animation: headmove 5s alternate forwards infinite;}

@keyframes headmove {
    0%,20% {transform: rotate(0deg); top:0; }
    20%,50% {transform: rotate(-5deg); top:0; }
    60% {transform: rotate(10deg); top:-5%; }
    61%,80% {transform: rotate(10deg); top:-5%; }
    100% {transform: rotate(20deg); top:-7%}
}

@keyframes tailmove {
    0% {transform: rotate(28deg); }
    100% {transform: rotate(0deg); }
}
@keyframes itemscalemove {
    0% {transform: rotate(0deg); }
    100% {transform: rotate(360deg); }
}
/* template other */

.sub-kv {width:100%; max-width: 1200px; margin:0 auto; }
.lead-item4 {width:100%; aspect-ratio: 16 / 8; position: relative; }
.icon-kvbg {width:50%; bottom:0; left:50%; transform: translate(-50%, 0%); aspect-ratio: 103 / 76; }
.lead-item4 .icon-party {top:-5%; }
.lead-item4 .icon-ball1 {width:20%; top:20%; left:10%}
.lead-item4 .icon-ball2 {width:35%; top:5%; right:10%}

.sub-content {width:100%; max-width: 1200px; margin:3rem auto;}
.sub-content h1 {color:#fff; font-size:min(max(3.5vw,1.3rem),3.5rem); line-height: 1.2; text-align: center; display:flex; align-items: center; justify-content: center; margin:5rem auto 1rem; gap:.5rem}
.sub-content h1::before, .sub-content h1::after {display:block; content:''; width:15%; max-width: 120px; aspect-ratio: 1 / 1; background:no-repeat center / contain;}
.sub-content h1::after { background-image:url(../images/icon-2.png);}
.sub-content h1::before {background-image:url(../images/icon-3.png);}

.info-area {display:flex; justify-content: center; }
.info-area::before, .info-area::after {display:block; content:''; width:5%; background:url(../images/yesyoucan-1.svg) repeat-y top center / 60%;}
.main-box {background:#499ad1; width:90%; min-height:50vh   }

.wrap-pink footer {background:#f19db6; margin-top:2rem;}
.wrap-pink .footer-info {border-top:1px solid #000;}
.mask-pink {background-image:url(../images/footerimg-pink.png);}


/*timetable*/
.timetable {width:90%; margin:3rem auto; border-radius: 20px; text-align: center;  }
.timetable-body > div {display:flex; align-items: center; gap:1rem; background:#fff; border-bottom:1px solid #ccc; border-radius: 20px; line-height: 3;}
.timetable-header {font-size:min(max(3.5vw,1.2rem),2rem);}
.timetable-body > div > div:first-child { width:40%; }
.timetable-body > div > div:last-child {flex:1; }
.timetable-body > div:not(:first-child) > div:first-child {font-size:min(max(3.5vw,1rem),2rem);}
.timetable-body > div:not(:first-child) > div:last-child {position: relative; aspect-ratio: 16 / 6; overflow: hidden;}
.timetable-body > div > div:last-child strong {position: absolute; top:50%; left:10%; transform: translate(-10%, -50%); display:block; width:100%; line-height: 1.2; font-size:min(max(3.5vw,1.2rem),2rem); text-align: left;}
.timetable-body > div > div:last-child span {position: absolute; bottom:0; right:20%; display:block; width:40%;  }
.timetable-body > div.starteam  > div:last-child span {width:70%; right:0;}

/*map*/
.zone {width:90%; margin:3rem auto 3rem; border-radius: 20px;   }
.zone-body, .maps {display:flex; flex-direction: column; align-items: center; overflow: hidden; line-height:2.5; margin-bottom:2rem}
.zone-body h2 {font-size:min(max(3.5vw,1.2rem),2rem); width:100%; margin-bottom:1px;  background:#fff; border-radius: 20px;}
.zone-body ul {display:flex; flex-wrap:wrap; gap:.5rem 0; padding:1rem 2rem; margin:0 auto; list-style: none; background:#fff; border-radius: 20px; width:100%;}
.zone-body ul li {width:calc(100% / 3); }
.zone-body ul li span {display:inline-block; width:30px; height:30px; line-height:30px; font-size:.8rem; text-align: center; border:1px solid #ccc; font-weight:bold; margin-right:.5rem}
.zone-body ul li .pink {color:#d90074}
.maps {background:#fff; border-radius: 20px; margin-bottom:2px;}
.maps  picture img {width: auto; max-width: 100%; margin:0 auto}

/*markets*/
.sub-desc { width: 90%; max-width:800px; margin: 0 auto 2rem; font-size: min(max(3.5vw,1rem),1.5rem); text-align: center; color:#fff;}
.market {display:flex; flex-wrap:wrap; padding:0;background:#fff;}
.market > * {color:#333; flex:0 1 auto; text-decoration:none; width:calc(100% / 3); padding:2rem; font-size:1.2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; border:1px solid #000 }
.market > *:nth-child(3n+1) {border-left:1px solid transparent}
.market > *:nth-child(3n) {border-right:1px solid transparent}
.market > a strong { font-size:min(max(3.5vw,1rem),1.5rem); display:block; text-align: center;}
.market > a p { font-size:min(max(3.5vw,.8rem),1rem); }
.market > a div {position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden;}
.market > a div img {position: absolute; top:0; left:0; }
.market > a div img:first-child {top:50%; transform: translateY(-50%);}
.market > a:hover div img:nth-child(2) { opacity: 1; transform: scale(1.2);  transition: all 1s 0s; }
.market > a div img:nth-child(2) {opacity: 0; transform: scale(1); transition: all 1s 0s;}

/*traffic info*/
.traffic {background:#fff; border-radius: 20px; width:90%; margin:2rem auto;}
.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:1px solid #000; 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;}

/*info*/
.info {background:#fff; border-radius: 20px; width:90%; margin:2rem auto;}
.info ul {list-style: none; padding:2rem; margin:2rem auto;}
.info li {margin: 1.5rem 0; display: flex;}
.info li::before {display: inline-block; content: "●"; color: #d90074; margin-right: .5rem;}

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

/*menu*/
.menubox {height:50px;}
.headermenu{display:none}
.nav-control{display:block}
.menubg img{bottom:0;right:15%;width:100%}
.menu-logo{position:absolute;top:0;right:0;width:calc(100% - 50px);height:50px;z-index:999;display:flex;justify-content:center;align-items:center; background:#083181}
.menu-logo img{height:30px;width:auto}
.menu-base{position:relative;z-index:999;background:#f19db6;padding:0 1rem}
.menu-base ul,.menu-base li{list-style:none;padding:0;margin:0}
.menu-base a{font-size:1.4rem;display:block;color:#000;text-decoration:none;line-height:2.5;text-align:center}
.menu-base a:hover{color:#fff}
.followus{display:flex;flex-direction:column;justify-content:center;align-items:center; margin-top:2rem}
.followus > h3{font-size:1rem;color:#000}
.followus img{width:50px;height:50px}

/*end*/
.end {background-size: contain;}
.end-box {width:100%}
.end strong {top:-100%; }
.end .icon-blackcat { top:-30%; right:40%; }

.lead-item4 {aspect-ratio: 5 / 4;}
.icon-kvbg {width:80%;}
.sub-content h1 {margin:2rem auto 1rem; }
.info-area::before, .info-area::after {display: none;}
.main-box {width: 100%;}

/*timetable*/
.timetable {margin:2rem auto;}
.timetable-body > div > div:first-child { width:40%  }
.timetable-header { line-height: 3;}

/*map*/
.zone-body ul li {width:50%; }

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

/*markets*/
.market > * {padding: 1rem .5rem .5rem;}
.market > a.on div img:last-child{animation: photochange 1.2s linear forwards;}
@keyframes photochange {
    0% {transform: scale(1.2); opacity:0; }
    100% {transform: scale(1); opacity:1; }
}
}

@media screen and (max-width : 640px) {
/*markets*/
.market > * {width: 50%;}
.market > *:nth-child(3n+1) {border-left:1px solid #000;}
.market > *:nth-child(3n) {border-right:1px solid #000}
/*map*/
.zone-body ul {padding:1rem}
.zone-body ul li {width:100%;}
}