body{background-color: #fff;}

/* btn =============================== */
.btn-sec {
  border: var(--border-1);
  background: var(--color-gray-100);
}

/* header =========================================== */
.nav01,
.nav01 .left,
.nav01 .right {
  display: flex;
  align-items: center;
}
.nav01 {
  align-self: stretch;position: relative;
  justify-content: space-between;
  border-bottom: var(--border-main-w);
  padding: 12px 32px;
  gap: 20px;
}
.nav01 .left {flex-wrap: wrap;column-gap: 20px;}
.logo {max-width: 128px;}
.logo-tx h1 {
  font-size: inherit;
  font-weight: 700;
  color: var(--color-blue);
}
.nav01 .right {
  gap: 20px;font-size: 14px;
}
.Logged-in, .Logged-in-no {
  padding:4px 8px;
  border-radius: 99px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.Logged-in{
  background: var(--color-blue);border: var(--border-1);color: #fff;
}
.Logged-in-no{
  background: var(--color-gray-100);border: var(--border-main);
}
.fspan {
  font-weight: 400;word-wrap: break-word;
}

/* main ====================================== */
main {padding: 40px 40px 100px 40px;}
main>section {
  width: 100%;max-width: 1200px;margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 60px;
}
main>section>article {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
.index-banner {
  width: 100%;
  border-radius: 24px;
}
main>section>article .txBox {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}
.tit {font-size: 32px;}
main>section>article .txBox p{
  font-size: 20px;
}

.toolBox {
  display: flex;gap: 80px;
  align-self: stretch;
  justify-content: flex-start;
}
.tool-card {
  align-self: stretch;
  padding: 60px;
  box-shadow: 0px 6px 40px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.tool-tit {
  color: var(--color-blue);font-size: 20px;
}
.tool-card img{
  aspect-ratio: 2/1;object-fit: cover;object-position: center;border-radius: 12px;
}



/* footer ========================================== */
footer {
  align-self: stretch;font-size: 14px;width: 100%;
  padding: 12px 32px;
  background: var(--color-gray-200);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
footer .tx-Box,
footer .copyright {
  justify-content: center;
  display: flex;
  flex-direction: column;
}
footer .tx-Box span {
  font-weight: 500;
  letter-spacing: 1px;
  word-wrap: break-word;
}
.line {width: 2px;height: stretch;background-color: var(--color-gray-500);}
.copyright span {
  color: var(--color-gray-600);
  word-wrap: break-word;
}



/* Modal 內容盒子 */
.modal-box {max-width: 400px;}



/* RWD 與其他狀態 ====================================== */
/* xl --- */
@media (width < 80rem) {
}
/* lg --- */
@media (width < 64rem) {
  main {padding: 40px 20px 100px 20px;}
  .tit {font-size: 24px;}
  main>section>article .txBox p{font-size: 16px;}
  .nav01 {padding: 8px 12px;gap: 4px;}
  .logo {max-width: 80px;}
  .logo-tx h1{font-size: 18px;}
  .nav01 .left {column-gap: 12px;}
  .nav01 .right{font-size: 12px;}
  .toolBox {flex-direction: column;max-width: 700px;margin: auto;}
  footer {flex-direction: column;gap: 4px;align-items: flex-start;}
}
/* md --- */
@media (width < 48rem) {
  main {padding: 20px 20px 100px 20px;}
  .index-banner {border-radius: 12px;}
  .tool-card {padding: 40px;}
}
/* sm --- */
@media (width < 40rem) {
  .nav01 .left{display: block;}
  .nav01{padding: 8px;}
  .logo-tx h1 {font-size: 12px;}
  .nav01 .right {gap: 8px;font-size: 10px;}
  .tool-card {padding: 20px;}
}