@charset "UTF-8";
/***************************************************************************/
/*                                  Reset                                  */
/***************************************************************************/
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font size within `section` and `article` contexts in
 * Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/**
 * Set consistent quote types.
 */
q {
  quotes: "“" "”" "‘" "’";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type=checkbox],
input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/***************************************************************************/
/*                                   Color                                 */
/***************************************************************************/
/***************************************************************************/
/*                                 Style                                   */
/***************************************************************************/
.success {
  color: #198754;
}

.danger {
  color: #DC3545;
}

.warning {
  color: #F3BC17;
}

.info {
  color: #04A4C4;
}

.bg--success {
  background-color: #198754;
}

.bg--danger {
  background-color: #DC3545;
}

.bg--warning {
  background-color: #F3BC17;
}

.bg--info {
  background-color: #04A4C4;
}

.btn-outline.success {
  color: #198754 !important;
  border-color: #198754 !important;
}

.btn-outline.danger {
  color: #DC3545 !important;
  border-color: #DC3545 !important;
}

.btn-outline.warning {
  color: #F3BC17 !important;
  border-color: #F3BC17 !important;
}

.btn-outline.info {
  color: #04A4C4 !important;
  border-color: #04A4C4 !important;
}

.red {
  color: #dc3545;
}

/***************************************************************************/
/*                                 Typography                              */
/***************************************************************************/
body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  -webkit-text-size-adjust: none;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  color: #727171;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Lora", serif;
  font-weight: 700;
  line-height: 1.25;
  color: #727171;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1.1rem;
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
  h2, .h2 {
    font-size: 2rem;
  }
  h3, .h3 {
    font-size: 1.75rem;
  }
  h4, .h4 {
    font-size: 1.5rem;
  }
  h5, .h5 {
    font-size: 1.25rem;
  }
  h6, .h6 {
    font-size: 1rem;
  }
}
p, li, th, td {
  font-size: 1.1rem;
  line-height: 1.65rem;
  color: #727171;
  margin-bottom: 1rem;
}

p:last-child, li:last-child {
  margin-bottom: 0;
}

th, td {
  line-height: 1.25;
  margin-bottom: 0;
}

p.small {
  font-size: 1rem;
  line-height: 1.5;
}

ul {
  line-height: 1;
}
ul li {
  margin-bottom: 0.25rem;
}
ul li:last-child {
  margin-bottom: 0;
}

/***************************************************************************/
/*                                FormStyle                                */
/***************************************************************************/
label.form-label {
  font-weight: 400;
  word-break: break-word;
}

input.form-control, select.form-select, textarea.form-control {
  color: #727171;
}

.form-control.is-valid:focus {
  border-color: #289A51;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}

.form-select.is-valid {
  border-color: #289A51;
}

.was-validated .form-control:valid:focus {
  border-color: #289A51;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}
.was-validated .form-control:invalid:focus {
  border-color: #289A51;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}
.was-validated .form-control:valid {
  border-color: #289A51;
}
.was-validated .form-select:valid {
  border-color: #289A51;
}
.was-validated .form-select:valid:focus {
  border-color: #289A51;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}
.was-validated .form-check-input:valid:checked {
  background-color: #289A51;
}
.was-validated .form-check-input:valid:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}
.was-validated .form-check-input:valid {
  border-color: #289A51;
}
.was-validated .form-check-input:valid ~ .form-check-label {
  color: #289A51;
}

/* =============================================================== */
/* input
/* =============================================================== */
input[type=text]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=number]::-moz-placeholder {
  color: #adb5bd;
  font-weight: 300;
  letter-spacing: 0.7px;
}
input[type=text]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder {
  color: #adb5bd;
  font-weight: 300;
  letter-spacing: 0.7px;
}
input[type=text]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder {
  color: #adb5bd;
  font-weight: 300;
  letter-spacing: 0.7px;
}
input[type=text]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=url]::-ms-input-placeholder, input[type=search]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder {
  color: #adb5bd;
  font-weight: 300;
  letter-spacing: 0.7px;
}
input[type=text]::placeholder,
input[type=tel]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=search]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder {
  color: #adb5bd;
  font-weight: 300;
  letter-spacing: 0.7px;
}

input[type=color i] {
  inline-size: 50px;
  padding: 1px 2px;
  vertical-align: middle;
  color: buttontext;
  background-color: buttonface;
  border: buttonborder 1px solid;
  -o-border-image: initial;
     border-image: initial;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  cursor: default;
  border-radius: 4px;
}

.form-control-color:valid {
  width: 50px !important;
  padding: 1px 2px !important;
  background-image: none !important;
}

input[type=range] {
  width: 100%;
}

.form-control:focus {
  border-color: #7edda0;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}

input[type=text].ring-primary-500 {
  -webkit-box-shadow: 0px 0px 0px 1px #289A51;
          box-shadow: 0px 0px 0px 1px #289A51;
}

input.focus\:ring-2:focus {
  -webkit-box-shadow: 0px 0px 0px 1px #289A51;
          box-shadow: 0px 0px 0px 1px #289A51;
}

/* =============================================================== */
/* Select
/* =============================================================== */
select::-moz-placeholder {
  color: #adb5bd;
}
select::-webkit-input-placeholder {
  color: #adb5bd;
}
select:-ms-input-placeholder {
  color: #adb5bd;
}
select::-ms-input-placeholder {
  color: #adb5bd;
}
select::placeholder {
  color: #adb5bd;
}

.form-select:focus {
  border-color: #7edda0;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}

button.focus\:ring-2:focus {
  -webkit-box-shadow: 0px 0px 0px 1px #289A51;
          box-shadow: 0px 0px 0px 1px #289A51;
}

/* =============================================================== */
/* Checkbox, Radio, Switches, Checkbox Button, Radio Button
/* =============================================================== */
input[type=checkbox]:checked input[type=radio]:checked,
.form-check-input:checked {
  background-color: #289A51;
  border-color: #7edda0;
}

.form-check {
  min-height: 1.9rem;
  margin-bottom: 0.2rem;
}
.form-check .form-check-input {
  width: 25px;
  height: 25px;
  margin-top: -0.06rem;
  margin-right: 0.5rem;
}

.form-check-input:focus {
  border-color: #7edda0;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}

.form-switch {
  display: flex;
  align-items: center;
}
.form-switch .form-check-input {
  width: 2.5rem;
  margin-right: 0px;
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked ~ .active {
  display: block;
}
.form-switch .form-check-input:checked ~ .noActive {
  display: none;
}
.form-switch .form-check-input ~ .active {
  display: none;
}
.form-switch .form-check-input ~ .noActive {
  display: block;
}

input.full[type=checkbox],
input.full[type=radio] {
  position: absolute;
  opacity: 0;
}

.form-checkbox.text-primary-500:checked, .form-radio.text-primary-500:checked {
  background-color: #289A51;
}

/* =============================================================== */
/* textarea
/* =============================================================== */
textarea.form-control::-moz-placeholder {
  color: #adb5bd;
}
textarea.form-control::-webkit-input-placeholder {
  color: #adb5bd;
}
textarea.form-control:-ms-input-placeholder {
  color: #adb5bd;
}
textarea.form-control::-ms-input-placeholder {
  color: #adb5bd;
}
textarea.form-control::placeholder {
  color: #adb5bd;
}

textarea.focus\:ring-2:focus {
  -webkit-box-shadow: 0px 0px 0px 1px #289A51;
          box-shadow: 0px 0px 0px 1px #289A51;
}

/* =============================================================== */
/* Button
/* =============================================================== */
button.btn_hover:hover[type=button],
input.btn_hover:hover[type=button],
input.btn_hover:hover[type=submit],
input.btn_hover:hover[type=reset] {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

button.bg-primary-500 {
  background-color: #289A51;
}

button.bg-primary-500:hover {
  background-color: #33c266;
}

.hover\:bg-primary-50 {
  color: #289A51;
}

.hover\:bg-primary-50:hover {
  color: #289A51;
  background-color: #a6e8be;
}

/* =============================================================== */
/* range
/* =============================================================== */
input[type=range].text-primary-500 {
  color: #289A51;
}

input[type=range] ~ span.bg-primary-500 {
  background-color: #289A51;
}

/***************************************************************************/
/*                                    Plug                                 */
/***************************************************************************/
/* ====================== 文字 ====================== */
.text_center {
  text-align: center;
}

.text_left {
  text-align: left;
}

.text_right {
  text-align: right;
}

.text_nowrap {
  white-space: nowrap;
}

/* ====================== 圖片 ====================== */
img.center {
  margin: 0 auto;
  display: block;
}

/* ====================== 浮動 ====================== */
.por {
  position: relative;
}

.poa {
  position: absolute;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.d-b {
  display: block;
}

.d-ib {
  display: inline-block;
}

.ai_top {
  align-items: flex-start !important;
}

.ai_bottom {
  align-items: flex-end !important;
}

.ai_center {
  align-items: center !important;
}

.jc_center {
  justify-content: center;
}

.gap_8 {
  gap: 0 0.5rem !important;
}

.gap_0, .noGap {
  gap: 0 !important;
}

/* =============================================================== */
/* 表格 Table
/* =============================================================== */
table {
  caption-side: top;
}

table.style_table {
  border-top: #78A221 1px solid;
  border-left: #78A221 1px solid;
}
table.style_table th, table.style_table td {
  padding: 8px 10px;
  border-right: #78A221 1px solid;
  border-bottom: #78A221 1px solid;
}
table.style_table thead tr th {
  color: #fff;
  background-color: #89B828;
}
table.style_table thead tr td {
  font-weight: bold;
  background-color: #89B828;
}
table.style_table tr.odd {
  background: #fcfdf8;
}

table.style_table_left {
  margin: 0 auto 20px auto;
  border-top: #78A221 1px solid;
  border-left: #78A221 1px solid;
}
table.style_table_left th, table.style_table_left td {
  padding: 8px 10px;
  text-align: center;
  border-right: #78A221 1px solid;
  border-bottom: #78A221 1px solid;
}
table.style_table_left th {
  color: #fff;
  background-color: #89B828;
}
table.style_table_left th.two {
  color: #fff;
  background-color: #6a8e1f;
}
table.style_table_left td.one {
  background-color: #eee;
}
table.style_table_left tr.odd {
  background: #fcfdf8;
}

/* =============================================================== */
/* RWD
/* =============================================================== */
.Desktop, .Pad {
  display: block;
}

.Mobile {
  display: none !important;
}

@media screen and (max-width: 576px) {
  .Desktop, .Pad {
    display: none !important;
  }
  .Mobile {
    display: block !important;
  }
}
.Desktop_table, .Pad_table {
  display: table;
}

.Mobile_table {
  display: none !important;
}

@media screen and (max-width: 576px) {
  .Desktop_table, .Pad_table {
    display: none !important;
  }
  .Mobile_table {
    display: table !important;
  }
}
/* =============================================================== */
/* 特效
/* =============================================================== */
.ServicesArchitectureNav.NavRight {
  width: 100%;
  position: relative;
}
.ServicesArchitectureNav.NavRight .navTop {
  width: 100%;
  position: absolute;
  top: 0px;
  display: -ms-grid;
  display: grid;
}
.ServicesArchitectureNav.NavRight .navTop ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.ServicesArchitectureNav.NavRight .navTop li {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 500;
}
.ServicesArchitectureNav.NavRight .navTop svg {
  height: 60px;
}
.ServicesArchitectureNav.NavRight .navTop svg path {
  fill: #fff;
}
.ServicesArchitectureNav.NavRight .navTop a {
  padding: 5px 20px 9px;
  color: #727171;
  display: block;
  text-decoration: none;
  border: #fff 1px solid;
  border-radius: 20rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.ServicesArchitectureNav.NavRight .navTop a:hover {
  color: #fff;
  background-color: #289A51;
  text-shadow: 1px 1px 3px #555;
  border: #1d723c 1px solid;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}
.ServicesArchitectureNav.NavRight .CardStickyCorner {
  position: absolute;
  top: 60px;
}
.ServicesArchitectureNav.NavRight img {
  width: 100%;
  border-radius: 2.5rem;
}
.ServicesArchitectureNav.NavRight .navTop {
  -ms-grid-columns: 1fr auto;
  grid-template-columns: 1fr auto;
}
.ServicesArchitectureNav.NavRight .navTop ul {
  border-radius: 2.3rem 0 0 0;
}
.ServicesArchitectureNav.NavRight .navTop svg.right {
  padding-right: 180px;
}
.ServicesArchitectureNav.NavRight .navTop svg.left {
  display: none;
}
.ServicesArchitectureNav.NavRight .CardStickyCorner {
  left: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.ServicesArchitectureNav.NavLeft {
  width: 100%;
  position: relative;
}
.ServicesArchitectureNav.NavLeft .navTop {
  width: 100%;
  position: absolute;
  top: 0px;
  display: -ms-grid;
  display: grid;
}
.ServicesArchitectureNav.NavLeft .navTop ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.ServicesArchitectureNav.NavLeft .navTop li {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 500;
}
.ServicesArchitectureNav.NavLeft .navTop svg {
  height: 60px;
}
.ServicesArchitectureNav.NavLeft .navTop svg path {
  fill: #fff;
}
.ServicesArchitectureNav.NavLeft .navTop a {
  padding: 5px 20px 9px;
  color: #727171;
  display: block;
  text-decoration: none;
  border: #fff 1px solid;
  border-radius: 20rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.ServicesArchitectureNav.NavLeft .navTop a:hover {
  color: #fff;
  background-color: #289A51;
  text-shadow: 1px 1px 3px #555;
  border: #1d723c 1px solid;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}
.ServicesArchitectureNav.NavLeft .CardStickyCorner {
  position: absolute;
  top: 60px;
}
.ServicesArchitectureNav.NavLeft img {
  width: 100%;
  border-radius: 2.5rem;
}
.ServicesArchitectureNav.NavLeft .navTop {
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
}
.ServicesArchitectureNav.NavLeft .navTop ul {
  border-radius: 0 2.3rem 0 0;
}
.ServicesArchitectureNav.NavLeft .navTop svg.right {
  display: none;
}
.ServicesArchitectureNav.NavLeft .navTop svg.left {
  padding-right: 180px;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.ServicesArchitectureNav.NavLeft .CardStickyCorner {
  right: 0;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.ServicesArchitectureBox__TL {
  width: 100%;
  position: relative;
}
.ServicesArchitectureBox__TL img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2.5rem;
}
.ServicesArchitectureBox__TL .TextCard {
  z-index: 10;
  max-width: 500px;
  position: absolute;
  background-color: #fff;
  padding: 1rem 1rem 1.5rem 2rem;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
.ServicesArchitectureBox__TL .TextCard .CardStickyCorner1, .ServicesArchitectureBox__TL .TextCard .CardStickyCorner2 {
  width: 40px;
  height: 40px;
  position: absolute;
  overflow: hidden;
}
.ServicesArchitectureBox__TL .TextCard {
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  border-radius: 0 0 2.5rem 0;
}
.ServicesArchitectureBox__TL .TextCard .CardStickyCorner1 {
  top: 0px;
  right: -40px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.ServicesArchitectureBox__TL .TextCard .CardStickyCorner2 {
  bottom: -40px;
  left: 0px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.ServicesArchitectureBox__TR {
  width: 100%;
  position: relative;
}
.ServicesArchitectureBox__TR img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2.5rem;
}
.ServicesArchitectureBox__TR .TextCard {
  z-index: 10;
  max-width: 500px;
  position: absolute;
  background-color: #fff;
  padding: 1rem 1rem 1.5rem 2rem;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
.ServicesArchitectureBox__TR .TextCard .CardStickyCorner1, .ServicesArchitectureBox__TR .TextCard .CardStickyCorner2 {
  width: 40px;
  height: 40px;
  position: absolute;
  overflow: hidden;
}
.ServicesArchitectureBox__TR .TextCard {
  top: 0;
  bottom: auto;
  left: auto;
  right: 0;
  border-radius: 0 0 0 2.5rem;
}
.ServicesArchitectureBox__TR .TextCard .CardStickyCorner1 {
  top: 0px;
  left: -40px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.ServicesArchitectureBox__TR .TextCard .CardStickyCorner2 {
  bottom: -40px;
  right: 0px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.ServicesArchitectureBox__BL {
  width: 100%;
  position: relative;
}
.ServicesArchitectureBox__BL img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2.5rem;
}
.ServicesArchitectureBox__BL .TextCard {
  z-index: 10;
  max-width: 500px;
  position: absolute;
  background-color: #fff;
  padding: 1rem 1rem 1.5rem 2rem;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
.ServicesArchitectureBox__BL .TextCard .CardStickyCorner1, .ServicesArchitectureBox__BL .TextCard .CardStickyCorner2 {
  width: 40px;
  height: 40px;
  position: absolute;
  overflow: hidden;
}
.ServicesArchitectureBox__BL .TextCard {
  top: auto;
  bottom: 0;
  left: 0;
  right: auto;
  border-radius: 0 2.5rem 0 0;
}
.ServicesArchitectureBox__BL .TextCard .CardStickyCorner1 {
  top: -40px;
  left: 0px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.ServicesArchitectureBox__BL .TextCard .CardStickyCorner2 {
  bottom: 0px;
  right: -40px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.ServicesArchitectureBox__BR {
  width: 100%;
  position: relative;
}
.ServicesArchitectureBox__BR img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2.5rem;
}
.ServicesArchitectureBox__BR .TextCard {
  z-index: 10;
  max-width: 500px;
  position: absolute;
  background-color: #fff;
  padding: 1rem 1rem 1.5rem 2rem;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
.ServicesArchitectureBox__BR .TextCard .CardStickyCorner1, .ServicesArchitectureBox__BR .TextCard .CardStickyCorner2 {
  width: 40px;
  height: 40px;
  position: absolute;
  overflow: hidden;
}
.ServicesArchitectureBox__BR .TextCard {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  border-radius: 2.5rem 0 0 0;
}
.ServicesArchitectureBox__BR .TextCard .CardStickyCorner1 {
  top: -40px;
  right: 0px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.ServicesArchitectureBox__BR .TextCard .CardStickyCorner2 {
  bottom: 0px;
  left: -40px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

/* =============================================================== */
/* 動畫
/* =============================================================== */
/***************************************************************************/
/*                               Form Company                              */
/***************************************************************************/
.w_120 {
  width: 120px;
}

.w_200 {
  width: 200px;
}

.df_120 {
  flex: 0 1 120px !important;
}

.df_200 {
  flex: 0 1 200px !important;
}

.df_auto {
  flex: auto 0 1 !important;
}

/* =============================================================== */
/* AAAAAAAA
/* =============================================================== */
h3.formTitle {
  margin-top: 1rem;
}

fieldset.pageForm__item {
  padding: 0 0 1rem;
  margin: 0 0 2rem;
  border-bottom: #adb5bd 1px dashed;
  border-top: 0px none;
  border-left: 0px none;
  border-right: 0px none;
  font-family: "Roboto", sans-serif;
}
fieldset.pageForm__item legend.h4 {
  color: #289A51;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

/* =============================================================== */
/* 2欄 ～ 12欄
/* =============================================================== */
.form__Layout {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.form__Layout2 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout2 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.form__Layout3 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout3 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.form__Layout4 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout4 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .form__Layout4 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

.form__Layout5 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[5];
  grid-template-columns: repeat(5, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout5 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .form__Layout5 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

.form__Layout6 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout6 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .form__Layout6 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

.form__Layout8 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[8];
  grid-template-columns: repeat(8, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout8 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .form__Layout8 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

.form__Layout10 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[10];
  grid-template-columns: repeat(10, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout10 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .form__Layout10 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

.form__Layout12 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (1fr)[12];
  grid-template-columns: repeat(12, 1fr);
}
@media screen and (max-width: 576px) {
  .form__Layout12 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .form__Layout12 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

.form__Layout2-aa {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (auto)[2];
  grid-template-columns: repeat(2, auto);
  justify-content: start;
}
@media screen and (max-width: 576px) {
  .form__Layout2-aa {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.form__Layout3-1a1 {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
}
@media screen and (max-width: 576px) {
  .form__Layout3-1a1 {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.form__Layout3-a {
  display: -ms-grid;
  display: grid;
  gap: 0 1rem;
  align-items: top;
  justify-content: center;
  -ms-grid-columns: (auto)[3];
  grid-template-columns: repeat(3, auto);
  justify-content: flex-start;
}
@media screen and (max-width: 576px) {
  .form__Layout3-a {
    gap: 0;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.noGap {
  gap: 0;
}

.form__Layout.df, .form__Layout.df_0, .form__Layout.df_8 {
  align-items: start;
  justify-content: start;
}
.form__Layout.df button.btn, .form__Layout.df_0 button.btn, .form__Layout.df_8 button.btn {
  margin-bottom: 1rem;
}

/* =============================================================== */
/* 直式排版
/* =============================================================== */
.form__item {
  margin-bottom: 1rem;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}
.form__item .form__item {
  margin-bottom: 0;
}
.form__item .input-group .btn {
  width: 20%;
}
.form__item .input-group > .btn {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}
.form__item .input-group > select.form-select {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}
.form__item .input-group > input[type=date].form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.form__item .input-group > input[type=date].form-control:nth-child(4) {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

.df, .df_0, .df_8 {
  display: flex;
  gap: 0 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.df label.form-label, .df_0 label.form-label, .df_8 label.form-label {
  padding: 0.375rem 0;
  margin-right: 0;
  margin-bottom: 0;
}
.df .form-control, .df_0 .form-control, .df_8 .form-control, .df .form-select, .df_0 .form-select, .df_8 .form-select, .df input[type=range], .df_0 input[type=range], .df_8 input[type=range] {
  flex-basis: 0;
  flex-grow: 1;
}

.df_8 {
  gap: 0.5rem;
}

.df_0 {
  gap: 0;
}

.df.mb_0 .form__item, .mb_0.df_8 .form__item, .mb_0.df_0 .form__item {
  margin-bottom: 0;
}
@media screen and (max-width: 576px) {
  .df.mb_0, .mb_0.df_8, .mb_0.df_0 {
    display: block;
  }
  .df.mb_0 .form__item, .mb_0.df_8 .form__item, .mb_0.df_0 .form__item {
    margin-bottom: 1rem;
  }
  .df.mb_0 .form__item:last-child, .mb_0.df_8 .form__item:last-child, .mb_0.df_0 .form__item:last-child {
    margin-bottom: 0;
  }
}

.clr-break-row {
  width: 100%;
  margin-top: 0.2rem;
  margin-bottom: 0;
}

.form__item.df.mb0, .form__item.mb0.df_8, .form__item.mb0.df_0 {
  margin-bottom: 0.5rem;
}

.form__item.df .form-check, .form__item.df_8 .form-check, .form__item.df_0 .form-check {
  margin-top: 0.375rem;
}

.formBox {
  width: 100%;
  margin-top: 0.2rem;
  margin-bottom: 0;
}
.formBox .form__item {
  margin-bottom: 0.2rem;
}
.formBox .form__item:last-child {
  margin-bottom: 0;
}

.formBox.disabled label, .formBox.disabled p, .formBox.disabled span {
  color: #b2b1b1;
}

/* =============================================================== */
/* Checks, Radios, Switches
/* =============================================================== */
.form-check label.form-check-label {
  display: block;
  white-space: nowrap;
}
.form-check .form-select, .form-check .form__item {
  margin-top: 0rem;
  margin-bottom: 0.5rem;
}
.form-check .form-check-input:checked ~ .form__item .form-select, .form-check .form-check-input:checked ~ .form__item .form-control {
  background-color: #b2ebc7 !important;
  border-radius: 4px;
}

.form-check.normal label.form-check-label {
  white-space: normal;
}

.form-switch {
  flex-wrap: wrap;
}
.form-switch .clr-break-row .invalid-feedback, .form-switch .clr-break-row .valid-feedback {
  margin-left: 0.65rem;
}

.ChecksBtnBox, .RadioBtnBox {
  margin-top: 0.5rem;
}
.ChecksBtnBox .form-check, .RadioBtnBox .form-check {
  padding-left: 0;
}

.ChecksBtn {
  padding-top: 0;
  margin-right: 0.1rem;
  display: inline;
}
.ChecksBtn label {
  margin: 3px 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #727171;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  white-space: nowrap;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ChecksBtn svg path {
  fill: #6c757d;
}
.ChecksBtn input[type=checkbox], .ChecksBtn input[type=radio] {
  position: absolute;
  opacity: 0;
}
.ChecksBtn input[type=checkbox]:checked + label, .ChecksBtn input[type=radio]:checked + label {
  color: #fff;
  background-color: #289A51;
  border: 1px solid #dee2e6;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.ChecksBtn input[type=checkbox]:focus + label, .ChecksBtn input[type=radio]:focus + label {
  border: 1px solid #289A51;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}
.ChecksBtn label {
  padding: 0.375rem 7px 0.375rem 24px;
}
.ChecksBtn label svg {
  height: 14px;
}
.ChecksBtn input[type=checkbox] + label .svg-inline--fa.fa-plus {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 1;
}
.ChecksBtn input[type=checkbox]:checked + label .svg-inline--fa.fa-plus {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 0;
  -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
}
.ChecksBtn input[type=checkbox] + label .svg-inline--fa.fa-check {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 0;
}
.ChecksBtn input[type=checkbox]:checked + label .svg-inline--fa.fa-check {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 1;
  -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
}
.ChecksBtn input[type=checkbox]:checked + label .svg-inline--fa.fa-check path {
  fill: #fff;
}

.RadioBtn {
  padding-top: 0;
  margin-right: 0.1rem;
  display: inline;
}
.RadioBtn label {
  margin: 3px 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #727171;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  white-space: nowrap;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.RadioBtn svg path {
  fill: #6c757d;
}
.RadioBtn input[type=checkbox], .RadioBtn input[type=radio] {
  position: absolute;
  opacity: 0;
}
.RadioBtn input[type=checkbox]:checked + label, .RadioBtn input[type=radio]:checked + label {
  color: #fff;
  background-color: #289A51;
  border: 1px solid #dee2e6;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.RadioBtn input[type=checkbox]:focus + label, .RadioBtn input[type=radio]:focus + label {
  border: 1px solid #289A51;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}
.RadioBtn label {
  padding: 0.375rem 7px 0.375rem 28px;
}
.RadioBtn label svg {
  height: 18px;
}
.RadioBtn input[type=radio] + label .svg-inline--fa.fa-circle {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 1;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.RadioBtn input[type=radio]:checked + label .svg-inline--fa.fa-circle {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.RadioBtn input[type=radio] + label .svg-inline--fa.fa-circle-dot {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.RadioBtn input[type=radio]:checked + label .svg-inline--fa.fa-circle-dot {
  position: absolute;
  left: 6px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s;
  transition: transform 0.3s ease-in-out, opacity 0.3s, -webkit-transform 0.3s ease-in-out;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.RadioBtn input[type=radio]:checked + label .svg-inline--fa.fa-circle-dot path {
  fill: #fff;
}

.ChecksImg, .RadioImg {
  padding-top: 0;
  margin-right: 0.1rem;
  display: inline;
}
.ChecksImg label, .RadioImg label {
  margin: 3px 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #727171;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  white-space: nowrap;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ChecksImg svg path, .RadioImg svg path {
  fill: #6c757d;
}
.ChecksImg input[type=checkbox], .ChecksImg input[type=radio], .RadioImg input[type=checkbox], .RadioImg input[type=radio] {
  position: absolute;
  opacity: 0;
}
.ChecksImg input[type=checkbox]:checked + label, .ChecksImg input[type=radio]:checked + label, .RadioImg input[type=checkbox]:checked + label, .RadioImg input[type=radio]:checked + label {
  color: #fff;
  background-color: #289A51;
  border: 1px solid #dee2e6;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.ChecksImg input[type=checkbox]:focus + label, .ChecksImg input[type=radio]:focus + label, .RadioImg input[type=checkbox]:focus + label, .RadioImg input[type=radio]:focus + label {
  border: 1px solid #289A51;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
}
.ChecksImg label, .RadioImg label {
  padding: 10px 25px 10px 10px;
}
.ChecksImg img, .RadioImg img {
  border: #e9ecef 1px solid;
}
.ChecksImg img, .ChecksImg svg, .RadioImg img, .RadioImg svg {
  height: 100px;
  border-radius: 5px;
}
.ChecksImg svg path, .RadioImg svg path {
  fill: #6c757d;
}
.ChecksImg svg.svg-inline--fa, .RadioImg svg.svg-inline--fa {
  height: 17px;
  position: absolute;
  top: 5px;
  right: 4px;
}
.ChecksImg input[type=checkbox] + label, .ChecksImg input[type=radio] + label, .RadioImg input[type=checkbox] + label, .RadioImg input[type=radio] + label {
  border-width: 2px;
}
.ChecksImg input[type=checkbox] + label .fa-circle, .ChecksImg input[type=radio] + label .fa-circle, .RadioImg input[type=checkbox] + label .fa-circle, .RadioImg input[type=radio] + label .fa-circle {
  display: block;
}
.ChecksImg input[type=checkbox] + label .fa-circle path, .ChecksImg input[type=radio] + label .fa-circle path, .RadioImg input[type=checkbox] + label .fa-circle path, .RadioImg input[type=radio] + label .fa-circle path {
  fill: #ced4da;
}
.ChecksImg input[type=checkbox] + label .fa-circle-check, .ChecksImg input[type=radio] + label .fa-circle-check, .RadioImg input[type=checkbox] + label .fa-circle-check, .RadioImg input[type=radio] + label .fa-circle-check {
  display: none;
}
.ChecksImg input[type=checkbox]:checked + label, .ChecksImg input[type=radio]:checked + label, .RadioImg input[type=checkbox]:checked + label, .RadioImg input[type=radio]:checked + label {
  background-color: #fff;
  border: 2px solid #289A51;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.ChecksImg input[type=checkbox]:checked + label .fa-circle, .ChecksImg input[type=radio]:checked + label .fa-circle, .RadioImg input[type=checkbox]:checked + label .fa-circle, .RadioImg input[type=radio]:checked + label .fa-circle {
  display: none;
}
.ChecksImg input[type=checkbox]:checked + label .fa-circle-check, .ChecksImg input[type=radio]:checked + label .fa-circle-check, .RadioImg input[type=checkbox]:checked + label .fa-circle-check, .RadioImg input[type=radio]:checked + label .fa-circle-check {
  display: block;
}
.ChecksImg input[type=checkbox]:checked + label .fa-circle-check path, .ChecksImg input[type=radio]:checked + label .fa-circle-check path, .RadioImg input[type=checkbox]:checked + label .fa-circle-check path, .RadioImg input[type=radio]:checked + label .fa-circle-check path {
  fill: #289A51;
}
.ChecksImg input[type=checkbox]:focus + label, .ChecksImg input[type=radio]:focus + label, .RadioImg input[type=checkbox]:focus + label, .RadioImg input[type=radio]:focus + label {
  background-color: #fff;
  border: 2px solid #289A51;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* =============================================================== */
/* Button 按鈕
/* =============================================================== */
button.btn, a.btn {
  white-space: nowrap;
  border: #ced4da 1px solid;
  color: #727171;
  background-color: #e9ecef;
}
button.btn .svg-inline--fa, a.btn .svg-inline--fa {
  font-size: 1.2rem;
  vertical-align: sub;
}

button.btn.btn-outline, a.btn.btn-outline {
  white-space: nowrap;
  color: #727171;
  border: #ced4da 1px solid;
  background-color: #fff !important;
}
button.btn.btn-outline .svg-inline--fa, a.btn.btn-outline .svg-inline--fa {
  font-size: 1.2rem;
  vertical-align: sub;
}

button.btn:hover, button.btn:active, button.btn:first-child:active, a.btn:hover, a.btn:active, :not(.btn-check) + .btn:active {
  color: #343a40;
  background-color: #dee2e6;
  border: #ced4da 1px solid;
}

.btn.success {
  color: #fff;
  background-color: #198754;
}
.btn.success:hover, .btn.success:active {
  color: #fff;
  background-color: #198754;
}

.btn.danger {
  color: #fff;
  background-color: #DC3545;
}
.btn.danger:hover, .btn.danger:active {
  color: #fff;
  background-color: #DC3545;
}

.btn.warning {
  color: #fff;
  background-color: #F3BC17;
}
.btn.warning:hover, .btn.warning:active {
  color: #fff;
  background-color: #F3BC17;
}

.btn.info {
  color: #fff;
  background-color: #04A4C4;
}
.btn.info:hover, .btn.info:active {
  color: #fff;
  background-color: #04A4C4;
}

.btn.btn-outline.success {
  color: #198754;
  border-color: #198754;
}
.btn.btn-outline.success:hover, .btn.btn-outline.success:active {
  color: #198754;
  border-color: #198754;
}

.btn.btn-outline.danger {
  color: #DC3545;
  border-color: #DC3545;
}
.btn.btn-outline.danger:hover, .btn.btn-outline.danger:active {
  color: #DC3545;
  border-color: #DC3545;
}

.btn.btn-outline.warning {
  color: #F3BC17;
  border-color: #F3BC17;
}
.btn.btn-outline.warning:hover, .btn.btn-outline.warning:active {
  color: #F3BC17;
  border-color: #F3BC17;
}

.btn.btn-outline.info {
  color: #04A4C4;
  border-color: #04A4C4;
}
.btn.btn-outline.info:hover, .btn.btn-outline.info:active {
  color: #04A4C4;
  border-color: #04A4C4;
}

.button_box {
  margin: 1.5rem auto;
  text-align: center;
}
.button_box .btn {
  min-width: 120px;
  margin: 0 3px;
  font-size: 1.1rem;
  color: #fff;
  background-color: #289A51 !important;
}
.button_box .btn:hover, .button_box .btn:active, .button_box .btn:active, .button_box .btn:first-child:active {
  color: #fff;
  background-color: #238646;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  text-shadow: none;
}

.button_box.btn--W100 button.btn {
  width: 100%;
  margin-bottom: 1rem;
  display: block;
}

.display--block .btn {
  margin-bottom: 1rem;
  display: block;
}

.display--inlineblock .btn {
  margin-bottom: 1rem;
  display: inline-block;
}

/* =============================================================== */
/* 開關按鈕 Switches
/* =============================================================== */
/* Colors: Default */
.toggle-switchy {
  color: #fff;
}
.toggle-switchy > input + .toggle:before {
  content: "ON";
}
.toggle-switchy > input + .toggle:after {
  content: "OFF";
}
.toggle-switchy > input + .toggle > .switch {
  background: #fff;
}
.toggle-switchy > input + .toggle + .label {
  color: #000;
}
.toggle-switchy > input:checked + .toggle {
  background: #198754;
}
.toggle-switchy > input:checked + .toggle > .switch {
  border: 3px solid #198754;
}
.toggle-switchy > input:not(:checked) + .toggle {
  background: #dc3545;
}
.toggle-switchy > input:not(:checked) + .toggle > .switch {
  border: 3px solid #dc3545;
}
.toggle-switchy > input:focus + .toggle, .toggle-switchy > input:active + .toggle {
  -webkit-box-shadow: 0 0 5px 3px rgba(40, 154, 81, 0.5);
          box-shadow: 0 0 5px 3px rgba(40, 154, 81, 0.5);
}

/* Rounded switch corners 圓角開關 */
.toggle-switchy > input + .toggle {
  border-radius: 4px;
}

.toggle-switchy > input + .toggle .switch {
  border-radius: 6px;
}

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY 核心風格
////////////////////////// */
.toggle-switchy {
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          -ms-user-select: none;
      user-select: none;
  position: relative;
}
.toggle-switchy:hover {
  cursor: pointer;
}
.toggle-switchy > input {
  position: absolute;
  opacity: 0;
}
.toggle-switchy > input + .toggle {
  align-items: center;
  position: relative;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.toggle-switchy > input + .toggle > .switch {
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 3;
}
.toggle-switchy > input[disabled] + .toggle {
  opacity: 0.5;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.toggle-switchy > input[disabled] + .toggle:hover {
  cursor: not-allowed;
}
.toggle-switchy .form-check-label {
  margin-left: 10px;
  color: #727171;
  font-weight: 500;
}
.toggle-switchy .form-check-input:checked ~ .active {
  display: block;
}
.toggle-switchy .form-check-input:checked ~ .noActive {
  display: none;
}
.toggle-switchy .form-check-input ~ .active {
  display: none;
}
.toggle-switchy .form-check-input ~ .noActive {
  display: block;
}

/* Labels 標籤 */
.toggle-switchy > input + .toggle:before, .toggle-switchy > input + .toggle:after {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 2;
  height: 100%;
}
.toggle-switchy > input + .toggle:before {
  right: 55%;
}
.toggle-switchy > input + .toggle:after {
  left: 50%;
}
.toggle-switchy > input + .toggle + .label {
  margin-left: 10px;
}

.toggle-switchy[data-label=left] > input + .toggle {
  order: 2;
}
.toggle-switchy[data-label=left] > input + .toggle + .label {
  order: 1;
  margin-left: 0;
  margin-right: 10px;
}

/* Show / Hide 顯示/隱藏 */
.toggle-switchy > input + .toggle:before {
  opacity: 0;
}
.toggle-switchy > input:checked + .toggle:before {
  opacity: 1;
}
.toggle-switchy > input:checked + .toggle:after {
  opacity: 0;
}

/* Transitions 過渡動畫 */
.toggle-switchy > input + .toggle {
  -webkit-transition: background 200ms linear, -webkit-box-shadow 200ms linear;
  transition: background 200ms linear, -webkit-box-shadow 200ms linear;
  transition: background 200ms linear, box-shadow 200ms linear;
  transition: background 200ms linear, box-shadow 200ms linear, -webkit-box-shadow 200ms linear;
}
.toggle-switchy > input + .toggle > .switch {
  -webkit-transition: right 200ms linear, border-color 200ms linear;
  transition: right 200ms linear, border-color 200ms linear;
}
.toggle-switchy > input + .toggle:before, .toggle-switchy > input + .toggle:after {
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* Size: Extra Large 尺寸設定 */
.toggle-switchy[data-size=xl] > input + .toggle {
  width: 65px;
  height: 30px;
}
.toggle-switchy[data-size=xl] > input + .toggle > .switch {
  width: 30px;
}
.toggle-switchy[data-size=xl] > input + .toggle:before, .toggle-switchy[data-size=xl] > input + .toggle:after {
  font-size: 1rem;
}
.toggle-switchy[data-size=xl] > input:not(:checked) + .toggle > .switch {
  right: calc(100% - 30px);
}

/* =============================================================== */
/* bootstrap pagination
/* =============================================================== */
.pagination .page-link {
  color: #727171;
}
.pagination .page-link:hover {
  color: #2b4777;
}
.pagination .page-item.active .page-link {
  color: #fff;
  background-color: #4B75BD;
  border: #4B75BD 1px solid;
}

/* =============================================================== */
/* Grid 橫式排版
/* =============================================================== */
.Gform__item {
  margin-bottom: 1rem;
  display: -ms-grid;
  display: grid;
  gap: 0 0.5rem;
  align-items: start;
}
.Gform__item label.form-label {
  width: 120px;
  padding: 0.375rem 0.75rem;
  margin: 0;
  text-align: right;
  background-color: #e9ecef;
  border-radius: 4px;
}
.Gform__item .formItem {
  margin-top: 0.2rem;
}
.Gform__item .Gform__item {
  margin-bottom: 0.5rem;
}
.Gform__item .Gform__item:last-child {
  margin-bottom: 0;
}

.formItem .form-check.df.gap_8 .form-check-input, .formItem .form-check.gap_8.df_8 .form-check-input, .formItem .form-check.gap_8.df_0 .form-check-input {
  margin-right: 0;
}

.mt_0 {
  margin-top: 0 !important;
}

.mr_0 {
  margin-right: 0 !important;
}

.mt_5 {
  margin-top: 0.5rem !important;
}

.mb_5 {
  margin-bottom: 0.5rem !important;
}

.mb_10 {
  margin-bottom: 1rem !important;
}

.g_a1 {
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
}

.g_a1a {
  -ms-grid-columns: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
}

.g_1a {
  -ms-grid-columns: 1fr auto;
  grid-template-columns: 1fr auto;
}

.gcs1 {
  -ms-grid-column: 1;
      grid-column-start: 1;
}

.gcs2 {
  -ms-grid-column: 2;
      grid-column-start: 2;
}

.gce2 {
  -ms-grid-column-span: 2;
  grid-column-end: 2;
}

.gce3 {
  -ms-grid-column-span: 3;
  grid-column-end: 3;
}

.grs1 {
  -ms-grid-row: 1;
      grid-row-start: 1;
}

.grs2 {
  -ms-grid-row: 2;
      grid-row-start: 2;
}

.grs3 {
  -ms-grid-row: 3;
      grid-row-start: 3;
}

.gre2 {
  -ms-grid-row-span: 2;
  grid-row-end: 2;
}

/***************************************************************************/
/*                                    Layout                               */
/***************************************************************************/
/* =============================================================== */
/* Body
/* =============================================================== */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  height: 100vh;
  overflow-x: hidden;
}

.Web__admin {
  background-color: #f9f9f9;
}

.row {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.row::after {
  display: block;
  clear: both;
  content: "";
}

#container {
  background-color: #F5F5F5;
}

/* =============================================================== */
/* Web
/* =============================================================== */
.content {
  margin: 0px auto;
}
.content::after {
  display: block;
  clear: both;
  content: "";
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .content {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .content {
    width: 100%;
  }
}

aside {
  width: 17rem;
  background-color: #eee;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  aside {
    width: 100%;
    background-color: #aaa;
  }
}
@media screen and (max-width: 576px) {
  aside {
    margin-bottom: 40px;
  }
}

main {
  width: 100%;
}

.content.noAside {
  grid-gap: 0;
  -ms-grid-columns: 50px 1fr;
  grid-template-columns: 50px 1fr;
}

article {
  margin: 0 auto 60px;
  position: relative;
}
@media screen and (max-width: 576px) {
  article {
    margin: 0 auto;
  }
}

/* =============================================================== */
/* Admin
/* =============================================================== */
#AdminContent {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 65px);
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  #AdminContent {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  #AdminContent {
    width: 100%;
  }
}

#AdminContent.noAside {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}

aside#Admin__Aside {
  margin-right: 0;
  background: #289A51;
}

aside#Admin__Aside.noAside {
  display: none;
}

#Admin__Main {
  height: 100%;
  position: relative;
  font-weight: 400;
}
#Admin__Main .Admin__Content {
  margin: 1rem 1rem 6rem;
  padding: 1rem;
  background-color: #fff;
  border: #ced4da 1px solid;
  border-radius: 5px;
}

.AdminTabs {
  margin: 1.5rem 20px 6rem;
}

.DG-A1 {
  display: -ms-grid;
  display: grid;
  grid-gap: 0 30px;
  -ms-grid-columns: 17rem 1fr;
  grid-template-columns: 17rem 1fr;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .DG-A1 {
    -ms-grid-columns: -183rem 1fr;
    grid-template-columns: -183rem 1fr;
  }
}
@media screen and (max-width: 576px) {
  .DG-A1 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* =============================================================== */
/* Header
/* =============================================================== */
header.web__header {
  width: 100%;
  height: auto;
  padding: 10px 0;
  background: #ffffff;
}
header.web__header::after {
  display: block;
  clear: both;
  content: "";
}

.head_box {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.head_box .logo {
  margin-bottom: 0;
}
.head_box .logo a {
  display: flex;
  align-items: center;
  gap: 0 10px;
  text-decoration: none;
}
.head_box .logo img {
  width: 100px;
}
.head_box .logo .titleFont {
  white-space: nowrap;
}
.head_box .logo span.h3 {
  margin-bottom: 0;
  display: block;
  color: #289A51;
  font-size: 1.5rem;
}
.head_box .nav_box {
  max-width: 100%;
  height: auto;
  float: right;
  padding: 0;
  position: relative;
  display: block;
}
.head_box .functionBar {
  margin: 0.5rem 0 0.7rem;
  display: flex;
  gap: 0 10px;
  justify-content: end;
}
.head_box .functionBar .search {
  padding: 3px 3px;
  display: flex;
  border: #ced4da 1px solid;
  border-radius: 50px;
}
.head_box .functionBar .search input.form-control {
  border: 0px none;
  border-radius: 50px;
}
.head_box .functionBar .search button.btn {
  padding: 5px 9px;
  border: 0px none;
  background-color: #4B75BD;
  border-radius: 50px;
}
.head_box .functionBar .search button.btn:hover {
  background-color: #395e9c;
}
.head_box .functionBar .search .magnifier {
  width: 20px;
  height: 20px;
}
.head_box .functionBar .search .magnifier path {
  fill: #fff;
}
.head_box .functionBar .dropdown-center a.dropdown-item {
  color: #727171;
}
.head_box .functionBar .dropdown-center a.dropdown-item:hover {
  background-color: #e3f8ea;
}
.head_box .functionBar .dropdown-center .btn.language {
  padding: 9px 11px;
  color: #fff;
  background-color: #289A51;
  border-radius: 50px;
}
.head_box .functionBar .dropdown-center .btn.language:hover {
  background-color: #1d723c;
}
.head_box .functionBar .dropdown-center .btn.logout {
  padding: 9px 11px;
  color: #fff;
  background-color: #289A51;
  border-radius: 50px;
}
.head_box .functionBar .dropdown-center .btn.logout:hover {
  background-color: #1d723c;
}
.head_box .functionBar .dropdown-center .btn.logout .member {
  width: 20px;
  height: 20px;
}
.head_box .functionBar .dropdown-center .btn.logout .member path {
  fill: #fff;
}
.head_box .functionBar .dropdown-menu.userLogoutBox {
  min-width: 13rem;
}
.head_box .functionBar .dropdown-menu.userLogoutBox .UserInformation {
  padding: 0 0 0.5rem;
  margin: 0 0 0.5rem;
  display: flex;
  gap: 0 0.5rem;
  align-items: center;
  justify-content: center;
  border-bottom: #adb5bd 1px solid;
}
.head_box .functionBar .dropdown-menu.userLogoutBox .UserInformation img, .head_box .functionBar .dropdown-menu.userLogoutBox .UserInformation .svg {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
}
.head_box .functionBar .dropdown-menu.userLogoutBox .UserInformation img path, .head_box .functionBar .dropdown-menu.userLogoutBox .UserInformation .svg path {
  fill: #289A51;
}
.head_box .functionBar .dropdown-menu.userLogoutBox .UserInformation h4 {
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.head_box .functionBar .dropdown-menu.userLogoutBox ul {
  padding: 0;
  margin: 0 0 0.5rem;
  list-style-type: none;
}
.head_box .functionBar .dropdown-menu.userLogoutBox ul li {
  margin-bottom: 0;
}
.head_box .functionBar .dropdown-menu.userLogoutBox .btn {
  width: calc(100% - 1rem);
  margin: 0 0.5rem;
  color: #fff;
  background-color: #289A51;
  border-radius: 4px;
}
.head_box .functionBar .dropdown-menu.userLogoutBox .btn:hover {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.head_box .functionBar .btn.login {
  background-color: #289A51;
  border-radius: 50px;
  border-bottom: 0px none;
}
.head_box .functionBar .btn.login:hover {
  background-color: #1d723c;
}
.head_box .functionBar .btn.login .member {
  width: 20px;
  height: 20px;
}
.head_box .functionBar .btn.login .member path {
  fill: #fff;
}
.head_box .functionBar .modal-content .modal-header h2 {
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.head_box .functionBar .modal-content.login .modal-body .button_box {
  margin: 1rem 0;
}
.head_box .functionBar .modal-content.login .modal-body .button_box button.btn {
  background-color: #289A51;
  border-bottom: 0px none;
}
.head_box .functionBar .modal-content.login .modal-body .button_box .member {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.head_box .functionBar .modal-content.login .modal-body .button_box .member path {
  fill: #fff;
}
.head_box .functionBar .modal-content.login .modal-body .button_box a.btn.register {
  color: #4B75BD;
  border: #4B75BD 1px solid;
  text-shadow: none;
  background-color: transparent;
}
.head_box .functionBar .modal-content.login .modal-body .button_box a.btn.register .member {
  width: 25px;
  height: 25px;
}
.head_box .functionBar .modal-content.login .modal-body .button_box a.btn.register .member path {
  fill: #4B75BD;
}
.head_box .emergency {
  padding: 0.46rem 1.2rem;
  margin: 0;
  -webkit-animation: emergency 3s linear 0s infinite;
          animation: emergency 3s linear 0s infinite;
  top: 0.5rem;
  right: 110px;
  position: absolute;
  text-align: center;
  font-weight: 400;
  font-size: 1.25rem;
  color: #fff;
  background-color: #dc3545;
  border: #c1c9d0 1PX solid;
  border-bottom-width: 2px;
  border-radius: 50rem;
  text-decoration: none;
}
.head_box .emergency:hover {
  background-color: #bd2130;
}
@-webkit-keyframes emergency {
  0% {
    background-color: #dc3545;
  }
  100% {
    background-color: #bd2130;
  }
}
@keyframes emergency {
  0% {
    background-color: #dc3545;
  }
  100% {
    background-color: #bd2130;
  }
}
.head_box a.ResendLink {
  margin: 0.5rem auto;
  display: block;
  text-align: center;
  color: #6c757d;
  text-decoration: none;
}
.head_box .Resendbox {
  padding: 10px;
  background-color: #6c757d;
  border-radius: 4px;
}
.head_box .Resendbox input {
  margin-bottom: 0.5rem;
}
.head_box .Resendbox input, .head_box .Resendbox button {
  width: 100%;
}
@media screen and (min-width: 1190px) and (max-width: 1470px) {

    .head_box {
        width:100%;
        gap: 5rem;
    }
    .head_box .functionBar{
        margin-right: 1rem;
    }
    .head_box .logo {
        margin-left: 1rem;
    }
    .head_box .nav_box{
        margin-right: 1rem;
    }
    .head_box .nav_box .nav_bar .emergency{
        right: 125px;
    }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .head_box .functionBar {
    display: none;
  }
  .head_box .emergency {
    width: 94%;
    margin: 1rem auto;
    position: static;
    display: block;
  }
}
@media screen and (max-width: 576px) {
  .head_box .logo img {
    width: 60px;
  }
  .head_box .logo .titleFont .h3 {
    margin-bottom: 0;
    font-size: 1.1rem;
  }
  .head_box .functionBar {
    display: none;
  }
  .head_box .emergency {
    width: 94%;
    margin: 1rem auto;
    position: static;
    display: block;
  }
  .head_box .errorBox {
    margin-bottom: 1rem;
  }
}

.nav_MobileBox {
  display: none;
  padding-top: 60px;
  padding-bottom: 10px;
  background-color: rgba(40, 154, 81, 0.2);
  border-radius: 0 0 10px 10px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .nav_MobileBox {
    display: block;
  }
}
@media screen and (max-width: 576px) {
  .nav_MobileBox {
    display: block;
  }
}

.MobileNav {
  display: none;
  width: 90%;
  margin: 0 auto;
}
.MobileNav .form__item label.form-label {
  margin-bottom: 1px;
  font-weight: normal;
}
.MobileNav .form__item button.btn {
  width: 100%;
  margin-top: 0.5rem;
}
.MobileNav .dropdown-menu {
  width: 90%;
}
.MobileNav a.btn.register {
  width: 100%;
  color: #4B75BD;
  border: #4B75BD 1px solid;
  text-shadow: none;
  background-color: transparent;
}
.MobileNav a.btn.register .member {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.MobileNav a.btn.register .member path {
  fill: #4B75BD;
}
.MobileNav a.btn.register:hover {
  color: #fff;
  background-color: #4B75BD;
}
.MobileNav a.btn.register:hover .member path {
  fill: #fff;
}
.MobileNav .search {
  width: 100%;
  padding: 3px 3px;
  margin: 1rem 0;
  display: flex;
  background-color: #fff;
  border: #ced4da 1px solid;
  border-radius: 5px;
}
.MobileNav .search input.form-control {
  border: 0px none;
  border-radius: 10px;
}
.MobileNav .search button.btn {
  padding: 5px 9px;
  border: 0px none;
  background-color: #4B75BD;
  border-radius: 5px;
}
.MobileNav .search button.btn:hover {
  background-color: #395e9c;
}
.MobileNav .search .magnifier {
  width: 20px;
  height: 20px;
}
.MobileNav .search .magnifier path {
  fill: #fff;
}
.MobileNav .btn.language {
  width: 100%;
  padding: 10px 0;
  margin-bottom: 10px;
  color: #fff;
  background-color: #289A51;
  border-radius: 5px;
}
.MobileNav .btn.language:hover {
  background-color: #1d723c;
}
.MobileNav .btn.login {
  width: 100%;
  padding: 10px 0;
  margin-bottom: 10px;
  color: #fff;
  background-color: #289A51;
  border-radius: 5px;
}
.MobileNav .btn.login:hover {
  background-color: #1d723c;
}
.MobileNav .btn.login .member {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.MobileNav .btn.login .member path {
  fill: #fff;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .MobileNav {
    display: block;
  }
}
@media screen and (max-width: 576px) {
  .MobileNav {
    display: block;
  }
}

.LogoutBox .UserInformation {
  margin: 1rem 0;
  display: flex;
  gap: 0 0.5rem;
  align-items: center;
  justify-content: center;
}
.LogoutBox .UserInformation img, .LogoutBox .UserInformation .svg {
  width: 30px;
  height: 30px;
  margin-right: 0.5rem;
}
.LogoutBox .UserInformation img path, .LogoutBox .UserInformation .svg path {
  fill: #289A51;
}
.LogoutBox .UserInformation h4 {
  margin-bottom: 0;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.LogoutBox .btn.logout {
  width: 100%;
  color: #fff;
  background-color: #289A51;
}
.LogoutBox .btn.logout:hover {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.LogoutBox .LogoutBtn {
  margin-top: 1rem;
}
.LogoutBox .LogoutBtn .btn {
  width: 100%;
  margin-bottom: 0.5rem;
  display: block;
  color: #fff;
  background-color: #4B75BD;
}
.LogoutBox .LogoutBtn .btn:hover {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

header.admin__header {
  width: 100%;
  height: auto;
  padding: 0;
  background: #ffffff;
}
header.admin__header::after {
  display: block;
  clear: both;
  content: "";
}

.admin__head_box {
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 0.5rem;
  border-top: #289A51 3px solid;
  border-bottom: #289A51 2px solid;
}
.admin__head_box .logo {
  margin-left: 10px;
  display: flex;
  gap: 0 0.5rem;
  align-items: center;
  flex: 250px 1 0;
}
.admin__head_box .logo img {
  height: 50px;
}
.admin__head_box .logo h3 {
  margin-bottom: 0;
  font-size: 1rem;
  color: #289A51;
}
.admin__head_box .nav_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin__head_box .nav_box button {
  background-color: transparent;
  border: 0px none;
}
.admin__head_box .nav_box button img {
  height: 20px;
}
.admin__head_box .functionBar ul.list, .admin__head_box .functionBar footer.web__footer ul, footer.web__footer .admin__head_box .functionBar ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.admin__head_box .functionBar ul.list li, .admin__head_box .functionBar footer.web__footer ul li, footer.web__footer .admin__head_box .functionBar ul li {
  margin-right: 1rem;
  margin-bottom: 0;
  display: inline-block;
  color: #289A51;
}
.admin__head_box .functionBar ul.list li img, .admin__head_box .functionBar footer.web__footer ul li img, footer.web__footer .admin__head_box .functionBar ul li img, .admin__head_box .functionBar ul.list li .svg, .admin__head_box .functionBar footer.web__footer ul li .svg, footer.web__footer .admin__head_box .functionBar ul li .svg {
  width: 25px;
  height: 25px;
}
.admin__head_box .functionBar ul.list li img path, .admin__head_box .functionBar footer.web__footer ul li img path, footer.web__footer .admin__head_box .functionBar ul li img path, .admin__head_box .functionBar ul.list li .svg path, .admin__head_box .functionBar footer.web__footer ul li .svg path, footer.web__footer .admin__head_box .functionBar ul li .svg path {
  fill: #4B75BD;
}
.admin__head_box .functionBar ul.list li span.red, .admin__head_box .functionBar footer.web__footer ul li span.red, footer.web__footer .admin__head_box .functionBar ul li span.red {
  color: #dc3545;
}
.admin__head_box .functionBar ul.list li a, .admin__head_box .functionBar footer.web__footer ul li a, footer.web__footer .admin__head_box .functionBar ul li a {
  display: block;
  color: #289A51;
  text-decoration: none;
}
.admin__head_box .functionBar .dropdown-toggle {
  color: #289A51;
}
.admin__head_box .functionBar ul.dropdown-menu li {
  margin-right: 0;
  display: block;
}
.admin__head_box .functionBar ul.dropdown-menu .dropdown-item {
  color: #495057;
}
.admin__head_box .functionBar ul.dropdown-menu .dropdown-item:focus, .admin__head_box .functionBar ul.dropdown-menu .dropdown-item:hover {
  color: #495057;
  background-color: #cff2db;
}

#asideBtn {
  width: 40px;
  height: 40px;
}
#asideBtn .svg path {
  fill: #4B75BD;
}

/* =============================================================== */
/* Header (Bootstrap Offcanvas)
/* =============================================================== */
/* =============================================================== */
/* Nav
/* =============================================================== */
.menu {
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
  gap: 0 1.5rem;
  align-items: center;
}

@media screen and (min-width: 1190px) and (max-width: 1350px) {
    .menu {
        gap: 0 1rem;
    }
    
}

.menu > .menu-item {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}

.menu > .menu-item > a {
  padding: 0.5rem 0;
  display: block;
  border: none;
  outline: none;
  color: #727171;
  font-weight: 500;
  text-transform: capitalize;
  text-rendering: optimizeLegibility;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  text-decoration: none;
}
.menu > .menu-item > a .expand {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.35rem;
  position: relative;
  display: inline-block;
  border: none;
  outline: none;
  pointer-events: none;
}
.menu > .menu-item > a .expand:before, .menu > .menu-item > a .expand:after {
  content: "";
  width: 100%;
  height: 2px;
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  background: #727171;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.menu > .menu-item:hover > a {
  color: #289A51;
}
.menu > .menu-item:hover > a .expand::before, .menu > .menu-item:hover > a .expand::after {
  background: #289A51;
}
.menu > .menu-item > a .expand::after {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
}
.menu > .menu-item > .sub-menu > .menu-item > a:hover {
  color: #289A51;
}
.menu > .menu-item > .sub-menu {
  width: 13rem;
  height: auto;
  padding: 0;
  top: 100%;
  position: absolute;
  border: none;
  outline: none;
  opacity: 0;
  visibility: hidden;
  border-top: 3px solid #289A51;
  background: #ffffff;
  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.menu > .menu-item > .sub-menu > .menu-item {
  margin-bottom: 0;
  display: block;
}
.menu > .menu-item > .sub-menu > .menu-item > a {
  padding: 0.5rem 1.25rem;
  display: block;
  color: #727171;
  text-transform: capitalize;
  text-rendering: optimizeLegibility;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  text-decoration: none;
}
.menu > .menu-item > .sub-menu > .menu-item > a:hover {
  color: #fff;
  background-color: #289A51;
}

.opened-menu {
  width: 2rem;
  height: 1rem;
  margin-right: 10px;
  display: none;
  position: relative;
  border: none;
  outline: none;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  background: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.opened-menu span {
  width: 100%;
  height: 2px;
  display: block;
  left: 0;
  position: absolute;
  border: none;
  outline: none;
  opacity: 1;
  border-radius: 0.25rem;
  background: #777;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.opened-menu span:nth-child(1) {
  top: 0;
}
.opened-menu span:nth-child(2), .opened-menu span:nth-child(3) {
  top: 0.5rem;
}
.opened-menu span:nth-child(4) {
  top: 1rem;
}

.closed-menu {
  width: 2.5rem;
  height: 2.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}
.closed-menu img.closed-icon {
  width: 1rem;
  height: auto;
  display: block;
}

.overlay {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

@media screen and (min-width: 1190px) {
  .menu > .menu-item-has-children:hover > .sub-menu {
    display: block;
    opacity: 1;
    z-index: 9999;
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .menu > .menu-item-has-children:hover > a .expand::after {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .head_box {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.55rem);
    padding-left: var(--bs-gutter-x, 0.55rem);
  }
  .nav_bar {
    width: 18rem;
    height: 100%;
    padding: 1rem 0;
    top: 0;
    left: -18rem;
    position: fixed;
    z-index: 999;
    opacity: 0;
    overflow-y: auto;
    visibility: hidden;
    background: #ffffff;
    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .nav_bar.active {
    left: 0rem;
    opacity: 1;
    visibility: visible;
  }
  .nav_bar::-webkit-scrollbar {
    width: 5px;
  }
  .nav_bar::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: #e6e6e6;
    -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .menu {
    width: 100%;
    height: auto;
    margin-top: 40px;
    display: block;
  }
  .menu > .menu-item {
    margin: 0;
    display: block;
    text-align: left;
  }
  .menu > .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu > .menu-item > a {
    padding: 0.75rem 1rem;
    color: #727171;
    border-bottom: 1px solid #f2f2f2;
  }
  .menu > .menu-item:first-child > a {
    border-top: 1px solid #f2f2f2;
  }
  .menu > .menu-item > a .expand::before, .menu > .menu-item > a .expand::after {
    background: #727171;
  }
  .menu > .menu-item-has-children.active > a .expand:after {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  .menu > .menu-item > .sub-menu {
    width: 100%;
    max-height: 0;
    padding: 0px;
    top: auto;
    left: auto;
    position: relative;
    border: none;
    outline: none;
    opacity: 1;
    overflow: hidden;
    visibility: visible;
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  .menu > .menu-item > .sub-menu > .menu-item {
    margin: 0;
  }
  .menu > .menu-item > .sub-menu > .menu-item > a {
    padding: 0.75rem 2rem;
    color: #ffffff;
    background-color: #289A51;
    border-bottom: 1px solid #238646;
  }
  .menu > .menu-item > .sub-menu > .menu-item > a:hover {
    color: #727171;
  }
  .opened-menu {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .closed-menu {
    position: absolute;
    display: flex;
    top: 0.5rem;
    right: 0.5rem;
  }
  .closed-menu svg path {
    fill: #777;
  }
  .overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}
@media screen and (max-width: 576px) {
  .head_box {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.55rem);
    padding-left: var(--bs-gutter-x, 0.55rem);
  }
  .nav_bar {
    width: 18rem;
    height: 100%;
    padding: 1rem 0;
    top: 0;
    left: -18rem;
    position: fixed;
    z-index: 999;
    opacity: 0;
    overflow-y: auto;
    visibility: hidden;
    background: #ffffff;
    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .nav_bar.active {
    left: 0rem;
    opacity: 1;
    visibility: visible;
  }
  .nav_bar::-webkit-scrollbar {
    width: 5px;
  }
  .nav_bar::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: #e6e6e6;
    -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .menu {
    width: 100%;
    height: auto;
    margin-top: 40px;
    display: block;
  }

  .menu > .menu-item {
    margin: 0;
    display: block;
    text-align: left;
  }
  .menu > .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu > .menu-item > a {
    padding: 0.75rem 1rem;
    color: #727171;
    border-bottom: 1px solid #f2f2f2;
  }
  .menu > .menu-item:first-child > a {
    border-top: 1px solid #f2f2f2;
  }
  .menu > .menu-item > a .expand::before, .menu > .menu-item > a .expand::after {
    background: #727171;
  }
  .menu > .menu-item-has-children.active > a .expand:after {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  .menu > .menu-item > .sub-menu {
    width: 100%;
    max-height: 0;
    padding: 0px;
    top: auto;
    left: auto;
    position: relative;
    border: none;
    outline: none;
    opacity: 1;
    overflow: hidden;
    visibility: visible;
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  .menu > .menu-item > .sub-menu > .menu-item {
    margin: 0;
  }
  .menu > .menu-item > .sub-menu > .menu-item > a {
    padding: 0.75rem 2rem;
    color: #ffffff;
    background-color: #289A51;
    border-bottom: 1px solid #238646;
  }
  .menu > .menu-item > .sub-menu > .menu-item > a:hover {
    color: #727171;
  }
  .opened-menu {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .closed-menu {
    position: absolute;
    display: flex;
    top: 0.5rem;
    right: 0.5rem;
  }
  .closed-menu svg path {
    fill: #777;
  }
  .overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}
/* =============================================================== */
/* Footer
/* =============================================================== */
footer.web__footer {
  padding: 1.5rem 0;
  margin-top: 60px;
  text-align: center;
  font-size: 0.875rem;
  color: #7edda0;
  background-color: #289A51;
}
footer.web__footer::after {
  display: block;
  clear: both;
  content: "";
}
footer.web__footer .foot__logo {
  margin-bottom: 1rem;
  text-align: center;
  color: #fff;
}
footer.web__footer .foot__logo img, footer.web__footer .foot__logo svg {
  width: 90px;
  margin: 0 auto 0.5rem;
  display: block;
}
footer.web__footer .foot__logo img path, footer.web__footer .foot__logo img polygon, footer.web__footer .foot__logo img rect, footer.web__footer .foot__logo img circle, footer.web__footer .foot__logo svg path, footer.web__footer .foot__logo svg polygon, footer.web__footer .foot__logo svg rect, footer.web__footer .foot__logo svg circle {
  fill: #fff;
}
footer.web__footer ul.list, footer.web__footer ul {
  width: 1200px;
  padding: 0 0 0.5rem;
  margin: 0 auto 0.5rem;
  display: flex;
  gap: 0 1rem;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: #2dae5c 1px solid;
  list-style-type: none;
}
footer.web__footer ul.list li, footer.web__footer ul li {
  margin-bottom: 0;
  display: flex;
}
footer.web__footer ul.list li::after, footer.web__footer ul li::after {
  content: "|";
  margin-left: 1rem;
  align-items: center;
  color: #fff;
}
footer.web__footer ul.list li:last-child::after, footer.web__footer ul li:last-child::after {
  content: none;
  margin-left: 0;
}
footer.web__footer ul.list::after, footer.web__footer ul::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -5px;
  display: block;
  background-color: #2dae5c;
  border-radius: 20rem;
  left: 0;
}
footer.web__footer ul.list::before, footer.web__footer ul::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -5px;
  display: block;
  background-color: #2dae5c;
  border-radius: 20rem;
  right: 0;
}
footer.web__footer ul {
  padding-bottom: 0;
  border: 0px none;
}
footer.web__footer ul::after {
  content: none;
}
footer.web__footer ul::before {
  content: none;
}
footer.web__footer a {
  display: block;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
}
footer.web__footer a:hover {
  color: #ffc107;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  footer.web__footer .foot__logo {
    width: 90%;
    padding-bottom: 1rem;
    margin: 0 auto 1rem;
    border-bottom: #fff 1px solid;
  }
  footer.web__footer ul.list, footer.web__footer ul {
    width: 90%;
    margin: 0 auto 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  footer.web__footer ul.list li, footer.web__footer ul li {
    width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  footer.web__footer ul.list li:first-child{
      margin-top: 1rem;
  }
  footer.web__footer ul li:nth-child(odd),
  footer.web__footer ul.list li:nth-child(odd) {
    justify-self: start;
  }

  footer.web__footer ul li:nth-child(even),
  footer.web__footer ul.list li:nth-child(even) {
    justify-self: end;
  }

  footer.web__footer ul.list li::after, footer.web__footer ul li::after {
    content: none;
    margin-left: 0;
  }
  footer.web__footer ul.list li:last-child, footer.web__footer ul li:last-child {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 576px) {
  footer.web__footer .foot__logo {
    width: 90%;
    padding-bottom: 1rem;
    margin: 0 auto 1rem;
    border-bottom: #fff 1px solid;
  }
  footer.web__footer ul.list, footer.web__footer ul {
    width: 90%;
    margin: 0 auto 1rem;
    display: block;
    text-align: center;
  }
  footer.web__footer ul.list li, footer.web__footer ul li {
    margin-bottom: 0.5rem;
    display: block;
  }
  footer.web__footer ul.list li::after, footer.web__footer ul li::after {
    content: none;
    margin-left: 0;
  }
  footer.web__footer ul.list li:last-child, footer.web__footer ul li:last-child {
    margin-bottom: 0;
  }
}

.admin__footer {
  width: 100%;
  padding: 10px;
  position: absolute;
  bottom: 0;
  text-align: center;
  background-color: #dee2e6;
}
.admin__footer::after {
  display: block;
  clear: both;
  content: "";
}
.admin__footer .copyright_box {
  float: left;
  color: #6c757d;
}
.admin__footer .serve {
  float: right;
  color: #289A51;
}
.admin__footer .serve a {
  color: #289A51;
  text-decoration: none;
}

#D1:before, #D2:before, #D3:before, #D4:before {
  display: block;
  content: " ";
  margin-top: -60px;
  height: 60px;
  visibility: hidden;
}

.toTop-arrow {
  color: #4B75BD;
  padding: 0;
  margin: 0;
  border: 0;
  z-index: 9999;
  position: fixed;
  right: 1.5%;
  bottom: 5%;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  display: none;
  background-color: transparent;
}
.toTop-arrow svg {
  width: 30px;
  height: 30px;
  margin: 0 auto;
  display: block;
  text-align: center;
}
.toTop-arrow svg path {
  fill: #4B75BD;
}
@media screen and (max-width: 576px) {
  .toTop-arrow {
    display: none !important;
  }
}

/***************************************************************************/
/*                                   attendee                              */
/***************************************************************************/
.form-control:disabled {
  background-color: #dee2e6;
}

.mb1 {
  margin-bottom: 1rem;
}

.display-5 {
  margin-bottom: 30px;
  color: #289A51;
  text-align: center;
  font-family: "Lora", serif;
}

h2.titleFont {
  width: 1200px;
  margin: 60px auto 40px;
  text-align: left;
  color: #289A51;
  font-weight: 500;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  h2.titleFont {
    width: auto;
    text-align: center;
  }
}
@media screen and (max-width: 576px) {
  h2.titleFont {
    width: auto;
    text-align: center;
  }
}

ul.pagination a {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.indexImg {
  margin-bottom: 360px;
  text-align: center;
}
.indexImg img {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 576px) and (max-width: 1190px) {
  .indexImg {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 576px) {
  .indexImg {
    margin-bottom: 0px;
  }
}

.PageImg {
  width: 100vw;
  max-height: 400px;
  overflow: hidden;
  margin: 0 auto 30px;
  position: relative;
}
.PageImg .display-3 {
  width: 100%;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "Lora", serif;
}
.PageImg img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .PageImg {
    width: 100%;
    height: auto;
  }
  .PageImg img {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .PageImg {
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
  .PageImg img {
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.PageImg::after {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-dialog .modal-content {
  border: #289A51 1px solid;
}
.modal-dialog .modal-header h2 {
  color: #289A51;
}

.form-text {
  color: #adb5bd;
}

.form-text.red {
  color: #dc3545;
}

nav.PageNavigation {
  margin: 1.5rem auto 0;
}
nav.PageNavigation a, nav.PageNavigation li {
  margin-bottom: 0;
}

table.styleTable, table.styleTable.left {
  width: 100%;
  margin: 0 0 1rem;
  text-align: center;
}
table.styleTable caption, table.styleTable.left caption {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  color: #fff;
  background-color: #4B75BD;
}
table.styleTable th, table.styleTable.left th, table.styleTable td, table.styleTable.left td {
  padding: 10px;
}
table.styleTable td, table.styleTable.left td {
  vertical-align: sub;
  font-weight: 400;
}
table.styleTable th, table.styleTable.left th {
  font-weight: 500;
  background-color: #e9ecef;
}
table.styleTable thead tr, table.styleTable.left thead tr, table.styleTable tbody tr, table.styleTable.left tbody tr {
  border-bottom: #dee2e6 1px solid;
}
table.styleTable tbody tr:nth-child(2n) {
  background-color: #f8f9fa;
}
table.styleTable .btn.success {
  color: #fff;
  background-color: #198754;
}
table.styleTable .btn.danger {
  color: #fff;
  background-color: #DC3545;
}
table.styleTable .btn.warning {
  color: #fff;
  background-color: #F3BC17;
}
table.styleTable .btn.info {
  color: #fff;
  background-color: #04A4C4;
}
table.styleTable .modal-header h1 {
  color: #6c757d;
}
table.styleTable .modal-body h4 {
  color: #289A51;
}
table.styleTable .modal-body span {
  margin-left: 1rem;
  color: #4B75BD;
  display: inline-block;
}
table.styleTable a, table.styleTable.left a {
  color: #289A51;
}

table.styleTable.left {
  text-align: left;
}

.border_top {
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: #adb5bd 1px dashed;
}

p.red {
  margin-bottom: 1rem;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

/* =============================================================== */
/* index
/* =============================================================== */
.indexBox {
  width: 1200px;
  position: absolute;
  top: -430px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  background-color: #eee;
}
.indexBox .svg {
  height: 70px;
}
.indexBox .one .h1, .indexBox .two .h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
.indexBox .one a, .indexBox .two a {
  height: 350px;
  padding-top: 70px;
  text-align: center;
  display: block;
}
.indexBox .one svg, .indexBox .two svg {
  margin-bottom: 30px;
}
.indexBox .one span, .indexBox .two span {
  display: block;
  color: #289A51;
}
.indexBox .one span.MH, .indexBox .two span.MH {
  font-size: 1.8rem;
}
.indexBox .one {
  background-color: #fff;
}
.indexBox .one a {
  color: #289A51;
  text-decoration: none;
}
.indexBox .one path {
  fill: #289A51;
}
.indexBox .two {
  background-color: #289A51;
}
.indexBox .two a {
  color: #fff;
  text-decoration: none;
}
.indexBox .two span {
  color: #fff;
}
.indexBox .two path {
  fill: #fff;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .indexBox {
    width: 100%;
    position: static;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 576px) {
  .indexBox {
    width: 100%;
    position: static;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .indexBox .one, .indexBox .two {
    height: auto;
    padding: 0;
  }
  .indexBox .one a, .indexBox .two a {
    height: 305px;
  }
  .indexBox .one svg, .indexBox .two svg {
    margin-bottom: 20px;
  }
}

.bgWhite {
  background-color: #fff;
}

.missionBox {
  width: 1200px;
  padding: 40px 0;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  gap: 40px;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
}
.missionBox .text h2 {
  font-family: "Roboto", sans-serif;
}
.missionBox .text p {
  margin-bottom: 1.65rem;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .missionBox {
    width: 100%;
    padding: 0;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .missionBox img {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
  }
  .missionBox .text {
    padding: 0 20px;
  }
}
@media screen and (max-width: 576px) {
  .missionBox {
    width: 100%;
    padding: 0;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .missionBox img {
    width: 100%;
  }
  .missionBox .text {
    padding: 0 20px;
  }
}

.mapBox {
  width: 1200px;
  text-align: center;
}
.mapBox img {
  opacity: 0.4;
}
.mapBox .mapPoint {
  position: relative;
}
.mapBox .desktopList {
  height: 80%;
  padding: 20px;
  display: inline-block;
  text-align: left;
  position: absolute;
  z-index: 99;
  top: 20px;
  left: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}
.mapBox .desktopList ul {
  padding-left: 20px;
  margin-bottom: 0;
}
.mapBox .desktopList li, .mapBox .desktopList p {
  font-weight: 500;
  font-size: 1.5rem;
  color: #289A51;
}
.mapBox .mobilegroup .h4.left {
  display: none;
}
.mapBox .p1, .mapBox .p2, .mapBox .p3, .mapBox .p4, .mapBox .p5, .mapBox .p6, .mapBox .p7, .mapBox .p8 {
  position: absolute;
}
.mapBox .p1 span, .mapBox .p2 span, .mapBox .p3 span, .mapBox .p4 span, .mapBox .p5 span, .mapBox .p6 span, .mapBox .p7 span, .mapBox .p8 span {
  width: 25px;
  height: 25px;
  display: block;
  background-color: rgba(175, 18, 18, 0.9);
  border: #fff 1px solid;
  border-radius: 30px;
}
.mapBox .p1 .h4, .mapBox .p2 .h4, .mapBox .p3 .h4, .mapBox .p4 .h4, .mapBox .p5 .h4, .mapBox .p6 .h4, .mapBox .p7 .h4, .mapBox .p8 .h4 {
  font-size: 1.7rem;
}
.mapBox .p1 span, .mapBox .p4 span, .mapBox .p7 span {
  -webkit-animation: point 1.2s linear 0.5s infinite;
          animation: point 1.2s linear 0.5s infinite;
}
.mapBox .p2 span, .mapBox .p5 span, .mapBox .p8 span {
  -webkit-animation: point 1.2s linear 0.7s infinite;
          animation: point 1.2s linear 0.7s infinite;
}
.mapBox .p3 span, .mapBox .p6 span {
  -webkit-animation: point 1.2s linear 0.9s infinite;
          animation: point 1.2s linear 0.9s infinite;
}
@-webkit-keyframes point {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}
@keyframes point {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}
.mapBox .p1 {
  top: 397px;
  left: 714px;
}
.mapBox .p1 .h4 {
  padding-left: 20px;
}
.mapBox .p2 {
  top: 183px;
  left: 978px;
}
.mapBox .p2 .h4 {
  padding-left: 20px;
}
.mapBox .p3 {
  top: 693px;
  left: 433px;
}
.mapBox .p3 .h4 {
  position: absolute;
  right: 20px;
}
.mapBox .p4 {
  top: 733px;
  left: 457px;
}
.mapBox .p4 .h4 {
  padding-left: 20px;
}
.mapBox .p5 {
  top: 816px;
  left: 467px;
}
.mapBox .p5 .h4 {
  padding-left: 20px;
}
.mapBox .p6 {
  top: 594px;
  left: 760px;
}
.mapBox .p6 .h4 {
  padding-left: 20px;
}
.mapBox .p7 {
  top: 526px;
  left: 420px;
}
.mapBox .p7 .h4 {
  padding-left: 20px;
}
.mapBox .p8 {
  top: 414px;
  left: 610px;
}
.mapBox .p8 .h4 {
  position: absolute;
  right: 20px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .mapBox {
    width: 100%;
    margin-top: 40px;
  }
  .mapBox img {
    width: 100%;
  }
  .mapBox .mapPoint {
    width: 90%;
    margin: 0 auto;
  }
  .mapBox .desktopList {
    display: none;
  }
  .mapBox .mobilegroup {
    width: 90%;
    padding: 20px 110px 20px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: -ms-grid;
    display: grid;
    gap: 5px 15px;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
  }
  .mapBox .mobilegroup .h4.left {
    margin-bottom: 0;
    display: block;
    text-align: left;
  }
  .mapBox .p1, .mapBox .p2, .mapBox .p3, .mapBox .p4, .mapBox .p5, .mapBox .p6, .mapBox .p7, .mapBox .p8 {
    position: static;
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
  }
  .mapBox .p1 .point, .mapBox .p2 .point, .mapBox .p3 .point, .mapBox .p4 .point, .mapBox .p5 .point, .mapBox .p6 .point, .mapBox .p7 .point, .mapBox .p8 .point {
    display: none;
  }
  .mapBox .p1 .h4, .mapBox .p2 .h4, .mapBox .p3 .h4, .mapBox .p4 .h4, .mapBox .p5 .h4, .mapBox .p6 .h4, .mapBox .p7 .h4, .mapBox .p8 .h4 {
    padding: 0;
    margin: 0 0 3px 0;
    display: block;
    position: static;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 576px) {
  .mapBox {
    width: 100%;
    margin-top: 40px;
  }
  .mapBox img {
    width: 100%;
  }
  .mapBox .mapPoint {
    width: 90%;
    margin: 0 auto;
  }
  .mapBox .desktopList {
    display: none;
  }
  .mapBox .mobilegroup {
    width: 90%;
    padding: 20px 110px 20px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: -ms-grid;
    display: grid;
    gap: 5px 15px;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
  }
  .mapBox .mobilegroup .h4.left {
    margin-bottom: 0;
    display: block;
    text-align: left;
  }
  .mapBox .p1, .mapBox .p2, .mapBox .p3, .mapBox .p4, .mapBox .p5, .mapBox .p6, .mapBox .p7, .mapBox .p8 {
    position: static;
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
  }
  .mapBox .p1 .point, .mapBox .p2 .point, .mapBox .p3 .point, .mapBox .p4 .point, .mapBox .p5 .point, .mapBox .p6 .point, .mapBox .p7 .point, .mapBox .p8 .point {
    display: none;
  }
  .mapBox .p1 .h4, .mapBox .p2 .h4, .mapBox .p3 .h4, .mapBox .p4 .h4, .mapBox .p5 .h4, .mapBox .p6 .h4, .mapBox .p7 .h4, .mapBox .p8 .h4 {
    padding: 0;
    margin: 0 0 3px 0;
    display: block;
    position: static;
    font-size: 1.5rem;
  }
}

.LATEST_NEWS {
  width: 1200px;
  text-align: center;
}
.LATEST_NEWS .title_box {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.LATEST_NEWS .title_box .display-5 {
  margin-bottom: 0;
}
.LATEST_NEWS .title_box a {
  padding: 13px;
  display: inline-block;
  color: #fff;
  background-color: #289A51;
  border-radius: 5px;
  text-decoration: none;
}
.LATEST_NEWS .title_box a:hover {
  background-color: #1d723c;
}
.LATEST_NEWS .title_box .svg {
  width: 20px;
  margin-right: 5px;
  display: inline-block;
}
.LATEST_NEWS .title_box .svg path {
  fill: #fff;
}
.LATEST_NEWS .newsBox {
  display: -ms-grid;
  display: grid;
  gap: 40px;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}
.LATEST_NEWS .newsBox a {
  text-decoration: none;
}
.LATEST_NEWS .newsBox a:hover {
  background-color: #e9ecef;
}
.LATEST_NEWS .newsBox img {
  margin-bottom: 1.5rem;
}
.LATEST_NEWS .newsBox .h3 {
  padding: 0 1rem;
  font-weight: 300;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.LATEST_NEWS a.VA {
  display: none;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .LATEST_NEWS {
    width: 90%;
    margin: 40px auto 0;
  }
  .LATEST_NEWS .newsBox {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .LATEST_NEWS .newsBox img {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .LATEST_NEWS {
    width: 90%;
    margin: 40px auto 0;
  }
  .LATEST_NEWS .title_box {
    justify-content: center;
  }
  .LATEST_NEWS .title_box a {
    display: none;
  }
  .LATEST_NEWS .newsBox {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .LATEST_NEWS .newsBox img {
    width: 100%;
  }
  .LATEST_NEWS a.VA {
    width: 100%;
    padding: 13px;
    margin-top: 40px;
    display: inline-block;
    color: #fff;
    background-color: #289A51;
    border-radius: 5px;
    text-decoration: none;
  }
  .LATEST_NEWS .svg {
    width: 20px;
    margin-right: 5px;
    display: inline-block;
  }
  .LATEST_NEWS .svg path {
    fill: #fff;
  }
}

/* =============================================================== */
/* Contact Us 聯絡我們
/* =============================================================== */
.ContactUsBox {
  width: 1200px;
  padding: 200px 60px;
  margin: 60px auto 0;
  position: relative;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
}
.ContactUsBox .ContactUs-1 {
  width: 150px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.6;
  border-radius: 0 10px 0 0;
}
.ContactUsBox .ContactUs-2 {
  width: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  border-radius: 0 0 0 10px;
}
.ContactUsBox .display-5 {
  margin-bottom: 80px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .ContactUsBox {
    width: 90%;
    padding: 90px 40px 120px;
    margin: 0 auto;
  }
  .ContactUsBox .ContactUs-1, .ContactUsBox .ContactUs-2 {
    width: 100px;
  }
  .ContactUsBox .display-5 {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 576px) {
  .ContactUsBox {
    width: 90%;
    padding: 90px 40px 120px;
    margin: 0 auto;
  }
  .ContactUsBox .ContactUs-1, .ContactUsBox .ContactUs-2 {
    width: 100px;
  }
  .ContactUsBox .display-5 {
    margin-bottom: 40px;
  }
}

.ContactUsContent {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}
.ContactUsContent h3 {
  margin-bottom: 0;
  float: left;
  text-align: left;
  font-weight: normal;
  font-family: "Roboto", sans-serif;
}
.ContactUsContent a {
  padding: 0.2rem 0.3rem;
  color: #727171;
  text-decoration: none;
}
.ContactUsContent .mail, .ContactUsContent .tel {
  text-align: center;
}
.ContactUsContent .mail::after, .ContactUsContent .tel::after {
  display: block;
  clear: both;
  content: "";
}
.ContactUsContent .mail a:hover, .ContactUsContent .tel a:hover {
  color: #fff;
  background-color: #4B75BD;
  border-radius: 5px;
}
.ContactUsContent svg, .ContactUsContent img {
  height: 70px;
  float: left;
  margin-right: 20px;
}
.ContactUsContent svg path, .ContactUsContent img path {
  fill: #4B75BD;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .ContactUsContent {
    display: block;
  }
  .ContactUsContent .mail {
    margin-bottom: 30px;
  }
  .ContactUsContent svg {
    display: none;
  }
  .ContactUsContent h3 {
    float: none;
    text-align: center;
  }
}
@media screen and (max-width: 576px) {
  .ContactUsContent {
    display: block;
  }
  .ContactUsContent .mail {
    margin-bottom: 30px;
  }
  .ContactUsContent svg {
    display: none;
  }
  .ContactUsContent h3 {
    float: none;
    text-align: center;
  }
}

.ContactUsBoxImg {
  width: 70px;
  height: 70px;
  margin-top: -5px;
  margin-left: 1140px;
}
@media screen and (max-width: 576px) {
  .ContactUsBoxImg {
    display: none;
  }
}

/* =============================================================== */
/* Our Team 們的團隊
/* =============================================================== */
.OurTeamBox .display-5 {
  width: 780px;
  padding: 30px 0;
  margin: 0 auto 20px;
  color: #fff;
  background-color: #289A51;
  border-radius: 10px;
}
.OurTeamBox img {
  margin: 0 auto 10px;
  border-radius: 10px;
}
.OurTeamBox .box {
  text-align: center;
}
.OurTeamBox h6 {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
}
.OurTeamBox h6 span {
  font-weight: normal;
  font-size: 1rem;
}
.OurTeamBox .mainMan {
  margin: 0 auto;
  position: relative;
  display: flex;
  gap: 0 40px;
  align-items: center;
  justify-content: center;
}
.OurTeamBox .mainMan img {
  width: 180px;
  height: 166px;
}
.OurTeamBox .mainMan::after {
  content: "";
  width: 40%;
  height: 5px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  background-color: #289A51;
  border-radius: 20px;
}
.OurTeamBox .mainMan::before {
  content: "";
  width: 3px;
  height: 65px;
  display: block;
  position: absolute;
  bottom: -104px;
  left: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #289A51;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .OurTeamBox .display-5 {
    width: 90%;
    margin: 0 auto 20px;
  }
  .OurTeamBox img {
    width: 100%;
  }
  .OurTeamBox h6 span {
    display: block;
  }
  .OurTeamBox .mainMan {
    width: 90%;
    display: -ms-grid;
    display: grid;
    gap: 0 20px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .OurTeamBox .mainMan img {
    width: 100%;
    height: auto;
  }
  .OurTeamBox .mainMan::after {
    display: none;
    width: 90%;
    bottom: -20px;
  }
  .OurTeamBox .mainMan::before {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  .OurTeamBox .display-5 {
    width: 90%;
    margin: 0 auto 20px;
  }
  .OurTeamBox img {
    width: 100%;
  }
  .OurTeamBox h6 span {
    display: block;
  }
  .OurTeamBox .mainMan {
    width: 90%;
    display: -ms-grid;
    display: grid;
    gap: 0 20px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .OurTeamBox .mainMan img {
    width: 100%;
    height: auto;
  }
  .OurTeamBox .mainMan::after {
    display: none;
    width: 90%;
    bottom: -20px;
  }
  .OurTeamBox .mainMan::before {
    display: none;
  }
}

.accordionContainer {
    overflow-x: auto;
    display: flex;
    margin: 0 auto;
}

.accordion.OurTeam {
    margin: 110px auto 0;
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.accordion.OurTeam .accordion-item, .accordion.OurTeam .accordion-itemLink {
  width: 180px;
  position: relative;
  border: 0px none !important;
  background-color: transparent;
}

.accordion.OurTeam .accordion-item::before, .accordion.OurTeam .accordion-itemLink::before {
  content: "";
  width: 3px;
  height: 38px;
  position: absolute;
  top: -19px;
  left: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: block;
  background-color: #289A51;
}

.accordion.OurTeam .accordion-item:nth-child(n):nth-child(n-1)::after, .accordion.OurTeam .accordion-itemLink:nth-child(n):nth-child(n-1)::after {
    content: "";
    width: 200px;
    height: 3px;
    position: absolute;
    top: -38px;
    left: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    background-color: #289A51;
}

.accordion.OurTeam .accordion-item:last-child::after, .accordion.OurTeam .accordion-itemLink:last-child::after {
    content: "" !important;
    width: 100px !important;
    height: 3px !important;
    position: absolute !important;
    top: -38px !important;
    left: -10% !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    display: block !important;
    background-color: #289A51 !important;
}

.accordion.OurTeam .accordion-item.active .accordion-header svg, .accordion.OurTeam .active.accordion-itemLink .accordion-header svg {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.accordion.OurTeam .accordion-header {
  display: none;
  font-size: 1.3rem;
  color: #fff;
  background-color: #4B75BD;
  font-weight: 500;
}
.accordion.OurTeam .accordion-header .downImg {
  width: 100%;
  padding: 2px 0;
  margin: 10px auto 0;
  text-align: center;
  background-color: #289A51;
  border-radius: 5px;
}
.accordion.OurTeam .accordion-header svg {
  width: 15px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.accordion.OurTeam .accordion-header svg path {
  fill: #fff;
}
.accordion.OurTeam .accordion-content {
  padding: 0;
  display: block;
  border: 0px none;
}
.accordion.OurTeam .accordion-content .ARG, .accordion.OurTeam .accordion-content .PAG, .accordion.OurTeam .accordion-content .PGSPG, .accordion.OurTeam .accordion-content .PDMG, .accordion.OurTeam .accordion-content .WM, .accordion.OurTeam .accordion-content .PRAD {
  display: flex;
  flex-direction: column;
  background-color: #4B75BD;
}
.accordion.OurTeam .accordion-content .ARG h5, .accordion.OurTeam .accordion-content .PAG h5, .accordion.OurTeam .accordion-content .PGSPG h5, .accordion.OurTeam .accordion-content .PDMG h5, .accordion.OurTeam .accordion-content .WM h5, .accordion.OurTeam .accordion-content .PRAD h5 {
  min-height: 140px;
  padding: 20px 10px;
  margin-bottom: 0px;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
.accordion.OurTeam .accordion-content .ARG .user, .accordion.OurTeam .accordion-content .PAG .user, .accordion.OurTeam .accordion-content .PGSPG .user, .accordion.OurTeam .accordion-content .PDMG .user, .accordion.OurTeam .accordion-content .WM .user, .accordion.OurTeam .accordion-content .PRAD .user {
  padding: 0 10px;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
}
.accordion.OurTeam .accordion-content .ARG .user .h6, .accordion.OurTeam .accordion-content .PAG .user .h6, .accordion.OurTeam .accordion-content .PGSPG .user .h6, .accordion.OurTeam .accordion-content .PDMG .user .h6, .accordion.OurTeam .accordion-content .WM .user .h6, .accordion.OurTeam .accordion-content .PRAD .user .h6 {
  min-height: 40px;
  padding: 0;
  margin-bottom: 0;
  display: block;
  font-weight: 300;
  color: #fff;
  word-break: break-word;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
.accordion.OurTeam .accordion-content .ARG .user img, .accordion.OurTeam .accordion-content .PAG .user img, .accordion.OurTeam .accordion-content .PGSPG .user img, .accordion.OurTeam .accordion-content .PDMG .user img, .accordion.OurTeam .accordion-content .WM .user img, .accordion.OurTeam .accordion-content .PRAD .user img {
  width: 160px;
  height: 147.55px;
  margin-bottom: 7px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .accordion.OurTeam {
    width: 90%;
    margin: 0px auto 0;
    display: block;
  }
  .accordion.OurTeam .accordion-item, .accordion.OurTeam .accordion-itemLink {
    width: 100%;
    margin-bottom: 2rem;
  }
  .accordion.OurTeam .accordion-item::before, .accordion.OurTeam .accordion-itemLink::before {
    display: none;
  }
  .accordion.OurTeam .accordion-header {
    display: block;
  }
  .accordion.OurTeam .accordion-content {
    display: none;
    margin-top: -1px;
  }
  .accordion.OurTeam .accordion-content .ARG h5, .accordion.OurTeam .accordion-content .PAG h5, .accordion.OurTeam .accordion-content .PGSPG h5, .accordion.OurTeam .accordion-content .PDMG h5, .accordion.OurTeam .accordion-content .WM h5, .accordion.OurTeam .accordion-content .PRAD h5 {
    display: none;
  }
  .accordion.OurTeam .accordion-content .ARG .user, .accordion.OurTeam .accordion-content .PAG .user, .accordion.OurTeam .accordion-content .PGSPG .user, .accordion.OurTeam .accordion-content .PDMG .user, .accordion.OurTeam .accordion-content .WM .user, .accordion.OurTeam .accordion-content .PRAD .user {
    padding: 0;
    margin: 0;
  }
  .accordion.OurTeam .accordion-content .ARG .user .h6, .accordion.OurTeam .accordion-content .PAG .user .h6, .accordion.OurTeam .accordion-content .PGSPG .user .h6, .accordion.OurTeam .accordion-content .PDMG .user .h6, .accordion.OurTeam .accordion-content .WM .user .h6, .accordion.OurTeam .accordion-content .PRAD .user .h6 {
    min-height: auto;
  }
  .accordion.OurTeam .accordion-content .ARG .user img, .accordion.OurTeam .accordion-content .PAG .user img, .accordion.OurTeam .accordion-content .PGSPG .user img, .accordion.OurTeam .accordion-content .PDMG .user img, .accordion.OurTeam .accordion-content .WM .user img, .accordion.OurTeam .accordion-content .PRAD .user img {
    width: 100%;
    height: auto;
  }
  .accordion.OurTeam .userGroup {
    padding: 20px;
    display: -ms-grid;
    display: grid;
    gap: 20px 20px;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 576px) {
  .accordion.OurTeam {
    width: 90%;
    margin: 0px auto 0;
    display: block;
  }
  .accordion.OurTeam .accordion-item, .accordion.OurTeam .accordion-itemLink {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .accordion.OurTeam .accordion-item::before, .accordion.OurTeam .accordion-itemLink::before {
    display: none;
  }
  .accordion.OurTeam .accordion-header {
    display: block;
  }
  .accordion.OurTeam .accordion-content {
    display: none;
    margin-top: -1px;
  }
  .accordion.OurTeam .accordion-content .ARG h5, .accordion.OurTeam .accordion-content .PAG h5, .accordion.OurTeam .accordion-content .PGSPG h5, .accordion.OurTeam .accordion-content .PDMG h5, .accordion.OurTeam .accordion-content .WM h5, .accordion.OurTeam .accordion-content .PRAD h5 {
    display: none;
  }
  .accordion.OurTeam .accordion-content .ARG .user, .accordion.OurTeam .accordion-content .PAG .user, .accordion.OurTeam .accordion-content .PGSPG .user, .accordion.OurTeam .accordion-content .PDMG .user, .accordion.OurTeam .accordion-content .WM .user, .accordion.OurTeam .accordion-content .PRAD .user {
    padding: 0;
    margin: 0;
  }
  .accordion.OurTeam .accordion-content .ARG .user .h6, .accordion.OurTeam .accordion-content .PAG .user .h6, .accordion.OurTeam .accordion-content .PGSPG .user .h6, .accordion.OurTeam .accordion-content .PDMG .user .h6, .accordion.OurTeam .accordion-content .WM .user .h6, .accordion.OurTeam .accordion-content .PRAD .user .h6 {
    min-height: auto;
  }
  .accordion.OurTeam .accordion-content .ARG .user img, .accordion.OurTeam .accordion-content .PAG .user img, .accordion.OurTeam .accordion-content .PGSPG .user img, .accordion.OurTeam .accordion-content .PDMG .user img, .accordion.OurTeam .accordion-content .WM .user img, .accordion.OurTeam .accordion-content .PRAD .user img {
    width: 100%;
    height: auto;
  }
  .accordion.OurTeam .userGroup {
    padding: 20px;
    display: -ms-grid;
    display: grid;
    gap: 20px 20px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

/*.accordion.OurTeam::before {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  background-color: #289A51;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .accordion.OurTeam::before {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  .accordion.OurTeam::before {
    display: none;
  }
}*/

.note {
  padding: 20px 10px 10px;
  background-color: #6c757d;
  border-top: #495057 10px solid;
}
.note ul {
  padding: 5px 0 10px 20px;
}
.note li, .note p {
  color: #fff;
  line-height: 1.4rem;
  word-break: break-word;
}
.note p {
  padding: 5px 5px 10px;
}
.note h6 {
  margin-left: 3px;
  color: #fff;
  margin-bottom: 0;
  font-weight: 500;
}

/* =============================================================== */
/* About Us
/* =============================================================== */
.AboutUsBox, .FAQsBox, .DonateBox, .KnowledgeBox, .LinksBox, .VerificationBox, .NewsContent, .NewsBox, .TermsBox, .PrivacyBox, .DnaTestingBox, .EmergencyBox, .MyCaseListBox, .MyAccountBox, .RegistrationBox {
  width: 1200px;
  padding: 1.5rem;
  margin: 0px auto 60px;
  background-color: #fff;
  border-radius: 10px;
}
.AboutUsBox p, .FAQsBox p, .DonateBox p, .KnowledgeBox p, .LinksBox p, .VerificationBox p, .NewsContent p, .NewsBox p, .TermsBox p, .PrivacyBox p, .DnaTestingBox p, .EmergencyBox p, .MyCaseListBox p, .MyAccountBox p, .RegistrationBox p {
  margin-bottom: 1.65rem;
}
.AboutUsBox ul.photo, .FAQsBox ul.photo, .DonateBox ul.photo, .KnowledgeBox ul.photo, .LinksBox ul.photo, .VerificationBox ul.photo, .NewsContent ul.photo, .NewsBox ul.photo, .TermsBox ul.photo, .PrivacyBox ul.photo, .DnaTestingBox ul.photo, .EmergencyBox ul.photo, .MyCaseListBox ul.photo, .MyAccountBox ul.photo, .RegistrationBox ul.photo {
  padding: 0;
  margin: 0 0 1.2rem;
  list-style-type: none;
  display: -ms-grid;
  display: grid;
  gap: 30px;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}
.AboutUsBox ul.photo li, .FAQsBox ul.photo li, .DonateBox ul.photo li, .KnowledgeBox ul.photo li, .LinksBox ul.photo li, .VerificationBox ul.photo li, .NewsContent ul.photo li, .NewsBox ul.photo li, .TermsBox ul.photo li, .PrivacyBox ul.photo li, .DnaTestingBox ul.photo li, .EmergencyBox ul.photo li, .MyCaseListBox ul.photo li, .MyAccountBox ul.photo li, .RegistrationBox ul.photo li {
  margin-bottom: 0;
}
.AboutUsBox ul.photo p, .FAQsBox ul.photo p, .DonateBox ul.photo p, .KnowledgeBox ul.photo p, .LinksBox ul.photo p, .VerificationBox ul.photo p, .NewsContent ul.photo p, .NewsBox ul.photo p, .TermsBox ul.photo p, .PrivacyBox ul.photo p, .DnaTestingBox ul.photo p, .EmergencyBox ul.photo p, .MyCaseListBox ul.photo p, .MyAccountBox ul.photo p, .RegistrationBox ul.photo p {
  margin-bottom: 0;
}
.AboutUsBox ul.photo img, .FAQsBox ul.photo img, .DonateBox ul.photo img, .KnowledgeBox ul.photo img, .LinksBox ul.photo img, .VerificationBox ul.photo img, .NewsContent ul.photo img, .NewsBox ul.photo img, .TermsBox ul.photo img, .PrivacyBox ul.photo img, .DnaTestingBox ul.photo img, .EmergencyBox ul.photo img, .MyCaseListBox ul.photo img, .MyAccountBox ul.photo img, .RegistrationBox ul.photo img {
  margin-bottom: 10px;
  border-radius: 10px;
}
.AboutUsBox .button_box, .FAQsBox .button_box, .DonateBox .button_box, .KnowledgeBox .button_box, .LinksBox .button_box, .VerificationBox .button_box, .NewsContent .button_box, .NewsBox .button_box, .TermsBox .button_box, .PrivacyBox .button_box, .DnaTestingBox .button_box, .EmergencyBox .button_box, .MyCaseListBox .button_box, .MyAccountBox .button_box, .RegistrationBox .button_box {
  margin-bottom: 0 !important;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .AboutUsBox, .FAQsBox, .DonateBox, .KnowledgeBox, .LinksBox, .VerificationBox, .NewsContent, .NewsBox, .TermsBox, .PrivacyBox, .DnaTestingBox, .EmergencyBox, .MyCaseListBox, .MyAccountBox, .RegistrationBox {
    width: 90%;
    margin: 0 auto;
  }
  .AboutUsBox ul.photo, .FAQsBox ul.photo, .DonateBox ul.photo, .KnowledgeBox ul.photo, .LinksBox ul.photo, .VerificationBox ul.photo, .NewsContent ul.photo, .NewsBox ul.photo, .TermsBox ul.photo, .PrivacyBox ul.photo, .DnaTestingBox ul.photo, .EmergencyBox ul.photo, .MyCaseListBox ul.photo, .MyAccountBox ul.photo, .RegistrationBox ul.photo {
    gap: 20px;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .AboutUsBox ul.photo img, .FAQsBox ul.photo img, .DonateBox ul.photo img, .KnowledgeBox ul.photo img, .LinksBox ul.photo img, .VerificationBox ul.photo img, .NewsContent ul.photo img, .NewsBox ul.photo img, .TermsBox ul.photo img, .PrivacyBox ul.photo img, .DnaTestingBox ul.photo img, .EmergencyBox ul.photo img, .MyCaseListBox ul.photo img, .MyAccountBox ul.photo img, .RegistrationBox ul.photo img {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .AboutUsBox, .FAQsBox, .DonateBox, .KnowledgeBox, .LinksBox, .VerificationBox, .NewsContent, .NewsBox, .TermsBox, .PrivacyBox, .DnaTestingBox, .EmergencyBox, .MyCaseListBox, .MyAccountBox, .RegistrationBox {
    width: 90%;
    margin: 0 auto;
  }
  .AboutUsBox ul.photo, .FAQsBox ul.photo, .DonateBox ul.photo, .KnowledgeBox ul.photo, .LinksBox ul.photo, .VerificationBox ul.photo, .NewsContent ul.photo, .NewsBox ul.photo, .TermsBox ul.photo, .PrivacyBox ul.photo, .DnaTestingBox ul.photo, .EmergencyBox ul.photo, .MyCaseListBox ul.photo, .MyAccountBox ul.photo, .RegistrationBox ul.photo {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .AboutUsBox ul.photo img, .FAQsBox ul.photo img, .DonateBox ul.photo img, .KnowledgeBox ul.photo img, .LinksBox ul.photo img, .VerificationBox ul.photo img, .NewsContent ul.photo img, .NewsBox ul.photo img, .TermsBox ul.photo img, .PrivacyBox ul.photo img, .DnaTestingBox ul.photo img, .EmergencyBox ul.photo img, .MyCaseListBox ul.photo img, .MyAccountBox ul.photo img, .RegistrationBox ul.photo img {
    width: 100%;
  }
}

/* =============================================================== */
/* JoinUs 加入我們
/* =============================================================== */
.JoinUsBox {
  width: 1200px;
  margin: 0 auto;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .JoinUsBox {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 576px) {
  .JoinUsBox {
    width: 90%;
    margin: 0 auto;
  }
}

.accordion.JoinUs {
  margin-top: 60px;
  display: -ms-grid;
  display: grid;
  gap: 0 30px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.accordion.JoinUs .accordion-item, .accordion.JoinUs .accordion-itemLink {
  margin-bottom: 40px;
  border: 0px none !important;
  background-color: transparent;
  cursor: default;
}
.accordion.JoinUs .accordion-item.active .accordion-header svg, .accordion.JoinUs .active.accordion-itemLink .accordion-header svg {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.accordion.JoinUs .accordion-header {
  padding: 0;
  background-color: transparent;
  cursor: default;
}
.accordion.JoinUs .accordion-header .text {
  display: flex;
  gap: 0 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.accordion.JoinUs .accordion-header h4 {
  margin-bottom: 5px;
  font-weight: 500;
  word-break: break-word;
}
.accordion.JoinUs .accordion-header span {
  color: #289A51;
  white-space: nowrap;
}
.accordion.JoinUs .accordion-header .downImg {
  display: none;
}
.accordion.JoinUs .accordion-content {
  padding: 0;
  display: block;
  border: 0px none;
  background-color: transparent;
}
.accordion.JoinUs .people {
  display: flex;
  gap: 10px;
  background-color: #fff;
  border: #ced4da 1px solid;
  border-radius: 10px;
}
.accordion.JoinUs .people img {
  width: 180px;
  height: 166px;
  border-radius: 9px 0 0 9px;
  border-right: #ced4da 1px solid;
}
.accordion.JoinUs .people ul {
  padding: 10px 10px 10px 20px;
}
.accordion.JoinUs .people ul li {
  line-height: 1.4rem;
  word-break: break-word;
}
.accordion.JoinUs .mailBar {
  margin-top: 2px;
}
.accordion.JoinUs .mailBar a {
  padding: 0.2rem 0.5rem;
  margin-right: 0rem;
  display: inline-block;
  color: #4B75BD;
  text-decoration: none;
}
.accordion.JoinUs .mailBar a:hover {
  color: #fff;
  background-color: #4B75BD;
  border-radius: 50px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .accordion.JoinUs {
    gap: 0px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .accordion.JoinUs .accordion-item, .accordion.JoinUs .accordion-itemLink {
    margin-bottom: 0;
    cursor: pointer;
  }
  .accordion.JoinUs .accordion-header {
    padding: 5px 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #4B75BD;
    border-radius: 5px;
    cursor: pointer;
  }
  .accordion.JoinUs .accordion-header::after {
    display: block;
    clear: both;
    content: "";
  }
  .accordion.JoinUs .accordion-header .text {
    display: -ms-grid;
    display: grid;
  }
  .accordion.JoinUs .accordion-header h4 {
    color: #fff;
  }
  .accordion.JoinUs .accordion-header span {
    color: #fff;
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-row: 1;
        grid-row-start: 1;
  }
  .accordion.JoinUs .accordion-header .downImg {
    display: block;
    float: right;
  }
  .accordion.JoinUs .accordion-header .downImg svg {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .accordion.JoinUs .accordion-header .downImg svg path {
    fill: #fff;
  }
  .accordion.JoinUs .accordion-header::after {
    display: none;
  }
  .accordion.JoinUs .accordion-content {
    display: none;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;
  }
  .accordion.JoinUs .people {
    padding: 0 20px;
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
    background-color: transparent;
    border: 0px none;
  }
  .accordion.JoinUs .people img {
    margin-bottom: 10px;
    border-radius: 10px;
    border: 0px none;
  }
  .accordion.JoinUs .people ul {
    padding: 0;
    margin: 0;
    text-align: left;
  }
  .accordion.JoinUs .mailBar a::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 7px;
    display: inline-block;
    vertical-align: middle;
    background-color: #4B75BD;
  }
}
@media screen and (max-width: 576px) {
  .accordion.JoinUs {
    gap: 0px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .accordion.JoinUs .accordion-item, .accordion.JoinUs .accordion-itemLink {
    margin-bottom: 0;
    cursor: pointer;
  }
  .accordion.JoinUs .accordion-header {
    padding: 5px 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #4B75BD;
    border-radius: 5px;
    cursor: pointer;
  }
  .accordion.JoinUs .accordion-header::after {
    display: block;
    clear: both;
    content: "";
  }
  .accordion.JoinUs .accordion-header .text {
    display: -ms-grid;
    display: grid;
  }
  .accordion.JoinUs .accordion-header h4 {
    color: #fff;
  }
  .accordion.JoinUs .accordion-header span {
    color: #fff;
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-row: 1;
        grid-row-start: 1;
  }
  .accordion.JoinUs .accordion-header .downImg {
    display: block;
    float: right;
  }
  .accordion.JoinUs .accordion-header .downImg svg {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .accordion.JoinUs .accordion-header .downImg svg path {
    fill: #fff;
  }
  .accordion.JoinUs .accordion-header::after {
    display: none;
  }
  .accordion.JoinUs .accordion-content {
    display: none;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;
  }
  .accordion.JoinUs .people {
    padding: 0 20px;
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
    background-color: transparent;
    border: 0px none;
  }
  .accordion.JoinUs .people img {
    margin-bottom: 10px;
    border-radius: 10px;
    border: 0px none;
  }
  .accordion.JoinUs .people ul {
    padding: 0;
    margin: 0;
    text-align: left;
  }
  .accordion.JoinUs .mailBar a::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 7px;
    display: inline-block;
    vertical-align: middle;
    background-color: #4B75BD;
  }
}

/* =============================================================== */
/* Our Help for MH
/* =============================================================== */
.OurHelpBox {
  width: 1200px;
  margin: 0 auto 60px;
}
.OurHelpBox .display-5 {
  margin-bottom: 40px;
  text-align: left;
}
.OurHelpBox .fileBox {
  display: -ms-grid;
  display: grid;
  gap: 40px;
  justify-content: center;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}
.OurHelpBox .fileBox a {
  display: block;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  text-decoration: none;
}
.OurHelpBox .fileBox a:hover p {
  background-color: #343a40;
}
.OurHelpBox .fileBox svg, .OurHelpBox .fileBox img {
  height: 60px;
  margin: 30px auto;
}
.OurHelpBox .fileBox svg path, .OurHelpBox .fileBox img path {
  fill: #4B75BD;
}
.OurHelpBox .fileBox p {
  width: 100%;
  min-height: 130px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #6c757d;
  border-radius: 0 0 10px 10px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .OurHelpBox {
    width: 90%;
    margin: 0 auto;
  }
  .OurHelpBox .fileBox {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .OurHelpBox .fileBox p {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
  }
}
@media screen and (max-width: 576px) {
  .OurHelpBox {
    width: 90%;
    margin: 0 auto;
  }
  .OurHelpBox .fileBox {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .OurHelpBox .fileBox p {
    width: 100%;
    min-height: auto;
    margin: 0 auto;
    padding: 20px;
  }
}

/* =============================================================== */
/* Registration Information
/* =============================================================== */
.RegistrationBox fieldset.pageForm__item h5.subTitle {
  color: #4B75BD;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.RegistrationBox .form__item a {
  color: #289A51;
  font-weight: 500;
  font-size: 1.2rem;
}
.RegistrationBox .df select.form-select, .RegistrationBox .df_8 select.form-select, .RegistrationBox .df_0 select.form-select {
  flex: 0 0 400px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .RegistrationBox .df select.form-select, .RegistrationBox .df_8 select.form-select, .RegistrationBox .df_0 select.form-select {
    flex: 0 1 300px;
  }
}
@media screen and (max-width: 576px) {
  .RegistrationBox .df, .RegistrationBox .df_8, .RegistrationBox .df_0 {
    display: block;
  }
  .RegistrationBox .df select.form-select, .RegistrationBox .df_8 select.form-select, .RegistrationBox .df_0 select.form-select {
    margin-bottom: 0.5rem;
    flex: 0 1 auto;
  }
}

/* =============================================================== */
/* My Account
/* =============================================================== */
.AccountGrid {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -ms-grid-columns: 265px 1fr;
  grid-template-columns: 265px 1fr;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .AccountGrid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 576px) {
  .AccountGrid {
    display: block;
  }
}

.MyAccountBox legend .h4 {
  color: #289A51;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.MyAccountBox legend h5.subTitle {
  color: #4B75BD;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.MyAccountBox .AccountContent .form__item {
  display: flex;
  gap: 0 1rem;
}
.MyAccountBox .AccountContent .form__item label.form-label {
  width: 280px;
  height: 38px;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex: 0 0 180px;
  color: #fff;
  background-color: #4B75BD;
  border-radius: 4px;
}
.MyAccountBox .AccountContent .form__item .df, .MyAccountBox .AccountContent .form__item .df_8, .MyAccountBox .AccountContent .form__item .df_0 {
  width: 100%;
}
.MyAccountBox .AccountContent .form__item .df select.form-select, .MyAccountBox .AccountContent .form__item .df_8 select.form-select, .MyAccountBox .AccountContent .form__item .df_0 select.form-select {
  flex: 0 1 300px;
}
@media screen and (min-width:796px) and (max-width: 1190px) {
  .MyAccountBox .AccountContent .form__item label.form-label {
    width: auto;
    height: auto;
    flex: 0 0 170px;
  }
  .MyAccountBox .AccountContent .form__item .df, .MyAccountBox .AccountContent .form__item .df_8, .MyAccountBox .AccountContent .form__item .df_0 {
    width: 100%;
  }
  .MyAccountBox .AccountContent .form__item .df select.form-select, .MyAccountBox .AccountContent .form__item .df_8 select.form-select, .MyAccountBox .AccountContent .form__item .df_0 select.form-select {
    flex: 0 1 200px;
  }
}
@media screen and (min-width: 576px) and (max-width: 796px) {
    .MyAccountBox .AccountContent .form__item {
        display: block;
    }
    .MyAccountBox .AccountContent .form__item label.form-label {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 0.5rem;
    }
    .MyAccountBox .AccountContent .form__item input.form-control {
        max-width: 100%;
    }

    .MyAccountBox .AccountContent .form__item .df, .MyAccountBox .AccountContent .form__item .df_8, .MyAccountBox .AccountContent .form__item .df_0 {
        width: 100%;
    }

    .MyAccountBox .AccountContent .form__item .df select.form-select, .MyAccountBox .AccountContent .form__item .df_8 select.form-select, .MyAccountBox .AccountContent .form__item .df_0 select.form-select {
        flex: 0 1 200px;
    }
}
@media screen and (max-width: 576px) {
  .MyAccountBox .AccountContent h5.subTitle {
    margin-top: 1.5rem;
    color: #4B75BD;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
  }
  .MyAccountBox .AccountContent .form__item {
    display: block;
  }
  .MyAccountBox .AccountContent .form__item label.form-label {
    width: auto;
    height: auto;
    padding: 0;
    margin-bottom: 0.5rem;
    color: #4B75BD;
    background-color: transparent;
  }
  .MyAccountBox .AccountContent .form__item .df, .MyAccountBox .AccountContent .form__item .df_8, .MyAccountBox .AccountContent .form__item .df_0 {
    display: block;
  }
  .MyAccountBox .AccountContent .form__item .df select.form-select, .MyAccountBox .AccountContent .form__item .df_8 select.form-select, .MyAccountBox .AccountContent .form__item .df_0 select.form-select {
    margin-bottom: 0.5rem;
  }
}

/* =============================================================== */
/* My Case List
/* =============================================================== */
.MyCaseListBox .textBox {
  margin-bottom: 2rem;
}
.MyCaseListBox .textBox ol {
  padding-left: 0;
  list-style-type: none;
}
.MyCaseListBox .textBox li, .MyCaseListBox .textBox p {
  margin-bottom: 0.5rem;
  font-weight: 400;
}
.MyCaseListBox .textBox p.mt2 {
  margin-top: 2rem;
}
.MyCaseListBox h4 {
  color: #289A51;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.MyCaseListBox .MyCaseListForm ul, .MyCaseListBox .MyCaseListForm-DNATestingServices ul, .MyCaseListBox .MyCaseListForm-Emergency ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: -ms-grid;
  display: grid;
  gap: 0 0.5rem;
  -ms-grid-columns: 100px 1fr 1fr 150px;
  grid-template-columns: 100px 1fr 1fr 150px;
  border-bottom: #ced4da 1px dashed;
}
.MyCaseListBox .MyCaseListForm ul li, .MyCaseListBox .MyCaseListForm-DNATestingServices ul li, .MyCaseListBox .MyCaseListForm-Emergency ul li {
  padding: 1rem 0.5rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  font-weight: 400;
}
.MyCaseListBox .MyCaseListForm ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(1) {
  text-align: center;
  justify-content: center;
}
.MyCaseListBox .MyCaseListForm ul .form__item, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item {
  margin-bottom: 0;
}
.MyCaseListBox .MyCaseListForm ul .form__item .form-check, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check {
  margin-bottom: 0;
}
.MyCaseListBox .MyCaseListForm ul .form__item .form-check.success input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check.success input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check.success input[type=radio]:checked {
  background-color: #198754;
  border-color: #fff;
}
.MyCaseListBox .MyCaseListForm ul .form__item .form-check.danger input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check.danger input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check.danger input[type=radio]:checked {
  background-color: #DC3545;
  border-color: #fff;
}
.MyCaseListBox .MyCaseListForm ul:last-child, .MyCaseListBox .MyCaseListForm-DNATestingServices ul:last-child, .MyCaseListBox .MyCaseListForm-Emergency ul:last-child {
  border-bottom: 0px none;
}
.MyCaseListBox .MyCaseListForm ul.titleBox, .MyCaseListBox .MyCaseListForm-DNATestingServices ul.titleBox, .MyCaseListBox .MyCaseListForm-Emergency ul.titleBox {
  padding: 0;
  border: 0px none;
  background-color: transparent !important;
}
.MyCaseListBox .MyCaseListForm ul.titleBox li, .MyCaseListBox .MyCaseListForm-DNATestingServices ul.titleBox li, .MyCaseListBox .MyCaseListForm-Emergency ul.titleBox li {
  padding: 3px 0.5rem;
  display: block;
  font-weight: 300;
  color: #fff;
  background-color: #4B75BD;
  border-radius: 4px;
}
.MyCaseListBox .MyCaseListForm ul:nth-child(2n+1), .MyCaseListBox .MyCaseListForm-DNATestingServices ul:nth-child(2n+1), .MyCaseListBox .MyCaseListForm-Emergency ul:nth-child(2n+1) {
  background-color: #e9ecef;
}
@media screen and (max-width: 576px) {
  .MyCaseListBox .MyCaseListForm ul, .MyCaseListBox .MyCaseListForm-DNATestingServices ul, .MyCaseListBox .MyCaseListForm-Emergency ul {
    margin-bottom: 1rem;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border: 0px none;
    border: #4B75BD 1px solid;
  }
  .MyCaseListBox .MyCaseListForm ul li, .MyCaseListBox .MyCaseListForm-DNATestingServices ul li, .MyCaseListBox .MyCaseListForm-Emergency ul li {
    width: 100%;
    padding: 0 1rem 0.5rem;
    margin: 0 0 0.5rem;
    display: block;
    border-bottom: #ced4da 1px dashed;
  }
  .MyCaseListBox .MyCaseListForm ul li span.Mobile, .MyCaseListBox .MyCaseListForm-DNATestingServices ul li span.Mobile, .MyCaseListBox .MyCaseListForm-Emergency ul li span.Mobile {
    display: block;
    color: #ced4da;
  }
  .MyCaseListBox .MyCaseListForm ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(1) {
    width: 100%;
    padding: 5px;
    margin-bottom: 0.5rem;
    color: #fff;
    background-color: #4B75BD;
    border-bottom: 0px none;
    border-radius: 0;
  }
  .MyCaseListBox .MyCaseListForm ul li:last-child, .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:last-child, .MyCaseListBox .MyCaseListForm-Emergency ul li:last-child {
    padding-bottom: 0;
    border-bottom: 0px none;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item {
    display: -ms-grid;
    display: grid;
    gap: 1rem;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check {
    padding-left: 0;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check label, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check label, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check label {
    width: 100%;
    padding: 0.375rem 7px 0.375rem 62px;
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check input[type=checkbox], .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check input[type=checkbox], .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check input[type=checkbox], .MyCaseListBox .MyCaseListForm ul .form__item .form-check input[type=radio], .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check input[type=radio], .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check input[type=radio] {
    position: absolute;
    top: 9px;
    left: 60px;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check input[type=checkbox]:focus + label, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check input[type=checkbox]:focus + label, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check input[type=checkbox]:focus + label, .MyCaseListBox .MyCaseListForm ul .form__item .form-check input[type=radio]:focus + label, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check input[type=radio]:focus + label, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check input[type=radio]:focus + label {
    border: 1px solid #289A51;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check.success input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check.success input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check.success input[type=radio]:checked {
    background-color: #198754;
    border-color: #fff;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check.success input[type=radio]:checked + label.success, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check.success input[type=radio]:checked + label.success, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check.success input[type=radio]:checked + label.success {
    color: #fff;
    background-color: #198754;
    border: 1px solid #dee2e6;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check.danger input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check.danger input[type=radio]:checked, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check.danger input[type=radio]:checked {
    background-color: #DC3545;
    border-color: #fff;
  }
  .MyCaseListBox .MyCaseListForm ul .form__item .form-check.danger input[type=radio]:checked + label.danger, .MyCaseListBox .MyCaseListForm-DNATestingServices ul .form__item .form-check.danger input[type=radio]:checked + label.danger, .MyCaseListBox .MyCaseListForm-Emergency ul .form__item .form-check.danger input[type=radio]:checked + label.danger {
    color: #fff;
    background-color: #DC3545;
    border: 1px solid #dee2e6;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .MyCaseListBox .MyCaseListForm ul:last-child, .MyCaseListBox .MyCaseListForm-DNATestingServices ul:last-child, .MyCaseListBox .MyCaseListForm-Emergency ul:last-child {
    border-bottom: #4B75BD 1px solid;
  }
  .MyCaseListBox .MyCaseListForm ul.titleBox, .MyCaseListBox .MyCaseListForm-DNATestingServices ul.titleBox, .MyCaseListBox .MyCaseListForm-Emergency ul.titleBox {
    display: none;
  }
  .MyCaseListBox .MyCaseListForm ul:nth-child(2n+1), .MyCaseListBox .MyCaseListForm-DNATestingServices ul:nth-child(2n+1), .MyCaseListBox .MyCaseListForm-Emergency ul:nth-child(2n+1) {
    background-color: transparent;
  }
}
.MyCaseListBox .MyCaseListForm ul, .MyCaseListBox .MyCaseListForm-DNATestingServices ul, .MyCaseListBox .MyCaseListForm-Emergency ul {
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.MyCaseListBox .MyCaseListForm ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(1) {
  text-align: left;
  justify-content: flex-start;
}
.MyCaseListBox .MyCaseListForm ul a, .MyCaseListBox .MyCaseListForm-DNATestingServices ul a, .MyCaseListBox .MyCaseListForm-Emergency ul a {
  color: #289A51;
}
.MyCaseListBox .MyCaseListForm-Emergency ul {
  -ms-grid-columns: 100px 1fr 1fr 100px;
  grid-template-columns: 100px 1fr 1fr 100px;
}
.MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(4) {
  text-align: center;
  justify-content: center;
}
.MyCaseListBox .MyCaseListForm-DNATestingServices ul {
  -ms-grid-columns: 100px 1fr 100px;
  grid-template-columns: 100px 1fr 100px;
}
.MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(3) {
  text-align: center;
  justify-content: center;
}
.MyCaseListBox .CaseList h4 {
  color: #289A51;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.MyCaseListBox .CaseList p {
  margin-bottom: 0;
  font-weight: 400;
  word-break: break-word;
}
.MyCaseListBox .CaseList .form__item {
  display: flex;
  gap: 0 1rem;
  align-items: center;
}
.MyCaseListBox .CaseList .form__item label {
  width: 200px;
  padding: 3px 0.5rem;
  margin-bottom: 0;
  flex: 0 0 170px;
  color: #fff;
  background-color: #289A51;
  border-radius: 4px;
}
.MyCaseListBox .Questionnaire {
  padding: 0 0 1.5rem;
  margin: 3rem 0 1.5rem;
  text-align: center;
  border-top: #adb5bd 1px dashed;
  border-bottom: #adb5bd 1px dashed !important;
}
.MyCaseListBox .Questionnaire h2 {
  margin: 1.5rem 0 0;
  color: #4B75BD;
}
.MyCaseListBox .CalculationResult h4 {
  color: #289A51;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.MyCaseListBox .CalculationResult .form__item label {
  color: #4B75BD;
}
.MyCaseListBox .CalculationResult .form__item .df, .MyCaseListBox .CalculationResult .form__item .df_8, .MyCaseListBox .CalculationResult .form__item .df_0 {
  align-items: center;
}
.MyCaseListBox .PaymentInformation {
  padding: 0 0 1.5rem;
  margin: 0 0 1.5rem;
  border-bottom: #ced4da 1px dashed;
  border-top: 0px none;
  border-left: 0px none;
  border-right: 0px none;
  font-family: "Roboto", sans-serif;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .MyCaseListBox .MyCaseListForm ul li, .MyCaseListBox .MyCaseListForm-Emergency ul li, .MyCaseListBox .MyCaseListForm-DNATestingServices ul li {
    display: block;
    word-break: break-word;
  }
  .MyCaseListBox .MyCaseListForm ul li:nth-child(1) span, .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(1) span, .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(1) span {
    display: none;
  }
  .MyCaseListBox .CaseList .form__Layout3-a {
    -ms-grid-columns: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;
  }
  .MyCaseListBox .CaseList .form__item {
    display: block;
  }
  .MyCaseListBox .CaseList .form__item label {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}
@media screen and (max-width: 576px) {
  .MyCaseListBox .textBox ol {
    padding: 0;
    margin: 0;
  }
  .MyCaseListBox .textBox ol span {
    width: 100%;
    padding: 3px 0;
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
    color: #fff;
    background-color: #4B75BD;
    border-radius: 4px;
  }
  .MyCaseListBox .MyCaseListForm ul, .MyCaseListBox .MyCaseListForm-Emergency ul, .MyCaseListBox .MyCaseListForm-DNATestingServices ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border: #4B75BD 1px solid;
  }
  .MyCaseListBox .MyCaseListForm ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(1), .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(1) {
    font-weight: 500;
  }
  .MyCaseListBox .MyCaseListForm ul li:nth-child(1) span, .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(1) span, .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(1) span {
    margin-right: 0.5rem;
    display: inline-block !important;
    color: #fff;
    font-weight: 300;
  }
  .MyCaseListBox .MyCaseListForm-Emergency ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border: #4B75BD 1px solid;
  }
  .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(4) {
    text-align: center;
    justify-content: center;
  }
  .MyCaseListBox .MyCaseListForm-Emergency ul li:nth-child(4) span {
    padding: 5px 10px;
    display: block;
    font-size: 1.75rem;
    font-weight: 500;
  }
  .MyCaseListBox .MyCaseListForm-DNATestingServices ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border: #4B75BD 1px solid;
  }
  .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(3) {
    text-align: center;
    justify-content: center;
  }
  .MyCaseListBox .MyCaseListForm-DNATestingServices ul li:nth-child(3) span {
    padding: 5px 10px;
    display: block;
    font-size: 1.75rem;
    font-weight: 500;
  }
  .MyCaseListBox .CaseList .form__item {
    display: block;
  }
  .MyCaseListBox .CaseList .form__item label {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .MyCaseListBox .CalculationResult .form__item .df, .MyCaseListBox .CalculationResult .form__item .df_8, .MyCaseListBox .CalculationResult .form__item .df_0 {
    display: block;
  }
  .MyCaseListBox .CalculationResult .form__item .df .form-control, .MyCaseListBox .CalculationResult .form__item .df_8 .form-control, .MyCaseListBox .CalculationResult .form__item .df_0 .form-control {
    margin-bottom: 0.3rem;
    text-align: center;
  }
}

/* =============================================================== */
/* Emergency
/* =============================================================== */
.EmergencyBox h5.danger {
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.EmergencyBox p {
  margin-bottom: 1rem;
}
.EmergencyBox .EmergencyForm ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: -ms-grid;
  display: grid;
  gap: 0 0.5rem;
  -ms-grid-columns: 100px 1fr 1fr 150px;
  grid-template-columns: 100px 1fr 1fr 150px;
  border-bottom: #ced4da 1px dashed;
}
.EmergencyBox .EmergencyForm ul li {
  padding: 1rem 0.5rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  font-weight: 400;
}
.EmergencyBox .EmergencyForm ul li:nth-child(1) {
  text-align: center;
  justify-content: center;
}
.EmergencyBox .EmergencyForm ul .form__item {
  margin-bottom: 0;
}
.EmergencyBox .EmergencyForm ul .form__item .form-check {
  margin-bottom: 0;
}
.EmergencyBox .EmergencyForm ul .form__item .form-check.success input[type=radio]:checked {
  background-color: #198754;
  border-color: #fff;
}
.EmergencyBox .EmergencyForm ul .form__item .form-check.danger input[type=radio]:checked {
  background-color: #DC3545;
  border-color: #fff;
}
.EmergencyBox .EmergencyForm ul:last-child {
  border-bottom: 0px none;
}
.EmergencyBox .EmergencyForm ul.titleBox {
  padding: 0;
  border: 0px none;
  background-color: transparent !important;
}
.EmergencyBox .EmergencyForm ul.titleBox li {
  padding: 3px 0.5rem;
  display: block;
  font-weight: 300;
  color: #fff;
  background-color: #4B75BD;
  border-radius: 4px;
}
.EmergencyBox .EmergencyForm ul:nth-child(2n+1) {
  background-color: #e9ecef;
}
@media screen and (max-width: 576px) {
  .EmergencyBox .EmergencyForm ul {
    margin-bottom: 1rem;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border: 0px none;
    border: #4B75BD 1px solid;
  }
  .EmergencyBox .EmergencyForm ul li {
    width: 100%;
    padding: 0 1rem 0.5rem;
    margin: 0 0 0.5rem;
    display: block;
    border-bottom: #ced4da 1px dashed;
  }
  .EmergencyBox .EmergencyForm ul li span.Mobile {
    display: block;
    color: #ced4da;
  }
  .EmergencyBox .EmergencyForm ul li:nth-child(1) {
    width: 100%;
    padding: 5px;
    margin-bottom: 0.5rem;
    color: #fff;
    background-color: #4B75BD;
    border-bottom: 0px none;
    border-radius: 0;
  }
  .EmergencyBox .EmergencyForm ul li:last-child {
    padding-bottom: 0;
    border-bottom: 0px none;
  }
  .EmergencyBox .EmergencyForm ul .form__item {
    display: -ms-grid;
    display: grid;
    gap: 1rem;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check {
    padding-left: 0;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check label {
    width: 100%;
    padding: 0.375rem 7px 0.375rem 62px;
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check input[type=checkbox], .EmergencyBox .EmergencyForm ul .form__item .form-check input[type=radio] {
    position: absolute;
    top: 9px;
    left: 60px;
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check input[type=checkbox]:focus + label, .EmergencyBox .EmergencyForm ul .form__item .form-check input[type=radio]:focus + label {
    border: 1px solid #289A51;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check.success input[type=radio]:checked {
    background-color: #198754;
    border-color: #fff;
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check.success input[type=radio]:checked + label.success {
    color: #fff;
    background-color: #198754;
    border: 1px solid #dee2e6;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check.danger input[type=radio]:checked {
    background-color: #DC3545;
    border-color: #fff;
  }
  .EmergencyBox .EmergencyForm ul .form__item .form-check.danger input[type=radio]:checked + label.danger {
    color: #fff;
    background-color: #DC3545;
    border: 1px solid #dee2e6;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .EmergencyBox .EmergencyForm ul:last-child {
    border-bottom: #4B75BD 1px solid;
  }
  .EmergencyBox .EmergencyForm ul.titleBox {
    display: none;
  }
  .EmergencyBox .EmergencyForm ul:nth-child(2n+1) {
    background-color: transparent;
  }
}
.EmergencyBox .EmergencyForm ul {
  -ms-grid-columns: 100px 1fr 300px 100px;
  grid-template-columns: 100px 1fr 300px 100px;
}
@media screen and (min-width: 576px) and (max-width: 796px) {
    .EmergencyBox .EmergencyForm ul {
        -ms-grid-columns: 100px 1fr 1fr 100px;
        grid-template-columns: 100px 1fr 1fr 100px;
    }
}
@media screen and (max-width: 576px) {
  .EmergencyBox .EmergencyForm ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border: #4B75BD 1px solid;
  }
  .EmergencyBox .EmergencyForm ul li:nth-child(4) span {
    padding: 5px 10px;
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 500;
  }
}
.EmergencyBox .CaseAnthropometricDataForm h4 {
  margin-bottom: 1rem;
  color: #289A51;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.EmergencyBox .CaseAnthropometricDataForm .CalculationResult label.form-label {
  color: #4B75BD;
}
.EmergencyBox .CaseAnthropometricDataForm .CalculationResult .form__item {
  font-weight: 400;
}
@media screen and (max-width: 576px) {
  .EmergencyBox .CaseAnthropometricDataForm .CalculationResult .form__item .df, .EmergencyBox .CaseAnthropometricDataForm .CalculationResult .form__item .df_8, .EmergencyBox .CaseAnthropometricDataForm .CalculationResult .form__item .df_0 {
    display: block;
  }
  .EmergencyBox .CaseAnthropometricDataForm .CalculationResult .form__item .df .form-control, .EmergencyBox .CaseAnthropometricDataForm .CalculationResult .form__item .df_8 .form-control, .EmergencyBox .CaseAnthropometricDataForm .CalculationResult .form__item .df_0 .form-control {
    margin-bottom: 0.3rem;
    text-align: center;
  }
  .EmergencyBox .CaseAnthropometricDataForm .searchBox .df, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_8, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_0 {
    display: block;
  }
  .EmergencyBox .CaseAnthropometricDataForm .searchBox .df input, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_8 input, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_0 input, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df select, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_8 select, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_0 select {
    margin-bottom: 0.5rem;
  }
  .EmergencyBox .CaseAnthropometricDataForm .searchBox .df .btn, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_8 .btn, .EmergencyBox .CaseAnthropometricDataForm .searchBox .df_0 .btn {
    width: 100%;
  }
}
.EmergencyBox .btn.btn-outline {
  color: #4B75BD;
  border-color: #4B75BD;
  text-shadow: none;
}
.EmergencyBox .Questionnaire {
  padding: 0 0 1.5rem;
  margin: 3rem 0 1.5rem;
  text-align: center;
  border-top: #adb5bd 1px dashed;
  border-bottom: #adb5bd 1px dashed !important;
}
.EmergencyBox .Questionnaire h2 {
  margin: 1.5rem 0 2rem;
  color: #4B75BD;
}
.EmergencyBox .Questionnaire h4 {
  margin-bottom: 0;
  color: #6c757d;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

@media screen and (max-width: 576px) {
  .AnthropometricSearch {
    display: block;
  }
  .AnthropometricSearch select, .AnthropometricSearch input, .AnthropometricSearch .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 576px) {
  .button_box.Anthropometric .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

.AnthropometricData .accordion {
  margin-bottom: 1rem;
}
.AnthropometricData .accordion .accordion-item, .AnthropometricData .accordion .accordion-itemLink {
  border: 0px none !important;
}
.AnthropometricData .accordion .accordion-item .accordion-header, .AnthropometricData .accordion .accordion-itemLink .accordion-header {
  padding: 0;
  background-color: #e9ecef;
  cursor: default;
}
.AnthropometricData .accordion .accordion-item .accordion-content, .AnthropometricData .accordion .accordion-itemLink .accordion-content {
  margin-top: -1px;
  display: block;
  background-color: #e9ecef;
}
.AnthropometricData .accordion .accordion-item .ContactBox, .AnthropometricData .accordion .accordion-itemLink .ContactBox {
  background-color: #f8f9fa;
}
.AnthropometricData .accordion .country {
  padding: 5px 7px;
  margin-bottom: 0.3rem;
  color: #fff;
  background-color: #4B75BD;
}
.AnthropometricData .accordion .btn {
  width: 90%;
  margin: 0 auto;
  background-color: #adb5bd;
}
.AnthropometricData .accordion .btn svg path {
  fill: #727171;
}
.AnthropometricData .accordion ul {
  padding: 0 1rem 0.3rem;
  margin: 0;
  list-style-type: none;
}
.AnthropometricData .accordion li {
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  display: flex;
  gap: 0 0.5rem;
  word-break: break-word;
  border-bottom: #ced4da 1px dashed;
}
.AnthropometricData .accordion li::after {
  display: block;
  clear: both;
  content: "";
}
.AnthropometricData .accordion li svg {
  width: 22px;
  height: 22px;
  margin-right: 0.5rem;
}
.AnthropometricData .accordion li svg path {
  fill: #4B75BD;
}
.AnthropometricData .accordion li span {
  display: block;
}
.AnthropometricData .accordion li:last-child {
  margin-bottom: 0;
}
.AnthropometricData .accordion ul:nth-child(1) li:last-child {
  border-bottom: 0px none;
}
.AnthropometricData .accordion .ContactBox {
  padding: 0.5rem 0;
}
.AnthropometricData .accordion .ContactBox ul {
  padding-bottom: 0;
  display: flex;
  gap: 0 1rem;
  align-items: center;
}
.AnthropometricData .accordion .ContactBox ul li {
  padding-bottom: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  border: 0px none;
}
.AnthropometricData .accordion .ContactBox li:nth-child(2n)::after {
  content: "|";
  margin-left: 1rem;
}
.AnthropometricData .accordion .ContactBox li:last-child::after {
  content: none;
}
@media screen and (max-width: 576px) {
  .AnthropometricData .accordion .accordion-item .accordion-header, .AnthropometricData .accordion .accordion-itemLink .accordion-header {
    padding: 0 0 0.5rem;
    cursor: pointer;
  }
  .AnthropometricData .accordion .accordion-item .accordion-content, .AnthropometricData .accordion .accordion-itemLink .accordion-content {
    display: none;
  }
  .AnthropometricData .accordion .accordion-item .btn svg, .AnthropometricData .accordion .accordion-itemLink .btn svg {
    margin-right: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .AnthropometricData .accordion .accordion-item.active .accordion-content, .AnthropometricData .accordion .active.accordion-itemLink .accordion-content {
    display: block;
  }
  .AnthropometricData .accordion .accordion-item.active .btn svg, .AnthropometricData .accordion .active.accordion-itemLink .btn svg {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .AnthropometricData .accordion .ContactBox ul {
    display: block;
  }
  .AnthropometricData .accordion .ContactBox ul li {
    margin-bottom: 0.3rem;
  }
  .AnthropometricData .accordion .ContactBox li:nth-child(2n)::after {
    content: none;
  }
  .AnthropometricData .accordion .ContactBox li:nth-child(2n) {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: #ced4da 1px dashed;
  }
  .AnthropometricData .accordion .ContactBox li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0px none;
  }
}

.CaseReportCompleted img, .CaseReportCompleted svg {
  width: 220px;
  height: 220px;
  margin: 2rem auto 2rem;
  display: block;
  text-align: center;
}
.CaseReportCompleted img path, .CaseReportCompleted svg path {
  fill: #289A51;
}
.CaseReportCompleted h4 {
  text-align: center;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.CaseReportCompleted p {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 400;
}

/* =============================================================== */
/* DNA Testing Services
/* =============================================================== */
.DnaTestingBox .DnaTestForm ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: -ms-grid;
  display: grid;
  gap: 0 0.5rem;
  -ms-grid-columns: 100px 1fr 1fr 150px;
  grid-template-columns: 100px 1fr 1fr 150px;
  border-bottom: #ced4da 1px dashed;
}
.DnaTestingBox .DnaTestForm ul li {
  padding: 1rem 0.5rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  font-weight: 400;
}
.DnaTestingBox .DnaTestForm ul li:nth-child(1) {
  text-align: center;
  justify-content: center;
}
.DnaTestingBox .DnaTestForm ul .form__item {
  margin-bottom: 0;
}
.DnaTestingBox .DnaTestForm ul .form__item .form-check {
  margin-bottom: 0;
}
.DnaTestingBox .DnaTestForm ul .form__item .form-check.success input[type=radio]:checked {
  background-color: #198754;
  border-color: #fff;
}
.DnaTestingBox .DnaTestForm ul .form__item .form-check.danger input[type=radio]:checked {
  background-color: #DC3545;
  border-color: #fff;
}
.DnaTestingBox .DnaTestForm ul:last-child {
  border-bottom: 0px none;
}
.DnaTestingBox .DnaTestForm ul.titleBox {
  padding: 0;
  border: 0px none;
  background-color: transparent !important;
}
.DnaTestingBox .DnaTestForm ul.titleBox li {
  padding: 3px 0.5rem;
  display: block;
  font-weight: 300;
  color: #fff;
  background-color: #4B75BD;
  border-radius: 4px;
}
.DnaTestingBox .DnaTestForm ul:nth-child(2n+1) {
  background-color: #e9ecef;
}
@media screen and (max-width: 576px) {
  .DnaTestingBox .DnaTestForm ul {
    margin-bottom: 1rem;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border: 0px none;
    border: #4B75BD 1px solid;
  }
  .DnaTestingBox .DnaTestForm ul li {
    width: 100%;
    padding: 0 1rem 0.5rem;
    margin: 0 0 0.5rem;
    display: block;
    border-bottom: #ced4da 1px dashed;
  }
  .DnaTestingBox .DnaTestForm ul li span.Mobile {
    display: block;
    color: #ced4da;
  }
  .DnaTestingBox .DnaTestForm ul li:nth-child(1) {
    width: 100%;
    padding: 5px;
    margin-bottom: 0.5rem;
    color: #fff;
    background-color: #4B75BD;
    border-bottom: 0px none;
    border-radius: 0;
  }
  .DnaTestingBox .DnaTestForm ul li:last-child {
    padding-bottom: 0;
    border-bottom: 0px none;
  }
  .DnaTestingBox .DnaTestForm ul .form__item {
    display: -ms-grid;
    display: grid;
    gap: 1rem;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check {
    padding-left: 0;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check label {
    width: 100%;
    padding: 0.375rem 7px 0.375rem 62px;
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check input[type=checkbox], .DnaTestingBox .DnaTestForm ul .form__item .form-check input[type=radio] {
    position: absolute;
    top: 9px;
    left: 60px;
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check input[type=checkbox]:focus + label, .DnaTestingBox .DnaTestForm ul .form__item .form-check input[type=radio]:focus + label {
    border: 1px solid #289A51;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(40, 154, 81, 0.25);
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check.success input[type=radio]:checked {
    background-color: #198754;
    border-color: #fff;
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check.success input[type=radio]:checked + label.success {
    color: #fff;
    background-color: #198754;
    border: 1px solid #dee2e6;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check.danger input[type=radio]:checked {
    background-color: #DC3545;
    border-color: #fff;
  }
  .DnaTestingBox .DnaTestForm ul .form__item .form-check.danger input[type=radio]:checked + label.danger {
    color: #fff;
    background-color: #DC3545;
    border: 1px solid #dee2e6;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .DnaTestingBox .DnaTestForm ul:last-child {
    border-bottom: #4B75BD 1px solid;
  }
  .DnaTestingBox .DnaTestForm ul.titleBox {
    display: none;
  }
  .DnaTestingBox .DnaTestForm ul:nth-child(2n+1) {
    background-color: transparent;
  }
}
.DnaTestingBox .DnaTestForm ul {
  padding-top: 5px;
  border-bottom: #ced4da 1px dashed;
  -ms-grid-columns: 100px 1fr 140px;
  grid-template-columns: 100px 1fr 140px;
}
.DnaTestingBox .DnaTestForm ul li:nth-child(3) {
  text-align: center;
}
.DnaTestingBox .DnaTestForm ul li:nth-child(3) .form__item .form-check {
  display: flex;
  justify-content: center;
}
.DnaTestingBox .DnaTestForm ul.titleBox {
  border-bottom: 0px none;
}
.DnaTestingBox .DnaTestForm .form__Layout2.mt15 {
  margin-top: 1.5rem;
}
.DnaTestingBox .DnaTestForm .df select.form-select, .DnaTestingBox .DnaTestForm .df_8 select.form-select, .DnaTestingBox .DnaTestForm .df_0 select.form-select {
  flex: 0 1 300px;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .DnaTestingBox .DnaTestForm ul {
    -ms-grid-columns: 100px 1fr 120px;
    grid-template-columns: 100px 1fr 120px;
  }
}
@media screen and (max-width: 576px) {
  .DnaTestingBox .DnaTestForm .pageForm__item {
    padding-bottom: 1.5rem 1rem;
    border-bottom: #ced4da 1px dashed;
  }
  .DnaTestingBox .DnaTestForm ul {
    padding-top: 0;
    border-top: 0px none;
    border-bottom: #4B75BD 1px solid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .DnaTestingBox .DnaTestForm .df, .DnaTestingBox .DnaTestForm .df_8, .DnaTestingBox .DnaTestForm .df_0 {
    display: block;
  }
  .DnaTestingBox .DnaTestForm .df select.form-select, .DnaTestingBox .DnaTestForm .df_8 select.form-select, .DnaTestingBox .DnaTestForm .df_0 select.form-select {
    margin-bottom: 0.5rem;
  }
}

.resultBox {
  padding: 1.5rem 1rem;
  background-color: #e9ecef;
  border-radius: 10px;
}
.resultBox h4 {
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.resultBox img {
  width: 100%;
  border-radius: 5px;
}
@media screen and (max-width: 576px) {
  .resultBox {
    padding: 1rem;
  }
}

.Review.df a, .Review.df_8 a, .Review.df_0 a {
  color: #289A51;
  font-weight: 500;
  font-size: 1.2rem;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .Review.df, .Review.df_8, .Review.df_0 {
    display: flex !important;
  }
}
@media screen and (max-width: 576px) {
  .Review.df, .Review.df_8, .Review.df_0 {
    display: flex !important;
  }
}

/* =============================================================== */
/* Terms and Conditions Agreement
/* =============================================================== */
.TermsBox h6, .PrivacyBox h6 {
  margin-bottom: 1.5rem;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.TermsBox h6 .minor, .PrivacyBox h6 .minor {
  color: #4B75BD;
}
.TermsBox .ItemBox, .PrivacyBox .ItemBox {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: #289A51 1px solid;
}
.TermsBox .Item, .PrivacyBox .Item {
  margin-bottom: 1rem;
  border-bottom: #ced4da 1px dashed;
}
.TermsBox .Item h4, .PrivacyBox .Item h4 {
  margin-bottom: 1rem;
  word-break: break-word;
  color: #289A51;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
.TermsBox .Item p, .PrivacyBox .Item p {
  margin-bottom: 1rem;
  word-break: break-word;
}
.TermsBox .Item p.mb5, .PrivacyBox .Item p.mb5 {
  margin-bottom: 0.5rem;
}
.TermsBox .Item ul, .PrivacyBox .Item ul {
  padding-left: 25px;
}
.TermsBox .Item:last-child, .PrivacyBox .Item:last-child {
  border-bottom: 0px none;
}
/* =============================================================== */
/* Latest News
/* =============================================================== */
.NewsBox > a {
  margin-bottom: 1rem;
  display: block;
  text-decoration: none;
  -webkit-box-shadow: 0px 1px 3px #aaa;
          box-shadow: 0px 1px 3px #aaa;
  border-radius: 5px;
}
.NewsBox > a .dateBar {
  padding: 0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #4B75BD;
  border-radius: 5px 5px 0 0;
}
.NewsBox > a .dateBar p {
  margin-bottom: 0;
  color: #fff;
  font-weight: 400;
}
.NewsBox > a .dateBar span.more {
  padding: 0.1rem 7px;
  position: relative;
  color: #fff;
  font-weight: 400;
  background-color: #289A51;
  border-radius: 4px;
}
.NewsBox > a .dateBar span.more::before {
  content: "";
  bottom: -6px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 2px solid transparent;
  border-top: 7px solid #289A51;
}
.NewsBox > a .contenBox {
  display: flex;
  gap: 0 1rem;
  align-items: center;
  background-color: #e9ecef;
}
.NewsBox > a .contenBox h4 {
  margin-bottom: 0;
  order: 2;
  word-break: break-word;
  font-weight: 400;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.NewsBox > a .contenBox img {
  height: 100px;
  order: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-box-shadow: 0px 1px 3px #aaa;
          box-shadow: 0px 1px 3px #aaa;
}
.NewsBox a:hover .dateBar {
  background-color: #2b4777;
}
.NewsBox a:hover .contenBox img {
  height: 150px;
}
.NewsBox ul.pagination {
  margin-bottom: 0;
}
@media screen and (max-width: 576px) {
  .NewsBox {
    padding: 0 0 1.5rem;
  }
  .NewsBox a .contenBox {
    display: block;
  }
  .NewsBox a .contenBox h4 {
    padding: 1rem 0.5rem;
  }
  .NewsBox a .contenBox img {
    width: 100%;
    height: auto;
  }
  .NewsBox a:hover .contenBox img {
    height: auto;
  }
}

.NewsContent {
  padding: 0;
}
.NewsContent::after {
  display: block;
  clear: both;
  content: "";
}
.NewsContent .dateBar {
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #4B75BD;
  border-radius: 5px 5px 0 0;
}
.NewsContent .dateBar p {
  margin-bottom: 0;
  color: #fff;
  font-weight: 400;
}
.NewsContent .contentBox {
  padding: 0 1rem 1rem;
}
.NewsContent .contentBox::after {
  display: block;
  clear: both;
  content: "";
}
.NewsContent .contentBox img {
  float: left;
}
.NewsContent .contentBox h4 {
  width: calc(100% - 373px);
  margin-bottom: 1rem;
  padding: 1rem 1rem 1rem 1.5rem;
  overflow: auto;
  background-color: #e9ecef;
  word-break: normal;
  -webkit-box-shadow: 0px 1px 3px #aaa;
          box-shadow: 0px 1px 3px #aaa;
}
.NewsContent .contentBox .text {
  padding-left: 1.5rem;
  overflow: auto;
}
.NewsContent .contentBox .text p:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
    .NewsContent .dateBar {
        margin-bottom: 0;
    }
  .NewsContent .contentBox {
    padding: 0;
    display:grid;
  }
  .NewsContent .contentBox h4 {
    width: 100%;
    margin-bottom: 0;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .NewsContent .contentBox .text {
    width: 100%;
    padding: 1rem;
  }
}
@media screen and (max-width: 576px) {
  .NewsContent .dateBar {
    margin-bottom: 0;
  }
  .NewsContent .contentBox {
    padding: 0;
    display: -ms-grid;
    display: grid;
  }
  .NewsContent .contentBox img {
    width: 100%;
    float: none;
  }
  .NewsContent .contentBox h4 {
    width: 100%;
    margin-bottom: 0;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .NewsContent .contentBox .text {
    padding: 1rem;
  }
}

/* =============================================================== */
/* Privacy Policy
/* =============================================================== */
.PrivacyBox .ItemBox {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0px none;
}
.PrivacyBox .Item {
  margin-bottom: 2.5rem;
  border-bottom: 0px none;
}
.PrivacyBox .Item h4 {
  padding: 0.5rem 1rem;
  margin-bottom: 0.8rem;
  position: relative;
  display: inline-block;
  word-break: break-word;
  color: #fff;
  background-color: #4B75BD;
  border-radius: 2.5rem;
}
.PrivacyBox .Item h4:after {
  content: "";
  bottom: -11px;
  right: 40px;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 13px solid #4B75BD;
}
.PrivacyBox .Item .textbox {
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border: #4B75BD 1px solid;
  border-radius: 10px;
}
.PrivacyBox .Item .text {
  margin-bottom: 1rem;
  word-break: break-word;
  font-size: 1.1rem;
  line-height: 1.65rem;
}
.PrivacyBox .Item .text:last-child {
  margin-bottom: 0;
}
.PrivacyBox .Item:last-child {
  margin-bottom: 0;
}

/* =============================================================== */
/* Verification Successful, Verification Failed
/* =============================================================== */
.VerificationBox {
  padding: 100px 0;
  text-align: center;
}
.VerificationBox .svg.Success {
  width: 200px;
  height: 200px;
}
.VerificationBox .svg.Success path {
  fill: #198754;
}
.VerificationBox .svg.Danger {
  width: 200px;
  height: 200px;
}
.VerificationBox .svg.Danger path {
  fill: #DC3545;
}
.VerificationBox .textBox {
  width: 500px;
  margin: 2rem auto;
}
.VerificationBox .textBox p {
  margin-bottom: 1rem;
  font-weight: 400;
}
.VerificationBox .button_box {
  margin: 1rem 0;
}
.VerificationBox .button_box .btn {
  background-color: #289A51;
  border-bottom: 0px none;
}
.VerificationBox .button_box .member {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.VerificationBox .button_box .member path {
  fill: #fff;
}
@media screen and (max-width: 576px) {
  .VerificationBox {
    padding: 30px 0;
  }
  .VerificationBox .textBox {
    width: 80%;
  }
}

/* =============================================================== */
/* Friend site link
/* =============================================================== */
.LinksBox .Layout3 {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: center;
}
.LinksBox .Link__item {
  text-align: center;
}
.LinksBox a {
  display: block;
  text-decoration: none;
}
.LinksBox a:hover .text {
  background-color: #e0e7f4;
}
.LinksBox a:hover img {
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}
.LinksBox .text {
  padding: 1rem 0.5rem;
  margin-top: 0.5rem;
  background-color: #e3f8ea;
  border-top: #96aed8 2px solid;
  border-radius: 0 0 5px 5px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.LinksBox h5 {
  min-height: 50px;
  margin-bottom: 0.5rem;
  font-weight: 400;
  word-break: break-word;
  font-family: "Roboto", sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.LinksBox p {
  margin-bottom: 0;
  color: #adb5bd;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.LinksBox .imgBox {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.LinksBox .imgBox img {
  max-width: 80%;
  height: auto;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .LinksBox .Layout3 {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 576px) {
  .LinksBox .Layout3 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* =============================================================== */
/* Malignant Hyperthermia Knowledge Base 惡性高熱知識庫
/* =============================================================== */
.KnowledgeBox .BaseBox {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}
.KnowledgeBox .BaseBox a {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.KnowledgeBox .BaseBox a .pdfIMg {
  opacity: 0;
  width: 70px;
  height: 42px;
  padding-top: 3px;
  text-align: center;
  position: absolute;
  top: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: url(../images/Subtract.svg) no-repeat 0px 0px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.KnowledgeBox .BaseBox a .pdfIMg svg {
  width: 30px;
  height: 30px;
}
.KnowledgeBox .BaseBox a .pdfIMg svg path {
  fill: #fff;
}
.KnowledgeBox .BaseBox a img {
  border-radius: 5px;
}
.KnowledgeBox .BaseBox a .textBox {
  width: 373px;
  padding: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(52, 58, 64, 0.7);
  border-top: #289A51 2px solid;
  border-radius: 0 0 5px 5px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.KnowledgeBox .BaseBox a .textBox h4 {
  margin: 0;
  color: #fff;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  text-shadow: 0px 1px 2px #000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.KnowledgeBox .BaseBox a .textBox svg.fa-circle-arrow-down {
  display: none;
  opacity: 0;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.KnowledgeBox .BaseBox a .textBox svg.fa-circle-arrow-down path {
  fill: #fff;
}
.KnowledgeBox .BaseBox a .textBox::before {
  content: "";
  left: 0;
  top: -8px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 13px solid #289A51;
  border-bottom: 7px solid transparent;
}
.KnowledgeBox .BaseBox a:hover .pdfIMg {
  opacity: 1;
  top: 0px;
}
.KnowledgeBox .BaseBox a:hover .textBox {
  background-color: rgba(52, 58, 64, 0.9);
}
.KnowledgeBox .BaseBox a:hover .textBox h4 {
  -webkit-box-orient: horizontal;
  line-clamp: 0;
  -webkit-line-clamp: 0;
}
.KnowledgeBox .BaseBox a:hover .textBox svg.fa-circle-arrow-down {
  display: block;
  -webkit-animation: svg 0.3s ease-in 0.1s forwards 1;
          animation: svg 0.3s ease-in 0.1s forwards 1;
}
@-webkit-keyframes svg {
  0% {
    opacity: 0;
    margin-top: 0;
    -webkit-transform: rotate(360deg) scale(0.5);
            transform: rotate(360deg) scale(0.5);
  }
  100% {
    opacity: 1;
    margin-top: 0.5rem;
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}
@keyframes svg {
  0% {
    opacity: 0;
    margin-top: 0;
    -webkit-transform: rotate(360deg) scale(0.5);
            transform: rotate(360deg) scale(0.5);
  }
  100% {
    opacity: 1;
    margin-top: 0.5rem;
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .KnowledgeBox .BaseBox {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .KnowledgeBox .BaseBox a .textBox {
    width: 100%;
  }
  .KnowledgeBox .BaseBox a .textBox h4 {
    overflow: visible;
    display: block;
  }
  .KnowledgeBox .BaseBox a:hover .textBox svg.fa-circle-arrow-down {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  .KnowledgeBox .BaseBox {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .KnowledgeBox .BaseBox a .pdfIMg {
    display: none;
  }
  .KnowledgeBox .BaseBox a img {
    width: 100%;
  }
  .KnowledgeBox .BaseBox a .textBox {
    width: 100%;
  }
  .KnowledgeBox .BaseBox a .textBox h4 {
    overflow: visible;
    display: block;
  }
  .KnowledgeBox .BaseBox a .textBox svg.fa-circle-arrow-down {
    display: none;
  }
  .KnowledgeBox .BaseBox a:hover .textBox svg.fa-circle-arrow-down {
    display: none;
  }
}

/* =============================================================== */
/* Donate to AMHA
/* =============================================================== */
.DonateBox .AccountNumber h4 {
  color: #289A51;
}
.DonateBox .AccountNumber ul {
  padding: 0;
  list-style-type: none;
}
.DonateBox .AccountNumber li {
  font-weight: 500;
}
.DonateBox .AccountNumber li span {
  font-weight: 300;
}
@media screen and (max-width: 576px) {
  .DonateBox .AccountNumber li {
    margin-bottom: 0.5rem;
  }
  .DonateBox .AccountNumber li span {
    padding: 2px;
    margin-bottom: 0.25em;
    display: block;
    background-color: #e9ecef;
  }
}

/* =============================================================== */
/* FAQs
/* =============================================================== */
.FAQsBox .accordionFAQs .accordion-item, .FAQsBox .accordionFAQs .accordion-itemLink {
  padding: 0;
  margin-bottom: 1rem;
  border: #dee2e6 1px solid !important;
  border-radius: 5px;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header {
  padding: 0;
  background-color: #fff;
  border-radius: 5px;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header button.accordion-button, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header button.accordion-button {
  padding: 0.7rem 1rem;
  justify-content: space-between;
  font-size: 1.5rem;
  color: #6c757d;
  border: 0px none;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header button.accordion-button .left svg, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header button.accordion-button .left svg {
  height: 30px;
  margin-right: 0.5rem;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header button.accordion-button .left svg path, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header button.accordion-button .left svg path {
  fill: #289A51;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header button.accordion-button .right svg, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header button.accordion-button .right svg {
  height: 20px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header button.accordion-button .right svg path, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header button.accordion-button .right svg path {
  fill: #6c757d;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header button.accordion-button::after, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header button.accordion-button::after {
  content: none;
}
.FAQsBox .accordionFAQs .accordion-item .accordion-header .left, .FAQsBox .accordionFAQs .accordion-itemLink .accordion-header .left {
  display: flex;
  gap: 0 0.5rem;
  word-break: break-word;
}
.FAQsBox .accordionFAQs .accordion-item.active, .FAQsBox .accordionFAQs .active.accordion-itemLink {
  border-radius: 5px;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header {
  border-radius: 5px 5px 0 0;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header button.accordion-button, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header button.accordion-button {
  padding: 0.7rem 1rem;
  justify-content: space-between;
  font-size: 1.5rem;
  color: #6c757d;
  border: 0px none;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header button.accordion-button .left svg, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header button.accordion-button .left svg {
  height: 30px;
  margin-right: 0.5rem;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header button.accordion-button .left svg path, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header button.accordion-button .left svg path {
  fill: #289A51;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header button.accordion-button .right svg, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header button.accordion-button .right svg {
  height: 20px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header button.accordion-button .right svg path, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header button.accordion-button .right svg path {
  fill: #6c757d;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header button.accordion-button::after, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header button.accordion-button::after {
  content: none;
}
.FAQsBox .accordionFAQs .accordion-item.active .accordion-header button.accordion-button .right svg, .FAQsBox .accordionFAQs .active.accordion-itemLink .accordion-header button.accordion-button .right svg {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.FAQsBox .accordionFAQs .accordion-body {
  padding: 1rem;
  display: -ms-grid;
  display: grid;
  gap: 0 0.5rem;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
  font-size: 1.1rem;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25) inset;
          box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25) inset;
  background-color: #e9ecef;
}
.FAQsBox .accordionFAQs .accordion-body svg {
  height: 30px;
}
.FAQsBox .accordionFAQs .accordion-body svg path {
  fill: #4B75BD;
}
.FAQsBox .accordionFAQs .accordion-body .text {
  margin-top: 0.25rem;
}
.FAQsBox .accordionFAQs .accordion-body .text img {
  max-width: 900px;
}
.FAQsBox .accordionFAQs .accordion-body .text p:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .FAQsBox .accordionFAQs .accordion-header .accordion-button {
    align-items: flex-start;
  }
  .FAQsBox .accordionFAQs .accordion-header .accordion-button .left svg {
    float: left;
  }
  .FAQsBox .accordionFAQs .accordion-header .accordion-button .left span {
    width: auto;
    margin-top: 0.25rem;
    overflow: auto;
    display: block;
  }
  .FAQsBox .accordionFAQs .accordion-body .text img {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .FAQsBox .accordionFAQs .accordion-header .accordion-button {
    width: 100%;
    display: block;
  }
  .FAQsBox .accordionFAQs .accordion-header .accordion-button .left svg {
    float: left;
  }
  .FAQsBox .accordionFAQs .accordion-header .accordion-button .left span {
    margin-top: 0.25rem;
    overflow: auto;
    display: block;
  }
  .FAQsBox .accordionFAQs .accordion-header .accordion-button .right {
    margin-top: 0.5rem;
    text-align: center;
    background-color: #dee2e6;
    border-radius: 4px;
  }
  .FAQsBox .accordionFAQs .accordion-header .accordion-button .right svg {
    margin-right: 0;
  }
  .FAQsBox .accordionFAQs .accordion-body {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .FAQsBox .accordionFAQs .accordion-body .text img {
    width: 100%;
  }
}

/* ====================== key in ====================== */
/***************************************************************************/
/*                                 SideBar                                 */
/***************************************************************************/
/* =============================================================== */
/* Admin Page
/* =============================================================== */
aside#Admin__Aside button {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}
aside#Admin__Aside button svg {
  margin-right: 5px;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
aside#Admin__Aside svg path {
  fill: #6c757d;
}
aside#Admin__Aside ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
aside#Admin__Aside li {
  width: 100%;
  padding: 3px;
  margin-bottom: 0;
  display: block;
}
aside#Admin__Aside li.active {
  background-color: aqua;
  border-radius: 4px;
}
aside#Admin__Aside p {
  margin-bottom: 0;
  display: inline-block;
}

aside#Admin__Aside.noAside button {
  width: 30px;
  height: 30px;
  padding: 0;
}
aside#Admin__Aside.noAside button svg {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
aside#Admin__Aside.noAside p {
  display: none;
}
aside#Admin__Aside.noAside svg {
  height: 100%;
}

/* =============================================================== */
/* Web
/* =============================================================== */
aside.web__aside {
  padding: 30px;
}
aside.web__aside ul {
  padding: 0 20px;
}
aside.web__aside a {
  padding: 5px 5px;
  display: block;
  text-decoration: none;
}
aside.web__aside a.router-link-active {
  background-color: #dee2e6;
  border-radius: 2px;
}

/* ====================== key in ====================== */
/***************************************************************************/
/*                               js_Accordion                              */
/***************************************************************************/
.accordion-item:first-of-type, .accordion-itemLink:first-of-type {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.accordion-item:last-of-type, .accordion-itemLink:last-of-type {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.accordion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.accordion-item, .accordion-itemLink {
  color: #727171;
  background-color: #fff;
  border-top: #289A51 1px solid !important;
  border-left: #289A51 1px solid;
  border-right: #289A51 1px solid;
  border-bottom: #fff 1px solid;
}
.accordion-item .accordion-header, .accordion-itemLink .accordion-header {
  padding: 10px;
  margin: 0;
  position: relative;
  color: #fff;
  background-color: #289A51;
  cursor: pointer;
}
.accordion-item .accordion-header svg, .accordion-itemLink .accordion-header svg {
  height: 1.2rem;
  margin-right: 3px;
}
.accordion-item .accordion-header svg path, .accordion-itemLink .accordion-header svg path {
  fill: #dee2e6 #fff;
}

.accordion-item.active .accordion-header, .active.accordion-itemLink .accordion-header {
  color: #fff;
}
.accordion-item.active svg path, .active.accordion-itemLink svg path {
  fill: #fff;
}

.accordion-itemLink .accordion-header {
  padding: 0px;
}
.accordion-itemLink .accordion-header a {
  width: 100%;
  padding: 10px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.nav-more {
  content: "";
  width: 0;
  height: 0;
  margin-top: -3px;
  top: 50%;
  right: 15px;
  position: absolute;
  border-width: 6px;
  border-top-color: #fff;
  cursor: pointer;
  border-style: solid dashed dashed;
  border-color: #fff transparent transparent;
  overflow: hidden;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

.accordion-item.active .nav-more, .active.accordion-itemLink .nav-more {
  margin-top: -9px;
  border-style: dashed dashed solid;
  border-color: transparent transparent #fff;
}

.accordion-content {
  display: none;
  color: #fff;
  background-color: #f8f9fa;
}
.accordion-content p {
  color: #fff;
  text-decoration: none;
}
.accordion-content a {
  padding: 3px 10px;
  display: block;
  color: #495057;
  text-decoration: none;
}
.accordion-content a:hover {
  color: #fff;
  background-color: #9a2871;
}

.accordion-item.active .accordion-content, .active.accordion-itemLink .accordion-content {
  display: block;
}

/***************************************************************************/
/*                                 js_Slick                                */
/***************************************************************************/
.responsive_case {
  width: 1200px;
  margin: 0 auto 30px;
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 2;
  grid-column-end: 3;
  -ms-grid-row: 1;
      grid-row-start: 1;
  -ms-grid-row-span: 1;
  grid-row-end: 2;
}
.responsive_case img {
  width: 100%;
}
.responsive_case .slick-list {
  margin: 0 -10px;
}
.responsive_case .slick-slide {
  margin-right: 5px;
  margin-left: 5px;
}
.responsive_case .slick-prev, .responsive_case .slick-next {
  padding: 0;
  position: absolute;
  top: 45%;
  display: block;
  font-size: 0;
  line-height: 0;
  -webkit-transform: translate(0, -50%) scale(1);
          transform: translate(0, -50%) scale(1);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
.responsive_case .slick-prev:hover, .responsive_case .slick-next:hover {
  -webkit-transform: translate(0, -50%) scale(1);
          transform: translate(0, -50%) scale(1);
}
.responsive_case .slick-prev {
  left: -30px;
  z-index: 10;
}
.responsive_case .slick-next {
  right: -30px;
  z-index: 10;
}
.responsive_case .slick-prev:before, .responsive_case .slick-next:before {
  opacity: 0.75;
}
.responsive_case .slick-prev:before {
  content: "←";
  width: 20px;
  height: 36px;
  display: block;
  background: url(../images/angle-left.svg) no-repeat 0px 0px/cover;
}
.responsive_case .slick-next:before {
  content: "→";
  width: 20px;
  height: 36px;
  display: block;
  background: url(../images/angle-right.svg) no-repeat 0px 0px/cover;
}
.responsive_case ul.slick-dots {
  padding: 0;
  margin: 10px auto;
  text-align: center;
  list-style-type: none;
}
.responsive_case ul.slick-dots li {
  margin: 0 2px;
  display: inline-block;
}
.responsive_case ul.slick-dots li button {
  border-radius: 5px;
  border: 0px none;
}
.responsive_case ul.slick-dots li.slick-active button {
  color: #fff;
  background-color: #289A51;
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  .responsive_case {
    width: 100%;
  }
  .responsive_case .slick-prev {
    left: 0px;
  }
  .responsive_case .slick-next {
    right: 0px;
  }
}
@media screen and (max-width: 576px) {
  .responsive_case {
    width: 100%;
  }
  .responsive_case .slick-slide {
    margin-right: 0px;
    margin-left: 0px;
  }
  .responsive_case .slick-prev {
    left: 0px;
  }
  .responsive_case .slick-next {
    right: 0px;
  }
}

/***************************************************************************/
/*                              js_Flickity V2                             */
/***************************************************************************/
.carousel {
  width: 1200px;
  margin: 0 auto 30px;
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 2;
  grid-column-end: 3;
  -ms-grid-row: 2;
      grid-row-start: 2;
  -ms-grid-row-span: 1;
  grid-row-end: 3;
  background: #EEE;
}

.carousel-cell {
  width: 66%;
  height: 260px;
  margin-right: 10px;
  border-radius: 5px;
}

.carousel-cell img {
  width: 100%;
}

/* cell number */
/***************************************************************************/
/*                             Responsive_Plug                             */
/***************************************************************************/
@media screen and (min-width: 1190px) {
  table.responTable {
    width: 100%;
    margin: 20px auto 20px auto;
    text-rendering: optimizeLegibility;
    caption-side: top;
  }
  table.responTable caption {
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    background-color: #eee;
    border-top: #fff 1px solid;
    border-left: #fff 1px solid;
    border-right: #fff 1px solid;
  }
  table.responTable thead tr th, table.responTable thead tr td, table.responTable tbody tr th, table.responTable tbody tr td {
    color: #fff;
    padding: 7px 5px;
  }
  table.responTable thead tr th a, table.responTable thead tr td a, table.responTable tbody tr th a, table.responTable tbody tr td a {
    min-width: 26px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-decoration: underline;
    margin: 0 5px 0 0;
    cursor: pointer;
  }
  table.responTable thead tr th {
    background: #289A51;
    font-weight: 400;
    border-left: #fff 1rem solid;
  }
  table.responTable thead tr th:first-child {
    border-left: 0px none;
  }
  table.responTable tbody tr td {
    color: #727171;
  }
  table.responTable tr.odd {
    background: #f3f3f3;
  }
  table.responTable tbody tr:nth-child(2n) td {
    background: #e9ecef;
  }
  table.responTable tbody tr td .td_content a {
    padding: 0.375rem 0.75rem;
    display: block;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
    border: #fff 1px solid;
    background-color: #F8F9FA;
    border-radius: 0.375rem;
    text-decoration: none;
  }
  table.responTable tbody tr td .td_content a:hover {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  table.responTable tbody tr td .td_content .btn {
    width: 100%;
    margin: 0 auto;
    font-size: 1.1rem;
    display: block;
  }
}
@media screen and (min-width: 576px) and (max-width: 1190px) {
  table.responTable {
    width: 100%;
    margin: 20px auto 20px auto;
    text-rendering: optimizeLegibility;
    caption-side: top;
  }
  table.responTable caption {
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    background-color: #eee;
    border-top: #fff 1px solid;
    border-left: #fff 1px solid;
    border-right: #fff 1px solid;
  }
  table.responTable thead tr th, table.responTable thead tr td, table.responTable tbody tr th, table.responTable tbody tr td {
    color: #fff;
    padding: 7px 5px;
  }
  table.responTable thead tr th a, table.responTable thead tr td a, table.responTable tbody tr th a, table.responTable tbody tr td a {
    min-width: 26px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-decoration: underline;
    margin: 0 5px 0 0;
    cursor: pointer;
  }
  table.responTable thead tr th {
    background: #289A51;
    font-weight: 400;
    border-left: #fff 0.5rem solid;
  }
  table.responTable thead tr th:first-child {
    border-left: 0px none;
  }
  table.responTable tbody tr td {
    color: #727171;
  }
  table.responTable tr.odd {
    background: #f3f3f3;
  }
  table.responTable tbody tr:nth-child(2n) td {
    background: #e9ecef;
  }
  table.responTable tbody tr td .td_content a {
    padding: 0.375rem 0.75rem;
    display: block;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
    border: #fff 1px solid;
    background-color: #F8F9FA;
    border-radius: 0.375rem;
    text-decoration: none;
  }
  table.responTable tbody tr td .td_content a:hover {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  table.responTable tbody tr td .td_content .btn {
    width: 100%;
    margin: 0 auto;
    font-size: 1.1rem;
    display: block;
  }
}
@media screen and (max-width: 576px) {
  table.responTable {
    display: block;
    border: none;
    margin: 20px auto;
  }
  table.responTable thead {
    display: none;
  }
  table.responTable tbody tr {
    position: relative;
    display: block;
    margin: 0 0 10px 0;
  }
  table.responTable tbody tr td {
    color: #727171;
    position: relative;
    margin-bottom: 0;
    background-color: #e9ecef;
    display: inline-block;
    width: 100%;
    padding: 0;
    vertical-align: middle;
    border-top: #fff 1px solid;
    border-right: #fff 1px solid;
    border-left: #fff 1px solid;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  table.responTable tbody tr td:last-child {
    border-bottom: #fff 1px solid;
  }
  table.responTable tbody tr td div {
    color: #727171;
    display: table-cell;
    padding: 5px;
    text-align: left;
    border-left: #fff 1px solid;
  }
  table.responTable tbody tr td div a {
    display: block;
    text-decoration: underline;
    margin: 0 0 5px 0;
  }
  table.responTable tbody tr td:first-child { /* background: $t_th_bg_color; */ }
  table.responTable tbody tr td:before {
    color: #fff;
    background: #289A51;
    content: attr(data-th);
    display: table-cell;
    left: 0;
    width: 130px;
    margin: 0 5px 0 0;
    padding: 0 5px; /* border-right: $t_color $t_width $t_style; */
    vertical-align: middle;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  table.responTable tbody tr:not(:last-child) {
    border-right: none;
    border-bottom: none;
  }
  table.responTable tbody tr td .td_content a {
    padding: 0.375rem 0.75rem;
    display: block;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
    border: #fff 1px solid;
    background-color: #F8F9FA;
    border-radius: 0.375rem;
    text-decoration: none;
  }
  table.responTable tbody tr td .td_content a:hover {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  table.responTable tbody tr td .td_content .btn {
    width: 100%;
    margin: 0 auto;
    font-size: 1.1rem;
    display: block;
  }
}