@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Righteous&display=swap');

:root {
  --f-family-1: "Righteous", "Noto Sans TC", sans-serif;
  --f-family-2: "Righteous", cursive;
  --f-family-3: "Noto Sans TC", sans-serif;
}

body { overflow-x: hidden; }

h1 {
  font-family: var(--f-family-3);
  font-size: min(calc(.8rem + 1.7vw), 32px);
}

.logo {
  width: 300px;
  height: auto;
}

.fs-5 {
  font-size: 1.1rem !important;
  letter-spacing: 1px;
  text-align: justify;
}

.mov { height: 180px; }
@media(min-width:370px){ .mov { height: 200px; } }
@media(min-width:400px){ .mov { height: 220px; } }
@media(min-width:500px){ .mov { height: 270px; } }
@media(min-width:760px){ .mov { height: 200px; } }
@media(min-width:1020px){ .mov { height: 270px; } }
@media(min-width:1200px){ .mov { height: 300px; } }
@media(min-width:1400px){ .mov { height: 315px; } }


.nav-pills .nav-link {
  background: 0 0;
  color: #000;
  background-color: #fff;
  border: 1px solid #666;
  padding: .5rem 2rem;
  border-radius: 50rem;
}

.nav-link:focus, .nav-link:hover {
  background-color: #c4dcff;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  border-color: #0d6efd;
  background-color: #0d6efd;
}

.mov-demo-basic a {
  width: 15rem;
}

.btn-outline-warning {
  color: #ffa407;
  border-color: #ffa407;
}

@media(min-width:760px){
  .nav-pills .nav-link { letter-spacing: 5px; padding-left: calc(2rem + 5px); }
}

@media(min-width:1200px){
  .nav-pills .nav-link { letter-spacing: 20px; padding-left: calc(2rem + 20px); }

  .showimgarea { min-height: 330px; }

  .showimgarea img { position: absolute; transform: translateY(-100px); }
}