body {
  margin: 0;
  opacity: 1;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: #000;
  background-color: #ecd6a1;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  -webkit-font-smoothing: antialiased;
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../image/background-m.png) no-repeat top center;
  background-size: cover;
}

main {
  display: block;
  margin: 0 auto;
  padding: 0;
}

section {
  display: block;
  width: 100%;
  max-width: 92% !important; /* 預設小裝置寬度 */
  margin: 0 auto 40px;
}

h3 { margin: 0; }
a { text-decoration: underline; }

/* ==========================================================================
   2. 元件樣式 (Components)
   ========================================================================== */

/* 側邊快捷 (Side Bar) */
.side-bar { position: fixed; top: 8%; right: 0; text-align: center; z-index: 99; }
.side-bar a { color: #fe2b1e; text-decoration: none; }
.side-bar .go-top { cursor: pointer; display: none; margin-top: 10px; }
.side-bar ul.showlist { display: none; padding: 10px 0 0; }
.side-bar ul.hidelist>li, .side-bar ul.showlist>li { list-style: none; }
.side-bar ul.showlist>li { border-bottom: 1px dotted #fff; }
.side-bar ul.showlist>li:first-child {
  height: 110px; border-bottom: 0; padding-bottom: 0; border-radius: 100px 100px 0 0; background-color: #ffe600;
}
.side-bar ul.showlist>li:first-child img { position: absolute; right: 0; margin: auto; width: 100%; top: 0; }
.side-bar ul.showlist>li img { width: 100%; }
.side-bar ul.showlist>li:last-child { overflow: hidden; background-color: #fffb00; border-radius: 0 0 20px 20px; border-bottom: 0 solid #fff; }
.side-bar ul.showlist>li:last-child a { background-color: #fffb00; color: #fe2b1e; }
.side-bar ul.showlist>li ul.subheadfix { display: flex; flex-wrap: wrap; }
.side-bar ul.showlist>li ul.subheadfix li { width: 50%; display: flex; align-items: center; background: rgba(255,255,255,.6); justify-content: center; color: #fe2b1e; }
.side-bar ul.showlist>li ul.subheadfix li a:hover { color: #f91540; }
.side-bar ul.showlist>li a { background-color: rgba(255, 255, 255, 0.9); display: block; line-height: 1.375; padding: 10px 15px; font-size: .9em; }
.side-bar ul.showlist>li a:hover { background: #fe2b1e; color: #fffb00; }
.side-bar ul.showlist>li.last-sidebtn a { border-bottom: 0 solid #fff; border-radius: 0 0 10px 10px; }
.side-bar ul.showlist.active { display: block; }
.side-bar ul.hidelist { display: none; background: #fef61e; border-radius: 10px 0 0 10px; width: 40px; margin-left: auto; padding: 10px 0; margin-bottom: 10px; }
.side-bar ul.hidelist img { width: 100%; margin: auto; vertical-align: middle; }
.side-bar ul.hidelist.active { display: block; cursor: pointer; }
.side-bar .closebtn { display: none; position: absolute; top: 0; border-radius: 10px 0 0 10px; right: 0; margin-left: auto; text-align: center; padding: 10px 0; color: #fff; font-size: 20px; z-index: 99; cursor: pointer; }
.side-bar .closebtn.active { display: block; }

/* Header & Banner */
.logo-wrap { display: flex; justify-content: center; background-color: #fff; border-bottom: 2px solid #351000; }
.logo-wrap img { display: block; width: 110px; margin: 8px auto; }
.banner { position: relative; width: 100%; overflow: hidden; z-index: 1; height: auto; }
.banner:before { content: ''; height: 100%; vertical-align: middle; }
.banner img { display: block; width: 100%; margin: auto; }

/* 區塊內容樣式 */
.bg-section { background-color: #fff; border: 2px solid #770505; border-radius: 30px; }
.sec-title { width: 100%; }
.s-line { width: 95%; border: 2px solid #d4e2ff; margin: 10px auto; }
.seca-content, .secb-content, .secc-content { margin: 10px auto; background-color: #fff; border-radius: 30px; border: 3px solid #f4dc93; box-shadow: 0 0 30px #000; justify-items: center; }
.secd-content { margin: 30px auto 10px; justify-items: center; }
.seca-img { display: block; width: 90%; margin: 20px auto; }
.d-header img, .description-a img, .seca-content img, .secb-content img, .secc-content img, .secd-content img { width: 95%; }
.secc-content img { width: 90%; margin: auto; }
.sec2-dec { width: 90%; margin-top: 50px; }

/* 按鈕與連結 */
.link { text-decoration: underline; }
.highlight { color: #fff800; }
.bg-yellow { background-color: #fc1a96; color: #fff; }
.float_mask { display: flex; background-color: #1312e8; justify-content: center; box-shadow: 0px -4px 0px #fff; padding: 0 5px; }
.float_area { width: calc(100%/2); font-size: 1.1rem; padding: 10px 0; }
.float_area:hover { background-color: #fff800; color: #1312e8; }
.sign-btn.animate__animated { cursor: pointer; }
.sale-website { display: block; width: 90%; margin: auto; }
.sale-website img { width: 95%; margin: 5px; }
.button-z a:hover, .sale-website a:hover, .site-btn:hover { filter: brightness(120%); transform: translateY(5px); transition: .1s; }

/* 報名按鈕與登入區 */
.sign-btn { width: 80%; margin: 0 auto 10px; }
.signitem { width: calc(25% - 12px); margin: 0; }
.sign-tips { width: 90%; color: #ff0033; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px; text-align: center; }
.button-sign img { width: 90%; }
.btn-login, .btn-signin, .btn-overdue { display: block; width: 50%; height: 40px; padding: 20px; font-size: 2.5rem; font-weight: bold; line-height: 1; margin: 10px auto; border-radius: 200px; letter-spacing: .1rem; }

/* 推薦網站 */
.web-list { display: flex; justify-content: center; align-content: center; flex-wrap: wrap; width: 100%; margin: auto; padding: 0; }
.web-item { width: calc(100%/2 - 10px); margin: 5px auto; background-color: #fff; border: 2px solid rgb(244, 220, 147); box-shadow: rgb(255, 255, 255) 0px 0px 30px; border-radius: 30px; padding: 10px 0; justify-items: center; }
.web-item img { width: 95%; vertical-align: middle; margin: 8px auto; }
.web-btn { display: inline-block; width: 90%; color: #ff0033; border: 1px solid #ff0033; border-radius: 100px; text-decoration: none; font-weight: 900; font-size: .9rem; margin: 4px auto; justify-items: center; }
.web-btn:hover { background-color: rgba(255, 0, 51,.1); }
.web-btn img { width: 80%; margin: 0; }
.web-item a:hover { transform: translateY(5px); transition: .3s; }

/* 注意事項 */
.bg-section-ntc { width: calc(100% - 40px); background-color: #fe2b1e; padding: 2px 10px 2px 30px; border-radius: 0 0 26px 26px; margin-top: 10px; font-size: .95rem; }
.bg-section-ntc ul { text-align: left; color: #fff; padding: 0; }
.bg-section-ntc ul a { color: #fff; }
.bg-section-ntc h4 { color: #fff; margin-bottom: 0; }
.noticeWrap { background-color: #4f0000; margin-bottom: 0; }
.notification { padding-left: 30px; padding-right: 15px; }

/* 產品展示 */
.pd-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
.pd-item { width: calc(100%/2 - 5px); }
.content-a { position: relative; }
.content-a img, .content-b img, .content-c img { width: 90%; margin: auto; }
.content-d img { width: 100%; }
.content-a .cta { position: absolute; top: 30%; cursor: pointer; }

/* 動畫 */
.animate__brightness { -webkit-animation: brightness 2s infinite; }
@keyframes brightness {
  0%, 88%, 94%, 100% { -webkit-filter: brightness(100%); filter: brightness(100%); }
  91%, 97% { -webkit-filter: brightness(175%); filter: brightness(175%); }
}
.pop { animation: pop .5s steps(2, end) infinite; }
@keyframes pop {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

.copyright { margin: 50px 0 0; padding: 1em 0; color: #fff; background-color: #ff4d00; text-align: center; font-size: 0.8em; }

/* 顯示控制 */
.pcOnly { display: none !important; }
.mobileOnly { display: block !important; }

/* ==========================================================================
   3. 響應式佈局 (Media Queries - 由小到大)
   ========================================================================== */

/* 平板裝置 (Pad: 481px ~ 1200px) */
@media only screen and (min-width: 481px) {
  .logo-wrap img { width: 130px; }
  .float_area { width: calc(100%/2); }
  #event1 { margin-top: 50px; }
  #event2, #event3 { margin-top: 40px; }
  section { max-width: 90% !important; }
  .bg-section { border: 3px solid #770505; }
  .signitem { width: calc(25% - 15px); }
  .pd-item { width: calc(100%/3); }
  .pd-item:hover { transform: scale(1.02); }
  .web-item { width: calc(100%/3 - 10px); }
  .sale-website { display: block; width: 100%; }
  .button-sign img { width: 90%; }
  .notification { padding-left: 25px; }
}

/* 較大平板與桌機起點 (min-width: 768px) */
@media (min-width: 768px) {
  .pd-item { width: calc(100%/4); }
}

/* 桌機版 (min-width: 992px) */
@media (min-width: 992px) {
  body::before { background: url(../image/background.png); background-size: cover; }
  .pcOnly { display: block !important; }
  .mobileOnly { display: none !important; }
  .side-bar ul.hidelist { width: 60px; }
  .side-bar ul.showlist>li a { font-size: 1em; }
  .side-bar ul.showlist>li:first-child img { top: -2%; }
  .sec-title, .d-header img { width: 85%; }
}

/* 大螢幕桌機 (min-width: 1201px) */
@media (min-width: 1201px) {
  section { max-width: 85% !important; }
  .bg-section { border: 10px solid #770505; border-radius: 80px; }
  .sec-title { width: 70%; }
  .seca-content, .secb-content, .secc-content { border-radius: 50px; margin: 40px auto; }
  .web-item { width: calc(100%/6 - 20px); border-radius: 20px; }
  .sale-website { display: flex; }
  .sale-website img { width: 90%; margin: 20px; }
  .bg-section-ntc h4 { font-size: 1.5rem; }
  .bg-section-ntc { width: calc(100% - 100px); padding: 5px 40px 25px 60px; border-radius: 0 0 48px 48px; margin-top: 30px; font-size: 1.3rem;}
  .sign-btn { width: 60%; margin: 0 auto 50px; }
  .signitem { width: calc(12% - 10px); }
  .sign-tips { font-size: 2.5rem; }
}