@charset "UTF-8";
/* *************************************
//
//   KGIL-Component -- Dictionary-list
//   -> 凱基人壽 - Dictionary-list
//
//   00.Global
//   01.Dictionary-list
//  
//
//
//
// ************************************/
/* -------------------------------------
//   0.Global
// -----------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");
/* -------------------------------------
//   1.Dictionary-list
// -----------------------------------*/
.dictionary-box .fs-16 {
  font-size: 16px;
}
.dictionary-box .fs-14 {
  font-size: 14px;
}
.dictionary-box .fs-22 {
  font-size: 22px;
}
.dictionary-box .fs-24 {
  font-size: 24px;
}
.dictionary-box .font-size-adjust {
  display: flex;
  align-items: center;
}
.dictionary-box .font-size-adjust .btn {
  font-size: 18px;
}
.dictionary-box .font-size-adjust .btn-font,
.dictionary-box .font-size-adjust .btn-font:focus {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #04327A;
  font-weight: 500;
  font-size: 1.125em;
  line-height: 160%;
  letter-spacing: 0.12em;
  border-color: #04327A;
}
.dictionary-box .font-size-adjust .btn-font.active {
  background-color: #04327A;
  color: #ffffff;
}
.dictionary-box .font-size-adjust .btn-font:hover {
  background-color: #04327A;
  border-color: #04327A;
  color: #fff;
  border-radius: 0;
}
@media (max-width: 768px) {
  .dictionary-box .font-size-adjust {
    margin-top: 0.5rem;
  }
}
.dictionary-box .search-form {
  display: flex;
}
.dictionary-box .search-form input {
  width: 472px;
}
@media (max-width: 1024px) {
  .dictionary-box .search-form input {
    width: 100%;
  }
}
.dictionary-box .search-form .btn {
  flex-shrink: 0;
}
.dictionary-box .audio-group {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.75rem;
  margin-top: 0;
}
@media (max-width: 1080px) {
  .dictionary-box .audio-group {
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: -8px;
  }
}
.dictionary-box .audio-link {
  color: #04327a;
  font-size: 22px;
  display: flex;
  margin-bottom: 0.5rem;
  align-items: center;
  position: relative;
  transition: all 0.3s;
}
.dictionary-box .audio-link:has(+ .audio-link) {
  margin-right: 1.5rem;
}
.dictionary-box .audio-link::after {
  display: block;
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  margin: auto;
  width: 0;
  height: 1px;
  background-color: #04327a;
  transition: width 0.2s;
}
@media (max-width: 1080px) {
  .dictionary-box .audio-link {
    padding: 0.5rem;
  }
}
.dictionary-box .audio-link i {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 16px;
  width: 22px;
  height: 22px;
  margin-right: 0.5rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="width:256px;height:256px;opacity:1" viewBox="0 0 512 512"><path d="M471.889 135.002c-5.982-8.06-17.373-9.732-25.428-3.77-8.064 5.955-9.76 17.307-3.781 25.34 21.566 29.012 32.965 63.402 32.965 99.474 0 36.01-11.398 70.375-32.965 99.386-5.978 8.034-4.283 19.386 3.781 25.34a18.11 18.11 0 0 0 10.809 3.566c5.562 0 11.051-2.53 14.619-7.334C498.131 341.71 512 299.887 512 256.047c0-43.893-13.869-85.752-40.111-121.045zm-97.877 49.83c-8.06 5.964-9.742 17.316-3.756 25.35 9.959 13.368 15.226 29.215 15.226 45.821 0 16.606-5.268 32.453-15.226 45.822-5.986 8.034-4.305 19.386 3.756 25.349a18.108 18.108 0 0 0 10.824 3.574c5.555 0 11.035-2.53 14.606-7.316 14.652-19.66 22.396-42.982 22.396-67.429 0-24.446-7.744-47.768-22.396-67.428-5.993-8.034-17.385-9.723-25.43-3.743zm-329.078.863C20.117 185.695 0 205.75 0 230.487v51.028c0 24.737 20.117 44.791 44.934 44.791h82.308L281.48 416V96l-154.236 89.695h-82.31z" style="fill:%2304327a"/></svg>');
  transition: all 0.3s;
}
.dictionary-box .audio-link:hover {
  color: #041c43;
}
.dictionary-box .audio-link:hover i {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="width:256px;height:256px;opacity:1" viewBox="0 0 512 512"><path d="M471.889 135.002c-5.982-8.06-17.373-9.732-25.428-3.77-8.064 5.955-9.76 17.307-3.781 25.34 21.566 29.012 32.965 63.402 32.965 99.474 0 36.01-11.398 70.375-32.965 99.386-5.978 8.034-4.283 19.386 3.781 25.34a18.11 18.11 0 0 0 10.809 3.566c5.562 0 11.051-2.53 14.619-7.334C498.131 341.71 512 299.887 512 256.047c0-43.893-13.869-85.752-40.111-121.045zm-97.877 49.83c-8.06 5.964-9.742 17.316-3.756 25.35 9.959 13.368 15.226 29.215 15.226 45.821 0 16.606-5.268 32.453-15.226 45.822-5.986 8.034-4.305 19.386 3.756 25.349a18.108 18.108 0 0 0 10.824 3.574c5.555 0 11.035-2.53 14.606-7.316 14.652-19.66 22.396-42.982 22.396-67.429 0-24.446-7.744-47.768-22.396-67.428-5.993-8.034-17.385-9.723-25.43-3.743zm-329.078.863C20.117 185.695 0 205.75 0 230.487v51.028c0 24.737 20.117 44.791 44.934 44.791h82.308L281.48 416V96l-154.236 89.695h-82.31z" style="fill:%23041c43"/></svg>');
}
.dictionary-box .audio-link:hover::after {
  width: 100%;
}
.dictionary-box .modal-open .modal.modal-scroll {
  overflow-y: hidden;
}
.dictionary-box .modal-open .modal.modal-scroll .modal-content {
  max-height: 66vh;
}
.dictionary-box .modal-open .modal.modal-scroll .modal-content .modal-body {
  overflow-y: auto;
}
.dictionary-box .audio-toggle .accordion__item {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #eaeaea;
  border-radius: 0.75rem;
}
.dictionary-box .audio-toggle .accordion__item:has(.audio-play[aria-expanded=true]) {
  border-color: #04327a;
}
.dictionary-box .audio-toggle .accordion__item:has(.audio-play[aria-expanded=true]) .audio-play i {
  background-image: none;
}
.dictionary-box .audio-toggle .audio-play {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 0.75rem;
}
.dictionary-box .audio-toggle .audio-play--lang {
  font-size: 1.25em;
  color: #04327a;
}
.dictionary-box .audio-toggle .audio-play i {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 16px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 0.5rem;
  background-image: url('data:image/svg+xml,<!--%3Fxml version="1.0" encoding="utf-8"%3F--><!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve"><style type="text/css">.st0{fill:%2304237A;}</style><g><path class="st0" d="M256,0C114.625,0,0,114.625,0,256c0,141.374,114.625,256,256,256c141.374,0,256-114.626,256-256C512,114.625,397.374,0,256,0z M351.062,258.898l-144,85.945c-1.031,0.626-2.344,0.657-3.406,0.031c-1.031-0.594-1.687-1.702-1.687-2.937v-85.946v-85.946c0-1.218,0.656-2.343,1.687-2.938c1.062-0.609,2.375-0.578,3.406,0.031l144,85.962c1.031,0.586,1.641,1.718,1.641,2.89C352.703,257.187,352.094,258.297,351.062,258.898z"></path></g></svg>');
}
.dictionary-box .audio-toggle .audio-play.accordion__item-title:after, .dictionary-box .audio-toggle .audio-play.accordion__item-title:before {
  display: none;
}
.dictionary-box .audio-toggle .accordion__item:hover .audio-play i {
  background-image: url('data:image/svg+xml,<!--%3Fxml version="1.0" encoding="utf-8"%3F--><!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve"><style type="text/css">.st0{fill:%23041c43;}</style><g><path class="st0" d="M256,0C114.625,0,0,114.625,0,256c0,141.374,114.625,256,256,256c141.374,0,256-114.626,256-256C512,114.625,397.374,0,256,0z M351.062,258.898l-144,85.945c-1.031,0.626-2.344,0.657-3.406,0.031c-1.031-0.594-1.687-1.702-1.687-2.937v-85.946v-85.946c0-1.218,0.656-2.343,1.687-2.938c1.062-0.609,2.375-0.578,3.406,0.031l144,85.962c1.031,0.586,1.641,1.718,1.641,2.89C352.703,257.187,352.094,258.297,351.062,258.898z"></path></g></svg>');
}
.dictionary-box .audio-toggle .audio-source {
  padding: 0 1rem 1rem 1rem;
}
.dictionary-box .audio-toggle .audio-source audio {
  width: 100%;
  display: block;
}

.dictionary-list {
  padding: 24px 0 60px 0;
}

.dictionary-item {
  display: flex;
}
@media (max-width: 768px) {
  .dictionary-item {
    display: block;
  }
}
.dictionary-item + .dictionary-item {
  margin-top: 60px;
}

.dictionary-title {
  width: 360px;
  height: 188px;
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .dictionary-title {
    width: 344px;
    height: 180px;
    margin: auto;
  }
}
@media (max-width: 390px) {
  .dictionary-title {
    width: 100%;
    height: auto;
  }
}
.dictionary-title__img {
  display: block;
  width: 100%;
  height: auto;
}
.dictionary-title__text {
  position: absolute;
  transform: translateY(-50%);
  padding: 10px 10px 16% 4px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 32px;
  color: white;
  top: 50%;
  left: 112px;
}
/*# sourceMappingURL=dictionary-list.css.map */