@charset "UTF-8";
:root {
  --main: #0f4c81;
  --main-menu: #304269;
  --main-menu-hover: #608cb2;
  /* aside */
  --aside-layer1-bg: #f5f5f5;
  --aside-layer1-bg-hover: #8fb6d3;
  --aside-layer2-bg: #e4ebf1;
  --aside-layer2-hover: #1e7cc2;
  --aside-layer3: #4a6175;
  --aside-layer3-hover: #608cb2;
  /* title */
  --title: #304269;
  --title-line: #80abdb;
  --red: #ec6c5f;
  --green: #7bc4c4; }

/* mixin */
* {
  box-sizing: border-box;
  font-family: "Open Sans", "微軟正黑體", sans-serif; }
  *:focus {
    outline: none; }

html {
  font-size: 16px; }

body {
  font-family: "Open Sans", "微軟正黑體", sans-serif;
  overflow-x: hidden;
  transition: 0.3s;
  position: relative;
  color: #222;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  max-width: 1920px;
  margin: auto !important; }
  body.fixed {
    height: 100vh !important;
    overflow: hidden !important; }

a,
a:hover,
a:focus,
a:visited,
a:active {
  text-decoration: none;
  transition: 0.3s; }

.unreset {
  padding: 1px 0;
  color: #222;
  font-family: "Open Sans", "微軟正黑體", sans-serif; }
  .unreset:after {
    content: "";
    display: block;
    clear: both; }
  .unreset p:first-child {
    margin-top: 0; }

.unreset img {
  max-width: 100%;
  height: auto !important; }

.unreset iframe {
  max-width: 100%;
  display: block; }

/* 編輯器影片RWD */
.unreset .embeddedContent {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }

.unreset .embeddedContent iframe,
.unreset .embeddedContent object,
.unreset .embeddedContent embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.unreset blockquote{
  font-style: italic;
  font-family: Georgia, Times, "Times New Roman", serif;
  padding: 2px 0;
  border-style: solid;
  border-color: #ccc;
  border-width: 0;}

.unreset blockquote {
    padding-left: 20px;
    padding-right: 8px;
    border-left-width: 5px;
}

.page-container {
  margin: 0 auto;
  width: 1400px;
  max-width: 100%;
  padding: 0 20px; }

sup {
  vertical-align: super;
  font-size: small; }

sub {
  vertical-align: sub;
  font-size: smaller;
  font-weight: lighter; }

select {
  font-family: "Open Sans", "微軟正黑體", sans-serif; }

img::selection {
  background: transparent; }

img::-moz-selection {
  background: transparent; }

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #ddd;
  border-radius: 10px; }

::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 0 0 0;
  background: #ccc; }

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px; }

::-webkit-scrollbar-thumb:horizontal {
  background: #000;
  border-radius: 10px; }

/* 404 */
.error-row {
  background: url(../images/404/error-background.svg) no-repeat;
  background-position: center top;
  max-width: 1400px;
  padding: 30px 25px 60px 25px;
  margin: 30px auto 0 auto; }
  .error-row .img-box {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100%; }
    .error-row .img-box img {
      display: block;
      width: 100%; }
    .error-row .img-box .error-code {
      color: #222;
      font-size: 80px;
      font-weight: bold;
      letter-spacing: 5px;
      line-height: 1;
      margin: 0;
      position: absolute;
      top: 42%;
      left: 50%;
      transform: translateX(-57%); }
  .error-row .content {
    margin-top: 30px;
    text-align: center; }
    .error-row .content .title {
      color: #222;
      font-size: 24px;
      font-weight: bold;
      margin: 0; }
    .error-row .content .des {
      margin-top: 25px; }
      .error-row .content .des p {
        color: #222;
        font-size: 17px;
        line-height: 1.6;
        margin: 0; }
        .error-row .content .des p:not(:last-child) {
          margin-bottom: 5px; }
  .error-row .btn-row {
    margin-top: 40px; }
    .error-row .btn-row .link {
      border-radius: 30px;
      background: #222;
      color: #fff;
      display: block;
      font-size: 18px;
      padding: 12px 13px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      text-decoration: inherit;
      text-transform: uppercase;
      transition: all 0.4s;
      width: 240px; }
      .error-row .btn-row .link:hover {
        background: var(--s-color);
        color: var(--m-color); }
  @media (max-width: 1440px) {
    .error-row .img-box .error-code {
      font-size: 65px; }
    .error-row .btn-row {
      margin-top: 30px; } }
  @media (max-width: 1024px) {
    .error-row .img-box {
      max-width: 440px; }
      .error-row .img-box .error-code {
        font-size: 70px;
        top: 45%; }
    .error-row .btn-row {
      margin-top: 50px; } }
  @media (max-width: 640px) {
    .error-row {
      padding: 20px 25px 40px 25px;
      margin: 0 auto 20px auto; }
      .error-row .img-box {
        max-width: 340px; }
        .error-row .img-box .error-code {
          font-size: 50px;
          top: 45%; }
      .error-row .content {
        margin-top: 30px; }
        .error-row .content .des {
          margin-top: 15px; }
          .error-row .content .des p {
            font-size: 16px; }
      .error-row .btn-row {
        margin-top: 30px; }
        .error-row .btn-row .link {
          font-size: 17px;
          max-width: 170px; } }

/* 空白狀態 */
.empty-row {
  margin-left: auto;
  margin-right: auto;
  padding: 40px 20px;
  max-width: 640px; }
  .empty-row .img-box {
    max-width: 100px;
    margin-left: auto;
    margin-right: auto; }
    .empty-row .img-box img {
      display: block;
      width: 100%; }
  .empty-row .content {
    margin-top: 40px;
    text-align: center; }
    .empty-row .content .title {
      color: #222;
      font-size: 32px;
      line-height: 1.2;
      margin: 0; }
    .empty-row .content .des {
      color: #888;
      font-size: 17px;
      line-height: 1.6;
      margin: 0;
      margin-top: 20px; }
  .empty-row .btn-row {
    margin-top: 40px; }
    .empty-row .btn-row .link {
      background: #000;
      color: #fff;
      display: block;
      font-size: 17px;
      margin-left: auto;
      margin-right: auto;
      padding: 13px;
      text-align: center;
      text-decoration: inherit;
      transition: all 0.4s;
      width: 120px; }
      .empty-row .btn-row .link:hover {
        background: #aaa; }
  @media (max-width: 640px) {
    .empty-row .content {
      margin-top: 30px; }
      .empty-row .content .title {
        font-size: 26px; }
      .empty-row .content .des {
        font-size: 16px;
        margin-top: 15px; }
    .empty-row .btn-row {
      margin-top: 30px; } }

.cookies-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(110%);
  transition: all 0.3s;
  z-index: 11; }
  .cookies-box.show {
    transform: translateY(0); }
  .cookies-box .cookies-content {
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    padding: 15px 20px; }
    .cookies-box .cookies-content .des {
      padding-right: 20px;
      width: calc(100% - 100px); }
      .cookies-box .cookies-content .des p {
        color: #fff;
        font-size: 1rem;
        line-height: 1.5;
        margin: 0; }
      .cookies-box .cookies-content .des a {
        color: #fff;
        display: inline-block;
        font-size: 1rem;
        line-height: 1.5;
        text-decoration: underline; }
        .cookies-box .cookies-content .des a:hover {
          opacity: 0.5; }
    .cookies-box .cookies-content .btn-confirm {
      border: 1px solid white;
      background: none;
      color: white;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      display: block;
      padding: 13px 10px;
      text-align: center;
      width: 100px; }
      .cookies-box .cookies-content .btn-confirm:hover {
        background: white;
        color: #333; }
    .cookies-box .cookies-content > .page-container {
      display: flex;
      align-items: center; }
  @media (max-width: 1440px) {
    .cookies-box .cookies-content {
      padding: 15px 0; } }
  @media (max-width: 640px) {
    .cookies-box .cookies-content {
      display: block; }
      .cookies-box .cookies-content .des {
        padding-right: 0;
        margin-bottom: 10px;
        width: 100%; }
        .cookies-box .cookies-content .des p,
        .cookies-box .cookies-content .des a {
          font-size: 0.875rem; }
      .cookies-box .cookies-content .btn-confirm {
        padding: 10px 8px;
        font-size: 0.875rem;
        width: 100%; }
      .cookies-box .cookies-content > .page-container {
        flex-wrap: wrap; } }

/* sitemap */
.sitemap-row {
  display: flex;
  flex-wrap: wrap;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto; }
  .sitemap-row a {
    text-decoration: inherit; }
  .sitemap-row p {
    margin: 0; }
  .sitemap-row .map-item {
    border-right: 1px solid #fff;
    box-sizing: border-box;
    margin-bottom: 30px;
    width: calc(100% / 4); }
    .sitemap-row .map-item .title-link {
      background: #555;
      color: #fff;
      display: block;
      font-size: 18px;
      line-height: 1.2;
      padding: 15px 25px 12px; }
      .sitemap-row .map-item .title-link:hover {
        font-weight: bold;
        background: var(--main); }
  .sitemap-row .map-list {
    border-left: 1px solid #ccc;
    margin-top: 15px;
    margin-bottom: 0;
    padding-left: 25px;
    padding-right: 20px; }
    .sitemap-row .map-list li {
      list-style: none; }
    .sitemap-row .map-list > li {
      padding-top: 8px;
      padding-bottom: 8px; }
    .sitemap-row .map-list .second-link {
      color: #333;
      font-size: 17px;
      line-height: 1.3;
      color: var(--main);
      font-weight: bold; }
      .sitemap-row .map-list .second-link:hover {
        position: relative; }
        .sitemap-row .map-list .second-link:hover:before {
          background: #fff;
          content: '\f105';
          color: var(--main);
          font-family: 'Font Awesome 6 Free';
          font-weight: bold;
          font-size: 16px;
          position: absolute;
          top: 1px;
          left: -30px; }
  .sitemap-row .third-list {
    padding-left: 25px;
    margin-top: 5px; }
    .sitemap-row .third-list > li {
      padding-top: 5px;
      padding-bottom: 5px; }
    .sitemap-row .third-list .third-link {
      color: #333;
      font-size: 16px;
      line-height: 1.3;
      position: relative; }
      .sitemap-row .third-list .third-link:before {
        color: var(--green);
        content: "";
        background: var(--green);
        width: 7px;
        height: 7px;
        font-weight: bold;
        position: absolute;
        top: 7px;
        left: -15px; }
      .sitemap-row .third-list .third-link:hover {
        font-weight: bold;
        color: var(--green); }
  .sitemap-row .four-list {
    padding-left: 15px;
    margin-top: 10px; }
    .sitemap-row .four-list > li {
      padding-top: 2px;
      padding-bottom: 2px; }
    .sitemap-row .four-list .four-link {
      color: #333;
      font-size: 15px;
      line-height: 1;
      position: relative; }
      .sitemap-row .four-list .four-link:before {
        color: #aaa;
        content: "\f0da";
        font-family: 'Font Awesome 6 Free';
        font-weight: bold;
        font-size: 12px;
        position: absolute;
        top: 5px;
        left: -15px; }
      .sitemap-row .four-list .four-link:hover:before {
        color: var(--red); }

@media (max-width: 1024px) {
  .sitemap-row .map-item {
    width: calc(100% / 4); } }

@media (max-width: 960px) {
  .sitemap-row .map-item {
    width: calc(100% / 3); } }

@media (max-width: 768px) {
  .sitemap-row .map-item {
    width: calc(100% / 2); }
    .sitemap-row .map-item .title-link {
      padding: 15px;
      padding-bottom: 12px; }
  .sitemap-row .map-list {
    padding-left: 15px;
    padding-right: 10px; }
    .sitemap-row .map-list > li {
      padding-top: 6px;
      padding-bottom: 6px; }
    .sitemap-row .map-list .second-link:hover:before {
      left: -20px; }
  .sitemap-row .third-list {
    margin-top: 5px; } }

@media (max-width: 320px) {
  .sitemap-row .map-item {
    width: 100%; } }

/*========== basic mobile ==========*/
@media (max-width: 1440px) {
  .page-container {
    padding: 0 25px; } }

/*========= form ==========*/
.form-style form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.form-style .form-box {
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  padding-left: 30px;
  transition: 0.3s;
  align-items: center; }
  .form-style .form-box.noline {
    border: none; }
  .form-style .form-box .title {
    color: var(--m-color);
    padding-right: 10px;
    align-items: center;
    font-size: 1.25rem;
    width: 130px;
    position: relative; }
    .form-style .form-box .title .must {
      color: #cd0000;
      display: inline-block;
      margin-left: 10px; }
  .form-style .form-box .content {
    width: calc(100% - 130px); }
    .form-style .form-box .content input[type="text"],
    .form-style .form-box .content input[type="password"],
    .form-style .form-box .content input[type="email"],
    .form-style .form-box .content input[type="date"],
    .form-style .form-box .content input[type="number"],
    .form-style .form-box .content input[type="tel"] {
      background: none;
      border-radius: 0;
      border: none;
      appearance: none;
      width: 100%;
      border: none;
      padding: 8px 15px;
      font-size: 1.25rem;
      background: #fff;
      color: #555;
      text-align: left;
      transition: 0.3s; }
      .form-style .form-box .content input[type="text"]::placeholder,
      .form-style .form-box .content input[type="password"]::placeholder,
      .form-style .form-box .content input[type="email"]::placeholder,
      .form-style .form-box .content input[type="date"]::placeholder,
      .form-style .form-box .content input[type="number"]::placeholder,
      .form-style .form-box .content input[type="tel"]::placeholder {
        color: #e0e0e0; }
    .form-style .form-box .content select {
      background: none;
      appearance: none;
      border-radius: 0;
      border: none;
      width: 100%;
      border: none;
      border: 1px solid #e0e0e0;
      padding: 15px 20px;
      font-size: 1.25rem;
      /* 16/16 */
      background: #fff url(../images/icon_c_arrow.svg) no-repeat right 20px center;
      background-size: 45px;
      color: #222;
      text-align: left; }
    .form-style .form-box .content input[type="text"],
    .form-style .form-box .content input[type="password"],
    .form-style .form-box .content input[type="email"],
    .form-style .form-box .content input[type="date"],
    .form-style .form-box .content input[type="number"],
    .form-style .form-box .content input[type="tel"],
    .form-style .form-box .content select {
      height: 80px; }
    .form-style .form-box .content textarea {
      background: none;
      border-radius: 0;
      border: none;
      width: 100%;
      border: none;
      border: 1px solid #e0e0e0;
      padding: 15px 20px;
      font-size: 1.25rem;
      background: #fff;
      color: #222;
      text-align: left; }
      .form-style .form-box .content textarea::placeholder {
        color: #e0e0e0; }
  .form-style .form-box .part {
    display: inline-block; }
    .form-style .form-box .part span {
      margin-left: 10px; }
      .form-style .form-box .part span b {
        font-weight: bold; }
    .form-style .form-box .part:not(:last-child) {
      margin-right: 15px; }
  .form-style .form-box .radiobox,
  .form-style .form-box .checkbox {
    font-size: 1.25rem; }
  .form-style .form-box .radiobox {
    color: #666; }
    .form-style .form-box .radiobox input[type="radio"] {
      opacity: 0;
      display: none; }
      .form-style .form-box .radiobox input[type="radio"] + label {
        position: relative;
        cursor: pointer;
        padding-left: 50px; }
        .form-style .form-box .radiobox input[type="radio"] + label:before {
          content: "";
          display: block;
          width: 38px;
          height: 38px;
          background: #fff;
          border: 1px solid #c9c9c9;
          position: absolute;
          left: 0;
          top: 50%;
          border-radius: 50%;
          transform: translateY(-50%); }
        .form-style .form-box .radiobox input[type="radio"] + label:after {
          content: "";
          width: 0;
          height: 0;
          background-color: transparent;
          position: absolute;
          top: 50%;
          left: 20px;
          transform: translate(-50%, -50%);
          border-radius: 50%; }
      .form-style .form-box .radiobox input[type="radio"]:checked + label:after {
        width: 8px;
        height: 8px;
        background-color: var(--m-color); }
  .form-style .form-box .checkbox input[type="checkbox"] {
    border: 2px solid #222;
    width: 16px;
    height: 16px; }
  .form-style .form-box.mid {
    width: calc(((100% - 100px) / 3 * 2) + 50px); }
  .form-style .form-box.half {
    width: calc((100% - 25px) / 2); }
  .form-style .form-box.gender {
    border-bottom: none; }
    .form-style .form-box.gender .content {
      width: 100%;
      padding: 8px 0; }
      .form-style .form-box.gender .content .part {
        margin-right: 20px; }
  .form-style .form-box.remark {
    align-items: flex-start; }
    .form-style .form-box.remark .title {
      margin-top: 8px; }
  .form-style .form-box.focus {
    border-color: var(--m-color); }
  .form-style .form-box.captcha {
    margin-bottom: 0;
    padding: 0;
    border-bottom: none;
    justify-content: center; }
  .form-style .form-box.row {
    width: 100%; }
  .form-style .form-box.row2 {
    border-bottom: none;
    margin-bottom: 0;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 20px; }
    .form-style .form-box.row2 .title {
      width: 100%;
      margin-bottom: 15px;
      padding-left: 0; }
    .form-style .form-box.row2 .content {
      width: 100%; }

.form-style .form-row-group {
  display: flex;
  width: 100%; }

.form-style .btn-list {
  margin-top: 20px; }
  .form-style .btn-list .send button {
    background: none;
    border: none;
    cursor: pointer;
    appearance: none;
    display: block;
    transition: 0.3s;
    background: var(--m-color);
    color: #fff;
    font-size: 1.125rem;
    padding: 14px 110px;
    border-radius: 5px;
    display: flex;
    align-items: center; }
    .form-style .btn-list .send button:after {
      content: "";
      display: inline-block;
      width: 25px;
      height: 25px;
      margin-left: 10px;
      background: url(../images/icon_arrow.svg) no-repeat;
      transition: .3s; }
    .form-style .btn-list .send button:hover {
      background: var(--s-color);
      color: var(--m-color); }
      .form-style .btn-list .send button:hover:after {
        background: url(../images/icon_arrow2.svg) no-repeat; }
  .form-style .btn-list.center {
    width: 100%;
    display: flex;
    justify-content: center; }

/*========== form mobile ==========*/
/*========== header ==========*/
header {
  padding: 13px 0 14px 0; }
  header .logo {
    position: relative;
    transition: 0.3s; }
    header .logo a {
      display: block;
      width: 200px;
      height: 86px;
      background: url(../images/logo.png) no-repeat;
      background-size: contain;
      background-position: center left; }
      header .logo a img {
        display: block;
        max-width: 100%; }
  header .page-container {
    display: flex;
    justify-content: space-between;
    align-items: center; }

/* header-block1 */
.header-block1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px; }

.header-other-link {
  margin-right: 20px; }
  .header-other-link ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; }
    .header-other-link ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .header-other-link ul > li > a {
      display: block;
      color: #103957;
      font-size: 1.0625rem; }
      .header-other-link ul > li > a::before {
        content: "";
        display: inline-block;
        margin-right: 5px;
        vertical-align: middle;
        transform: translateY(-2px); }
    .header-other-link ul > li.home > a::before {
      width: 22px;
      height: 22px;
      background: url(../images/icon_home.svg) no-repeat; }
    .header-other-link ul > li.sitemap > a::before {
      width: 12px;
      height: 22px;
      background: url(../images/icon_mouse.svg) no-repeat; }
    .header-other-link ul > li:not(:last-child) {
      margin-right: 20px; }

.main-search {
  width: 180px; }
  .main-search form {
    display: block;
    width: 100%;
    position: relative; }
    .main-search form input {
      background: none;
      border: none;
      cursor: pointer;
      appearance: none;
      display: block;
      width: 100%;
      padding: 5px 45px 5px 20px;
      border-radius: 25px;
      background: #eaeaea;
      height: 37px;
      font-size: 1.0625rem; }
  .main-search button {
    background: none;
    border: none;
    cursor: pointer;
    appearance: none;
    width: 40px;
    height: 37px;
    font-size: 0.875rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(calc(-50% - 2px)); }

/* header-block2 */
.header-block2 {
  display: flex;
  align-items: center; }

.main-menu {
  margin-right: 30px; }
  .main-menu ul.layer1 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; }
    .main-menu ul.layer1 > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .main-menu ul.layer1 > li > a {
      color: var(--main-menu);
      font-size: 1.25rem;
      font-weight: bold; }
    .main-menu ul.layer1 > li.dropdown > a {
      position: relative;
      padding-right: 15px; }
      .main-menu ul.layer1 > li.dropdown > a::after {
        content: "";
        display: block;
        background: url(../images/icon_arrow.svg) no-repeat;
        width: 8px;
        height: 5px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%); }
    .main-menu ul.layer1 > li.active > a {
      color: var(--main-menu-hover); }
    .main-menu ul.layer1 > li:hover > a {
      color: var(--main-menu-hover); }
    .main-menu ul.layer1 > li:not(:last-child) {
      margin-right: 25px; }

.mage-menu {
  display: none;
  width: 100vw;
  background: #fafafa;
  position: absolute;
  top: 110px;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 40px 0 110px 0;
  z-index: 15; }
  .mage-menu .page-container {
    display: flex;
    align-items: flex-start;
    max-height: 50vh;
    overflow: auto; }
  .mage-menu .mage-layer {
    list-style: none;
    margin: 0;
    padding: 0; }
    .mage-menu .mage-layer > li {
      list-style: none;
      margin: 0;
      padding: 0; }
  .mage-menu .mage-layer1 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 25px; }
    .mage-menu .mage-layer1 > li {
      margin-bottom: 20px; }
      .mage-menu .mage-layer1 > li > a {
        font-weight: bold;
        color: var(--main-menu-hover);
        font-size: 1.25rem; }
    .mage-menu .mage-layer1 > li > a[href="javascript:;"]{
        cursor: auto;
    }
    .mage-menu .mage-layer1 > li > a:not([href="javascript:;"]):hover{
        color: var(--green);
    }

    .mage-menu .mage-layer1.cancer-mage-layer li{
      width: calc( (100% - 75px) / 4);
    }

    @media (max-width: 1280px) {
      .mage-menu .mage-layer1.cancer-mage-layer li{
        width: calc( (100% - 50px) / 3);
      }
    }

    @media (max-width: 960px) {
      .mage-menu .mage-layer1.cancer-mage-layer li{
        width: 100%;
      }
      .mage-menu .mage-layer1 > li > a:not([href="javascript:;"]):hover{
          color: #fff;
      }
    }


  .mage-menu .mage-layer2 {
    margin-top: 6px; }
    .mage-menu .mage-layer2 > li:not(:last-child) {
      margin-bottom: 3px; }
    .mage-menu .mage-layer2 > li > a {
      color: var(--main-menu);
      font-size: 1.125rem;
      font-weight: bold; }
      .mage-menu .mage-layer2 > li > a:hover {
        text-decoration: underline; }
  .mage-menu .mage-layer3 {
    margin-top: 3px; }
    .mage-menu .mage-layer3 > li > a {
      color: var(--main-menu);
      font-size: 1.0625rem;
      padding-left: 15px;
      position: relative; }
      .mage-menu .mage-layer3 > li > a::before {
        content: "\f0da";
        display: inline-block;
        font-family: "Font Awesome 6 Free";
        transition: 0.3s;
        position: absolute;
        left: 0;
        top: 2px;
        font-weight: bold;
        font-size: 0.75rem; }
      .mage-menu .mage-layer3 > li > a:hover {
        text-decoration: underline; }
  .mage-menu .mage-menu-pic {
    width: calc(180 / 1360 * 100%); }
    .mage-menu .mage-menu-pic .pic img {
      display: block;
      max-width: 100%; }
  .mage-menu .mage-menu-content {
    width: calc(1180 / 1360 * 100%);
    padding-left: 40px; }

.phone-bar {
  z-index: 1;
  display: none; }
  .phone-bar.active .bar {
    transform: rotate(-315deg); }
    .phone-bar.active .bar::before {
      opacity: 0; }
    .phone-bar.active .bar::after {
      transform: rotate(90deg) translate(-35%); }
  .phone-bar .group {
    position: relative;
    height: 30px;
    width: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px; }
  .phone-bar .bar {
    display: block;
    width: 25px;
    height: 3px;
    border-radius: 1px;
    transition: 800ms all;
    background: #222; }
    .phone-bar .bar::before, .phone-bar .bar::after {
      content: "";
      display: block;
      width: 25px;
      height: 3px;
      border-radius: 1px;
      position: relative;
      transition: 400ms all;
      background: #222; }
    .phone-bar .bar::before {
      top: -8px; }
    .phone-bar .bar::after {
      bottom: -6px; }

.header-language {
  display: inline-block;
  vertical-align: middle; }
  .header-language ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; }
    .header-language ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .header-language ul > li > a {
      display: block;
      border-radius: 25px;
      border: 1px solid #b7c8d4;
      color: var(--main);
      font-size: 0.9375rem;
      padding: 5px 20px; }
      .header-language ul > li > a:hover {
        background: var(--main);
        color: #fff;
        border-color: var(--main); }

/*========== only-support ==========*/
/*========== 手機選單 ==========*/
/*========== header mobile ==========*/
@media (max-width: 1440px) {
  .main-menu ul.layer1 > li:not(:last-child) {
    margin-right: 20px; }
  .main-menu ul.layer1 > li > a {
    font-size: 1.125rem; }
  .mage-menu {
    padding: 30px 0 60px 0; }
    .mage-menu .mage-layer1 > li > a {
      font-size: 1.125rem; }
    .mage-menu .mage-layer2 > li > a {
      font-size: 1rem; }
    .mage-menu .mage-layer3 > li > a {
      font-size: 0.9375rem; } }

@media (max-width: 1280px) {
  header {
    padding: 10px 0 11px 0; }
    header .logo a {
      width: 180px;
      height: 77px; }
  .header-other-link ul > li > a {
    font-size: 1rem; }
  .main-menu {
    margin-right: 5px; }
    .main-menu ul.layer1 > li:not(:last-child) {
      margin-right: 5px; }
    .main-menu ul.layer1 > li > a {
      font-size: 1rem; }
  .mage-menu {
    top: 100px;
    padding: 20px 0; }
    .mage-menu .mage-layer1 {
      column-gap: 20px; }
      .mage-menu .mage-layer1 > li > a {
        font-size: 1rem; }
    .mage-menu .mage-layer2 > li > a {
      font-size: 0.9375rem; }
    .mage-menu .mage-layer3 > li > a {
      font-size: 0.9375rem;
      padding-left: 12px; }
      .mage-menu .mage-layer3 > li > a::before {
        top: 1px; }
    .mage-menu .mage-menu-content {
      padding-left: 20px; }
  .main-search form input {
    padding: 5px 30px 5px 15px;
    font-size: 1rem; }
  .main-search button {
    color: #222;
    top: 0;
    transform: none; }
  .header-language ul > li > a {
    padding: 3px 12px; } }

@media (max-width: 1024px) {
  .main-menu {
    margin-right: 5px; }
    .main-menu ul.layer1 > li:not(:last-child) {
      margin-right: 5px; }
    .main-menu ul.layer1 > li > a {
      font-size: 0.9375rem; } }

@media (max-width: 960px) {
  header .logo a {
    width: 160px;
    height: 69px; }
  .phone-bar {
    display: block; }
  .header-block1 {
    justify-content: flex-start;
    flex-wrap: wrap; }
  .header-block2 {
    flex-wrap: wrap;
    flex-direction: column-reverse; }
  .header-language {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px; }
  .header-right {
    position: absolute;
    height: calc(100dvh - 90px);
    width: 100%;
    left: -100%;
    top: 90px;
    z-index: 15;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 30px 20px;
    transition: .3s;
    overflow-y: auto; }
    .header-right.active {
      left: 0; }
  .main-search {
    width: 100%;
    margin-top: 10px; }
  .main-menu {
    border-top: 1px solid #e8e8e8;
    width: 100%;
    margin: 0; }
    .main-menu ul.layer1 {
      flex-wrap: wrap; }
      .main-menu ul.layer1 > li {
        width: 100%;
        border-bottom: 1px solid #e8e8e8; }
        .main-menu ul.layer1 > li.dropdown > a:after {
          width: 12px;
          height: 9px;
          right: 10px; }
        .main-menu ul.layer1 > li > a {
          display: block;
          padding: 12px 25px 12px 15px; }
        .main-menu ul.layer1 > li:not(:last-child) {
          margin-right: 0; }
  .mage-menu {
    position: static;
    padding: 0;
    width: 100%;
    border: none; }
    .mage-menu .page-container {
      padding: 0;
      max-height: initial; }
    .mage-menu .mage-menu-pic {
      display: none; }
    .mage-menu .mage-menu-content {
      width: 100%;
      padding-left: 0; }
    .mage-menu .mage-layer1 > li {
      width: 100%;
      margin-bottom: 0; }
      .mage-menu .mage-layer1 > li > a {
        display: block;
        padding: 12px; }
        .mage-menu .mage-layer1 > li > a:hover {
          background: var(--main-menu-hover);
          color: #fff; }
      .mage-menu .mage-layer1 > li.dropdown > a {
        position: relative;
        padding-right: 25px; }
        .mage-menu .mage-layer1 > li.dropdown > a::after {
          content: "";
          display: block;
          position: absolute;
          background: url(../images/icon_arrow.svg) no-repeat;
          width: 12px;
          height: 9px;
          right: 10px;
          top: 22px; }
        .mage-menu .mage-layer1 > li.dropdown > a:hover:after {
          background: url(../images/icon_arrow_w.svg) no-repeat; }
      .mage-menu .mage-layer1 > li.active > a {
        background: var(--main-menu-hover);
        color: #fff; }
        .mage-menu .mage-layer1 > li.active > a:after {
          background: url(../images/icon_arrow_w.svg) no-repeat; }
    .mage-menu .mage-layer2 {
      display: none;
      margin-top: 0;
      background: #d7e2eb; }
      .mage-menu .mage-layer2 > li {
        margin-bottom: 0; }
        .mage-menu .mage-layer2 > li:not(:last-child) {
          margin-bottom: 0; }
        .mage-menu .mage-layer2 > li > a {
          display: block;
          padding: 12px; }
          .mage-menu .mage-layer2 > li > a:hover {
            background: var(--main-menu);
            color: #fff;
            text-decoration: none; }
        .mage-menu .mage-layer2 > li.dropdown > a {
          position: relative;
          padding-right: 25px; }
          .mage-menu .mage-layer2 > li.dropdown > a::after {
            content: "";
            display: block;
            position: absolute;
            background: url(../images/icon_arrow.svg) no-repeat;
            width: 12px;
            height: 9px;
            right: 10px;
            top: 22px; }
          .mage-menu .mage-layer2 > li.dropdown > a:hover:after {
            background: url(../images/icon_arrow_w.svg) no-repeat; }
        .mage-menu .mage-layer2 > li.active > a {
          background: var(--main-menu);
          color: #fff; }
    .mage-menu .mage-layer3 {
      display: none;
      margin-top: 0;
      background: #f1f1f1; }
      .mage-menu .mage-layer3 > li > a {
        display: block;
        padding: 12px 15px 12px 25px;
        border-bottom: 1px solid #ccc; }
        .mage-menu .mage-layer3 > li > a::before {
          left: 10px;
          top: 15px; }
        .mage-menu .mage-layer3 > li > a:hover {
          text-decoration: none; } }

/*========== only-support ==========*/
@media (max-width: 1280px) {
  header.only-support {
    height: 90px; }
    header.only-support .mage-menu {
      top: 90px; } }

@media (max-width: 960px) {
  header.only-support {
    height: 80px; }
    header.only-support .mage-menu {
      top: 80px; } }

@media (max-width: 640px) {
  header.only-support .mage-menu .mage-menu-pic {
    display: none; }
  header.only-support .mage-menu .mage-layer1 > li:first-child {
    margin-left: 0; }
  header.only-support .mage-menu .mage-menu-content {
    width: 100%;
    padding-left: 0; } }

/*===== footer =====*/
footer {
  background: var(--main);
  padding: 50px 0 60px 0; }
  footer .page-container {
    display: flex;
    justify-content: space-between;
    position: relative; 
    width: 1520px;
  }

.footer-block2 {
  text-align: right; }

.copyright {
  color: #fff;
  font-size: 1.0625rem; }

.iware {
  color: #c2cde4;
  font-weight: lighter; }
  .iware a {
    color: #c2cde4; }
    .iware a:hover {
      text-decoration: underline; }

.footer-menu .layer {
  list-style: none;
  margin: 0;
  padding: 0; }
  .footer-menu .layer > li {
    list-style: none;
    margin: 0;
    padding: 0; }
  .footer-menu .layer > li > a {
    color: #fff; }

.footer-menu .layer1 {
  display: flex; }
  .footer-menu .layer.layer1 > li {
    color: #fff;
    font-size: 1.25rem;
    font-weight: bold; }
  .footer-menu .layer1 > li:not(:last-child) {
    margin-right: 20px; }
  .footer-menu .layer1 > li > a[href="javascript:;"] {
    cursor: default;
  }

.footer-menu .layer2 {
  margin-top: 6px; }
  .footer-menu .layer2 > li > a {
    font-size: 1.125rem;
    font-weight: lighter; }
    .footer-menu .layer2 > li > a:hover {
      text-decoration: underline; }
  .footer-menu .layer2 > li:not(:last-child) {
    margin-bottom: 2px; }

.footer-sns {
  display: inline-block;
  vertical-align: middle; }
  .footer-sns ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; }
    .footer-sns ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .footer-sns ul > li > a {
      width: 35px;
      height: 35px;
      display: block;
      color: #fff; }
      .footer-sns ul > li > a img {
        display: block;
        max-width: 100%; }
      .footer-sns ul > li > a:hover {
        opacity: .65; }
    .footer-sns ul > li:not(:last-child) {
      margin-right: 15px; }

.footer-language {
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px; }
  .footer-language ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; }
    .footer-language ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .footer-language ul > li > a {
      display: block;
      border-radius: 25px;
      border: 1px solid #fff;
      color: #fff;
      font-size: 0.9375rem;
      padding: 5px 20px; }
      .footer-language ul > li > a:hover {
        background: #fff;
        color: var(--main); }

.footer-link {
  margin-top: 15px; }
  .footer-link ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; }
    .footer-link ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .footer-link ul > li > a {
      font-size: 1.125rem;
      color: #b7c8d4;
      font-weight: bold; }
      .footer-link ul > li > a:hover {
        color: #fff;
        text-decoration: underline; }
    .footer-link ul > li:not(:last-child) {
      margin-right: 25px; }

.footer-info {
  margin-top: 15px; }
  .footer-info ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .footer-info ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .footer-info ul > li {
      font-size: 1.0625rem;
      color: #fff; }
      .footer-info ul > li:not(:last-child) {
        margin-bottom: 5px; }

.fixed-sns {
/*   position: absolute; */
  position: fixed;
  right: 10%;
/*   top: -70px; */
  bottom: 10%;
  transform: translate(100%, -100%); 
  z-index: 3;
}
  .fixed-sns ul {
    list-style: none;
    margin: 0;
    padding: 0; 
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
    .fixed-sns ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .fixed-sns ul li.top a {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #292c33;
      color: #fff;
      border-radius: 50%;
      width: 60px;
      height: 60px; 
      border: 1px solid #fff;
    }
      .fixed-sns ul li.top a:hover {
        background: var(--green); }
      .fixed-sns ul li.hospital-registration a{
        background: var(--main);
        border: 1px solid #fff;
      }
      .fixed-sns ul li.hospital-registration a:hover{
        background: var(--green);
      }
      @media (max-width: 1680px) {
        .fixed-sns {
            right: 20px;
          }
      }
      @media (max-width: 640px) {
          
      }
      @media (max-width: 480px) {
          .fixed-sns {
            right: 10px;
          }
          .fixed-sns ul li.top a {
            width: 50px;
            height: 50px;
          }
      }

/*========== footer mobile ==========*/
@media (max-width: 1680px) {
  .fixed-sns {
    transform: none; } }

@media (max-width: 1440px) {
  .footer-menu .layer.layer1 > li {
    font-size: 1.125rem; }
  .footer-menu .layer1 > li:not(:last-child) {
    margin-right: 5px; }
  .footer-menu .layer2 > li > a {
    font-size: 1rem; }
  .footer-menu .layer2 > li:not(:last-child) {
    margin-right: 20px; }
  .copyright {
    font-size: 1rem; }
  .footer-sns {
    margin-right: 10px; }
    .footer-sns ul > li:not(:last-child) {
      margin-right: 10px; }
  .footer-info {
    margin-top: 10px; }
    .footer-info ul > li {
      font-size: 1rem; }
  .footer-link {
    margin-top: 10px; }
    .footer-link ul > li > a {
      font-size: 1rem; }
    .footer-link ul > li:not(:last-child) {
      margin-right: 15px; }
  .footer-language {
    margin-left: 10px; } }

@media (max-width: 1280px) {
  footer {
    padding: 30px 0 40px 0; }
    footer .page-container {
      flex-wrap: wrap; }
  .footer-block1 {
    width: 100%; }
  .footer-block2 {
    width: 100%;
    text-align: center;
    margin-top: 20px; }
  .footer-menu .layer1 {
    justify-content: center; }
  .footer-link ul {
    justify-content: center; } }

@media (max-width: 960px) {
  .footer-block2 {
    margin-top: 0; }
  .footer-menu {
    display: none; } }

@media (max-width: 480px) {
  .footer-link ul {
    flex-wrap: wrap; }
    .footer-link ul > li {
      width: 100%; }
      .footer-link ul > li:not(:last-child) {
        margin-right: 0;
        margin-bottom: 10px; } }

/*========== only-support ==========*/
/*===== page main =====*/
.main.nobanner .page-banner {
  display: none; }

.main.nobanner .breadcrumb {
  background: linear-gradient(to right, transparent 0%, transparent calc(560 / 1920 * 100%), #eee calc(560 / 1920 * 100%), #eee 100%); }
  .main.nobanner .breadcrumb ul {
    background: #eee; }

/*===== page banner =====*/
.page-banner img,
.page-banner source {
  display: block;
  max-width: 100%;
  margin: auto; }

/*===== breadcrumb =====*/
.breadcrumb {
  position: relative; }
  .breadcrumb:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    background: transparent;
    background: -webkit-linear-gradient(legacy-direction(to right), transparent 0%, transparent calc(580 / 1920 * 100%), #eee calc(580 / 1920 * 100%), #eee 100%);
    background: linear-gradient(to right, transparent 0%, transparent calc(580 / 1920 * 100%), #eee calc(580 / 1920 * 100%), #eee 100%); }
  .breadcrumb .page-container {
    display: flex;
    justify-content: space-between; }
  .breadcrumb .breadcrumb-title {
    color: #fff;
    font-size: 1.375rem;
    font-weight: bold;
    padding-left: 30px;
    display: flex;
    align-items: center;
    width: 300px;
    background: var(--main); }
  .breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    width: calc(100% - 300px);
    padding: 15px 0 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; }
    .breadcrumb ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .breadcrumb ul li {
      color: #666666;
      font-size: 0.9375rem;
      margin-bottom: 5px; }
      .breadcrumb ul li a {
        color: #666666;
        font-size: 0.9375rem; }
        .breadcrumb ul li a:hover {
          color: var(--main); }
      .breadcrumb ul li:not(:last-child) {
        padding-right: 20px;
        position: relative; }
        .breadcrumb ul li:not(:last-child):after {
          content: "";
          display: block;
          background: url(../images/icon_arrow_right.svg) no-repeat;
          width: 6px;
          height: 9px;
          position: absolute;
          right: 6px;
          top: 9px; }

/*===== aside =====*/
aside {
  width: 300px;
  background: #fff; }
  aside .layer {
    list-style: none;
    margin: 0;
    padding: 0; }
    aside .layer > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    aside .layer > li > a {
      display: block; }
  aside .layer1 > li > a {
    font-size: 1.125rem;
    color: var(--main);
    background: var(--aside-layer1-bg);
    font-weight: bold;
    padding: 8px 50px 8px 30px;
    min-height: 45px;
    position: relative; }
    aside .layer1 > li > a:hover {
      color: #fff;
      background: var(--aside-layer1-bg-hover); }
  aside .layer1 > li:not(:first-child) {
    border-top: 2px solid #fff; }
  aside .layer1 > li.active > a {
    color: #fff;
    background: var(--aside-layer1-bg-hover); }
  aside .layer1 > li.dropdown > a:after {
    content: "\f053";
    display: block;
    font-weight: bold;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 22px;
    top: 13px;
    font-size: 0.75rem;
    transition: .3s; }
  aside .layer1 > li.dropdown > a:hover::after {
    transform: rotate(-90deg); }
  aside .layer1 > li.dropdown.active > a::after {
    transform: rotate(-90deg); }
  aside .layer2 {
    display: none; }
    aside .layer2 > li {
      border-top: 2px solid #fff; }
      aside .layer2 > li > a {
        font-size: 1.125rem;
        color: var(--main);
        background: var(--aside-layer2-bg);
        padding: 8px 30px 8px 50px;
        min-height: 45px;
        position: relative; }
        aside .layer2 > li > a:after {
          content: "\f105";
          display: block;
          font-weight: bold;
          font-family: "Font Awesome 5 Free";
          position: absolute;
          left: 33px;
          top: 13px;
          font-size: 0.75rem;
          transition: .3s; }
        aside .layer2 > li > a:hover {
          color: var(--aside-layer2-hover); }
          aside .layer2 > li > a:hover:after {
            color: var(--aside-layer2-hover); }
      aside .layer2 > li.active > a {
        color: var(--aside-layer2-hover); }
        aside .layer2 > li.active > a::after {
          color: var(--aside-layer2-hover); }
      aside .layer2 > li.dropdown.active > a:after {
        transform: rotate(90deg); }
  aside .layer3 {
    display: none; }
    aside .layer3 > li > a {
      font-size: 1.125rem;
      color: var(--aside-layer3);
      padding: 8px 30px 8px 65px;
      min-height: 45px;
      position: relative; }
      aside .layer3 > li > a:after {
        content: "\f0da";
        display: block;
        font-weight: bold;
        font-family: "Font Awesome 5 Free";
        position: absolute;
        left: 53px;
        top: 14px;
        font-size: 0.625rem;
        transition: .3s;
        color: var(--aside-layer3); }
      aside .layer3 > li > a:hover {
        color: var(--aside-layer3-hover); }
    aside .layer3 > li:not(:first-child) {
      border-top: 1px solid #ececec; }
    aside .layer3 > li.active > a {
      color: var(--aside-layer3-hover); }
    aside .layer3 > li.dropdown.active > a:after {
      transform: rotate(90deg); }
  aside .layer4 {
    display: none; }
    aside .layer4 > li {
      border-top: 1px solid #ececec; }
      aside .layer4 > li > a {
        font-size: 1.125rem;
        color: var(--aside-layer3);
        background: #fafafa;
        padding: 8px 30px 8px 80px;
        min-height: 45px;
        position: relative; }
        aside .layer4 > li > a:after {
          content: "-";
          display: block;
          font-weight: normal;
          position: absolute;
          left: 70px;
          top: 10px;
          font-size: 1rem;
          transition: .3s;
          color: var(--aside-layer3); }
        aside .layer4 > li > a:hover {
          color: var(--aside-layer3-hover); }
      aside .layer4 > li.active > a {
        color: var(--aside-layer3-hover); }
  aside + .article-content {
    width: calc(100% - 300px);
    padding: 20px 0 0 60px; }

.article-content {
  background: #fff;
  padding: 40px 40px 0 40px; }

.article-unreset > .unreset {
  min-height: 60px; }

/* 單元標題 */
.article-title {
  font-weight: bold;
  color: var(--main);
  font-size: 1.375rem;
  margin-bottom: 40px; }
  .article-title:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 5px;
    background: var(--title-line);
    background: -webkit-linear-gradient(legacy-direction(to right), var(--title-line) 0%, var(--title-line) 65px, #eee 65px, #eee 100%);
    background: linear-gradient(to right, var(--title-line) 0%, var(--title-line) 65px, #eee 65px, #eee 100%); }

.article-detail-title-block {
  box-shadow: #fff 0 1px 0;
  margin-bottom: 30px; }

.article-title2 {
  color: var(--title);
  font-weight: bold;
  position: relative;
  padding-left: 25px;
  font-size: 1.25rem;
  margin-bottom: 20px;
  line-height: 1.5; }
  .article-title2::before {
    content: "";
    background: url(../images/title_decorate.svg) no-repeat center;
    width: 15px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 1px; }
  .article-title2 span {
    display: inline-block;
    padding-left: 10px;
    color: var(--green); }
  .article-title2 a {
    display: inline-flex;
    background: #333;
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    min-height: 30px;
    font-size: 1rem;
    margin-left: 8px;
    align-items: center; }
    .article-title2 a:hover {
      background-color: var(--green); }

.article-title3 {
  color: var(--title);
  position: relative;
  padding-left: 25px;
  font-size: 1.375rem;
  margin-bottom: 20px;
  line-height: 1.5; }
  .article-title3::before {
    content: "";
    display: inline-block;
    font-weight: bold;
    width: 13px;
    height: 13px;
    position: absolute;
    left: 0;
    top: 10px;
    background: url(../images/title3_decorate.svg) no-repeat; }
  .article-title3 a {
    display: inline-flex;
    background: #333;
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    min-height: 30px;
    font-size: 1rem;
    margin-left: 8px;
    align-items: center; }
    .article-title3 a:hover {
      background-color: var(--green); }

/* 內頁標題 */
.page-detail-title {
  font-size: 1.375rem;
  font-weight: bold;
  color: #333;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 5px 20px; }
  .page-detail-title > .author {
    color: #aaa;
    font-size: 1rem;
    font-weight: normal; }

.page-detail-title2 {
  color: var(--main);
  font-weight: bold;
  font-size: 1.25rem;
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px; }
  .page-detail-title2::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    background: url(../images/title_decorate.svg) no-repeat;
    width: 13px;
    height: 14px; }

.page-detail-other {
  display: flex; }

.page-detail-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  .page-detail-info .date {
    margin-top: 10px;
    color: var(--red);
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 300; }
    .page-detail-info .date span {
      color: #222;
      font-weight: bold;
      display: inline-block;
      margin-right: 5px; }
  .page-detail-info .text {
    margin-top: 10px;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 300; }
    .page-detail-info .text span {
      color: #222;
      font-weight: bold;
      display: inline-block;
      margin-right: 5px; }
  .page-detail-info > div:not(:last-child) {
    margin-right: 20px; }

.page-sort {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap; }
  .page-sort span {
    display: block;
    background: #333;
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    min-height: 30px;
    font-size: 1rem; }
    .page-sort span:not(:last-child) {
      margin-right: 10px; }

.page-share {
  margin-top: 10px;
  margin-left: auto; }
  .page-share .a2a_kit {
    display: flex; }
    .page-share .a2a_kit a .pic {
      width: 30px;
      height: 30px; }
      .page-share .a2a_kit a .pic img {
        display: block;
        max-width: 100%;
        transition: 0.3s; }
    .page-share .a2a_kit a:not(:last-child) {
      margin-right: 10px; }
    .page-share .a2a_kit a:hover .pic img {
      transform: scale(1.2); }

.page-article-content-group {
  display: flex;
  padding-bottom: 70px; }

.page-detail-tag {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 30px;
  margin-top: 30px; }
  .page-detail-tag::before {
    content: "";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    vertical-align: middle;
    background: url(../images/icon_tag.svg) no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 4px; }
  .page-detail-tag a {
    color: var(--red);
    font-size: 1.0625rem; }
    .page-detail-tag a:not(:last-child) {
      margin-right: 8px; }
    .page-detail-tag a:hover {
      text-decoration: underline; }

/*===== main-section-group =====*/
.aside-menu-btn {
  font-size: 1rem;
  color: #fff;
  background: #222;
  padding: 8px 20px;
  display: none; }
  .aside-menu-btn i {
    margin-right: 10px; }

.third-menu-style {
  margin-bottom: 20px; }
  .third-menu-style ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; }
    .third-menu-style ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .third-menu-style ul li a {
      display: block;
      padding: 10px 15px;
      color: var(--main);
      font-size: 1.125rem;
      font-weight: 300;
      line-height: 1;
      border: 1px solid #b7c8d4;
      border-radius: 25px; }
      .third-menu-style ul li a:hover {
        background: #e7eef4; }
    .third-menu-style ul li.active a {
      font-weight: bold; }

/*===== 頁面標題 =====*/
.page-article {
  background: linear-gradient(to right, transparent 0%, transparent calc(560 / 1920 * 100%), #fff calc(560 / 1920 * 100%), #fff 100%), linear-gradient(to bottom, var(--main) 0%, var(--main) 147px, #fff 147px, #fff 100%); }

.article-content {
  width: 100%; }

/*===== pagination =====*/
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 40px; }
  .pagination .page_num {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    font-size: 1rem;
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #222;
    border: 1px solid transparent; }
    .pagination .page_num.active {
      color: #fff;
      background: #222; }
    .pagination .page_num:hover {
      background: var(--main);
      color: #fff; }
  .pagination .page_arrow {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222; }
    .pagination .page_arrow:hover {
      color: var(--main); }
    .pagination .page_arrow.prev {
      margin-right: 20px; }
    .pagination .page_arrow.next {
      margin-left: 20px; }
  .pagination .page_dot {
    display: inline-block;
    padding: 10px;
    text-align: center;
    margin: 0 3px; }
  .pagination .page_select {
    display: inline-block;
    margin-left: 30px; }
    .pagination .page_select .num_input {
      background: none;
      border-radius: 0;
      border: none;
      appearance: none;
      font-size: 0.9375rem;
      background: #fff;
      border: 1px solid #222;
      width: 50px;
      height: 30px;
      padding: 3px 5px;
      text-align: center;
      /* 隱藏箭頭 */
      /* Chrome, Safari, Edge, Opera */
      /* Firefox */
      -moz-appearance: textfield; }
      .pagination .page_select .num_input::-webkit-outer-spin-button, .pagination .page_select .num_input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0; }
    .pagination .page_select .txt {
      display: inline-block;
      margin-left: 5px; }

/*===== btn-style =====*/
.page-btn-block {
  border-top: 1px solid #eee; }

.page-btn-list {
  display: flex; }
  .page-btn-list a {
    display: block;
    line-height: 1;
    font-size: 1.125rem;
    color: #222;
    padding: 18px 20px; }
  .page-btn-list button {
    appearance: none;
    background: none;
    border: none;
    display: block;
    cursor: pointer; }
  .page-btn-list .back-home {
    display: inline-block; }
    .page-btn-list .back-home a::before {
      content: "\f060";
      display: inline-block;
      font-weight: bold;
      font-family: "Font Awesome 5 Free";
      margin-right: 10px; }
    .page-btn-list .back-home a:hover {
      background: var(--green);
      color: #fff; }
  .page-btn-list.right {
    justify-content: flex-end; }
  .page-btn-list.center {
    justify-content: center; }

.want-donate-btn {
  max-width: 100%; }
  .want-donate-btn a {
    line-height: 1;
    font-size: 1.125rem;
    color: #222;
    width: 290px;
    max-width: 100%;
    display: block;
    font-size: 1.25rem;
    padding: 20.5px 10px;
    border: 2px solid #222;
    text-align: center; }
    .want-donate-btn a:hover {
      background: #222;
      color: #fff; }
  .want-donate-btn.fundraising-project-donate {
    margin-top: 30px; }
  .want-donate-btn.fundraising-project-donate-top {
    margin-bottom: 30px; }

/*===== pages-list-search =====*/
.page-list-search {
  margin-bottom: 30px; }
  .page-list-search form {
    display: flex;
    background: #f5f5f5;
    padding: 10px 0; }
    .page-list-search form > div {
      height: 20px;
      display: flex;
      align-items: center; }
      .page-list-search form > div:not(:last-child) {
        border-right: 1px solid #d4d4d4; }
      .page-list-search form > div:not(:first-child) {
        border-left: 2px solid #fff; }
    .page-list-search form select,
    .page-list-search form input,
    .page-list-search form button {
      background: none;
      border: none;
      cursor: pointer;
      appearance: none;
      font-size: 1rem;
      color: #333; }
    .page-list-search form select {
      background: #f5f5f5 url(../images/select_arrow.svg) right 15px center no-repeat;
      background-size: 9px;
      padding: 0 40px 0 20px;
      width: 100%; }
    .page-list-search form input {
      background: #f5f5f5;
      padding: 0 20px;
      width: 100%; }
    .page-list-search form button {
      width: 55px;
      background: #f5f5f5;
      text-align: center;
      display: block; }
      .page-list-search form button:hover {
        color: var(--main); }
    .page-list-search form .keyword {
      flex: 1; }
    .page-list-search form .box.department {
      width: 225px; }
    .page-list-search form .box.team {
      width: 425px; }
  .page-list-search.sort-style form {
    background: #fff;
    border: 2px solid #222;
    width: 100%; }
    .page-list-search.sort-style form .box {
      width: 100%; }
    .page-list-search.sort-style form select {
      display: block;
      width: 100%;
      background: #fff url(../images/select_arrow.svg) right 15px center no-repeat;
      background-size: 9px;
      padding: 0 40px 0 20px; }

/* table-style */
.table-style table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #e8e8e8; }
  .table-style table td {
    padding: 10px 25px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 1.0625rem; }
    .table-style table td::before {
      display: none;
      content: attr(data-title);
      font-weight: bold;
      color: #fff;
      background: var(--main);
      padding: 3px;
      width: 70px;
      text-align: center;
      margin-right: 15px;
      border-radius: 3px;
      font-size: 0.9375rem; }
    .table-style table td p {
      margin: 0; }
  .table-style table .right {
    text-align: right; }
  .table-style table thead td {
    background: #666666;
    color: #fff;
    font-weight: bold; }
    .table-style table thead td:not(:last-child) {
      border-right: 1px solid #fff; }
  .table-style table tbody tr:nth-child(even) td {
    background: #f8f8f8; }
  .table-style table tbody tr:last-child td {
    border-bottom: none; }

.tab-style-btn ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; }
  .tab-style-btn ul > li {
    list-style: none;
    margin: 0;
    padding: 0; }
  .tab-style-btn ul a {
    display: block;
    padding: 7px 30px 6px 30px;
    border: 1px solid #f1f1f1;
    color: #222; }
    .tab-style-btn ul a:hover {
      background: #eee; }
  .tab-style-btn ul li.active a {
    background: var(--aside-layer2-bg);
    border-color: var(--aside-layer2-bg);
    color: var(--main);
    font-weight: bold; }

.downloadfile-style {
  margin: 15px 0; }
  .downloadfile-style ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .downloadfile-style ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .downloadfile-style ul li a {
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #ccc;
      padding: 10px 15px 10px 30px;
      align-items: baseline;
      position: relative;
      color: #222; }
      .downloadfile-style ul li a::before {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #222;
        position: absolute;
        left: 14px;
        top: 22px; }
      .downloadfile-style ul li a:hover .download-btn {
        background: var(--main);
        color: #fff; }
    .downloadfile-style ul li .txt {
      width: calc(100% - 170px); }
    .downloadfile-style ul li .filetype {
      margin-left: auto;
      font-size: 0.875rem;
      color: var(--red); }
    .downloadfile-style ul li .download-btn {
      display: block;
      background: #f2f2f2;
      border-radius: 30px;
      padding: 3px 12px;
      font-size: 0.9375rem;
      margin-left: 30px;
      transition: .3s; }
    .downloadfile-style ul li:not(:first-child) {
      margin-top: -1px; }

.search-keyword-block {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: bold;
  background: #f1f1f1;
  padding: 10px 15px; }
  .search-keyword-block .keyword-txt {
    color: var(--main); }

/* collapsing */
.collapsing-block.btnleft {
  border-top: 1px solid #eee; }
  .collapsing-block.btnleft .collapsing-box .collapsing-title {
    padding: 10px 10px 10px 30px; }
    .collapsing-block.btnleft .collapsing-box .collapsing-title::after {
      right: initial;
      left: 0; }
  .collapsing-block.btnleft .collapsing-box .collapsing-content {
    background: #f7f7f7;
    padding: 40px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; }

.collapsing-box {
  border-bottom: 1px solid #eee; }
  .collapsing-box .collapsing-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: #222;
    padding: 10px 30px 10px 0;
    position: relative;
    cursor: pointer; }
    .collapsing-box .collapsing-title::after {
      content: "+";
      color: #fb7268;
      font-size: 1.75rem;
      font-weight: 300;
      position: absolute;
      right: 10px;
      top: 10px;
      line-height: 1;
      transition: .3s; }
  .collapsing-box .collapsing-content {
    padding-bottom: 40px;
    display: none; }
  .collapsing-box.active {
    border-color: transparent; }
    .collapsing-box.active .collapsing-title::after {
      transform: rotate(45deg); }

/* team */
.team-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 30px;
  gap: 60px; }
  .team-list .team-box {
    width: calc((100% - 180px) / 4); }

.team-box a:hover figure .mask {
  opacity: 1;
  top: 0; }

.team-box figure {
  margin: 0;
  padding: 0;
  position: relative; }
  .team-box figure .pic {
    position: relative;
    padding-bottom: calc(300 / 235 * 100%);
    text-align: center;
    overflow: hidden;
    height: 0; }
    .team-box figure .pic img {
      position: absolute;
      display: block;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .team-box figure .pic iframe,
    .team-box figure .pic object,
    .team-box figure .pic embed {
      position: absolute;
      display: block;
      margin: auto;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }
  .team-box figure .mask {
    background: rgba(123, 196, 196, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    opacity: 0;
    transition: .3s; }
    .team-box figure .mask:after {
      content: "";
      display: block;
      background: url(../images/team_hover.svg);
      width: 45px;
      height: 45px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }

.team-box .content {
  margin-top: 15px;
  text-align: center; }
  .team-box .content .name {
    color: #333;
    font-size: 1.125rem;
    font-weight: bold; }
    .team-box .content .name span.en {
      font-weight: 300;
      display: block; }
  .team-box .content .job-department {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    gap: 5px; }
    .team-box .content .job-department span {
      display: block;
      background: #f7f7f7;
      display: inline-block;
      border-radius: 25px;
      padding: 8px 15px;
      font-size: 0.875rem;
      font-weight: bold;
      line-height: 1;
      color: #66a0b8; }

.team-detail-group {
  display: flex;
  flex-wrap: wrap; }

.team-detail-pic {
  width: calc(235 / 1000 * 100%); }
  .team-detail-pic figure {
    margin: 0;
    padding: 0;
    position: relative;
    position: relative;
    padding-bottom: calc(300 / 235 * 100%);
    text-align: center;
    overflow: hidden;
    height: 0; }
    .team-detail-pic figure img {
      position: absolute;
      display: block;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .team-detail-pic figure iframe,
    .team-detail-pic figure object,
    .team-detail-pic figure embed {
      position: absolute;
      display: block;
      margin: auto;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }

.team-detail-info {
  width: calc(765 / 1000 * 100%);
  padding: 0 50px; }
  .team-detail-info .name {
    font-weight: bold;
    font-size: 1.375rem;
    color: #333; }
    .team-detail-info .name .en {
      font-weight: 300;
      display: inline-block;
      padding-left: 10px; }
  .team-detail-info .job-department {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    gap: 10px; }
    .team-detail-info .job-department a {
      display: block;
      background: #f7f7f7;
      display: inline-block;
      border-radius: 25px;
      padding: 7px 20px;
      font-weight: bold;
      line-height: 1;
      color: #66a0b8; }
      .team-detail-info .job-department a:hover {
        background: #66a0b8;
        color: #fff; }
  .team-detail-info .medical-group {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; }
.team-detail-info .medical-group .title{
  font-weight: bold;
  width: 100%;
}
.team-detail-info .medical-group .title a{
  display: inline-block;
}
    .team-detail-info .medical-group a {
      display: block;
      background: #fff;
      display: inline-block;
      border-radius: 25px;
      padding: 7px 15px;
      font-weight: bold;
      line-height: 1;
      color: #666;
      border: 1px solid #ddd; }
      .team-detail-info .medical-group a:hover {
        background: #666;
        color: #fff; }
.team-detail-info .current-position{
  margin-top: 5px;
}
  .team-detail-info .physician-profile,
  .team-detail-info .current-position {
    margin-top: 20px;
    color: #333;
    font-size: 1.125rem; 
  }
    .team-detail-info .physician-profile .title,
    .team-detail-info .current-position .title {
      font-weight: bold; }
    .team-detail-info .physician-profile .txt,
    .team-detail-info .current-position .txt {
      font-weight: 300;
      margin-top: 5px; }

.team-detail-tab {
  margin-top: 70px;
  width: 100%; }
  .team-detail-tab .tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; }
    .team-detail-tab .tabs ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .team-detail-tab .tabs ul li {
      margin-bottom: -1px; }
      .team-detail-tab .tabs ul li a {
        display: block;
        color: #333333;
        font-size: 1.125rem;
        font-weight: bold;
        padding: 10px 20px;
        border: 1px solid #f0f1f2;
        line-height: 1; }
      .team-detail-tab .tabs ul li:not(:first-child) {
        margin-left: -1px; }
      .team-detail-tab .tabs ul li.active a {
        background: #f5f5f5;
        border-color: #f5f5f5; }
  .team-detail-tab .tabs-show {
    background: #f5f5f5;
    padding: 30px 20px; }

/* article */
.article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 66px; }
  .article-list.style2 .title {
    -webkit-line-clamp: 1;
    margin-top: 10px; }

.article-box {
  width: calc((100% - 132px) / 3); }
  .article-box a:hover .title {
    color: #608cb2; }
  .article-box figure {
    margin: 0;
    padding: 0;
    position: relative; }
    .article-box figure .pic {
      position: relative;
      padding-bottom: calc(150 / 290 * 100%);
      text-align: center;
      overflow: hidden;
      height: 0; }
      .article-box figure .pic img {
        position: absolute;
        display: block;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .article-box figure .pic iframe,
      .article-box figure .pic object,
      .article-box figure .pic embed {
        position: absolute;
        display: block;
        margin: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%; }
  .article-box .title {
    font-weight: bold;
    font-size: 1.125rem;
    color: #333;
    margin-top: 20px;
    transition: .3s;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  .article-box .txt {
    font-size: 1.0625rem;
    color: #333;
    padding-right: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 5px; }
  .article-box .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px; }
  .article-box .sort {
    margin-top: 5px;
    font-size: 0.875rem;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 7px 15px;
    line-height: 1;
    display: inline-block; }
  .article-box .date {
    margin-top: 5px;
    color: #fb7268;
    font-size: 0.9375rem;
    font-family: "Poppins", sans-serif;
    font-weight: 300; }

.article-list2 {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 75px; }

.article-box2 {
  width: calc((100% - 75px) / 2); }
  .article-box2 a {
    display: flex; }
    .article-box2 a:hover .title {
      color: #608cb2; }
  .article-box2 figure {
    margin: 0;
    padding: 0;
    position: relative;
    width: 140px; }
    .article-box2 figure .pic {
      position: relative;
      padding-bottom: calc(600 / 480 * 100%);
      text-align: center;
      overflow: hidden;
      height: 0; }
      .article-box2 figure .pic img {
        position: absolute;
        display: block;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .article-box2 figure .pic iframe,
      .article-box2 figure .pic object,
      .article-box2 figure .pic embed {
        position: absolute;
        display: block;
        margin: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%; }
  .article-box2 .content {
    flex: 1;
    padding-left: 25px; }
  .article-box2 .title {
    font-weight: bold;
    font-size: 1.125rem;
    color: #333;
    margin-top: 10px;
    transition: .3s;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; }
  .article-box2 .txt {
    font-size: 1.0625rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 5px; }
  .article-box2 .row {
    display: flex;
    align-items: center; }
  .article-box2 .sort {
    margin-top: 5px;
    font-size: 0.875rem;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 7px 15px;
    line-height: 1;
    display: inline-block; }
  .article-box2 .date {
    margin-top: 5px;
    color: #fb7268;
    font-size: 0.9375rem;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    margin-left: 10px; }

/* download-file */
.download-file-box a {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  padding: 9px 0;
  align-items: baseline;
  position: relative;
  color: #222;
  line-height: 1; }
  .download-file-box a:hover .download-btn {
    background: var(--main);
    color: #fff; }

.download-file-box .txt {
  flex: 1;
  font-weight: bold;
  font-size: 1.125rem;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.download-file-box .filetype {
  font-size: 0.875rem;
  width: 40px;
  text-align: center; }
  .download-file-box .filetype.pdf {
    color: var(--red); }
  .download-file-box .filetype.doc {
    color: #4f7db2; }
  .download-file-box .filetype.xml {
    color: #529f4c; }

.download-file-box .download-btn {
  display: block;
  border-radius: 30px;
  padding: 8px 12px;
  margin-left: 30px;
  transition: .3s;
  font-weight: 300; }

.download-file-box:not(:first-child) {
  margin-top: -1px; }

.download-file-box:first-child {
  border-top: 1px solid #eee; }

/*========== pageBasic mobile ==========*/
@media (max-width: 1440px) {
  aside + .article-content {
    padding-left: 40px; }
  .page-article-content-group {
    padding-bottom: 50px; } }

@media (max-width: 1366px) {
  .team-list {
    margin-top: 20px;
    gap: 40px; }
    .team-list .team-box {
      width: calc((100% - 120px) / 4); } }

@media (max-width: 1280px) {
  .breadcrumb .breadcrumb-title {
    font-size: 1.25rem;
    width: 250px; }
  .breadcrumb ul {
    width: calc(100% - 250px); }
  aside {
    width: 250px; }
    aside .layer1 > li > a {
      padding: 8px 30px 8px 20px;
      font-size: 1.0625rem; }
    aside .layer1 > li.dropdown > a:after {
      right: 13px;
      top: 11px; }
    aside .layer2 > li > a {
      padding: 8px 20px 8px 30px;
      font-size: 1.0625rem; }
      aside .layer2 > li > a:after {
        left: 15px; }
    aside .layer3 > li > a {
      padding: 8px 20px 8px 30px;
      font-size: 1.0625rem; }
      aside .layer3 > li > a:after {
        left: 15px; }
    aside .layer4 > li > a {
      padding: 8px 20px 8px 30px;
      font-size: 1.0625rem; }
      aside .layer4 > li > a:after {
        left: 15px; }
    aside + .article-content {
      width: calc(100% - 250px);
      padding-left: 30px; }
  .article-title {
    font-size: 1.25rem;
    margin-bottom: 20px; }
  .page-article-content-group {
    padding-bottom: 40px; }
  .page-btn-list a {
    font-size: 1rem;
    padding: 15px 17px; }
  .want-donate-btn a {
    font-size: 1rem;
    padding: 15px 10px; }
  .team-list {
    margin-top: 10px;
    gap: 30px; }
    .team-list .team-box {
      width: calc((100% - 90px) / 4); }
  .team-detail-pic {
    width: 27%; }
  .team-detail-info {
    width: 73%;
    padding: 0 30px; }
  .article-list {
    gap: 40px; }
  .article-box {
    width: calc((100% - 80px) / 3); }
  .article-list2 {
    gap: 40px 30px; }
  .article-box2 {
    width: calc((100% - 40px) / 2); }
    .article-box2 figure {
      width: 120px; }
    .article-box2 .content {
      padding-left: 15px; } }

@media (max-width: 1024px) {
  .article-list {
    gap: 20px; }
  .article-box {
    width: calc((100% - 40px) / 3); }
  .article-list2 {
    gap: 30px 0; }
  .article-box2 {
    width: 100%; }
    .article-box2 .content {
      padding-left: 20px; } }

@media (max-width: 960px) {
  .main.nobanner .breadcrumb {
    background: #fff; }
    .main.nobanner .breadcrumb ul {
      background: #fff; }
  aside {
    width: 100%; }
    aside + .article-content {
      width: 100%;
      padding-left: 0; }
    aside .layer1 {
      display: none; }
  .article-content {
    padding: 20px 0 0 0; }
  .aside-menu-btn {
    display: block; }
  .breadcrumb:after {
    display: none; }
  .breadcrumb .page-container {
    flex-wrap: wrap;
    padding: 0; }
  .breadcrumb .breadcrumb-title {
    width: 100%;
    padding: 10px 15px; }
  .breadcrumb ul {
    width: 100%;
    padding: 10px 25px 5px 25px;
    justify-content: flex-start;
    border-bottom: none; }
  .page-article {
    background: none; }
  .page-article-content-group {
    flex-wrap: wrap; }
  .pagination .page_num {
    width: 30px;
    height: 30px;
    font-size: 0.9375rem; }
  .pagination .page_arrow.prev {
    margin-right: 10px; }
  .pagination .page_arrow.next {
    margin-left: 10px; }
  .pagination .page_select {
    margin-left: 0;
    margin-top: 20px;
    display: block;
    width: 100%;
    text-align: center; }
  .table-style table td {
    padding: 5px 15px;
    font-size: 1rem; }
  .team-detail-info {
    padding: 0 0 0 30px; }
  .team-detail-info .name {
    font-size: 1.25rem; }
  .team-detail-info .job-department {
    margin-top: 10px; }
    .team-detail-info .job-department span {
      padding: 7px 15px; }
  .team-detail-info .medical-group .group {
    padding: 7px 15px;
    margin-bottom: 5px; }
    .team-detail-info .medical-group .group:not(:last-child) {
      margin-right: 10px; }
  .team-detail-info .physician-profile,
  .team-detail-info .current-position {
    margin-top: 15px;
    font-size: 1rem; }
    .team-detail-info .physician-profile .txt,
    .team-detail-info .current-position .txt {
      font-weight: normal; }
  .team-detail-tab {
    margin-top: 50px; }
  .article-box .title {
    font-size: 1rem; }
  .article-box .txt {
    padding-right: 0;
    font-size: 0.9375rem; }
  .article-box .sort {
    padding: 7px 10px; }
  .article-box2 {
    width: 100%; }
    .article-box2 .title {
      font-size: 1.0625rem; }
    .article-box2 .txt {
      font-size: 1rem; } }

@media (max-width: 768px) {
  .team-list .team-box {
    width: calc((100% - 60px) / 3); } }

@media (max-width: 640px) {
  .article-title3 {
    font-size: 1.25rem; }
  .page-detail-info .date {
    width: 100%; }
  .third-menu-style ul {
    gap: 5px; }
    .third-menu-style ul li a {
      padding: 8px 12px;
      font-size: 1rem;
      font-weight: normal; }
  .page-list-search {
    margin-bottom: 20px; }
    .page-list-search form {
      flex-wrap: wrap;
      background: none;
      padding: 0; }
      .page-list-search form > div {
        width: 100%;
        height: auto;
        align-items: flex-start; }
        .page-list-search form > div:not(:last-child) {
          margin-bottom: 10px; }
      .page-list-search form select,
      .page-list-search form input {
        height: 45px;
        display: block; }
      .page-list-search form button {
        height: 45px; }
      .page-list-search form .box {
        border: none !important;
        width: 100%; }
        .page-list-search form .box.department {
          width: 100%; }
        .page-list-search form .box.team {
          width: 100%; }
      .page-list-search form .keyword {
        flex: unset;
        width: calc(100% - 55px);
        border-left: none !important; }
      .page-list-search form .search-btn {
        width: 55px; }
  .page-share {
    margin-left: 0; }
  .page-detail-title {
    font-size: 1.25rem; }
  .table-style.has-rwd table {
    border: 1px solid #e8e8e8; }
    .table-style.has-rwd table td {
      width: 100%; }
    .table-style.has-rwd table thead {
      display: none; }
      .table-style.has-rwd table thead F td:not(:last-child) {
        border: none; }
    .table-style.has-rwd table tbody tr {
      display: block; }
    .table-style.has-rwd table tbody td {
      display: flex;
      align-items: baseline;
      width: 100%; }
      .table-style.has-rwd table tbody td::before {
        display: block; }
      .table-style.has-rwd table tbody td p {
        width: calc(100% - 70px); }
    .table-style.has-rwd table .right {
      text-align: left; }
    .table-style.has-rwd table .center {
      text-align: left; }
  .downloadfile-style ul li .txt {
    width: 100%;
    margin-bottom: 5px; }
  .downloadfile-style ul li .filetype {
    margin: initial; }
  .team-list {
    margin: 0 -5px;
    gap: 20px; }
    .team-list .team-box {
      width: calc((100% - 40px) / 2); }
  .team-box .content .name {
    font-size: 1rem; }
  .team-detail-pic {
    width: 235px;
    margin: auto; }
  .team-detail-info {
    width: 100%;
    padding: 0;
    margin-top: 20px; }
  .team-detail-tab {
    margin-top: 40px; }
    .team-detail-tab .tabs ul li a {
      padding: 10px 15px;
      font-size: 1rem; }
  .article-box {
    width: calc((100% - 20px) / 2); }
    .article-box .title {
      margin-top: 10px; }
  .download-file-box a {
    padding: 12px 35px 12px 0; }
    .download-file-box a:after {
      content: "\f358";
      display: inline-block;
      font-weight: bold;
      font-family: "Font Awesome 5 Free";
      position: absolute;
      right: 7px;
      top: 17px;
      color: #777;
      transition: .3s; }
    .download-file-box a:hover:after {
      color: var(--main); }
  .download-file-box .txt {
    font-size: 1rem;
    line-height: 1.5;
    white-space: normal; }
  .download-file-box .download-btn {
    display: none; }
  .collapsing-block.btnleft .collapsing-box .collapsing-content {
    padding: 20px; } }

@media (max-width: 480px) {
  .team-detail-info .name .en {
    display: block;
    padding-left: 0; }
  .article-list {
    gap: 10px; }
  .article-box {
    width: calc((100% - 10px) / 2); }
  .article-list2 {
    gap: 20px 0; }
  .article-box2 figure {
    width: 100px; }
  .article-box2 .content {
    padding-left: 15px; } }

@media (max-width: 375px) {
  .article-list {
    margin: 0; }
  .article-box {
    padding: 0;
    width: 100%;
    max-width: 100%; }
    .article-box .sort {
      font-size: 0.9375rem;
      margin-top: 0; } }

@media (max-width: 320px) {
  .team-list {
    margin-top: 10px; }
    .team-list .team-box {
      width: 235px;
      margin: auto; } }

/*========= index ==========*/
.index-container {
  margin: 0 auto;
  width: 1400px;
  max-width: 100%;
  padding: 0 20px; }

.index-section-title {
  color: #292c33;
  font-size: 2.25rem;
  margin-bottom: 40px; }
  .index-section-title.c {
    text-align: center; }

/*========== index-banner ==========*/
.index-banner {
  position: relative;
  width: 100%;
  overflow: hidden; }
  .index-banner .swiper-slide figure {
    display: block;
    margin: 0;
    padding: 0; }
    .index-banner .swiper-slide figure img {
      display: block;
      max-width: 100%; }
  .index-banner .swiper-button-next,
  .index-banner .swiper-button-prev {
    --swiper-navigation-size: 20px;
    color: #292c33;
    font-weight: bold;
    transition: .3s;
    top: 50%;
    transform: translateY(-50%); }
    .index-banner .swiper-button-next:hover,
    .index-banner .swiper-button-prev:hover {
      color: var(--main); }
  .index-banner .swiper-button-next {
    right: 5%; }
  .index-banner .swiper-button-prev {
    left: 5%; }
  .index-banner .banner-link {
    width: 100px;
    height: 100px;
    position: absolute;
    right: 13%;
    bottom: 11%;
    z-index: 5; }
    .index-banner .banner-link a {
      display: block;
      color: #fff;
      background: #292c33;
      border-radius: 50%;
      font-size: 1.5rem;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      .index-banner .banner-link a:hover {
        background: var(--main); }

/*========== index-link ==========*/
.index-section-link {
  background: #0a467b;
  background: -webkit-linear-gradient(legacy-direction(to right), #0a467b 0%, #0a467b calc(1440 / 1920 * 100%), #bacbd8 calc(1440 / 1920 * 100%), #bacbd8 100%);
  background: linear-gradient(to right, #0a467b 0%, #0a467b calc(1440 / 1920 * 100%), #bacbd8 calc(1440 / 1920 * 100%), #bacbd8 100%); }
  .index-section-link ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between; }
    .index-section-link ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .index-section-link ul li {
      flex: 1;
      text-align: center; }
      .index-section-link ul li:not(:last-child) {
        border-right: 1px solid #87a6c0; }
      .index-section-link ul li a {
        color: #fff;
        font-size: 1.6875rem;
        min-height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--main); }
        .index-section-link ul li a:hover {
          background: var(--green); }
      .index-section-link ul li.support a {
        background: #bacbd8;
        color: var(--main); }
        .index-section-link ul li.support a:hover {
          color: #fff;
          background: var(--green); }

/*========== index-about ==========*/
.index-section-about {
  margin-bottom: 120px; }

.index-about-box {
  position: relative;
  width: 100%; }
  .index-about-box figure {
    width: 910px;
    max-width: 100%;
    margin: 0;
    padding: 0; }
    .index-about-box figure .pic {
      max-width: 100%;
      position: relative;
      padding-bottom: calc(470 / 910 * 100%);
      text-align: center;
      overflow: hidden;
      height: 0; }
      .index-about-box figure .pic img {
        position: absolute;
        display: block;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .index-about-box figure .pic iframe,
      .index-about-box figure .pic object,
      .index-about-box figure .pic embed {
        position: absolute;
        display: block;
        margin: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%; }
  .index-about-box .content {
    position: absolute;
    bottom: 0;
    background: #fff;
    width: 600px;
    max-width: 100%;
    padding: 3.5% 5.9% 3.5% 5%; }
    .index-about-box .content .title {
      font-weight: bold;
      font-size: 2.25rem;
      color: #304269;
      margin-bottom: 10px; }
      .index-about-box .content .title span {
        color: #4583c9; }
    .index-about-box .content .txt {
      font-size: 1.25rem;
      color: #304269; }
      .index-about-box .content .txt p {
        margin: 0;
        font-weight: lighter; }
    .index-about-box .content .more {
      margin-top: 20px; }
      .index-about-box .content .more a {
        display: flex;
        font-weight: bold;
        color: #304269;
        font-size: 1.25rem; }
        .index-about-box .content .more a .arrow {
          margin-right: 10px;
          transition: .3s; }
          .index-about-box .content .more a .arrow svg {
            fill: #304269;
            width: 21px;
            height: 7px; }
        .index-about-box .content .more a:hover .arrow {
          margin-right: 20px; }
  .index-about-box:nth-child(odd) {
    margin-top: 100px; }
    .index-about-box:nth-child(odd) figure {
      margin-right: auto; }
    .index-about-box:nth-child(odd) .content {
      right: 40px; }
  .index-about-box:nth-child(even) figure {
    margin-left: auto; }
  .index-about-box:nth-child(even) .content {
    left: 40px;
    background: var(--main); }
    .index-about-box:nth-child(even) .content .title {
      color: #fff; }
      .index-about-box:nth-child(even) .content .title span {
        color: #c5dffc; }
    .index-about-box:nth-child(even) .content .txt {
      color: #fff; }
    .index-about-box:nth-child(even) .content .more a {
      color: #fff; }
      .index-about-box:nth-child(even) .content .more a .arrow svg {
        fill: #fff; }

/*========== index-news ==========*/
.index-section-news {
  background: url(../images/index_news_bg.jpg);
  padding: 5.25% 0; }
  .index-section-news .index-container {
    overflow: hidden; }

.index-news-tabs-btn ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 70px;
  row-gap: 15px; }
  .index-news-tabs-btn ul > li {
    list-style: none;
    margin: 0;
    padding: 0; }
  .index-news-tabs-btn ul li a {
    display: block;
    font-size: 1.25rem;
    color: #292c33; }
  .index-news-tabs-btn ul li.active a {
    font-weight: bold; }

.index-news-tabs-content {
  margin-top: 50px; }
  .index-news-tabs-content .tabs-show {
    position: relative; }
  .index-news-tabs-content .swiper-pagination {
    position: static;
    width: 100% !important;
    transform: none !important;
    margin-top: 50px; }
  .index-news-tabs-content .swiper-pagination-bullet-active {
    background: #292c33; }

.index-news-box a:hover .content .more {
  background: var(--main);
  color: #fff; }

.index-news-box figure {
  margin: 0;
  padding: 0; }
  .index-news-box figure .pic {
    position: relative;
    padding-bottom: 38.09524%;
    text-align: center;
    overflow: hidden;
    height: 0; }
    .index-news-box figure .pic img {
      position: absolute;
      display: block;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .index-news-box figure .pic iframe,
    .index-news-box figure .pic object,
    .index-news-box figure .pic embed {
      position: absolute;
      display: block;
      margin: auto;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }

.index-news-box .content {
  background: #fff;
  padding: 30px 35px; }
  .index-news-box .content .title {
    font-size: 1.25rem;
    color: #333;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  .index-news-box .content .t-row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: baseline; }
  .index-news-box .content .date {
    color: #999;
    font-size: 1rem;
    font-weight: lighter; }
  .index-news-box .content .more {
    color: #333;
    font-size: 1.25rem;
    font-weight: lighter;
    padding: 5.5px 20px;
    border: 1px solid #d0d0d0;
    border-radius: 25px;
    transition: .3s; }

/*========== index-icon ==========*/
.index-section-icon {
  padding: 8.4% 0; }

.index-icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 70px;
  row-gap: 20px;
  justify-content: space-evenly; }

.index-icon-box a:hover figure {
  background: #eaf0f5; }

.index-icon-box figure {
  margin: 0;
  padding: 0;
  background: var(--main);
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
  margin: auto; }
  .index-icon-box figure .pic {
    display: flex; }
  .index-icon-box figure svg {
    width: 30px;
    height: 30px; }
    .index-icon-box figure svg * {
      transition: .3s; }

.index-icon-box .title {
  color: #292c33;
  font-size: 1.25rem;
  margin-top: 20px;
  text-align: center; }

.index-icon-box.icon1 a:hover figure svg .cls-1 {
  fill: var(--main); }

.index-icon-box.icon1 a:hover figure svg .cls-2 {
  fill: none;
  stroke: var(--main); }

.index-icon-box.icon1 figure svg .cls-1 {
  fill: #fff;
  stroke-width: 0px; }

.index-icon-box.icon1 figure svg .cls-2 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 40px; }

.index-icon-box.icon2 a:hover figure svg .cls-1 {
  stroke: var(--main); }

.index-icon-box.icon2 figure svg .cls-1 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 53.33px; }

.index-icon-box.icon3 a figure:hover svg .cls-1 {
  stroke: var(--main); }

.index-icon-box.icon3 figure svg .cls-1 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 40px; }

.index-icon-box.icon4 a:hover figure svg .cls-1 {
  stroke: var(--main); }

.index-icon-box.icon4 figure svg .cls-1 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 40px; }

.index-icon-box.icon5 a:hover figure svg .cls-1 {
  fill: var(--main); }

.index-icon-box.icon5 figure svg .cls-1 {
  fill: #fff;
  stroke-width: 0px; }

.index-icon-box.icon6 a:hover figure svg .cls-1 {
  fill: var(--main); }

.index-icon-box.icon6 figure svg .cls-1 {
  fill: #fff;
  stroke-width: 0px; }

.index-icon-box.icon7 a:hover figure svg .cls-1 {
  fill: var(--main); }

.index-icon-box.icon7 figure svg .cls-1 {
  fill: #fff;
  stroke-width: 0px; }

.index-icon-box.icon8 a:hover figure svg .cls-1 {
  fill: var(--main); }

.index-icon-box.icon8 a:hover figure svg .cls-2 {
  stroke: var(--main); }

.index-icon-box.icon8 figure svg .cls-1 {
  fill: #fff;
  stroke-width: 0px; }

.index-icon-box.icon8 figure svg .cls-2 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 40px; }

.index-icon-box2 a:hover figure .pic img {
  display: none; }
  .index-icon-box2 a:hover figure .pic img.active {
    display: block; }

.index-icon-box2 figure {
  margin: 0;
  padding: 0;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
  margin: auto; }
  .index-icon-box2 figure .pic {
    display: flex;
    position: relative; }
    .index-icon-box2 figure .pic img {
      display: block;
      max-width: 100%;
      max-height: 100%; }
      .index-icon-box2 figure .pic img.active {
        display: none; }
  .index-icon-box2 figure svg {
    width: 30px;
    height: 30px; }
    .index-icon-box2 figure svg * {
      transition: .3s; }

.index-icon-box2 .title {
  color: #292c33;
  font-size: 1.25rem;
  margin-top: 20px;
  text-align: center; }

/*========== index-contact ==========*/
.index-section-contact {
  display: flex; }
  .index-section-contact .index-section-title {
    margin-bottom: 20px; }
  .index-section-contact .map-info {
    width: calc(810 / 1920 * 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9f8; }
    .index-section-contact .map-info p {
      margin: 0;
      font-size: 1.25rem;
      color: #292c33; }
      .index-section-contact .map-info p span {
        display: inline-block;
        margin-right: 15px; }
      .index-section-contact .map-info p:not(:last-child) {
        margin-bottom: 5px; }
  .index-section-contact .map {
    width: calc(1110/1920 * 100%); }
    .index-section-contact .map iframe {
      width: 100%;
      display: block;
      height: 525px; }
.index-section-contact .more{
  display: inline-block;
  margin-top: 20px;
}
.index-section-contact .more a{
  display: block;
  padding: 10px 20px;
  background: var(--main);
  color: #fff;
  border-radius: 25px;
}
.index-section-contact .more a i{
  margin-right: 10px;
}
.index-section-contact .more a:hover{
  background: var(--green);
}


/*========== index-contact ==========*/
/**/
.index-fixed {
  background: #fff;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.55);
  z-index: 10;
  display: none; }
  .index-fixed ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0; }
    .index-fixed ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .index-fixed ul li {
      flex: 1; }
      .index-fixed ul li a {
        color: #000;
        display: block;
        padding: 10px;
        text-align: center; }
        .index-fixed ul li a i {
          display: block;
          text-align: center;
          margin-bottom: 5px; }
      .index-fixed ul li:nth-child(2) a {
        background: #eee; }

/*========== index mobile ==========*/
@media (max-width: 1440px) {
  .index-container {
    padding: 0 25px; }
  .index-banner .banner-link {
    width: 80px;
    height: 80px;
    right: 5%;
    bottom: 5%; }
    .index-banner .banner-link a {
      font-size: 1.25rem; }
  .index-section-link ul li a {
    font-size: 1.375rem;
    min-height: 90px; }
  .index-section-about {
    margin-bottom: 100px; }
  .index-about-box .content {
    padding: 2.5% 4.9% 2.5% 4%; }
    .index-about-box .content .title {
      font-size: 1.75rem; }
    .index-about-box .content .txt {
      font-size: 1.125rem; }
    .index-about-box .content .more a {
      font-size: 1.125rem; }
  .index-about-box:nth-child(odd) {
    margin-top: 80px; } }

@media (max-width: 1280px) {
  .index-section-title {
    margin-bottom: 20px; }
  .index-section-title {
    font-size: 1.875rem; }
  .index-news-tabs-btn ul {
    column-gap: 50px; }
    .index-news-tabs-btn ul li a {
      font-size: 1.125rem; }
  .index-news-tabs-content {
    margin-top: 30px; }
    .index-news-tabs-content .swiper-pagination {
      margin-top: 30px; }
  .index-news-box .content {
    padding: 20px 25px; }
    .index-news-box .content .title {
      font-size: 1.125rem; }
    .index-news-box .content .more {
      padding: 5px 10px;
      font-size: 1rem; }
  .index-icon-list {
    column-gap: 50px; }
  .index-section-contact .map iframe {
    height: 400px; } }

@media (max-width: 960px) {
  .index-section-title {
    font-size: 1.625rem; }
  .index-banner .banner-link {
    width: 60px;
    height: 60px;
    right: 30px;
    bottom: 30px; }
    .index-banner .banner-link a {
      font-size: 1.125rem; }
  .index-section-link ul li a {
    font-size: 1.25rem;
    min-height: 70px; }
  .index-section-about {
    margin-bottom: 80px; }
  .index-about-box .content .title {
    font-size: 1.5rem; }
  .index-about-box .content .txt {
    font-size: 1rem; }
  .index-about-box .content .more a {
    font-size: 1rem; }
  .index-about-box:nth-child(odd) {
    margin-top: 60px; }
    .index-about-box:nth-child(odd) .content {
      right: 0; }
  .index-about-box:nth-child(even) .content {
    left: 0; }
  .index-news-tabs-btn ul {
    column-gap: 30px;
    row-gap: 10px; }
    .index-news-tabs-btn ul li a {
      font-size: 1rem; }
  .index-news-box .content {
    padding: 15px; }
    .index-news-box .content .title {
      font-size: 1rem; }
    .index-news-box .content .t-row {
      margin-top: 10px; }
    .index-news-box .content .date {
      font-size: 0.875rem; }
    .index-news-box .content .more {
      font-size: 0.875rem;
      font-weight: normal; }
  .index-section-contact .index-section-title {
    margin-bottom: 20px; }
  .index-section-contact .map-info {
    padding: 30px; }
    .index-section-contact .map-info p {
      font-size: 1rem; }
      .index-section-contact .map-info p span {
        display: block;
        font-weight: bold; }
  .index-section-contact .map iframe {
    height: 350px; } }

@media (max-width: 640px) {
  .index-banner .banner-link {
    width: 55px;
    height: 55px;
    right: 20px;
    bottom: 20px; }
    .index-banner .banner-link a {
      font-size: 1rem; }
  .index-section-link {
    background: none; }
    .index-section-link .index-container {
      padding: 0; }
    .index-section-link ul {
      flex-wrap: wrap; }
      .index-section-link ul li {
        width: 100%;
        flex: auto; }
        .index-section-link ul li:not(:last-child) {
          border-right: none;
          border-bottom: 1px solid #87a6c0; }
        .index-section-link ul li a {
          font-size: 1.125rem;
          min-height: 60px; }
  .index-section-about {
    margin-bottom: 40px;
    margin-top: 40px; }
  .index-about-box .content {
    position: relative;
    bottom: initial;
    padding: 20px; }
    .index-about-box .content .title {
      font-size: 1.375rem; }
    .index-about-box .content .txt p {
      font-weight: normal; }
  .index-about-box:nth-child(odd) {
    margin-top: 0; }
    .index-about-box:nth-child(odd) .content {
      background: #f8f9f8; }
  .index-icon-list {
    row-gap: 15px;
    column-gap: initial; }
  .index-icon-box2 {
    width: 20%; }
    .index-icon-box2 figure {
      width: 60px;
      height: 60px; }
    .index-icon-box2 .title {
      font-size: 1.125rem;
      margin-top: 10px; }
  .index-section-contact {
    flex-wrap: wrap; }
    .index-section-contact .map-info {
      width: 100%;
      justify-content: flex-start; }
      .index-section-contact .map-info p span {
        display: inline-block; }
    .index-section-contact .map {
      width: 100%; } }

@media (max-width: 480px) {
  .index-banner .banner-link {
    width: 45px;
    height: 45px;
    right: 10px;
    bottom: 10px; }
    .index-banner .banner-link a {
      font-size: 0.875rem; }
  .index-section-link ul li a {
    font-size: 1rem;
    min-height: 50px; }
  .index-news-tabs-btn ul {
    column-gap: 20px;
    row-gap: 8px; }
  .index-icon-box2 {
    width: 25%; }
    .index-icon-box2 figure {
      width: 50px;
      height: 50px; }
      .index-icon-box2 figure svg {
        width: 25px;
        height: 25px; }
    .index-icon-box2 .title {
      font-size: 1rem; }
  .index-section-contact .index-section-title {
    margin-bottom: 10px; }
  .index-section-contact .map-info {
    padding: 20px 25px; }
  .index-section-contact .map iframe {
    height: 300px; } }

@media (max-width: 375px) {
  .index-icon-box2 {
    width: 33%; } }

/*========= 就醫指南 guide ==========*/
/* 收費標準 */
.outpatient_procedures .thin {
  font-weight: 300; }

.outpatient_procedures .step {
  text-align: center;
  margin: auto;
  position: relative; }
  .outpatient_procedures .step .group {
    display: inline-block;
    background: #f2f3f5;
    text-align: center;
    padding: 10px 40px;
    max-width: 100%; }
  .outpatient_procedures .step .step-title {
    font-size: 1.25rem;
    font-weight: bold; }
  .outpatient_procedures .step .step-txt {
    font-size: 1.0625rem; }
  .outpatient_procedures .step .arrow {
    margin: 15px 0; }

.outpatient_procedures .step1 .group {
  background: #fff;
  border: 2px solid #1e415a; }

.outpatient_procedures .step2 .group {
  width: 960px;
  padding: 15px 40px; }

.outpatient_procedures .step2 .icon-list {
  display: flex;
  justify-content: center;
  column-gap: 50px;
  margin-top: 20px; }
  .outpatient_procedures .step2 .icon-list figure {
    margin: 0;
    padding: 0;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .outpatient_procedures .step2 .icon-list figure img {
      width: 65px;
      height: 65px; }

.outpatient_procedures .step2 .icon-box {
  margin-bottom: 10px; }
  .outpatient_procedures .step2 .icon-box .title {
    font-size: 1.0625rem;
    font-weight: 300;
    text-align: center;
    margin-top: 10px;
    line-height: 1.4; }

.outpatient_procedures .step3 .group {
  background: #0f4c81;
  color: #fff;
  padding: 15px 40px; }

.outpatient_procedures .step3 .step-title span {
  display: block;
  color: #ffb2aa;
  font-size: 1.125rem; }

.outpatient_procedures .step3 .step-txt {
  font-size: 1.0625rem; }

.outpatient_procedures .step7 .group {
  background: #fff;
  border: 2px solid #ec6c5f; }

.outpatient_procedures .step8 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 60px;
  justify-content: center; }
  .outpatient_procedures .step8 .group {
    width: 450px;
    padding: 20px;
    max-width: 100%; }
  .outpatient_procedures .step8 .yes .group {
    background: #ec6c5f;
    color: #fff; }
  .outpatient_procedures .step8 .arrow-word {
    font-size: 1.25rem;
    margin: 15px 0; }
    .outpatient_procedures .step8 .arrow-word img {
      display: block; }
  .outpatient_procedures .step8 .no .arrow-word {
    text-align: right;
    padding-right: 60px; }
    .outpatient_procedures .step8 .no .arrow-word img {
      margin-left: auto;
      margin-top: 5px; }
  .outpatient_procedures .step8 .yes .arrow-word {
    text-align: left;
    padding-left: 60px; }
    .outpatient_procedures .step8 .yes .arrow-word img {
      margin-top: 5px; }
  .outpatient_procedures .step8 .arrow {
    width: 100%; }

.outpatient_procedures .step10 .group {
  background: #fff;
  border: 2px solid #1e415a; }

/* 和信病人意見反映電子信箱 */
.opinion-reflection-form .form-txt {
  color: #222222;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 1.125rem;
  padding: 0 20px; }
  .opinion-reflection-form .form-txt .red {
    color: #d93737; }
  .opinion-reflection-form .form-txt .tc {
    text-align: center; }

.opinion-reflection-form form {
  display: flex;
  flex-wrap: wrap; }

.opinion-reflection-form .form-box {
  width: 100%;
  margin-bottom: 10px; }
  .opinion-reflection-form .form-box .box-title {
    color: #333;
    font-size: 1.125rem; }
    .opinion-reflection-form .form-box .box-title .must {
      color: var(--red);
      display: inline-block;
      margin-left: 5px; }
  .opinion-reflection-form .form-box .box-content .input-box input[type="text"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="password"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="email"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="date"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="number"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="tel"] {
    background: none;
    border-radius: 0;
    border: none;
    appearance: none;
    width: 100%;
    border: none;
    padding: 8px 15px;
    background: #f7f7f7;
    color: #222;
    text-align: left;
    transition: 0.3s;
    font-size: 1rem; }
    .opinion-reflection-form .form-box .box-content .input-box input[type="text"]::placeholder,
    .opinion-reflection-form .form-box .box-content .input-box input[type="password"]::placeholder,
    .opinion-reflection-form .form-box .box-content .input-box input[type="email"]::placeholder,
    .opinion-reflection-form .form-box .box-content .input-box input[type="date"]::placeholder,
    .opinion-reflection-form .form-box .box-content .input-box input[type="number"]::placeholder,
    .opinion-reflection-form .form-box .box-content .input-box input[type="tel"]::placeholder {
      color: #e0e0e0; }
  .opinion-reflection-form .form-box .box-content .input-box select {
    background: none;
    appearance: none;
    border-radius: 0;
    border: none;
    width: 100%;
    border: none;
    border-bottom: 1px solid #666666;
    font-size: 1rem;
    background: #fff url(../images/select_arrow.svg) right 15px center no-repeat;
    background-size: 9px;
    padding: 8px 40px 8px 0;
    color: #222;
    text-align: left; }
  .opinion-reflection-form .form-box .box-content .input-box input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1; }
  .opinion-reflection-form .form-box .box-content .input-box input[type="date"] {
    position: relative; }
    .opinion-reflection-form .form-box .box-content .input-box input[type="date"]::before {
      display: block;
      content: "";
      background: url(../images/icon_date.svg) no-repeat right center;
      background-size: contain;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 12px;
      right: 20px; }
  .opinion-reflection-form .form-box .box-content .input-box input[type="text"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="password"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="email"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="date"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="number"],
  .opinion-reflection-form .form-box .box-content .input-box input[type="tel"],
  .opinion-reflection-form .form-box .box-content .input-box select {
    height: 40px; }
  .opinion-reflection-form .form-box .box-content .input-box textarea {
    background: none;
    border-radius: 0;
    border: none;
    width: 100%;
    border: none;
    padding: 15px;
    font-size: 1rem;
    background: #f7f7f7;
    color: #222;
    text-align: left; }
    .opinion-reflection-form .form-box .box-content .input-box textarea::placeholder {
      color: #aaaaaa; }
  .opinion-reflection-form .form-box .box-content .flex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 5px 0; }
  .opinion-reflection-form .form-box .box-content .txt {
    margin: 5px 0; }
  .opinion-reflection-form .form-box .box-content .notice {
    padding-left: 10px;
    color: #999;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center; }
  
  .opinion-reflection-form .form-box .input-title {
    margin-right: 15px; }
  .opinion-reflection-form .form-box .input-unit {
    margin-left: 15px; }
  .opinion-reflection-form .form-box .part {
    display: inline-block; }
    .opinion-reflection-form .form-box .part span {
      margin-left: 5px;
      display: inline-block; }
      .opinion-reflection-form .form-box .part span b {
        font-weight: bold; }
    .opinion-reflection-form .form-box .part:not(:last-child) {
      margin-right: 30px; }
  .opinion-reflection-form .form-box .radiobox,
  .opinion-reflection-form .form-box .checkbox {
    font-size: 1.0625rem;
    margin-top: 5px;
    margin-bottom: 5px; }
  .opinion-reflection-form .form-box .radiobox {
    color: #222; }
    .opinion-reflection-form .form-box .radiobox input[type="radio"] {
      opacity: 0;
      display: none; }
      .opinion-reflection-form .form-box .radiobox input[type="radio"] + label {
        position: relative;
        cursor: pointer;
        padding-left: 20px; }
        .opinion-reflection-form .form-box .radiobox input[type="radio"] + label:before {
          content: "";
          display: block;
          width: 16px;
          height: 16px;
          background: #fff;
          border: 2px solid #222;
          position: absolute;
          left: 0;
          top: 50%;
          border-radius: 50%;
          transform: translateY(-50%); }
        .opinion-reflection-form .form-box .radiobox input[type="radio"] + label:after {
          content: "";
          width: 0;
          height: 0;
          background-color: transparent;
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translate(-50%, -50%);
          border-radius: 50%; }
      .opinion-reflection-form .form-box .radiobox input[type="radio"]:checked + label:after {
        width: 8px;
        height: 8px;
        background-color: var(--green); }
  .opinion-reflection-form .form-box .checkbox {
    color: #222; }
    .opinion-reflection-form .form-box .checkbox input[type="checkbox"] {
      opacity: 0;
      display: none; }
      .opinion-reflection-form .form-box .checkbox input[type="checkbox"] + label {
        position: relative;
        cursor: pointer;
        padding-left: 20px;
        display: block; }
        .opinion-reflection-form .form-box .checkbox input[type="checkbox"] + label:before {
          content: "";
          display: block;
          width: 15px;
          height: 15px;
          background: #fff;
          border: 2px solid #222;
          position: absolute;
          left: 0;
          top: 13px;
          border-radius: 3px;
          transform: translateY(-50%); }
        .opinion-reflection-form .form-box .checkbox input[type="checkbox"] + label:after {
          content: "\f00c";
          display: block;
          font-weight: bold;
          font-family: "Font Awesome 5 Free";
          position: absolute;
          left: 3px;
          top: 1px;
          color: var(--green);
          font-size: 0.9375rem;
          opacity: 0; }
      .opinion-reflection-form .form-box .checkbox input[type="checkbox"]:checked + label:after {
        opacity: 1; }
    .opinion-reflection-form .form-box .checkbox a {
      color: #222;
      text-decoration: underline;
      font-weight: bold;
      display: inline-block;
      margin: 0 2px; }
      .opinion-reflection-form .form-box .checkbox a:hover {
        color: var(--main); }
  .opinion-reflection-form .form-box.inline {
    display: flex;
    margin-top: -1px; }
    .opinion-reflection-form .form-box.inline .box-title {
      width: 165px;
      padding: 3px 25px;
      border: 1px solid #e8e8e8;
      display: flex;
      align-items: center; }
    .opinion-reflection-form .form-box.inline .box-content {
      width: calc(100% - 165px);
      padding: 3px 25px;
      border-left: none; }
  .opinion-reflection-form .form-box.radio-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .opinion-reflection-form .form-box.radio-identity .box-title {
      margin-right: 15px; }
  .opinion-reflection-form .form-box.respondent-name {
    width: 220px; }
  .opinion-reflection-form .form-box.phone {
    width: 220px; }
  .opinion-reflection-form .form-box.cell-phone {
    width: 220px; }
  .opinion-reflection-form .form-box.email {
    flex: 1; }
  .opinion-reflection-form .form-box.occurrence-date .input-box, .opinion-reflection-form .form-box.occurrence-place .input-box {
    width: 220px; }
  .opinion-reflection-form .form-box.occurrence-date .part, .opinion-reflection-form .form-box.occurrence-place .part {
    margin-left: 40px; }
  .opinion-reflection-form .form-box.captcha {
    margin-bottom: 0;
    width: auto; }
  .opinion-reflection-form .form-box.remark .box-content .input-box textarea {
    height: 225px; }

.opinion-reflection-form .notice-txt {
  color: #d93737;
  font-size: 1rem;
  width: 100%; }

.opinion-reflection-form .form-box-group {
  display: flex;
  gap: 0 40px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 15px; }

.opinion-reflection-form .form-btn-list {
  display: flex; }
  .opinion-reflection-form .form-btn-list .form-btn {
    background: none;
    border: none;
    cursor: pointer;
    appearance: none;
    border-radius: 0;
    line-height: 1;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    padding: 10px 30px;
    border: 1px solid #222;
    border-radius: 25px;
    text-align: center; }
    .opinion-reflection-form .form-btn-list .form-btn:hover {
      background: #222;
      color: #fff; }
    .opinion-reflection-form .form-btn-list .form-btn.right {
      margin-left: auto; }
    .opinion-reflection-form .form-btn-list .form-btn:not(:last-child) {
      margin-right: 10px; }

.opinion-reflection-form .form-row-group {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .opinion-reflection-form .form-row-group.captcha-btn {
    margin-top: 20px; }

.opinion-reflection-form .notice-txt {
  width: 100%; }

.opinion-reflection-form .custom-file-container__custom-file {
  width: 335px; }

.opinion-reflection-form .custom-file-container__image-preview {
  overflow: auto;
  padding: 10px;
  margin-bottom: 10px;
  background-image: url(../images/fileupload-bg.svg) !important; }

.opinion-reflection-form .custom-file-container__image-multi-preview {
  width: 90px;
  margin: 10px; }

.opinion-reflection-form .custom-file-container__custom-file__custom-file-control {
  border-color: #d2d2d2;
  height: 40px;
  border-radius: 3px; }

.opinion-reflection-form .custom-file-container__custom-file__custom-file-control__button {
  border-color: #d2d2d2;
  background: #f5f5f5;
  color: #222222;
  font-size: 1.125rem; }

.opinion-reflection-form .custom-file-container__image-multi-preview__single-image-clear {
  background: #e87e7e; }
  .opinion-reflection-form .custom-file-container__image-multi-preview__single-image-clear:hover {
    background: #222; }

.opinion-reflection-form .custom-file-container__image-multi-preview__single-image-clear__icon {
  color: #fff; }

.screening-appointment-btn {
  text-align: center;
  margin-top: 30px; }
  .screening-appointment-btn a {
    display: inline-block;
    padding: 21px 55px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.125rem;
    color: #fff;
    background: #8fb6d3;
    line-height: 1;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.35); }
    .screening-appointment-btn a:hover {
      background: var(--main); }

.screening-appointment-btn1 {
  margin-bottom: 40px; }

.cancer_screening_table {
  width: 100%;
  overflow: auto; }
  .cancer_screening_table table {
    border-collapse: collapse;
    min-width: 1000px; }
    .cancer_screening_table table td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center; }

/*========== guide mobile ==========*/
@media (max-width: 1366px) {
  .outpatient_procedures .step8 {
    column-gap: 20px; }
    .outpatient_procedures .step8 .group {
      width: 400px;
      padding: 15px 20px; } }

@media (max-width: 1280px) {
  .outpatient_procedures .step8 .no,
  .outpatient_procedures .step8 .yes {
    width: calc((100% - 20px) / 2); } }

@media (max-width: 960px) {
  .outpatient_procedures .thin {
    font-weight: 400; }
  .outpatient_procedures .step .group {
    padding: 10px 20px; }
  .outpatient_procedures .step2 .icon-list {
    column-gap: 20px; }
  .opinion-reflection-form .form-txt {
    font-weight: 400; }
  .opinion-reflection-form .form-box.respondent-name {
    width: 100%; }
  .opinion-reflection-form .form-box.phone {
    width: 100%; }
  .opinion-reflection-form .form-box.cell-phone {
    width: 100%; }
  .screening-appointment-btn a {
    padding: 16px 30px; } }

@media (max-width: 640px) {
  .outpatient_procedures .step .step-title {
    font-size: 1.125rem; }
  .outpatient_procedures .step .arrow {
    margin: 10px 0; }
  .outpatient_procedures .step .group {
    padding: 10px 15px; }
  .outpatient_procedures .step2 .icon-list {
    flex-wrap: wrap; }
  .opinion-reflection-form .form-txt {
    font-size: 1rem;
    padding: 0;
    margin-bottom: 20px; }
  .opinion-reflection-form .form-box .box-title {
    font-size: 1rem; }
  .opinion-reflection-form .form-box .part {
    display: block; }
  .opinion-reflection-form .form-box.radio-identity {
    display: block; }
    .opinion-reflection-form .form-box.radio-identity .part:not(:last-child) {
      margin-bottom: 10px; }
  .opinion-reflection-form .form-box.occurrence-date .input-box, .opinion-reflection-form .form-box.occurrence-place .input-box {
    width: 100%; }
  .opinion-reflection-form .form-box.occurrence-date .part, .opinion-reflection-form .form-box.occurrence-place .part {
    margin-left: 0;
    margin-top: 10px; }
  .opinion-reflection-form .form-box.remark .box-content .input-box textarea {
    height: 160px; }
  .opinion-reflection-form .form-btn-list {
    margin-top: 20px; }
    .opinion-reflection-form .form-btn-list .form-btn {
      font-size: 1rem; }
  .opinion-reflection-form .form-row-group {
    display: block; }
    .opinion-reflection-form .form-row-group.captcha-btn {
      margin-top: 10px; } }

@media (max-width: 480px) {
  .opinion-reflection-form .custom-file-container__custom-file {
    width: 100%; } }

@media (max-width: 375px) {
  .opinion-reflection-form .custom-file-container__image-multi-preview {
    width: 80px;
    height: 80px;
    margin: 8px; } }

@media (max-width: 320px) {
  .opinion-reflection-form .form-box.captcha {
    display: flex;
    justify-content: center; }
  .opinion-reflection-form .form-btn-list {
    justify-content: center; }
  .opinion-reflection-form .custom-file-container__image-multi-preview {
    width: 70px;
    height: 70px;
    margin: 5px; } }

/*========= 部門介紹 department ==========*/
/*========== department mobile ==========*/
/*========= 癌症團隊 cancer ==========*/
/*========== cancer mobile ==========*/
/*========= 認識和信 know ==========*/
.deans-words-flex {
  display: flex; }

.deans-words-left {
  width: 210px; }

.deans-words-right {
  flex: 1;
  padding-left: 50px; }

.environment-introduction-box a {
  display: block;
  position: relative; }
  .environment-introduction-box a:hover .content {
    background: var(--main); }
  .environment-introduction-box a:hover .title {
    color: #fff; }
  .environment-introduction-box a:hover .txt {
    color: #fff; }

.environment-introduction-box figure {
  width: calc(660 / 1000 * 100%);
  margin: 0;
  padding: 0; }
  .environment-introduction-box figure .pic {
    position: relative;
    padding-bottom: calc(310 / 660 * 100%);
    text-align: center;
    overflow: hidden;
    height: 0; }
    .environment-introduction-box figure .pic img {
      position: absolute;
      display: block;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .environment-introduction-box figure .pic iframe,
    .environment-introduction-box figure .pic object,
    .environment-introduction-box figure .pic embed {
      position: absolute;
      display: block;
      margin: auto;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }

.environment-introduction-box .content {
  position: absolute;
  right: 0;
  bottom: 0;
  right: 0;
  width: 460px;
  padding: 45px 40px 35px 40px;
  background: url(../images/bg_gray_slash.jpg);
  transition: .3s; }

.environment-introduction-box .sort {
  display: block;
  background: #fff;
  border: 1px solid #cccccc;
  color: #333;
  padding: 2px 11px;
  border-radius: 3px;
  min-height: 30px;
  font-size: 0.875rem;
  display: inline-block; }

.environment-introduction-box .title {
  color: #608cb2;
  font-weight: bold;
  font-size: 1.25rem;
  margin-top: 10px;
  transition: .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.environment-introduction-box .txt {
  font-weight: 300;
  color: #222222;
  font-size: 1.125rem;
  transition: .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.environment-introduction-box:not(:last-child) {
  margin-bottom: 50px; }

.environment-introduction-box:nth-child(even) figure {
  margin-left: auto; }

.environment-introduction-box:nth-child(even) .content {
  right: initial;
  left: 0; }

.environment-introduction-pic-block figure {
  margin: 0;
  padding: 0; }
  .environment-introduction-pic-block figure .pic img {
    display: block;
    max-width: 100%;
    margin: auto; }

.environment-introduction-bigpic {
  width: 960px;
  margin: auto;
  max-width: 100%; }
  .environment-introduction-bigpic .swiper-button-prev,
  .environment-introduction-bigpic .swiper-button-next {
    transition: .3s;
    background: rgba(34, 34, 34, 0.75);
    width: 35px;
    height: 70px; }
    .environment-introduction-bigpic .swiper-button-prev:after,
    .environment-introduction-bigpic .swiper-button-next:after {
      color: #fff;
      font-size: 1rem; }
    .environment-introduction-bigpic .swiper-button-prev:hover,
    .environment-introduction-bigpic .swiper-button-next:hover {
      background: rgba(236, 108, 95, 0.75); }
  .environment-introduction-bigpic .swiper-button-prev {
    left: 0;
    border-radius: 0 100px 100px 0;
    /* 左上、右上、右下、左下 */ }
    .environment-introduction-bigpic .swiper-button-prev:after {
      transform: translateX(-4px); }
  .environment-introduction-bigpic .swiper-button-next {
    right: 0;
    border-radius: 100px 0 0 100px;
    /* 左上、右上、右下、左下 */ }
    .environment-introduction-bigpic .swiper-button-next:after {
      transform: translateX(4px); }

.environment-introduction-smallpic {
  margin-top: 30px;
  margin-bottom: 50px; }
  .environment-introduction-smallpic .swiper-slide figure .pic {
    cursor: pointer; }
    .environment-introduction-smallpic .swiper-slide figure .pic:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: #fff;
      opacity: 0;
      transition: 0.3s; }
  .environment-introduction-smallpic .swiper-slide-thumb-active figure .pic:after {
    opacity: 0.75; }

.recruitment-information-txt {
  padding: 0 60px;
  margin-bottom: 40px;
  position: relative; }
  .recruitment-information-txt::before, .recruitment-information-txt::after {
    content: "";
    display: block;
    width: 24px;
    height: 16px;
    position: absolute; }
  .recruitment-information-txt::before {
    background: url(../images/icon_upper_quotation_marks.svg) no-repeat;
    left: 10px;
    top: 10px; }
  .recruitment-information-txt::after {
    background: url(../images/icon_quotation_marks.svg) no-repeat;
    right: 10px;
    top: 10px; }
  .recruitment-information-txt .t1 {
    font-size: 1.375rem;
    font-weight: bold;
    color: #222; }
  .recruitment-information-txt .t2 {
    margin-top: 20px;
    font-size: 1.125rem; }
  .recruitment-information-txt .red {
    color: var(--red); }

.recruitment-information-list {
  display: flex;
  flex-wrap: wrap; }

.recruitment-information-box {
  width: calc(100% / 4);
  background: #fff; }
  .recruitment-information-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 20px;
    border: 2px solid transparent; }
    .recruitment-information-box a:hover {
      border-color: #222; }
  .recruitment-information-box figure {
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    margin: auto; }
    .recruitment-information-box figure .pic {
      position: relative;
      padding-bottom: 100%;
      text-align: center;
      overflow: hidden;
      height: 0; }
      .recruitment-information-box figure .pic img {
        position: absolute;
        display: block;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .recruitment-information-box figure .pic iframe,
      .recruitment-information-box figure .pic object,
      .recruitment-information-box figure .pic embed {
        position: absolute;
        display: block;
        margin: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%; }
  .recruitment-information-box .title {
    color: #222222;
    font-weight: bold;
    margin-top: 25px;
    font-size: 1.25rem; }
  .recruitment-information-box:nth-child(1), .recruitment-information-box:nth-child(3), .recruitment-information-box:nth-child(6), .recruitment-information-box:nth-child(8), .recruitment-information-box:nth-child(9), .recruitment-information-box:nth-child(11), .recruitment-information-box:nth-child(14), .recruitment-information-box:nth-child(16) {
    background: url(../images/bg_gray_slash.jpg); }

.history-smallpic-block {
  position: relative; }
  .history-smallpic-block .swiper-button-prev {
    left: 0; }
    .history-smallpic-block .swiper-button-prev:after {
      transform: translateX(-1px); }
  .history-smallpic-block .swiper-button-next {
    right: 0; }
    .history-smallpic-block .swiper-button-next:after {
      transform: translateX(1px); }
  .history-smallpic-block .swiper-button-prev,
  .history-smallpic-block .swiper-button-next {
    transition: .3s;
    background: rgba(34, 34, 34, 0.75);
    width: 35px;
    height: 35px;
    border-radius: 100px;
    top: initial;
    bottom: 4px; }
    .history-smallpic-block .swiper-button-prev:after,
    .history-smallpic-block .swiper-button-next:after {
      color: #fff;
      font-size: 1rem; }
    .history-smallpic-block .swiper-button-prev:hover,
    .history-smallpic-block .swiper-button-next:hover {
      background: rgba(236, 108, 95, 0.75); }

.history-smallpic {
  margin: auto;
  padding: 0 35px 20px 35px;
  position: relative;
  margin: 0 40px; }
  .history-smallpic .year {
    color: #222222;
    padding-bottom: 25px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: .3s;
    line-height: 1; }
    .history-smallpic .year:after {
      content: "";
      display: block;
      width: 5px;
      height: 5px;
      background: #222222;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      bottom: -2px;
      transform: translateX(-50%);
      transition: .3s; }
  .history-smallpic .swiper-slide {
    width: auto;
    padding: 0 25px; }
  .history-smallpic:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: #eeeeee;
    position: absolute;
    left: 0;
    bottom: 20px; }
  .history-smallpic .swiper-slide-thumb-active .year {
    color: var(--red); }
    .history-smallpic .swiper-slide-thumb-active .year:after {
      background: var(--red); }

.history-bigpic {
  margin-top: 50px; }
  .history-bigpic .slide-year-title {
    font-size: 2.5rem;
    color: var(--red);
    font-weight: 300;
    font-family: "Poppins", "Open Sans", "微軟正黑體", sans-serif;
    line-height: 1; }
  .history-bigpic .slide-date-block {
    display: flex;
    align-items: flex-start;
    margin-top: 40px; }
  .history-bigpic .slide-date {
    font-weight: 300;
    color: var(--red);
    padding: 5px 17px;
    background: #faefee;
    border-radius: 50px;
    font-family: "Poppins", "Open Sans", "微軟正黑體", sans-serif;
    line-height: 1; }
  .history-bigpic .slide-article-unreset {
    padding-left: 30px;
    flex: 1; }

/*========== know mobile ==========*/
@media (max-width: 1280px) {
  .environment-introduction-box .content {
    padding: 35px 30px 30px 30px; }
  .environment-introduction-box:not(:last-child) {
    margin-bottom: 30px; }
  .recruitment-information-box a {
    padding: 50px 20px; } }

@media (max-width: 960px) {
  .environment-introduction-box .title {
    margin-top: 5px; }
  .environment-introduction-box .content {
    padding: 25px 20px 20px 20px; }
  .environment-introduction-box:not(:last-child) {
    margin-bottom: 30px; }
  .history-smallpic {
    padding: 0 0 20px 0; }
  .history-bigpic {
    margin-top: 30px; }
    .history-bigpic .slide-year-title {
      font-size: 1.875rem; }
    .history-bigpic .slide-date-block {
      margin-top: 20px; }
    .history-bigpic .slide-article-unreset {
      padding-left: 20px; } }

@media (max-width: 768px) {
  .recruitment-information-txt {
    padding: 0 50px;
    margin-bottom: 30px; }
  .recruitment-information-box {
    width: calc(100% / 3); }
    .recruitment-information-box:nth-child(1), .recruitment-information-box:nth-child(3), .recruitment-information-box:nth-child(5), .recruitment-information-box:nth-child(7), .recruitment-information-box:nth-child(9), .recruitment-information-box:nth-child(11), .recruitment-information-box:nth-child(13), .recruitment-information-box:nth-child(15) {
      background: url(../images/bg_gray_slash.jpg); }
    .recruitment-information-box:nth-child(2), .recruitment-information-box:nth-child(4), .recruitment-information-box:nth-child(6), .recruitment-information-box:nth-child(8), .recruitment-information-box:nth-child(10), .recruitment-information-box:nth-child(12), .recruitment-information-box:nth-child(14), .recruitment-information-box:nth-child(16) {
      background: #fff; }
    .recruitment-information-box .title {
      font-size: 1.125rem; } }

@media (max-width: 640px) {
  .deans-words-flex {
    flex-wrap: wrap; }
  .deans-words-left {
    width: 100%;
    margin-bottom: 20px; }
  .deans-words-right {
    padding-left: 0; }
  .environment-introduction-box figure {
    width: 100%; }
  .environment-introduction-box .content {
    width: 100%;
    position: static;
    padding: 20px; }
  .environment-introduction-box .title {
    font-size: 1.125rem; }
  .environment-introduction-box .txt {
    font-size: 1rem; }
  .environment-introduction-bigpic .swiper-button-prev,
  .environment-introduction-bigpic .swiper-button-next {
    width: 25px;
    height: 50px; }
    .environment-introduction-bigpic .swiper-button-prev::after,
    .environment-introduction-bigpic .swiper-button-next::after {
      font-size: 0.9375rem; }
  .environment-introduction-smallpic {
    margin: 20px 0 30px 0; }
  .recruitment-information-box {
    width: calc(100% / 2); }
    .recruitment-information-box a {
      padding: 35px 20px; }
    .recruitment-information-box .title {
      margin-top: 15px;
      font-size: 1rem; }
    .recruitment-information-box:nth-child(1), .recruitment-information-box:nth-child(4), .recruitment-information-box:nth-child(5), .recruitment-information-box:nth-child(8), .recruitment-information-box:nth-child(9), .recruitment-information-box:nth-child(12), .recruitment-information-box:nth-child(13), .recruitment-information-box:nth-child(16) {
      background: url(../images/bg_gray_slash.jpg); }
    .recruitment-information-box:nth-child(2), .recruitment-information-box:nth-child(3), .recruitment-information-box:nth-child(6), .recruitment-information-box:nth-child(7), .recruitment-information-box:nth-child(10), .recruitment-information-box:nth-child(11), .recruitment-information-box:nth-child(14), .recruitment-information-box:nth-child(15) {
      background: #fff; }
  .history-smallpic-block .swiper-button-prev,
  .history-smallpic-block .swiper-button-next {
    width: 30px;
    height: 30px; }
    .history-smallpic-block .swiper-button-prev::after,
    .history-smallpic-block .swiper-button-next::after {
      font-size: 0.9375rem; }
  .history-smallpic {
    padding: 20px 0; }
    .history-smallpic .swiper-slide {
      padding: 0 15px; } }

@media (max-width: 480px) {
  .recruitment-information-txt {
    padding: 0 25px; }
    .recruitment-information-txt::before, .recruitment-information-txt::after {
      width: 15px;
      height: 10px; }
    .recruitment-information-txt::before {
      left: 5px; }
    .recruitment-information-txt::after {
      right: 5px; }
  .environment-introduction-box .txt {
    font-weight: 400; }
  .recruitment-information-box a {
    padding: 25px 20px; }
  .history-bigpic {
    margin-top: 20px; }
    .history-bigpic .slide-date-block {
      flex-wrap: wrap; }
    .history-bigpic .slide-article-unreset {
      width: 100%;
      padding-left: 0;
      flex: auto;
      margin-top: 10px; } }

/*========= 醫學教育 education ==========*/
/*========== education mobile ==========*/
/*========= 知識媒體 knowledge ==========*/
.knowledge-media-box a {
  display: flex;
  align-items: center;
  padding: 10px 30px;
  gap: 10px 20px; }
  .knowledge-media-box a:hover .title {
    color: #608cb2; }
     .knowledge-media-box a:hover i.arrow{
      color: #608cb2;
     }
.knowledge-media-box .date {
  color: #fb7268;
  font-size: 0.9375rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  display: inline-flex; }

.knowledge-media-box .sort {
  font-size: 0.875rem;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 7px 15px;
  line-height: 1;
  display: inline-flex;
  background: #fff; }

.knowledge-media-box .title {
  font-weight: bold;
  font-size: 1.125rem;
  color: #333;
  transition: .3s;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  flex: 1; }
  .knowledge-media-box i.arrow{
    color: #222;
    padding-left: 10px;
    transition: .3s;
  }
.knowledge-media-box:nth-child(odd) {
  background: #f5f5f5; }

.health-education-channel-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 30px; }

.health-education-channel-box {
  width: calc((100% - 60px) / 2); }
  .health-education-channel-box a:hover .title {
    color: #608cb2; }
  .health-education-channel-box figure {
    margin: 0;
    padding: 0;
    position: relative; }
    .health-education-channel-box figure .pic {
      position: relative;
      padding-bottom: calc(220 / 470 * 100%);
      text-align: center;
      overflow: hidden;
      height: 0; }
      .health-education-channel-box figure .pic img {
        position: absolute;
        display: block;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .health-education-channel-box figure .pic iframe,
      .health-education-channel-box figure .pic object,
      .health-education-channel-box figure .pic embed {
        position: absolute;
        display: block;
        margin: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%; }
  .health-education-channel-box .title {
    font-weight: bold;
    font-size: 1.125rem;
    color: #333;
    transition: .3s;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: url(../images/bg_gray_slash.jpg);
    padding: 21px 25px; }
  .health-education-channel-box .txt {
    font-size: 1.0625rem;
    color: #333;
    padding: 0 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 20px;
    font-weight: 300; }
  .health-education-channel-box .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 0 25px; }
  .health-education-channel-box .sort {
    margin-top: 5px;
    font-size: 0.875rem;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 7px 15px;
    line-height: 1;
    display: inline-block; }
  .health-education-channel-box .date {
    margin-top: 5px;
    color: #fb7268;
    font-size: 0.9375rem;
    font-family: "Poppins", sans-serif;
    font-weight: 300; }

.medical-news-group-bigbox a {
  display: flex; }

.medical-news-group-bigbox figure {
  width: calc(580 / 1000 * 100%);
  margin: 0;
  padding: 0;
  position: relative; }
  .medical-news-group-bigbox figure .pic {
    position: relative;
    padding-bottom: calc(150 / 290 * 100%);
    text-align: center;
    overflow: hidden;
    height: 0; }
    .medical-news-group-bigbox figure .pic img {
      position: absolute;
      display: block;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .medical-news-group-bigbox figure .pic iframe,
    .medical-news-group-bigbox figure .pic object,
    .medical-news-group-bigbox figure .pic embed {
      position: absolute;
      display: block;
      margin: auto;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }

.medical-news-group-bigbox .content {
  flex: 1;
  background: url(../images/bg_gray_slash.jpg);
  padding: 40px 40px 40px 50px; }

.medical-news-group-bigbox .title {
  font-weight: bold;
  font-size: 1.3125rem;
  color: #333;
  margin-bottom: 10px;
  margin-top: 15px;
  transition: .3s;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }

.medical-news-group-bigbox .txt {
  font-size: 1.125rem;
  color: #333;
  padding-right: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 5px; }

.medical-news-group-bigbox .row {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.medical-news-group-bigbox .sort {
  margin-bottom: 5px;
  font-size: 0.875rem;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 7px 15px;
  line-height: 1;
  display: inline-block;
  background: #fff; }

.medical-news-group-bigbox .date {
  margin-bottom: 5px;
  color: #fb7268;
  font-size: 0.9375rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300; }

.medical-news-group-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 25px 0;
  gap: 10px 20px; }
  .medical-news-group-btn .btn-box a {
    color: #222222; }
    .medical-news-group-btn .btn-box a i {
      margin-right: 5px; }
    .medical-news-group-btn .btn-box a:hover {
      color: var(--green); }
  .medical-news-group-btn .search-box {
    width: 260px;
    position: relative; }
    .medical-news-group-btn .search-box input[type="text"] {
      width: 100%;
      display: block;
      border: 1px solid #dfdfdf;
      background: #fff;
      padding: 6px 45px 5px 15px;
      font-size: 1rem;
      color: #333;
      border-radius: 3px; }
    .medical-news-group-btn .search-box .search-btn {
      position: absolute;
      right: 0;
      top: 0;
      width: 50px;
      height: 36px; }
  .medical-news-group-btn button {
    background: none;
    border: none;
    cursor: pointer;
    appearance: none;
    font-size: 1rem;
    color: #333;
    display: block;
    width: 100%;
    height: 100%;
    transition: .3s; }
    .medical-news-group-btn button:hover {
      color: var(--green); }

.newsletter-subscription-form {
  width: 800px;
  max-width: 100%;
  margin: auto; }
  .newsletter-subscription-form .form-box {
    width: 100%;
    margin-bottom: 10px; }
    .newsletter-subscription-form .form-box .box-title {
      color: #333;
      font-size: 1.125rem; }
      .newsletter-subscription-form .form-box .box-title .must {
        color: var(--red);
        display: inline-block;
        margin-left: 5px; }
    .newsletter-subscription-form .form-box .box-content .input-box input[type="text"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="password"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="email"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="date"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="number"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="tel"] {
      background: none;
      border-radius: 0;
      border: none;
      appearance: none;
      width: 100%;
      border: none;
      padding: 8px 15px;
      background: #f7f7f7;
      color: #222;
      text-align: left;
      transition: 0.3s;
      font-size: 1rem; }
      .newsletter-subscription-form .form-box .box-content .input-box input[type="text"]::placeholder,
      .newsletter-subscription-form .form-box .box-content .input-box input[type="password"]::placeholder,
      .newsletter-subscription-form .form-box .box-content .input-box input[type="email"]::placeholder,
      .newsletter-subscription-form .form-box .box-content .input-box input[type="date"]::placeholder,
      .newsletter-subscription-form .form-box .box-content .input-box input[type="number"]::placeholder,
      .newsletter-subscription-form .form-box .box-content .input-box input[type="tel"]::placeholder {
        color: #bbb; }
    .newsletter-subscription-form .form-box .box-content .input-box select {
      background: none;
      appearance: none;
      border-radius: 0;
      border: none;
      width: 100%;
      border: none;
      border-bottom: 1px solid #666666;
      font-size: 1rem;
      background: #fff url(../images/select_arrow.svg) right 15px center no-repeat;
      background-size: 9px;
      padding: 8px 40px 8px 0;
      color: #222;
      text-align: left; }
    .newsletter-subscription-form .form-box .box-content .input-box input[type="date"]::-webkit-calendar-picker-indicator {
      color: transparent;
      background: none;
      z-index: 1; }
    .newsletter-subscription-form .form-box .box-content .input-box input[type="date"] {
      position: relative; }
      .newsletter-subscription-form .form-box .box-content .input-box input[type="date"]::before {
        display: block;
        content: "";
        background: url(../images/icon_date.svg) no-repeat right center;
        background-size: contain;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 12px;
        right: 20px; }
    .newsletter-subscription-form .form-box .box-content .input-box input[type="text"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="password"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="email"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="date"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="number"],
    .newsletter-subscription-form .form-box .box-content .input-box input[type="tel"],
    .newsletter-subscription-form .form-box .box-content .input-box select {
      height: 40px; }
    .newsletter-subscription-form .form-box .box-content .input-box textarea {
      background: none;
      border-radius: 0;
      border: none;
      width: 100%;
      border: none;
      padding: 15px;
      font-size: 1rem;
      background: #f7f7f7;
      color: #222;
      text-align: left; }
      .newsletter-subscription-form .form-box .box-content .input-box textarea::placeholder {
        color: #aaaaaa; }
    .newsletter-subscription-form .form-box .box-content .flex-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 5px 0; }
    .newsletter-subscription-form .form-box .box-content .txt {
      margin: 5px 0; }
    .newsletter-subscription-form .form-box .box-content .notice {
      padding-left: 10px;
      color: #999;
      font-size: 0.9375rem;
      display: inline-flex;
      align-items: center; }
    .newsletter-subscription-form .form-box .input-title {
      margin-right: 15px; }
    .newsletter-subscription-form .form-box .input-unit {
      margin-left: 15px; }
    .newsletter-subscription-form .form-box .part {
      display: inline-block; }
      .newsletter-subscription-form .form-box .part span {
        margin-left: 5px;
        display: inline-block; }
        .newsletter-subscription-form .form-box .part span b {
          font-weight: bold; }
      .newsletter-subscription-form .form-box .part:not(:last-child) {
        margin-right: 30px; }
    .newsletter-subscription-form .form-box.inline {
      display: flex;
      margin-top: -1px; }
      .newsletter-subscription-form .form-box.inline .box-title {
        width: 165px;
        padding: 3px 25px;
        border: 1px solid #e8e8e8;
        display: flex;
        align-items: center; }
      .newsletter-subscription-form .form-box.inline .box-content {
        width: calc(100% - 165px);
        padding: 3px 25px;
        border-left: none; }
    .newsletter-subscription-form .form-box.captcha {
      margin: 20px auto;
      display: flex;
      justify-content: center; }
  .newsletter-subscription-form .form-btn-list {
    display: flex;
    justify-content: center; }
    .newsletter-subscription-form .form-btn-list .form-btn {
      background: none;
      border: none;
      cursor: pointer;
      appearance: none;
      border-radius: 0;
      line-height: 1;
      color: #222;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.125rem;
      padding: 10px 30px;
      border: 1px solid #222;
      border-radius: 25px;
      text-align: center; }
      .newsletter-subscription-form .form-btn-list .form-btn:hover {
        background: #222;
        color: #fff; }
      .newsletter-subscription-form .form-btn-list .form-btn.right {
        margin-left: auto; }
      .newsletter-subscription-form .form-btn-list .form-btn:not(:last-child) {
        margin-right: 10px; }
  .newsletter-subscription-form .form-row-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .newsletter-subscription-form .form-row-group.captcha-btn {
      margin-top: 20px; }

/*========== knowledge mobile ==========*/
@media (max-width: 1366px) {
  .medical-news-group-bigbox figure {
    width: 50%; }
  .medical-news-group-bigbox .content {
    padding: 30px 30px 30px 40px; }
  .medical-news-group-bigbox .txt {
    padding-right: 0; } }

@media (max-width: 1280px) {
  .health-education-channel-list {
    gap: 30px 20px; }
  .health-education-channel-box {
    width: calc((100% - 40px) / 2); }
  .medical-news-group-bigbox .content {
    padding: 20px 20px 20px 30px; }
  .medical-news-group-bigbox .title {
    font-size: 1.125rem;
    margin-bottom: 5px;
    margin-top: 10px; }
  .medical-news-group-bigbox .txt {
    font-size: 1.0625rem; } }

@media (max-width: 960px) {
  .knowledge-media-box a {
    padding: 10px 20px;
    gap: 10px 15px; }
  .knowledge-media-box .sort {
    padding: 7px 10px; }
  .knowledge-media-box .title {
    font-size: 1.0625rem; }
  .health-education-channel-list {
    gap: 20px 15px; }
  .health-education-channel-box {
    width: calc((100% - 30px) / 2); }
    .health-education-channel-box .title {
      font-size: 1.0625rem;
      padding: 15px 20px; }
    .health-education-channel-box .txt {
      padding: 0 20px; }
    .health-education-channel-box .row {
      padding: 0 20px; }
    .health-education-channel-box .sort {
      padding: 7px 10px; } }

@media (max-width: 640px) {
  .health-education-channel-list {
    gap: 20px 10px; }
  .health-education-channel-box {
    width: calc((100% - 20px) / 2); }
    .health-education-channel-box .title {
      font-size: 1rem;
      padding: 12px 10px; }
    .health-education-channel-box .txt {
      padding: 0 10px;
      margin-top: 10px; }
    .health-education-channel-box .row {
      padding: 0 10px;
      margin-top: 5px; }
  .medical-news-group-bigbox a {
    flex-wrap: wrap; }
  .medical-news-group-bigbox figure {
    width: 100%; }
  .medical-news-group-bigbox .content {
    padding: 20px; }
  .medical-news-group-bigbox .title {
    font-size: 1rem; }
  .medical-news-group-bigbox .sort {
    padding: 7px 10px;
    font-size: 0.9375rem; } }

@media (max-width: 480px) {
  .knowledge-media-box a {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 5px 10px; }
  .knowledge-media-box .title {
    width: 100%;
    flex: 100%; }
  .knowledge-media-box i.arrow{
    display: none;
  }
  .health-education-channel-box .txt {
    font-weight: 400; }
  .medical-news-group-bigbox .txt {
    font-weight: 400; }
  .medical-news-group-btn {
    margin: 20px 0; } 
  }

@media (max-width: 375px) {
  .health-education-channel-list {
    gap: 20px 0; }
  .health-education-channel-box {
    width: 100%; } }

/*========= 支持和信 support ==========*/
/*=========募款專案、募款成果 ==========*/
.fundraising-project-list.bggray .fundraising-project-box .group {
  background: #f8f8f8;
  border: none; }
  .fundraising-project-list.bggray .fundraising-project-box .group:hover .title {
    color: #608cb2; }

.fundraising-project-list.bggray .fundraising-project-box .sort span {
  background: #fff;
  border: 1px solid #cccccc; }

.fundraising-project-box:not(:last-child) {
  margin-bottom: 25px; }

.fundraising-project-box .group {
  display: flex;
  padding: 15px 80px 15px 15px;
  border: 2px solid #ececec; }
  .fundraising-project-box .group:hover {
    border-color: #222; }

.fundraising-project-box figure {
  width: 250px;
  margin: 0; }
  .fundraising-project-box figure .pic {
    position: relative;
    padding-bottom: calc(130 / 250 * 100%);
    text-align: center;
    overflow: hidden;
    height: 0; }
    .fundraising-project-box figure .pic img {
      position: absolute;
      display: block;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .fundraising-project-box figure .pic iframe,
    .fundraising-project-box figure .pic object,
    .fundraising-project-box figure .pic embed {
      position: absolute;
      display: block;
      margin: auto;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }

.fundraising-project-box .content {
  width: calc(100% - 250px);
  padding-left: 40px; }

.fundraising-project-box .title {
  color: #222;
  font-weight: bold;
  font-size: 1.125rem;
  transition: .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.fundraising-project-box .txt {
  color: #555;
  font-size: 1.0625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 5px; }

.fundraising-project-box .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  .fundraising-project-box .info > div:not(:last-child) {
    margin-right: 20px; }

.fundraising-project-box .sort {
  margin-top: 10px; }
  .fundraising-project-box .sort span {
    display: inline-block;
    background: #f5f5f5;
    color: #222;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.875rem; }
    .fundraising-project-box .sort span:not(:last-child) {
      margin-right: 10px; }

.fundraising-project-box .date {
  margin-top: 10px;
  display: inline-flex;
  color: var(--red);
  font-size: 0.9375rem; }
  .fundraising-project-box .date .t {
    display: inline-block;
    color: #222;
    font-size: 0.875rem;
    margin-right: 5px;
    align-self: flex-end; }

.fundraising-project-detail-table table .items {
  width: 25%; }

.fundraising-project-detail-table table .price {
  width: 25%; }

.fundraising-project-detail-table table .directions {
  width: 50%; }

.fundraising-results-logo {
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0; }
  .fundraising-results-logo .box {
    width: 25%;
    position: relative;
    padding: 0 20px; }
    .fundraising-results-logo .box figure {
      filter: grayscale(100%);
      transition: .3s;
      margin: 0;
      width: 100%; }
      .fundraising-results-logo .box figure .pic {
        position: relative;
        padding-bottom: 23.80952%;
        text-align: center;
        overflow: hidden;
        height: 0; }
        .fundraising-results-logo .box figure .pic img {
          position: absolute;
          display: block;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; }
        .fundraising-results-logo .box figure .pic iframe,
        .fundraising-results-logo .box figure .pic object,
        .fundraising-results-logo .box figure .pic embed {
          position: absolute;
          display: block;
          margin: auto;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 100%; }
        .fundraising-results-logo .box figure .pic img {
          object-fit: contain; }
    .fundraising-results-logo .box:hover figure {
      filter: grayscale(0); }
    .fundraising-results-logo .box:after {
      content: "";
      display: block;
      width: 1px;
      height: 80%;
      background: #eee;
      position: absolute;
      right: -1px;
      top: 50%;
      transform: translateY(-50%); }
  .fundraising-results-logo .swiper-button-next:after,
  .fundraising-results-logo .swiper-button-prev:after {
    font-size: 1.375rem;
    transition: .3s;
    color: var(--green); }
  .fundraising-results-logo .swiper-button-next:hover:after,
  .fundraising-results-logo .swiper-button-prev:hover:after {
    color: var(--main); }
  .fundraising-results-logo .swiper-button-prev,
  .fundraising-results-logo .swiper-rtl .swiper-button-next {
    left: -8px; }
  .fundraising-results-logo .swiper-button-next,
  .fundraising-results-logo .swiper-rtl .swiper-button-prev {
    right: -8px; }

/*========= 捐款方式 ==========*/
.donate-online-txt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px; }
  .donate-online-txt .txt {
    padding-right: 20px; }

.donate-online-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px; }

.donate-online-box {
  width: calc(100% / 3);
  padding: 20px; }
  .donate-online-box .group {
    display: block;
    padding: 35px; 
    border:2px solid transparent;
    border-bottom: none;
    transition: none;
  }
    /* .donate-online-box .group:hover {
      box-shadow: 0 0 0 2px #222; } */
    .donate-online-box:hover .group {
      /* box-shadow: 0 0 0 2px #222;  */
      /* border: 2px solid #222; */
      border-color: #222;
      /* border-bottom: none; */
      
    }
    .donate-online-box:hover .go_donate{
      border-color: #222;
      transition: none;
    }
  .donate-online-box .title {
    font-size: 1.375rem;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Noto Serif TC", "Open Sans", "微軟正黑體", sans-serif;
    font-weight: 500; }
  .donate-online-box .txt {
    font-size: 1rem;
    color: #555;
    margin-top: 12px;
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    height: 130px; }
  .donate-online-box figure {
    margin: 0; }
    .donate-online-box figure .pic {
      position: relative;
      padding-bottom: calc(215 / 222 * 100%);
      text-align: center;
      overflow: hidden;
      height: 0; }
      .donate-online-box figure .pic img {
        position: absolute;
        display: block;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .donate-online-box figure .pic iframe,
      .donate-online-box figure .pic object,
      .donate-online-box figure .pic embed {
        position: absolute;
        display: block;
        margin: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%; }
  .donate-online-box:nth-child(6n+1) .group {
    background: #f4eeee; }
  .donate-online-box:nth-child(6n+2) .group {
    background: #eeeff4; }
  .donate-online-box:nth-child(6n+3) .group {
    background: #f4f2ee; }
  .donate-online-box:nth-child(6n+4) .group {
    background: #eef4ef; }
  .donate-online-box:nth-child(6n+5) .group {
    background: #eef3f4; }
  .donate-online-box:nth-child(6n+6) .group {
    background: #f2eef4; }

/*========= 志工招募 ==========*/
.volunteer-recruit-txt {
  text-align: center;
  padding: 0 60px;
  margin-bottom: 40px;
  position: relative; }
  .volunteer-recruit-txt::before, .volunteer-recruit-txt::after {
    content: "";
    display: block;
    width: 24px;
    height: 16px;
    position: absolute; }
  .volunteer-recruit-txt::before {
    background: url(../images/icon_upper_quotation_marks.svg) no-repeat;
    left: 10px;
    top: 10px; }
  .volunteer-recruit-txt::after {
    background: url(../images/icon_quotation_marks.svg) no-repeat;
    right: 10px;
    top: 10px; }
  .volunteer-recruit-txt .t1 {
    font-size: 1.375rem;
    font-weight: bold;
    color: #222; }
  .volunteer-recruit-txt .t2 {
    margin-top: 20px;
    font-size: 1.125rem; }
  .volunteer-recruit-txt .red {
    color: var(--red); }

.volunteer-recruit-box .group {
  display: block;
  background: url(../images/bg_gray_slash.jpg);
  padding: 30px 50px; }
  .volunteer-recruit-box .group:hover {
    background: #fff;
    box-shadow: 0 0 0 2px #222 inset; }

.volunteer-recruit-box .title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #222; }

.volunteer-recruit-box .txt {
  font-size: 1.0625rem;
  color: #555; }

.volunteer-recruit-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 10px; }
  .volunteer-recruit-box ul > li {
    list-style: none;
    margin: 0;
    padding: 0; }
  .volunteer-recruit-box ul li {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.0625rem; }
  .volunteer-recruit-box ul .t1 {
    font-weight: bold;
    color: #425a95; }
  .volunteer-recruit-box ul .t2 {
    color: #555; }

.volunteer-recruit-box .date {
  font-size: 0.9375rem;
  margin-top: 10px;
  color: var(--red);
  font-weight: lighter; }

.volunteer-recruit-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 10px; }
  .volunteer-recruit-info ul > li {
    list-style: none;
    margin: 0;
    padding: 0; }
  .volunteer-recruit-info ul li {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.125rem; }
    .volunteer-recruit-info ul li:not(:last-child) {
      margin-bottom: 2px; }
  .volunteer-recruit-info ul .t1 {
    font-weight: bold;
    color: #425a95; }
  .volunteer-recruit-info ul .t2 {
    color: #555; }

/*========= 捐款芳名錄 ==========*/
.donate-results-list-table table .source {
  width: 18%; }
.donate-results-list-table table .name {
  width: 18%; }

.donate-results-list-table table .items {
  width: 46%; }

.donate-results-list-table table .price {
  width: 18%; }

/*========= 捐款步驟 ==========*/
.donate-step-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px; }
  .donate-step-block .donate-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 70px;
    text-align: center;
    font-size: 1.125rem;
    border: 1px solid #ddd;
    border-radius: 50px;
    color: #555; }
    .donate-step-block .donate-step.active {
      font-weight: bold;
      border-color: #222;
      color: #222; }
  .donate-step-block .arrow {
    width: 12px;
    height: 12px;
    background: url(../images/donate_arrow.svg) no-repeat; }

.donate-form .form-title {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: bold;
  background: #666;
  padding: 9px 30px; }
  .donate-form .form-title .number {
    display: inline-block;
    color: #ffd6d2;
    margin-left: 10px;
    font-weight: 300; }

.donate-form .form-info {
  color: #333;
  font-size: 1.0625rem;
  border: 1px solid #e8e8e8;
  padding: 20px 30px; }
  .donate-form .form-info .info-title {
    font-weight: bold;
    margin-bottom: 10px; }
  .donate-form .form-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 55px;
    row-gap: 5px;
    font-size: 1.1875rem; }
    .donate-form .form-info ul > li {
      list-style: none;
      margin: 0;
      padding: 0; }
    .donate-form .form-info ul li {
      width: 100%; }
      .donate-form .form-info ul li .red {
        color: var(--red); }

.donate-form form {
  display: flex;
  flex-wrap: wrap; }

.donate-form .form-box {
  width: 100%;
  font-size: 1.0625rem; }
  .donate-form .form-box .box-title {
    font-weight: bold;
    color: #333;
    background: #f2f2f2;
    width: 100%;
    padding: 9px 30px; }
    .donate-form .form-box .box-title .must {
      color: var(--red);
      display: inline-block;
      font-weight: normal; }
  .donate-form .form-box .box-content {
    width: 100%;
    border: 1px solid #e8e8e8;
    padding: 11px 30px; }
    .donate-form .form-box .box-content .input-box input[type="text"],
    .donate-form .form-box .box-content .input-box input[type="password"],
    .donate-form .form-box .box-content .input-box input[type="email"],
    .donate-form .form-box .box-content .input-box input[type="date"],
    .donate-form .form-box .box-content .input-box input[type="number"],
    .donate-form .form-box .box-content .input-box input[type="tel"] {
      background: none;
      border-radius: 0;
      border: none;
      appearance: none;
      width: 100%;
      border: none;
      padding: 8px 0;
      background: #fff;
      color: #222;
      text-align: left;
      transition: 0.3s;
      border-bottom: 1px solid #666666;
      font-size: 1.0625rem; }
      .donate-form .form-box .box-content .input-box input[type="text"]::placeholder,
      .donate-form .form-box .box-content .input-box input[type="password"]::placeholder,
      .donate-form .form-box .box-content .input-box input[type="email"]::placeholder,
      .donate-form .form-box .box-content .input-box input[type="date"]::placeholder,
      .donate-form .form-box .box-content .input-box input[type="number"]::placeholder,
      .donate-form .form-box .box-content .input-box input[type="tel"]::placeholder {
        color: #e0e0e0; }
    .donate-form .form-box .box-content .input-box select {
      background: none;
      appearance: none;
      border-radius: 0;
      border: none;
      width: 100%;
      border: none;
      border-bottom: 1px solid #666666;
      font-size: 1.0625rem;
      background: #fff url(../images/select_arrow.svg) right 15px center no-repeat;
      background-size: 9px;
      padding: 8px 40px 8px 0;
      color: #222;
      text-align: left; }
    .donate-form .form-box .box-content .input-box input[type="text"],
    .donate-form .form-box .box-content .input-box input[type="password"],
    .donate-form .form-box .box-content .input-box input[type="email"],
    .donate-form .form-box .box-content .input-box input[type="date"],
    .donate-form .form-box .box-content .input-box input[type="number"],
    .donate-form .form-box .box-content .input-box input[type="tel"],
    .donate-form .form-box .box-content .input-box select {
      height: 40px; }
    .donate-form .form-box .box-content .input-box textarea {
      background: none;
      border-radius: 0;
      border: none;
      width: 100%;
      border: none;
      border-bottom: 1px solid #666666;
      padding: 8px 0;
      font-size: 1.0625rem;
      background: #fff;
      color: #222;
      text-align: left; }
      .donate-form .form-box .box-content .input-box textarea::placeholder {
        color: #e0e0e0; }
    .donate-form .form-box .box-content .input-box.mid {
      width: 270px; }
    .donate-form .form-box .box-content .input-box.long {
      width: 360px; }
    .donate-form .form-box .box-content .input-box.row {
      width: 100%; }
    .donate-form .form-box .box-content .flex-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 5px 0; }
    .donate-form .form-box .box-content .txt {
      margin: 5px 0; }
    .donate-form .form-box .box-content .notice {
      padding-left: 10px;
      color: #999;
      font-size: 0.9375rem;
      display: inline-flex;
      align-items: center; }
    .donate-form .form-box .box-content .notice-regular{
      color: var(--red);
      font-size: 0.9375rem;
      display: block;
      font-weight: bold;
      align-items: center;
      margin-top: 10px;
      display: none;
    }
  .donate-form .form-box .input-title {
    margin-right: 15px; }
  .donate-form .form-box .input-unit {
    margin-left: 15px; }
  .donate-form .form-box .part {
    display: inline-block; }
    .donate-form .form-box .part span {
      margin-left: 5px;
      display: inline-block; }
      .donate-form .form-box .part span b {
        font-weight: bold; }
    .donate-form .form-box .part:not(:last-child) {
      margin-right: 30px; }
  .donate-form .form-box .radiobox,
  .donate-form .form-box .checkbox {
    font-size: 1.0625rem;
    margin-top: 5px;
    margin-bottom: 5px; }
  .donate-form .form-box .radiobox {
    color: #222; }
    .donate-form .form-box .radiobox input[type="radio"] {
      opacity: 0;
      display: none; }
      .donate-form .form-box .radiobox input[type="radio"] + label {
        position: relative;
        cursor: pointer;
        padding-left: 20px; }
        .donate-form .form-box .radiobox input[type="radio"] + label:before {
          content: "";
          display: block;
          width: 16px;
          height: 16px;
          background: #fff;
          border: 2px solid #222;
          position: absolute;
          left: 0;
          top: 50%;
          border-radius: 50%;
          transform: translateY(-50%); }
        .donate-form .form-box .radiobox input[type="radio"] + label:after {
          content: "";
          width: 0;
          height: 0;
          background-color: transparent;
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translate(-50%, -50%);
          border-radius: 50%; }
      .donate-form .form-box .radiobox input[type="radio"]:checked + label:after {
        width: 8px;
        height: 8px;
        background-color: var(--green); }
  .donate-form .form-box .checkbox {
    color: #222; }
    .donate-form .form-box .checkbox input[type="checkbox"] {
      opacity: 0;
      display: none; }
      .donate-form .form-box .checkbox input[type="checkbox"] + label {
        position: relative;
        cursor: pointer;
        padding-left: 20px;
        display: block; }
        .donate-form .form-box .checkbox input[type="checkbox"] + label:before {
          content: "";
          display: block;
          width: 15px;
          height: 15px;
          background: #fff;
          border: 2px solid #222;
          position: absolute;
          left: 0;
          top: 12px;
          border-radius: 3px;
          transform: translateY(-50%); }
        .donate-form .form-box .checkbox input[type="checkbox"] + label:after {
          content: "\f00c";
          display: block;
          font-weight: bold;
          font-family: "Font Awesome 5 Free";
          position: absolute;
          left: 3px;
          top: 0px;
          color: var(--green);
          font-size: 0.9375rem;
          opacity: 0; }
      .donate-form .form-box .checkbox input[type="checkbox"]:checked + label:after {
        opacity: 1; }
    .donate-form .form-box .checkbox a {
      color: #222;
      text-decoration: underline;
      font-weight: bold;
      display: inline-block;
      margin: 0 2px; }
      .donate-form .form-box .checkbox a:hover {
        color: var(--main); }
  .donate-form .form-box.inline {
    display: flex;
    margin-top: -1px; }
    .donate-form .form-box.inline .box-title {
      width: 165px;
      padding: 3px 25px;
      border: 1px solid #e8e8e8;
      display: flex;
      align-items: center; }
    .donate-form .form-box.inline .box-content {
      width: calc(100% - 165px);
      padding: 3px 25px;
      border-left: none; }
  .donate-form .form-box.address .county {
    width: 120px;
    margin-right: 25px; }
  .donate-form .form-box.address .district {
    width: 120px;
    margin-right: 25px; }
  .donate-form .form-box.address .address-select {
    display: flex; }
    .donate-form .form-box.address .address-select > div {
      display: flex;
      margin-bottom: 5px; }
  .donate-form .form-box.address .address-txt {
    width: calc(100% - 240px - 50px);
    margin-bottom: 5px; }
  .donate-form .form-box.id-number .box-content, .donate-form .form-box.contact-phone .box-content, .donate-form .form-box.age .box-content, .donate-form .form-box.donation-unit .box-content {
    display: flex; }
  .donate-form .form-box.donor-unit {
    width: calc(100% - 350px); }
    .donate-form .form-box.donor-unit .box-content {
      border-left: none;
      min-height: 64px; }
  .donate-form .form-box.same-donor {
    background: var(--aside-layer2-bg); }

.donate-form .form-btn-list {
  width: 100%;
  margin-top: 30px;
  display: flex; }
  .donate-form .form-btn-list .form-btn {
    line-height: 1;
    color: #222;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    padding: 13px 40px;
    border: 2px solid #222;
    text-align: center;
    height: 50px; }
    .donate-form .form-btn-list .form-btn:hover {
      background: #222;
      color: #fff; }
    .donate-form .form-btn-list .form-btn.right {
      margin-left: auto; }

.donate-form .receipt-block,
.donate-form .receipt-block2 {
  width: 100%; }



.donate-online-box:nth-child(6n+1) .go_donate {
    background: #f4eeee; }
  .donate-online-box:nth-child(6n+2) .go_donate {
    background: #eeeff4; }
  .donate-online-box:nth-child(6n+3) .go_donate {
    background: #f4f2ee; }
  .donate-online-box:nth-child(6n+4) .go_donate {
    background: #eef4ef; }
  .donate-online-box:nth-child(6n+5) .go_donate {
    background: #eef3f4; }
  .donate-online-box:nth-child(6n+6) .go_donate {
    background: #f2eef4; 
  }
.donate-online-box .go_donate {
  padding: 10px;
  padding-top: 0;
  border:2px solid transparent;
  border-top: none;
}
.donate-online-box .go_donate a{
  background: #0f4c81;
  display: block;
  text-align: center;
  padding: 12px 10px;
  color: #fff;
  /* margin-top: 20px; */
  font-size: 18px;
}
  .donate-online-box .go_donate i {
    margin-left: 5px; }
  .donate-online-box .go_donate a:hover {
    background: #333; }

.donate-form .form-box.donate-price .radiobox input[type="radio"] + label,
.donate-form .form-box.donate-period .radiobox input[type="radio"] + label {
  padding: 0; }

.donate-form .form-box.donate-price .radiobox input[type="radio"] + label, .donate-form .form-box.donate-period .radiobox input[type="radio"] + label {
  padding: 0; }
  .donate-form .form-box.donate-price .radiobox input[type="radio"] + label::before, .donate-form .form-box.donate-price .radiobox input[type="radio"] + label::after, .donate-form .form-box.donate-period .radiobox input[type="radio"] + label::before, .donate-form .form-box.donate-period .radiobox input[type="radio"] + label::after {
    display: none; }
  .donate-form .form-box.donate-price .radiobox input[type="radio"] + label span, .donate-form .form-box.donate-period .radiobox input[type="radio"] + label span {
    background: #8fb6d3;
    color: #fff; }

.donate-form .form-box.donate-price .radiobox input[type="radio"]:checked + label span, .donate-form .form-box.donate-period .radiobox input[type="radio"]:checked + label span {
  background: #0f4c81;
  color: #fff; }

.donate-form .form-box.donate-price .part span, .donate-form .form-box.donate-period .part span {
  display: block;
  padding: 5px;
  width: 90px;
  text-align: center;
  background: #e4ebf1;
  color: #0f4c81;
  margin: 0; }

.donate-form .form-box.donate-price .part:not(:last-child), .donate-form .form-box.donate-period .part:not(:last-child) {
  margin-right: 10px; }

.donate-form .form-box.donate-period .flex-row .mid {
  display: flex;
  align-items: baseline; }

.donate-form .form-box.donate-period .box-content .input-box select {
  width: 100px;
  text-align: center; }

.donate-form .red {
  color: var(--red); }

.donate-fixed-icon {
  position: fixed;
  right: 10px;
  bottom: 20%; }
  .donate-fixed-icon a {
    background: #0f4c81;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 14px;
    width: 65px;
    height: 60px;
    border-radius: 5px;
    padding: 8px 0; }
    .donate-fixed-icon a i {
      display: block;
      margin-bottom: 5px;
      font-size: 20px; }
    .donate-fixed-icon a:hover {
      background: #333; }

/*========== support mobile ==========*/
@media (max-width: 1280px) {
  .fundraising-project-box .content {
    padding-left: 30px; }
  .donate-online-box {
    padding: 10px; }
    .donate-online-box .group {
      padding: 20px; }
  .donate-step-block .donate-step {
    width: 200px;
    height: 60px; } }

@media (max-width: 960px) {
  .volunteer-recruit-box .group {
    padding: 20px 40px; }
  .donate-form .form-box.donation-unit {
    width: 100%; }
  .donate-form .form-box.donor-unit {
    width: 100%;
    min-height: initial; }
  .donate-form .form-box.id-number .box-content, .donate-form .form-box.contact-phone .box-content, .donate-form .form-box.age .box-content, .donate-form .form-box.donation-unit .box-content {
    flex-wrap: wrap; }
    .donate-form .form-box.id-number .box-content .notice, .donate-form .form-box.contact-phone .box-content .notice, .donate-form .form-box.age .box-content .notice, .donate-form .form-box.donation-unit .box-content .notice {
      padding-left: 0;
      padding-top: 10px; } }

@media (max-width: 768px) {
  .volunteer-recruit-txt {
    padding: 0 50px;
    margin-bottom: 30px; }
  .donate-online-txt {
    flex-wrap: wrap;
    padding-right: 0; }
  .donate-online-box {
    width: 50%; }
    .donate-online-box.empty {
      display: none; }
  .donate-step-block {
    margin-bottom: 20px;
    gap: 10px; }
    .donate-step-block .donate-step {
      width: 140px;
      height: 60px;
      font-size: 1rem; }
      .donate-step-block .donate-step span {
        width: 100%;
        margin-top: -10px;
        display: block; }
  .donate-form .form-title {
    padding: 9px 20px; }
  .donate-form .form-box {
    font-size: 1rem; }
    .donate-form .form-box .box-title {
      padding: 9px 20px; }
    .donate-form .form-box .box-content {
      padding: 11px 20px; }
      .donate-form .form-box .box-content .input-box input[type="text"],
      .donate-form .form-box .box-content .input-box input[type="password"],
      .donate-form .form-box .box-content .input-box input[type="email"],
      .donate-form .form-box .box-content .input-box input[type="date"],
      .donate-form .form-box .box-content .input-box input[type="number"],
      .donate-form .form-box .box-content .input-box input[type="tel"],
      .donate-form .form-box .box-content .input-box select,
      .donate-form .form-box .box-content .input-box textarea {
        font-size: 1rem; }
    .donate-form .form-box .radiobox,
    .donate-form .form-box .checkbox {
      font-size: 1rem; } }

@media (max-width: 640px) {
  .volunteer-recruit-txt .t1 {
    font-size: 1.25rem; }
  .volunteer-recruit-txt .t2 {
    font-size: 1rem; }
  .volunteer-recruit-box .group {
    padding: 15px 20px; }
  .volunteer-recruit-info ul li {
    font-size: 1.0625rem; }
  .fundraising-project-box .group {
    padding: 10px; }
  .fundraising-project-box figure {
    width: 160px; }
  .fundraising-project-box .content {
    width: calc(100% - 160px);
    padding-left: 15px; }
  .fundraising-results-detail-table table {
    border: none;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8; }
    .fundraising-results-detail-table table .items {
      width: 100%; }
    .fundraising-results-detail-table table .price {
      width: 100%; }
    .fundraising-results-detail-table table .directions {
      width: 100%; }
    .fundraising-results-detail-table table thead td:not(:last-child) {
      border: none; }
    .fundraising-results-detail-table table thead .items {
      display: block;
      text-align: center; }
    .fundraising-results-detail-table table thead .price {
      display: none; }
    .fundraising-results-detail-table table thead .directions {
      display: none; }
    .fundraising-results-detail-table table tbody tr {
      display: block; }
    .fundraising-results-detail-table table tbody td {
      display: flex;
      align-items: baseline;
      width: 100%; }
      .fundraising-results-detail-table table tbody td::before {
        display: block; }
      .fundraising-results-detail-table table tbody td p {
        width: calc(100% - 70px); }
    .fundraising-results-detail-table table .right {
      text-align: left; }
  .donate-results-list-table table {
    border-bottom: none; }
    .donate-results-list-table table .source {
      width: 100%; }
    .donate-results-list-table table .name {
      width: 100%; }
    .donate-results-list-table table .items {
      width: 100%; }
    .donate-results-list-table table .price {
      width: 100%; }
    .donate-results-list-table table thead {
      display: none; }
    .donate-results-list-table table tbody tr {
      display: block; }
    .donate-results-list-table table tbody td {
      display: flex;
      align-items: baseline;
      width: 100%; }
      .donate-results-list-table table tbody td::before {
        display: block; }
      .donate-results-list-table table tbody td p {
        width: calc(100% - 70px); }
    .donate-results-list-table table .center {
      text-align: left; }
  .donate-online-box {
    padding: 8px; }
    .donate-online-box .group {
      padding: 12px; }
    .donate-online-box .title {
      font-size: 1.25rem; }
    .donate-online-box .txt {
      margin-top: 8px; }
  .donate-step-block {
    gap: 5px; }
    .donate-step-block .donate-step {
      width: 100px; }
      .donate-step-block .donate-step span {
        width: 100%; }
  .donate-form .form-title {
    padding: 9px 15px; }
  .donate-form .form-info ul li {
    font-size: 1.0625rem; }
  .donate-form .form-box .box-title {
    padding: 9px 15px; }
  .donate-form .form-box .box-content {
    padding: 11px 15px; }
    .donate-form .form-box .box-content .input-box.mid {
      width: 100%; }
    .donate-form .form-box .box-content .input-box.long {
      width: 100%; }
    .donate-form .form-box .box-content .flex-row {
      width: 100%; }
  .donate-form .form-box .input-title {
    width: 100%; }
  .donate-form .form-box .part:not(:last-child) {
    margin-right: 20px; }
  .donate-form .form-box.donate-price {
    flex-wrap: wrap; }
    .donate-form .form-box.donate-price .box-content .input-box {
      width: calc(100% - 60px); }
    .donate-form .form-box.donate-price .box-content .input-unit {
      width: 40px; }
  .donate-form .form-box.inline {
    flex-wrap: wrap;
    border: 1px solid #e8e8e8;
    border-top: none;
    margin-top: 0; }
    .donate-form .form-box.inline .box-title {
      width: 100%;
      border: none;
      padding: 6px 15px; }
    .donate-form .form-box.inline .box-content {
      width: 100%;
      border: none;
      padding: 6px 15px; }
  .donate-form .form-btn-list {
    margin-top: 20px; }
    .donate-form .form-btn-list .form-btn {
      padding: 5px 15px;
      font-size: 1rem;
      height: 40px; } }

@media (max-width: 480px) {
  .volunteer-recruit-txt {
    padding: 0 25px; }
    .volunteer-recruit-txt::before, .volunteer-recruit-txt::after {
      width: 15px;
      height: 10px; }
    .volunteer-recruit-txt::before {
      left: 5px; }
    .volunteer-recruit-txt::after {
      right: 5px; }
    .volunteer-recruit-txt .t1 {
      font-size: 1.125rem; }
  .fundraising-project-box .group {
    padding: 10px;
    flex-wrap: wrap;
    width: 300px;
    max-width: 100%;
    margin: auto; }
  .fundraising-project-box figure {
    width: 100%; }
  .fundraising-project-box .content {
    width: 100%;
    padding-left: 0; }
  .donate-online-box {
    width: 100%;
    padding: 10px 0; }
    .donate-online-box .group {
      padding: 25px; }
    .donate-online-box .title {
      font-size: 1.375rem; }
    .donate-online-box:nth-child(6n+2) {
      margin-top: 0; }
    .donate-online-box:nth-child(6n+5) {
      margin-top: 0; }
  .donate-step-block {
    width: 114%;
    margin-left: -7%; }
    .donate-step-block .donate-step {
      font-size: 0.875rem;
      height: 50px; }
      .donate-step-block .donate-step span {
        margin-top: -12px; }
  .donate-form .form-box .part {
    display: block;
    width: 100%; }
    .donate-form .form-box .part:not(:last-child) {
      margin-right: 0; }
  .donate-form .form-box.address .county {
    margin-right: 10px; }
  .donate-form .form-box.address .district {
    margin-right: 10px; } }

/*========= 健康共好 health ==========*/
.good-health-block:not(:last-child) {
  margin-bottom: 50px; }

.good-health-block.good-health-unreset.bg {
  background: #f5f5f5;
  padding: 30px 20px; }

.healthy-guandu-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px 50px; }

.healthy-guandu-box {
  width: calc((100% - 100px) /3); }
  .healthy-guandu-box figure {
    margin: 0; }
    .healthy-guandu-box figure .pic img {
      display: block;
      max-width: 100%; }
  .healthy-guandu-box .content {
    padding: 15px 10px 0 10px; }
    .healthy-guandu-box .content .title {
      font-weight: bold;
      font-size: 1.25rem; }
    .healthy-guandu-box .content .txt {
      color: #666;
      margin-top: 5px; }

.healthy-news-swiper {
  overflow: hidden; }
  .healthy-news-swiper .swiper-pagination {
    position: static;
    width: 100% !important;
    transform: none !important;
    margin-top: 50px; }
  .healthy-news-swiper .swiper-pagination-bullet-active {
    background: #292c33; }

.album-box a:hover figure .title {
  background: rgba(15, 76, 129, 0.85); }

.album-box figure {
  margin: 0;
  position: relative;
  border: 1px solid #ddd;
  padding: 10px; }
  .album-box figure .pic {
    position: relative;
    padding-bottom: 60%;
    text-align: center;
    overflow: hidden;
    height: 0; }
    .album-box figure .pic img {
      position: absolute;
      display: block;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .album-box figure .pic iframe,
    .album-box figure .pic object,
    .album-box figure .pic embed {
      position: absolute;
      display: block;
      margin: auto;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }
  .album-box figure .title {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    padding: 10px 15px;
    width: 100%;
    color: #fff;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: .3s;
    text-align: left; }

.healthy-taitung-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px 50px; }

.healthy-taitung-box {
  width: calc((100% - 50px) /2); }
  .healthy-taitung-box figure {
    margin: 0; }
    .healthy-taitung-box figure .pic img {
      display: block;
      max-width: 100%; }
  .healthy-taitung-box .content {
    padding: 15px 10px 0 10px; }
    .healthy-taitung-box .content .title {
      font-weight: bold;
      font-size: 1.25rem; }
    .healthy-taitung-box .content .txt {
      color: #666;
      margin-top: 5px; }

.healthy-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 40px;
  align-items: center;
  border: 1px dashed #ccc;
  padding: 20px 40px; }
  .healthy-contact .info {
    width: 100%;
    font-size: 1.0625rem;
    margin: 0;
    line-height: 1;
    padding-left: 10px;
    border-left: 5px solid var(--main); }
    .healthy-contact .info a {
      color: var(--main); }
      .healthy-contact .info a:hover {
        text-decoration: underline; }

/*========== health mobile ==========*/
@media (max-width: 1280px) {
  .healthy-guandu-list {
    gap: 20px 30px; }
  .healthy-guandu-box {
    width: calc((100% - 60px) /3); } }

@media (max-width: 768px) {
  .healthy-guandu-list {
    gap: 0; }
  .healthy-guandu-box {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px; }
    .healthy-guandu-box:not(:last-child) {
      margin-bottom: 25px; }
    .healthy-guandu-box figure {
      width: 200px; }
    .healthy-guandu-box .content {
      flex: 1;
      margin: 0;
      padding-left: 15px;
      padding-top: 5px; } }

@media (max-width: 640px) {
  .healthy-guandu-box figure {
    width: 130px; }
  .healthy-guandu-box .content .title {
    font-size: 1.125rem; }
  .healthy-news-swiper .swiper-pagination {
    margin-top: 30px; }
  .good-health-block:not(:last-child) {
    margin-bottom: 30px; }
  .good-health-block.good-health-unreset.bg {
    background: #f5f5f5;
    padding: 20px 15px; }
  .healthy-contact {
    padding: 15px 20px; } }

@media (max-width: 320px) {
  .healthy-guandu-box {
    flex-wrap: wrap; }
    .healthy-guandu-box figure {
      width: 100%; }
    .healthy-guandu-box .content {
      padding-left: 0;
      padding-top: 10px; } }


.cancer_team_list{
  display: flex;
  flex-wrap: wrap;
  gap: 30px 40px;
}
.cancer_team_box{
  width: calc( (100% - 80px) / 3 );
}
.cancer_team_box a{
  display: flex;
  align-items: center;
  border: 1px solid transparent;
}
.cancer_team_box figure{
  margin: 0;
  padding: 0;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
  margin: auto;}
.cancer_team_box .title{
  flex: 1;
  padding-left: 20px;
  font-size: 1.25rem;
  color: #292c33;
}

.cancer_team_box figure .pic {display: flex; position: relative;}
.cancer_team_box figure .pic img {display: block;max-width: 100%;max-height: 100%;}
.cancer_team_box figure .pic img.active {display: none;}
/* .cancer_team_box a:hover figure .pic img {display: none;}
.cancer_team_box a:hover figure .pic img.active {display: block;} */
.cancer_team_box a:hover{border-color:var(--main);}

@media (max-width: 960px) {
  .cancer_team_box{
    width: calc( (100% - 40px) / 2 );
  }
}

@media (max-width: 640px) {
  .cancer_team_list{
    gap: 20px;
  }
  .cancer_team_box{
    width: 100%;
  }
}

 /* medical-service-list  */

 .medical-service-list{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
 }
 .medical-service-box{
  width: calc( (100% - 80px) / 5 );
 }
 .medical-service-box a{
  background: #fff;
  display: block;
  border: 1px solid #eee;
  padding: 30px 5px;
  height: 100%;
  border-bottom: 2px solid #0f4c81;
 }
 .medical-service-box figure{margin: 0;}
 .medical-service-box figure .pic{
  /* width: 40%; */
  width: 50px;
  height: 50px;
  margin: auto;

 }
 .medical-service-box figure .pic img{
  display: block;
  max-width: 100%;
  max-height: 100%;
}

 .medical-service-box .title{
  text-align: center;
  color: #222;
  margin-top: 20px;
 }

  .medical-service-box a:hover{
    border-color:#0f4c81 ;
  }

  .medical-service-box a:hover .title{
    color: #0f4c81;
    font-weight: bold;
  }

  @media (max-width: 1280px) {
     .medical-service-box{
      width: calc( (100% - 60px) / 4 );
     }
  } 

   @media (max-width: 768px) {
    .medical-service-box{
      width: calc( (100% - 40px) / 3 );
     }
   }

   @media (max-width: 640px) {
    .medical-service-box{
      width: calc( (100% - 20px) / 2 );
     }
     .medical-service-box a{
        padding: 20px 10px;
      }
   }

   .document-application-unreset{
    margin-bottom: 30px;
   }
  @media (max-width: 480px) {
    .document-application-unreset{
      margin-bottom: 20px;
    }
  }


  .annual-report-list{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
  }
  .annual-report-box{
    width: calc((100% - 100px) / 3);
  }
  .annual-report-box a{
    display: block;
    padding: 20px;
    border: 1px solid #eee;
  }
  .annual-report-box a:hover figure:before,
  .annual-report-box a:hover figure:after{
    opacity: 1;
  }
  .annual-report-box figure{
    margin: 0;
    position: relative;
    overflow: hidden;
  }
  .annual-report-box figure:before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(123,196,193,.9);
    transition: .4s;
    z-index: 1;
    opacity: 0;
  }
  .annual-report-box figure:after{
    content: "\f358";
    display: block;
    font-family: "Font Awesome 6 Free";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.25rem;
    z-index: 1;
    font-weight: bold;
    transition: .4s;
    opacity: 0;
  }
  .annual-report-box figure .pic{
    position: relative;
    padding-bottom: calc( 400 / 300 * 100%);
    text-align: center;
    height: 0px;
    overflow: hidden;
  }
  .annual-report-box figure .pic img{
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
  }


  .annual-report-box .title{
    display: block;
    color: #222;
    font-weight: bold;
    font-size: 1.125rem;
    margin-top: 10px;
  }


  @media (max-width: 1280px) {
   .annual-report-list{
      gap: 30px;
   }
   .annual-report-box{
      width: calc((100% - 60px) / 3);
    }
    .annual-report-box a{
      padding: 15px;
    }
 }

   @media (max-width: 1024px) {
    .annual-report-list{
      gap: 20px;
    }
   .annual-report-box{
      width: calc((100% - 40px) / 3);
    }
   }

  @media (max-width: 768px) {
    .annual-report-list{
      gap: 20px 10px;
    }
   .annual-report-box{
      width: calc((100% - 20px) / 3);
    }
    .annual-report-box a{
      padding: 10px;
    }
    .annual-report-box .title{
      font-size: 1rem;
    }
  }

   @media (max-width: 640px) {
    .annual-report-box{
      width: calc((100% - 10px) / 2);
    }
   }  

   @media (max-width: 375px) {
    .annual-report-box{
      width: 300px;
      max-width: 100%;
      margin: auto;
    }
   }



   /* 同就醫指南-預防保健與篩檢-癌症篩檢服務內的按鈕樣式  */
   .customized-btn {
  margin-top: 30px; }
  .customized-btn a {
    display: inline-block;
    padding: 21px 55px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.125rem;
    color: #fff;
    background: #8fb6d3;
    line-height: 1;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.35); }
    .customized-btn a:hover {
      background: var(--main); }
@media (max-width: 960px) {
  .customized-btn a {
    padding: 16px 30px; } }