@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600&display=swap");
@import url("https://use.typekit.net/ykd0msj.css");
html,
body,
div,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
audio,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
mark,
menu,
meter,
nav,
output,
progress,
section,
summary,
time,
video {
  border: 0;
  outline: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

body {
  line-height: 1;
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
blockquote {
  display: block;
}

nav ul {
  list-style: none;
}

ol {
  list-style: none;
}

ul {
  list-style: none;
}

ul ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

mark {
  background: none;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input[type=submit],
input[type=button],
button {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: middle;
}

input,
select,
a img {
  vertical-align: middle;
}

:root {
  --remBasicSize: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

body,
html {
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  background: #ddd;
  background-color: #fff;
  color: #000;
  font-size: 16px;
}

input,
select,
textarea,
button,
option,
li {
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  color: #212121;
}

a,
button {
  text-decoration: none;
  transition: all ease-in-out 0.2s;
  cursor: pointer;
}
a:focus, a:hover, a:active,
button:focus,
button:hover,
button:active {
  outline: none;
  text-decoration: none;
}

::-webkit-scrollbar {
  display: none;
}

.ctr_both {
  clear: both;
}

.m_auto {
  display: block;
  margin: 0 auto;
}

.flex_r {
  display: flex;
  flex-direction: row;
}

.flex_c {
  display: flex;
  flex-direction: column;
}

body[data-aos-duration="50"] [data-aos], [data-aos][data-aos][data-aos-duration="50"] {
  transition-duration: 50ms;
}
body[data-aos-delay="50"] [data-aos], [data-aos][data-aos][data-aos-delay="50"] {
  transition-delay: 0;
}
body[data-aos-delay="50"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="50"].aos-animate {
  transition-delay: 50ms;
}
body[data-aos-duration="100"] [data-aos], [data-aos][data-aos][data-aos-duration="100"] {
  transition-duration: 100ms;
}
body[data-aos-delay="100"] [data-aos], [data-aos][data-aos][data-aos-delay="100"] {
  transition-delay: 0;
}
body[data-aos-delay="100"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="100"].aos-animate {
  transition-delay: 100ms;
}
body[data-aos-duration="150"] [data-aos], [data-aos][data-aos][data-aos-duration="150"] {
  transition-duration: 150ms;
}
body[data-aos-delay="150"] [data-aos], [data-aos][data-aos][data-aos-delay="150"] {
  transition-delay: 0;
}
body[data-aos-delay="150"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="150"].aos-animate {
  transition-delay: 150ms;
}
body[data-aos-duration="200"] [data-aos], [data-aos][data-aos][data-aos-duration="200"] {
  transition-duration: 200ms;
}
body[data-aos-delay="200"] [data-aos], [data-aos][data-aos][data-aos-delay="200"] {
  transition-delay: 0;
}
body[data-aos-delay="200"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="200"].aos-animate {
  transition-delay: 200ms;
}
body[data-aos-duration="250"] [data-aos], [data-aos][data-aos][data-aos-duration="250"] {
  transition-duration: 250ms;
}
body[data-aos-delay="250"] [data-aos], [data-aos][data-aos][data-aos-delay="250"] {
  transition-delay: 0;
}
body[data-aos-delay="250"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="250"].aos-animate {
  transition-delay: 250ms;
}
body[data-aos-duration="300"] [data-aos], [data-aos][data-aos][data-aos-duration="300"] {
  transition-duration: 300ms;
}
body[data-aos-delay="300"] [data-aos], [data-aos][data-aos][data-aos-delay="300"] {
  transition-delay: 0;
}
body[data-aos-delay="300"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="300"].aos-animate {
  transition-delay: 300ms;
}
body[data-aos-duration="350"] [data-aos], [data-aos][data-aos][data-aos-duration="350"] {
  transition-duration: 350ms;
}
body[data-aos-delay="350"] [data-aos], [data-aos][data-aos][data-aos-delay="350"] {
  transition-delay: 0;
}
body[data-aos-delay="350"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="350"].aos-animate {
  transition-delay: 350ms;
}
body[data-aos-duration="400"] [data-aos], [data-aos][data-aos][data-aos-duration="400"] {
  transition-duration: 400ms;
}
body[data-aos-delay="400"] [data-aos], [data-aos][data-aos][data-aos-delay="400"] {
  transition-delay: 0;
}
body[data-aos-delay="400"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="400"].aos-animate {
  transition-delay: 400ms;
}
body[data-aos-duration="450"] [data-aos], [data-aos][data-aos][data-aos-duration="450"] {
  transition-duration: 450ms;
}
body[data-aos-delay="450"] [data-aos], [data-aos][data-aos][data-aos-delay="450"] {
  transition-delay: 0;
}
body[data-aos-delay="450"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="450"].aos-animate {
  transition-delay: 450ms;
}
body[data-aos-duration="500"] [data-aos], [data-aos][data-aos][data-aos-duration="500"] {
  transition-duration: 500ms;
}
body[data-aos-delay="500"] [data-aos], [data-aos][data-aos][data-aos-delay="500"] {
  transition-delay: 0;
}
body[data-aos-delay="500"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="500"].aos-animate {
  transition-delay: 500ms;
}
body[data-aos-duration="550"] [data-aos], [data-aos][data-aos][data-aos-duration="550"] {
  transition-duration: 550ms;
}
body[data-aos-delay="550"] [data-aos], [data-aos][data-aos][data-aos-delay="550"] {
  transition-delay: 0;
}
body[data-aos-delay="550"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="550"].aos-animate {
  transition-delay: 550ms;
}
body[data-aos-duration="600"] [data-aos], [data-aos][data-aos][data-aos-duration="600"] {
  transition-duration: 600ms;
}
body[data-aos-delay="600"] [data-aos], [data-aos][data-aos][data-aos-delay="600"] {
  transition-delay: 0;
}
body[data-aos-delay="600"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="600"].aos-animate {
  transition-delay: 600ms;
}
body[data-aos-duration="650"] [data-aos], [data-aos][data-aos][data-aos-duration="650"] {
  transition-duration: 650ms;
}
body[data-aos-delay="650"] [data-aos], [data-aos][data-aos][data-aos-delay="650"] {
  transition-delay: 0;
}
body[data-aos-delay="650"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="650"].aos-animate {
  transition-delay: 650ms;
}
body[data-aos-duration="700"] [data-aos], [data-aos][data-aos][data-aos-duration="700"] {
  transition-duration: 700ms;
}
body[data-aos-delay="700"] [data-aos], [data-aos][data-aos][data-aos-delay="700"] {
  transition-delay: 0;
}
body[data-aos-delay="700"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="700"].aos-animate {
  transition-delay: 700ms;
}
body[data-aos-duration="750"] [data-aos], [data-aos][data-aos][data-aos-duration="750"] {
  transition-duration: 750ms;
}
body[data-aos-delay="750"] [data-aos], [data-aos][data-aos][data-aos-delay="750"] {
  transition-delay: 0;
}
body[data-aos-delay="750"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="750"].aos-animate {
  transition-delay: 750ms;
}
body[data-aos-duration="800"] [data-aos], [data-aos][data-aos][data-aos-duration="800"] {
  transition-duration: 800ms;
}
body[data-aos-delay="800"] [data-aos], [data-aos][data-aos][data-aos-delay="800"] {
  transition-delay: 0;
}
body[data-aos-delay="800"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="800"].aos-animate {
  transition-delay: 800ms;
}
body[data-aos-duration="850"] [data-aos], [data-aos][data-aos][data-aos-duration="850"] {
  transition-duration: 850ms;
}
body[data-aos-delay="850"] [data-aos], [data-aos][data-aos][data-aos-delay="850"] {
  transition-delay: 0;
}
body[data-aos-delay="850"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="850"].aos-animate {
  transition-delay: 850ms;
}
body[data-aos-duration="900"] [data-aos], [data-aos][data-aos][data-aos-duration="900"] {
  transition-duration: 900ms;
}
body[data-aos-delay="900"] [data-aos], [data-aos][data-aos][data-aos-delay="900"] {
  transition-delay: 0;
}
body[data-aos-delay="900"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="900"].aos-animate {
  transition-delay: 900ms;
}
body[data-aos-duration="950"] [data-aos], [data-aos][data-aos][data-aos-duration="950"] {
  transition-duration: 950ms;
}
body[data-aos-delay="950"] [data-aos], [data-aos][data-aos][data-aos-delay="950"] {
  transition-delay: 0;
}
body[data-aos-delay="950"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="950"].aos-animate {
  transition-delay: 950ms;
}
body[data-aos-duration="1000"] [data-aos], [data-aos][data-aos][data-aos-duration="1000"] {
  transition-duration: 1000ms;
}
body[data-aos-delay="1000"] [data-aos], [data-aos][data-aos][data-aos-delay="1000"] {
  transition-delay: 0;
}
body[data-aos-delay="1000"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1000"].aos-animate {
  transition-delay: 1000ms;
}
body[data-aos-duration="1050"] [data-aos], [data-aos][data-aos][data-aos-duration="1050"] {
  transition-duration: 1050ms;
}
body[data-aos-delay="1050"] [data-aos], [data-aos][data-aos][data-aos-delay="1050"] {
  transition-delay: 0;
}
body[data-aos-delay="1050"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1050"].aos-animate {
  transition-delay: 1050ms;
}
body[data-aos-duration="1100"] [data-aos], [data-aos][data-aos][data-aos-duration="1100"] {
  transition-duration: 1100ms;
}
body[data-aos-delay="1100"] [data-aos], [data-aos][data-aos][data-aos-delay="1100"] {
  transition-delay: 0;
}
body[data-aos-delay="1100"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1100"].aos-animate {
  transition-delay: 1100ms;
}
body[data-aos-duration="1150"] [data-aos], [data-aos][data-aos][data-aos-duration="1150"] {
  transition-duration: 1150ms;
}
body[data-aos-delay="1150"] [data-aos], [data-aos][data-aos][data-aos-delay="1150"] {
  transition-delay: 0;
}
body[data-aos-delay="1150"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1150"].aos-animate {
  transition-delay: 1150ms;
}
body[data-aos-duration="1200"] [data-aos], [data-aos][data-aos][data-aos-duration="1200"] {
  transition-duration: 1200ms;
}
body[data-aos-delay="1200"] [data-aos], [data-aos][data-aos][data-aos-delay="1200"] {
  transition-delay: 0;
}
body[data-aos-delay="1200"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1200"].aos-animate {
  transition-delay: 1200ms;
}
body[data-aos-duration="1250"] [data-aos], [data-aos][data-aos][data-aos-duration="1250"] {
  transition-duration: 1250ms;
}
body[data-aos-delay="1250"] [data-aos], [data-aos][data-aos][data-aos-delay="1250"] {
  transition-delay: 0;
}
body[data-aos-delay="1250"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1250"].aos-animate {
  transition-delay: 1250ms;
}
body[data-aos-duration="1300"] [data-aos], [data-aos][data-aos][data-aos-duration="1300"] {
  transition-duration: 1300ms;
}
body[data-aos-delay="1300"] [data-aos], [data-aos][data-aos][data-aos-delay="1300"] {
  transition-delay: 0;
}
body[data-aos-delay="1300"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1300"].aos-animate {
  transition-delay: 1300ms;
}
body[data-aos-duration="1350"] [data-aos], [data-aos][data-aos][data-aos-duration="1350"] {
  transition-duration: 1350ms;
}
body[data-aos-delay="1350"] [data-aos], [data-aos][data-aos][data-aos-delay="1350"] {
  transition-delay: 0;
}
body[data-aos-delay="1350"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1350"].aos-animate {
  transition-delay: 1350ms;
}
body[data-aos-duration="1400"] [data-aos], [data-aos][data-aos][data-aos-duration="1400"] {
  transition-duration: 1400ms;
}
body[data-aos-delay="1400"] [data-aos], [data-aos][data-aos][data-aos-delay="1400"] {
  transition-delay: 0;
}
body[data-aos-delay="1400"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1400"].aos-animate {
  transition-delay: 1400ms;
}
body[data-aos-duration="1450"] [data-aos], [data-aos][data-aos][data-aos-duration="1450"] {
  transition-duration: 1450ms;
}
body[data-aos-delay="1450"] [data-aos], [data-aos][data-aos][data-aos-delay="1450"] {
  transition-delay: 0;
}
body[data-aos-delay="1450"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1450"].aos-animate {
  transition-delay: 1450ms;
}
body[data-aos-duration="1500"] [data-aos], [data-aos][data-aos][data-aos-duration="1500"] {
  transition-duration: 1500ms;
}
body[data-aos-delay="1500"] [data-aos], [data-aos][data-aos][data-aos-delay="1500"] {
  transition-delay: 0;
}
body[data-aos-delay="1500"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1500"].aos-animate {
  transition-delay: 1500ms;
}
body[data-aos-duration="1550"] [data-aos], [data-aos][data-aos][data-aos-duration="1550"] {
  transition-duration: 1550ms;
}
body[data-aos-delay="1550"] [data-aos], [data-aos][data-aos][data-aos-delay="1550"] {
  transition-delay: 0;
}
body[data-aos-delay="1550"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1550"].aos-animate {
  transition-delay: 1550ms;
}
body[data-aos-duration="1600"] [data-aos], [data-aos][data-aos][data-aos-duration="1600"] {
  transition-duration: 1600ms;
}
body[data-aos-delay="1600"] [data-aos], [data-aos][data-aos][data-aos-delay="1600"] {
  transition-delay: 0;
}
body[data-aos-delay="1600"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1600"].aos-animate {
  transition-delay: 1600ms;
}
body[data-aos-duration="1650"] [data-aos], [data-aos][data-aos][data-aos-duration="1650"] {
  transition-duration: 1650ms;
}
body[data-aos-delay="1650"] [data-aos], [data-aos][data-aos][data-aos-delay="1650"] {
  transition-delay: 0;
}
body[data-aos-delay="1650"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1650"].aos-animate {
  transition-delay: 1650ms;
}
body[data-aos-duration="1700"] [data-aos], [data-aos][data-aos][data-aos-duration="1700"] {
  transition-duration: 1700ms;
}
body[data-aos-delay="1700"] [data-aos], [data-aos][data-aos][data-aos-delay="1700"] {
  transition-delay: 0;
}
body[data-aos-delay="1700"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1700"].aos-animate {
  transition-delay: 1700ms;
}
body[data-aos-duration="1750"] [data-aos], [data-aos][data-aos][data-aos-duration="1750"] {
  transition-duration: 1750ms;
}
body[data-aos-delay="1750"] [data-aos], [data-aos][data-aos][data-aos-delay="1750"] {
  transition-delay: 0;
}
body[data-aos-delay="1750"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1750"].aos-animate {
  transition-delay: 1750ms;
}
body[data-aos-duration="1800"] [data-aos], [data-aos][data-aos][data-aos-duration="1800"] {
  transition-duration: 1800ms;
}
body[data-aos-delay="1800"] [data-aos], [data-aos][data-aos][data-aos-delay="1800"] {
  transition-delay: 0;
}
body[data-aos-delay="1800"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1800"].aos-animate {
  transition-delay: 1800ms;
}
body[data-aos-duration="1850"] [data-aos], [data-aos][data-aos][data-aos-duration="1850"] {
  transition-duration: 1850ms;
}
body[data-aos-delay="1850"] [data-aos], [data-aos][data-aos][data-aos-delay="1850"] {
  transition-delay: 0;
}
body[data-aos-delay="1850"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1850"].aos-animate {
  transition-delay: 1850ms;
}
body[data-aos-duration="1900"] [data-aos], [data-aos][data-aos][data-aos-duration="1900"] {
  transition-duration: 1900ms;
}
body[data-aos-delay="1900"] [data-aos], [data-aos][data-aos][data-aos-delay="1900"] {
  transition-delay: 0;
}
body[data-aos-delay="1900"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1900"].aos-animate {
  transition-delay: 1900ms;
}
body[data-aos-duration="1950"] [data-aos], [data-aos][data-aos][data-aos-duration="1950"] {
  transition-duration: 1950ms;
}
body[data-aos-delay="1950"] [data-aos], [data-aos][data-aos][data-aos-delay="1950"] {
  transition-delay: 0;
}
body[data-aos-delay="1950"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1950"].aos-animate {
  transition-delay: 1950ms;
}
body[data-aos-duration="2000"] [data-aos], [data-aos][data-aos][data-aos-duration="2000"] {
  transition-duration: 2000ms;
}
body[data-aos-delay="2000"] [data-aos], [data-aos][data-aos][data-aos-delay="2000"] {
  transition-delay: 0;
}
body[data-aos-delay="2000"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2000"].aos-animate {
  transition-delay: 2000ms;
}
body[data-aos-duration="2050"] [data-aos], [data-aos][data-aos][data-aos-duration="2050"] {
  transition-duration: 2050ms;
}
body[data-aos-delay="2050"] [data-aos], [data-aos][data-aos][data-aos-delay="2050"] {
  transition-delay: 0;
}
body[data-aos-delay="2050"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2050"].aos-animate {
  transition-delay: 2050ms;
}
body[data-aos-duration="2100"] [data-aos], [data-aos][data-aos][data-aos-duration="2100"] {
  transition-duration: 2100ms;
}
body[data-aos-delay="2100"] [data-aos], [data-aos][data-aos][data-aos-delay="2100"] {
  transition-delay: 0;
}
body[data-aos-delay="2100"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2100"].aos-animate {
  transition-delay: 2100ms;
}
body[data-aos-duration="2150"] [data-aos], [data-aos][data-aos][data-aos-duration="2150"] {
  transition-duration: 2150ms;
}
body[data-aos-delay="2150"] [data-aos], [data-aos][data-aos][data-aos-delay="2150"] {
  transition-delay: 0;
}
body[data-aos-delay="2150"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2150"].aos-animate {
  transition-delay: 2150ms;
}
body[data-aos-duration="2200"] [data-aos], [data-aos][data-aos][data-aos-duration="2200"] {
  transition-duration: 2200ms;
}
body[data-aos-delay="2200"] [data-aos], [data-aos][data-aos][data-aos-delay="2200"] {
  transition-delay: 0;
}
body[data-aos-delay="2200"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2200"].aos-animate {
  transition-delay: 2200ms;
}
body[data-aos-duration="2250"] [data-aos], [data-aos][data-aos][data-aos-duration="2250"] {
  transition-duration: 2250ms;
}
body[data-aos-delay="2250"] [data-aos], [data-aos][data-aos][data-aos-delay="2250"] {
  transition-delay: 0;
}
body[data-aos-delay="2250"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2250"].aos-animate {
  transition-delay: 2250ms;
}
body[data-aos-duration="2300"] [data-aos], [data-aos][data-aos][data-aos-duration="2300"] {
  transition-duration: 2300ms;
}
body[data-aos-delay="2300"] [data-aos], [data-aos][data-aos][data-aos-delay="2300"] {
  transition-delay: 0;
}
body[data-aos-delay="2300"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2300"].aos-animate {
  transition-delay: 2300ms;
}
body[data-aos-duration="2350"] [data-aos], [data-aos][data-aos][data-aos-duration="2350"] {
  transition-duration: 2350ms;
}
body[data-aos-delay="2350"] [data-aos], [data-aos][data-aos][data-aos-delay="2350"] {
  transition-delay: 0;
}
body[data-aos-delay="2350"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2350"].aos-animate {
  transition-delay: 2350ms;
}
body[data-aos-duration="2400"] [data-aos], [data-aos][data-aos][data-aos-duration="2400"] {
  transition-duration: 2400ms;
}
body[data-aos-delay="2400"] [data-aos], [data-aos][data-aos][data-aos-delay="2400"] {
  transition-delay: 0;
}
body[data-aos-delay="2400"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2400"].aos-animate {
  transition-delay: 2400ms;
}
body[data-aos-duration="2450"] [data-aos], [data-aos][data-aos][data-aos-duration="2450"] {
  transition-duration: 2450ms;
}
body[data-aos-delay="2450"] [data-aos], [data-aos][data-aos][data-aos-delay="2450"] {
  transition-delay: 0;
}
body[data-aos-delay="2450"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2450"].aos-animate {
  transition-delay: 2450ms;
}
body[data-aos-duration="2500"] [data-aos], [data-aos][data-aos][data-aos-duration="2500"] {
  transition-duration: 2500ms;
}
body[data-aos-delay="2500"] [data-aos], [data-aos][data-aos][data-aos-delay="2500"] {
  transition-delay: 0;
}
body[data-aos-delay="2500"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2500"].aos-animate {
  transition-delay: 2500ms;
}
body[data-aos-duration="2550"] [data-aos], [data-aos][data-aos][data-aos-duration="2550"] {
  transition-duration: 2550ms;
}
body[data-aos-delay="2550"] [data-aos], [data-aos][data-aos][data-aos-delay="2550"] {
  transition-delay: 0;
}
body[data-aos-delay="2550"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2550"].aos-animate {
  transition-delay: 2550ms;
}
body[data-aos-duration="2600"] [data-aos], [data-aos][data-aos][data-aos-duration="2600"] {
  transition-duration: 2600ms;
}
body[data-aos-delay="2600"] [data-aos], [data-aos][data-aos][data-aos-delay="2600"] {
  transition-delay: 0;
}
body[data-aos-delay="2600"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2600"].aos-animate {
  transition-delay: 2600ms;
}
body[data-aos-duration="2650"] [data-aos], [data-aos][data-aos][data-aos-duration="2650"] {
  transition-duration: 2650ms;
}
body[data-aos-delay="2650"] [data-aos], [data-aos][data-aos][data-aos-delay="2650"] {
  transition-delay: 0;
}
body[data-aos-delay="2650"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2650"].aos-animate {
  transition-delay: 2650ms;
}
body[data-aos-duration="2700"] [data-aos], [data-aos][data-aos][data-aos-duration="2700"] {
  transition-duration: 2700ms;
}
body[data-aos-delay="2700"] [data-aos], [data-aos][data-aos][data-aos-delay="2700"] {
  transition-delay: 0;
}
body[data-aos-delay="2700"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2700"].aos-animate {
  transition-delay: 2700ms;
}
body[data-aos-duration="2750"] [data-aos], [data-aos][data-aos][data-aos-duration="2750"] {
  transition-duration: 2750ms;
}
body[data-aos-delay="2750"] [data-aos], [data-aos][data-aos][data-aos-delay="2750"] {
  transition-delay: 0;
}
body[data-aos-delay="2750"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2750"].aos-animate {
  transition-delay: 2750ms;
}
body[data-aos-duration="2800"] [data-aos], [data-aos][data-aos][data-aos-duration="2800"] {
  transition-duration: 2800ms;
}
body[data-aos-delay="2800"] [data-aos], [data-aos][data-aos][data-aos-delay="2800"] {
  transition-delay: 0;
}
body[data-aos-delay="2800"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2800"].aos-animate {
  transition-delay: 2800ms;
}
body[data-aos-duration="2850"] [data-aos], [data-aos][data-aos][data-aos-duration="2850"] {
  transition-duration: 2850ms;
}
body[data-aos-delay="2850"] [data-aos], [data-aos][data-aos][data-aos-delay="2850"] {
  transition-delay: 0;
}
body[data-aos-delay="2850"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2850"].aos-animate {
  transition-delay: 2850ms;
}
body[data-aos-duration="2900"] [data-aos], [data-aos][data-aos][data-aos-duration="2900"] {
  transition-duration: 2900ms;
}
body[data-aos-delay="2900"] [data-aos], [data-aos][data-aos][data-aos-delay="2900"] {
  transition-delay: 0;
}
body[data-aos-delay="2900"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2900"].aos-animate {
  transition-delay: 2900ms;
}
body[data-aos-duration="2950"] [data-aos], [data-aos][data-aos][data-aos-duration="2950"] {
  transition-duration: 2950ms;
}
body[data-aos-delay="2950"] [data-aos], [data-aos][data-aos][data-aos-delay="2950"] {
  transition-delay: 0;
}
body[data-aos-delay="2950"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2950"].aos-animate {
  transition-delay: 2950ms;
}
body[data-aos-duration="3000"] [data-aos], [data-aos][data-aos][data-aos-duration="3000"] {
  transition-duration: 3000ms;
}
body[data-aos-delay="3000"] [data-aos], [data-aos][data-aos][data-aos-delay="3000"] {
  transition-delay: 0;
}
body[data-aos-delay="3000"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="3000"].aos-animate {
  transition-delay: 3000ms;
}

body[data-aos-easing=linear] [data-aos], [data-aos][data-aos][data-aos-easing=linear] {
  transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
body[data-aos-easing=ease] [data-aos], [data-aos][data-aos][data-aos-easing=ease] {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
body[data-aos-easing=ease-in] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in] {
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}
body[data-aos-easing=ease-out] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out] {
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
body[data-aos-easing=ease-in-out] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out] {
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
body[data-aos-easing=ease-in-back] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-back] {
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
body[data-aos-easing=ease-out-back] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-back] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body[data-aos-easing=ease-in-out-back] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-back] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body[data-aos-easing=ease-in-sine] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-sine] {
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}
body[data-aos-easing=ease-out-sine] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-sine] {
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
body[data-aos-easing=ease-in-out-sine] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-sine] {
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
body[data-aos-easing=ease-in-quad] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-quad] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
body[data-aos-easing=ease-out-quad] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-quad] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body[data-aos-easing=ease-in-out-quad] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-quad] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body[data-aos-easing=ease-in-cubic] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-cubic] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
body[data-aos-easing=ease-out-cubic] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-cubic] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body[data-aos-easing=ease-in-out-cubic] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-cubic] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body[data-aos-easing=ease-in-quart] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-quart] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
body[data-aos-easing=ease-out-quart] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-quart] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body[data-aos-easing=ease-in-out-quart] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-quart] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/**
 * Fade animations:
 * fade
 * fade-up, fade-down, fade-left, fade-right
 * fade-up-right, fade-up-left, fade-down-right, fade-down-left
 */
[data-aos^=fade][data-aos^=fade] {
  opacity: 0;
  transition-property: opacity, transform;
}
[data-aos^=fade][data-aos^=fade].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-aos=fade-up] {
  transform: translate3d(0, 100px, 0);
}

[data-aos=fade-down] {
  transform: translate3d(0, -100px, 0);
}

[data-aos=fade-right] {
  transform: translate3d(-100px, 0, 0);
}

[data-aos=fade-left] {
  transform: translate3d(100px, 0, 0);
}

[data-aos=fade-up-right] {
  transform: translate3d(-100px, 100px, 0);
}

[data-aos=fade-up-left] {
  transform: translate3d(100px, 100px, 0);
}

[data-aos=fade-down-right] {
  transform: translate3d(-100px, -100px, 0);
}

[data-aos=fade-down-left] {
  transform: translate3d(100px, -100px, 0);
}

/**
 * Zoom animations:
 * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
 * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
 */
[data-aos^=zoom][data-aos^=zoom] {
  opacity: 0;
  transition-property: opacity, transform;
}
[data-aos^=zoom][data-aos^=zoom].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

[data-aos=zoom-in] {
  transform: scale(0.6);
}

[data-aos=zoom-in-up] {
  transform: translate3d(0, 100px, 0) scale(0.6);
}

[data-aos=zoom-in-down] {
  transform: translate3d(0, -100px, 0) scale(0.6);
}

[data-aos=zoom-in-right] {
  transform: translate3d(-100px, 0, 0) scale(0.6);
}

[data-aos=zoom-in-left] {
  transform: translate3d(100px, 0, 0) scale(0.6);
}

[data-aos=zoom-out] {
  transform: scale(1.2);
}

[data-aos=zoom-out-up] {
  transform: translate3d(0, 100px, 0) scale(1.2);
}

[data-aos=zoom-out-down] {
  transform: translate3d(0, -100px, 0) scale(1.2);
}

[data-aos=zoom-out-right] {
  transform: translate3d(-100px, 0, 0) scale(1.2);
}

[data-aos=zoom-out-left] {
  transform: translate3d(100px, 0, 0) scale(1.2);
}

/**
 * Slide animations
 */
[data-aos^=slide][data-aos^=slide] {
  transition-property: transform;
}
[data-aos^=slide][data-aos^=slide].aos-animate {
  transform: translate3d(0, 0, 0);
}

[data-aos=slide-up] {
  transform: translate3d(0, 100%, 0);
}

[data-aos=slide-down] {
  transform: translate3d(0, -100%, 0);
}

[data-aos=slide-right] {
  transform: translate3d(-100%, 0, 0);
}

[data-aos=slide-left] {
  transform: translate3d(100%, 0, 0);
}

/**
 * Flip animations:
 * flip-left, flip-right, flip-up, flip-down
 */
[data-aos^=flip][data-aos^=flip] {
  backface-visibility: hidden;
  transition-property: transform;
}

[data-aos=flip-left] {
  transform: perspective(2500px) rotateY(-100deg);
}
[data-aos=flip-left].aos-animate {
  transform: perspective(2500px) rotateY(0);
}

[data-aos=flip-right] {
  transform: perspective(2500px) rotateY(100deg);
}
[data-aos=flip-right].aos-animate {
  transform: perspective(2500px) rotateY(0);
}

[data-aos=flip-up] {
  transform: perspective(2500px) rotateX(-100deg);
}
[data-aos=flip-up].aos-animate {
  transform: perspective(2500px) rotateX(0);
}

[data-aos=flip-down] {
  transform: perspective(2500px) rotateX(100deg);
}
[data-aos=flip-down].aos-animate {
  transform: perspective(2500px) rotateX(0);
}

:root {
  --remBasicSize: 16px;
}

/*思源*/
.wrapper {
  width: 100vw;
  min-width: 1280px;
  min-width: 320px;
  margin: 0 auto;
  width: auto;
  color: #191917;
  background-color: #fff;
}

.container {
  width: 1280px;
}
@media screen and (max-width: 1279px) {
  .container {
    width: 90%;
  }
}
@media screen and (max-width: 750px) {
  .container {
    width: 90%;
  }
}
@media screen and (max-width: 400px) {
  .container {
    width: 90%;
  }
}
.container {
  margin: 0 auto;
  height: auto;
  position: relative;
}

* {
  font-family: "abacaxi-latin-variable", "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  position: relative;
}

.fixed-button-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
.fixed-button-container.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.circle-btn-link {
  text-decoration: none;
  display: block;
}
.circle-btn-link:hover {
  transform: scale(1.1);
}
.circle-btn-link:hover .rotating-text-svg {
  animation-duration: 4s;
}

.circle-btn {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotating-text-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateText 12s linear infinite;
}
.rotating-text-svg text {
  fill: #191917;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
}

.center-circle {
  width: 145px;
  height: 145px;
  background-color: #191917;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.center-circle .center-text {
  color: #ebff7c;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
}
.center-circle .canter-text-class {
  font-weight: 300;
}

@keyframes rotateText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.m-capsule-container {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.m-capsule-container.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0px);
}

.m-capsule-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  width: 60vw;
}
.m-capsule-btn .m-tag {
  color: #ebff7c;
  font-size: 30px;
  font-weight: 900;
  line-height: 0.7;
  margin-bottom: -2px;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}
.m-capsule-btn .m-main-bar {
  background-color: #191917;
  width: 100%;
  height: 40px;
  border-radius: 30px;
  border: 2px solid #ebff7c;
  display: flex;
  justify-content: center;
  align-items: center;
}
.m-capsule-btn .m-main-bar span {
  color: #ebff7c;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* 容器排版 */
.banner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 控制點容器的樣式 */
.custom-dots-container .slick-dots {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px 0; /* 調整與文字的間距 */
  z-index: 99;
}

.custom-dots-container .slick-dots li {
  margin-right: 10px;
}

.custom-dots-container .slick-dots li button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: #555 1px solid;
  cursor: pointer;
  pointer-events: auto !important; /* 強制開啟點擊事件 */
  font-size: 0; /* 隱藏數字 */
}

.custom-dots-container .slick-dots li button:before {
  content: "";
}

/* 選中狀態的顏色 */
.custom-dots-container .slick-dots li.slick-active button {
  background: #555;
}

.flexbox {
  display: flex;
}

.loop {
  animation: loopText 20s linear infinite;
}

@keyframes loopText {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -50% 0;
  }
}
.for_pc {
  display: block;
}
@media screen and (max-width: 750px) {
  .for_pc {
    display: none;
  }
}

.for_m {
  display: none;
}
@media screen and (max-width: 750px) {
  .for_m {
    display: block;
  }
}

.pc_text {
  display: inline;
}
@media screen and (max-width: 750px) {
  .pc_text {
    display: none;
  }
}

.pc_1275_text {
  display: inline;
}
@media screen and (max-width: 1275px) {
  .pc_1275_text {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  .pc_1275_text {
    display: none;
  }
}

.pc_1336_text {
  display: inline;
}
@media screen and (max-width: 1336px) {
  .pc_1336_text {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  .pc_1336_text {
    display: none;
  }
}

.m_text {
  display: none;
}
@media screen and (max-width: 750px) {
  .m_text {
    display: inline;
  }
}

.sec_title {
  color: #fff;
  background-color: #191917;
  padding: 15px 30px;
  font-size: calc(2.5 * var(--remBasicSize));
  letter-spacing: calc(0.125 * var(--remBasicSize));
  font-weight: 700;
}
@media screen and (max-width: 750px) {
  .sec_title {
    font-size: calc(3.125 * var(--remBasicSize));
    letter-spacing: calc(0.125 * var(--remBasicSize));
    padding: 8px 20px;
    margin: 0 auto;
  }
}

.title_zone {
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
}
@media screen and (max-width: 750px) {
  .title_zone {
    gap: 25px;
  }
}
.title_zone p {
  position: relative;
  display: block;
  text-align: center;
  margin: 0 auto;
}
.title_zone .zone_d {
  width: 80%;
  font-size: calc(1.25 * var(--remBasicSize));
  line-height: 2.8rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  color: #191917;
}
@media screen and (max-width: 1024px) {
  .title_zone .zone_d {
    width: 70%;
  }
}
@media screen and (max-width: 750px) {
  .title_zone .zone_d {
    width: 90%;
    text-align: center;
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 1.8rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    margin: 0 auto;
    z-index: 3;
  }
}
.title_zone .sp_w {
  font-size: calc(1.375 * var(--remBasicSize));
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  padding: 12px 10px;
  background-color: #fff;
  color: #ec4899;
  font-weight: 500;
}
@media screen and (max-width: 750px) {
  .title_zone .sp_w {
    width: 90%;
    padding: 5px 5px;
    text-align: center;
    font-size: calc(1.875 * var(--remBasicSize));
    line-height: 1.5rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    margin: 0 auto;
    z-index: 3;
  }
}
.title_zone .sm_sp_w {
  font-size: calc(0.9375 * var(--remBasicSize));
  letter-spacing: calc(0.0375 * var(--remBasicSize));
  padding: 12px 10px;
  text-align: center;
  color: #444;
  font-weight: 600;
}
@media screen and (max-width: 750px) {
  .title_zone .sm_sp_w {
    width: 90%;
    padding: 5px 5px;
    text-align: center;
    font-size: calc(1.4375 * var(--remBasicSize));
    line-height: 1rem;
    letter-spacing: calc(0.0375 * var(--remBasicSize));
    margin: 0 auto;
    z-index: 3;
  }
}

/*-------------------------

        立即報名按鈕

-------------------------*/
/* 固定在視窗上的「立即報名」按鈕：預設隱藏 */
/* 手機 (小於 750px) 時，固定在底部中央 */
/*-------------------------

           kv

-------------------------*/
#kv {
  position: relative;
  width: 100vw;
  height: 100svh;
  text-align: center;
  z-index: 1;
  background-image: url(../images/kv/kv-bg.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
}
#kv::before {
  content: "";
  position: relative;
  display: block;
  width: 100vw;
  height: 100svh;
  text-align: center;
  background-image: url(../images/kv/kv-bg-blur.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  z-index: 1;
  opacity: 1;
  inset: 0;
  transition: opacity 1s ease-in-out;
}
#kv::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100svh;
  text-align: center;
  background-image: url(../images/kv/kv-ribbon.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
#kv .kv_title {
  position: absolute;
  top: 10dvh;
  left: 10vw;
  width: 21vw;
  max-width: 350px;
  z-index: 2;
  opacity: 0;
  transition: all 0.8s ease-in-out;
}
#kv .kv_logo {
  margin-bottom: 120px;
}
#kv.is-loaded::before {
  opacity: 0;
  pointer-events: none;
}
#kv.is-loaded::after {
  clip-path: inset(0 0 0 0);
  transition-delay: 0.5s;
}
#kv.is-loaded .kv_title {
  opacity: 1;
  transition-delay: 1.2s;
}

@media screen and (max-width: 1024px) {
  #kv {
    width: 100%;
    height: 100svh;
    background-image: url(../images/kv/kv-bg-m.jpg);
  }
  #kv::before {
    content: "";
    background-image: url(../images/kv/kv-bg-m-blur.jpg);
    z-index: 1;
    opacity: 1;
    inset: 0;
    transition: opacity 1s ease-in-out;
  }
  #kv::after {
    content: "";
    position: absolute;
    background-image: url(../images/kv/kv-ribbon-m.png);
  }
  #kv .kv_title {
    position: absolute;
    top: 5svh;
    left: 50%;
    transform: translate(-50%, 0);
    transform-origin: center;
    text-align: center;
    width: 20svh;
    max-width: 400px;
    min-width: 150px;
    z-index: 2;
    vertical-align: middle;
  }
  #kv .kv_logo {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 750px) {
  #kv {
    width: 100%;
    height: 100svh;
    background-image: url(../images/kv/kv-bg-m.jpg);
  }
  #kv::before {
    content: "";
    background-image: url(../images/kv/kv-bg-m-blur.jpg);
    z-index: 1;
    opacity: 1;
    inset: 0;
    transition: opacity 1s ease-in-out;
  }
  #kv::after {
    content: "";
    position: absolute;
    background-image: url(../images/kv/kv-ribbon-m.png);
  }
  #kv .kv_title {
    position: absolute;
    top: 5svh;
    left: 50%;
    transform: translate(-50%, 0);
    transform-origin: center;
    text-align: center;
    width: 35svh;
    max-width: 200px;
    z-index: 2;
    vertical-align: middle;
  }
  #kv .kv_logo {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 400px) {
  #kv .kv_title {
    position: absolute;
    text-align: center;
    width: 30svh;
    max-width: 180px;
    min-width: 150px;
    z-index: 2;
    vertical-align: middle;
  }
  #kv .kv_logo {
    margin-bottom: 40px;
  }
}
/*-------------------------

          info

-------------------------*/
#info .about {
  width: 100vw;
  padding-bottom: 100px;
  background-color: #ececec;
}
#info .about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /* 左上角的三角形 */
  border-style: solid;
  border-width: 150px 190px 0 0;
  border-color: #ffffff transparent transparent transparent;
}
#info .about::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  /* 右下角的三角形 */
  border-style: solid;
  border-width: 0 0 150px 190px;
  border-color: transparent transparent #ffffff transparent;
}
#info .about .fitfest_deco_box {
  position: relative;
  z-index: 2;
  padding-top: 50px;
  padding-bottom: 90px;
  overflow-x: hidden;
}
#info .about .fitfest_deco_box .fitfest_deco {
  width: 134rem;
}
#info .about .fitfest_deco_box .fitfest_deco img {
  width: 100%;
}
#info .about .fitfest_deco_box .fitfest_deco .for_pc {
  display: block;
}
#info .about .fitfest_deco_box .fitfest_deco .for_m {
  display: none;
}
#info .container p {
  position: relative;
  display: block;
  width: 60%;
  text-align: center;
  font-size: calc(1.25 * var(--remBasicSize));
  line-height: 2.8rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  margin: 0 auto;
  z-index: 3;
  padding-bottom: 80px;
  color: #191917;
}
#info .container .topic {
  width: 90%;
  margin: 0 auto;
  padding-top: 200px;
}
@media screen and (max-width: 750px) {
  #info .container .topic {
    padding-top: 140px;
  }
}
#info .container .topic .sec_title {
  position: relative;
}
#info .container .topic .sec_title::before {
  content: "";
  position: absolute;
  background: url("../images/info/topic_title.png") no-repeat;
  background-size: contain;
  width: 480px;
  height: 200px;
  top: calc((2.5 * var(--remBasicSize) + 20px) * -1 - 20px);
  left: 0;
}
@media screen and (max-width: 750px) {
  #info .container .topic .sec_title::before {
    left: 50%;
    transform: translateX(-50%);
    width: 190%;
    max-width: 320px;
    top: calc((2.5 * var(--remBasicSize) + 20px) * -1 - 10px);
  }
}
#info .container .topic .map_btn {
  cursor: pointer;
  width: 250px;
  height: 53px;
  background: url("../images/info/MAP_btn.png") no-repeat;
  background-size: contain;
}
@media screen and (max-width: 750px) {
  #info .container .topic .map_btn {
    width: 50%;
  }
}
#info .container .topic .map_btn:hover {
  background: url("../images/info/MAP_btn_h.png") no-repeat;
  width: 250px;
  height: 53px;
  background-size: contain;
  transition: all 0.3s;
}
@media screen and (max-width: 750px) {
  #info .container .topic .map_btn:hover {
    width: 50%;
  }
}
#info .container .topic .top {
  padding-bottom: 200px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: flex-end;
}
@media screen and (max-width: 750px) {
  #info .container .topic .top {
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding-bottom: 160px;
  }
}
#info .topic_bg {
  width: 100%;
  height: 300px;
  background: url("../images/info/bg.jpg") no-repeat center 16%;
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  #info .topic_bg {
    height: 180px;
  }
}
@media screen and (max-width: 750px) {
  #info .topic_bg {
    background: url("../images/info/bg_m.jpg") no-repeat center 15%;
    background-size: cover;
    height: 400px;
  }
}
#info .topic_bg .container {
  display: flex;
}
#info .topic_bg .topic_btn {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -100px;
  width: 100%;
}
@media screen and (max-width: 750px) {
  #info .topic_bg .topic_btn {
    flex-wrap: wrap; /* 關鍵：允許子元素換行 */
    justify-content: center; /* 換行後，讓 02 居中*/
    gap: 25px; /* 間距*/
  }
}
@media screen and (max-width: 750px) {
  #info .topic_bg .topic_btn.for_pc {
    display: none;
  }
}
#info .topic_bg .topic_btn.for_m {
  display: none;
}
@media screen and (max-width: 750px) {
  #info .topic_bg .topic_btn.for_m {
    display: flex;
  }
}
@media screen and (max-width: 1024px) {
  #info .topic_bg .topic_btn_1, #info .topic_bg .topic_btn_2, #info .topic_bg .topic_btn_3 {
    width: 30%;
  }
}
@media screen and (max-width: 750px) {
  #info .topic_bg .topic_btn_1, #info .topic_bg .topic_btn_2, #info .topic_bg .topic_btn_3 {
    width: 45%;
  }
}
@media screen and (max-width: 1024px) {
  #info .topic_bg .topic_btn_1 img, #info .topic_bg .topic_btn_2 img, #info .topic_bg .topic_btn_3 img {
    width: 100%;
  }
}
#info .topic_bg .topic_btn_1::after, #info .topic_bg .topic_btn_2::after, #info .topic_bg .topic_btn_3::after {
  content: "";
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  #info .topic_bg .topic_btn_1::after, #info .topic_bg .topic_btn_2::after, #info .topic_bg .topic_btn_3::after {
    width: 25px;
    height: 25px;
    bottom: 15px;
  }
}
@media screen and (max-width: 750px) {
  #info .topic_bg .topic_btn_1::after, #info .topic_bg .topic_btn_2::after, #info .topic_bg .topic_btn_3::after {
    bottom: 10px;
  }
}
#info .topic_bg .topic_btn_1::after {
  background: url("../images/arrow/info_btn1.svg") no-repeat center center;
}
#info .topic_bg .topic_btn_2::after {
  background: url("../images/arrow/info_btn2.svg") no-repeat center center;
}
#info .topic_bg .topic_btn_3::after {
  background: url("../images/arrow/info_btn3.svg") no-repeat center center;
}

@media screen and (max-width: 1024px) {
  #info .container p {
    width: 80%;
    text-align: center;
    font-size: calc(1.25 * var(--remBasicSize));
    line-height: 2.8rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    margin: 0 auto;
    z-index: 3;
    padding-bottom: 80px;
    color: #191917;
  }
}
@media screen and (max-width: 750px) {
  #info .about {
    padding-bottom: 40px;
  }
  #info .about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    /* 左上角的三角形 */
    border-style: solid;
    border-width: 60px 80px 0 0;
    border-color: #ffffff transparent transparent transparent;
  }
  #info .about::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    /* 右下角的三角形 */
    border-style: solid;
    border-width: 0 0 60px 80px;
    border-color: transparent transparent #ffffff transparent;
  }
  #info .about .fitfest_deco_box {
    position: relative;
    z-index: 2;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  #info .about .fitfest_deco_box .fitfest_deco {
    width: 80rem;
  }
  #info .about .fitfest_deco_box .fitfest_deco .for_pc {
    display: none;
  }
  #info .about .fitfest_deco_box .fitfest_deco .for_m {
    display: block;
  }
  #info .container p {
    width: 80%;
    text-align: justify;
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 2rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    margin: 0 auto;
    z-index: 3;
    padding-bottom: 40px;
    color: #191917;
  }
}
/*-------------------------

        main_video

-------------------------*/
#main_video {
  position: relative;
  text-align: center;
  padding-bottom: 150px;
}
@media screen and (max-width: 750px) {
  #main_video {
    padding-bottom: 40px;
  }
}
#main_video::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  /* 左下角的三角形 */
  border-style: solid;
  border-width: 0 190px 150px 0;
  border-color: transparent transparent #ececec transparent;
}
@media screen and (max-width: 750px) {
  #main_video::after {
    border-width: 0 80px 60px 0;
  }
}
#main_video .container {
  display: flex;
  flex-direction: column; /* 由上往下排 */
  width: 100%;
  gap: 40px;
}
@media screen and (max-width: 750px) {
  #main_video .container {
    gap: 20px;
  }
}
#main_video .container .wellness_con {
  align-self: center;
  width: 80%;
  padding-top: calc(7.5 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #main_video .container .wellness_con {
    width: 95%;
    padding-top: calc(4.0625 * var(--remBasicSize));
  }
}
#main_video .container .wellness {
  margin-left: auto;
  padding-bottom: calc(1.875 * var(--remBasicSize));
  width: 70%;
  max-width: calc(38.75 * var(--remBasicSize));
  z-index: 2;
}
#main_video .container .wellness img {
  width: 100%;
}
#main_video .container .main_videobox {
  align-self: center;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 0 0 4px #ebff7c;
  background-color: #ebff7c;
}
@media screen and (max-width: 750px) {
  #main_video .container .main_videobox {
    border-radius: 16px;
    background-color: #ebff7c;
  }
}
#main_video .container .change {
  align-self: flex-start;
  width: 50%;
  max-width: calc(40.4375 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #main_video .container .change {
    width: 70%;
  }
}
#main_video .container .everything {
  align-self: center;
  width: 70%;
  max-width: calc(50 * var(--remBasicSize));
  padding-bottom: calc(3.125 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #main_video .container .everything {
    width: 87%;
  }
}
#main_video .container .main_videobox iframe,
#main_video .container .main_videobox #ytplayer {
  width: 100%;
  height: 100%;
  z-index: 10;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.01);
}

/*-------------------------

      training_program

-------------------------*/
#training {
  background-color: #ececec;
}
#training .title_zone {
  padding-top: 330px;
}
@media screen and (max-width: 750px) {
  #training .title_zone {
    padding-top: 120px;
  }
}
@media screen and (max-width: 500px) {
  #training .title_zone {
    padding-top: 150px;
  }
}
#training .title_zone .sec_title {
  position: relative;
}
#training .title_zone .sec_title::before {
  content: "";
  position: absolute;
  background: url("../images/training_program/train_title.png") no-repeat;
  background-size: contain;
  width: 800px;
  height: 300px;
  top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 150px);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #training .title_zone .sec_title::before {
    width: 650px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 100px);
  }
}
@media screen and (max-width: 750px) {
  #training .title_zone .sec_title::before {
    width: 190%;
    max-width: 350px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 40px);
  }
}
@media screen and (max-width: 350px) {
  #training .title_zone .sec_title::before {
    width: 190%;
    max-width: 320px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 30px);
  }
}
#training .timer {
  width: 100%;
  background-color: #ebff7c;
  padding-top: 23px;
  padding-bottom: 23px;
  position: relative;
  z-index: 89;
  position: sticky;
  top: 0;
}
@media screen and (max-width: 750px) {
  #training .timer {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
#training .timer img {
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 1024px) {
  #training .timer img {
    width: 90%;
  }
}
@media screen and (max-width: 750px) {
  #training .timer img {
    width: 80%;
  }
}

/*-------------------------

    100vh 課程區塊

-------------------------*/
.coach_section1::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/training_program/train_block1_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  .coach_section1::after {
    height: 80px;
  }
}

.coach_section2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/training_program/train_block2_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  .coach_section2::after {
    height: 80px;
  }
}

.coach_section3::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/training_program/train_block3_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  .coach_section3::after {
    height: 80px;
  }
}

.coach_section4::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/training_program/train_block4_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  .coach_section4::after {
    height: 80px;
  }
}

.coach_section {
  position: sticky;
  width: 100%;
  min-height: calc(100svh - 132px);
  align-items: center; /* 垂直置中 */
  background-color: #ececec;
  top: 132px;
}
@media screen and (max-width: 750px) {
  .coach_section {
    height: 1000px;
    padding-bottom: 100px;
    top: -100px;
  }
}
@media screen and (max-width: 400px) {
  .coach_section {
    height: auto;
    padding-bottom: 200px;
    top: -300px;
  }
}
.coach_section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px; /* 漸層高度 */
  background: linear-gradient(to top, #ccc 10%, #ececec 100%);
  z-index: 0; /* 層級在最下面 */
  pointer-events: none;
}
@media screen and (max-width: 750px) {
  .coach_section::before {
    height: 50px; /* 漸層高度 */
  }
}
.coach_section .class_time {
  position: absolute;
  top: 50px;
  left: 10vw;
  font-size: calc(1.375 * var(--remBasicSize));
  letter-spacing: calc(0.0625 * var(--remBasicSize));
  font-weight: 600;
}
@media screen and (max-width: 750px) {
  .coach_section .class_time {
    font-size: calc(1.75 * var(--remBasicSize));
  }
}
.coach_section .class_time::before {
  content: "";
  position: absolute;
  background-color: #191917;
  top: 50%;
  left: -11.125vw;
  width: 10vw;
  height: 0.078125vw;
  transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
  .coach_section .class_time::before {
    width: 8vw;
  }
}
.coach_section .class_number {
  position: absolute;
  top: 22px;
  right: 0px;
}
@media screen and (max-width: 750px) {
  .coach_section .class_number {
    width: 25vw;
  }
}
.coach_section .container {
  padding-top: 100px;
}
@media screen and (max-width: 750px) {
  .coach_section .container {
    padding-top: 70px;
    flex-direction: column-reverse; /* 關鍵：垂直且反轉順序 */
    padding-bottom: 30px;
  }
}
.coach_section .container .right {
  width: 40%;
  max-width: 430px;
}
@media screen and (max-width: 750px) {
  .coach_section .container .right {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.coach_section .container .right img {
  width: 100%;
}
.coach_section .container .left_w {
  flex-direction: column;
  justify-content: center;
  align-items: left;
  gap: 30px;
}
@media screen and (max-width: 750px) {
  .coach_section .container .left_w {
    align-items: center;
    gap: 20px;
  }
}
.coach_section .container .left_w .girl_only {
  position: relative;
  padding: 10px 15px;
  font-size: calc(1 * var(--remBasicSize));
  letter-spacing: calc(0.0625 * var(--remBasicSize));
  font-weight: 600;
  border-radius: 20px;
  background-color: #ebff7c;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 750px) {
  .coach_section .container .left_w .girl_only {
    font-size: calc(1.875 * var(--remBasicSize));
    padding: 10px 15px;
  }
}
.coach_section .container .left_w .class_title {
  font-size: calc(2.6875 * var(--remBasicSize));
  letter-spacing: calc(0.09375 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  .coach_section .container .left_w .class_title {
    font-size: calc(3.6875 * var(--remBasicSize));
    letter-spacing: calc(0.0625 * var(--remBasicSize));
    text-align: center;
  }
}
.coach_section .container .left_w .class_cn_title {
  color: #191917;
  margin-bottom: 10px;
  font-weight: 300;
}
.coach_section .container .left_w .class_en_title {
  color: #ec4899;
  font-weight: 700;
}
.coach_section .container .left_w .class_p {
  width: 74%;
  min-width: 850px;
  text-align: left;
  font-size: calc(1.125 * var(--remBasicSize));
  line-height: 2rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  margin-bottom: 90px;
}
@media screen and (max-width: 750px) {
  .coach_section .container .left_w .class_p {
    width: 90%;
    min-width: 0px;
    font-size: calc(1.875 * var(--remBasicSize));
    letter-spacing: calc(0.0625 * var(--remBasicSize));
    line-height: 1.8rem;
    text-align: center;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 750px) {
  .coach_section5 {
    height: auto;
    padding-bottom: 100px;
    top: -100px;
  }
}
@media screen and (max-width: 400px) {
  .coach_section5 {
    height: 1000px;
    padding-bottom: 110px;
    top: -100px;
  }
}
.coach_section5::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/training_program/train_block5_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  .coach_section5::after {
    height: 80px;
  }
}

.coach_section2, .coach_section3, .coach_section4, .coach_section5 {
  border-top: #999 1px solid;
}

.class_popup_btn {
  cursor: pointer;
  width: 250px;
  height: 62px;
}
@media screen and (max-width: 750px) {
  .class_popup_btn {
    width: 50%;
  }
}

.class_popup_btn:hover {
  width: 250px;
  height: 62px;
  transition: all 0.3s;
}
@media screen and (max-width: 750px) {
  .class_popup_btn:hover {
    width: 50%;
  }
}

.train_popup_btn {
  background: url("../images/training_program/coach_more.png") no-repeat;
  background-size: contain;
}

.train_popup_btn:hover {
  background: url("../images/training_program/coach_more_p.png") no-repeat;
  background-size: contain;
}

/*-------------------------

    market_title

-------------------------*/
#beautymarket {
  background-color: #fff;
  padding-bottom: 220px;
}
@media screen and (max-width: 750px) {
  #beautymarket {
    padding-bottom: 100px;
  }
}
#beautymarket .title_zone {
  padding-top: 210px;
}
@media screen and (max-width: 750px) {
  #beautymarket .title_zone {
    padding-top: 150px;
  }
}
@media screen and (max-width: 500px) {
  #beautymarket .title_zone {
    padding-top: 100px;
  }
}
#beautymarket .title_zone .sec_title {
  position: relative;
}
#beautymarket .title_zone .sec_title::before {
  content: "";
  position: absolute;
  background: url("../images/market/market_title.png") no-repeat;
  background-size: contain;
  width: 800px;
  height: 300px;
  top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 20px);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #beautymarket .title_zone .sec_title::before {
    width: 650px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1);
  }
}
@media screen and (max-width: 750px) {
  #beautymarket .title_zone .sec_title::before {
    width: 220%;
    max-width: 350px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 + 15px);
  }
}
@media screen and (max-width: 350px) {
  #beautymarket .title_zone .sec_title::before {
    width: 190%;
    max-width: 320px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 30px);
  }
}
@media screen and (max-width: 1220px) {
  #beautymarket .title_zone .zone_d {
    width: 70%;
  }
}
@media screen and (max-width: 750px) {
  #beautymarket .title_zone .zone_d {
    width: 90%;
  }
}
#beautymarket .m_time_bar {
  width: 90%;
  padding-top: 23px;
  padding-bottom: 23px;
  position: relative;
  border-top: #ec4899 2px solid;
  border-bottom: #ec4899 2px solid;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  #beautymarket .m_time_bar {
    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
    border-top: #ec4899 1px solid;
    border-bottom: #ec4899 1px solid;
  }
}
#beautymarket .m_time_bar img {
  width: 45%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 1280px) {
  #beautymarket .m_time_bar img {
    width: 60%;
    max-width: 518px;
  }
}
@media screen and (max-width: 750px) {
  #beautymarket .m_time_bar img {
    width: 100%;
  }
}
#beautymarket .market_group_zone {
  position: relative;
  margin: 0 auto;
  margin-top: 6px;
  border-top: #ec4899 2px solid;
  width: 90%;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone {
    width: 100%;
    border-top: #ec4899 1px solid;
  }
}
#beautymarket .market_group_zone .market_group_title {
  align-items: center;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_group_title .group_sm_title {
    width: 40%;
  }
}
#beautymarket .market_group_zone .market_group_title .group_arrow {
  width: 27px;
  height: 27px;
  margin-left: 12px;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_group_title .group_arrow {
    width: 6vw;
  }
}
#beautymarket .market_group_zone .market_open .group_arrow {
  transform: rotate(180deg);
}
#beautymarket .market_group_zone .market_group1, #beautymarket .market_group_zone .market_group2, #beautymarket .market_group_zone .market_group3 {
  padding: 20px 25px;
  border-bottom: #ec4899 2px solid;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_group1, #beautymarket .market_group_zone .market_group2, #beautymarket .market_group_zone .market_group3 {
    padding: 12px 10px;
    border-bottom: #ec4899 1px solid;
  }
}
#beautymarket .market_group_zone .js-market-trigger {
  cursor: pointer;
}
#beautymarket .market_group_zone .market_store {
  height: 0; /* 預設高度為 0 */
  overflow: hidden; /* 隱藏超出範圍的內容 */
  transition: height 0.4s ease-in-out; /* 高度的滑順動畫 */
  margin-top: 10px;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store {
    margin-top: 13px;
  }
}
#beautymarket .market_group_zone .market_store .group_intro {
  font-size: calc(1.25 * var(--remBasicSize));
  line-height: 2.8rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .group_intro {
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 1.2rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
  }
}
#beautymarket .market_group_zone .market_store .market_elemants {
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .market_elemants {
    justify-content: space-between;
  }
}
#beautymarket .market_group_zone .market_store .market_elemants .store_card {
  width: 31.5%;
  aspect-ratio: 1/1;
  border-radius: 30px;
  border: #ebff7c 2px solid;
  margin-top: 50px;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .market_elemants .store_card {
    width: 47%;
    aspect-ratio: 1/1;
    border-radius: 15px;
    margin-top: 35px;
    margin-left: 0px;
    margin-right: 0px;
  }
}
#beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_top {
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  top: 0px;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_top {
    width: 90%;
  }
}
#beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_top .store_card_logo {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 9999px;
  border: #ebff7c 2px solid;
  z-index: 2;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_top .store_card_logo {
    width: 45px;
    height: 45px;
    border: #ebff7c 1px solid;
  }
}
#beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_top .store_card_name {
  position: absolute;
  width: 85%;
  left: 35px;
  padding: 10px 10px;
  padding-left: 40px;
  background-color: #ebff7c;
  font-size: calc(1.125 * var(--remBasicSize));
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  font-weight: 600;
  color: #191917;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_top .store_card_name {
    font-size: calc(1.5 * var(--remBasicSize));
    line-height: 0.8rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    padding: 5px 5px;
    padding-left: 25px;
    width: 78%;
    left: 25px;
  }
}
#beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_arrow {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .market_elemants .store_card .store_card_arrow {
    width: 5vw;
    height: 5vw;
    bottom: 2vw;
    right: 2vw;
  }
}
#beautymarket .market_group_zone .market_store {
  /*-----------------------------------------------------------------------------

        換能量站市集照片/logo

  -----------------------------------------------------------------------------*/
}
#beautymarket .market_group_zone .market_store .market1 .store_card1-1 {
  background-image: url("../images/market_part2/market1-1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #000;
}
@media screen and (max-width: 750px) {
  #beautymarket .market_group_zone .market_store .market1 .store_card1-1 {
    background-image: url("../images/market_part2/market1-1m.jpg");
  }
}
#beautymarket .market_group_zone .market_store .market1 .store_card1-1 .store_card_logo {
  background-image: url("../images/market_part2/market1-1_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market1 .store_card1-2 {
  background-image: url("../images/market_part2/market1-2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market1 .store_card1-2 .store_card_logo {
  background-image: url("../images/market_part2/market1-2_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market1 .store_card1-3 {
  background-image: url("../images/market_part2/market1-3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market1 .store_card1-3 .store_card_logo {
  background-image: url("../images/market_part2/market1-3_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market1 .store_card7 {
  background-image: url("../images/market_part2/market2-7.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #000;
}
#beautymarket .market_group_zone .market_store .market1 .store_card7 .store_card_logo {
  background-image: url("../images/market_part2/market2-7_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market1 .store_card8 {
  background-image: url("../images/market_part2/market2-8.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market1 .store_card8 .store_card_logo {
  background-image: url("../images/market_part2/market2-8_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market2 .store_card1 {
  background-image: url("../images/market_part2/market2-1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market2 .store_card1 .store_card_logo {
  background-image: url("../images/market_part2/market2-1_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market2 .store_card2 {
  background-image: url("../images/market_part2/market2-2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market2 .store_card2 .store_card_logo {
  background-image: url("../images/market_part2/market2-2_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market2 .store_card3 {
  background-image: url("../images/market_part2/market2-3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market2 .store_card3 .store_card_logo {
  background-image: url("../images/market_part2/market2-3_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market2 .store_card4 {
  background-image: url("../images/market_part2/market2-4.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market2 .store_card4 .store_card_logo {
  background-image: url("../images/market_part2/market2-4_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market2 .store_card5 {
  background-image: url("../images/market_part2/market2-5.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market2 .store_card5 .store_card_logo {
  background-image: url("../images/market_part2/market2-5_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market2 .store_card6 {
  background-image: url("../images/market_part2/market2-6.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #000;
}
#beautymarket .market_group_zone .market_store .market2 .store_card6 .store_card_logo {
  background-image: url("../images/market_part2/market2-6_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#beautymarket .market_group_zone .market_store .market2 .store_card9 {
  background-image: url("../images/market_part2/market2-9.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#beautymarket .market_group_zone .market_store .market2 .store_card9 .store_card_logo {
  background-image: url("../images/market_part2/market2-9_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/*-------------------------

    experience

-------------------------*/
#experince {
  background-color: #ffebf5;
}
#experince::after {
  content: "";
  position: absolute;
  top: -150px;
  right: 0;
  width: 0;
  height: 0;
  /* 右下角的三角形 */
  border-style: solid;
  border-width: 0 0 150px 190px;
  border-color: transparent transparent #ffebf5 transparent;
}
@media screen and (max-width: 750px) {
  #experince::after {
    content: "";
    position: absolute;
    top: -60px;
    right: 0;
    width: 0;
    height: 0;
    /* 右下角的三角形 */
    border-style: solid;
    border-width: 0 0 60px 80px;
    border-color: transparent transparent #ffebf5 transparent;
  }
}
#experince .title_zone {
  padding-top: 210px;
}
@media screen and (max-width: 750px) {
  #experince .title_zone {
    padding-top: 150px;
  }
}
@media screen and (max-width: 500px) {
  #experince .title_zone {
    padding-top: 100px;
  }
}
#experince .title_zone .sec_title {
  position: relative;
}
#experince .title_zone .sec_title::before {
  content: "";
  position: absolute;
  background: url("../images/experience/experience_title.png") no-repeat;
  background-size: contain;
  width: 800px;
  height: 300px;
  top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 20px);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #experince .title_zone .sec_title::before {
    width: 650px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1);
  }
}
@media screen and (max-width: 750px) {
  #experince .title_zone .sec_title::before {
    width: 220%;
    max-width: 330px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 + 15px);
  }
}
@media screen and (max-width: 350px) {
  #experince .title_zone .sec_title::before {
    width: 190%;
    max-width: 320px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 30px);
  }
}
#experince .timer {
  width: 100%;
  background-color: #ec4899;
  padding-top: 23px;
  padding-bottom: 23px;
  position: relative;
  position: sticky;
  top: 0;
  z-index: 89;
}
#experince .timer img {
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 1024px) {
  #experince .timer img {
    width: 70%;
  }
}
@media screen and (max-width: 750px) {
  #experince .timer img {
    width: 100%;
  }
}
#experince .coach_section {
  position: sticky;
  width: 100%;
  min-height: 100svh;
  align-items: center; /* 垂直置中 */
  background-color: #ffebf5;
  top: 132px;
}
@media screen and (max-width: 750px) {
  #experince .coach_section {
    height: auto;
    padding-bottom: 40px;
    top: -40px;
  }
}
@media screen and (max-width: 400px) {
  #experince .coach_section {
    padding-bottom: 80px;
    top: -180px;
  }
}
#experince .coach_section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px; /* 漸層高度 */
  background: linear-gradient(to top, #ec4899 0%, #ffebf5 100%);
  z-index: 0; /* 層級在最下面 */
  pointer-events: none;
  opacity: 0.4;
}
@media screen and (max-width: 750px) {
  #experince .coach_section::before {
    height: 50px; /* 漸層高度 */
  }
}
#experince .coach_section .class_time {
  position: absolute;
  top: 50px;
  left: 10vw;
  font-size: calc(1.375 * var(--remBasicSize));
  letter-spacing: calc(0.0625 * var(--remBasicSize));
  font-weight: 600;
}
@media screen and (max-width: 750px) {
  #experince .coach_section .class_time {
    font-size: calc(1.75 * var(--remBasicSize));
  }
}
#experince .coach_section .class_time::before {
  content: "";
  position: absolute;
  background-color: #191917;
  top: 50%;
  left: -11.125vw;
  width: 10vw;
  height: 0.078125vw;
  transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
  #experince .coach_section .class_time::before {
    width: 8vw;
  }
}
#experince .coach_section .class_number {
  position: absolute;
  top: 22px;
  right: 0px;
}
@media screen and (max-width: 750px) {
  #experince .coach_section .class_number {
    width: 25vw;
  }
}
#experince .coach_section .container {
  padding-top: 200px;
}
@media screen and (max-width: 750px) {
  #experince .coach_section .container {
    padding-top: 70px;
    flex-direction: column-reverse; /* 關鍵：垂直且反轉順序 */
    padding-bottom: 30px;
  }
}
#experince .coach_section .container .right {
  width: 40%;
  max-width: 430px;
}
@media screen and (max-width: 750px) {
  #experince .coach_section .container .right {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
  }
}
#experince .coach_section .container .right img {
  width: 100%;
}
#experince .coach_section .container .left_w {
  flex-direction: column;
  justify-content: center;
  align-items: left;
  gap: 30px;
}
@media screen and (max-width: 750px) {
  #experince .coach_section .container .left_w {
    align-items: center;
    gap: 20px;
  }
}
#experince .coach_section .container .left_w .girl_only {
  position: relative;
  padding: 10px 15px;
  font-size: calc(1 * var(--remBasicSize));
  letter-spacing: calc(0.0625 * var(--remBasicSize));
  font-weight: 600;
  border-radius: 20px;
  background-color: #ebff7c;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 750px) {
  #experince .coach_section .container .left_w .girl_only {
    font-size: calc(1.875 * var(--remBasicSize));
    padding: 10px 15px;
  }
}
#experince .coach_section .container .left_w .class_title {
  font-size: calc(2.6875 * var(--remBasicSize));
  letter-spacing: calc(0.09375 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #experince .coach_section .container .left_w .class_title {
    font-size: calc(3.6875 * var(--remBasicSize));
    letter-spacing: calc(0.0625 * var(--remBasicSize));
    text-align: center;
  }
}
#experince .coach_section .container .left_w .class_cn_title {
  color: #191917;
  font-weight: 300;
}
#experince .coach_section .container .left_w .class_en_title {
  color: #191917;
  font-weight: 700;
}
#experince .coach_section .container .left_w .class_p {
  width: 74%;
  min-width: 850px;
  text-align: left;
  font-size: calc(1.125 * var(--remBasicSize));
  line-height: 2rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  margin-bottom: 70px;
}
@media screen and (max-width: 750px) {
  #experince .coach_section .container .left_w .class_p {
    width: 90%;
    min-width: 0px;
    font-size: calc(1.875 * var(--remBasicSize));
    letter-spacing: calc(0.0625 * var(--remBasicSize));
    line-height: 1.8rem;
    text-align: center;
    margin-bottom: 20px;
  }
}
#experince .coach_section6::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/experience/experience_zone1_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  #experince .coach_section6::after {
    height: 80px;
  }
}
#experince .coach_section7::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/experience/experience_zone2_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  #experince .coach_section7::after {
    height: 80px;
  }
}
#experince .coach_section8::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/experience/experience_zone3_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  #experince .coach_section8::after {
    height: 80px;
  }
}
#experince .coach_section6, #experince .coach_section7, #experince .coach_section8 {
  border-top: #ec4899 1px solid;
}
#experince .class_popup_btn {
  cursor: pointer;
  width: 250px;
  height: 62px;
}
@media screen and (max-width: 750px) {
  #experince .class_popup_btn {
    width: 50%;
    height: 48px;
  }
}
#experince .class_popup_btn:hover {
  width: 250px;
  height: 62px;
  transition: all 0.3s;
}
@media screen and (max-width: 750px) {
  #experince .class_popup_btn:hover {
    width: 50%;
    height: 48px;
  }
}
#experince .experience_join_a {
  cursor: pointer;
  width: 250px;
  height: 62px;
}
@media screen and (max-width: 750px) {
  #experince .experience_join_a {
    width: 50%;
    height: 48px;
  }
}
#experince .experience_popup_btn {
  background: url("../images/training_program/coach_more_g.png") no-repeat;
  background-size: contain;
}
#experince .experience_popup_btn:hover {
  background: url("../images/training_program/coach_more_p.png") no-repeat;
  background-size: contain;
}
#experince .experience_join_btn {
  background: url("../images/experience/experience_join_btn.png") no-repeat;
  background-size: contain;
  width: 100%;
}
#experince .experience_join_btn:hover {
  background: url("../images/experience/experience_join_btn_h.png") no-repeat;
  background-size: contain;
  width: 100%;
}

.popup_btn {
  cursor: pointer;
  width: 250px;
  height: 62px;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 250px;
}
@media screen and (max-width: 750px) {
  .popup_btn {
    width: 100%;
    height: 48px;
    padding-bottom: 150px;
  }
}

.popup_btn:hover {
  width: 250px;
  height: 62px;
  transition: all 0.3s;
  z-index: 2;
}
@media screen and (max-width: 750px) {
  .popup_btn:hover {
    width: 100%;
    height: 48px;
  }
}

.popup_join_a {
  cursor: pointer;
  display: block;
  width: 250px;
  height: 62px;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .popup_join_a {
    width: 50%;
    height: 48px;
  }
}

.popup_join_btn {
  background: url("../images/experience/experience_join_btn.png") no-repeat;
  background-size: contain;
}

.popup_join_btn:hover {
  background: url("../images/experience/experience_join_btn_h.png") no-repeat;
  background-size: contain;
}

/*-------------------------

    goodie_bag

-------------------------*/
#goodie_bag {
  background-color: #ec4899;
  padding-bottom: calc(5 * var(--remBasicSize));
}
#goodie_bag .title_zone {
  padding-top: 210px;
}
@media screen and (max-width: 750px) {
  #goodie_bag .title_zone {
    padding-top: 150px;
  }
}
@media screen and (max-width: 500px) {
  #goodie_bag .title_zone {
    padding-top: 100px;
    padding-bottom: 0;
  }
}
#goodie_bag .title_zone .sec_title {
  position: relative;
}
#goodie_bag .title_zone .sec_title::before {
  content: "";
  position: absolute;
  background: url("../images/goodie_bag/bag_title.png") no-repeat;
  background-size: contain;
  width: 800px;
  height: 300px;
  top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 20px);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #goodie_bag .title_zone .sec_title::before {
    width: 650px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1);
  }
}
@media screen and (max-width: 750px) {
  #goodie_bag .title_zone .sec_title::before {
    width: 220%;
    max-width: 330px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 + 15px);
  }
}
@media screen and (max-width: 350px) {
  #goodie_bag .title_zone .sec_title::before {
    width: 190%;
    max-width: 320px;
    top: calc((2.5 * var(--remBasicSize) + 30px) * -1 - 30px);
  }
}
@media screen and (max-width: 750px) {
  #goodie_bag .title_zone .zone_d {
    top: -10px;
  }
}
#goodie_bag .title_zone .sp_t {
  color: #ebff7c;
  font-size: calc(1.375 * var(--remBasicSize));
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  font-weight: 500;
}
@media screen and (max-width: 750px) {
  #goodie_bag .title_zone .sp_t {
    width: 90%;
    text-align: center;
    font-size: calc(1.875 * var(--remBasicSize));
    line-height: 2rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    margin: 0 auto;
    z-index: 3;
  }
}

#goodie_bag2 {
  background-color: #d62b7f;
  padding-bottom: calc(5 * var(--remBasicSize));
}
#goodie_bag2 .title_zone {
  padding-top: 100px;
}
@media screen and (max-width: 750px) {
  #goodie_bag2 .title_zone {
    padding-top: 70px;
  }
}
@media screen and (max-width: 500px) {
  #goodie_bag2 .title_zone {
    padding-top: 50px;
    padding-bottom: 0;
  }
}
#goodie_bag2 .title_zone .sec_title {
  position: relative;
}
@media screen and (max-width: 750px) {
  #goodie_bag2 .title_zone .zone_d {
    top: -10px;
  }
}

/*--------------
       禮物區
 ---------------*/
.grid-container {
  position: relative;
  width: 100%;
  max-width: calc(58.4375 * var(--remBasicSize));
  margin: 0 auto;
  padding: calc(3.125 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize));
  top: calc(0 * var(--remBasicSize));
  box-sizing: border-box;
}
.grid-container .big-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(1 * var(--remBasicSize));
  margin-bottom: calc(2.1875 * var(--remBasicSize));
}
.grid-container .big-item {
  text-align: center;
  padding: calc(0.625 * var(--remBasicSize));
  margin-bottom: calc(0.625 * var(--remBasicSize));
}
.grid-container .big-item img {
  border-radius: calc(0.9375 * var(--remBasicSize));
}
.grid-container .medium-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(1 * var(--remBasicSize));
  margin-bottom: calc(2.1875 * var(--remBasicSize));
}
.grid-container .medium-item {
  text-align: center;
  padding: calc(0.625 * var(--remBasicSize));
  margin-bottom: calc(0.625 * var(--remBasicSize));
}
.grid-container .medium-item img {
  border-radius: calc(0.9375 * var(--remBasicSize));
}
.grid-container .small-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(1 * var(--remBasicSize));
}
.grid-container .small-item {
  text-align: center;
  padding: calc(0.625 * var(--remBasicSize));
  margin-bottom: calc(1.5625 * var(--remBasicSize));
}
.grid-container .small-item img {
  border-radius: calc(0.9375 * var(--remBasicSize));
}
.grid-container .big-item img,
.grid-container .medium-item img,
.grid-container .small-item img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.grid-container .big-item img img,
.grid-container .medium-item img img,
.grid-container .small-item img img {
  border-radius: calc(0.9375 * var(--remBasicSize));
}
.grid-container .big-item h3, .grid-container .medium-item h3 {
  position: relative;
  top: calc(0.625 * var(--remBasicSize));
  font-size: calc(1 * var(--remBasicSize));
  line-height: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.6px;
}
.grid-container .big-item h3 span, .grid-container .medium-item h3 span {
  display: block;
  font-size: calc(0.875 * var(--remBasicSize));
  line-height: calc(1.75 * var(--remBasicSize));
  margin-top: calc(0.3125 * var(--remBasicSize));
  border: calc(0.0625 * var(--remBasicSize)) #000 solid;
  letter-spacing: 0.5px;
}
.grid-container p {
  position: relative;
  top: calc(0.625 * var(--remBasicSize));
  font-size: calc(0.875 * var(--remBasicSize));
  line-height: 1.3rem;
  font-weight: 400;
}

@media screen and (max-width: 750px) {
  /*--------------
            禮物區
      ---------------*/
  .grid-container {
    position: relative;
    width: 100%;
    max-width: calc(46.875 * var(--remBasicSize));
    margin: 0 auto;
    padding: calc(4.0625 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize));
    top: calc(0 * var(--remBasicSize));
    box-sizing: border-box;
  }
  .grid-container .big-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(1 * var(--remBasicSize));
    margin-bottom: calc(2.1875 * var(--remBasicSize));
  }
  .grid-container .big-item {
    text-align: center;
    padding: calc(0.625 * var(--remBasicSize));
    margin-bottom: calc(0.625 * var(--remBasicSize));
  }
  .grid-container .medium-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(1 * var(--remBasicSize));
    margin-bottom: calc(2.1875 * var(--remBasicSize));
  }
  .grid-container .medium-item {
    text-align: center;
    padding: calc(0.625 * var(--remBasicSize));
    margin-bottom: calc(0.625 * var(--remBasicSize));
  }
  .grid-container .small-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(0.625 * var(--remBasicSize));
  }
  .grid-container .small-item {
    text-align: center;
    padding: calc(0.625 * var(--remBasicSize));
    margin-bottom: calc(1.5625 * var(--remBasicSize));
  }
  .grid-container .big-item img,
  .grid-container .medium-item img,
  .grid-container .small-item img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .grid-container .big-item h3 {
    position: relative;
    top: calc(0.625 * var(--remBasicSize));
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 1.3rem;
    font-weight: 400;
  }
  .grid-container .big-item h3 span {
    font-size: calc(1.25 * var(--remBasicSize));
    line-height: 1.3rem;
  }
  .grid-container .small-item p span, .grid-container .medium-item h3 span {
    font-size: calc(1.125 * var(--remBasicSize));
  }
  .grid-container p, .grid-container .medium-item h3 {
    position: relative;
    top: calc(0.625 * var(--remBasicSize));
    font-size: calc(1.5 * var(--remBasicSize));
    line-height: 1.3rem;
    font-weight: 400;
  }
}
/* =========================================
   1. 滿版彈出視窗外層
========================================= */
.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  isolation: isolate;
  z-index: 9999;
  /* 預設隱藏，搭配 JS 切換 class */
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: all 0.4s ease;
}
.popup-wrapper::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 260px; /* 漸層高度 */
  background: linear-gradient(to top, #ec4899 0%, #ececec 100%);
  z-index: 1; /* 層級在最下面 */
  pointer-events: none;
  opacity: 0.6;
}
@media screen and (max-width: 750px) {
  .popup-wrapper::before {
    height: 50px; /* 漸層高度 */
  }
}
.popup-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  margin: 0 auto;
  z-index: 1;
}
@media screen and (max-width: 750px) {
  .popup-wrapper::after {
    height: 60px;
  }
}

#popup-hiit-workout::after {
  content: "";
  background-image: url("../images/training_program/pop_train_block1_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  #popup-hiit-workout::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

#popup-class2::after {
  content: "";
  background-image: url("../images/training_program/pop_train_block2_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  #popup-class2::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

#popup-class3::after {
  content: "";
  background-image: url("../images/training_program/pop_train_block3_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  #popup-class3::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

#popup-class4::after {
  content: "";
  background-image: url("../images/training_program/pop_train_block4_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  #popup-class4::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

#popup-class5::after {
  content: "";
  background-image: url("../images/training_program/pop_train_block5_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  #popup-class5::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

#popup-class6::after {
  content: "";
  background-image: url("../images/experience/experience_zone1_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  #popup-class6::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

#popup-class7::after {
  content: "";
  background-image: url("../images/experience/experience_zone2_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  #popup-class7::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

#popup-class8::after {
  content: "";
  background-image: url("../images/experience/experience_zone3_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  #popup-class8::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}

.popup-market::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 260px; /* 漸層高度 */
  background: linear-gradient(to top, #ebff7c 0%, #ececec 100%);
  z-index: 1; /* 層級在最下面 */
  pointer-events: none;
  opacity: 0.6;
}
@media screen and (max-width: 750px) {
  .popup-market::before {
    height: 50px; /* 漸層高度 */
  }
}
.popup-market::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/market/pop_market_deco.svg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 750px) {
  .popup-market::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}
.popup-market .container {
  width: 80%;
  max-width: 1000px;
  padding-top: 50px;
  gap: 60px;
  z-index: 2;
}
@media screen and (max-width: 750px) {
  .popup-market .container {
    flex-direction: column;
    padding-top: 0px;
    gap: 50px;
  }
}
.popup-market .container .popup-store_pic {
  flex-direction: column;
  gap: 20px;
  z-index: 2;
}
.popup-market .container .popup-store_pic .popup-logo {
  width: 50%;
  aspect-ratio: 1/1;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_pic .popup-logo {
    width: 38%;
  }
}
.popup-market .container .popup-store_pic .popup-store {
  width: 27vw;
  max-width: 300px;
  aspect-ratio: 1/1;
  border-radius: 20px;
  border: #ebff7c 1px solid;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_pic .popup-store {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 1/1;
  }
}
.popup-market .container .popup-store_data_zone {
  flex-direction: column;
  gap: 40px;
}
.popup-market .container .popup-store_data_zone a {
  width: 180px;
  height: 62px;
}
.popup-market .container .popup-store_data_zone .popup-brand_btn {
  cursor: pointer;
  width: 180px;
  height: 62px;
  background: url("../images/market/store_more.png") no-repeat;
  background-size: contain;
  margin-top: 50px;
  z-index: 10;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_data_zone .popup-brand_btn {
    margin-top: 20px;
    width: 100%;
  }
}
.popup-market .container .popup-store_data_zone .popup-brand_btn:hover {
  background: url("../images/market/store_more_h.png") no-repeat;
  background-size: contain;
  width: 180px;
  height: 62px;
  transition: all 0.3s;
  z-index: 10;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_data_zone .popup-brand_btn:hover {
    margin-top: 20px;
    width: 100%;
  }
}
.popup-market .container .popup-store_data_zone .popup-store_data_zone_top {
  align-items: center;
}
.popup-market .container .popup-store_data_zone .popup-store_data_zone_top .popup-store_tag {
  color: #ec4899;
  margin-bottom: 10px;
  font-size: calc(1.25 * var(--remBasicSize));
  font-weight: 500;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_data_zone .popup-store_data_zone_top .popup-store_tag {
    font-size: calc(1.9375 * var(--remBasicSize));
  }
}
.popup-market .container .popup-store_data_zone .popup-store_data_zone_top .popup-store_name {
  font-size: calc(2.5 * var(--remBasicSize));
  line-height: calc(3.4375 * var(--remBasicSize));
  letter-spacing: calc(0.075 * var(--remBasicSize));
  font-weight: 500;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_data_zone .popup-store_data_zone_top .popup-store_name {
    font-size: calc(4.375 * var(--remBasicSize));
    line-height: calc(5.3125 * var(--remBasicSize));
    text-align: left;
  }
}
.popup-market .container .popup-store_data_zone .popup-store_data_zone_detail {
  flex-direction: column;
  gap: 20px;
}
.popup-market .container .popup-store_data_zone .popup-store-sm-title {
  background-color: #ec4899;
  color: #fff;
  font-weight: 500;
  font-size: calc(1 * var(--remBasicSize));
  padding: 4px 12px;
  display: inline-block;
  border-radius: 14px;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 10px;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_data_zone .popup-store-sm-title {
    overflow: auto;
    font-size: calc(1.75 * var(--remBasicSize));
  }
}
.popup-market .container .popup-store_data_zone .popup-store-w {
  font-size: calc(1 * var(--remBasicSize));
  letter-spacing: calc(0.075 * var(--remBasicSize));
  line-height: 1.6rem;
  text-align: left;
  text-align: justify;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_data_zone .popup-store-w {
    font-size: calc(1.875 * var(--remBasicSize));
  }
}
.popup-market .container .popup-store_data_zone .popup-store-left {
  text-align: left;
}
@media screen and (max-width: 750px) {
  .popup-market .container .popup-store_data_zone .popup-store-left {
    font-size: calc(1.875 * var(--remBasicSize));
  }
}

#popup-map .popup-content {
  background-color: #ec4899;
  position: relative;
}
#popup-map .popup-content img {
  margin: 0 auto;
  width: 90%;
}
@media screen and (max-width: 750px) {
  #popup-map .popup-content img {
    padding-top: 60px;
  }
}
#popup-map::before {
  display: none;
}
#popup-map::after {
  display: none;
}

.popup-wrapper.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block; /* 或 flex/grid */
  overflow-y: auto; /* 確保垂直方向可以捲動 */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* 關鍵：開啟 iOS 原生流暢滾動 */
}

/* =========================================

        市集popup頁換圖片素材

========================================= */
#popup-market2-1 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-1_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-1 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market2-2 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-2_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-2 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market2-3 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-3_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-3 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-3.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market2-4 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-4_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-4 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-4.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market2-5 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-5_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-5 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-5.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market2-6 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-6_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-6 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-6.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #000;
}

#popup-market2-7 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-7_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-7 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-7.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #000;
}

#popup-market2-8 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-8_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-8 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-8.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market2-9 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market2-9_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market2-9 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market2-9.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market1-1 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market1-1_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market1-1 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market1-1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #000;
}

#popup-market1-2 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market1-2_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market1-2 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market1-2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#popup-market1-3 .popup-store_pic .popup-logo {
  background-image: url("../images/market_part2/market1-3_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#popup-market1-3 .popup-store_pic .popup-store {
  background-image: url("../images/market_part2/market1-3.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* =========================================
   2. 滿版內容區塊 (填滿螢幕 + 漸層)
========================================= */
.popup-content {
  position: relative;
  width: 100%;
  height: 100%; /* 填滿整個螢幕高度 */
  overflow-y: auto; /* 允許上下滾動 */
  /* 左右留白改用 %，讓它在不同螢幕寬度下都好看；上方多留一點空間給關閉按鈕 */
  padding: 60px 5% 80px;
  background-color: #ececec;
}
@media screen and (max-width: 750px) {
  .popup-content {
    padding-left: 0;
    padding-right: 0;
  }
}

.lesmills_logo {
  width: 40vw;
  max-width: 130px;
  margin: 0 auto;
  margin-bottom: 20px;
}
@media screen and (max-width: 750px) {
  .lesmills_logo {
    margin: 0;
    margin-bottom: 20px;
  }
}
.lesmills_logo img {
  width: 100%;
}

/* =========================================
   3. 右上角關閉按鈕
========================================= */
.popup-close-btn {
  /* 如果希望滑動時按鈕永遠固定在右上角，可以把 absolute 改成 fixed */
  position: fixed;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; /* 確保按鈕不會被底下的文字或圖片蓋住 */
}
.popup-close-btn img {
  width: 100%;
}
@media screen and (max-width: 750px) {
  .popup-close-btn {
    width: 54px;
    height: 54px;
  }
}

/* =========================================
   3. 頂部標題區塊
========================================= */
.popup-header {
  text-align: center;
  padding-bottom: 60px;
  width: 65%;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .popup-header {
    text-align: left;
    width: 100%;
    padding-bottom: 30px;
  }
}

.tag-yellow, .tag-name {
  background-color: #ebff7c;
  color: #191917;
  font-weight: 500;
  font-size: calc(1 * var(--remBasicSize));
  padding: 4px 12px;
  display: inline-block;
  border-radius: 14px;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .tag-yellow, .tag-name {
    font-size: calc(1.75 * var(--remBasicSize));
  }
}

#popup-class6 .tag-yellow {
  left: 50%;
  transform: translateX(-50%);
}

.title-main {
  font-size: calc(1.875 * var(--remBasicSize));
  font-weight: 400;
  margin: 15px 0 5px;
  letter-spacing: 2px;
}
@media screen and (max-width: 750px) {
  .title-main {
    font-size: calc(3.125 * var(--remBasicSize));
  }
}

#popup-class6 .title-main {
  font-weight: 600;
}

.title-sub {
  font-size: calc(1.875 * var(--remBasicSize));
  font-weight: 900;
  margin: 0 0 20px;
  letter-spacing: 1px;
}
@media screen and (max-width: 750px) {
  .title-sub {
    font-size: calc(3.125 * var(--remBasicSize));
    margin: 0;
  }
}

.description {
  font-size: calc(1 * var(--remBasicSize));
  line-height: 1.6rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  color: #191917;
  padding-top: 20px;
  padding-bottom: 5px;
}
@media screen and (max-width: 750px) {
  .description {
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 1.5rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
  }
}

.detail-time {
  width: 70%;
  margin: 0 auto;
  align-items: center;
  border-top: #ec4899 1px solid;
  padding-bottom: 100px;
  z-index: 2;
}
@media screen and (max-width: 750px) {
  .detail-time {
    width: 100%;
    padding-bottom: 70px;
  }
}

.time-line {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 10px;
  border-bottom: #ec4899 1px solid;
  display: flex;
  gap: 30px;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .time-line {
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 20px;
  }
}

.time-number {
  font-size: calc(1 * var(--remBasicSize));
  line-height: 1.6rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  color: #191917;
  font-weight: 600;
  text-align: center;
  flex: 2;
}
@media screen and (max-width: 750px) {
  .time-number {
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 1.5rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    flex: 3;
    text-align: left;
  }
}

.activity-detail {
  font-size: calc(1 * var(--remBasicSize));
  line-height: 1.6rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  color: #191917;
  flex: 8;
}
@media screen and (max-width: 750px) {
  .activity-detail {
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 1.5rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
    flex: 6;
  }
}

/* =========================================
   4. 教練列表區塊 (Flexbox 並排)
========================================= */
.trainer-list {
  display: flex;
  flex-direction: column;
  gap: 50px; /* 每張卡片之間的間距 */
  position: relative;
  z-index: 2; /* 確保文字和圖片在背景大字之上 */
}

#popup-class6 .trainer-list {
  margin-bottom: 50px;
}

#popup-class6 .tag-yellow {
  margin-bottom: 30px;
}

.trainer-card {
  display: flex;
  align-items: center; /* 讓圖片與文字垂直置中 */
  gap: 20px; /* 圖片與文字的水平間距 */
  width: 60%;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .trainer-card {
    flex-direction: column;
    width: 100%;
    gap: 30px;
  }
}

/* =========================================
   5. 頭像與名字標籤 (Position 絕對定位)
========================================= */
.trainer-avatar-box {
  position: relative; /* 為了讓名字標籤可以絕對定位 */
  width: 30%;
  max-width: 450px;
  flex-shrink: 0; /* 防止圖片被文字擠壓變形 */
}
@media screen and (max-width: 750px) {
  .trainer-avatar-box {
    width: 100%;
    max-width: 220px;
  }
}

#popup-class6 .trainer-avatar-box {
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  #popup-class6 .trainer-avatar-box {
    width: 100%;
    max-width: 280px;
  }
}

.trainer-img {
  width: 100%;
}

/* 教練文字資訊 */
.trainer-info {
  flex-grow: 1;
}

.trainer-name {
  font-size: calc(1.375 * var(--remBasicSize));
  font-weight: 600;
  margin-bottom: 10px;
  color: #191917;
}
.trainer-name span {
  font-size: calc(0.9375 * var(--remBasicSize));
  font-weight: 400;
  padding-left: 10px;
  color: #555;
}
@media screen and (max-width: 750px) {
  .trainer-name {
    font-size: calc(2.5 * var(--remBasicSize));
    line-height: 1.5rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
  }
  .trainer-name span {
    font-size: calc(1.875 * var(--remBasicSize));
    font-weight: 400;
    padding-left: 10px;
    color: #555;
  }
}

.trainer-desc {
  font-size: calc(1 * var(--remBasicSize));
  line-height: 1.6rem;
  letter-spacing: calc(0.01875 * var(--remBasicSize));
  color: #333;
}
@media screen and (max-width: 750px) {
  .trainer-desc {
    font-size: calc(1.75 * var(--remBasicSize));
    line-height: 1.5rem;
    letter-spacing: calc(0.01875 * var(--remBasicSize));
  }
}

.socail_icon_c {
  width: 55px;
  height: 55px;
  background-image: url("../images/training_program/ig_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

/* =========================================
   Garmin POPUP頁
========================================= */
#popup-garmin::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 260px; /* 漸層高度 */
  background: linear-gradient(to top, #ec4899 0%, #ececec 100%);
  z-index: 1; /* 層級在最下面 */
  pointer-events: none;
  opacity: 0.6;
}
@media screen and (max-width: 750px) {
  #popup-garmin::before {
    height: 50px; /* 漸層高度 */
  }
}
#popup-garmin::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 90px;
  bottom: 0;
  margin: 0 auto;
  background-image: url("../images/training_program/garmin.svg");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  #popup-garmin::after {
    width: 200%;
    height: 100px;
    scale: 0.6;
    left: -50%;
    bottom: -20px;
  }
}
#popup-garmin .popup-store_name {
  font-size: calc(2.1875 * var(--remBasicSize));
  line-height: calc(2.8125 * var(--remBasicSize));
  letter-spacing: calc(0.075 * var(--remBasicSize));
  font-weight: 500;
}
@media screen and (max-width: 750px) {
  #popup-garmin .popup-store_name {
    font-size: calc(4.0625 * var(--remBasicSize));
    line-height: calc(4.6875 * var(--remBasicSize));
    text-align: left;
  }
}
#popup-garmin .popup-notice {
  width: 27vw;
  max-width: 295px;
  font-size: calc(0.8125 * var(--remBasicSize));
  line-height: calc(1.375 * var(--remBasicSize));
  letter-spacing: 0.5px;
  color: #555;
  text-align: justify;
}
@media screen and (max-width: 750px) {
  #popup-garmin .popup-notice {
    width: 100%;
    max-width: 750px;
    font-size: calc(1.625 * var(--remBasicSize));
    line-height: calc(2.375 * var(--remBasicSize));
    letter-spacing: 0.5px;
    color: #555;
  }
}
#popup-garmin .container {
  padding-top: 50px;
}
#popup-garmin .container .popup-store_data_zone .popup-store-sm-title {
  background-color: #ebff7c;
  color: #191917;
}
#popup-garmin .popup-store {
  background-image: url("../images/training_program/garmin_popup.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: #ec4899 1px solid;
}

.garmin_btn {
  background-image: url("../images/training_program/garmin_btn.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 350px;
  height: 50px;
  cursor: pointer;
}
@media screen and (max-width: 750px) {
  .garmin_btn {
    width: 70%;
  }
}

.garmin_btn:hover {
  background: url("../images/training_program/garmin_btn_h.png") no-repeat;
  width: 350px;
  height: 50px;
  background-size: contain;
  background-position: center;
  transition: all 0.3s;
}
@media screen and (max-width: 750px) {
  .garmin_btn:hover {
    width: 70%;
  }
}

/*-------------------------

         lightbox

-------------------------*/
/* ---------------------
           共用
---------------------- */
.modal {
  background-color: transparent;
}

/*背景底色*/
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background: rgba(62, 62, 62, 0.97);
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.modal-backdrop.in {
  opacity: 1;
  filter: alpha(opacity=100);
}

.modal-open .modal {
  overflow-x: auto;
  overflow-y: auto;
}

.modal .modal-content {
  position: relative;
  background-color: transparent;
  border-radius: calc(0 * var(--remBasicSize));
  outline: 0;
}

/* ----------------------------
        彈出內容
----------------------------- */
.style-box .modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  display: block;
}
.style-box .modal-dialog .modal-body {
  width: calc(46.875 * var(--remBasicSize));
  min-height: calc(81.25 * var(--remBasicSize));
  margin-bottom: calc(5 * var(--remBasicSize));
  margin: 0 auto;
  display: block;
}
.style-box .modal-dialog .modal-body iframe {
  position: absolute;
  width: calc(46.875 * var(--remBasicSize));
  min-height: calc(81.25 * var(--remBasicSize));
}
.style-box .modal-dialog .info_map_pop {
  position: relative;
  margin: 0 auto;
  display: block;
  top: calc(5 * var(--remBasicSize));
  width: calc(36.25 * var(--remBasicSize));
  height: calc(31 * var(--remBasicSize));
}
.style-box .modal-dialog .info_map_pop .info_map_img {
  position: relative;
  margin: 0 auto;
  display: block;
  top: calc(0 * var(--remBasicSize));
  width: calc(36.25 * var(--remBasicSize));
  height: calc(31 * var(--remBasicSize));
}
.style-box .modal-dialog .info_map_pop .info_map_img img {
  width: 100%;
  height: 100%;
}
.style-box .modal-dialog {
  /* 關閉按鈕 */
}
.style-box .modal-dialog .close {
  position: absolute;
  right: calc(0 * var(--remBasicSize));
  top: calc(-2.5 * var(--remBasicSize));
  z-index: 10;
  width: calc(1.875 * var(--remBasicSize));
  height: calc(1.875 * var(--remBasicSize));
  color: rgb(0, 0, 0);
  background-color: transparent;
  font-size: calc(4.375 * var(--remBasicSize));
  background: url(../images/close.png) no-repeat center top/cover;
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
.style-box .modal-dialog .close:hover {
  transform: rotate(90deg);
  transition: all ease-in-out 0.2s;
}

@media screen and (max-width: 750px) {
  .style-box .modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    display: block;
  }
  .style-box .modal-dialog .modal-body {
    width: calc(46.875 * var(--remBasicSize));
    min-height: calc(137.5 * var(--remBasicSize));
    margin-bottom: calc(11.25 * var(--remBasicSize));
  }
  .style-box .modal-dialog .modal-body iframe {
    width: calc(46.875 * var(--remBasicSize));
    min-height: calc(137.5 * var(--remBasicSize));
  }
  .style-box .modal-dialog .info_map_pop {
    top: calc(16.25 * var(--remBasicSize));
    width: calc(46.875 * var(--remBasicSize));
    height: calc(40.625 * var(--remBasicSize));
  }
  .style-box .modal-dialog .info_map_pop .info_map_img {
    top: calc(0 * var(--remBasicSize));
    width: calc(46.875 * var(--remBasicSize));
    height: calc(40.625 * var(--remBasicSize));
  }
  .style-box .modal-dialog .info_map_pop .info_map_img img {
    width: 100%;
    height: 100%;
  }
  .style-box .modal-dialog {
    /* 關閉按鈕 */
  }
  .style-box .modal-dialog .close {
    position: absolute;
    right: calc(0.625 * var(--remBasicSize));
    top: calc(-4.375 * var(--remBasicSize));
    width: calc(3.75 * var(--remBasicSize));
    height: calc(3.75 * var(--remBasicSize));
    color: rgb(0, 0, 0);
    font-size: calc(4.375 * var(--remBasicSize));
  }
}/*# sourceMappingURL=index.css.map */