@charset "UTF-8";

#accesskey-c {
  position: absolute;
}

#accesskey-u {
  position: absolute;
  color: #fff;
}

#accesskey-u:focus {
  color: #333;
}

a.sr-only {
  z-index: 1;
}

a.sr-only:focus {
  width: auto;
  height: auto;
  padding: 6px;
  background-color: #fff;
  clip: auto;
  color: #333;
}

.courses-card li .btn-wrap {
  border-top: 1px solid #bbb;
}

.member .member-nav a,
.member .member-nav,
.apply-step,
.login-form li,
.login-box .tab,
.show-type,
.page-search .search-hot,
.page-search .search-filter>div,
.page-search .search-filter,
.page-search .search-bar,
.page-search,
.header-search-box .btn,
.header-search-box .adv-btn,
.header-search-box .inner,
.header .inner {
  display: flex;
  flex-wrap: wrap;
}

.page-search .search-bar .btn,
.header-search-box .adv-btn,
.header-search-box .btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.login-form {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-search .search-bar .btn,
.header-search-box .adv-btn,
.header-search-box .btn {
  border-radius: 4px;
  align-items: center;
  flex-wrap: nowrap;
  color: #fff;
  padding: 12px 15px;
  font-weight: 500;
  font-size: 1.063rem;
}

/* header
-----------------------------------------------------*/
.header {
  position: absolute;
  z-index: 990;
  width: 100%;
  border-top: 4px solid #27b0b2;
  box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
}

.header h1 {
  font-size: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.header .inner {
  width: 100%;
  padding: 0 2%;
  max-width: none;
  align-items: center;
  justify-content: space-between;
}

.header .logo {
  display: block;
  width: 250px;
  padding: 19px 0;
}

.header .logo img {
  display: block;
  width: 100%;
}

.header .header-cont {
  width: calc(100% - 250px);
  max-width: 1000px;
}

.header .header-misc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  font-size: 0.9rem;
  margin-top: 20px;
  margin-bottom: 6px;
  font-weight: 500;
}

.header .header-misc a,
.header .header-search-trigger .search-btn {
  display: block;
  margin: 0 0 0 20px;
  color: #666;
  fill: #666;
}

.header .header-misc a:hover,
.header .header-search-trigger:hover .search-btn {
  color: #23adc6;
  fill: #23adc6;
}

/* 首頁搜尋 */
.header .header-search-trigger {
  width: 20px;
  font-size: 0;
  display: none;
}

/* header end 
-----------------------------------------------------*/
/* search
-----------------------------------------------------*/
.header-search-box {
  width: 100%;
  padding: 35px 0;
  position: relative;
  z-index: 899;
  left: 0;
  top: 0;
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.header-search-box .inner {
  max-width: 800px;
  flex-wrap: nowrap;
  position: relative;
}

.header-search-box .btn,
.header-search-box .adv-btn {
  flex-wrap: nowrap;
  color: #fff;
  padding: 12px 15px;
  margin-left: 12px;
  font-weight: 500;
  font-size: 1rem;
  min-width: 110px;
}

.header-search-box .btn {
  background: #23adc6;
}

.header-search-box .adv-btn {
  background: #218b85;
}

.header-search-box .btn:hover {
  background: #0f94ac;
}

.header-search-box .adv-btn:hover {
  background: #0f635e;
}

.header-search-box .header-search-close {
  position: absolute;
  right: -50px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 43px;
  height: 43px;
  background-color: #eee;
  border-radius: 4px;
  padding: 12px;
}

.header-search-box .header-search-close:hover {
  background-color: #ccc;
}

.header-search-box .header-search-close img {
  width: 100%;
  display: block;
}

.header-search-box input[type=text] {
  width: 100%;
}

.header-search-box label {
  width: 110px;
  display: block;
  text-align: right;
  padding: 0 10px;
}

/* search end
-----------------------------------------------------*/
/* footer 
-----------------------------------------------------*/
.footer {
  width: 100%;
  margin-top: 60px;
  padding-top: 7%;
  line-height: 1.6;
  background: url(../images/footer-bg.png) center 0 no-repeat;
  background-size: 100%;
}

.footer .footer-container {
  width: 100%;
  background-color: #6ecaf0;
}

.footer .footer-side {
  padding: 0 15px;
}

.footer .footer-main {
  position: relative;
  color: #222;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.footer .footer-main .footer-contact-course,
.footer .footer-main .footer-contact-team {
  padding: 9px 30px;
  width: calc((100% - 200px) / 3);
  line-height: 1.4;
}

.footer .footer-main .footer-contact-course span,
.footer .footer-main .footer-contact-team span {
  display: block;
}

.footer .footer-main .footer-contact-course .title,
.footer .footer-main .footer-contact-team .title {
  margin: 0 0 10px 0;
  padding: 0;
}

.footer .footer-main .footer-contact-course .title span,
.footer .footer-main .footer-contact-team .title span {
  font-size: 1.3rem;
}

.footer .footer-main .footer-contact-course .footer-sw-box,
.footer .footer-main .footer-contact-team .footer-sw-box {
  display: flex;
  align-items: center;
}

.footer .footer-main .footer-contact-course .footer-sw-box .footer-sw-btn,
.footer .footer-main .footer-contact-team .footer-sw-box .footer-sw-btn {
  display: flex;
}

.footer .footer-main .footer-contact-course .footer-sw-box .footer-sw-btn a,
.footer .footer-main .footer-contact-team .footer-sw-box .footer-sw-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-radius: 100%;
  margin-right: 10px;
  margin-top: 5px;
}

.footer .footer-main .footer-contact-course .footer-sw-box .footer-sw-btn a img,
.footer .footer-main .footer-contact-team .footer-sw-box .footer-sw-btn a img {
  width: 20px;
}

.footer .footer-main .footer-contact-course .footer-sw-box .footer-sw-btn a.active,
.footer .footer-main .footer-contact-team .footer-sw-box .footer-sw-btn a.active {
  background-color: rgba(255, 255, 255, 0.662745098);
}

.footer .footer-main .footer-contact-course .footer-sw-box .footer-sw-cont>div,
.footer .footer-main .footer-contact-team .footer-sw-box .footer-sw-cont>div {
  display: none;
  font-size: 90%;
}

.footer .footer-main .footer-contact-main {
  font-size: 90%;
  padding: 0 30px;
}

.footer .footer-main .footer-contact-main span {
  display: block;
}

.footer .footer-main .footer-contact-main .footer-logo {
  display: block;
  margin: 0 0 8px 0;
  padding: 0;
  width: 100%;
}

.footer .footer-main .footer-contact-main .footer-logo img {
  display: block;
  width: 100%;
  max-width: 258px;
}

.footer .footer-misc {
  width: 150px;
  padding: 0 15px;
  display: flex;
  justify-content: flex-end;
}

.footer .footer-misc img {
  display: block;
  width: 100%;
}

.footer .footer-bottom {
  margin-top: 15px;
  width: 100%;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.footer .footer-bottom .footer-nav {
  color: #222;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.footer .footer-bottom .footer-nav li {
  position: relative;
  border-left: 1px solid #222;
}

.footer .footer-bottom .footer-nav li a {
  color: #222;
  display: block;
  padding: 0 15px;
}

.footer .footer-bottom .footer-nav li:last-child {
  border-right: 1px solid #222;
}

.footer .footer-bottom .copyright {
  width: 100%;
  display: block;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  text-align: center;
}

.footer .footer-host {
  display: block;
  text-align: right;
  font-size: 0.9rem;
  padding-right: 10px;
}

.footer .footer-contact-info {
  color: #333;
}

.footer .footer-contact-info strong,
.footer .footer-contact-info span,
.footer .footer-contact-info .note {
  display: block;
}

.footer .footer-contact-info strong,
.footer .footer-contact-info span {
  font-weight: 400;
  margin: 5px 0;
  font-size: 95%;
}

.footer .footer-contact-info strong {
  font-size: 1.25rem;
}

/* footer end
-----------------------------------------------------*/
/* 主選單
-----------------------------------------------------*/
.main-nav {
  width: 100%;
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
}

.main-nav .main-nav-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.main-nav .main-nav-list li {
  text-align: center;
  position: relative;
}

.main-nav .main-nav-list li>a {
  display: block;
  color: #222;
  padding: 20px 0;
}

.main-nav .main-nav-list li>a:hover {
  color: #0a899f;
}

.sub-nav {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 200px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  border-top: 1px solid #ccc;
}

.sub-nav .sub-nav-list {
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  background: #e2e2e2;
}

.sub-nav .sub-nav-list li {
  display: block;
  width: 100%;
}

.sub-nav .sub-nav-list li a {
  color: #222;
  display: block;
  padding: 15px 10px;
}

.sub-nav .sub-nav-list li a:hover {
  color: #fff;
  background: #23adc6;
}

/* 主選單 end 
-----------------------------------------------------*/
/* paging
-----------------------------------------------------*/
.paging {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  margin: 40px 0 0 0;
}

.rwdpaging {
  display: none;
}

.paging a {
  display: flex;
  border: 1px solid #ccc;
  color: #333;
  font-weight: 400;
  margin: 0 4px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.pcpaging {
  display: flex;
}

.paging .first,
.paging .prev,
.paging .last,
.paging .next {
  width: 100px;
  font-size: 90%;
}

.paging a i {
  color: #666;
}

.paging .first i {
  margin-right: 5px;
}

.paging .prev i {
  margin-right: 8px;
}

.paging .last i {
  margin-left: 5px;
}

.paging .next i {
  margin-left: 8px;
}

.paging a.current {
  background: #23adc6;
  border: 1px solid #23adc6;
  color: #fff;
}

/* paging end
-----------------------------------------------------*/
/* top鍵
-----------------------------------------------------*/
.back-top {
  position: fixed;
  bottom: 25px;
  right: 42px;
  z-index: 9999;
  width: 42px;
  height: 42px;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 100%;
  box-shadow: 0 0px 18px rgba(0, 0, 0, 0.13);
  background: #27b0b2;
}

.back-top .topArr {
  font-size: 1.1rem;
  color: white;
}

.back-top:hover {
  background: #2c9978;
}

/* top鍵 end
-----------------------------------------------------*/
/* 漢堡選單
-----------------------------------------------------*/
.hamburger {
  width: 36px;
  height: 27px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  display: none;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #333333;
  border-radius: 100px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  border-radius: 35px;
}

.hamburger span:nth-child(1) {
  top: 0px;
  transform-origin: left center;
}

.hamburger span:nth-child(2) {
  top: 11px;
  transform-origin: left center;
}

.hamburger span:nth-child(3) {
  top: 22px;
  transform-origin: left center;
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 8px;
}

.hamburger.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 25px;
  left: 8px;
}

/* 漢堡選單 end
-----------------------------------------------------*/
/* 內頁 banner
-----------------------------------------------------*/
.page-banner {
  width: 100%;
  position: relative;
  margin: 0 0 -30px 0 !important;
}

.page-banner a,
.page-banner img {
  display: block;
  width: 100%;
}

.page-banner a {
  display: block;
  position: relative;
  padding-top: 25%;
  overflow: hidden;
}

.page-banner img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.page-banner::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  padding-top: 8%;
  background: url(../images/kv-mask.png) center bottom no-repeat;
  background-size: contain;
  z-index: 1;
  left: 0;
  bottom: -2px;
}

.page-banner .slick-prev,
.page-banner .slick-next {
  top: 40%;
  width: 40px;
  height: 40px;
  background-size: 30px;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.25);
  background-position: center center;
  border-radius: 100%;
}

.page-banner .slick-prev {
  left: 8px;
  background-image: url(../images/arr-left-white.svg);
}

.page-banner .slick-next {
  right: 8px;
  background-image: url(../images/arr-right-white.svg);
}

/* 內頁 banner end
-----------------------------------------------------*/
/* 內頁 search
-----------------------------------------------------*/
.page-search {
  justify-content: flex-end;
  margin-bottom: 50px;
}

.page-search .calendar {
  font-weight: 600;
  padding: 12px 18px 12px 41px;
  color: #fff;
  background: url(../images/i-calendar-white.svg) 18px 13px no-repeat #e86869;
  background-size: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.page-search .calendar:hover {
  background: url(../images/i-calendar-white.svg) 18px 13px no-repeat #d54444;
  background-size: 16px;
}

.page-search .search-bar {
  width: 100%;
  flex-wrap: nowrap;
}

.page-search .search-bar .btn {
  background-color: #23adc6;
  color: #fff;
  padding: 12px 15px;
  width: 100px;
}

.page-search .search-bar .btn:hover {
  background-color: #0f94ac;
}

.page-search .search-bar input[type=text] {
  width: 100%;
  margin-right: 10px;
}

.page-search .search-filter {
  width: 100%;
  padding: 10px 0;
}

.page-search .search-filter>div {
  padding: 5px 18px 5px 0;
}

.page-search .search-filter>div>label {
  display: none;
  margin: 11px 12px 0 0;
}

.page-search .search-hot {
  width: 100%;
  justify-content: flex-start;
}

.page-search .search-hot a {
  border-radius: 150px;
  padding: 8px 20px;
  margin-bottom: 6px;
  margin-right: 8px;
  border: 1px solid #bbb;
  color: #000;
}

.page-search .search-hot a:hover {
  opacity: 0.65;
}

/* 內頁 search end
-----------------------------------------------------*/
/* 課程列表
-----------------------------------------------------*/
.show-type {
  justify-content: flex-end;
  font-size: 0;
  margin-bottom: 15px;
}

.show-type a {
  display: block;
  width: 20px;
  height: 20px;
  justify-content: flex-end;
  font-size: 0;
  margin-left: 10px;
  opacity: 0.4;
}

.show-type a.current {
  opacity: 1;
}

.show-type .card {
  background: url(../images/type-card.svg) 0 0 no-repeat;
  background-size: 100%;
}

.show-type .table {
  background: url(../images/type-list.svg) 0 0 no-repeat;
  background-size: 100%;
}

.courses-card {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.courses-card li {
  margin: 10px 20px 40px 20px;
  width: calc(25% - 40px);
  position: relative;
}

.courses-card li>a {
  display: block;
}

.courses-card li>a:focus {
  outline: 3px dashed #df0a0a !important;
  outline-offset: 3px;
}

.courses-card li .favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 150%;
  display: block;
  color: rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 1px #fff;
  z-index: 1;
}

.courses-card li .favorite.add .fa-heart {
  color: #f62314;
  -webkit-text-stroke: 1px #fff;
}

.courses-card li .btn:hover {
  background-color: #fc764d;
}

.courses-card li .btn-wrap {
  margin: 0 12px;
  /*width: calc(100% - 24px); by david*/
  width: 100%;
  padding-top: 10px;
  align-items: center;
  justify-content: space-between;
}

.courses-card li .btn-wrap .btn {
  font-size: 90%;
  line-height: 1;
  margin: 0 5px;
  background-color: #23adc6;
}

.courses-card li .btn-wrap .btn.follow {
  background-color: #ff8c6a;
}

.courses-card li .btn-wrap .btn.disable {
  background-color: #eee;
  color: #666;
}

.courses-card li .btn-wrap .applicants-pen,
.courses-card li .btn-wrap .applicants-full,
.courses-card li .btn-wrap .applicants {
  font-size: 90%;
  font-weight: 300;
  margin: 0 5px;
  padding: 5px 10px;
  border-radius: 4px;
}

.courses-card li .btn-wrap .applicants-pen i,
.courses-card li .btn-wrap .applicants-full i,
.courses-card li .btn-wrap .applicants i {
  margin-right: 4px;
}

.courses-card li .btn-wrap .applicants-pen .num,
.courses-card li .btn-wrap .applicants-full .num,
.courses-card li .btn-wrap .applicants .num {
  font-weight: 600;
  color: #0a899f;
}

.courses-card li .btn-wrap .applicants {
  color: #ff6d62;
  background: #ffece4;
}

.courses-card li .btn-wrap .applicants-full {
  color: #555;
  background: #eee;
}

.courses-card li .btn-wrap .applicants-pen {
  color: #218b85;
  background: #e2ebec;
}

.courses-card .courses-img {
  position: relative;
  margin: 0;
  padding-top: 65%;
  overflow: hidden;
  border-radius: 30px 10px 30px 10px;
  background-color: #fff;
}

.courses-card .courses-img img {
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.courses-card .courses-img .logo {
  max-width: 100%;
}

.courses-card .courses-img .logo.old {
  max-width: 100%;
  width: auto;
  height: 100%;
}

.courses-card .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px;
}

.courses-card .info .txt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

.courses-card .info .type {
  font-size: 0.875rem;
  font-weight: 500;
}

.courses-card .info .category {
  font-size: 0.875rem;
  font-weight: 500;
  color: #177687;
}

.courses-card .info .name {
  display: block;
  width: 100%;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
  padding: 8px 0;
  color: #000;
  max-height: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.courses-card .info .name:hover {
  color: #0a899f;
}

.courses-card .info .date {
  display: block;
  width: 100%;
  font-size: 90%;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 10px 0;
  padding: 0;
  color: #000;
}

.courses-card .info .keyword {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 49px;
}

.courses-card .info .keyword span {
  display: inline-block;
  margin: 2px 5px 2px 0;
  border-radius: 150px;
  border: 1px solid #999;
  color: #666;
  font-size: 0.8rem;
  padding: 2px 8px;
}

.courses-card .info .msic {
  width: 100%;
  justify-content: space-between;
}

.courses-card .info .msic .unit {
  display: block;
  width: 100%;
  font-size: 90%;
  line-height: 1.2;
  font-weight: 500;
  margin: 5px 0;
  padding: 0;
  text-align: left;
  color: #333;
}

.trainee-card li .btn-wrap .applicants {
  background-color: transparent;
  margin: 0;
  padding: 0;
  color: #222;
}

.trainee-card li .btn-wrap .btn {
  margin: 0;
}

.courses-table table {
  background: #fff;
}

.courses-table .favorite {
  font-size: 90%;
  display: flex;
}

.courses-table .favorite a {
  display: flex;
  align-items: center;
  margin-right: 10px;
  color: #222;
  text-decoration: none;
}

.courses-table .favorite a:hover {
  color: #0f94ac;
}

.courses-table .favorite i {
  font-size: 115%;
  margin-top: 2px;
  margin-right: 3px;
}

.courses-table .favorite .fa-heart {
  color: #f62314;
}

.courses-table .favorite {
  font-size: 90%;
  display: flex;
  justify-content: center;
}

.courses-table .favorite a {
  color: #222;
  margin-right: 0;
}

.courses-card .table-btn,
.courses-table .table-btn {
  background-color: #ff8c6a;
}

.courses-card .table-btn.disable,
.courses-table .table-btn.disable {
  background-color: #eee;
  color: #666;
}

/* 課程列表 end
-----------------------------------------------------*/
/* 登入/註冊
-----------------------------------------------------*/
.login-box {
  width: 86%;
  max-width: 600px;
  margin: 70px auto;
  padding: 0;
}

.login-box .tab {
  width: 100%;
  font-weight: 500;
  font-size: 1.125em;
  background: #ddd;
}

.login-box .tab a {
  width: 50%;
  display: block;
  text-align: center;
  padding: 21px 20px 20px 20px;
  color: #222;
}

.login-box .tab a.current {
  border-top: 4px solid #23adc6;
  background: #fff;
  padding: 18px 20px 20px 20px;
}

.login-box .tab a:hover {
  color: #23adc6;
}

.login-form {
  background: #fff;
  padding: 20px 40px;
}

.login-form li {
  padding: 15px 0;
}

.login-form li .required {
  width: 100%;
  font-size: 90%;
  text-align: right;
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}

.login-form li .item {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  font-weight: 500;
}

.login-form li .forget,
.login-form li .refresh {
  margin-left: 5px;
  color: #218b85;
  font-size: 90%;
}

.login-form li .forget i,
.login-form li .refresh i {
  margin-right: 2px;
}

.login-form li .forget:hover,
.login-form li .refresh:hover {
  color: #0f635e;
}

.login-form li .code-box {
  width: 100%;
  align-items: center;
  justify-content: flex-start;
}

.login-form li .code-box input[type=text] {
  margin: 0 5px;
}

.login-list li a {
  display: inline-block;
  padding: 36px;
  background: #099092;
  color: #fff;
  text-align: center;
  width: 100%;
  border-radius: 10px;
}

.login-list li a p {
  font-size: 1.75rem;
  padding: 14px 0;
  margin: 0;
}

.login-list li a img {
  width: auto;
  margin: 0 auto;
}

.login-list li:last-child a {
  background: #1f92cd;
}

.login-ch .login_title {
  text-align: center;
}

/* 登入/註冊 end
-----------------------------------------------------*/
/* 進度條
-----------------------------------------------------*/
.progress-bar {
  font-size: 0.85rem;
  font-weight: 500;
  align-items: center;
  display: flex;
}

.progress-bar .box {
  overflow: hidden;
  border-radius: 150px;
  font-size: 0.7rem;
  width: 300px;
  border: 1px solid #bccade;
  margin: 0 8px;
  background: #fff;
}

.progress-bar .box .bar {
  background: #21b6bb;
  padding: 9px 5px;
  color: #fff;
  display: block;
  line-height: 0;
  text-align: right;
  font-weight: 900;
}

/* 進度條 end
-----------------------------------------------------*/
/* 個人資料使用授權同意書 */
.apply-terms {
  margin: 0 auto;
  max-width: 1200px;
}

.apply-terms .txt {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 30px 40px;
  font-weight: 300;
  line-height: 2;
  font-size: 1.1rem;
  margin: 0 0 20px 0;
}

/* 個人資料使用授權同意書 end */
/* 報名表
-----------------------------------------------------*/
.apply-title {
  color: #333;
  margin-bottom: 6px;
  padding: 50px 0;
}

.apply-title strong {
  font-weight: 500;
  font-size: 1.375rem;
  position: relative;
  margin-bottom: 10px;
  display: block;
}

.apply-title strong::before {
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 30px;
  left: -14px;
  top: -2px;
  z-index: -1;
  background: url(../images/title-bg-left.png) 0 0 no-repeat;
}

.apply-title h2 {
  display: block;
  font-weight: 500;
  font-size: 1.875rem;
  margin: 0;
}

.apply-step {
  position: relative;
  width: 400px;
  margin: 0 auto 30px auto;
  justify-content: space-between;
}

.apply-step::before {
  position: absolute;
  content: "";
  display: block;
  width: 77%;
  height: 8px;
  background-color: #ddd;
  left: 50%;
  top: 17px;
  transform: translateX(-50%);
}

.apply-step>div {
  position: relative;
  text-align: center;
  width: 25%;
}

.apply-step>div>.num {
  color: #666;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  background-color: #ddd;
  position: relative;
  z-index: 1;
}

.apply-step>div.current>.num {
  color: #fff;
  background-color: #ff9551;
}

.apply-step>div.current::before {
  position: absolute;
  content: "";
  display: block;
  width: 100px;
  height: 8px;
  left: 0;
  transform: translateX(-62%);
  top: 17px;
  z-index: 0;
  background-color: #ff9551;
}

.apply-step-first>div.current::before {
  display: none;
}

.apply-step>div.current:nth-child(1):before {
  transform: translateX(62%);
}

.apply-step>div.current:last-child:before {
  width: 150px;
}

.apply-form-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.apply-form-header .title {
  color: #0a899f;
  font-weight: 400;
  font-size: 1.25rem;
}

.apply-remind {
  display: flex;
  justify-content: center;
  color: #222;
  font-size: 1.25rem;
  font-weight: 400;
}

.apply-remind a {
  color: #23819a;
  text-decoration: underline;
}

.apply-form {
  padding: 30px;
  margin-bottom: 30px;
  background-color: #fff;
}

.apply-form table {
  border-bottom: 1px solid #ddd;
}

.apply-form table tr:nth-child(odd) {
  background-color: #f4f8fa;
}

.apply-form table th {
  color: #444;
  background: transparent;
}

.apply-form .form-inline>div {
  align-items: center;
}

.apply-form .form-inline>div input[type=checkbox],
.apply-form .form-inline>div input[type=radio] {
  margin-top: 0;
}

.apply-form .required {
  margin: 10px 0;
}

.apply-form .apply-upload-box {
  align-items: flex-start;
  justify-content: space-between;
}

.apply-form .apply-upload-box .file-downlaod {
  margin: 5px 0 0 0;
  padding: 0;
}

.apply-form .apply-upload-box .upload-check {
  background-color: #ffefbd;
  border-radius: 8px;
  padding: 10px 30px;
}

.apply-form .apply-upload-box .upload-check li {
  display: flex;
  font-size: 105%;
  padding: 25px 0;
  border-bottom: 2px dotted #888;
}

.apply-form .apply-upload-box .upload-check li span {
  display: block;
  margin-right: 8px;
}

.apply-form .apply-upload-box .upload-check li .fa-check {
  color: #0ab730;
}

.apply-form .apply-upload-box .upload-check li .fa-xmark {
  color: #d31f1f;
}

.apply-form .apply-upload-box .upload-check li:last-child {
  border-bottom: 0;
}

.apply-form .apply-finish {
  text-align: center;
  padding-bottom: 50px;
}

.apply-form .apply-finish .title {
  font-size: 2rem;
  font-weight: 600;
  display: block;
  margin: 50px 0;
}

/* 報名表 end
-----------------------------------------------------*/
/* 會員專區
-----------------------------------------------------*/
.member .member-nav {
  margin: 0 0 30px 0;
  flex-wrap: wrap;
  justify-content: center;
}

.member .member-nav a {
  width: 12.5%;
  color: #000;
  padding: 10px 5px;
  font-size: 1.1rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}

.member .member-nav a:hover {
  opacity: 0.6;
}

.member .member-nav a .icon {
  display: block;
  width: 54px;
  height: 54px;
  padding: 0;
  margin: 0 auto 10px auto;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

.member .member-nav a span {
  display: block;
  width: 100%;
  text-align: center;
}

.member .member-nav .nav1 .icon {
  background-image: url(../images/i-member-nav1.svg);
}

.member .member-nav .nav2 .icon {
  background-image: url(../images/i-member-nav2.svg);
}

.member .member-nav .nav3 .icon {
  background-image: url(../images/i-member-nav3.svg);
}

.member .member-nav .nav4 .icon {
  background-image: url(../images/i-member-nav4.svg);
}

.member .member-nav .nav5 .icon {
  background-image: url(../images/i-member-nav5.svg);
}

.member .member-nav .nav6 .icon {
  background-image: url(../images/i-member-nav6.svg);
}

.member .member-nav .nav7 .icon {
  background-image: url(../images/i-member-nav7.svg);
}

.member .member-nav .nav8 .icon {
  background-image: url(../images/i-member-nav8.svg);
}

.member .member-nav .nav9 .icon {
  background-image: url(../images/i-member-nav9.svg);
}

.member .member-nav .nav10 .icon {
  background-image: url(../images/i-member-nav10.svg);
}

.member .member-nav .nav11 .icon {
  background-image: url(../images/i-member-nav11.svg);
}

.member .pay-note {
  color: #ec3f32;
  font-weight: 500;
  font-size: 1.15rem;
  background-color: #ffeee9;
  border-radius: 5px;
  padding: 15px 25px;
}

.member .member-msg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}

.member .member-msg li {
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  margin: 10px;
  padding: 15px 15px 15px 47px;
  font-size: 1rem;
  background-color: #fff;
  border-radius: 5px;
}

.member .member-msg .member-msg1 {
  background-image: url(../images/member-msg1.png);
}

.member .member-msg .member-msg2 {
  background-image: url(../images/member-msg2.png);
}

.member .member-msg .member-msg3 {
  background-image: url(../images/member-msg3.png);
}

.member .member-msg .member-msg4 {
  background-image: url(../images/member-msg4.png);
}

.member .member-msg .member-msg4 a {
  color: #ff6056;
}

.member .courses-list,
.member .favourite-list,
.member .follow-list {
  margin-bottom: 50px;
}

.member .courses-list .header,
.member .favourite-list .header,
.member .follow-list .header {
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  z-index: 1;
}

.member .courses-list .header .title,
.member .favourite-list .header .title,
.member .follow-list .header .title {
  position: relative;
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  padding-left: 20px;
  align-items: center;
}

.member .courses-list .header .title::before,
.member .favourite-list .header .title::before,
.member .follow-list .header .title::before {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  top: 8px;
  left: 0;
}

.member .courses-list .header .title::before {
  background-color: #23adc6;
}

.member .favourite-list .header .title::before {
  background-color: #218b85;
}

.member .follow-list .header .title::before {
  background-color: #ff8c6a;
}

.member .courses-list .member-courses-table th {
  color: #fff;
  background-color: #23adc6;
}

.member .favourite-list .member-courses-table th {
  color: #fff;
  background-color: #218b85;
}

.member .follow-list .member-courses-table th {
  color: #fff;
  background-color: #ff8c6a;
}

.member .trainee-list {
  margin-bottom: 50px;
}

.member .trainee-list .header {
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  z-index: 1;
}

.member .trainee-list .header .title {
  position: relative;
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  padding-left: 20px;
  align-items: center;
}

.member .trainee-list .header .title::before {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  top: 8px;
  left: 0;
  background-color: #e86869;
}

.member .trainee-list .member-trainee-table th {
  color: #fff;
  background-color: #e86869;
}

.member .member-courses-table,
.member .member-trainee-table {
  background: #fff;
}

.member .member-courses-table .table-btn.del,
.member .member-trainee-table .table-btn.del {
  background-color: #d63b55;
}

.member .member-courses-table .table-btn.apply,
.member .member-trainee-table .table-btn.apply {
  background-color: #0a899f;
}

.member .member-courses-table .table-btn.del:hover,
.member .member-courses-table .table-btn.apply:hover,
.member .member-trainee-table .table-btn.del:hover,
.member .member-trainee-table .table-btn.apply:hover {
  opacity: 0.8;
}

.member .member-courses-table .img,
.member .member-trainee-table .img {
  display: block;
  width: 140px;
  margin: 0 auto;
  border-radius: 6px;
}

.member .member-courses-table .name,
.member .member-trainee-table .name {
  display: block;
  margin-top: 8px;
}

.member .member-courses-table .logo,
.member .member-trainee-table .logo {
  display: block;
  width: 120px;
  margin: 0 auto;
}

.member .member-courses-table .btn-add-calendar {
  width: 32px;
  display: block;
  margin: 0 auto;
}

.member .member-courses-table .btn-add-calendar img {
  width: 100%;
  display: block;
}

.member .pay-method {
  justify-content: space-evenly;
}

.member .pay-method li {
  width: calc(20% - 20px);
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
}

.member .pay-method li .method {
  border-radius: 4px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  line-height: 1.35;
  padding: 30px 10px;
  justify-content: center;
  background-color: #0990a8;
}

.member .pay-method li .method p {
  width: 100%;
  margin: 0;
}

.member .pay-method li .method .icon {
  width: 50px;
  padding: 0;
  margin: 0 0 20px 0;
  display: block;
}

.member .pay-method li .method .icon img {
  display: block;
  width: 100%;
}

.member .pay-method li .method:hover {
  background-color: #0e6e80;
}

.member .table-overflow>div {
  min-width: 1200px;
}

.member-header {
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 20px;
}

.member-header .title {
  position: relative;
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  padding-left: 20px;
  align-items: center;
}

.member-header .title::before {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  top: 8px;
  left: 0;
  background-color: #23adc6;
}

/* 會員專區 end
-----------------------------------------------------*/
.content-table {
  border: 1px solid #ddd;
  background: #fff;
}

.content-table tr:nth-child(odd) {
  background-color: #f4f8fa;
}

.intro-box-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #ccc;
}

.intro-box-row .intro-box {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
  line-height: 1.8;
  align-items: flex-start;
  float: left;
  width: 100%;
}

.intro-box-row:nth-child(2) {
  border-top: none;
}

.intro-title {
  width: 100%;
  display: block;
  font-weight: 400;
  font-size: 1.6rem;
  color: #222;
  position: relative;
  padding-left: 50px;
  padding-top: 5px;
  margin-bottom: 15px;
}

.intro-title::before {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  left: 0;
  top: 5px;
  z-index: 1;
}

.intro-title-support::before {
  background: url(../images/intro-title-support.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-target::before {
  background: url(../images/intro-title-target.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-result::before {
  background: url(../images/intro-title-result.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-traffic::before {
  background: url(../images/intro-title-traffic.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-content::before {
  background: url(../images/intro-title-content.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-process::before {
  background: url(../images/intro-title-process.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-location::before {
  background: url(../images/intro-title-location.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-course::before {
  background: url(../images/intro-title-course.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-stay::before {
  background: url(../images/intro-title-stay.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-teacher::before {
  background: url(../images/intro-title-teacher.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-note::before {
  background: url(../images/intro-title-note.png) 0 0 no-repeat;
  background-size: contain;
}

.intro-title-food::before {
    background: url(../images/intro-title-food.png) 0 0 no-repeat;
    background-size: contain;
}

.intro-subtitle {
  display: block;
  font-weight: 400;
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: #23adc6;
}

.courses-intro,
.trainee-intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.courses-intro p,
.trainee-intro p {
  margin: 0 0 10px 0;
  font-weight: 300;
}

.courses-intro .intro,
.trainee-intro .intro {
  width: calc(60% - 20px);
  margin-bottom: 30px;
}

.courses-intro .content,
.courses-intro .info,
.trainee-intro .content,
.trainee-intro .info {
  width: 100%;
  margin-bottom: 30px;
}

.courses-intro .content .cont>div,
.courses-intro .info .cont>div,
.trainee-intro .content .cont>div,
.trainee-intro .info .cont>div {
  display: flex;
  margin: 12px 0;
  font-weight: 300;
}

.courses-intro .content .cont>div .item,
.courses-intro .info .cont>div .item,
.trainee-intro .content .cont>div .item,
.trainee-intro .info .cont>div .item {
  font-weight: normal;
  font-weight: 300;
}

.courses-intro .content .cont>div .ct,
.courses-intro .info .cont>div .ct,
.trainee-intro .content .cont>div .ct,
.trainee-intro .info .cont>div .ct {
  font-weight: 300;
}

.courses-intro .content .cont,
.courses-intro .info .cont,
.trainee-intro .content .cont,
.trainee-intro .info .cont {
  width: 100%;
  margin-bottom: 30px;
}

.courses-intro .content .cont .courses-process,
.courses-intro .info .cont .courses-process,
.trainee-intro .content .cont .courses-process,
.trainee-intro .info .cont .courses-process {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.courses-intro .content .cont .courses-process .thead,
.courses-intro .content .cont .courses-process .tbody,
.courses-intro .info .cont .courses-process .thead,
.courses-intro .info .cont .courses-process .tbody,
.trainee-intro .content .cont .courses-process .thead,
.trainee-intro .content .cont .courses-process .tbody,
.trainee-intro .info .cont .courses-process .thead,
.trainee-intro .info .cont .courses-process .tbody {
  width: 100%;
  display: flex;
  padding: 12px 0;
  border-radius: 6px;
}

.courses-intro .content .cont .courses-process .thead .time,
.courses-intro .content .cont .courses-process .thead .title,
.courses-intro .content .cont .courses-process .thead .teacher,
.courses-intro .content .cont .courses-process .tbody .time,
.courses-intro .content .cont .courses-process .tbody .title,
.courses-intro .content .cont .courses-process .tbody .teacher,
.courses-intro .info .cont .courses-process .thead .time,
.courses-intro .info .cont .courses-process .thead .title,
.courses-intro .info .cont .courses-process .thead .teacher,
.courses-intro .info .cont .courses-process .tbody .time,
.courses-intro .info .cont .courses-process .tbody .title,
.courses-intro .info .cont .courses-process .tbody .teacher,
.trainee-intro .content .cont .courses-process .thead .time,
.trainee-intro .content .cont .courses-process .thead .title,
.trainee-intro .content .cont .courses-process .thead .teacher,
.trainee-intro .content .cont .courses-process .tbody .time,
.trainee-intro .content .cont .courses-process .tbody .title,
.trainee-intro .content .cont .courses-process .tbody .teacher,
.trainee-intro .info .cont .courses-process .thead .time,
.trainee-intro .info .cont .courses-process .thead .title,
.trainee-intro .info .cont .courses-process .thead .teacher,
.trainee-intro .info .cont .courses-process .tbody .time,
.trainee-intro .info .cont .courses-process .tbody .title,
.trainee-intro .info .cont .courses-process .tbody .teacher {
  padding: 0 20px;
}

.courses-intro .content .cont .courses-process .thead .time,
.courses-intro .content .cont .courses-process .tbody .time,
.courses-intro .info .cont .courses-process .thead .time,
.courses-intro .info .cont .courses-process .tbody .time,
.trainee-intro .content .cont .courses-process .thead .time,
.trainee-intro .content .cont .courses-process .tbody .time,
.trainee-intro .info .cont .courses-process .thead .time,
.trainee-intro .info .cont .courses-process .tbody .time {
  width: 22%;
  text-align: center;
}

.courses-intro .content .cont .courses-process .thead .title,
.courses-intro .content .cont .courses-process .tbody .title,
.courses-intro .info .cont .courses-process .thead .title,
.courses-intro .info .cont .courses-process .tbody .title,
.trainee-intro .content .cont .courses-process .thead .title,
.trainee-intro .content .cont .courses-process .tbody .title,
.trainee-intro .info .cont .courses-process .thead .title,
.trainee-intro .info .cont .courses-process .tbody .title {
  width: 56%;
}

.courses-intro .content .cont .courses-process .thead .teacher,
.courses-intro .content .cont .courses-process .tbody .teacher,
.courses-intro .info .cont .courses-process .thead .teacher,
.courses-intro .info .cont .courses-process .tbody .teacher,
.trainee-intro .content .cont .courses-process .thead .teacher,
.trainee-intro .content .cont .courses-process .tbody .teacher,
.trainee-intro .info .cont .courses-process .thead .teacher,
.trainee-intro .info .cont .courses-process .tbody .teacher {
  width: 22%;
}

.courses-intro .content .cont .courses-process .thead,
.courses-intro .info .cont .courses-process .thead,
.trainee-intro .content .cont .courses-process .thead,
.trainee-intro .info .cont .courses-process .thead {
  background-color: #0990a8;
  color: #fff;
}

.courses-intro .content .cont .courses-process .thead .time,
.courses-intro .content .cont .courses-process .thead .title,
.courses-intro .content .cont .courses-process .thead .teacher,
.courses-intro .info .cont .courses-process .thead .time,
.courses-intro .info .cont .courses-process .thead .title,
.courses-intro .info .cont .courses-process .thead .teacher,
.trainee-intro .content .cont .courses-process .thead .time,
.trainee-intro .content .cont .courses-process .thead .title,
.trainee-intro .content .cont .courses-process .thead .teacher,
.trainee-intro .info .cont .courses-process .thead .time,
.trainee-intro .info .cont .courses-process .thead .title,
.trainee-intro .info .cont .courses-process .thead .teacher {
  text-align: center;
}

.courses-intro .content .cont .courses-process .thead .title,
.courses-intro .info .cont .courses-process .thead .title,
.trainee-intro .content .cont .courses-process .thead .title,
.trainee-intro .info .cont .courses-process .thead .title {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.courses-intro .content .cont .courses-process .tbody,
.courses-intro .info .cont .courses-process .tbody,
.trainee-intro .content .cont .courses-process .tbody,
.trainee-intro .info .cont .courses-process .tbody {
  background: #fff;
  margin: 5px 0;
}

.courses-intro .content .cont .courses-process .tbody .item,
.courses-intro .info .cont .courses-process .tbody .item,
.trainee-intro .content .cont .courses-process .tbody .item,
.trainee-intro .info .cont .courses-process .tbody .item {
  display: none;
}

.courses-intro .content .cont .courses-process .tbody:nth-child(odd),
.courses-intro .info .cont .courses-process .tbody:nth-child(odd),
.trainee-intro .content .cont .courses-process .tbody:nth-child(odd),
.trainee-intro .info .cont .courses-process .tbody:nth-child(odd) {
  background: #ddd;
}

.courses-intro .content .cont .teacher-list,
.courses-intro .info .cont .teacher-list,
.trainee-intro .content .cont .teacher-list,
.trainee-intro .info .cont .teacher-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.courses-intro .content .cont .teacher-list li,
.courses-intro .info .cont .teacher-list li,
.trainee-intro .content .cont .teacher-list li,
.trainee-intro .info .cont .teacher-list li {
  margin: 0 0 10px 0;
  padding-right: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(100% / 3);
}

.courses-intro .content .cont .teacher-list li .photo,
.courses-intro .info .cont .teacher-list li .photo,
.trainee-intro .content .cont .teacher-list li .photo,
.trainee-intro .info .cont .teacher-list li .photo {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: block;
}

.courses-intro .content .cont .teacher-list li .photo img,
.courses-intro .info .cont .teacher-list li .photo img,
.trainee-intro .content .cont .teacher-list li .photo img,
.trainee-intro .info .cont .teacher-list li .photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
}

.courses-intro .content .cont .teacher-list li .info,
.courses-intro .info .cont .teacher-list li .info,
.trainee-intro .content .cont .teacher-list li .info,
.trainee-intro .info .cont .teacher-list li .info {
  width: calc(100% - 75px);
  margin-bottom: 0;
  line-height: 1.2;
  align-self: self-start;
}

.courses-intro .content .cont .teacher-list li .name,
.courses-intro .info .cont .teacher-list li .name,
.trainee-intro .content .cont .teacher-list li .name,
.trainee-intro .info .cont .teacher-list li .name {
  font-size: 110%;
  display: block;
  margin-bottom: 5px;
}

.courses-intro .content .cont .teacher-list li .title,
.courses-intro .info .cont .teacher-list li .title,
.trainee-intro .content .cont .teacher-list li .title,
.trainee-intro .info .cont .teacher-list li .title {
  font-size: 90%;
}

.courses-intro .base-info,
.trainee-intro .base-info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.courses-intro .base-info li,
.trainee-intro .base-info li {
  width: 50%;
  margin-top: 20px;
  padding-right: 30px;
}

.courses-intro .base-info li p,
.trainee-intro .base-info li p {
  margin: 0;
}

.courses-intro .base-info li.col-12,
.trainee-intro .base-info li.col-12 {
  width: 100%;
}

.courses-intro .content,
.trainee-intro .content {
  margin: 20px 0 0 0;
}

.courses-intro .content .cont>div,
.trainee-intro .content .cont>div {
  margin: 20px 0 20px 0;
}

.courses-intro .content .item,
.trainee-intro .content .item {
  width: 86px;
}

.courses-intro .content .ct,
.trainee-intro .content .ct {
  width: calc(100% - 86px);
}

.courses-intro .map,
.trainee-intro .map {
  width: 36%;
  border-bottom: 0;
  border-radius: 8px;
  background-color: #fff;
  padding: 20px 20px;
  float: right;
  margin-bottom: 30px;
}

.courses-intro .map .btn,
.trainee-intro .map .btn {
  width: 100%;
}

.courses-intro .map .cont,
.trainee-intro .map .cont {
  position: relative;
  width: 100%;
}

.courses-intro .map .cont .info,
.trainee-intro .map .cont .info {
  margin-bottom: 20px;
}

.courses-intro .map .cont .info li,
.trainee-intro .map .cont .info li {
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5;
  position: relative;
  padding-left: 22px;
}

.courses-intro .map .cont .info li .item,
.trainee-intro .map .cont .info li .item {
  width: 100%;
  font-weight: 400;
  color: #03697a;
}

.courses-intro .map .cont .info li .cont,
.trainee-intro .map .cont .info li .cont {
  font-weight: 300;
  margin-bottom: 0;
}

.courses-intro .map .cont .info li::before,
.trainee-intro .map .cont .info li::before {
  position: absolute;
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  top: 10px;
  left: 10px;
  background-color: #03697a;
}

.courses-intro .map .cont .map-box,
.trainee-intro .map .cont .map-box {
  padding-bottom: 40%;
  position: relative;
}

.courses-intro .map .cont .map-box iframe,
.trainee-intro .map .cont .map-box iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
}

.trainee-intro .content {
  width: 100%;
}

.trainee-intro .content p {
  font-weight: 300;
  margin: 10px 0 10px 0;
}

.trainee-intro .content .cont {
  font-weight: 300;
}

.trainee-intro .content .cont>div {
  display: flex;
  margin: 12px 0;
  font-weight: 300;
}

.trainee-intro .content .cont>div .item {
  font-weight: normal;
  font-weight: 300;
}

.trainee-intro .content .cont>div .ct {
  width: 70%;
  font-weight: 300;
}

.trainee-intro .teacher-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
  line-height: 1.2;
}

.trainee-intro .teacher-info .photo {
  width: 24%;
  margin: 0 30px 0 0;
  padding-top: 14%;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.trainee-intro .teacher-info .photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  border-radius: 6px;
}

.spot-tabs-box .spot-list {
  justify-content: flex-start;
}

.spot-tabs-box .spot-list>li {
  width: 20%;
}

.spot-tabs-box .spot-list>li .tabs-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.spot-banner {
  display: none;
}

.spot-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 30px;
  background: #fff;
  border-radius: 30px 10px 30px 10px;
  font-weight: 300;
}

.spot-intro .spot-logo {
  width: 25%;
  padding: 0;
  margin: 0 30px 0 0;
}

.spot-intro .spot-logo img {
  display: block;
  width: 100%;
}

.spot-intro .spot-intro-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: calc(75% - 30px);
}

.spot-intro .spot-intro-content .location {
  width: 100%;
  display: flex;
  margin-bottom: 8px;
}

.spot-intro .spot-intro-content p {
  font-weight: 300;
  line-height: 1.8;
  margin: 0;
}

.spot-intro .spot-intro-content .link {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.spot-intro .spot-intro-content .link a {
  padding: 8px 15px;
  display: block;
  color: #000;
  border: 1px solid #ddd;
  border-radius: 160px;
  margin-right: 5px;
}

.intro-img-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  margin-bottom: 50px;
}

.intro-img-box .img-lg-box {
  width: calc(50% - 10px);
  margin-bottom: 17px;
}

.intro-img-box .img-lg-box .img-lg {
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 74%;
  position: relative;
}

.intro-img-box .img-sm-box {
  overflow: hidden;
  width: calc(25% - 10px);
}

.intro-img-box .img-sm-box .img-sm {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 17px;
  position: relative;
  padding-top: 72%;
}

.intro-img-box img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.faq-list li {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.faq-list .q-icon,
.faq-list .a-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 150px;
  width: 50px;
  height: 50px;
  color: #fff;
  font-weight: 500;
}

.faq-list .qust a {
  display: flex;
  color: #222;
  width: 100%;
}

.faq-list .qust .q-icon {
  background-color: #ff925d;
}

.faq-list .qust .q-cont {
  padding: 5px 15px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  width: calc(100% - 50px);
  justify-content: flex-start;
  text-align: left;
}

.faq-list .ans {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: -1;
  display: flex;
  margin-top: 15px;
}

.faq-list .ans .a-icon {
  background-color: #0099de;
}

.faq-list .ans .a-cont {
  padding: 0 15px 14px 15px;
  font-size: 1.15rem;
  width: calc(100% - 50px);
  line-height: 1.8;
  text-align: left;
}

.faq-list .ans .faq-img img {
  max-width: 100%;
}

.faq-list .ans .faq-file img {
  width: 20px;
}

.faq-list .ans.active {
  visibility: visible;
  opacity: 1;
  position: static;
}

/* rwd側選單
-----------------------------------------------------*/
.rwd-nav {
  display: none;
}

.rwd-lev1 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #333;
}

.rwd-lev1>a {
  width: calc(100% - 45px);
}

.rwd-lev2:first-child {
  border-top: 0;
}

.rwd-lev2 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.rwd-lev2>a {
  width: calc(100% - 45px);
}

.rwd-lev3 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.rwd-lev3>a {
  width: calc(100% - 45px);
}

.rwd-main-nav .rwd-sub-nav .rwd-sub-nav .rwd-lev3 a:last-child::before {
  display: none;
}

.rwd-lev4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.rwd-lev4>a {
  width: calc(100% - 45px);
}

.rwd-main-nav .rwd-sub-nav .rwd-sub-nav .rwd-lev4 a:last-child::before {
  display: none;
}

.rwd-nav-search {
  padding: 0 15px;
  margin: 18px 0;
  width: 100%;
  display: none;
}

.rwd-nav-search input[type=text] {
  padding: 6px 8px;
  width: calc(100% - 74px);
  display: inline-block;
  vertical-align: top;
  border: 0;
  border-radius: 2px;
  font-size: 0.95rem;
}

button.search {
  background: #7f0020;
  border: 0;
  font-size: 0.9rem;
  color: #fff;
  width: 60px;
  padding: 5px 0 7px 0;
  border-radius: 2px;
  height: 34px;
  vertical-align: top;
}

.rwd-searbtn-wrap {
  margin: 0 0 0 6px;
  text-align: center;
  overflow: hidden;
  display: inline-block;
  width: 60px;
  flex-wrap: wrap;
}

.rwd-searbtn-wrap input[type=submit],
.rwd-searbtn-wrap a.adv-search {
  padding: 6px 5px;
  font-size: 0.95rem;
  border: 0;
  margin: 0;
  background-color: #7f0020;
  width: calc(50% - 4px);
  color: #fff;
  float: left;
  border-radius: 2px;
  font-weight: bold;
}

.rwd-searbtn-wrap input[type=submit] {
  margin-right: 4px;
}

.rwd-searbtn-wrap a.adv-search {
  margin-left: 4px;
}

.rwd-search-btn .btn {
  margin-right: 10px;
}

.rwd-search-btn .adv-btn {
  background-color: #004ea2;
}

.rwd-lang {
  margin: 0 15px;
  display: flex;
  align-items: flex-start;
}

.rwd-lang a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  margin: 0;
  flex: 1;
  border-radius: 0;
  line-height: 1;
  font-size: 0.95rem;
  font-weight: bold;
  background: #454545;
}

.rwd-lang a.current {
  color: #fff;
  background: #7f0020;
  padding: 10px 0;
  margin: 0;
  flex: 1;
}

.rwd-nav-wrap {
  float: left;
  width: 100%;
  margin: 0 0 20px 0px;
}

.rwd-nav-row {
  color: #FFF;
  border-bottom: 1px solid #444;
  width: 100%;
}

.rwd-nav-row a {
  display: block;
  width: 100%;
  padding: 15px 20px;
  font-size: 1.05rem;
  transition: none;
}

.rwd-nav-row a:active {
  background: transparent;
  /* color: #47a3da; */
}

.rwd-nav-row .arr {
  position: relative;
  background: url(../images/rwd_arr_open.png) 94% 50% no-repeat;
  background-size: 15px;
}

.rwd-nav-row .rwd-subnav {
  background: #454545;
  display: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rwd-nav-row .no-arr-close {
  background: url(../images/rwd_arr_close.png) 94% 50% no-repeat;
  background-size: 15px;
}

.rwd-nav-row:first-child .rwd-main-nav {
  border-top: 1px solid #333;
}

.rwd-lev12,
.rwd-lev2 {
  border-bottom: 1px solid #434343;
}

.rwd-lev12:last-child,
.rwd-lev2:last-child {
  border-bottom: 0;
}

.rwd-sub-nav {
  display: none;
  background: #333;
}

.rwd-nav-misc {
  float: left;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 0;
}

.rwd-nav-misc li {
  display: inline-block;
  width: 80%;
  margin: 0 10% 14px 10%;
  padding: 6px 5px;
  font-size: 1em;
  border: 1px solid #565656;
  border-radius: 4px;
}

.rwd-nav-misc li a {
  padding: 0;
  font-size: 0.85em;
}

.rwd-lev2.noLevel a {
  width: 100%;
}

.rwd-main-nav .rwd-sub-nav .rwd-sub-nav a {
  position: relative;
  padding-left: 33px;
}

.rwd-main-nav .rwd-sub-nav .rwd-sub-nav a::before {
  content: "";
  width: 5px;
  height: 5px;
  background: #ffffff;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  top: 23px;
  left: 22px;
}

/* rwd側選單 end
-----------------------------------------------------*/
/* 行動團隊
-----------------------------------------------------*/
.team-tabs-box .team-list {
  justify-content: center;
  flex-wrap: nowrap;
}

.team-tabs-box .team-list>li {
  width: 20%;
  min-width: 180px;
}

.team-tabs-box .team-list>li .tabs-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  margin-left: 5px;
  margin-right: 5px;
}

.team-tabs-box .team-list .active .tabs-item {
  background: #26acd0;
  color: #fff;
}

.team-tabs-box .team-list .courses-card .info .name {
  color: #099092;
}

.team-tabs-box .team-list .courses-card .info .txt {
  color: #666;
  line-height: 1.5;
  margin: 0;
  width: 100%;
  font-size: 1rem;
  font-weight: 300;
  margin: 0;
  padding: 0;
  color: #000;
  max-height: 3.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.team-intro-box {
  margin-top: 40px;
}

.team-intro-box img {
  width: 100%;
  display: block;
}

.team-txt {
  padding-right: 50px;
  line-height: 1.8;
}

.team-txt p {
  margin-top: 0;
  font-size: 1.0625rem;
}

.team-logo {
  align-items: flex-start;
}

.team-logo .link {
  width: 25px;
  margin-right: 10px;
}

.team-logo .link a {
  display: block;
  margin-bottom: 10px;
}

.team-logo .logo {
  margin: 0;
  padding: 0;
  width: calc(100% - 35px);
  border-radius: 10px;
  overflow: hidden;
}

.team-timeline {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  margin-top: 80px;
}

.team-timeline::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 6px;
  height: 100%;
  background-color: #ccc;
}

.team-timeline .team-timeline-row {
  width: 100%;
  margin-top: -250px;
}

.team-timeline .team-timeline-row:first-child {
  margin-top: 0;
}

.team-timeline .team-timeline-row.left {
  justify-content: flex-start;
}

.team-timeline .team-timeline-row.right {
  justify-content: flex-end;
}

.team-timeline .team-timeline-box {
  display: flex;
  flex-wrap: wrap;
  width: calc(50% + 35px);
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.team-timeline .team-timeline-box .cont-box {
  position: relative;
  width: calc(100% - 100px);
  background-color: #fff;
  border-radius: 10px;
  padding: 50px;
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-timeline .team-timeline-box .cont-box .date {
  display: block;
  width: 100%;
  font-size: 95%;
  margin-bottom: 5px;
  color: #23adc6;
}

.team-timeline .team-timeline-box .cont-box .title {
  width: 100%;
  display: block;
  font-size: 1.8rem;
  margin-bottom: 15px;
  line-height: 1.4;
}

.team-timeline .team-timeline-box .cont-box .img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
  padding-top: 50%;
  position: relative;
}

.team-timeline .team-timeline-box .cont-box .img img {
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
}

.team-timeline .team-timeline-box .cont-box p {
  width: 100%;
  font-size: 1.05rem;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-timeline .team-timeline-box .cont-box .more {
  color: #0a899f;
  display: flex;
  align-items: center;
  font-size: 92%;
  font-weight: 500;
}

.team-timeline .team-timeline-box .cont-box .more i {
  font-size: 80%;
}

.team-timeline .team-timeline-box .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  padding: 15px;
  background-color: #efb806;
  border-radius: 100%;
  margin-top: 50px;
}

.team-timeline .team-timeline-row.left .team-timeline-box {
  flex-direction: row-reverse;
}

.team-timeline .team-timeline-row.left .team-timeline-box .cont-box .triangle {
  width: 0;
  height: 0;
  position: absolute;
  right: -15px;
  top: 74px;
  border-bottom: solid 11px transparent;
  border-top: solid 11px transparent;
  border-left: solid 15px #ccc;
  border-right: solid 0 transparent;
}

.team-timeline .team-timeline-row.left .team-timeline-box .cont-box .triangle::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 1px;
  top: -10px;
  border-bottom: solid 10px transparent;
  border-top: solid 10px transparent;
  border-left: solid 14px #fff;
  border-right: solid 0 transparent;
}

.team-timeline .team-timeline-row.right .team-timeline-box {
  justify-content: space-between;
}

.team-timeline .team-timeline-row.right .team-timeline-box .cont-box .triangle {
  width: 0;
  height: 0;
  position: absolute;
  left: -15px;
  top: 74px;
  border-bottom: solid 11px transparent;
  border-top: solid 11px transparent;
  border-left: solid 0 transparent;
  border-right: solid 15px #ccc;
}

.team-timeline .team-timeline-row.right .team-timeline-box .cont-box .triangle::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 1px;
  top: -10px;
  border-bottom: solid 10px transparent;
  border-top: solid 10px transparent;
  border-left: solid 0 transparent;
  border-right: solid 14px #fff;
}

.team-timeline .history-btn {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.1rem;
  margin: 40px auto 0 auto;
  padding: 15px 30px;
  background-color: #0f94ac;
  color: #fff;
  border-radius: 150px;
}

.team-otherteam {
  margin: 80px 0;
}

.team-otherteam .title {
  display: block;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
}

.team-otherteam .title span {
  position: relative;
}

.team-otherteam .title span::before {
  content: "";
  display: block;
  width: 38px;
  height: 45px;
  position: absolute;
  background: url(../images/intro-title-other.png) 0 0 no-repeat;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
}

.team-otherteam .otherteam-list {
  margin-top: 50px;
}

.team-otherteam .otherteam-list .swiper-wrapper {
  justify-content: center;
}

.team-otherteam .otherteam-list .swiper-slide {
  text-align: center;
}

.team-otherteam .otherteam-list .swiper-slide a {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  width: 180px;
  height: 105px;
  display: block;
  margin: 0 auto;
  background-color: #fff;
}

.team-otherteam .otherteam-list .swiper-slide a img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.team-article {
  width: 96%;
  max-width: 960px;
  margin: 0 auto;
}

.team-article .team-article-header {
  margin-bottom: 30px;
}

.team-article .team-article-header .date {
  display: block;
  font-size: 1rem;
  color: #23adc6;
  margin-bottom: 15px;
}

.team-article .team-article-header .title {
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.6;
}

.team-article .team-article-cont {
  line-height: 1.6;
  font-size: 1.05rem;
}

.team-article .team-article-cont .img {
  margin: 30px 0;
  padding: 0;
}

/* 行動團隊 end
-----------------------------------------------------*/
.budget-item {
  background-color: #bdd9e6;
  width: 100%;
  padding: 10px;
  margin: 0;
}

.budget-self-financing {
  display: flex;
  padding: 10px;
  align-items: center;
  background-color: #eee;
  margin: 20px 0;
}

.changemaker-input>li,
.changemaker-member>li,
.dream-idea-member>li,
.dream-idea-budget>li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0;
  padding-right: 30px;
}

.changemaker-input>li:last-child,
.changemaker-member>li:last-child,
.dream-idea-member>li:last-child,
.dream-idea-budget>li:last-child {
  margin-bottom: 16px;
}

.changemaker-input>li label,
.changemaker-member>li label,
.dream-idea-member>li label,
.dream-idea-budget>li label {
  display: block;
  width: auto;
  margin-right: 15px;
}

.changemaker-input>li .cont,
.changemaker-member>li .cont,
.dream-idea-member>li .cont,
.dream-idea-budget>li .cont {
  flex: 1;
}

.schedule-list .thead .row,
.schedule-list .tbody .row,
.schedule-list .tfoot .row,
.active-location-list .thead .row,
.active-location-list .tbody .row,
.active-location-list .tfoot .row,
.budget-list .thead .row,
.budget-list .tbody .row,
.budget-list .tfoot .row,
.member-list .thead .row,
.member-list .tbody .row,
.member-list .tfoot .row,
.changemaker-budget-list .thead .row,
.changemaker-budget-list .tbody .row,
.changemaker-budget-list .tfoot .row {
  display: flex;
  flex-wrap: wrap;
}

.schedule-list .tbody .row,
.schedule-list .tfoot .row,
.active-location-list .tbody .row,
.active-location-list .tfoot .row,
.budget-list .tbody .row,
.budget-list .tfoot .row,
.member-list .tbody .row,
.member-list .tfoot .row,
.changemaker-budget-list .tbody .row,
.changemaker-budget-list .tfoot .row {
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.schedule-list .tbody:nth-child(odd) .row,
.active-location-list .tbody:nth-child(odd) .row,
.budget-list .tbody:nth-child(odd) .row,
.member-list .tbody:nth-child(odd) .row,
.changemaker-budget-list .tbody:nth-child(odd) .row {
  background-color: #eee;
}

.schedule-list .thead,
.active-location-list .thead,
.budget-list .thead,
.member-list .thead,
.changemaker-budget-list .thead {
  color: #fff;
  background-color: #0990a8;
}

.schedule-list .thead .row .th,
.schedule-list .tbody .row .td,
.schedule-list .tfoot .row .td,
.active-location-list .thead .row .th,
.active-location-list .tbody .row .td,
.active-location-list .tfoot .row .td,
.budget-list .thead .row .th,
.budget-list .tbody .row .td,
.budget-list .tfoot .row .td,
.member-list .thead .row .th,
.member-list .tbody .row .td,
.member-list .tfoot .row .td,
.changemaker-budget-list .thead .row .th,
.changemaker-budget-list .tbody .row .td,
.changemaker-budget-list .tfoot .row .td {
  padding: 10px 0.5rem;
  text-align: center;
}

.schedule-list .tbody .row .td .item-m,
.active-location-list .tbody .row .td .item-m,
.budget-list .tbody .row .td .item-m,
.member-list .tbody .row .td .item-m,
.changemaker-budget-list .tbody .row .td .item-m {
  display: none;
}

.schedule-list .btn-box,
.active-location-list .btn-box,
.budget-list .btn-box,
.member-list .btn-box,
.changemaker-budget-list .btn-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.schedule-list .btn-box .btn,
.active-location-list .btn-box .btn,
.budget-list .btn-box .btn,
.member-list .btn-box .btn,
.changemaker-budget-list .btn-box .btn {
  display: block;
  width: calc(50% - 0.8rem);
  max-width: 20px;
  margin: 3px 0.3rem;
}

.schedule-list .btn-box .btn img,
.active-location-list .btn-box .btn img,
.budget-list .btn-box .btn img,
.member-list .btn-box .btn img,
.changemaker-budget-list .btn-box .btn img {
  width: 100%;
  display: block;
}

.member-list .thead .row .th:nth-child(1),
.member-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.member-list .thead .row .th:nth-child(2),
.member-list .tbody .row .td:nth-child(2) {
  flex: 2;
}

.member-list .thead .row .th:nth-child(3),
.member-list .tbody .row .td:nth-child(3) {
  flex: 1;
}

.member-list .thead .row .th:nth-child(4),
.member-list .tbody .row .td:nth-child(4) {
  flex: 2;
}

.member-list .thead .row .th:nth-child(5),
.member-list .tbody .row .td:nth-child(5) {
  flex: 4;
}

.member-list .tbody .row .td:nth-child(5) {
  text-align: left;
}

.member-list .thead .row .th:nth-child(6),
.member-list .tbody .row .td:nth-child(6) {
  flex: 4;
}

.member-list .tbody .row .td:nth-child(6) {
  text-align: left;
}

.member-list .thead .row .th:nth-child(7),
.member-list .tbody .row .td:nth-child(7) {
  flex: 1;
}

.member-list .thead .row .th:nth-child(8),
.member-list .tbody .row .td:nth-child(8) {
  flex: 2;
}

.dream-idea-principal-list .thead .row .th:nth-child(1),
.dream-idea-principal-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.dream-idea-principal-list .thead .row .th:nth-child(2),
.dream-idea-principal-list .tbody .row .td:nth-child(2) {
  flex: 1;
}

.dream-idea-principal-list .thead .row .th:nth-child(3),
.dream-idea-principal-list .tbody .row .td:nth-child(3) {
  flex: 5;
}

.dream-idea-principal-list .tbody .row .td:nth-child(3) {
  text-align: left;
}

.dream-idea-principal-list .thead .row .th:nth-child(4),
.dream-idea-principal-list .tbody .row .td:nth-child(4) {
  flex: 1;
  text-align: center;
}

.dream-idea-principal-list .thead .row .th:nth-child(5),
.dream-idea-principal-list .tbody .row .td:nth-child(5) {
  flex: 1;
  text-align: center;
}

.dream-idea-principal-list .thead .row .th:nth-child(6),
.dream-idea-principal-list .tbody .row .td:nth-child(6) {
  flex: 1;
  text-align: center;
}

.dream-idea-member-list .thead .row .th:nth-child(1),
.dream-idea-member-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.dream-idea-member-list .thead .row .th:nth-child(2),
.dream-idea-member-list .tbody .row .td:nth-child(2) {
  flex: 1;
}

.dream-idea-member-list .thead .row .th:nth-child(3),
.dream-idea-member-list .tbody .row .td:nth-child(3) {
  flex: 7;
}

.dream-idea-member-list .tbody .row .td:nth-child(3) {
  text-align: left;
}

.dream-idea-member-list .thead .row .th:nth-child(4),
.dream-idea-member-list .tbody .row .td:nth-child(4) {
  flex: 1;
}

.dream-idea-budget-list .total-cost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.dream-idea-budget-list .thead .row .th:nth-child(1),
.dream-idea-budget-list .tbody .row .td:nth-child(1),
.dream-idea-budget-list .tfoot .row .td:nth-child(1) {
  flex: 1;
}

.dream-idea-budget-list .thead .row .th:nth-child(2),
.dream-idea-budget-list .tbody .row .td:nth-child(2),
.dream-idea-budget-list .tfoot .row .td:nth-child(2) {
  flex: 4;
}

.dream-idea-budget-list .tbody .row .td:nth-child(2) {
  text-align: left;
}

.dream-idea-budget-list .thead .row .th:nth-child(3),
.dream-idea-budget-list .tbody .row .td:nth-child(3),
.dream-idea-budget-list .tfoot .row .td:nth-child(3) {
  flex: 1;
}

.dream-idea-budget-list .thead .row .th:nth-child(4),
.dream-idea-budget-list .tbody .row .td:nth-child(4),
.dream-idea-budget-list .tfoot .row .td:nth-child(4) {
  flex: 2;
}

.dream-idea-budget-list .tbody .row .td:nth-child(4) {
  text-align: right;
}

.dream-idea-budget-list .thead .row .th:nth-child(5),
.dream-idea-budget-list .tbody .row .td:nth-child(5),
.dream-idea-budget-list .tfoot .row .td:nth-child(5) {
  flex: 2;
}

.dream-idea-budget-list .tbody .row .td:nth-child(5),
.dream-idea-budget-list .tfoot .row .td:nth-child(5) {
  text-align: right;
}

.dream-idea-budget-list .thead .row .th:nth-child(6),
.dream-idea-budget-list .tbody .row .td:nth-child(6),
.dream-idea-budget-list .tfoot .row .td:nth-child(6) {
  flex: 2;
}

.dream-idea-budget-list .thead .row .th:nth-child(7),
.dream-idea-budget-list .tbody .row .td:nth-child(7),
.dream-idea-budget-list .tfoot .row .td:nth-child(7) {
  flex: 1;
}

.dream-idea-budget-list .thead .row .th:nth-child(8),
.dream-idea-budget-list .tbody .row .td:nth-child(8),
.dream-idea-budget-list .tfoot .row .td:nth-child(8) {
  flex: 2;
}

.changemaker-member-list .thead .row .th:nth-child(1),
.changemaker-member-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.changemaker-member-list .thead .row .th>span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.changemaker-member-list .thead .row .th:nth-child(2),
.changemaker-member-list .tbody .row .td:nth-child(2) {
  flex: 1;
}

.changemaker-member-list .thead .row .th:nth-child(3),
.changemaker-member-list .tbody .row .td:nth-child(3) {
  flex: 1;
}

.changemaker-member-list .thead .row .th:nth-child(4),
.changemaker-member-list .tbody .row .td:nth-child(4) {
  flex: 1;
}

.changemaker-member-list .thead .row .th:nth-child(5),
.changemaker-member-list .tbody .row .td:nth-child(5) {
  flex: 2;
}

.changemaker-member-list .thead .row .th:nth-child(6),
.changemaker-member-list .tbody .row .td:nth-child(6) {
  flex: 2;
}

.changemaker-member-list .thead .row .th:nth-child(7),
.changemaker-member-list .tbody .row .td:nth-child(7) {
  flex: 2;
}

.changemaker-member-list .thead .row .th:nth-child(8),
.changemaker-member-list .tbody .row .td:nth-child(8) {
  flex: 2;
}

.changemaker-member-list .thead .row .th:nth-child(9),
.changemaker-member-list .tbody .row .td:nth-child(9) {
  flex: 3;
}

.changemaker-member-list .thead .row .th:nth-child(10),
.changemaker-member-list .tbody .row .td:nth-child(10) {
  flex: 1;
}

.changemaker-member-list .thead .row .th:nth-child(11),
.changemaker-member-list .tbody .row .td:nth-child(11) {
  flex: 1;
}

.changemaker-member-list .thead .row .th:nth-child(12),
.changemaker-member-list .tbody .row .td:nth-child(12) {
  flex: 1;
}

.changemaker-member-list .thead .row .th:nth-child(13),
.changemaker-member-list .tbody .row .td:nth-child(13) {
  flex: 1;
}

.active-location-list .thead .row .th:nth-child(1),
.active-location-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.active-location-list .thead .row .th>span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-location-list .thead .row .th:nth-child(2),
.active-location-list .tbody .row .td:nth-child(2) {
  flex: 2;
}

.active-location-list .thead .row .th:nth-child(3),
.active-location-list .tbody .row .td:nth-child(3) {
  flex: 2;
}

.active-location-list .thead .row .th:nth-child(4),
.active-location-list .tbody .row .td:nth-child(4) {
  flex: 3;
}

.active-location-list .thead .row .th:nth-child(5),
.active-location-list .tbody .row .td:nth-child(5) {
  flex: 2;
}

.schedule-list .thead .row .th:nth-child(1),
.schedule-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.schedule-list .thead .row .th>span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-list .thead .row .th:nth-child(2),
.schedule-list .tbody .row .td:nth-child(2) {
  flex: 4;
}

.schedule-list .thead .row .th:nth-child(3),
.schedule-list .tbody .row .td:nth-child(3) {
  flex: 4;
}

.schedule-list .thead .row .th:nth-child(4),
.schedule-list .tbody .row .td:nth-child(4) {
  flex: 2;
}

.effect-list .thead .row .th:nth-child(1),
.effect-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.effect-list .thead .row .th>span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.effect-list .thead .row .th:nth-child(2),
.effect-list .tbody .row .td:nth-child(2) {
  flex: 4;
}

.effect-list .thead .row .th:nth-child(3),
.effect-list .tbody .row .td:nth-child(3) {
  flex: 4;
}

.effect-list .thead .row .th:nth-child(4),
.effect-list .tbody .row .td:nth-child(4) {
  flex: 2;
}

.effect-list .thead .row .th:nth-child(5),
.effect-list .tbody .row .td:nth-child(5) {
  flex: 2;
}

.budget-source-list .thead .row .th:nth-child(1),
.budget-source-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.budget-source-list .thead .row .th>span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.budget-source-list .thead .row .th:nth-child(2),
.budget-source-list .tbody .row .td:nth-child(2) {
  flex: 4;
}

.budget-source-list .thead .row .th:nth-child(3),
.budget-source-list .tbody .row .td:nth-child(3) {
  flex: 4;
}

.budget-source-list .thead .row .th:nth-child(4),
.budget-source-list .tbody .row .td:nth-child(4) {
  flex: 2;
}

.budget-source-list .thead .row .th:nth-child(5),
.budget-source-list .tbody .row .td:nth-child(5) {
  flex: 2;
}

.budget-source-list .thead .row .th:nth-child(6),
.budget-source-list .tbody .row .td:nth-child(6) {
  flex: 2;
}

.changemaker-budget-list .thead .row .th:nth-child(1),
.changemaker-budget-list .tbody .row .td:nth-child(1) {
  flex: 1;
}

.changemaker-budget-list .thead .row .th>span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.changemaker-budget-list .thead .row .th:nth-child(2),
.changemaker-budget-list .tbody .row .td:nth-child(2) {
  flex: 3;
}

.changemaker-budget-list .thead .row .th:nth-child(3),
.changemaker-budget-list .tbody .row .td:nth-child(3) {
  flex: 1;
}

.changemaker-budget-list .thead .row .th:nth-child(4),
.changemaker-budget-list .tbody .row .td:nth-child(4) {
  flex: 2;
}

.changemaker-budget-list .thead .row .th:nth-child(5),
.changemaker-budget-list .tbody .row .td:nth-child(5) {
  flex: 2;
}

.changemaker-budget-list .thead .row .th:nth-child(6),
.changemaker-budget-list .tbody .row .td:nth-child(6) {
  flex: 2;
}

.changemaker-budget-list .thead .row .th:nth-child(7),
.changemaker-budget-list .tbody .row .td:nth-child(7) {
  flex: 2;
}

.changemaker-budget-list .thead .row .th:nth-child(8),
.changemaker-budget-list .tbody .row .td:nth-child(8) {
  flex: 2;
}

.other-experience-list .tbody .box {
  display: flex;
  flex-wrap: wrap;
}

.other-experience-list .tbody {
  border-bottom: 1px solid #eee;
}

.other-experience-list .tbody:nth-child(odd) {
  background-color: #eee;
}

.other-experience-list .tbody .box .subrow .wrap {
  border-bottom: 1px solid #eee;
}

.other-experience-list .tbody:nth-child(odd) .box .subrow .wrap {
  border-bottom: 1px solid #CCC;
}

.other-experience-list .tbody .box .subrow .wrap:last-child {
  border-bottom: 0;
}

.other-experience-list .thead .th,
.other-experience-list .tbody .td {
  padding: 10px 0.5rem;
  text-align: center;
}

.other-experience-list .thead .row .th:nth-child(1),
.other-experience-list .tbody .box .num {
  width: 100px;
}

.other-experience-list .thead .row .th>span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.other-experience-list .thead .row .th:nth-child(2),
.other-experience-list .tbody .box .name {
  width: 150px;
}

.other-experience-list .thead .subrow,
.other-experience-list .tbody .subrow {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 150px - 100px);
}

.other-experience-list .tbody .box .subrow .wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.other-experience-list .thead .subrow .th:nth-child(1),
.other-experience-list .tbody .box .subrow .wrap .plan {
  flex: 4;
}

.other-experience-list .tbody .box .subrow .wrap .plan {
  border-left: 1px solid #eee;
}

.other-experience-list .tbody:nth-child(odd) .box .subrow .wrap .plan {
  border-left: 1px solid #CCC;
}

.other-experience-list .thead .subrow .th:nth-child(2),
.other-experience-list .tbody .box .subrow .wrap .pyear {
  flex: 1;
}

.other-experience-list .thead .subrow .th:nth-child(3),
.other-experience-list .tbody .box .subrow .wrap .ptitle {
  flex: 4;
}

.other-experience-list .thead .subrow .th:nth-child(4),
.other-experience-list .tbody .box .subrow .wrap .ctrl {
  flex: 2;
}

.other-experience-list .thead .subrow .th:nth-child(5),
.other-experience-list .tbody .box .subrow .wrap .ctrl {
  flex: 2;
}

.other-experience-list .thead .subrow .th:nth-child(6),
.other-experience-list .tbody .box .subrow .wrap .ctrl {
  flex: 2;
}

/* 最新消息
-----------------------------------------------------*/
.news-intro-box {
  display: flex;
  margin-top: 40px;
  width: 100%;
}

.news-intro-box .news-article {
  width: 96%;
  max-width: 960px;
  margin: 0 auto;
}

.news-intro-box .news-article .news-article-header {
  margin-bottom: 30px;
}

.news-intro-box .news-article .news-article-header .date {
  display: block;
  font-size: 1rem;
  color: #23adc6;
  margin-bottom: 15px;
}

.news-intro-box .news-article .news-article-header .title {
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 0;
  margin: 0;
}

.news-intro-box .news-article .news-article-cont {
  overflow: hidden;
  line-height: 1.6;
  font-size: 1.05rem;
}

.news-intro-box .news-article .news-article-cont .img {
  display: block;
  width: 100%;
  margin: 30px 0;
  padding: 0;
}

.news-intro-box .news-article .news-article-cont .img img {
  display: block;
  width: 100%;
}

.news-intro-box .news-article .news-article-cont .img-right {
  float: right;
  display: block;
  width: 40%;
  margin: 0 0 30px 30px;
  padding: 0;
  justify-content: flex-end;
}

.news-intro-box .news-article .news-article-cont .img-right img {
  display: block;
  width: 100%;
}

.news-intro-box .news-article .news-article-cont .img-left {
  float: left;
  display: block;
  width: 40%;
  margin: 0 30px 30px 0;
  padding: 0;
  justify-content: flex-start;
}

.news-intro-box .news-article .news-article-cont .img-left img {
  display: block;
  width: 100%;
}

.page-slider-wrap .page-slider-for img {
  display: block;
  width: 100%;
}

/* 最新消息 end
-----------------------------------------------------*/
.relation-download,
.relation-link {
  font-size: 1rem;
  width: 96%;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 30px;
}

.relation-download li,
.relation-link li {
  width: 100%;
  display: flex;
  background: #fff;
  padding: 12px 15px;
  margin-bottom: 2px;
}

.relation-download>strong,
.relation-link>strong {
  background: #cceaeb;
  padding: 15px;
  width: 100%;
  display: block;
  font-size: 1.125rem;
  color: #000;
  border-radius: 5px;
  margin-bottom: 5px;
  font-weight: 400;
}

.relation-download li a,
.relation-link li a {
  display: flex;
  color: #222;
  width: 100%;
  align-items: center;
}

.relation-download li a span,
.relation-link li a span {
  display: block;
  color: #222;
  width: calc(100% - 44px);
  align-items: center;
}

.relation-download li .icon {
  width: 34px;
  margin-right: 8px;
}

.relation-link li a i {
  color: #333333;
  margin: 4px 6px;
  font-size: 1.625rem;
}

/*--下載專區--*/
.dl-tb {
  float: left;
  width: 100%;
  line-height: 30px;
}

.dl-thead {
  float: left;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.filename,
.filesort {
  float: left;
  background: #26acd0;
  color: #fff;
  text-align: center;
  padding: 8px 0;
}

.filename,
.filename-cont {
  width: 65%;
  margin-right: 1px;
}

.filesort,
.filesort-cont {
  width: calc(35% - 1px);
}

.filename-cont,
.filesort-cont {
  float: left;
  padding: 15px 0;
}

.filename-cont {
  padding-left: 2%;
  padding-right: 2%;
}

.filesort-cont {
  text-align: center;
}

.filesort-cont a {
  display: inline-block;
  vertical-align: top;
}

.filename-cont p {
  margin: 0 0 4px 0;
  float: left;
  width: 100%;
}

.filesort-cont img {
  display: inline-block;
  width: 42px;
  vertical-align: top;
  height: 42px;
}

.dl-tcont {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
}

.dl-tcont:nth-child(odd) {
  background: #fff5f2;
}

/* 網站導覽
-----------------------------------------------*/
.accessibility {
  width: 100%;
  background: #f5f5f5;
  padding: 25px 3%;
  line-height: 35px;
  border-radius: 6px;
  margin-bottom: 40px;
}

.sitemap-cont {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.sitemap-box {
  width: calc(33.3333333333% - 10px);
  margin: 0 20px;
}

.sm-title {
  width: 95%;
  font-size: 1.15em;
  color: #fff;
  padding: 6px 0 6px 5%;
  /* border-bottom: 1px solid #ff6a43; */
  margin-bottom: 20px;
  background: #ff6a43;
}

.sm-title a {
  color: #fff;
}

.sitemap-box ul {
  width: 95%;
  padding: 0 0 0 5%;
}

.sitemap-box ul li {
  width: 100%;
  margin: 0 0 6px 0;
}

.sitemap-box ul li a:hover {
  color: #ff6a43;
}

/* 網站導覽 end
-----------------------------------------------*/
/* 學習性青聚點提案
-----------------------------------------------*/
.spot-apply-form-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 30px;
  position: relative;
}

.spot-apply-form-box .site-side {
  top: 0;
  position: absolute;
  height: auto;
}

.spot-apply-form-header {
  background-color: #23adc6;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.spot-apply-form-header .title {
  color: #fff;
}

.spot-apply-form-subheader {
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.spot-apply-tabs-box li {
  width: calc(20% - 20px);
  margin: 0 10px 20px 10px;
}

.spot-apply-tabs-box li .tabs-item {
  margin: 0 !important;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.spot-apply-form {
  width: calc(100% - 320px);
  margin-left: 320px;
}

.spot-apply-form .apply-form {
  padding: 5px 15px 15px 15px;
}

.spot-apply-form .spot-apply-form-table {
  min-width: 800px;
}

.spot-apply-table {
  background-color: #fff;
}

/* 學習性青聚點提案 end
-----------------------------------------------*/
/* 左側選單 
-----------------------------------------------------*/
.site-side {
  width: 290px;
  height: calc(100% - 220px);
  overflow: hidden;
  background: #fff;
  padding: 10px 20px;
}

.site-side-inner {
  height: 100%;
}

.site-side-hide {
  left: -290px;
}

.side-menu ul {
  margin-left: 20px;
}

.side-menu li {
  position: relative;
}

.side-menu a {
  color: #222;
  display: block;
  position: relative;
}

.lev1>li {
  border-bottom: 1px solid #ccc;
}

.lev1>li:last-child {
  border-bottom: 0;
}

.lev1 a {
  padding: 16px 30px 16px 16px;
}

.lev2 {
  margin: 0 auto 10px auto;
}

.lev2 a {
  padding: 8px 30px 8px 16px;
  border-bottom: 0;
}

.side-menu .arrow {
  display: inline-block;
  position: absolute;
  right: 13px;
  font-size: 0.65rem;
  transition: linear 300ms;
}

.lev1 .arrow {
  top: 19px;
}

.lev2 .arrow {
  top: 16px;
}

.side-menu .panel-collapsed .arrow {
  transform: rotate(-90deg);
}

.side-menu .lev2 .panel-collapsed .arrow {
  top: 16px;
  right: 13px;
}

.lev1 .icon {
  position: absolute;
  top: 19px;
  left: 14px;
  height: 24px;
  color: #1f92b4;
  font-size: 1.25rem;
}

.lev1 .fa-file-alt.icon {
  left: 18px;
}

.lev1 .fa-pen.icon {
  left: 16px;
  font-size: 1.1rem;
}

.side-menu .collapsein {
  display: block;
}

.lev3 {
  display: block;
}

.lev3.show {
  display: block;
}

.side-menu .dot {
  background: #1f92b4;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 23px;
  left: 4px;
  display: block;
  border-radius: 100%;
}

.side-menu .collapsein.active {
  display: block;
}

.lev2>li::before,
.lev2>li::after {
  background: #aaa;
}

.lev2>li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}

.lev2>li:last-child:before {
  bottom: auto;
  height: 20px;
}

.lev2>li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 8px;
  height: 1px;
}

.lev3>li {
  position: relative;
}

.lev3>li::before,
.lev3>li::after {
  background: #aaa;
}

.lev3>li:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}

.lev3>li:last-child:before {
  bottom: auto;
  height: 20px;
}

.lev3>li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 8px;
  height: 1px;
}

/* 左側選單 end
-----------------------------------------------------*/
.info-wrap {
  display: block;
  width: 100%;
  margin: 20px 0 5px 0;
  overflow: hidden;
}

.info-wrap .btn-box {
  display: flex;
  float: right;
}

.info-wrap .btn-box .btn {
  font-size: 0.96rem;
  font-size: 90%;
  padding: 6px 11px;
  border-radius: 150px;
  border-radius: 4px;
  margin: 0 0 0 6px;
  color: #fff;
  display: block;
  background: #e86869;
  text-align: center;
  text-decoration: none;
}

.info-wrap .btn-box .btn i {
  margin-right: 5px;
}

.info-wrap .search-total {
  float: left;
  margin: 14px 0 0 0;
  padding: 0;
}

.info-wrap .search-total strong {
  color: #ff6056;
  margin: 0 2px;
}

.table-item {
  position: relative;
  display: block;
  width: 100%;
  color: #222;
  padding-left: 16px;
  margin-bottom: 5px;
  /* padding: 8px;
  background-color: #eee; */
}

.table-item a {
  color: #222;
}

.table-item::before {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-color: #222;
  top: 10px;
  left: 5px;
  z-index: 1;
}

.table-subitem {
  position: relative;
  display: block;
  width: 100%;
  color: #222;
  padding-left: 0;
  margin-bottom: 5px;
  /* padding: 8px;
  background-color: #eee; */
}

.table-add {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 8px 0 0 0 !important;
  padding: 10px 8px;
  border-top: 1px solid #ccc !important;
}

.table-add .table-add-list {
  display: flex;
  width: calc(100% - 90px);
}

.table-add .table-add-list li {
  margin: 0 10px 0 0;
  width: 33.3333333333%;
}

.fast-nav-wrap {
  position: fixed;
  right: -108px;
  top: 25%;
  z-index: 2;
  width: 146px;
}

.fast-nav-wrap .fast-nav-switch {
  float: left;
  position: relative;
  color: #fff;
  font-size: 0.938em;
  font-weight: bold;
  background: url(../images/fastlink-arr1.png) center center no-repeat #26acd0;
  padding: 8px 12px;
  background-size: 13px;
  display: block;
  width: 38px;
  height: 38px;
  border-top-left-radius: 5px;
  line-height: 18px;
  border-bottom-left-radius: 5px;
}

.fast-nav-wrap .fast-nav-open {
  background: url(../images/fastlink-arr2.png) center center no-repeat #26acd0;
  background-size: 13px;
}

.fast-nav-wrap .fast-nav-close {
  background: url(../images/fastlink-arr1.png) center center no-repeat #26acd0;
  background-size: 13px;
}

.fast-nav-wrap ul.fast-nav {
  float: left;
  background: #ffffff;
  text-align: center;
  padding: 0;
  margin: 0;
  width: calc(100% - 52px);
  /* box-shadow: 0 0 15px 0px #eaeaea; */
}

.fast-nav-wrap ul.fast-nav li {
  float: left;
  width: 100%;
  border-bottom: 2px dotted #d0d0d0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fast-nav-wrap ul.fast-nav li a {
  display: block;
  width: 92px;
  padding: 10px;
  text-align: center;
  color: #fff;
  border-right: 1px solid #dcdcdc;
  background: #26acd0;
}

.fast-nav-wrap ul.fast-nav li a:hover {
  background: #0f7c9b;
}

.fast-nav-wrap ul.fast-nav li a p {
  font-size: 0.8em;
  margin: 0;
  line-height: 17px;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fast-nav-wrap ul.fast-nav li a img {
  width: 50%;
}

.fast-nav-wrap ul.fast-nav li:last-child {
  border-bottom: 0;
}

.about {
  line-height: 1.8;
}

.about .about-title {
  width: 100%;
  display: block;
  font-weight: 500;
  font-size: 1.6rem;
  color: #222;
  position: relative;
  padding: 0;
  margin: 0 0 10px 0;
}

.about .about-subtitle {
  font-size: 1.2rem;
  color: #1d8cad;
  position: relative;
  padding: 0;
  margin: 0 0 5px 0;
}

.about .about-txt {
  padding: 0 0 0 0px;
  margin: 0 0 20px 0;
}

.about .about-img {
  width: 90%;
  max-width: 900px;
  margin: 0 auto 20px auto;
  background-color: #fff;
  padding: 20px;
}

.about .about-img img {
  display: block;
  width: 100%;
}

/* 團隊介紹 */
.team-query {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.team-query .team-map {
  width: 25%;
}

.team-query .team-content {
  width: 65%;
}

.team-query .tabs-list {
  justify-content: space-between;
}

.team-query .tabs-list>li {
  width: calc(100% / 4 - 20px);
}

.team-query .tabs-list>li .tabs-item {
  margin-right: 0;
}

.team-query .tabs-list>li.active .tabs-item {
  color: #fff;
}

.team-query .tabs-list>li.active .tabs-item.north {
  background-color: #23adc6;
}

.team-query .tabs-list>li.active .tabs-item.midden {
  background-color: #8bc180;
}

.team-query .tabs-list>li.active .tabs-item.south {
  background-color: #218b85;
}

.team-query .tabs-list>li.active .tabs-item.east {
  background-color: #85cbbf;
}

.team-query .tabs-list>li.active .tabs-item.island {
  background-color: #9A6994;
}

.team-location-box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.team-location-box a {
  display: flex;
  border-radius: 30px;
  justify-content: center;
  border: 1px solid #bbb;
  color: #666;
  line-height: 1;
  padding: 10px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 95px;
  font-size: 1.05rem;
}

.team-location-box .active {
  background-color: #ffddd3;
  border: 1px solid #ffddd3;
  color: #000;
}

.team-box-year {
  margin-bottom: 60px;
}

.team-box-year .year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5rem;
  font-weight: 500;
  width: 100%;
  border-bottom: 1px solid #666;
  padding-bottom: 8px;
  color: #000;
}

.team-box-year .year .open,
.team-box-year .year .close {
  font-size: 65%;
}

.team-box-year .year.hidden .open {
  display: block;
}

/* by david 20240104
.team-box-year .year .open {
  display: none;
}
*/

.team-box-year .year.hidden .close {
  display: none;
}

.team-box-year .year .close {
  display: block;
}

.team-box-year .cont {
  visibility: visible;
  opacity: 1;
  position: static;
  margin-bottom: 30px;
}

.team-box-year .cont.hidden {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: -1;
  display: flex;
  margin-top: 15px;
}

.team-query-box {
  position: relative;
  margin-bottom: 50px;
}

.team-query-box .team-query-title {
  position: relative;
  font-weight: 500;
  font-size: 1.35rem;
  color: #165e87;
  padding-left: 28px;
  line-height: 1.3;
  text-align: left;
}

.team-query-box .team-query-title::before {
  content: "";
  position: absolute;
  border-radius: 100%;
  width: 7px;
  height: 7px;
  background-color: #165e87;
  left: 15px;
  top: 11px;
}

.team-query-box .team-logo {
  width: 88%;
  padding: 0;
  margin: 0 auto;
  border-radius: 30px 10px 30px 10px;
  overflow: hidden;
  background-color: #fff;
  position: relative;
  padding-top: 65%;
  display: block;
}

.team-query-box .team-logo img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.team-query-box .swiper-button-next,
.team-query-box .swiper-button-prev {
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 40%;
  width: 30px;
  height: 30px;
  background-color: #999;
  background-size: 20px;
  background-repeat: no-repeat;
}

.team-query-box .swiper-button-next:after,
.team-query-box .swiper-button-prev:after {
  display: none;
}

.team-query-box .swiper-button-prev {
  left: 0;
  background-image: url(../images/arr-left-white.svg);
  background-position: 4px center;
}

.team-query-box .swiper-button-next {
  right: 0;
  background-image: url(../images/arr-right-white.svg);
  background-position: 6px center;
}

.team-query-box .info {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.3;
}

.team-query-box .info .name {
  display: block;
  color: #000;
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 8px;
}

.team-map .twmap-box {
  position: relative;
}

.team-map .twmap-box .close {
  display: none;
}

.team-map .twmap-box svg {
  width: 100%;
  position: relative;
}

.team-map .twmap-box g {
  cursor: pointer;
}

.team-map .twmap-box .cls-1 {
  fill: #23adc6;
}

.team-map .twmap-box .cls-1,
.team-map .twmap-box .cls-2,
.team-map .twmap-box .cls-3,
.team-map .twmap-box .cls-4,
.team-map .twmap-box .cls-5,
.team-map .twmap-box .cls-6,
.team-map .twmap-box .cls-7,
.team-map .twmap-box .cls-8,
.team-map .twmap-box .cls-9 .team-map .twmap-box .cls-10,
.team-map .twmap-box .cls-11 {
  stroke-width: 0px;
}

.team-map .twmap-box .cls-2 {
  fill: #8bc180;
}

.team-map .twmap-box .cls-3 {
  fill: #fff;
}

.team-map .twmap-box .cls-4 {
  fill: #126660;
}

.team-map .twmap-box .cls-5 {
  fill: #3e7730;
}

.team-map .twmap-box .cls-6 {
  fill: #418074;
}

.team-map .twmap-box .cls-7 {
  fill: #85cbbf;
}

.team-map .twmap-box .cls-8 {
  fill: #178a99;
}

.team-map .twmap-box .cls-9 {
  fill: #218b85;
}

.team-map .twmap-box .cls-10 {
  fill: #9A6994;
}

.team-map .twmap-box .cls-11 {
  fill: #5F3C5C;
}

/* 團隊介紹 end */

.page .event-calendar .month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background-color: var(--calColor1-2);
  padding: 8px 10px;
  color: #333;
  font-weight: 500;
}
.page .event-calendar .month p {
  margin: 0;
  font-size: var(--fontsize-lg-3);
}
.page .event-calendar .month a {
  color: #333;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background: #fff;
  width: 30px;
  height: 30px;
}
.page .event-calendar .month a .material-symbols-rounded {
  font-size: 20px;
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 40;
}
.page .event-calendar .calendar-box {
  padding: 5px 5px;
  background-color: var(--calColor3-1);
}
.page .event-calendar .calendar-box .head,
.page .event-calendar .calendar-box .week {
  display: flex;
  font-size: var(--fontsize-md);
}
.page .event-calendar .calendar-box .head .box,
.page .event-calendar .calendar-box .week .box {
  width: calc(14.2857142857% - 8px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px;
  border-radius: var(--border-radius-sm);
  border: 2px solid var(--calColor1);
  flex-wrap: wrap;
}
.page .event-calendar .calendar-box .head .box {
  padding: 10px 15px;
  background-color: var(--calColor3-2);
  color: #333;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .page .event-calendar .calendar-box .head {
    display: none;
  }
}
.page .event-calendar .calendar-box .week .box {
  padding: 4px 0;
  background-color: #fff;
  align-items: flex-start;
  min-height: 150px;
}
.page .event-calendar .calendar-box .week .box .date {
  width: 90%;
  display: block;
  padding: 3px 0 10px 0;
  text-align: center;
  font-weight: 500;
  border-bottom: 2px dotted #ccc;
}
.page .event-calendar .calendar-box .week .box.disable {
  background-color: rgba(0, 0, 0, 0.0705882353);
}
.page .event-calendar .calendar-box .week .box .rwd_date {
  display: none;
}
@media (max-width: 1024px) {
  .page .event-calendar .calendar-box .week {
    flex-wrap: wrap;
  }
  .page .event-calendar .calendar-box .week .box {
    width: 100%;
    min-height: 50px;
    justify-content: flex-start;
  }
  .page .event-calendar .calendar-box .week .box .date {
    width: 100px;
    border-bottom: 0;
    padding: 12px 0;
  }
  .page .event-calendar .calendar-box .week .box.disable {
    display: none;
  }
  .page .event-calendar .calendar-box .week .box .h-full {
    width: calc(100% - 100px);
    border-left: 2px dotted #ccc;
  }
  .page .event-calendar .calendar-box .week .box .rwd_date {
    display: block;
  }
}
.page .event-calendar .calendar-box .event-data {
  width: 90%;
  margin: 0 auto;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-ccc);
}
.page .event-calendar .calendar-box .event-data:last-child {
  border-bottom: 0;
}
.page .event-calendar .calendar-box .event-data li {
  padding: 2px 0;
}
.page .event-calendar .calendar-box .event-data .time {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--calColor1-5);
  font-weight: 600;
}
.page .event-calendar .calendar-box .event-data .time .material-symbols-rounded {
  font-size: 18px;
  margin-top: 2px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.page .event-calendar .calendar-box .event-data .pavilion {
  font-size: 80%;
}
.page .event-calendar .calendar-box .event-data .category {
  font-size: 70%;
  color: var(--calColor3-5);
}
.page .event-calendar .calendar-box .event-data .category span {
  border: 1px solid #ccc;
  display: flex;
  padding: 2px 8px;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--border-radius-sm);
}
.page .event-calendar .calendar-box .event-data .name {
  font-size: var(--fontsize-sm-3);
}
.page .event-calendar .calendar-box .event-data .name a {
  color: var(--calColor2-4);
  text-decoration: underline;
}
.page .event-calendar .calendar-box .event-data .name a:hover {
  color: var(--calColor6-5);
  text-decoration: none;
}
.page .event-calendar .calendar-box .event-data .quota p {
  margin: 0;
  font-size: 80%;
}
.page .event-calendar .calendar-box .event-data .quota p strong {
  color: var(--calColor6-5);
  margin-right: 2px;
}
.page .event-calendar .calendar-box .event-data .btn-wrap {
  padding: 0;
  padding-top: 10px;
}
.page .event-calendar .calendar-box .event-data .btn-wrap .btn {
  width: 100%;
  font-size: 80%;
  padding: 8px 0;
  background-color: var(--calColor5-5);
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page .event-calendar .calendar-box .event-data .btn-wrap .btn.end {
  background-color: #999;
}
.page .event-calendar .calendar-box .event-data .btn-wrap .btn.full {
  background-color: var(--calColor6-5);
}

.h-full {
	width: 100%;
}

/* popup */

.modal-overlay {
  padding: 0;
  border: none;
  background: white;
  border-radius: 8px;
  /* top: 25%;
  left: 25%;
  transform: translate(-50%, -50%); */
}

.modal-overlay::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  background: white;
  padding: 25px;
  border-radius: 8px;
  /* width: 300px; */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal .btn-wrap .btn.apply {
	background-color: var(--calColor5-5);
} 

.btn-wrap .btn.conti {
	background-color: var(--calColor7-5) !important;
}

body.modal-open {
  overflow: hidden;
}