/* 設定字體 =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Righteous&display=swap');
/*
font-family: 'Noto Sans TC', sans-serif;  中文
font-family: 'Righteous', cursive;  英文
font-family: 'Righteous', 'Noto Sans TC', sans-serif;  英中文
*/


/* 設定變數 =========================================== */
:root {
  --c-dark-1: #282828;
  --c-dark-2: #172e44;
  --c-light-1: #ececec;
  --c-main-1: #214263;
  --c-assist1: #0068cc;
  --c-assist2: #c26;
  --c-assist3: #ff69b4;
  --c-pointword: #f00;
  --f-family-1: 'Righteous', 'Noto Sans TC', sans-serif;
  --test: #007610;
}


/* default & all area ================================== */
html {
  font-size: 16px;
}

body {
  background-color: var(--c-light-1);
  background-image: url(./img/bg01.png);
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

.pointword {
  color: var(--c-pointword);
}

.pointword-r {
  color: var(--c-assist2);
}

.pointword-b {
  color: var(--c-assist1);
}

.mark, mark {
  padding: .2em;
  background-color: rgb(255, 255, 100);
}

.h-text-center {
  display: block !important;
  text-align: center !important;
}

.lihastype li {
  list-style-type: square;
  line-height: 1.5;
  margin-bottom: 10px;
}

.table-docs {
  background-color: #fff;
  width: 100%;
}

.table-docs-2 {
  width: auto !important;
}

.table-docs th, .table-docs td {
  padding: 5px;
}

.table-docs th {
  background-color: var(--c-dark-2);
  color: #fff;
  text-align: center;
}

.table-docs-2 tr:nth-of-type(odd)  {
  background-color: #e8e8e8;
}

.table-docs-2 .w-3rem {
  width: 3rem;
}

.table-docs-2 .w-5rem {
  width: 5rem;
}

.table-docs-2 .w-9rem {
  width: 9rem;
}

.table-docs-2 .w-13rem {
  width: 13rem;
}

.table-docs-2 .w-min-15rem {
  min-width: 15rem;
}

.white-space-nowrap {
  white-space: nowrap;
}

@media(min-width:992px){
  img.img-fluid-90 {
    display: block;
    max-width: 90%;
    height: auto;
    margin: .5rem auto;
  }

  img.img-fluid-80 {
    display: block;
    max-width: 80%;
    height: auto;
    margin: .5rem auto;
  }

  img.img-fluid-70 {
    display: block;
    max-width: 70%;
    height: auto;
    margin: .5rem auto;
  }

  img.img-fluid-65 {
    display: block;
    max-width: 65%;
    height: auto;
    margin: .5rem auto;
  }

  img.img-fluid-60 {
    display: block;
    max-width: 60%;
    height: auto;
    margin: .5rem auto;
  }

  img.img-fluid-55 {
    display: block;
    max-width: 55%;
    height: auto;
    margin: .5rem auto;
  }

  img.img-fluid-50 {
    display: block;
    max-width: 50%;
    height: auto;
    margin: .5rem auto;
  }


  .table-docs .w-7rem {
    width: 7rem;
  }

  .table-docs-2 {
    width: 100% !important;
  }
}

/* top area ============================================ */
.top {
  background-color: var(--c-dark-1);
  color: var(--c-light-1);
  font-size: 13px;
  line-height: 1.1;
  padding: 0 1rem;
  height: 40px;
  display: flex;
  align-items: center;
}

.top img {
  height: 1.3rem;
  width: auto;
  margin-right: 4px;
}


/* header area ========================================= */
header {
  background-image: url(./img/bg03.png);
  text-align: center;
  padding: 60px 2rem 1.5rem;
}


/* nav area ============================================ */
nav {
  background-color: var(--c-main-1);
  color: #fff;
  position: sticky !important;
  top: 38px;
  white-space: nowrap;
  font-family: var(--f-family-1);
  z-index: 9;
}

nav .title-name {
  font-size: 1.2rem;
}

nav .showMobiMenu {
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav .showMobiMenu .bi {
  font-size: 1.5rem;
}

nav .nav-area>div:not(:last-of-type) {
  border-right: 2px solid rgba(0, 0, 0, 0.8) !important;
}

nav .nav-area span {
  display: block;
  padding: .6rem 1rem;
  font-size: 1.1rem;
  cursor: pointer;
}

nav .nav-area span:hover {
  color: var(--c-assist2);
}

nav ul {
  position: absolute;
  background-color: var(--c-main-1);
  margin: 0;
  padding: .5rem 0 1rem;
  display: none;
  z-index: 9;
}

nav ul .ntchild {
  color: var(--c-assist3);
  font-size: 1rem;
  line-height: 2;
  display: flex;
  align-items: center;
}

nav ul .ntchild hr {
  flex: 1;
  background: repeating-linear-gradient(var(--c-assist3), var(--c-assist3) 1px, transparent 0, transparent 3px, var(--c-assist3) 0, var(--c-assist3) 4px);;
  margin: 0;
  opacity: .5;
  height: 4px;
}

nav ul a {
  display: block;
  color: #fff !important;
  line-height: 1.9;
  padding: 0 1rem;
}

nav ul a:hover {
  background-color: var(--c-assist2);
}


/* offcanvas area ============================================ */
.offcanvas {
  max-width: 85%;
}


/* main area ============================================ */
h1 {
  background-image: url(./img/hbg2.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: min(calc(180px + 1vw), 200px) auto;
  font-family: var(--f-family-1);
  font-size: min(calc(1.3rem + 1vw), 30px);
  color: var(--c-main-1);
  margin-bottom: 2rem;
  height: 50px;
  padding: 10px 0 0 min(calc(65px + 1vw), 100px);
}

h2 {
  font-family: var(--f-family-1);
  font-size: min(calc(1rem + 1vw), 24px);
  display: flex;
  align-items: flex-start;
  margin-left: 2rem;
}

h2 .bi {
  margin-right: 10px;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  transform: translateY(-4px);
}

h3 {
  font-size: 18px;
}