/*
@media query (rwd) 手機優先
大版 左到右順序：側邊圖,徵才職缺,公司介紹內容,人物誌
手機版 左到右順序：側邊圖,公司介紹內容,徵才職缺,人物誌
*/
html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  line-height: 1.8em;
  color: #333333;
  font-family: "Noto Sans TC", "Roboto", Arial, "Microsoft JhengHei", "新細明體",
    Helvetica, sans-serif;
  background-color: #efefef;
}

::selection {
  background-color: #d8f3ff;
  color: #121212;
}

a {
  color: #3da9fc;
  transition: 0.3s ease-in;
}

a:active,
a:hover,
a:focus {
  text-decoration: none;
}

img {
  vertical-align: top;
}

ul {
  list-style: none;
  padding-left: 0px;
}

/******
 共用元件
*******/
.btn-more {
  color: #ff6b00;
  display: block;
  text-align: center;
  box-shadow: none;
  padding-left: 0;
  font-size: 1.2rem;
  transition: 0.3s ease-in;
  transform: translateX(0);
}
.btn-more:active,
.btn-more:focus,
.btn-more:hover {
  transform: translateX(20px);
}
.btn-more i {
}

/* ------------------------------
                kv
   ------------------------------ */
.kv_list {
  width: 100%;
  height: 30vh;
  background-color: #efefef;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.kv-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}

.kv-content:before {
  position: relative;
  content: "";
  display: inline-block;
  width: 0;
  height: 20%;
  /*依據kv高度調整位置，改變kv主文字位置*/
  vertical-align: middle;
}
.kv-teams-info .kv-content:before {
  height: 30%;
  /*團隊戰報kv文字高度位置*/
}

.kv-title {
  font-size: 2.8rem;
  line-height: 2;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.2rem;
  text-shadow: 2px 2px 4px #333333;
}

@media (max-width: 576px) {
  .kv {
    height: 20vh;
  }

  .kv-content {
    width: 90%;
  }

  .select {
    width: 80%;
  }
}

/* ------------------------------
       sec-inner-page layout
   ------------------------------ */
.sec-inner-page {
  background-color: #ebeaea;
  position: relative;
}
/* 內容區外層 - contentbox */
.inner-contentbox {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/* aside 側邊欄 */
.aside {
  position: relative;
  padding: 0;
}
.side-imgbox {
  padding: 0 1rem 1rem;
  text-align: center;
  width: 100%;
}
.side-imgbox .img {
  width: 100%;
  max-width: 350px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

/* 內容區 content */
.inner-content-info,
.inner-recruit-cover,
.inner-content-txt,
.inner-content-cards,
.inner-content-innerStripCards {
  background-color: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
}
.content-border-bottom::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin-left: auto;
}
/*  */
.inner-content-info {
}

/*  */
.inner-content-txt {
  padding-top: 1.5rem;
}
.inner-content-txt .intro {
  padding-bottom: 0.5rem;
}
.intro-figure {
  text-align: center;
  display: block;
}
.intro-figure img {
}
.intro-figure .figure-caption {
}

.inner-content-txt {
  font-size: 1rem;
}
.inner-content-txt p {
}
.inner-content-txt ul {
  list-style: disc;
  padding-left: 1.5rem;
}
.inner-content-txt ol {
  padding-left: 1.5rem;
}
.inner-content-txt ol li::marker {
  font-weight: 700;
  padding-left: 10px;
}
.inner-content-txt blockquote {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  border-left: 5px solid rgb(219 219 219);
  font-size: 1.2rem;
  font-weight: normal;
  color: #888;
  line-height: 1.6;
}

/*  */
/* .inner-recruit-cover {
    padding: 1.5rem 1rem;
}
.recruitbox {
    padding: 0;
}
.recruitbox .btn-more  {}
.recruit-title {}
.recruit-list {}
.recruit-list li {
    padding-bottom: 0.5rem;
}
.recruit-list li .link {
    display: inline-block;
    line-height: 1.6;
    color: #003490;
}
.recruit-list li .link:active, .recruit-list li .link:hover, .recruit-list li .link:focus {
    color: #3da9fc;
} */

/* Crads */
.inner-content-cards {
}
.inner-content-cards .til {
  margin: 1rem 0;
  text-align: center;
}
.innerCard-group {
  width: 100%;
  margin-left: -10px;
  margin-right: -10px;
}
.innerCard {
  text-align: center;
  margin: 1% 0 2%;
  padding: 10px;
  transform: translateY(0);
  transition: 0.3s ease-in;
}
.innerCard a {
  display: block;
  color: #003490;
}
.innerCard a:focus,
.innerCard a:hover,
.innerCard a:active {
  box-shadow: 0 0 10px #a8dcff;
  transform: translateY(3px);
  opacity: 0.9;
}
.innerCard .img-coverbox {
  overflow: hidden;
  margin: auto;
  border: 0.5px solid #efefef;
}
.innerCard .img-cover {
  width: 100%;
  max-width: 100%;
  transform: scale(1);
  transition: 0.3s ease-in;
}
.innerCard:focus .img-cover,
.innerCard:hover .img-cover,
.innerCard:active .img-cover {
  transform: scale(1.1);
  opacity: 0.8;
}
.innerCard-txtbox {
  text-align: left;
  padding: 1rem;
  border: 0.5px solid #ddd;
  border-top-width: 0px;
}

.innerCard-txtbox .head {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.innerCard-txtbox .txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.6;
  opacity: 0.7;
  color: #333;
}

/* Strip Crads */
.inner-content-innerStripCards {
}
.inner-content-innerStripCards .til {
}
.innerStripCard-group {
  width: 100%;
  margin-left: -10px;
  margin-right: -10px;
}
.innerStripCard {
  padding: 10px;
  border-bottom: 1px solid #dddddd;
}
.innerStripCard:last-child {
  border-bottom: none;
}
.innerStripCard .link {
  color: #003490;
  width: 100%;
  margin: 0;
}
.innerStripCard .link:focus,
.innerStripCard .link:hover,
.innerStripCard .link:active {
  /* box-shadow: 0 0 10px #a8dcff;
    transform: translateY(3px); */
  opacity: 0.9;
}

.innerStripCard .img-coverbox {
  overflow: hidden;
  margin: auto;
  padding: 0;
  border: 1px solid #efefef;
}
.innerStripCard .img-cover {
  width: 100%;
  max-width: 100%;
  transform: scale(1);
  transition: 0.3s ease-in;
}
.innerStripCard:focus .img-cover,
.innerStripCard:hover .img-cover,
.innerStripCard:active .img-cover {
  transform: scale(1.1);
  opacity: 0.8;
}
.innerStripCard-txtbox {
  text-align: left;
  padding: 1rem;
}

.innerStripCard-txtbox .head {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 0.5rem;
  color: #333;
}

.innerStripCard-company {
}

.inner-content-innerStripCards .btn-more {
  margin-top: 1rem;
}
@media (min-width: 768px) {
  /* ------------------------------
        sec-inner-page
    ------------------------------ */
  .sec-inner-page {
    background: linear-gradient(
      90deg,
      #eaeaea 0%,
      #eaeaea 32%,
      #fff 32%,
      #fff 100%
    );
  }
  /* contentbox */
  .inner-contentbox {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
  /* aside 側邊欄 */
  .aside {
    position: absolute;
  }
  .side-imgbox {
    /* position: absolute; */
    padding: 1rem 0 1rem 1rem;
    text-align: left;
  }
  .side-imgbox .img {
    max-width: 180px;
  }

  .inner-content-info,
  .inner-recruit-cover,
  .inner-content-txt,
  .inner-content-cards,
  .inner-content-innerStripCards {
    background-color: transparent;
  }
  .content-border-bottom::after {
  }

  .inner-content-info {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .book-title {
  }
  /* .book-sub {} */
  .book-infobox {
  }
  .book-infobox .info-li {
  }
  .book-infobox .info-li strong {
  }
  .book-infobox .info-li .link {
  }
  .book-socialbox {
    display: inline-block;
  }
  .book-socialbox .share {
    margin: 0px 10px;
  }
  .book-socialbox .share i {
  }

  .inner-content-txt {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .inner-content-txt p {
  }
  .inner-recruit-cover {
    /* position: absolute;
        top: 300px; */
  }
  .recruitbox {
  }
  .recruit-title {
  }
  .recruit-list {
  }
  .recruit-list li {
  }
  .recruit-list li .link {
  }
  .recruitbox .btn-more {
    text-align: left;
  }
  .recruitbox .btn-more i {
  }

  /* cards */
  .inner-content-cards {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .inner-content-cards .til {
    text-align: left;
  }
  .innerCard-group {
  }
  .innerCard .img-coverbox {
  }
  .innerCard .img-cover {
  }
  .innerCard-txtbox .head {
  }
  .innerCard-txtbox .txt {
  }

  /* strip cards */
  .inner-content-innerStripCards {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .inner-content-innerStripCards .til {
  }
  .innerStripCard-group {
  }
  .innerStripCard {
  }
  .innerStripCard .link {
  }
  .innerStripCard .img-coverbox {
  }
  .innerStripCard .img-cover {
  }
  .innerStripCard-txtbox .head {
  }
  .innerStripCard-txtbox .txt {
  }
}

/*************** 
    專屬 book-page 元件 
*****************/
.kv_list.book_page {
  background-image: url(/static/2023ironman/img/books/bg-book.jpg);
  height: 20vh;
}

/* aside 側邊欄 */
.aside-book {
}
.side-imgbox {
  background-color: #fff;
  border: 1px Solid #cdcdcd;
  text-align: center;
  margin: 1rem 0;
}
.side-imgbox .img {
  width: 100%;
  max-width: 180px;
  background-color: #fff;
  border: none;
}

.btn-back {
  display: block;
  font-size: 20px;
  margin: 0.5rem 0;
  color: #fff;
  text-align: center;
  background-color: #3da9fc;
  transition: 0.3s ease-in;
  transform: translateX(0);
}
.btn-back:active,
.btn-back:focus,
.btn-back:hover {
  transform: translateX(0px);
  color: #fff;
}
.btn-back i {
}

.btn-outside {
  display: block;
  margin: 0.5rem 0;
  font-size: 20px;
  color: #fff;
  background-color: #16356c;
  transition: 0.3s ease-in;
  transform: translateX(0);
}
.btn-outside:active,
.btn-outside:focus,
.btn-outside:hover {
  transform: translateX(0px);
  color: #fff;
}
.btn-outside i {
}

/* inner-content-info */

.badge-award {
  color: #a649b6;
  font-size: 18px;
  font-weight: 500;
  padding: 0;
  margin: 0.5rem 0;
}
.badge-award i {
}
.badge-award img {
  width: 24px;
  vertical-align: bottom;
}
.book-title {
  line-height: 1.4;
}
/* .book-sub {
    color: #676767;
} */
.book-infobox {
  color: #676767;
  padding: 10px 0;
}
.book-infobox .info-li {
  padding-bottom: 0.5rem;
  display: -ms-flexbox;
  display: flex;
}
.book-infobox .info-li span {
  width: 80px;
  height: 100%;
  display: inline-block;
  /* padding: 8px 20px; */
  margin-right: 10px;
  background-color: #16356c;
  color: #fff;
  text-align: center;
  flex-shrink: 0;
}
.book-infobox .info-li .link {
}

/* desktop */
@media (min-width: 768px) {
  .kv_list.book_page {
    height: 30vh;
  }
  .btn-back {
    text-align: left;
    background-color: transparent;
    color: #3da9fc;
  }
  .btn-back:active,
  .btn-back:focus,
  .btn-back:hover {
    transform: translateX(-10px);
    color: #3da9fc;
  }
  .btn-back i {
  }

  .btn-outside {
    background-color: transparent;
    color: #16356c;
  }
  .btn-outside:active,
  .btn-outside:focus,
  .btn-outside:hover {
    transform: translateX(20px);
    color: #16356c;
  }
  .btn-outside i {
  }

  .side-imgbox .img {
  }
}

/*************** 
    專屬 book-list 元件 
*****************/
.kv_list.book_list {
  background-image: url(/static/2023ironman/img/books/bg-book.jpg);
  height: 50vh;
}
.sec-inner-list {
  position: relative;
  padding: 2rem 0;
  background-color: #fff;
}
.kv-content:before {
  height: 40%;
}
.list-header {
  padding: 2rem 0;
}

/* search bar from 團隊列表頁 start */
.search-bar {
  border-radius: 20px 0 0 20px;
  padding: 10px;
}

.btn-search {
  color: #333;
  background-color: #ffffff;
  border: 1px solid #cfcfcf;
  border-left: none;
  border-radius: 0 20px 20px 0;
  font-size: 16px;
  padding: 0 10px;
}

.btn-search:hover,
.btn-search:active {
  color: #0065b0;
  background-color: #ffffff;
  border: 1px solid #cfcfcf;
  border-left: none;
}

.btn-order {
  color: #ffffff;
  background-color: #0065b0;
  border: 1px solid #0065b0;
}

.btn-outline-order {
  color: #0065b0;
  border: 1px solid #0065b0;
  background-color: #ffffff;
}

.btn-order,
.btn-outline-order {
  padding: 5px 20px;
  margin: 5px;
}

.btn-order:hover,
.btn-outline-order:hover {
  color: #0065b0;
  background-color: #d8f3ff;
}
/* search bar from 團隊列表頁 end */

/*  */
.badge-group {
  padding: 15px;
  margin: 10px 0;
  background-color: #e0eeff;
}
.badge-group .badge-type {
  display: inline-block;
  background-color: #0065b0;
  color: #fff;
  padding: 6px 15px;
  margin: 5px;
  text-align: center;
  font-weight: 300;
  font-size: 90%;
  word-break: break-word;
  cursor: pointer;
  transition: 0.3s ease-in;
}
.badge-group .badge-type:hover {
  -webkit-filter: brightness(0.85);
  filter: brightness(0.85);
}

.list-book-group {
}

.book-item {
  position: relative;
  padding: 10px;
  overflow: hidden;
}
.book-item a {
  color: #555;
}
.book-item a:hover,
.book-item a:focus {
  color: #0065b0;
}
.book-imgbox {
  text-align: center;
  border: 1px solid #e5e5e5;
  padding: 10px;
  transform: scale(1);
}
.book-imgbox img {
  width: 100%;
  max-width: 150px;
  transition: 0.3s ease;
}
.book-imgbox:hover img,
.book-imgbox:focus img {
  transform: scale(1.1);
}
.book-txtbox {
}

.book-txtbox .badge-award {
  padding: 0;
  margin: 0.3rem 0;
  font-size: 16px;
}
.book-txtbox .badge-award i {
}
.book-txtbox .badge-award img {
}
.book-head {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.book-head-mt {
  margin-top: 33.6px;
}
.book-author {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #555;
  line-height: 1.3;
  word-break: break-word;
}
.book-item .badge-type {
  background-color: #0065b0;
  color: #fff;
  padding: 2px 10px 3px;
  text-align: center;
  font-weight: 300;
  position: absolute;
  top: 20px;
}

@media (max-width: 767px) {
  .kv_list.book_list {
    height: 30vh;
  }
  .kv-content:before {
    height: 20%;
  }
  .list-header {
  }

  .book-item {
    height: 400px;
  }
}

@media (max-width: 576px) {
  /* search bar from 團隊列表頁 start */
  .btn-order,
  .btn-outline-order,
  .input-group {
    margin-bottom: 10px;
  }
  /* search bar from 團隊列表頁 end */
}

/* ------------------------------
       分頁 pagination  from 團隊戰報
   ------------------------------ */

.pagination-container {
  margin: 4rem auto;
  text-align: center;
  font-size: 16px;
}

.pagination-container a {
  text-decoration: none;
}

.pagination {
  position: relative;
}

.pagination .page,
.pagination-active {
  position: relative;
  display: inline-block;
  color: #333333;
  padding: 8px 16px 10px;
  background-color: #cfcfcf;
  border-radius: 3px;
  margin-right: 5px;
}

.pagination .page:hover,
.pagination-active {
  color: #fff;
  background-color: #3da9fc;
  transition: 0.3s;
}

.pg-dot {
  border: none;
  padding: 0 16px;
}

.pagination-newer,
.pagination-older,
a:not([href]).pagination-newer,
a:not([href]).pagination-older
 {
  font-size: 20px;
  position: relative;
  display: inline-block;
  color: #333333;
  padding: 8px 35px 10px;
  border: 1px solid #333;
  border-radius: 3px;
  background: #24264C;
  color: #fff;
  
}

.pagination-newer:hover,
.pagination-older:hover,
.pagination-newer:focus,
.pagination-older:focus,
a:not([href]).pagination-newer:hover,
a:not([href]).pagination-older:hover,
a:not([href]).pagination-newer:focus,
a:not([href]).pagination-older:focus {
  color: #fff;
  background-color: #3da9fc;
  transition: 0.3s;
}

.pagination-newer {
  margin-right: 50px;
}

.pagination-older {
  margin-left: 50px;
}

@media (max-width: 576px) {
  .pagination a {
    margin-bottom: 5px;
  }

  .pagination-newer,
  .pagination-older {
    padding: 8px 20px 10px;
  }
}

.writer-title{
  margin:20px 0 14px;
}