@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&family=Noto+Sans+TC:wght@100..900&display=swap');

:root {
--gradient-color: #ff95df 0%,#f5ea5a 50%,#4ff2f0 90%;
interpolate-size: allow-keywords;
}


*{box-sizing: border-box;}html{line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0}
hr{box-sizing:content-box;height:0;overflow:visible}
h1 {margin: 0; padding:0}
a{background-color:transparent;cursor:pointer;display:inline-block;}
b,strong{font-weight:bolder}small{font-size:80%}
ul,li { padding: .5rem 0 0;}
img{display:block;margin: 0 auto;border-style:none; height: 100%; width:100%; object-fit: contain;}
html,body{font-family:'Noto Sans TC','Microsoft JhengHei','微軟正黑體',Century Gothic,Helvetica,Verdana,Arial,sans-serif;font-weight:400; font-optical-sizing: auto; font-style: normal;}
body {background:url(../images/bg.jpg) repeat top center; }
.wrap {width: 100%; position: relative;}
/*Menu*/

header {margin:0 auto; width:90%; max-width: 900px;  margin-top:5%; position: relative;}
.pc-nav {width:100%; display:flex; border-radius: 2.5rem; line-height:2.5rem; border:1px solid #000; justify-content: space-between; padding:0 1.5rem; z-index: 999; }
.headermenu {display:flex;  justify-content: space-around; align-items: center;}
.headermenu a { color: #000; text-decoration: none; font-weight: 500;  flex:1 1 auto; text-align:center; padding:0 2rem; position: relative;  transition: all .5s;}
.headermenu a:hover {color:#eb8ccc;}
.headermenu a span:first-child {display:inline-block; text-transform: uppercase;  }
.headermenu a span:nth-child(2) { width:100%; display:block; opacity: 0; position: absolute; left:0; top:0; z-index: 1;}
.headermenu a:hover span:nth-child(2) {opacity: 1;}
.headermenu a:hover span:first-child {opacity: 0;}
.headermenu a:not(:last-child)::after {content:'|'; display:inline-block; right:0; position: absolute; color:#333;}
.menu-logo { aspect-ratio: 595 / 146; width: 20%; max-width: 200px; padding: .5rem 1rem;}
/*sub menu*/
#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;border-radius: 2rem;}
#navcontrol:checked ~ .nav-control{background-image:url(../images/close.svg)}
#navcontrol ~ .ph-nav{position:fixed;width:100vw;height:100vh;top:0;left:-100vw;background:linear-gradient(135deg, var(--gradient-color)); transition:all cubic-bezier(1,0.34,0,0.86) 1s;z-index:998;overflow:hidden;display:none;}
#navcontrol:checked~.ph-nav{left:0; top:0; padding-top:100px}


/*共用*/
.btn-more {display: block; line-height: 2.5rem;border-radius: 2rem; width: 50%; max-width: 200px; background: #ffffff; color: #333; text-align: center; text-decoration: none; font-weight: bold; margin:0 auto; font-family: sans-serif; font-size: 1.5rem; border: 1px solid #000;box-shadow: 3px 5px #000; transition: all .5s;}
.btn-more:hover {background:#ff95df; box-shadow: 3px 5px transparent; }

.icons{position:absolute;z-index:1}
.icons::after{display:block;content:'';position:absolute;background-repeat:no-repeat;background-position:center center;background-size:contain}

.info {width:95%; max-width: 800px; margin:0 auto; padding:2rem 0 0;}
.info * {text-align: center;}
.info h3 {font-size: clamp(1.4rem, 0.888rem + 2.56vw, 2.2rem);margin:0; font-family: "Libre Bodoni", serif; letter-spacing: 1px; line-height: 1;;}
.info h2 {font-size: clamp(1.5rem, 0.54rem + 4.8vw, 3rem);margin:0; font-weight:500;line-height:1.2;}
.info p {font-size: clamp(1rem, 0.872rem + 0.64vw, 1.2rem);}




/*主視覺*/
.kv { width:100%; position: relative;  aspect-ratio: 16 / 20; overflow: hidden clip; }

.icons-letter { width: 50%; max-width:500px; top:16%; left:50%; aspect-ratio: 5 / 3;  z-index: 3;  transform: translate(-50%, -50%); }
.icon-letter1 { width: 90%; top: 0; right: 0; aspect-ratio: 75 / 14;   z-index:1}
.icon-letter2 { width: 100%; bottom: 0; left: 0; aspect-ratio: 300 / 137;   z-index:0}

.icons-pin {width:100%; top:5%; aspect-ratio: 300 / 53;  background:url(../images/kv-letter-3.svg) no-repeat top center / contain;  z-index: 2;}
.icon-star {width:3%; aspect-ratio: 26 / 25;}
.icon-icon1 {top:0; left:30%; }
.icon-icon2 {width:5%; max-width: 120px; top:65%; left:5%; aspect-ratio: 58 / 75; animation:swing 4s linear alternate forwards infinite}
.icon-icon3 {width:5%; max-width: 90px;  top:30%; left:23%; aspect-ratio: 27 / 50; animation:bounce 2s linear alternate forwards infinite}
.icon-icon4 {width:5%; max-width: 120px;  top:5%; right:12%; aspect-ratio: 37 / 50; animation:swing 3s ease-in-out alternate forwards infinite}
.icon-icon5 {width:3%; max-width: 110px;  top:40%; right:3%; aspect-ratio: 109 / 150; animation:swing 2s cubic-bezier(0.22,0.79,0.57,1)  alternate forwards infinite}
.icon-icon6 {top:90%; left:20%; }
.icon-icon7 {top:5%; left:75%; }
.icon-icon8 {top:60%; left:90%; }
.icons-runners {width:100%; max-width: 1200px; top:46%; left:50%; aspect-ratio: 80 / 51;  transform: translate(-50%, -50%); z-index: 1;}
.icon-street {width:100%; aspect-ratio: 80 / 51; border-radius: 200px; overflow: hidden;   }
.icon-runner1 {width:30%; bottom:15%; left:10%; aspect-ratio: 47 / 50; }
.icon-runner2 {width:32%; bottom:15%; left:27%; aspect-ratio: 71 / 75; }
.icon-runner3 {width:20%; bottom:7%; left:45%;  aspect-ratio: 3 / 5; }
.icon-runner4 {width:21%; bottom:12%; left:65%; aspect-ratio: 97 / 150; }
.icon-join {width:25%; max-width:180px; bottom:40%; aspect-ratio: 1 / 1; z-index: 8;  position: fixed; right:5%; }
.icon-join::after {content: ''; display:block; position: absolute; top:0; left:0; background:url(../images/enjoy-2.svg) no-repeat center center; background-size:80%; aspect-ratio: 1 / 1; width:100%; animation:rotate360 10s linear forwards infinite}
.icon-join::before {content: ''; display:block; position: absolute; top:-15%; right:-5%; background:url(../images/enjoy-3.svg) no-repeat center center / contain; aspect-ratio: 1 / 1; width:35%;animation:shakeY 1.5s linear forwards infinite }
.icon-bg1 {z-index: 0; left:0; bottom: 22%; aspect-ratio: 128 / 35; width:100%;    }
.icon-bg1 img { animation:wavysvg 5s linear  alternate infinite; transform-origin:bottom center;}
.icon-bg3 {z-index: 0; left:0; bottom: 20%; aspect-ratio: 192 / 59; width:100%;    }
.icon-bg3 img { animation:wavysvg1 3s linear alternate infinite; transform-origin:bottom center;}
.icons-info {width:100%; bottom:0%; left:0;  aspect-ratio: 240 / 91; z-index: 5;}
.icon-bg2 { width:100%; left:0; top: 0%;  aspect-ratio: 240 / 91; }
.icon-timeline {width: 50%; max-width:500px; top:60%; left:50%; aspect-ratio: 60 / 17;  transform: translate(-50%, -50%); }

/*MAP*/

.map {position: relative; width:90%; max-width:800px;  margin:0 auto 5rem; z-index: 5; padding-bottom:10%;}
.icons-map {position: relative; margin:5rem auto 2rem; width:90%; max-width:1000px; aspect-ratio: 221 / 150;  }

.icon-map {width: 100%; left:0; top:0; }
.icon-mappin {width:6%; aspect-ratio: 3 / 5; animation:bounce 2s linear forwards infinite}
.icon-map1 {left:18%; top:57%;}
.icon-map2 {left:67%; top:55%; animation-delay: 2.3s;}
.icon-map3 {right:13%; top:30%; animation-delay: 1.7s;}
.icon-icon9 {width:15%; top:40%; left:-8%; aspect-ratio: 43 / 75; transform: rotate(-20deg); animation: tada 5s linear forwards infinite;}
.icon-icon10 {width:22%; top:65%; left:48%; aspect-ratio: 215 / 219; animation:swing 4s linear alternate forwards infinite}
.icon-icon11 {width:8%; top:40%; right:5%; aspect-ratio: 75 / 136;transform: rotate(15deg); animation:swing 3s linear alternate forwards infinite}
.mapdata {list-style: none; padding:0; margin:2rem auto; width:65%; max-width:800px;font-size: clamp(1rem, 0.9273rem + 0.3636vw, 1.2rem);line-height:2;}
.mapdata li b {display:inline-block; border-radius: 50%; color:#fff; background:#f65036; font-size:.8rem; width:1.2rem; height:1.2rem; line-height: 1.2rem; text-align: center; }

/*gifts*/
.gifts {position: relative;}
.gifts::before {content:''; display:block; width:100%; height:80px;background: linear-gradient(to right, var(--gradient-color));background-size: 150% 150%;mask-mode:luminance;-webkit-mask-image: url('../images/bg-4.svg');mask-image: url('../images/bg-4.svg');mask-repeat: no-repeat;mask-size: contain;mask-position: left bottom;position: relative;z-index: 2;
animation: clip-fade calc(3s * (100vw / 1200px)) linear infinite alternate, gradientAnimation 10s ease infinite;}
.gift-headrun { position: absolute; width: 100%; height: 100px; top: 0; left: 0;}
.gift-headrun .icon-runner1 { width:12%; left:35%; z-index: 3; }
.gift-headrun .icon-runner2 { width:25%; left:5%; z-index: 0; bottom:-150%}
.gift-headrun .icon-runner3 { width:8%; left:55%; z-index: 3; }
.gift-headrun .icon-runner4 { width:17%; left:70%; z-index: 0; bottom:-150%}
.gift-box {padding:2rem 0 5rem;background: linear-gradient(to right, var(--gradient-color));background-size: 150% 150%;width:100%;position: relative;animation: gradientAnimation 10s ease infinite;}
.gift-info {width:90%; max-width: 800px;background: url(../images/bg-5.png);
display:flex; flex-wrap: wrap; justify-content: space-between;margin:0 auto; padding:3%; gap:3rem 5%;}
.gift-info > div {position: relative; }
.gift-info > div:nth-child(-n+3) {flex:0 1 30%; border:1px solid #333; position: relative; aspect-ratio: 277 / 350; background:#ffffffa6}
.gift-info > div > div:first-child {position: relative; aspect-ratio: 277 / 350; width: 100%; overflow: hidden;}
.gift-info > div > div:first-child img {position: absolute; object-fit: cover;}
.gift-info > div > div:first-child img:first-child {top: 50%;transform: translateY(-50%);}
.gift-info > div > div:first-child img:nth-child(2) {opacity: 0;animation: carousel 5s forwards steps(1, end) infinite;}

.gift-item {position: absolute; bottom:1%; left:-5%;line-height:1.7;margin:0;}
.gift-item span {background:#000; color:#fff;padding: 0 .2rem; }
.gift-info > div.gift-xl {width:100%; display:flex;justify-content: space-between; gap:2rem; align-items:flex-start; }
.gift-info > div.gift-xl > div:first-child {width:47%; flex:1 0 auto; border:2px solid #000; background:#ffffffa6;}
.gift-info > div.gift-xl > div:last-child { padding:1.5rem;}
.gift-info > div.gift-xl .gift-item {position: unset;}
.gift-info > div.gift-xl > div h3 {font-size:1.4rem; margin:0; }
.gift-box .btn-more {margin-top:-1%}

/*group*/
.group {padding:5% 0;}
.group-box {display:flex; justify-content: space-between; width:90%; max-width:1000px; margin:2rem auto; gap:2rem;position: relative;}
.group-box h2{font-size: clamp(1.3rem, 0.98rem + 1.6vw, 1.8rem);}
.group-box > div {position: relative;}
.group-box > div:first-child {flex:1 0 50%; aspect-ratio: 1 / 1;}
.group-pic {position: absolute !important; border:1px solid #000; border-radius: 50%; overflow: hidden; width:100%;aspect-ratio: 1 / 1;}
.gp-1 {animation: floating 3s ease-in-out alternate infinite;}
.gp-2 {bottom:0; right:0; width:40%;animation: breathe 2s ease-in-out alternate infinite;}
.gp-3 {bottom:0; right:0; width:15%; animation: rotate15 2s ease-in-out alternate infinite;}
.group-type {position: relative; display:flex; gap:1rem; }
.group-type::before {display:block; content:'';  background: linear-gradient(to bottom,  #4ff2f0 0%,#f5ea5a 50%,#ff95df 90%); width:5px; flex:0 1 auto; margin-right:.5rem;}
.group-type > div {flex:1 1 auto}
.group-type h3 {margin:0 auto; font-size: clamp(1.2rem, 1.1333rem + 0.3333vw, 1.3rem);}
.group-type ul {margin: 0; padding:0}
.group-type ul li {display:flex; }
.group-type ul li b {flex:0 1 38%; min-width: 160px;}

/*runners*/

.runners {position: relative; }
.runners::before {content:''; display:block; width:100%; height:80px;background-color: #8ec2d0;mask-mode:luminance;-webkit-mask-image: url('../images/bg-4.svg');mask-image: url('../images/bg-4.svg');mask-repeat: repeat-x;mask-size: contain;mask-position: left bottom;position: relative;
z-index: 2;}
.runners .icons-pin {z-index: 0; top:35%}
.runner-box {border:1px solid #000; position: relative; z-index: 2; border-radius: 2rem; box-shadow: 5px 5px #000;background: linear-gradient(90deg, var(--gradient-color)); width:90%; margin:10% auto 0; max-width: 800px; padding:2rem 4rem; }
.runner-data {display:flex; justify-content: space-between; gap:2rem }
.runner-data > div:first-child {flex:1 0 30%}
.runner-data  h3 {font-size: clamp(1.5rem, 1.308rem + 0.96vw, 1.8rem);}
.runner-data ul {list-style:inside;}
/*sponsor*/

.sponsor-box{width:100%;max-width:800px;margin:0 auto;padding:2rem 0}
.sponsor-main{width:90%;margin:2rem auto}

.sponsor-main h2{margin:4rem auto 2rem;font-size:1.5rem;text-align:center}
.sponsor-main h2::before, .sponsor-main h2::after {content:'—'; display:inline-block; padding:0 1rem}
.sponsor-main div{display:flex;flex-wrap:wrap;gap:2rem 0}
.organizer div {justify-content: center;}
.sponsor-main div a{width:25%}
.organizer div a { width: 50%;}
.partner div a{width:12.5%}

/*footer*/

footer { width:100%; aspect-ratio: 192 / 59;  position: relative; }
.footer-logo {display:flex; flex-direction: column; width:40%; max-width:300px;z-index: 5; text-align: center; bottom:10%; left:50%; transform: translate(-50%, 0%); }
footer .icon-bg1, footer .icon-bg3 {bottom:0}
footer .icons-pin {top:unset; bottom:25%; z-index: 0; aspect-ratio: 960 / 83;  background:url(../images/footer.png) no-repeat top center / contain;}
.icons-footer {width:100%; max-width:1000px; bottom:0; left:50%; transform: translate(-50%, 0%); aspect-ratio: 16 / 5; }
.icon-dep { bottom: 0; left: 10%; aspect-ratio: 160 / 387;  width: 15%; z-index:1}
.icon-tree { bottom: 0; left: 3%; aspect-ratio: 60 / 67;  width: 5%; z-index:0}
.icon-eyeglass { top: 20%; left: 40%; aspect-ratio: 130 / 57;  width: 10%; z-index:0}
.icon-nextarrow { top: 15%; left: 65%; aspect-ratio: 90 / 127;  width: 8%; z-index:0;animation:shakeY 2s linear infinite }
.icon-cookie { top: 10%; left: 80%; aspect-ratio: 18 / 19;  width: 8%; z-index:0}
.icon-path { bottom: 0; right: 5%; aspect-ratio: 125 / 84;  width: 20%; z-index:0}
.icon-coffee { top: 0; right: 3%; aspect-ratio: 50 / 69;  width: 5%; z-index:0; transform: scaleX(-1);}
.icon-flower { bottom: 0; right: 10%; aspect-ratio: 35 / 64;  width: 2%; z-index:0}
.icon-car { top: 10%; right: 10%; aspect-ratio: 122 / 75;  width: 10%; z-index:0}




/*內頁*/
.inpage .icon-join{z-index: 20;top: calc(100vw / 16 * 6); right:max(calc((100vw - 1200px) / 2), 2%); }
.subkv {width:100%; position: relative; margin-top:0%;aspect-ratio: 16 / 9;}

.icons-sub {aspect-ratio: 16 / 9;}
.icons-sub .icon-bg2 {bottom:0; top:unset;z-index: 9;}
.icons-sub .icon-bg1 {bottom:40%}
.icons-sub .icon-runner1{width:10%;bottom:53%;left:40%; z-index: 10;}
.icons-sub .icon-runner2{width:25%;bottom:35%;left:10%;}
.icons-sub .icon-runner3{width:7%;bottom:67%;right:20%;left:unset;z-index: 10;}
.icons-sub .icon-runner4{width:14%;bottom:52%;left:55%;}

.icons-sub .icon-dep{width:5%;bottom:57%;left:12%;}
.icons-sub .icon-eyeglass{width:5%;left:35%;}
.icons-sub .icon-flower{width:2%;left:37%;right:unset;bottom:52%}
.icons-sub .icon-car{width:8%;left:28%;bottom:52%;top:unset;right:unset;z-index: 10;}
.icons-sub .icon-nextarrow{width:5%;top:20%;left:50%;z-index: 10;}
.icons-sub .icon-tree{width:3%;left:67%; bottom:65%;z-index: 10;}
.icons-sub .icon-cookie{width:6%;left:67%; top:3%;}
.icons-sub .icon-path{width:10%;right:10%; bottom:65%;z-index: 10;}


.subpage {width:90%; max-width: 800px; margin:-20% auto 0; z-index: 11; position: relative;     font-family: serif; padding-bottom: 20%;}
.xl-page {max-width: 1000px;}
.sub-title {margin:2rem auto;}
.sub-title h1 {text-align: center; margin:0 auto;}
.sub-title h2 {text-align: center; margin:0 auto;}
.sub-title p {text-align: center; margin:1rem auto; }


.flow {display:flex; width:90%; max-width:500px; flex-direction: column; align-items: center; justify-content: center; margin:0 auto;}
.flow > div {width: 100%;display:flex; gap:1rem; }
.flow > div > div:first-child span { display:block; border-radius: 50%; font-size:1.5rem; background:#e7591f; color:#fff; width: 40px; text-align: center;aspect-ratio: 1 / 1; line-height: 40px;}
.flow > div:not(:last-child) > div:first-child {background:url(../images/dot.png) repeat-y top center;}

.flow-timeline {font-size:1.5rem; background:#000; color:#fff; display:inline-block; padding:0  1rem;line-height: 1.5;}
.flow > div > div:last-child strong{display:inline-block;font-size: clamp(1.25rem, 1.09rem + 0.8vw, 1.5rem);}
.flow > div > div:last-child p{font-size: clamp(1rem, 0.872rem + 0.64vw, 1.2rem); margin:0 auto 2rem}

.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 {border-right:1px solid #000; font-size:1rem; padding-right: 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;}


/*sub gifts*/
.subgift-box {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: stretch;gap: 1px; background: #000;}
.mk-item {text-decoration: none; position: relative; width:calc(100% / 3 - 1px); padding:1.5rem; display:flex;color: #333; flex-direction: column; gap:1rem; align-items: center; background:url(../images/bg.jpg);}
.mk-logo {  position: relative;aspect-ratio: 1 / 1;width: 100%;overflow: hidden;}
.mk-logo img {position:absolute;}
.mk-logo img:first-child {top: 50%;transform: translateY(-50%);}
.mk-logo img:nth-child(2) {opacity: 0;animation: carousel 5s forwards steps(1, end) infinite;}
.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);}



/* animation */

@keyframes rotate360 {
0%{transform:rotate(0deg)  }
100%{transform:rotate(360deg) }
}
@keyframes rotate15 {
0%{transform:rotate(-15deg)  }
100%{transform:rotate(15deg) }
}
@keyframes wavysvg {
0%{transform: matrix(1, 0, 0, 1, 0, 0)}
100%{transform: matrix(1, 0, 0, 1.2, 0, 0)}
}
@keyframes wavysvg1 {
0%{transform: matrix(1, 0, 0, 1, 0, 0)}
100%{transform: matrix(1, 0, 0, 1.1, 0, 0)}
}
@keyframes lineskew {
0%{transform:skewY(-4deg)}
100%{transform:skewY(4deg)}
}
@keyframes clip-fade {
100% {mask-position: right bottom;}
}
@keyframes gradientAnimation {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
@keyframes carousel {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
@keyframes floating {
0% {transform: translateY(0px);}
50% {transform: translateY(-15px);}
100% {transform: translateY(0px);}
}
@keyframes breathe {
0% {transform: scale(1);}
100% {transform: scale(1.1);}
}

/*大尺寸螢幕*/
@media screen and (min-width : 1400px)  {
.kv {aspect-ratio: 16 / 14;}
}

/*PAD ~ */
@media screen and (max-width : 819px)  {

header {position: fixed; width:90%; left:5%; top:0; z-index: 999;}
.pc-nav {padding:0; background:#fff; position: relative;   }
.headermenu{display:none}
#navcontrol ~ .ph-nav {display: flex;flex-direction:column;justify-content:space-between;}
.nav-control{display:block; top:1px; left:1px; position: absolute;}
.menu-logo{position:static;width:100%;height:50px;z-index:999;display:flex;justify-content:center;align-items:center;max-width:none; padding:0}
.menu-logo img{height:30px;width:auto}
.menu-base{display:flex; flex-direction:column;font-size:clamp(1.1rem,0.524rem + 2.88vw,2rem);text-align:center;line-height:1.2; gap:2rem; justify-content: center; align-items: center; flex:1 0 auto}
.menu-base a { text-decoration: none; font-family:monospace; color:#333;  font-weight:bold; text-transform: uppercase; }
.menu-base a span{display:block;}
.menu-title{height:10%;margin:1rem auto 0}

.followus{display:flex;flex-direction:column; justify-content: end; align-items:center; background: url(../images/bg-3.png) no-repeat top left / cover; height:40vh;padding: 0 0 10%;}
.followus > h3{color:#000;flex:0 1 auto;font-size: clamp(1.3rem, 0.852rem + 2.24vw, 2rem);margin:0 auto}
.followus > div {display:flex; align-items: center; justify-content: center;}
.followus > p { margin:0 auto;}
.followus a {display:inline-block;}
.followus img{width: max(calc(100vw / 10), 50px); aspect-ratio: 1 / 1;}



.kv { aspect-ratio: 3 / 5; margin-top:20%;  }
.icons-letter {width:60%}
.icons-runners {aspect-ratio: 3 / 4; top:50%}
.icon-street {aspect-ratio: 3 / 4; width:90%; left:5%; border-radius: 20%}
.icon-street img {object-fit: cover;}
.icon-runner1 {width:68%; left:-20%;}
.icon-runner2 {width:70%; left:8%;}
.icon-runner3 {width:50%; left:28%;}
.icon-runner4 {width:50%; left:60%;}
.icons-info {bottom:0%; top:unset;}
.icon-bg1 {bottom:15%}
.icon-join {bottom:15%; top:unset;}
.icon-timeline {width:65%; bottom:0%; top:unset; transform: translate(-50%, 0%);}

.mapdata {width:90%}
.mapdata li {display:flex; flex-wrap: wrap; align-items: center; border-bottom: 1px dotted #ccc; gap:0 1rem; padding: .5rem 0;}
.mapdata li span {width:100%; }

.group-box {flex-direction: column; width:80%}
.group-box > div:first-child {flex:1 0 40%}
.group-type {gap:0}
.group-type > div:last-child {padding-left:.5rem}

.gift-info {flex-direction: column;}
.gift-info > div {width: 100%; flex:unset}
.gift-headrun .icon-runner1 {width:25%; left:30%;}
.gift-headrun .icon-runner2 {width:35%; top:-40%; left:0; bottom:unset}
.gift-headrun .icon-runner3 {width:17%; left:50%;}
.gift-headrun .icon-runner4 {width:30%; top:-25%; bottom:unset}
.gift-info > div.gift-xl {flex-direction: column; gap:0}
.gift-info > div.gift-xl > div {padding:2rem 1rem}
.gift-info > div.gift-xl > div:first-child {padding:0; width:100%}

.runner-data {flex-direction: column; gap:0; align-items: center;}
.runner-data > div {width:80%}
.runner-data ul {list-style:disc;}
.runner-box {padding:2rem 1rem}
.gp-3 {width:30%; bottom:-13%}


.footer-logo {width:55%}
.footer-logo small {font-size: clamp(0.5rem, 0.26rem + 1.2vw, 0.875rem);}
.icon-dep {left:0}
.icon-tree {left:15%}
.icon-eyeglass {top:0}
.icon-nextarrow {top:-13%}
.icon-path {right:0}
.icon-flower {right:5%}

/*內頁*/
.inpage .icon-join{ top: calc(100vw / 37 * 19); }
.subpage {margin-top:-10%}
.subpage h1 span {display:block;}
.subkv{margin-top:25%}
.icons-sub .icon-join {width:25%; bottom:10%}

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

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


}