@charset "UTF-8";
/*@mixin img-replace($img, $w: image-width($img), $h: image-height($img), $disp: block) {
    background: image-url($img) no-repeat;
    width: $w;
    height: $h;
    display: $disp;
}*/
/*mixin-set*/
/*color-set*/
@import url("https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Cormorant:ital,wght@0,300..700;1,300..700&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap");
.text-blue-light {
  color: #6E6B91;
}

.text-red-main {
  color: #B0849D;
}

.text-blue-main {
  color: #6E6B91;
}

/*font*/
.f-hand {
  font-family: "Corinthia", serif;
}

.f-en-ex, .hero .siteBrief .siteBrief--container .siteBrief--brief p, .card-case .card-content .category span, .card-case .card-cover .num, .card-treat .card-content .treatment-category span, .card-treat .card-cover .num {
  font-family: "Cormorant", "Noto Serif TC", "Noto Sans TC", serif;
}

.f-en, .titleBox .section-subtitle {
  font-family: "Cormorant", "Noto Serif TC", "Noto Sans TC", serif;
}

.f-cn, .article-section p, .article-section .section--col.col-notice p.notice, .article-section .section--col.col-notice .subtitle, .tableOfcontents--list li a, .square-slide span, .confpic-slide .textbox span, .envpic-slide span, .traffic-box ol li .sub-li .info span, .traffic-box ol li, .info-contact li a, .info-contact li .text-blue-light, .info-contact li .item-title, .ex-line-box .f-h6 span, .ex-line-box .article--footer--statement--announce .container .announce--list .subtitle span, .article--footer--statement--announce .container .announce--list .ex-line-box .subtitle span, .ex-line-box .footer--statement--announce .container .announce--list .subtitle span, .footer--statement--announce .container .announce--list .ex-line-box .subtitle span, .ex-line-box .btn.btn-text-l span, .ex-line-box .card-item .card-content .card-title span, .card-item .card-content .ex-line-box .card-title span, .ex-line-box .doctor-item--info .experience .exlist--title span, .doctor-item--info .experience .ex-line-box .exlist--title span, .schedule-doctors .card-item .name span, .section-testimony .container .body-part .list .list--item .text, .section-contact .contact-box .contact-info .tab-content .tab-content--list .tab-content--info ul li p span, footer .copyRight span, footer .footer-box .footer-content .statement ul li, footer .footer-box .footer-content .statement, .pagenation a, .doctor-career-detail .career-detail-item ul.ul-disc li span, .doctor-career-detail .career-detail-item ul.ul-disc li, .doctor-career-detail .career-detail-item .title-sub, .doctor-item.career .doctor-item--info .career-list ul li, .doctor-item.career .doctor-item--info .career-list .career--title, .doctor-item--info .experience .exlist ul li, .table-main tbody tr td.val span, .table-main tbody tr td.val, .table-main tbody tr td ul li, .tag, .card-item.card-newstopic .card-content .card-readmore, .card-item.card-newstopic .card-meta .date, .card-item.card-treatment .card-content .card-readmore, .card-case .card-content ul.item-list li.item-list--item span, .swiper-popup .popup-content .swiper .swiper-slide span, p {
  font-family: "Noto Sans TC", serif;
}

* {
  font-family: "Noto Serif TC", "Noto Sans TC", serif;
  line-height: 150%;
}

.f-ex {
  font-size: 64px;
  line-height: 150%;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 1024px) {
  .f-ex {
    font-size: 48px;
  }
}

.f-h1, h1 {
  font-size: 42px;
  line-height: 150%;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 1024px) {
  .f-h1, h1 {
    font-size: 34px;
  }
}

.f-h2, h2 {
  font-size: 48px;
  line-height: 150%;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 1024px) {
  .f-h2, h2 {
    font-size: 34px;
    line-height: 140%;
  }
}

.f-h3, .doctor-item--info .job-title, .title-article-section, h3 {
  font-size: 32px;
  line-height: 150%;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 1024px) {
  .f-h3, .doctor-item--info .job-title, .title-article-section, h3 {
    font-size: 24px;
    line-height: 140%;
  }
}

.f-h4, .article-section--title span, .doctor-item--info .doctor-name span, .tag.tag-btn, .card-item.card-cateType .card-content .card-title, h4 {
  font-size: 24px;
  line-height: 150%;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 1024px) {
  .f-h4, .article-section--title span, .doctor-item--info .doctor-name span, .tag.tag-btn, .card-item.card-cateType .card-content .card-title, h4 {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .f-h4, .article-section--title span, .doctor-item--info .doctor-name span, .tag.tag-btn, .card-item.card-cateType .card-content .card-title, h4 {
    font-size: 20px;
  }
}

.f-h5, .hero .siteBrief .siteBrief--container .siteBrief--brief p, header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title, .doctor-career-detail .career-detail-item .title, .card-treat .card-content ul.treatment-list li.treatment-list--item .treatment--name, .btn-outline-ex, .btn.btn-text-xl, h5 {
  font-size: 20px;
  line-height: 150%;
  margin: 0;
}
@media (max-width: 1024px) {
  .f-h5, .hero .siteBrief .siteBrief--container .siteBrief--brief p, header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title, .doctor-career-detail .career-detail-item .title, .card-treat .card-content ul.treatment-list li.treatment-list--item .treatment--name, .btn-outline-ex, .btn.btn-text-xl, h5 {
    font-size: 18px;
  }
}

.f-h6, .article--footer--statement--announce .container .announce--list .subtitle, .footer--statement--announce .container .announce--list .subtitle, .doctor-item--info .experience .exlist--title, .card-item.card-readmore .card-content .card-title, .card-item .card-content .card-title, .btn.btn-text-l, h6 {
  font-size: 18px;
  line-height: 150%;
  margin: 0;
}
@media (max-width: 1024px) {
  .f-h6, .article--footer--statement--announce .container .announce--list .subtitle, .footer--statement--announce .container .announce--list .subtitle, .doctor-item--info .experience .exlist--title, .card-item.card-readmore .card-content .card-title, .card-item .card-content .card-title, .btn.btn-text-l, h6 {
    font-size: 16px;
  }
}

.f-base, .search-brief, .titleBox .section-intro {
  font-size: 16px;
  line-height: 160%;
}

.f-small, .article--footer--statement--announce .disclaimer, .footer--statement--announce .disclaimer, .article--footer--statement--announce .container .announce--list ul li p, .footer--statement--announce .container .announce--list ul li p, .article-section p.bottom-text, .article-section .section--col.col-notice p.notice, .article-section .section--col.col-notice .subtitle, .tableOfcontents--list li a, .breadcrumb, .confpic-slide .textbox span, .section-testimony .container .body-part .list .list--item .text, .hero .hero--slider .cus-fnc .swiper-pagination, header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri, .tag.tag-mid, .tag.tag-s, .card-item.card-newstopic .card-content .card-readmore, .card-item.card-treatment .card-content .card-readmore, .card-case .card-content ul.item-list li.item-list--item span, .card-item .card-content .card-excerpt, .btn.btn-text-s {
  font-size: 14px;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .f-small, .article--footer--statement--announce .disclaimer, .footer--statement--announce .disclaimer, .article--footer--statement--announce .container .announce--list ul li p, .footer--statement--announce .container .announce--list ul li p, .article-section p.bottom-text, .article-section .section--col.col-notice p.notice, .article-section .section--col.col-notice .subtitle, .tableOfcontents--list li a, .breadcrumb, .confpic-slide .textbox span, .section-testimony .container .body-part .list .list--item .text, .hero .hero--slider .cus-fnc .swiper-pagination, header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri, .tag.tag-mid, .tag.tag-s, .card-item.card-newstopic .card-content .card-readmore, .card-item.card-treatment .card-content .card-readmore, .card-case .card-content ul.item-list li.item-list--item span, .card-item .card-content .card-excerpt, .btn.btn-text-s {
    font-size: 14px;
  }
}

.f-tiny, footer .footer-box .footer-content .statement ul li, .pagenation a, .tag.tag-xs, .card-item.card-newstopic .card-meta .date, .card-item .card-content .card-dateTime {
  font-size: 12px;
}

p {
  font-weight: 300;
  margin: 0;
}
@media (max-width: 768px) {
  p {
    font-size: 15px;
  }
}

.article--title {
  font-size: 36px;
  line-height: 150%;
  color: #6E6B91;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .article--title {
    font-size: 24px;
  }
}

.f-bold, .doctor-career-detail .career-detail-item ul.ul-disc li span {
  font-weight: 700 !important;
}

.f-center {
  text-align: center;
}

.f-red {
  color: #872F66;
}

.text-center {
  display: block;
  text-align: center;
}

/*style set*/
html,
body {
  background: #fff;
  color: #848484;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 1px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  font-size: 16px;
}
html a,
body a {
  box-sizing: border-box;
  text-decoration: none;
  display: block;
}

img {
  display: block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hide {
  display: none !important;
}

.alcenter, .hero.singleTreatment .hero--title .titleBox, .category-hero--title, .hero .hero--slider .cus-fnc:after, .hero .siteBrief .siteBrief--container, .card-item.card-newstopic .card-cover:after, .card-item.card-video .card-cover .playbtn, .card-case .card-cover:after, .btn-close:after, .swiper-button-next:after, .swiper-button-prev:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.img-fit-cover, .card-item.card-video .card-cover img, .card-item.card-witness .card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.bdr-ex {
  border-radius: 120px;
}

.bdr-xxl {
  border-radius: 100px;
}

.bdr-xl, .card-item.card-news .card-cover {
  border-radius: 60px;
}

.bdr-l, .card-item.card-news .card-content {
  border-radius: 32px;
}

.bdr-m, .article--footer--statement--announce .container .announce--list, .footer--statement--announce .container .announce--list, .sec-map .card-item, .ex-line-box, .section-contact .contact-box .map, .doctor-career-detail .career-detail-item, .qabox .qa-item, .card-item.card-newstopic, .card-item.card-treatment, .card-item.card-comment .card-meta .stars {
  border-radius: 24px;
}

.bdr-s, .article-section .section--col.col-notice .subtitle, .article-section .section--col.col-notice, .tableOfcontents, .square-slide img, .confpic-slide .textbox, .confpic-slide img, .envpic-slide img, header .header--wrapper .menu--fnc .search--input, input {
  border-radius: 8px;
}

.shadow-box, .hero.caseStudy-cate .hero--index, .qabox .qa-item {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}

.shadow-box-l, .doctor-item--avatar {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.shadow-box-xl, .card-item.card-witness .card-cover img {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

input {
  padding: 8px;
  font-size: 16px;
  color: #6E6B91;
}
input::-moz-placeholder {
  color: #E9EAEF;
}
input::placeholder {
  color: #E9EAEF;
}

.swiper-button-prev {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  margin-top: 0 !important;
  transition: 0.3s;
  cursor: pointer;
}
.swiper-button-prev:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("/asset/frontSite/images/icons/icon-arrow-left.svg") center center no-repeat;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
}
.swiper-button-prev:hover {
  background: white;
}
.swiper-button-prev:hover:after {
  left: 40%;
}
@media (max-width: 768px) {
  .swiper-button-prev {
    width: 40px;
    height: 40px;
  }
}

.swiper-button-next {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  margin-top: 0 !important;
  transition: 0.3s;
  cursor: pointer;
}
.swiper-button-next:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("/asset/frontSite/images/icons/icon-arrow-right.svg") center center no-repeat;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
}
.swiper-button-next:hover {
  background: white;
}
.swiper-button-next:hover:after {
  left: 60%;
}
@media (max-width: 768px) {
  .swiper-button-next {
    width: 40px;
    height: 40px;
  }
}

.btn-close {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  margin-top: 0 !important;
  transition: 0.3s;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  right: 0px;
  top: -24px;
}
.btn-close:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("/asset/frontSite/images/icons/icon-close-red.svg") center center no-repeat;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
}
.btn-close:hover {
  background: white;
}
@media (max-width: 768px) {
  .btn-close {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}

.swiper-slide img {
  width: 100%;
}

.swiper-pagination {
  display: flex;
  justify-content: center;
}
.swiper-pagination .swiper-pagination-bullet {
  border: solid 1px #6E6B91;
  background: none;
  width: 8px;
  height: 8px;
  padding: 0;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #6E6B91;
}

.swiper-popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  opacity: 0;
}
.swiper-popup .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.swiper-popup .popup-content {
  width: 90%;
  position: relative;
}
.swiper-popup .popup-content .swiper {
  box-sizing: border-box;
  padding: 0 32px;
}
.swiper-popup .popup-content .swiper .swiper-slide span {
  display: block;
  color: #fff;
  text-align: center;
  padding: 16px;
}
.swiper-popup.popup-on {
  display: flex;
  animation: fadeIn 0.5s forwards;
}
@media (max-width: 768px) {
  .swiper-popup .popup-content {
    width: 96%;
  }
  .swiper-popup .popup-content .swiper {
    box-sizing: border-box;
    padding: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.btn-outline {
  display: inline-flex;
  border-radius: 40px;
  transition: 0.3s;
}
.btn-outline .line-start {
  width: 20px;
  border-top: solid 1px #B0849D;
  border-left: solid 1px #B0849D;
  border-bottom: solid 1px #B0849D;
  border-radius: 40px 0 0 40px;
}
.btn-outline .btn-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 10px 7px 10px;
  min-width: 80px;
  position: relative;
}
.btn-outline .btn-text .text {
  flex-shrink: 0;
  transition: 0.3s;
  color: #B0849D;
}
.btn-outline .btn-text .icon {
  overflow: hidden;
  flex-shrink: 0;
  width: 0px;
  height: 100%;
  margin-left: 0;
  background: url("/asset/frontSite/images/icons/icon-arrow-right-s.svg") center center no-repeat;
  transition: 0.3s;
  position: absolute;
  transform: translateX(-50%);
  right: 10px;
}
.btn-outline .btn-text:before {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: 1px;
  background: #B0849D;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-outline .btn-text:after {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: 1px;
  background: #B0849D;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-outline .line-end {
  width: 20px;
  border-top: solid 1px #B0849D;
  border-right: solid 1px #B0849D;
  border-bottom: solid 1px #B0849D;
  border-radius: 0 40px 40px 0;
}
.btn-outline.btn-blue .line-start {
  border-top: solid 1px #6E6B91;
  border-left: solid 1px #6E6B91;
  border-bottom: solid 1px #6E6B91;
}
.btn-outline.btn-blue .btn-text .text {
  color: #6E6B91;
}
.btn-outline.btn-blue .btn-text:before, .btn-outline.btn-blue .btn-text:after {
  background: #6E6B91;
}
.btn-outline.btn-blue .line-end {
  border-top: solid 1px #6E6B91;
  border-right: solid 1px #6E6B91;
  border-bottom: solid 1px #6E6B91;
}
.btn-outline.withIcon-left .btn-text .text {
  padding-left: 14px;
}
.btn-outline.withIcon-left .btn-text .icon {
  overflow: visible;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  left: 10px;
}
.btn-outline.withIcon-left .btn-text .icon svg {
  width: 12px;
  height: auto;
}
.btn-outline.withIcon:hover, .btn-outline.withIcon.active {
  background: #B0849D;
  color: #fff;
}
.btn-outline.withIcon:hover .btn-text .text, .btn-outline.withIcon.active .btn-text .text {
  color: #fff;
  margin-left: -8px;
  padding-right: 8px;
}
.btn-outline.withIcon:hover .btn-text .icon, .btn-outline.withIcon.active .btn-text .icon {
  width: 10px;
  right: -10px;
}
.btn-outline.withIcon-left:hover, .btn-outline.withIcon-left.active {
  background: #B0849D;
  color: #fff;
}
.btn-outline.withIcon-left:hover .btn-text .text, .btn-outline.withIcon-left.active .btn-text .text {
  color: #fff;
  margin-left: -8px;
  padding-right: 8px;
}
.btn-outline.withIcon-left:hover .btn-text .icon, .btn-outline.withIcon-left.active .btn-text .icon {
  width: 10px;
  right: -10px;
}
.btn-outline:hover, .btn-outline.active {
  background: #B0849D;
  color: #B0849D;
}
.btn-outline:hover .btn-text .text, .btn-outline.active .btn-text .text {
  color: #fff;
}
.btn-outline:hover.btn-blue, .btn-outline.active.btn-blue {
  background: #6E6B91;
  color: #6E6B91;
}
.btn-outline:hover.btn-blue .btn-text .text, .btn-outline.active.btn-blue .btn-text .text {
  color: #fff;
}
.btn-outline.active.active-red {
  background: #B0849D;
  border-color: #B0849D;
}
.btn-outline.active.active-red .line-start, .btn-outline.active.active-red .line-end {
  border-color: #B0849D;
}
.btn-outline.active.active-red .btn-text:before, .btn-outline.active.active-red .btn-text:after {
  background: #B0849D;
}
.btn-outline.active.active-red .btn-text .text {
  color: #fff;
}

.btn-outline-ex {
  display: inline-flex;
  border-radius: 40px;
  color: #B0849D;
  transition: 0.3s;
}
.btn-outline-ex .line-start {
  width: 30px;
  border-top: solid 1px #B0849D;
  border-left: solid 1px #B0849D;
  border-bottom: solid 1px #B0849D;
  border-radius: 60px 0 0 60px;
}
.btn-outline-ex .btn-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 10px 10px 10px;
  margin: 5px -25px 5px -25px;
  position: relative;
  min-width: 192px;
  background: #B0849D;
  border-radius: 30px;
  color: #fff;
  transition: 0.3s;
}
.btn-outline-ex .btn-text .icon {
  height: 100%;
  margin-left: 8px;
}
.btn-outline-ex .btn-text:before {
  content: "";
  display: block;
  width: calc(100% - 60px);
  height: 1px;
  background: #B0849D;
  position: absolute;
  top: -5px;
  right: 25px;
}
.btn-outline-ex .btn-text:after {
  content: "";
  display: block;
  width: calc(100% - 60px);
  height: 1px;
  background: #B0849D;
  position: absolute;
  bottom: -5px;
  left: 25px;
}
.btn-outline-ex .line-end {
  width: 30px;
  border-top: solid 1px #B0849D;
  border-right: solid 1px #B0849D;
  border-bottom: solid 1px #B0849D;
  border-radius: 0 60px 60px 0;
}
.btn-outline-ex:hover, .btn-outline-ex .active {
  color: #fff;
}
.btn-outline-ex:hover .btn-text, .btn-outline-ex .active .btn-text {
  background: #6E6B91;
}
.btn-outline-ex.ex-next .btn-text .icon {
  width: 23px;
  background: url("/asset/frontSite/images/icons/icon-btnex-arrow.svg") center center no-repeat;
  background-size: contain;
}
.btn-outline-ex.ex-loadmore .btn-text .icon {
  width: 23px;
  background: url("/asset/frontSite/images/icons/icon-loadmore.svg") center center no-repeat;
  background-size: contain;
}
.btn-outline-ex.ex-more .btn-text .icon {
  width: 20px;
  background: url("/asset/frontSite/images/icons/icon-btnex-more.svg") center center no-repeat;
  background-size: contain;
}
.btn-outline-ex.ex-line .btn-text .icon {
  width: 20px;
  background: url("/asset/frontSite/images/icons/icon-sm-line.svg") center center no-repeat;
  background-size: contain;
}

.btn-outline-o {
  display: inline-flex;
  border-radius: 24px;
  border: solid 1px #A7A7BF;
  transition: 0.3s;
}
.btn-outline-o .btn-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 12px 10px 6px;
  box-sizing: border-box;
  position: relative;
  border-left: solid 1px #A7A7BF;
  color: #6E6B91;
  transition: 0.3s;
}
.btn-outline-o.btn-addicon .icon {
  width: 28px;
  height: 100%;
  padding-left: 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px 0 0 24px;
}
.btn-outline-o.btn-addicon .icon svg path {
  fill: #A7A7BF;
}
.btn-outline-o:hover, .btn-outline-o.active {
  background: #CFB4C3;
  border: solid 1px #CFB4C3;
}
.btn-outline-o:hover .icon, .btn-outline-o.active .icon {
  background: #B0849D;
}
.btn-outline-o:hover .icon svg path, .btn-outline-o.active .icon svg path {
  fill: #fff;
}
.btn-outline-o:hover .btn-text, .btn-outline-o.active .btn-text {
  border-color: #CFB4C3;
  color: #fff;
}

.card-item .card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  filter: brightness(90%);
  transition: 0.3s;
}
.card-item .card-content .card-title {
  color: #6E6B91;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.card-item .card-content .card-excerpt {
  color: #848484;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.card-item .card-content .card-dateTime {
  color: #B0849D;
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
}
.card-item .card-content .card-dateTime .icon {
  width: 13px;
  height: 13px;
  background: url("/asset/frontSite/images/icons/icon-clock.png") center center no-repeat;
  background-size: contain;
}
.card-item:hover .card-cover img {
  filter: brightness(102%);
}

.card-item.card-news {
  display: flex;
  align-items: flex-start;
}
.card-item.card-news .card-cover {
  width: 53%;
  flex-shrink: 0;
  aspect-ratio: 250/200;
  overflow: hidden;
}
.card-item.card-news .card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 63.5%;
  min-height:180px;
  flex-shrink: 0;
  transform: translateX(0%);
  position: relative;
  left: -16.5%;
  padding: 16px 24px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 40px;
  z-index: 2;
}
.card-item.card-news:nth-child(4n), .card-item.card-news:nth-child(4n-1) {
  justify-content: flex-end;
}
.card-item.card-news:nth-child(4n) .card-cover, .card-item.card-news:nth-child(4n-1) .card-cover {
  left: 0;
  order: 2;
}
.card-item.card-news:nth-child(4n) .card-content, .card-item.card-news:nth-child(4n-1) .card-content {
  left: 15.5%;
}
@media (max-width: 768px) {
  .card-item.card-news:nth-child(4n-1) {
    justify-content: flex-start;
  }
  .card-item.card-news:nth-child(4n-1) .card-cover {
    left: 0;
    order: -1;
  }
  .card-item.card-news:nth-child(4n-1) .card-content {
    left: -15.5%;
  }
  .card-item.card-news:nth-child(2n), .card-item.card-news:nth-child(2n) {
    justify-content: flex-end;
  }
  .card-item.card-news:nth-child(2n) .card-cover, .card-item.card-news:nth-child(2n) .card-cover {
    left: 0;
    order: 2;
  }
  .card-item.card-news:nth-child(2n) .card-content, .card-item.card-news:nth-child(2n) .card-content {
    left: 15.5%;
  }
}

.card-treat .card-cover {
  width: 100%;
  aspect-ratio: 420/300;
  position: relative;
  padding-top: 100px;
}
.card-treat .card-cover .num {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #B0849D;
  font-size: 160px;
  font-weight: 400;
  position: absolute;
  top: -50px;
  left: 20px;
}
.card-treat .card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 80px;
}
.card-treat .card-content {
  width: 77%;
  margin: 8px auto;
}
.card-treat .card-content .treatment-category {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: solid 1px #D0D0D0;
}
.card-treat .card-content .treatment-category h3 {
  color: #B0849D;
}
.card-treat .card-content .treatment-category span {
  color: #848484;
}
.card-treat .card-content ul.treatment-list {
  padding: 0;
  margin: 0;
}
.card-treat .card-content ul.treatment-list li.treatment-list--item {
  margin-bottom: 16px;
}
.card-treat .card-content ul.treatment-list li.treatment-list--item .treatment--name {
  color: #6E6B91;
  display: block;
  line-height: 140%;
  margin-bottom: 12px;
}
.card-treat .card-content ul.treatment-list li.treatment-list--item .treatment--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.card-case .card-cover {
  width: 100%;
  aspect-ratio: 330/420;
  position: relative;
  margin-bottom: 46px;
}
.card-case .card-cover .num {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #6E6B91;
  font-size: 80px;
  font-weight: 400;
  position: absolute;
  right: 28px;
  bottom: -84px;
  opacity: 0.6;
}
.card-case .card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 165px;
  transition: 0.3s;
  position: relative;
  filter: brightness(0.8);
  transition: 0.3s;
}
.card-case .card-cover:after {
  content: "";
  display: block;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 165px;
  border: solid 1px #fff;
}
.card-case .card-content {
  width: 77%;
  margin: 8px auto;
}
.card-case .card-content .category {
  padding-bottom: 8px;
}
.card-case .card-content .category h3 {
  color: #B0849D;
}
.card-case .card-content .category span {
  color: #848484;
}
.card-case .card-content ul.item-list {
  padding: 0;
  margin: 0;
}
.card-case .card-content ul.item-list li.item-list--item {
  margin-bottom: 4px;
}
.card-case .card-content ul.item-list li.item-list--item span {
  color: #848484;
}
.card-case:hover .card-cover img {
  filter: brightness(1);
}

.card-item.card-witness {
  max-width: 270px;
}
.card-item.card-witness .card-cover {
  width: calc(100% - 28px);
  margin-left: 28px;
  aspect-ratio: 242/360;
  position: relative;
}
.card-item.card-witness .card-cover .signature {
  font-size: 60px;
  color: #6E6B91;
  transform: rotate(-11deg);
  position: absolute;
  top: -28px;
  left: -24px;
  z-index: 2;
}
.card-item.card-witness .card-cover img {
  display: block;
  border-radius: 120px;
  border: solid 2px #fff;
}
.card-item.card-witness .card-cover:after {
  content: "";
  display: block;
  width: 94%;
  height: 100px;
  background: url("/asset/frontSite/images/bg-witness-outline.png") bottom center no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0px;
  left: -3px;
}
.card-item.card-witness .card-content {
  margin-top: 16px;
}
.card-item.card-witness .card-content .tags {
  margin-top: 16px;
}
.card-item.card-witness:nth-child(odd) .card-cover .signature {
  color: #B0849D;
}

.card-item.card-video .card-cover {
  position: relative;
}
.card-item.card-video .card-cover .playbtn {
  width: 30%;
  max-width: 100px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: solid 2px #fff;
  background: rgba(255, 255, 255, 0.2);
  z-index: 2;
}
.card-item.card-video .card-cover .playbtn img {
  width: 40%;
  height: 40%;
  -o-object-fit: contain;
  object-fit: contain;
}
.card-item.card-video .card-content .card-title {
  width: 100%;
  margin: 16px auto;
  text-align: center;
  color: #848484;
}

.card-item.card-comment {
  width: 42%;
  position: relative;
  padding-top: 32px;
}
.card-item.card-comment .card-cover {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
}
.card-item.card-comment .card-cover img {
  width: 136px;
  height: 136px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}
.card-item.card-comment .card-content {
  width: calc(100% - 75px);
  margin-left: 75px;
  border-radius: 80px;
  background: #fff;
  min-height: 150px;
  padding: 24px 16px 24px 84px;
  box-sizing: border-box;
}
.card-item.card-comment .card-content .card-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: unset;
  -webkit-box-orient: vertical;
  white-space: normal;
  margin-bottom: 8px;
}
.card-item.card-comment .card-content .card-excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: unset;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.card-item.card-comment .card-meta .stars {
  width: 160px;
  height: 52px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 14px;
  background: url("/asset/frontSite/images/bg-star-frame.png") center center no-repeat;
  background-size: contain;
}
.card-item.card-comment .card-meta .stars .star svg {
  width: 18px;
  height: 18px;
}
.card-item.card-comment .card-meta .stars .star svg path {
  fill: #B0849D;
}
.card-item.card-comment .card-meta .stars .star.empty svg path {
  fill: #fff;
}
.card-item.card-comment:nth-child(1) .card-cover {
  background: url("/asset/frontSite/images/icons/icon-avatarbg-1.png") center center no-repeat;
  background-size: contain;
}
.card-item.card-comment:nth-child(2) .card-cover {
  background: url("/asset/frontSite/images/icons/icon-avatarbg-2.png") center center no-repeat;
  background-size: contain;
}
.card-item.card-comment:nth-child(3) .card-cover {
  background: url("/asset/frontSite/images/icons/icon-avatarbg-3.png") center center no-repeat;
  background-size: contain;
}
.card-item.card-comment:nth-child(4) .card-cover {
  background: url("/asset/frontSite/images/icons/icon-avatarbg-4.png") center center no-repeat;
  background-size: contain;
}
.card-item.card-comment:nth-child(5) .card-cover {
  background: url("/asset/frontSite/images/icons/icon-avatarbg-5.png") center center no-repeat;
  background-size: contain;
}
.card-item.card-comment:nth-child(6) .card-cover {
  background: url("/asset/frontSite/images/icons/icon-avatarbg-6.png") center center no-repeat;
  background-size: contain;
}
@media (max-width: 1024px) {
  .card-item.card-comment {
    width: 100%;
  }
  .card-item.card-comment .card-content {
    min-height: auto;
  }
}

.card-item.card-readmore .card-cover {
  width: 100%;
  aspect-ratio: 273/400;
}
.card-item.card-readmore .card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 180px 180px 0 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.card-item.card-readmore .card-content {
  margin-top: 16px;
}
.card-item.card-readmore .card-content .card-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.card-item.card-cateType {
  position: relative;
  aspect-ratio: 330/240;
  width: 100%;
  height: auto;
  border-radius: 20px;
  overflow: hidden;
}
.card-item.card-cateType .card-cover {
  width: 100%;
  height: 100%;
}
.card-item.card-cateType .card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.card-item.card-cateType .card-content {
  position: absolute;
  bottom: 22px;
  left: 32px;
  padding-bottom: 16px;
  width: calc(100% - 64px);
  max-width: 230px;
}
.card-item.card-cateType .card-content .card-title {
  letter-spacing: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  color: #fff;
}
.card-item.card-cateType .card-content:after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}

.card-item.card-treatment {
  background: #fff;
  overflow: hidden;
}
.card-item.card-treatment .card-cover {
  aspect-ratio: 252/216;
  width: 45%;
}
.card-item.card-treatment .card-cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.card-item.card-treatment .card-content {
  padding: 16px;
  box-sizing: border-box;
  flex-grow: 1;
}
.card-item.card-treatment .card-content .card-title {
  height: 76px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.card-item.card-treatment .card-content .card-readmore {
  color: #848484;
  position: relative;
  padding-bottom: 4px;
  padding-right: 40px;
  margin: 16px 0;
  text-align: right;
  border-bottom: solid 1px #D0D0D0;
}
.card-item.card-treatment .card-content .card-readmore:after {
  content: "";
  display: block;
  width: 28px;
  height: 20px;
  background: url("/asset/frontSite/images/icons/icon-readmore.png") bottom center no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: 0;
}
.card-item.card-treatment .card-content .tags {
  height: 48px;
  overflow: hidden;
}
.card-item.card-treatment .card-content .tags .tag {
  border: solid 1px #B0849D;
}
.card-item.card-treatment.card-h {
  display: flex;
}
.card-item.card-treatment.card-v {
  display: flex;
  flex-direction: column;
}
.card-item.card-treatment.card-v .card-cover {
  width: 100%;
  aspect-ratio: 264/360;
}
@media (max-width: 768px) {
  .card-item.card-treatment .card-content .card-title {
    -webkit-line-clamp: 2;
  }
}

.card-item.card-newstopic {
  background: #fff;
  overflow: hidden;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}
.card-item.card-newstopic .card-cover {
  width: 100%;
  aspect-ratio: 260/270;
  position: relative;
}
.card-item.card-newstopic .card-cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.card-item.card-newstopic .card-cover:after {
  content: "";
  display: block;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 24px 24px 0 0;
  border: solid 1px #fff;
}
.card-item.card-newstopic .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .card-item.card-newstopic .card-meta {
    flex-direction: column;
  }
}

.card-item.card-newstopic .card-meta .date {
  color: #848484;
  font-weight: 500;
}
.card-item.card-newstopic .card-content {
  padding: 16px 24px;
  box-sizing: border-box;
  flex-grow: 1;
}
.card-item.card-newstopic .card-content .card-title {
  height: 76px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.card-item.card-newstopic .card-content .card-readmore {
  color: #848484;
  position: relative;
  padding-top: 16px;
  padding-right: 24px;
  margin: 18px 0 0 0;
  text-align: right;
  border-top: solid 1px #D0D0D0;
  transition: 0.3s;
}
.card-item.card-newstopic .card-content .card-readmore:after {
  content: "";
  display: block;
  width: 8px;
  height: 10px;
  background: url("/asset/frontSite/images/icons/icon-readmore-arrow.svg") center center no-repeat;
  background-size: contain;
  position: absolute;
  right: 8px;
  bottom: 6px;
  transition: 0.3s;
}
.card-item.card-newstopic .card-content .card-readmore:hover {
  color: #B0849D;
}
.card-item.card-newstopic .card-content .card-readmore:hover:after {
  right: 0px;
}
@media (max-width: 768px) {
  .card-item.card-newstopic .card-content .card-title {
    -webkit-line-clamp: 2;
  }
}

.titleBox {
  position: relative;
}
.titleBox .section-title {
  color: #6E6B91;
  margin-bottom: 8px;
  letter-spacing: 6px;
}
.titleBox .section-subtitle {
  font-size: 32px;
  color: #B0849D;
  letter-spacing: 3px;
}
@media (max-width: 1024px) {
  .titleBox .section-subtitle {
    font-size: 20px;
    letter-spacing: 2px;
  }
}
.titleBox .section-intro {
  color: #848484;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 12px;
  margin-left: -6px;
}
@media (max-width: 1024px) {
  .titleBox .section-intro {
    font-size: 14px !important;
    letter-spacing: 1px;
  }
}
.titleBox.herobanner-title .section-subtitle {
  letter-spacing: 1px;
}
.titleBox.herobanner-title .section-title {
  letter-spacing: 13px;
}
.titleBox.type-text {
  padding-bottom: 40px;
  margin-bottom: 28px;
}
.titleBox.type-text .divider {
  width: 82px;
  height: 1px;
  margin: 16px auto;
  background: #B0849D;
  position: relative;
}
.titleBox.type-text:after {
  content: "";
  display: block;
  width: 82px;
  height: 1px;
  background: #B0849D;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 768px) {
  .titleBox.type-text {
    padding-bottom: 24px;
  }
}
.titleBox.type-circle {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  min-width: 226px;
}
.titleBox.type-circle:after {
  content: "";
  display: block;
  width: 220px;
  height: 220px;
  background: url("/asset/frontSite/images/title-circletext.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  top: -100px;
  transform: translateX(-50%);
  left: 13%;
  z-index: -1;
}
.titleBox.type-circle .section-title {
  margin-bottom: none;
  text-align: center;
}
.titleBox.type-circle .section-subtitle {
  text-align: center;
}
@media (max-width: 768px) {
  .titleBox.type-circle:after {
    width: 100px;
    height: 100px;
    top: -50px;
  }
}
.titleBox.title-red-leaf .section-title {
  color: #B0849D;
  padding-right: 35px;
  background: url("/asset/frontSite/images/icons/icon-leaf.svg") right top no-repeat;
  background-size: 23px 16px;
  display: inline-block;
  max-width: 790px;
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  letter-spacing: 6px;
}
.titleBox.title-red-leaf.type-text {
  padding-bottom: 24px;
}
.titleBox.title-red-leaf:after {
  transform: translateX(-50%);
  left: 50%;
}

.title-article-section {
  letter-spacing: 10px;
  font-weight: 500;
  color: #6E6B91;
  margin-bottom: 32px;
  display: inline-block;
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}
@media (max-width: 768px) {
  .title-article-section {
    letter-spacing: 4px;
  }
}

.tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.tag.tag-s {
  padding: 0 8px;
  height: 22px;
  border-radius: 22px;
  color: #B0849D;
  letter-spacing: 1px;
  background: #F4F1F3;
  transition: 0.3s;
}
.tag.tag-s:hover {
  background: #B0849D;
  color: #fff;
}
.tag.tag-xs {
  padding: 0 6px;
  height: 22px;
  border-radius: 22px;
  color: #B0849D;
  letter-spacing: 1px;
  border: solid 1px #F4F1F3;
  transition: 0.3s;
}
.tag.tag-xs:hover {
  background: #B0849D;
  color: #fff;
}
.tag.tag-mid {
  padding: 4px 16px;
  border-radius: 22px;
  color: #B0849D;
  letter-spacing: 1px;
  border: solid 1px #B0849D;
  transition: 0.3s;
}
.tag.tag-mid:hover {
  background: #B0849D;
  color: #fff;
}
.tag.fillred {
  background: #B0849D !important;
  color: #fff !important;
}
.tag.tag-btn {
  font-family: "Noto Serif TC", "Noto Sans TC", serif;
  padding: 6px 12px;
  border-radius: 0 24px 0 24px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: 0.3s;
}
.tag.tag-btn:hover, .tag.tag-btn.active {
  background: #B0849D;
}

.table-box--wrapper {
  overflow-x: auto;
}
.table-main {
  width: auto;
  min-width: 640px;
  border-collapse: collapse;
}
.table-main thead tr td {
  padding: 24px 24px;
  background: #6E6B91;
  color: #fff;
  text-align: center;
  border: solid 1px #E9EAEF;
}
.table-main thead tr td:nth-child(1) {
  min-width: 60px;
  box-sizing: border-box;
  background: none;
  border: none;
  display: inline-block;
}
.table-main thead tr:nth-child(1) td:nth-child(2) {
  border-radius: 8px 0 0 0;
  border-top: none;
  border-left: none;
}
.table-main thead tr:nth-child(1) td:last-child {
  border-radius: 0 8px 0 0;
  border-top: none;
  border-right: none;
}
.table-main tbody tr td {
  padding: 24px;
  border: solid 1px #E9EAEF;
}
.table-main tbody tr td.item {
  background: #B0849D;
  color: #fff;
  padding: 8px 8px;
  text-align: center;
}
.table-main tbody tr td ul {
  list-style-type: decimal;
  padding: 0 24px;
}
.table-main tbody tr td ul li {
  font-weight: 300;
}
.table-main tbody tr td.val {
  background: #fff;
  font-weight: 300;
}
.table-main tbody tr:first-child td.item {
  border-radius: 8px 0 0 0;
  border-top: none;
  border-left: none;
}
.table-main tbody tr:last-child td.item {
  border-radius: 0 0 0 8px;
  border-bottom: none;
  border-left: none;
}

.section-qa {
  background: url("/asset/frontSite/images/bg-section-qa.png") bottom center no-repeat;
  background-size: contain;
}

.qabox .qa-item {
  overflow: hidden;
  margin-bottom: 24px;
}
.qabox .qa-item .section-q {
  padding: 24px 40px;
  background: #fff;
  display: flex;
  align-items: flex-start;
  transition: 0.3s;
  cursor: pointer;
}
.qabox .qa-item .section-q .arrow-down {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1px;
}
.qabox .qa-item .section-q .arrow-down svg path {
  fill: #B0849D;
}
.qabox .qa-item .section-q h6 {
  color: #B0849D;
  font-weight: 400;
  padding-left: 8px;
  font-size: 18px !important;
}
.qabox .qa-item .section-a {
  padding: 0;
  background: #fff;
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.qabox .qa-item .section-a p {
  line-height: 160%;
}
.qabox .qa-item.active .section-q {
  background: #B0849D;
}
.qabox .qa-item.active .section-q .arrow-down {
  padding-top: 2px;
}
.qabox .qa-item.active .section-q .arrow-down svg {
  transform: rotate(90deg);
  transform-origin: center;
}
.qabox .qa-item.active .section-q .arrow-down svg path {
  fill: #fff;
}
.qabox .qa-item.active .section-q h6 {
  color: #fff;
}
.qabox .qa-item.active .section-a {
  padding: 24px 40px;
  height: auto;
  opacity: 1;
}

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

.doctor-item {
  position: relative;
  margin-top: 80px;
}
.doctor-item--avatar {
  display: block;
  width: 400px;
  aspect-ratio: 400/478;
  border-radius: 0 60px 0 60px;
  border: solid 2px #fff;
  overflow: hidden;
  position: absolute;
  z-index: 2;
  top: -40px;
}
.doctor-item--avatar img {
  width: 100%;
}
@media (max-width: 1024px) {
  .doctor-item--avatar {
    width: 50%;
    max-width: 300px;
    position: relative;
    top: 0;
    transform: translateX(-50%);
    left: 50%;
  }
}
@media (max-width: 520px) {
  .doctor-item--avatar {
    width: 90%;
  }
}
.doctor-item--info {
  width: 67%;
  box-sizing: border-box;
  margin-left: 33%;
  border-radius: 0 100px 100px 100px;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0.1) 100%);
  padding: 40px 72px 72px 72px;
  position: relative;
  z-index: 1;
}
.doctor-item--info .job-title {
  color: #B0849D;
  margin-bottom: 40px;
}
.doctor-item--info .doctor-name {
  display: flex;
  gap: 48px;
  align-items: flex-end;
  margin-bottom: 40px;
}
.doctor-item--info .doctor-name .signature {
  width: 140px;
}
.doctor-item--info .doctor-name .signature img {
  display: block;
  width: 100%;
  height: auto;
}
.doctor-item--info .doctor-name span {
  color: #6E6B91;
}
.doctor-item--info .experience {
  display: flex;
  gap: 24px;
}
.doctor-item--info .experience .exlist {
  width: 50%;
}
.doctor-item--info .experience .exlist ul {
  margin-left: 24px;
}
.doctor-item--info .experience .exlist ul li {
  padding-left: 4px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: dashed 1px #E9EAEF;
  font-weight: 300;
}
.doctor-item--info .experience .exlist ul li::marker {
  margin-right: 8px;
}
.doctor-item--info .experience .exlist--title {
  font-weight: 700;
  margin-bottom: 24px;
}
.doctor-item--info .experience .exlist.expert .exlist--title {
  color: #6E6B91;
}
.doctor-item--info .experience .exlist.expert ul li::marker {
  content: url("/asset/frontSite/images/icons/list-check.svg"); /*url(https://sunlight-betula.com/outlink/HTML-lipoartasset/frontSite/images/icons/list-check.svg);*/
}
.doctor-item--info .experience .exlist.joblist .exlist--title {
  color: #B0849D;
}
.doctor-item--info .experience .exlist.joblist ul li::marker {
  
  content: url("/asset/frontSite/images/icons/list-badge.svg"); /*url(https://sunlight-betula.com/outlink/HTML-lipoartasset/frontSite/images/icons/list-badge.svg);*/
}
@media (max-width: 1024px) {
  .doctor-item--info {
    width: 100%;
    margin-left: 0%;
    padding: 40px 24px 32px 24px;
  }
  .doctor-item--info .job-titl {
    margin-bottom: 24px;
  }
}
@media (max-width: 768px) {
  .doctor-item--info {
    border-radius: 0 40px 40px 40px;
  }
  .doctor-item--info .job-title {
    margin-bottom: 24px;
  }
  .doctor-item--info .doctor-name {
    margin-bottom: 24px;
    gap: 24px;
  }
  .doctor-item--info .doctor-name .signature {
    width: 100px;
  }
  .doctor-item--info .experience {
    flex-wrap: wrap;
  }
  .doctor-item--info .experience .exlist {
    width: 100%;
  }
}
.doctor-item:after {
  content: "";
  display: block;
  width: 69%;
  height: calc(100% - 120px);
  border-radius: 0 100px 100px 100px;
  position: absolute;
  background: url("/asset/frontSite/images/bg-doctor-frame.png") bottom center no-repeat;
  background-size: 100% 100%;
  top: 20px;
  right: -11px;
  z-index: 0;
}
@media (max-width: 1024px) {
  .doctor-item:after {
    width: 100%;
    height: 50%;
    right: 0;
    bottom: 100px;
    top: auto;
  }
}
.doctor-item.item-even .doctor-item--avatar {
  right: 0;
}
@media (max-width: 1024px) {
  .doctor-item.item-even .doctor-item--avatar {
    right: auto;
  }
}
.doctor-item.item-even .doctor-item--info {
  margin-left: 0%;
}
.doctor-item.item-even:after {
  right: auto;
  left: -11px !important;
}
@media (max-width: 1024px) {
  .doctor-item.item-even:after {
    right: auto;
    left: 0;
  }
}
.doctor-item.career {
  position: relative;
}
.doctor-item.career .doctor-item--avatar {
  width: 50%;
  aspect-ratio: 1/1;
  border: none;
}
@media (max-width: 520px) {
  .doctor-item.career .doctor-item--avatar {
    width: 90%;
  }
}
.doctor-item.career .doctor-item--info {
  width: 50%;
  margin-left: 50%;
  background: none;
  padding: 36px;
}
.doctor-item.career .doctor-item--info .doctor-name {
  margin-bottom: 80px;
}
.doctor-item.career .doctor-item--info .career-list {
  margin-bottom: 16px;
}
.doctor-item.career .doctor-item--info .career-list .career--title {
  color: #6E6B91;
  font-weight: 700;
}
.doctor-item.career .doctor-item--info .career-list ul {
  padding-left: 24px;
}
.doctor-item.career .doctor-item--info .career-list ul li {
  list-style-type: disc;
  font-weight: 300;
  margin-top: 4px;
}
@media (max-width: 1024px) {
  .doctor-item.career .doctor-item--info {
    width: 90%;
    margin-left: 5%;
    padding: 24px 8px 64px 8px;
  }
}
.doctor-item.career:after {
  display: none;
}
.doctor-item.career:before {
  content: "";
  display: block;
  width: 90vw;
  aspect-ratio: 100/36;
  background: url("/asset/frontSite/images/bg-doctor-single-header.png") top left no-repeat;
  background-size: contain;
  position: absolute;
  right: -10vw;
  top: 42%;
}

.doctor-career-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.col-inner {
  width: calc((100% - 40px) / 2);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.career-detail-item {
  background: #fff;
  padding: 40px 24px 24px 24px;
  box-sizing: border-box;
  position: relative;
}
.career-detail-item .title {
  padding: 10px 36px;
  border-radius: 0 24px 0 24px;
  position: absolute;
  left: -20px;
  top: -20px;
}
.career-detail-item .title.blue-set {
  background: #6E6B91;
  color: #fff;
}
.career-detail-item .title-sub {
  padding: 0px 16px 16px 0;
  margin-bottom: 16px;
  color: #6E6B91;
  border-bottom: solid 1px #E9EAEF;
}
.career-detail-item ul.ul-disc {
  padding-left: 24px;
  list-style-type: disc;
  margin-bottom: 16px;
}
.career-detail-item ul.ul-disc li {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .col-inner {
    width: 100%;
  }
}

.pagenation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 72px 0;
}
.pagenation a {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #848484;
  background: #fff;
  border: solid 1px #fafafa;
  transition: 0.3s;
}
.pagenation a:hover, .pagenation a.current {
  border: solid 1px #B0849D;
  background: #B0849D;
  color: #fff;
}

.before-after-slider {
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 3px solid white;
  box-sizing: border-box;
}

.after-image {
  display: block;
}
.after-image img {
  width: 100%;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.before-image {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 2;
}
.before-image img {
  width: 100%;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.resizer {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 5;
  top: 0;
  left: 50%;
  height: 100%;
  width: 4px;
  background: white;
  /*Stop vertical scrolling on touch*/
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.resizer:after {
  background: linear-gradient(62deg, #B0849D 5%, #6E6B91);
  content: "< >";
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: absolute;
  margin: 0 0 0 -22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid white;
}

@media (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 20px;
  }
}
.wrapper {
  padding-top: 96px;
  background: url("/asset/frontSite/images/bg-papper.jpg") top center repeat-y;
  background-size: 100%;
}
@media (max-width: 768px) {
  .wrapper {
    padding-top: 60px;
  }
}

main {
  position: relative;
  overflow-x: hidden;
}
main:before {
  content: "";
  display: block;
  position: absolute;
  width: 100vw;
  height: 20vh;
  background: linear-gradient(180deg, rgba(238, 223, 231, 0.7) 0%, rgba(238, 223, 231, 0) 100%);
}

.hidden {
  display: none !important;
}

.col-full {
  width: 100%;
}

.col-mid {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.col-full-mid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .col-full-mid {
    width: 90%;
  }
}

.col-mids {
  width: 90%;
  max-width: 1158px;
  margin-left: auto;
  margin-right: auto;
}

.col-small {
  width: 90%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

.col-tiny {
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.col-centa {
  justify-content: center;
}

.card-list-col-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 32px;
}
.card-list-col-4 .list--item {
  width: calc((100% - 96px) / 4);
}
@media (max-width: 1024px) {
  .card-list-col-4 .list--item {
    width: calc((100% - 64px) / 3);
  }
}
@media (max-width: 768px) {
  .card-list-col-4 {
    gap: 24px;
  }
  .card-list-col-4 .list--item {
    width: calc((100% - 24px) / 2);
  }
}
@media (max-width: 414px) {
  .card-list-col-4 .list--item {
    width: 100%;
  }
}

.inner-mid {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.page-section {
  margin-top: 180px;
}
.page-section .container {
  margin-top: 96px;
  margin-bottom: 96px;
}
.page-section.mt-small {
  margin-top: 0;
  overflow: hidden;
}
@media (max-width: 768px) {
  .page-section {
    margin-top: 128px;
  }
  .page-section .container {
    margin-top: 48px;
    margin-bottom: 48px;
  }
}
.page-section.section-statement {
  margin-top: 118px;
}
.page-section.section-statement .container {
  margin-top: 0;
}
.page-section.section-statement.mt-small {
  margin-top: 0;
  overflow: hidden;
}

.page-section-table {
  padding-bottom: 128px;
}
.page-section-table .titleBox.type-text {
  padding-bottom: 0;
}
.page-section-table .titleBox.type-text:after {
  display: none;
}
@media (max-width: 768px) {
  .page-section-table {
    padding-bottom: 64px;
  }
}
.page-section-table.pb-0 {
  padding-bottom: 0;
}

.page-act {
  width: calc(100% - 100px);
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  z-index: 20;
}
@media (max-width: 768px) {
  .page-act {
    padding: 12px 0;
    width: 90%;
    gap: 16px;
  }
  .page-act .btn .line-start {
    width: 12px;
  }
  .page-act .btn .line-end {
    width: 12px;
  }
  .page-act .btn .btn-text {
    padding: 4px 0px 4px 0px;
    min-width: 60px;
  }
  .page-act .btn .btn-text .text {
    padding-left: 0;
    font-size: 12px;
  }
  .page-act .btn .btn-text .icon {
    display: none;
  }
  .page-act .breadcrumb {
    height: 42px;
    align-items: center;
    overflow: hidden;
  }
  .page-act .breadcrumb a {
    font-size: 12px;
  }
}

.btn--actbox {
  display: flex;
  /* margin-top: 56px; */
  justify-content: flex-end;
  position: relative;
}
.btn--actbox:before {
  content: "";
  display: block;
  width: calc(100% - 300px);
  height: 3px;
  border-top: solid 1px #B0849D;
  border-bottom: solid 1px #B0849D;
  position: absolute;
  transform: translateY(-50%);
  left: 0;
  top: 50%;
}
.btn--actbox.centa {
  justify-content: center;
}
.btn--actbox.centa:before {
  display: none;
}
@media (max-width: 768px) {
  .btn--actbox {
    margin-top: 32px;
    flex-direction: column;
    align-items: center;
  }
  .btn--actbox:before {
    display: none;
    width: 30px;
    top: -24px;
    transform: translateX(-50%);
    left: 50%;
  }
}

.lg-container.lg-show {
  position: fixed;
  z-index: 9999;
}

.img-shadowbox {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);
}

header {
  width: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  position: fixed;
  top: 0;
  z-index: 9999;
  /*<1240*/
}
header .header--wrapper {
  display: flex;
  justify-content: space-between;
  background: #F4F1F3;
}
header .header--wrapper .logo {
  display: block;
  flex-basis: 283px;
  height: 60px;
  margin: 18px 0 18px 40px;
}
header .header--wrapper .logo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
header .header--wrapper .menu--fnc {
  flex-grow: 1;
  display: flex;
}
header .header--wrapper .menu--fnc .nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
}
header .header--wrapper .menu--fnc .nav .nav-item {
  height: 96px;
}
header .header--wrapper .menu--fnc .nav .nav-item a.nav-main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  height: 100%;
  color: #6E6B91;
  position: relative;
  transition: 0.3s;
}
header .header--wrapper .menu--fnc .nav .nav-item a.nav-main:hover {
  color: #B0849D;
}
header .header--wrapper .menu--fnc .nav .nav-item a.nav-main:hover:after {
  opacity: 1;
}
header .header--wrapper .menu--fnc .nav .nav-item a.nav-main:after {
  content: "";
  display: block;
  width: 18px;
  height: 12px;
  background: url("/asset/frontSite/images/icons/icon-leaf.svg") center center no-repeat;
  background-size: contain;
  position: absolute;
  transition: 0.3s;
  left: 0;
  top: 20px;
  opacity: 0;
}
header .header--wrapper .menu--fnc .nav .nav-item .trigger {
  display: none;
}
header .header--wrapper .menu--fnc .nav .nav-item.active a.nav-main {
  color: #B0849D;
}
header .header--wrapper .menu--fnc .nav .nav-item.active a.nav-main:after {
  opacity: 1;
}
header .header--wrapper .menu--fnc .search {
  width: 40px;
  height: 48px;
  margin-top: 24px;
  margin-right: 40px;
  display: flex;
  align-items: center;
  position: relative;
}
header .header--wrapper .menu--fnc .search img {
  width: 15px;
  height: 15px;
  -o-object-fit: contain;
  object-fit: contain;
}
header .header--wrapper .menu--fnc .search--trigger {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
header .header--wrapper .menu--fnc .search--input {
  position: absolute;
  padding: 8px 0px 8px 16px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  right: 0;
  top: -100px;
  opacity: 0;
  display: flex;
  align-items: center;
  width: 300px;
  gap: 0;
  transition: 0.6s;
}
header .header--wrapper .menu--fnc .search--input input {
  border: none;
  flex-grow: 1;
}
header .header--wrapper .menu--fnc .search--input input:focus {
  outline: solid 1px #B0849D;
}
header .header--wrapper .menu--fnc .search--input button {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  background: none;
}
header .header--wrapper .menu--fnc .search--input .btn-close {
  width: 30px;
  height: 30px;
  background: #fff url("/asset/frontSite/images/icons/icon-close.svg") center center no-repeat;
  background-size: 12px;
  position: absolute;
  top: -15px;
  right: -15px;
  border-radius: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.3s;
}
header .header--wrapper .menu--fnc .search--input .btn-close:hover {
  background: #FFF0D1 url("/asset/frontSite/images/icons/icon-close.svg") center center no-repeat;
}
header .header--wrapper .menu--fnc .search.active .search--input {
  opacity: 1;
  top: 0;
}
header .header--wrapper .menu--ham {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 16px;
  top: 24px;
  display: none;
}
header .header--wrapper .menu--ham span {
  display: block;
  width: 30px;
  height: 2px;
  background: #6E6B91;
  position: absolute;
  transform: translate(-50%, -50%);
}
header .header--wrapper .menu--ham span:nth-child(1) {
  top: 40%;
  left: 50%;
}
header .header--wrapper .menu--ham span:nth-child(2) {
  top: 50%;
  left: 50%;
}
header .header--wrapper .menu--ham span:nth-child(3) {
  top: 60%;
  left: 50%;
}
header .header--wrapper .menu--mega {
  width: 100vw;
  position: fixed;
  top: 96px;
  left: 0;
  background: rgba(255, 255, 255, 0.96);
  display: none;
}
header .header--wrapper .menu--mega--nav {
  display: none;
  flex-wrap: wrap;
  padding: 24px;
}
header .header--wrapper .menu--mega--nav .mobile-menu--mega--nav--link {
  display: none;
}
header .header--wrapper .menu--mega--nav--wrapper {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 32px;
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col {
  width: calc((100% - 128px) / 5);
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title {
  color: #B0849D;
  padding: 0px 0 16px 0;
  margin-bottom: 16px;
  position: relative;
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #B0849D;
  opacity: 0.2;
  position: absolute;
  bottom: 0;
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li {
  width: 100%;
  box-sizing: border-box;
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri {
  display: flex;
  align-items: center;
  color: #6E6B91;
  width: 100%;
  height: 100%;
  padding: 7px 32px 7px 0;
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri span {
  display: inline-block;
  position: relative;
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri span:after {
  content: "";
  display: block;
  width: 16px;
  height: 10px;
  background: url("/asset/frontSite/images/icons/icon-leaf-blue.svg") center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 5px;
  right: -22px;
  opacity: 0;
  transition: 0.3s;
}
header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri:hover span:after {
  opacity: 1;
}
header .header--wrapper .menu--mega--nav.active {
  display: flex;
}
header .header--wrapper .menu--mega.active {
  display: block;
}
@media (max-width: 1239px) {
  header .header--wrapper .menu--fnc {
    background: #fff;
    flex-direction: column;
    position: fixed;
    top: 96px;
    width: 100vw;
    right: -100vw;
    transition: 0.5s;
    height: calc(100vh - 96px);
    overflow: auto;
  }
  header .header--wrapper .menu--fnc .nav {
    flex-direction: column;
    width: 100vw;
    box-sizing: border-box;
    margin-top: 8px;
    gap: 0;
  }
  header .header--wrapper .menu--fnc .nav .nav-item {
    height: auto;
    position: relative;
    flex-direction: column;
    border-bottom: solid 1px #E9EAEF;
    transition: 0.3s;
  }
  header .header--wrapper .menu--fnc .nav .nav-item .trigger {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 8px;
    cursor: pointer;
  }
  header .header--wrapper .menu--fnc .nav .nav-item .trigger.active {
    transform: rotate(180deg);
  }
  header .header--wrapper .menu--fnc .nav .nav-item .trigger.active svg path {
    fill: #fff;
  }
  header .header--wrapper .menu--fnc .nav .nav-item a.nav-main {
    justify-content: flex-start;
    height: 56px;
    box-sizing: border-box;
    padding-left: 5vw;
    padding-right: 5vw;
    transition: 0.3s;
    font-size: 20px;
  }
  header .header--wrapper .menu--fnc .nav .nav-item a.nav-main:after {
    display: none;
  }
  header .header--wrapper .menu--fnc .nav .nav-item a.nav-main:hover, header .header--wrapper .menu--fnc .nav .nav-item a.nav-main.active {
    background: #B0849D;
    color: #fff;
  }
  header .header--wrapper .menu--fnc .nav .nav-item.active .nav-main {
    background: #B0849D;
    color: #fff !important;
  }
  header .header--wrapper .menu--fnc .nav .nav-item.active .menu--mega {
    height: auto;
  }
  header .header--wrapper .menu--fnc .nav .nav-item:hover {
    background: #B0849D;
  }
  header .header--wrapper .menu--fnc .nav .nav-item:hover a.nav-main {
    color: #fff;
  }
  header .header--wrapper .menu--fnc .nav .nav-item:hover .trigger svg path {
    fill: #fff;
  }
  header .header--wrapper .menu--fnc .nav .nav-item .menu--mega {
    overflow: hidden;
    height: 0;
    transition: 1s;
  }
  header .header--wrapper .menu--fnc .search {
    width: 100vw;
    order: -1;
    margin-top: 0;
    margin-right: 0;
    padding-top: 16px;
    padding-bottom: 8px;
  }
  header .header--wrapper .menu--fnc .search .search--trigger {
    display: none;
  }
  header .header--wrapper .menu--fnc .search .search--input {
    position: relative;
    top: 0;
    opacity: 1;
    left: 0;
    width: 90vw;
    left: 5vw;
    box-shadow: none;
    border: solid 1px #fafafa;
  }
  header .header--wrapper .menu--fnc .search .search--input .btn-close {
    display: none;
  }
  header .header--wrapper .menu--fnc.expand {
    right: 0;
  }
  header .header--wrapper .menu--ham {
    display: block;
    top: 23px;
  }
  header .header--wrapper .menu--mega {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #fafafa;
    display: block;
  }
  header .header--wrapper .menu--mega--nav {
    display: block;
    flex-wrap: wrap;
    padding: 0;
  }
  header .header--wrapper .menu--mega--nav .mobile-menu--mega--nav--link {
    display: none;
  }
  header .header--wrapper .menu--mega--nav--wrapper {
    width: 100%;
    flex-direction: column;
    gap: 0;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col {
    width: 100%;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title {
    box-sizing: border-box;
    padding: 8px 16px 8px calc(5vw + 16px);
    margin-bottom: 0;
    position: relative;
    background: #6E6B91;
    color: #fff;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title span {
    font-size: 18px;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title:before {
    content: "";
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega--nav--title:after {
    display: none;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown {
    overflow: hidden;
    max-height: 0;
    transition: 1s;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li {
    width: 100%;
    box-sizing: border-box;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri {
    display: flex;
    align-items: center;
    background: #E9EAEF;
    color: #6E6B91;
    width: 100%;
    height: 100%;
    padding: 7px 16px 7px calc(5vw + 32px);
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri span {
    display: inline-block;
    position: relative;
    font-size: 15px;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri span:after {
    content: "";
    display: block;
    width: 16px;
    height: 10px;
    background: url("/asset/frontSite/images/icons/icon-leaf-blue.svg") center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 5px;
    right: -22px;
    opacity: 0;
    transition: 0.3s;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri:hover {
    background: #fff;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown li a.nav-tri:hover span:after {
    opacity: 1;
  }
  header .header--wrapper .menu--mega--nav--wrapper .mega--nav--col .mega-nav-dropdown.active {
    max-height: 50vh;
  }
  header .header--wrapper .menu--mega--nav.active {
    display: block;
  }
  header .header--wrapper .menu--mega.active {
    display: block;
  }
}
@media (max-width: 1024px) {
  header .header--wrapper .menu--ham {
    display: block;
  }
}
@media (max-width: 768px) {
  header .header--wrapper .logo {
    flex-basis: 189px;
    height: 40px;
    margin: 10px 0 10px 24px;
  }
  header .header--wrapper .menu--fnc {
    top: 60px;
    height: calc(100vh - 60px);
  }
  header .header--wrapper .menu--ham {
    top: 5px;
  }
}

@keyframes menuSub-d-open {
  from {
    display: none;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes menuSub-d-close {
  from {
    display: block;
    opacity: 1;
    overflow: hidden;
    height: auto;
  }
  to {
    opacity: 0;
    height: 0;
  }
}
.sideFunNav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #b0849d;
  transition: 0.3s;
}
.sideFunNav--icon {
  width: 50%;
  height: 50%;
}
.sideFunNav--icon svg {
  width: 100%;
  height: 100%;
}
.sideFunNav:hover {
  background: #6e6b91 !important;
}

.sideFunBox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: fixed;
  bottom: 25vh;
  right: 24px;
  z-index: 99999;
}
.sideFunBox .sideFunNav:nth-child(odd) {
  background: #cfb4c3;
}
.sideFunBox .sideFunNav.gototop {
  margin-top: 60px;
}
@media (max-width: 1024px) {
  .sideFunBox {
    z-index: 9998;
  }
}
@media (max-width: 768px) {
  .sideFunBox {
    right: 8px;
    bottom: 10vh;
    flex-direction: row;
    width: 100%;
    right: auto;
    justify-content: center;
    background: #fafafa;
    padding: 8px 0;
    bottom: 0;
    top: auto;
  }
  .sideFunBox .sideFunNav.gototop {
    margin-top: 0;
  }
}

footer {
  background: #fff;
  overflow: hidden;
  position: relative;
  z-index: 9999;
  margin-top: 96px;
}
footer .footer-box {
  margin: 40px auto;
}
footer .footer-box .lan {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
footer .footer-box .lan--box {
  display: flex;
  align-items: center;
  border: solid 1px #B0849D;
  padding: 8px 16px;
  gap: 8px;
  border-radius: 4px;
}
footer .footer-box .lan--box .lan-icon {
  width: 20px;
  height: 20px;
}
footer .footer-box .lan--box .lan-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
footer .footer-box .lan--box select {
  border: none;
  padding-right: 32px;
  color: #B0849D;
  font-size: 300;
  outline: none;
}
footer .footer-box .footer-content {
  display: flex;
  -moz-column-gap: 174px;
  column-gap: 174px;
}
footer .footer-box .footer-content .branding {
  width: 80%;
  max-width: 376px;
  position: relative;
}
footer .footer-box .footer-content .branding .logo-footer {
  margin-top: -24px;
}
footer .footer-box .footer-content .branding .logo-footer img {
  width: 100%;
}
footer .footer-box .footer-content .branding .socialMedia {
  display: flex;
  justify-content: center;
  gap: 14.5px;
  position: absolute;
  right: 3px;
  top: 56px;
}
footer .footer-box .footer-content .branding .socialMedia .social-link {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #CFB4C3;
  transition: 0.3s;
}
footer .footer-box .footer-content .branding .socialMedia .social-link .social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
footer .footer-box .footer-content .branding .socialMedia .social-link .social-icon svg {
  width: 30px;
  height: auto;
}
footer .footer-box .footer-content .branding .socialMedia .social-link:hover {
  background: #B0849D;
}
@media (max-width: 1024px) {
  footer .footer-box .footer-content .branding .socialMedia {
    right: 6px;
  }
  footer .footer-box .footer-content .branding .socialMedia .social-link {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 768px) {
  footer .footer-box .footer-content .branding .socialMedia {
    position: relative;
    margin-top: 24px;
    right: auto;
    top: 0;
  }
  footer .footer-box .footer-content .branding .socialMedia .social-link {
    width: 40px;
    height: 40px;
  }
}
footer .footer-box .footer-content .statement {
  flex-grow: 1;
}
footer .footer-box .footer-content .statement .f-base, footer .footer-box .footer-content .statement .search-brief, footer .footer-box .footer-content .statement .titleBox .section-intro, .titleBox footer .footer-box .footer-content .statement .section-intro {
  color: #6E6B91;
  margin-bottom: 8px;
}
footer .footer-box .footer-content .statement ul {
  padding-left: 16px;
  list-style-type: disc;
}
footer .footer-box .footer-content .statement ul li {
  margin-bottom: 8px;
}
@media (max-width: 1024px) {
  footer .footer-box .footer-content {
    row-gap: 64px;
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  footer .footer-box .footer-content {
    -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 32px;
  }
  footer .footer-box .footer-content .branding {
    margin: 34px auto 0 auto;
    align-items: center;
  }
  footer .footer-box .footer-content .branding .logo-footer {
    margin-top: 0;
  }
}
footer .copyRight {
  width: 100%;
  padding: 8px;
  background: #B0849D;
}
footer .copyRight span {
  display: block;
  text-align: center;
  color: #fff;
}
@media (max-width: 768px) {
  footer {
    margin-top: 64px;
  }
}

.hero {
  width: 100%;
  position: relative;
  display: flex;
}
.hero .siteBrief {
  flex-grow: 1;
  position: relative;
}
.hero .siteBrief .siteBrief--container {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 380px;
  padding-left: 40px;
  position: absolute;
}
.hero .siteBrief .siteBrief--container .siteBrief--title {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0px;
  margin-top: 15px;
}
.hero .siteBrief .siteBrief--container .siteBrief--brief {
  margin-top: 50px;
}
.hero .siteBrief .siteBrief--container .siteBrief--brief h4 {
  color: #6E6B91;
  margin: 0;
  margin-bottom: 16px;
}
.hero .siteBrief .siteBrief--container .siteBrief--brief p {
  color: #B0849D;
  margin: 0;
}
.hero .hero--slider {
  width: 60.4%;
  flex-shrink: 0;
  max-width: 870px;
  aspect-ratio: 870/720;
  overflow: visible;
}
.hero .hero--slider .swiper-wrapper .swiper-slide {
  border-radius: 200px 0 200px 200px;
  overflow: hidden;
}
.hero .hero--slider .swiper-wrapper .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.hero .hero--slider .swiper-wrapper .swiper-slide a img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero .hero--slider .cus-fnc {
  display: flex;
  width: 250px;
  height: 40px;
  position: absolute;
  bottom: 8px;
  left: -31.4vw;
}
.hero .hero--slider .cus-fnc .swiper-button-prev {
  right: 32px;
  left: auto;
  margin-top: -30px !important;
}
.hero .hero--slider .cus-fnc .swiper-button-next {
  margin-top: -30px !important;
  right: -42px;
}
.hero .hero--slider .cus-fnc .swiper-pagination {
  justify-content: flex-start;
  left: 0;
  text-align: left;
  color: #B0849D;
}
.hero .hero--slider .cus-fnc:after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: #B0849D;
  left: 37%;
  top: calc(50% + 2px);
}
@media (max-width: 768px) {
  .hero {
    flex-wrap: wrap;
  }
  .hero .siteBrief {
    order: 2;
    width: 100%;
    padding-top: 72px;
  }
  .hero .siteBrief .siteBrief--container {
    position: relative;
    padding-left: 0;
    left: 5%;
    top: 0;
    transform: none;
  }
  .hero .siteBrief .siteBrief--container .siteBrief--title {
    width: 70%;
  }
  .hero .siteBrief .siteBrief--container .siteBrief--brief {
    margin-top: 24px;
  }
  .hero .siteBrief .siteBrief--container .siteBrief--brief h4 {
    font-size: 16px;
  }
  .hero .siteBrief .siteBrief--container .siteBrief--brief p {
    font-size: 14px;
  }
  .hero .hero--slider {
    width: calc(100% - 24px);
    margin-right: 0;
  }
  .hero .hero--slider .swiper-wrapper .swiper-slide {
    border-radius: 100px 0 100px 100px;
  }
  .hero .hero--slider .cus-fnc {
    position: relative;
    left: 0;
    margin-top: 24px;
  }
  .hero .hero--slider .cus-fnc .swiper-button-prev, .hero .hero--slider .cus-fnc .swiper-button-next {
    margin-top: -16px !important;
  }
}

.section-about {
  margin-top: 80px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  border-bottom: solid 16px #B0849D;
}
.section-about .section-about-swiper {
  width: 43.75%;
  flex-grow: 0;
  flex-shrink: 0;
  aspect-ratio: 630/603;
  left: 0;
  margin: 0;
  position: relative;
}
.section-about .section-about-swiper .section-about--slide {
  width: 100%;
  height: 100%;
  border-radius: 0 200px 0 0;
  overflow: hidden;
}
.section-about .section-about-swiper .section-about--slide .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-about .section-about-swiper .section-about--mask {
  position: absolute;
  width: 100%;
  height: auto;
  display: block;
  bottom: 0;
  z-index: 2;
}
.section-about .section-about-swiper .section-about--corner {
  position: absolute;
  width: 80px;
  height: 80px;
  display: block;
  bottom: 0;
  right: -80px;
  z-index: 2;
}
.section-about .infoBox {
  flex-grow: 1;
  position: relative;
}
.section-about .infoBox .infoBox--content {
  position: absolute;
  transform: translateX(-50%);
  left: 35%;
  top: 96px;
}
.section-about .infoBox .infoBox--content section h4 {
  color: #B0849D;
  margin-bottom: 16px;
}
.section-about .infoBox .signature {
  display: block;
  width: 13%;
  height: auto;
  max-width: 99px;
  position: absolute;
  top: -30px;
  right: 11vw;
}
@media (max-width: 1024px) {
  .section-about {
    flex-direction: column;
    border-bottom: solid 4px #B0849D;
  }
  .section-about .section-about-swiper {
    width: 80%;
  }
  .section-about .section-about-swiper .section-about--slide {
    border-radius: 0 100px 0 0;
  }
  .section-about .section-about-swiper .section-about--corner {
    width: 40px;
    height: 40px;
    right: -40px;
  }
  .section-about .infoBox {
    order: -1;
    width: 90%;
    margin: 0 auto 24px auto;
  }
  .section-about .infoBox .infoBox--content {
    position: relative;
    transform: none;
    left: 0;
    top: 0;
  }
  .section-about .infoBox .signature {
    right: 0;
  }
}

.section-about--footer {
  width: 60%;
  max-width: 573px;
  height: auto;
  aspect-ratio: 573/107;
  background: url("/asset/frontSite/images/index-main-footer.png") top left no-repeat;
  background-size: contain;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 5.5%;
  color: #fff;
}
.section-about--footer h3 {
  margin-top: -8px;
}
@media (max-width: 1024px) {
  .section-about--footer {
    width: 320px;
    max-width: auto;
  }
  .section-about--footer h3 {
    font-size: 16px;
  }
  .section-about--footer h4 {
    font-size: 18px;
  }
}

.section-news {
  background: url("/asset/frontSite/images/bg-section-a.png") center left 10px no-repeat;
  background-size: 70% 100%;
  padding-bottom: 32px;
}
.section-news .container {
  display: flex;
  gap: 30px;
}
.section-news .container .tab-cateList {
  flex-grow: 1;
}
.section-news .container .tab-cateList--container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.section-news .container .tab-content {
  width: 84.7%;
  flex-grow: 0;
  flex-shrink: 0;
}
.section-news .container .tab-content .news-list {
  flex-wrap: wrap;
  -moz-column-gap: 32px;
  column-gap: 32px;
  row-gap: 56px;
  opacity: 0;
  display: none;
}
.section-news .container .tab-content .news-list .list--item {
  width: calc((100% - 32px) / 2);
}
.section-news .container .tab-content .news-list.active {
  display: flex;
  opacity: 1;
}
@media (max-width: 1024px) {
  .section-news .container {
    display: flex;
    flex-direction: column;
  }
  .section-news .container .tab-cateList {
    overflow: auto;
  }
  .section-news .container .tab-cateList--container {
    flex-direction: row;
    gap: 8px;
  }
  .section-news .container .tab-content {
    width: 100%;
  }
  .section-news .container .tab-content .news-list {
    flex-direction: column;
    column-gap: 0;
    row-gap: 16px;
  }
  .section-news .container .tab-content .news-list .list--item {
    width: 100%;
  }
}

.section-treatment {
  margin-top: 184px;
  background: url("/asset/frontSite/images/bg-section-b.png") right 1vw top 1vh no-repeat;
  background-size: 70% calc(100% - 20vh);
}
.section-treatment .container {
  margin-top: 24px;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide {
  padding-top: 100px;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide .card-treat {
  position: relative;
  transform: translateX(-50%) scale(0.7);
  transform-origin: top center;
  left: 50%;
  transition: 1s;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide .card-treat .treatment-list {
  opacity: 0;
  transition: 0.5s;
  transition-delay: 1s;
  position: relative;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide .card-treat .treatment-list:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-prev, .section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-next {
  padding-top: 60px;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-prev .card-treat, .section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-next .card-treat {
  position: relative;
  transform: translateX(-50%) scale(0.8);
  transform-origin: top center;
  left: 45%;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-next .card-treat {
  left: 55%;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-active {
  padding-top: 0px;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-active .card-treat {
  position: relative;
  transform: translateX(-50%) scale(1);
  transform-origin: top center;
  left: 50%;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-active .card-treat .treatment-list {
  opacity: 1;
}
.section-treatment .treatment--slide .swiper-wrapper .swiper-slide.swiper-slide-active .card-treat .treatment-list:after {
  display: none;
}
.section-treatment .treatment--slide .swiper-pagination {
  width: 100%;
  transform: translateX(-50%);
  top: 35%;
  left: 50%;
}
.section-treatment .treatment--slide .swiper-pagination .swiper-button-prev {
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  left: 13%;
  top: 10%;
}
.section-treatment .treatment--slide .swiper-pagination .swiper-button-prev:after {
  width: 17px;
  height: 17px;
}
.section-treatment .treatment--slide .swiper-pagination .swiper-button-next {
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  left: 87%;
  top: 10%;
}
.section-treatment .treatment--slide .swiper-pagination .swiper-button-next:after {
  width: 17px;
  height: 17px;
}
@media (max-width: 768px) {
  .section-treatment {
    margin-top: 120px;
  }
  .section-treatment .container {
    margin-top: 0;
  }
  .section-treatment .treatment--slide .swiper-button-prev {
    width: 40px;
    height: 40px;
    left: 7%;
    top: 30%;
  }
  .section-treatment .treatment--slide .swiper-button-next {
    width: 40px;
    height: 40px;
    left: 93%;
    top: 30%;
  }
}

.section-witness {
  background: url("/asset/frontSite/images/bg-section-c.png") center top 10vh no-repeat;
  background-size: 100% 89%;
}
.section-witness .witness--list {
  display: flex;
  flex-wrap: wrap;
  gap: 74px;
  justify-content: flex-start;
}
.section-witness .witness--list .card-witness:nth-child(4) {
  margin-left: auto;
}
@media (max-width: 1024px) {
  .section-witness .witness--list {
    justify-content: center;
  }
  .section-witness .witness--list .card-witness:nth-child(4) {
    margin-left: 0;
  }
}
@media (max-width: 768px) {
  .section-witness {
    margin-top: 0;
  }
}

.section-video .video--slide .swiper-wrapper {
  padding: 40px 0;
  margin-left: -100px;
}
.section-video .video--slide .swiper-slide {
  padding: 50px 0;
  aspect-ratio: 6/4;
  overflow: hidden;
  border-radius: 80px;
  margin-top: 25px;
}
.section-video .video--slide .swiper-slide.left-slide {
  transform: rotateY(60deg) !important; /* 固定旋轉角度 */
  transition: transform 0.3s ease; /* 平滑過渡效果 */
}
.section-video .video--slide .swiper-slide.right-slide {
  transform: rotateY(-60deg) !important; /* 固定旋轉角度 */
  transition: transform 0.3s ease; /* 平滑過渡效果 */
}
.section-video .video--slide .swiper-slide .card-video {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
}
.section-video .video--slide .swiper-slide .card-video .card-cover {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
}
.section-video .video--slide .swiper-slide .card-video .card-cover .playbtn {
  opacity: 0;
}
.section-video .video--slide .swiper-slide .card-video .card-content {
  opacity: 0;
  padding: 0 24px;
  box-sizing: border-box;
}
.section-video .video--slide .swiper-slide.swiper-slide-active {
  transform: rotateY(0deg) !important; /* 無旋轉 */
  padding: 50px 100px 200px 100px;
  border-radius: 80px;
  margin-top: 0px;
}
.section-video .video--slide .swiper-slide.swiper-slide-active .card-video .card-cover {
  transform: translate(-50%, 0%);
  top: 0;
  height: calc(100% - 100px);
}
.section-video .video--slide .swiper-slide.swiper-slide-active .card-video .card-cover .playbtn {
  opacity: 1;
}
.section-video .video--slide .swiper-slide.swiper-slide-active .card-video .card-cover > img {
  border-radius: 80px;
}
.section-video .video--slide .swiper-slide.swiper-slide-active .card-video .card-content {
  opacity: 1;
  transition: 0.5s;
  transition-delay: 1s;
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  bottom: 0px;
}
@media (max-width: 768px) {
  .section-video .video--slide .swiper-slide.swiper-slide-active .card-video {
    width: calc(90vw - 80px);
  }
}
.section-video .video--slide .swiper-button-prev {
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  left: calc(50% - 19vw - 32px);
  top: calc(50% - 58px);
}
.section-video .video--slide .swiper-button-prev:after {
  width: 17px;
  height: 17px;
}
.section-video .video--slide .swiper-button-next {
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  left: calc(50% + 19vw + 32px);
  top: calc(50% - 58px);
}
.section-video .video--slide .swiper-button-next:after {
  width: 17px;
  height: 17px;
}
@media (max-width: 1024px) {
  .section-video .video--slide .swiper-button-prev {
    top: calc(50% - 58px);
    left: calc(50% - 35vw);
  }
  .section-video .video--slide .swiper-button-next {
    top: calc(50% - 58px);
    left: calc(50% + 35vw);
  }
}
@media (max-width: 768px) {
  .section-video .video--slide {
    padding: 0 24px;
  }
  .section-video .video--slide .swiper-button-prev {
    transform: translateX(0);
    transform: translateY(-50%);
    top: calc(50% - 58px);
    left: 0;
  }
  .section-video .video--slide .swiper-button-next {
    transform: translateX(0);
    transform: translateY(-50%);
    left: auto;
    top: calc(50% - 58px);
    right: 0;
  }
}
@media (max-width: 414px) {
  .section-video .video--slide .swiper-slide.swiper-slide-active .card-video .card-cover {
    height: calc(100% - 118px);
  }
}

.section-certificate .certificate--slide {
  padding-bottom: 60px;
  padding-right: 16px;
  padding-left: 16px;
}
.section-certificate .certificate--slide .swiper-slide img {
  width: 100%;
}
.section-certificate .certificate--slide .swiper-button-prev {
  margin-top: -60px !important;
  left: 0px;
}
.section-certificate .certificate--slide .swiper-button-next {
  margin-top: -60px !important;
  right: 0px;
}

.section-comment {
  background: url("/asset/frontSite/images/bg-section-d.png") top left no-repeat;
  background-size: 86.7% 100%;
}
.section-comment .comment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: flex-end;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
.section-comment .comment-list .card-item:nth-child(4) {
  margin-right: auto;
}

.section-contact {
  background: url("/asset/frontSite/images/bg-section-e.png") top 5vh left no-repeat;
  background-size: 50% calc(100% - 5vh);
}
.section-contact .siteBrief--title {
  width: 40%;
  max-width: 380px;
}
.section-contact .contact-box {
  margin-top: 48px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.section-contact .contact-box .map {
  width: 100%;
  max-width: 574px;
  margin: 0 auto;
  aspect-ratio: 570/500;
  border: solid 2px #B0849D;
  flex-shrink: 0;
  overflow: hidden;
}
.section-contact .contact-box .map img {
  width: 100%;
}
.section-contact .contact-box .contact-info {
  flex-grow: 1;
}
.section-contact .contact-box .contact-info .tabs {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  border-bottom: solid 1px #B0849D;
}
.section-contact .contact-box .contact-info .tabs .tab--item {
  flex-grow: 1;
  width: 100%;
  padding: 8px 0;
  border: solid 1px #B0849D;
  border-radius: 16px 16px 0 0;
  margin-bottom: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}
.section-contact .contact-box .contact-info .tabs .tab--item span {
  letter-spacing: 1px;
  color: #B0849D;
}
.section-contact .contact-box .contact-info .tabs .tab--item:hover, .section-contact .contact-box .contact-info .tabs .tab--item.active {
  background: #B0849D;
}
.section-contact .contact-box .contact-info .tabs .tab--item:hover span, .section-contact .contact-box .contact-info .tabs .tab--item.active span {
  color: #fff;
}
.section-contact .contact-box .contact-info .tab-content {
  position: relative;
}
.section-contact .contact-box .contact-info .tab-content .tab-content--list .tab-content--info {
  margin-top: 24px;
  padding: 0 16px;
  box-sizing: border-box;
  display: none;
}
.section-contact .contact-box .contact-info .tab-content .tab-content--list .tab-content--info ul {
  margin: 0;
  padding: 0;
}
.section-contact .contact-box .contact-info .tab-content .tab-content--list .tab-content--info ul li {
  margin-bottom: 32px;
}
.section-contact .contact-box .contact-info .tab-content .tab-content--list .tab-content--info ul li h5 {
  margin-top: 0;
  margin-bottom: 4px;
  color: #B0849D;
}
.section-contact .contact-box .contact-info .tab-content .tab-content--list .tab-content--info ul li p {
  color: #6E6B91;
  font-weight: 300;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.section-contact .contact-box .contact-info .tab-content .tab-content--list .tab-content--info.active {
  display: block;
}
.section-contact .contact-box .contact-info .tab-content .btn-outline-ex {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}
@media (max-width: 1024px) {
  .section-contact .contact-box {
    flex-wrap: wrap;
  }
}

.section-process .container img {
  width: 100%;
}

.category-hero {
  width: 100%;
  height: 60vh;
  background: url("/asset/frontSite/images/cate-header-curve.png") right bottom no-repeat;
  background-size: 700px 50%;
  max-height: 480px;
  position: relative;
  /*<1280*/
}
.category-hero--img {
  width: auto;
  height: calc(100% - 40px);
  padding-top: 40px;
  margin-left: -8%;
}
.category-hero--img img {
  display: block;
  width: auto;
  height: 100%;
}
.category-hero--title {
  display: inline-flex;
  width: 90%;
  max-width: 600px;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.category-hero--title .title-main .h3 {
  color: #B0849D;
}
.category-hero--title .title-main .h2 {
  margin: 16px 0 0 0;
  color: #6E6B91;
}
.category-hero--index {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-right: 16px;
}
.category-hero--deco {
  display: block;
  width: 24%;
  height: auto;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  opacity: 0.5;
}
@media (max-width: 1279px) {
  .category-hero {
    height: 50vh;
    max-height: 380px;
  }
  .category-hero--title {
    left: 55%;
  }
}
@media (max-width: 1024px) {
  .category-hero {
    height: 40vh;
    max-height: 380px;
  }
  .category-hero--img {
    margin-left: -10%;
  }
}
@media (max-width: 768px) {
  .category-hero {
    height: 40vh;
    max-height: 380px;
  }
  .category-hero--img {
    margin-left: -10%;
  }
  .category-hero--title {
    transform: none;
    top: 15%;
    left: auto;
    margin-right: 0;
    right: 40px;
    gap: 16px;
  }
  .category-hero--deco {
    top: 15%;
  }
}
@media (max-width: 700px) {
  .category-hero {
    height: auto;
    max-height: 100%;
    padding-bottom: 15vh;
    background-size: 100% 22%;
  }
  .category-hero--img {
    width: 100%;
    aspect-ratio: 2/1;
    margin: 16px auto 0 auto;
    overflow: hidden;
  }
  .category-hero--img img {
    width: 100%;
    height: auto;
    margin-left: -10%;
  }
  .category-hero--title {
    position: relative;
    width: 90%;
    margin: 24px auto 0 auto;
    left: inherit;
    right: inherit;
  }
  .category-hero--title .titleBox.herobanner-title .section-subtitle {
    text-align: center;
  }
  .category-hero--title .titleBox.herobanner-title .section-title {
    letter-spacing: 2px;
    text-align: center;
  }
  .category-hero--title .category-hero--index {
    justify-content: center;
  }
}

.category--container .page-section {
  margin-top: 0;
  margin-top: 180px;
  position: relative;
}
@media (max-width: 768px) {
  .category--container .page-section {
    margin-top: 120px;
  }
}

.category-section {
  margin-bottom: 64px;
  padding-bottom: 148px;
}
.category-section.page-section {
  padding-top: 180px;
  margin-top: 0;
}
.category-section:nth-child(1) {
  margin-top: 0;
  padding-top: 100px;
}
.category-section.order-right .category-section--title {
  order: 2;
}
.category-section--inner--wrapper {
  display: flex;
  gap: 64px;
}
.category-section--inner--wrapper .category-section--title {
  width: 340px;
  padding-top: 76px;
  flex-shrink: 0;
  margin-top: -160px;
}
.category-section--inner--wrapper .category-section--title .titleBox {
  position: relative;
}
.category-section--inner--wrapper .category-section--title .titleBox .number {
  font-size: 300px;
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 1px #B0849D;
  position: absolute;
  right: -60px;
  top: -280px;
}
.category-section--inner--wrapper .category-section--title .titleBox .section-title {
  letter-spacing: 6px;
  position: relative;
  z-index: 2;
}
.category-section--inner--wrapper .category-section--title .category-type-slide {
  flex-grow: 1;
}
.category-section .deco-ab {
  position: absolute;
}
.category-section .deco-ab.deco-treatment {
  display: block;
}
.category-section .deco-ab.deco-treatment-1 {
  width: 50%;
  max-width: 350px;
  right: 12%;
  bottom: 5%;
  opacity: 0.5;
}
.category-section .deco-ab.deco-treatment-2 {
  width: 50%;
  max-width: 637px;
  left: 3%;
  bottom: 2%;
}
.category-section .deco-ab.deco-treatment-3 {
  width: 50%;
  max-width: 605px;
  right: 3%;
  bottom: 4%;
  opacity: 0.5;
}
@media (max-width: 1024px) {
  .category-section--inner--wrapper .category-section--title .titleBox .number {
    font-size: 200px;
    right: 50px;
    top: -190px;
  }
}
@media (max-width: 768px) {
  .category-section {
    padding-bottom: 64px;
    margin-top: 0;
    padding-top: 180px;
  }
  .category-section--inner--wrapper {
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
  }
  .category-section--inner--wrapper .category-section--title {
    order: 0 !important;
  }
  .category-section--inner--wrapper .category-type-slide {
    aspect-ratio: 360/520;
    width: 100%;
  }
  .category-section .deco-ab.deco-treatment-1 {
    width: 55%;
    right: 3%;
    bottom: -1%;
  }
  .category-section .deco-ab.deco-treatment-2 {
    width: 65%;
    left: 3%;
    bottom: 0%;
  }
  .category-section .deco-ab.deco-treatment-3 {
    width: 70%;
    right: 3%;
    bottom: -1%;
  }
}

#category-treatment-1 {
  background: url("/asset/frontSite/images/cate-bg-sec1.png") top center no-repeat;
  background-size: 90% 100%;
}
#category-treatment-2 {
  background: url("/asset/frontSite/images/cate-bg-sec2.png") center right no-repeat;
  background-size: 100% 92%;
}
#category-treatment-3 {
  background: url("/asset/frontSite/images/cate-bg-sec3.png") top center no-repeat;
  background-size: 100% 100%;
}
#category-treatment-4 {
  background: url("/asset/frontSite/images/cate-bg-sec4.png") top center no-repeat;
  background-size: 90% 100%;
}
#category-treatment-5 {
  background: url("/asset/frontSite/images/cate-bg-sec5.png") top center no-repeat;
  background-size: 90% 100%;
}
@media (max-width: 768px) {
  #category-treatment-1 {
    padding-bottom: 100px;
    background: url("/asset/frontSite/images/cate-bg-sec1.png") top center no-repeat;
    background-size: 200% 100%;
  }
  #category-treatment-2 {
    padding-bottom: 100px;
    background: url("/asset/frontSite/images/cate-bg-sec2.png") center right no-repeat;
    background-size: 200% 100%;
  }
  #category-treatment-3 {
    padding-bottom: 100px;
    background: url("/asset/frontSite/images/cate-bg-sec3.png") top center no-repeat;
    background-size: 200% 100%;
  }
  #category-treatment-4 {
    padding-bottom: 100px;
    background: url("/asset/frontSite/images/cate-bg-sec4.png") top center no-repeat;
    background-size: 200% 100%;
  }
  #category-treatment-5 {
    padding-bottom: 100px;
    background: url("/asset/frontSite/images/cate-bg-sec5.png") top center no-repeat;
    background-size: 200% 100%;
  }
}

.category-type-slide {
  width: 75%;
  aspect-ratio: 700/520;
  border-radius: 60px;
}
.category-type-slide .swiper-button-prev {
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}
.category-type-slide .swiper-button-next {
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}

main.caseStudy {
  overflow: hidden;
}

.hero.caseStudy {
  width: 100%;
  height: 60vh;
  max-height: 480px;
  position: relative;
  padding-top: 80px;
}
.hero.caseStudy .hero--img {
  width: auto;
  height: 40%;
  margin-top: 46px;
  margin-left: 24px;
}
.hero.caseStudy .hero--img img {
  display: block;
  width: auto;
  height: 100%;
}
.hero.caseStudy .hero--title {
  display: inline-flex;
  max-width: 600px;
  position: absolute;
  transform: translateY(-50%);
  top: 45%;
  left: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.hero.caseStudy .hero--title .title-main .h3 {
  color: #B0849D;
}
.hero.caseStudy .hero--title .title-main .h2 {
  margin: 16px 0 0 0;
  color: #6E6B91;
}
.hero.caseStudy .hero--index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero.caseStudy .hero--deco {
  display: block;
  width: auto;
  height: 137%;
  position: absolute;
  top: -3%;
  right: -1%;
  opacity: 0.9;
}
@media (max-width: 1024px) {
  .hero.caseStudy .hero--title {
    position: relative;
    transform: none;
    width: 90%;
    top: auto;
    left: auto;
    margin: 24px auto 0 auto;
  }
  .hero.caseStudy .hero--deco {
    right: -7%;
  }
}
@media (max-width: 768px) {
  .hero.caseStudy {
    height: 40vh;
    max-height: 240px;
  }
  .hero.caseStudy .hero--title {
    position: relative;
    transform: none;
    top: auto;
    left: auto;
    margin: 120px auto 140px auto;
  }
  .hero.caseStudy .hero--img {
    position: absolute;
    margin-top: auto;
    margin-left: auto;
    top: -72px;
    left: 200px;
  }
  .hero.caseStudy .hero--deco {
    top: -10vh;
    height: 180%;
  }
}
@media (max-width: 520px) {
  .hero.caseStudy {
    height: 40vh;
    max-height: 100%;
  }
  .hero.caseStudy .hero--img {
    height: 100px;
    position: absolute;
    margin-top: auto;
    margin-left: auto;
    top: 0;
    bottom: -72px;
    right: 24px;
    left: auto;
  }
  .hero.caseStudy .hero--deco {
    height: 130%;
    top: -5vh;
    right: -20vw;
  }
}

.page-section.section-caseStudy {
  margin-top: 0;
}
@media (max-width: 768px) {
  .page-section.section-caseStudy {
    margin-top: 64px;
  }
}

.caseStudy-cate {
  margin-bottom: 64px;
  padding-bottom: 148px;
  position: relative;
}
.caseStudy-cate--title {
  position: relative;
}
.caseStudy-cate--title .titleBox {
  position: relative;
  width: 100%;
}
.caseStudy-cate--title .titleBox .icon {
  width: 36px;
  height: 36px;
  position: absolute;
  left: 15vw;
  top: -26px;
}
.caseStudy-cate--title .titleBox .section-title {
  display: block;
  text-align: left;
  padding-left: 17vw;
  letter-spacing: 10px;
}
.caseStudy-cate--title .titleBox:before {
  content: "";
  display: block;
  width: 11%;
  height: 1px;
  background: #B0849D;
  position: absolute;
  transform: translateY(-50%);
  left: 3%;
  top: 50%;
}
.caseStudy-cate--title .titleBox:after {
  content: "";
  display: block;
  width: 45%;
  height: 1px;
  background: #B0849D;
  position: absolute;
  transform: translateY(-50%);
  right: 5%;
  top: 50%;
}
.caseStudy-cate--title .brief {
  width: 60%;
  max-width: 468px;
  margin-left: 17vw;
  margin-top: 24px;
}
.caseStudy-cate--content .caseStudy-slide {
  margin-top: 60px;
}
.caseStudy-cate--content .caseStudy-slide .swiper-wrapper .swiper-slide {
  width: 20%;
}
.caseStudy-cate--content .caseStudy-slide .swiper-wrapper .swiper-slide.addeven .card-case {
  padding-top: 128px;
  transition: 0.3s;
}
.caseStudy-cate--content .caseStudy-slide .swiper-wrapper .swiper-slide.swiper-slide-active .card-case .card-cover img {
  transition: 0.5s;
  border-radius: 165px 165px 0 165px;
}
.caseStudy-cate--content .caseStudy-slide .swiper-wrapper .swiper-slide.swiper-slide-active .card-case .card-cover:after {
  transition: 0.5s;
  border-radius: 165px 165px 0 165px;
}
.caseStudy-cate--content .caseStudy-slide .swiper-pagination {
  width: 80vw;
  transform: translate(-50%, -50%);
  top: 40%;
  left: 50%;
}
.caseStudy-cate--content .caseStudy-slide .swiper-pagination .swiper-button-prev {
  width: 64px;
  height: 64px;
}
.caseStudy-cate--content .caseStudy-slide .swiper-pagination .swiper-button-next {
  width: 64px;
  height: 64px;
}
.caseStudy-cate:nth-child(1) {
  margin-top: 0;
  padding-top: 56px;
}
.caseStudy-cate:nth-child(even) .caseStudy-cate--title {
  position: relative;
}
.caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox {
  position: relative;
  width: 100%;
}
.caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox .icon {
  width: 36px;
  height: 36px;
  position: absolute;
  left: auto;
  right: calc(15vw + 340px);
  top: -26px;
}
.caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox .section-title {
  display: block;
  text-align: right;
  padding-right: 15vw;
  letter-spacing: 10px;
}
.caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox:before {
  content: "";
  display: block;
  width: 11%;
  height: 1px;
  background: #B0849D;
  position: absolute;
  transform: translateY(-50%);
  right: 3%;
  left: auto;
  top: 50%;
}
.caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox:after {
  content: "";
  display: block;
  width: 45%;
  height: 1px;
  background: #B0849D;
  position: absolute;
  transform: translateY(-50%);
  left: 5%;
  right: auto;
  top: 50%;
}
.caseStudy-cate:nth-child(even) .caseStudy-cate--title .brief {
  width: 60%;
  max-width: 468px;
  margin-left: auto;
  margin-right: 15vw;
  margin-top: 24px;
}
.caseStudy-cate:nth-child(3) .caseStudy-cate--title .titleBox:after {
  width: 34%;
}
.caseStudy-cate:last-child {
  padding-bottom: 0px;
}
.caseStudy-cate .deco-1 {
  position: absolute;
  width: 70%;
  max-width: 576px;
  top: 160px;
}
.caseStudy-cate .deco-2 {
  position: absolute;
  width: 25%;
  max-width: 468px;
  top: -24px;
  left: 0px;
  opacity: 0.5;
}
.caseStudy-cate .deco-2-2 {
  position: absolute;
  width: 40%;
  max-width: 246px;
  bottom: 0px;
  right: 60px;
}
.caseStudy-cate .deco-3 {
  position: absolute;
  width: 100%;
  max-width: 537px;
  top: 160px;
  right: 0;
}
.caseStudy-cate .deco-4 {
  position: absolute;
  width: 100%;
  max-width: 1375px;
  top: 140px;
  left: -3vw;
}
@media (max-width: 768px) {
  .caseStudy-cate {
    margin-bottom: 64px;
    padding-bottom: 0;
  }
  .caseStudy-cate--title .titleBox .icon {
    left: 13vw;
    top: -32px;
  }
  .caseStudy-cate--title .titleBox .section-title {
    padding-left: 15vw;
    letter-spacing: 4px;
  }
  .caseStudy-cate--title .titleBox:before {
    width: 8%;
    left: 3%;
    top: 50%;
  }
  .caseStudy-cate--title .titleBox:after {
    width: 30%;
    right: 5%;
    top: 50%;
  }
  .caseStudy-cate--title .brief {
    margin-left: 15vw;
    margin-top: 24px;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox .icon {
    right: calc(11vw + 208px);
    top: -32px;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox .section-title {
    text-align: right;
    padding-left: 11vw;
    padding-right: 11vw;
    letter-spacing: 5px;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox:before {
    width: 8%;
    right: 3%;
    left: auto;
    top: 50%;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox:after {
    content: "";
    display: block;
    width: 30%;
    height: 1px;
    background: #B0849D;
    position: absolute;
    transform: translateY(-50%);
    left: 5%;
    right: auto;
    top: 50%;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .brief {
    width: 60%;
    max-width: 468px;
    margin-left: auto;
    margin-right: 11vw;
    margin-top: 24px;
  }
  .caseStudy-cate:nth-child(3) .caseStudy-cate--title .titleBox:after {
    width: 28%;
  }
}
@media (max-width: 520px) {
  .caseStudy-cate--title .titleBox .icon {
    left: 7vw;
  }
  .caseStudy-cate--title .titleBox .section-title {
    width: 80%;
    padding-left: 10vw;
    letter-spacing: 4px;
  }
  .caseStudy-cate--title .titleBox:before {
    display: none !important;
  }
  .caseStudy-cate--title .titleBox:after {
    display: none !important;
  }
  .caseStudy-cate--title .brief {
    width: 80%;
    margin-left: 10vw;
    margin-top: 24px;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox .icon {
    right: calc(10vw + 208px);
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox:before {
    display: none !important;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .titleBox:after {
    display: none !important;
  }
  .caseStudy-cate:nth-child(even) .caseStudy-cate--title .brief {
    width: 80%;
    margin-right: calc(10vw - 6px);
  }
}

.hero.caseStudy-cate {
  display: block;
  position: relative;
  background: url("/asset/frontSite/images/case-study-cate-hero-bg-0.png") top center no-repeat;
  background-size: 100% 763px;
  padding-top: 80px;
  padding-bottom: 0;
  margin-bottom: 104px;
}
.hero.caseStudy-cate .hero--img {
  width: 29%;
  max-width: 420px;
  position: absolute;
  top: 92px;
  right: 0;
}
.hero.caseStudy-cate .hero--img img {
  display: block;
  width: 100%;
}
.hero.caseStudy-cate .hero--title {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.hero.caseStudy-cate .hero--title .titleBox .section-title {
  text-align: center;
}
.hero.caseStudy-cate .hero--title .titleBox .section-subtitle {
  text-align: center;
}
.hero.caseStudy-cate .hero--nav {
  width: 90%;
  max-width: 855px;
  margin: 70px auto 48px auto;
  overflow-x: auto;
}
.hero.caseStudy-cate .hero--nav .scroller .tagbox {
  display: inline-flex;
  gap: 40px;
}
.hero.caseStudy-cate .hero--nav .scroller .tagbox .tag {
  flex-shrink: 0;
}
.hero.caseStudy-cate .hero--banner {
  width: calc(100% - 140px);
  height: 600px;
  position: relative;
  padding-left: 140px;
}
.hero.caseStudy-cate .hero--banner--img {
  width: 100%;
  height: 100%;
  border-radius: 165px 0 165px 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.hero.caseStudy-cate .hero--banner--img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero.caseStudy-cate .hero--banner--content {
  width: 30%;
  position: absolute;
  top: 143px;
  right: 13.2vw;
}
.hero.caseStudy-cate .hero--banner--content .title {
  display: block;
  color: #6E6B91;
  padding-bottom: 24px;
}
.hero.caseStudy-cate .hero--banner:after {
  content: "";
  display: block;
  width: 60vw;
  height: 50vw;
  background: url("/asset/frontSite/images/case-study-treatment-list-bg.png") bottom center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: -20vw;
  bottom: -30vw;
  z-index: 0;
  opacity: 0.5;
}
.hero.caseStudy-cate .hero--index {
  width: 90%;
  max-width: 1158px;
  box-sizing: border-box;
  margin: -32px auto 0 auto;
  padding: 28px 84px;
  background: #fff;
  border-radius: 165px;
  position: relative;
  z-index: 2;
}
.hero.caseStudy-cate .hero--index .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.hero.caseStudy-cate .hero--index .container .btn {
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .hero.caseStudy-cate {
    background-size: 200% 640px;
    margin-bottom: 64px;
  }
  .hero.caseStudy-cate .hero--img {
    width: 40%;
    right: -80px;
  }
  .hero.caseStudy-cate .hero--title .titleBox .section-title {
    letter-spacing: 1px;
  }
  .hero.caseStudy-cate .hero--nav {
    margin: 42px auto 24px auto;
  }
  .hero.caseStudy-cate .hero--nav .scroller .tagbox {
    gap: 24px;
  }
  .hero.caseStudy-cate .hero--banner {
    width: 98%;
    height: 50vh;
    padding-left: 2%;
  }
  .hero.caseStudy-cate .hero--banner .hero--banner--content {
    width: 38%;
    top: 20%;
    right: 6vw;
  }
  .hero.caseStudy-cate .hero--index {
    width: 96%;
    padding: 12px 24px 8px 24px;
    overflow-x: auto;
    border-radius: 56px;
  }
  .hero.caseStudy-cate .hero--index .container {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
  }
}

.section-cate-treatment {
  margin-top: 107px;
  margin: 0 auto;
  background: url("/asset/frontSite/images/case-study-cate-article-bg.png") top center no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 1;
}
.section-cate-treatment .cate-treatment-container {
  margin-bottom: 72px;
}
.section-cate-treatment .cate-treatment-container .titleBox {
  position: relative;
  margin-bottom: 56px;
}
.section-cate-treatment .cate-treatment-container .titleBox .icon {
  width: 36px;
  height: 36px;
  position: absolute;
  left: -26px;
  top: -26px;
}
.section-cate-treatment .cate-treatment-container .titleBox .icon img {
  width: 100%;
  height: 100%;
}
.section-cate-treatment .cate-treatment-container .titleBox .title {
  color: #B0849D;
}
.section-cate-treatment .cate-treatment-container .titleBox.img-icon .icon {
  width: 63px;
  height: 62px;
  position: absolute;
  top: 0;
  left: 0;
  background: url("/asset/frontSite/images/treatmentavatar-bg.png") center center no-repeat;
  background-size: contain;
}
.section-cate-treatment .cate-treatment-container .titleBox.img-icon .icon:after {
  content: "";
  display: block;
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background: url("/asset/frontSite/images/treatmentavatar-cover.png") center center no-repeat;
  position: absolute;
  left: -4px;
  top: -6px;
}
.section-cate-treatment .cate-treatment-container .titleBox.img-icon .icon img {
  width: 63px;
  height: 63px;
  position: absolute;
  left: -4px;
  top: -6px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}
.section-cate-treatment .cate-treatment-container .titleBox.img-icon .title {
  padding-left: 80px;
}
.section-cate-treatment .cate-treatment-container .list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 36px;
}
.section-cate-treatment .cate-treatment-container .list .list--item {
  width: calc((100% - 28px) / 2);
}
@media (max-width: 768px) {
  .section-cate-treatment .cate-treatment-container {
    margin-bottom: 72px;
  }
  .section-cate-treatment .cate-treatment-container .titleBox {
    margin-bottom: 24px;
  }
  .section-cate-treatment .cate-treatment-container .titleBox .icon {
    width: 24px;
    height: 24px;
    left: -12px;
  }
  .section-cate-treatment .cate-treatment-container .list .list--item {
    width: 100%;
  }
  .section-cate-treatment .cate-treatment-container .list .list--item .card-content .card-title {
    height: 50px;
  }
}

.section-news.for-case-study .container {
  flex-direction: column;
  align-items: center;
}
.section-news.for-case-study .container .btn--actbox {
  width: 84.7%;
}

.hero.singleTreatment {
  width: 100%;
  aspect-ratio: 1440/450;
  max-height: 600px;
  margin-top: 68px;
  /*<1280*/
}
.hero.singleTreatment .hero--banner {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.hero.singleTreatment .hero--banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero.singleTreatment .hero--title {
  width: 55%;
  max-width: 784px;
  height: 100%;
  background: url("/asset/frontSite/images/case-study-treatment-hero-bg.png") top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: calc((100% - 1158px) / 2);
}
.hero.singleTreatment .hero--title .titleBox {
  width: 50%;
  display: flex;
  flex-direction: column;
}
.hero.singleTreatment .hero--title .titleBox .section-subtitle {
  color: #6E6B91;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.hero.singleTreatment .hero--title .titleBox p {
  line-height: 180%;
}
@media (max-width: 1279px) {
  .hero.singleTreatment .hero--title {
    right: 0;
  }
  .hero.singleTreatment .hero--title .titleBox {
    width: 60%;
  }
  .hero.singleTreatment .hero--title .titleBox .section-subtitle {
    font-size: 24px;
  }
}
@media (max-width: 1024px) {
  .hero.singleTreatment {
    aspect-ratio: 375/720;
    max-height: 600px;
  }
  .hero.singleTreatment .hero--title {
    aspect-ratio: 375/350;
    max-height: 350px;
    transform: translateY(-50%);
    top: 50%;
  }
}
@media (max-width: 768px) {
  .hero.singleTreatment {
    margin-top: 66px;
  }
}
@media (max-width: 520px) {
  .hero.singleTreatment .hero--title {
    transform: none;
    width: 100%;
    height: auto;
    top: 0%;
  }
  .hero.singleTreatment .hero--title .titleBox p {
    font-size: 14px;
  }
}

.section-treatmentList {
  margin-top: 0;
  padding-top: 48px;
  background: url("/asset/frontSite/images/case-study-treatment-list-bg.png") top right no-repeat;
  background-size: 50% auto;
}
.section-treatmentList .list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.section-treatmentList .list .list--item {
  width: calc((100% - 96px) / 4);
}
@media (max-width: 1024px) {
  .section-treatmentList .list {
    gap: 32px;
  }
  .section-treatmentList .list .list--item {
    width: calc((100% - 64px) / 3);
  }
}
@media (max-width: 520px) {
  .section-treatmentList {
    background-size: 90% auto;
  }
  .section-treatmentList .list {
    gap: 24px;
  }
  .section-treatmentList .list .list--item {
    width: calc((100% - 24px) / 2);
  }
}
@media (max-width: 414px) {
  .section-treatmentList .list {
    gap: 24px;
  }
  .section-treatmentList .list .list--item {
    width: 100%;
  }
}

.hero.testimony {
  height: 440px;
  position: relative;
}
.hero.testimony .hero--title {
  width: 76%;
  max-width: 730px;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 12%;
  z-index: 2;
}
.hero.testimony .hero--title p {
  line-height: 180%;
}
.hero.testimony .hero--deco {
  width: 30%;
  max-width: 380px;
  position: absolute;
  right: 10%;
  top: 66px;
}
@media (max-width: 1024px) {
  .hero.testimony {
    height: 30vh;
  }
  .hero.testimony .hero--title {
    top: 75%;
  }
  .hero.testimony .hero--deco {
    right: 2%;
    top: 66px;
  }
}
@media (max-width: 768px) {
  .hero.testimony {
    height: auto;
  }
  .hero.testimony .hero--title {
    width: 90%;
    left: 5%;
    position: relative;
    transform: none;
    top: auto;
    padding-top: 120px;
  }
}
@media (max-width: 520px) {
  .hero.testimony .hero--deco {
    width: 50%;
  }
}

.hero.testimony-detail {
  height: 440px;
  position: relative;
}
.hero.testimony-detail .hero--title {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("/asset/frontSite/images/testimony-hero-img-bg.png") left top no-repeat;
  background-size: 60% 100%;
  display: flex;
  align-items: center;
  gap: 5%;
}
.hero.testimony-detail .hero--title .titleBox {
  width: 50%;
  max-width: 730px;
  left: 10%;
  z-index: 2;
  flex-shrink: 0;
  position: relative;
}
.hero.testimony-detail .hero--title .titleBox .deco {
  margin-left: -10vw;
  width: 100%;
}
.hero.testimony-detail .hero--title p {
  padding-top: 48px;
  padding-right: 12%;
  line-height: 180%;
}
@media (max-width: 768px) {
  .hero.testimony-detail {
    height: auto;
  }
  .hero.testimony-detail .hero--title {
    padding: 66px 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    background-size: 80% 50%;
  }
  .hero.testimony-detail .hero--title .titleBox {
    width: 90%;
    left: 5%;
  }
  .hero.testimony-detail .hero--title .titleBox .section-title .f-h1 {
    letter-spacing: 2px;
    padding-left: 8px;
    display: inline-block;
  }
  .hero.testimony-detail .hero--title p {
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
  }
}

.section-testimony {
  margin-top: 0;
}
.section-testimony .container {
  margin-top: 0;
}
.section-testimony .container .testimony-info {
  padding-top: 18px;
  padding-bottom: 32px;
  position: relative;
  border-bottom: solid 1px #B0849D;
}
.section-testimony .container .testimony-info h4 {
  text-align: center;
  font-weight: 300;
  color: #6E6B91;
}
.section-testimony .container .testimony-info:before {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: #B0849D;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 0;
}
.section-testimony .container .testimony-stepbox {
  margin-bottom: 48px;
}
.section-testimony .container .testimony-stepbox .title {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}
.section-testimony .container .testimony-stepbox .title .num {
  font-size: 20px;
  color: #B0849D;
}
.section-testimony .container .testimony-stepbox .title .num span {
  font-size: 30px;
  padding-left: 4px;
}
.section-testimony .container .testimony-stepbox .title .divider {
  position: relative;
  width: 30px;
  height: 50px;
}
.section-testimony .container .testimony-stepbox .title .divider span {
  position: absolute;
  display: block;
  width: 60px;
  height: 1px;
  background: #848484;
  transform: rotate(-60deg) translateY(-50%);
  transform-origin: center;
  top: 70%;
  left: -50%;
  opacity: 0.5;
}
.section-testimony .container .testimony-stepbox .title .text {
  color: #6E6B91;
  padding-top: 12px;
}
.section-testimony .container .testimony-stepbox:last-child {
  margin-bottom: 102px;
}
.section-testimony .container .body-part {
  margin-top: 32px;
}
.section-testimony .container .body-part .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.section-testimony .container .body-part .list .list--item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 144px;
  height: 162px;
  background: linear-gradient(180deg, rgb(176, 123, 157) 0%, rgba(235, 225, 239, 0) 100%);
  border-radius: 46px;
  border: solid 1px #E9EAEF;
  position: relative;
  overflow: hidden;
}
.section-testimony .container .body-part .list .list--item .icon {
  width: 74%;
  position: relative;
  z-index: 2;
  opacity: 0.7;
  transition: 0.3s;
}
.section-testimony .container .body-part .list .list--item .icon img {
  width: 100%;
}
.section-testimony .container .body-part .list .list--item .text {
  color: #848484;
  position: relative;
  z-index: 2;
}
.section-testimony .container .body-part .list .list--item:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0.8;
  transition: 0.3s;
}
.section-testimony .container .body-part .list .list--item:hover .icon, .section-testimony .container .body-part .list .list--item.active .icon {
  opacity: 1;
}
.section-testimony .container .body-part .list .list--item:hover:after, .section-testimony .container .body-part .list .list--item.active:after {
  opacity: 0.3;
}
.section-testimony .container .symptom-list .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.section-testimony .container .treatment-list .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
@media (max-width: 1024px) {
  .section-testimony {
    margin-top: 0;
  }
  .section-testimony .container .testimony-info {
    margin-top: 48px;
  }
}
@media (max-width: 768px) {
  .section-testimony {
    margin-top: 0;
  }
  .section-testimony .container .testimony-info {
    margin-top: 48px;
  }
  .section-testimony .container .testimony-stepbox .title .divider span {
    top: 60%;
  }
  .section-testimony .container .treatment-list {
    overflow-x: auto;
  }
  .section-testimony .container .treatment-list .list {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
  }
  .section-testimony .container .treatment-list .list .treatment-btn {
    display: inline-flex;
    flex-shrink: 0;
  }
}
@media (max-width: 414px) {
  .section-testimony {
    margin-top: 0;
  }
  .section-testimony .container .body-part .list {
    gap: 16px;
  }
  .section-testimony .container .body-part .list .list--item {
    width: calc((100% - 32px) / 3);
    height: 120px;
    border-radius: 30px;
  }
}

.hero.news {
  height: 296px;
  position: relative;
}
.hero.news .hero--title {
  width: 76%;
  max-width: 730px;
  position: absolute;
  transform: translateY(-50%);
  top: 176px;
  right: 9.5%;
  z-index: 2;
  text-align: right;
}
.hero.news .hero--title .section-subtitle {
  padding-right: 16px;
  margin-bottom: -8px;
}
.hero.news .hero--title p {
  line-height: 180%;
}
.hero.news .hero--deco {
  width: 50%;
  max-width: 533px;
  position: absolute;
  left: 2%;
  top: 0;
}
.hero.news .hero--deco-2 {
  width: 11%;
  max-width: 130px;
  position: absolute;
  left: 56.2%;
  top: 33px;
}
@media (max-width: 768px) {
  .hero.news {
    height: 190px;
  }
  .hero.news .hero--title {
    top: 120px;
  }
  .hero.news .hero--deco {
    width: 50%;
    left: -10%;
    top: 33px;
  }
  .hero.news .hero--deco-2 {
    top: 55px;
  }
}
@media (max-width: 414px) {
  .hero.news {
    height: 190px;
  }
  .hero.news .hero--title {
    top: 120px;
  }
  .hero.news .hero--deco {
    width: 80%;
    left: -40%;
    top: 50px;
  }
  .hero.news .hero--deco-2 {
    display: none;
  }
}

.page-section.section-news {
  margin-top: 0;
}

.news-taglist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 36px auto;
}
.news-taglist .btn {
  transform: scale(0.9);
}

.banner-about {
  width: 100%;
  aspect-ratio: 144/36;
}
.banner-about img {
  display: block;
  width: 100;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.page-about .article--header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: solid 1px #E9EAEF;
  padding-bottom: 22px;
}
.page-about .article--header .titleBox {
  padding-bottom: 0;
  margin-bottom: 0;
}
.page-about .article--header .titleBox h3 {
  padding-top: 4px;
  font-size: 24px !important;
  font-weight: 300;
  letter-spacing: 1px;
}
.page-about .article--header .titleBox:after {
  display: none;
}
.page-about .article--header .page-about--title {
  color: #B0849D;
  padding-bottom: 4px;
  letter-spacing: 3px;
}
.page-about.teams {
  background: url("/asset/frontSite/images/bg-doctorlist.png") top 30vh center no-repeat;
  background-size: 100% 50%;
}
.page-about.teams .page-act .back-btn {
  opacity: 0;
}
.page-about.teams .doctor-item {
  margin-top: 128px;
}
.page-about.teams .doctor-item .btn--actbox {
  width: 58%;
  margin-right: 5%;
}
@media (max-width: 1024px) {
  .page-about.teams .doctor-item .btn--actbox {
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.page-about.teams .doctor-item:first-child {
  margin-top: 128px;
}
@media (max-width: 768px) {
  .page-about.teams .doctor-item:first-child {
    margin-top: 64px;
  }
}
.page-about.teams .doctor-item.item-even .btn--actbox {
  margin-left: 5%;
  margin-right: auto;
}
.page-about.teams-single {
  background: url("/asset/frontSite/images/bg-doctorlist.png") top 30vh center no-repeat;
  background-size: 100% 50%;
}
.page-about.teams-single .page-act .back-btn {
  opacity: 0;
}
.page-about.teams-single .doctor-item {
  margin-top: 128px;
}
@media (max-width: 768px) {
  .page-about.teams-single .doctor-item {
    margin-top: 64px;
  }
}
.page-about:before {
  display: none;
}
.page-about .article-section {
  padding-bottom: 56px;
}

.schedule-doctors {
  width: 90%;
  margin: 0 auto 32px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.schedule-doctors .card-item {
  width: calc((100% - 16px) / 3);
  padding: 8px;
  background: #fff;
  box-sizing: border-box;
}
.schedule-doctors .card-item .cover {
  width: 100%;
  aspect-ratio: 1/1;
}
.schedule-doctors .card-item .cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.schedule-doctors .card-item .name {
  text-align: center;
  color: #848484;
}
.ex-line-box {
  width: 314px;
  margin: 0 auto;
  border: solid 1px #E9EAEF;
  box-sizing: border-box;
  padding: 12px;
  margin-bottom: 16px;
}
.ex-line-box .f-h6 span, .ex-line-box .article--footer--statement--announce .container .announce--list .subtitle span, .article--footer--statement--announce .container .announce--list .ex-line-box .subtitle span, .ex-line-box .footer--statement--announce .container .announce--list .subtitle span, .footer--statement--announce .container .announce--list .ex-line-box .subtitle span, .ex-line-box .btn.btn-text-l span, .ex-line-box .card-item .card-content .card-title span, .card-item .card-content .ex-line-box .card-title span, .ex-line-box .doctor-item--info .experience .exlist--title span, .doctor-item--info .experience .ex-line-box .exlist--title span {
  font-weight: 500;
  color: #848484 !important;
  display: block;
  text-align: center;
}
.ex-line-box .f-h6 span.text-blue-light, .ex-line-box .article--footer--statement--announce .container .announce--list .subtitle span.text-blue-light, .article--footer--statement--announce .container .announce--list .ex-line-box .subtitle span.text-blue-light, .ex-line-box .footer--statement--announce .container .announce--list .subtitle span.text-blue-light, .footer--statement--announce .container .announce--list .ex-line-box .subtitle span.text-blue-light, .ex-line-box .btn.btn-text-l span.text-blue-light, .ex-line-box .card-item .card-content .card-title span.text-blue-light, .card-item .card-content .ex-line-box .card-title span.text-blue-light, .ex-line-box .doctor-item--info .experience .exlist--title span.text-blue-light, .doctor-item--info .experience .ex-line-box .exlist--title span.text-blue-light {
  color: #5184F2 !important;
}
.ex-line-box img {
  display: block;
  width: 100%;
}

.info-contact {
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  transform: translate(-50%);
  left: 50%;
}
.info-contact li {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 16px;
  box-sizing: border-box;
  padding-left: 32px;
  position: relative;
}
.info-contact li .icon {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
}
.info-contact li .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.info-contact li .item-title {
  color: #848484;
  font-weight: 500;
  flex-shrink: 0;
}
.info-contact li .text-blue-light {
  display: inline !important;
  transition: 0.3s;
  color: #5184F2 !important;
}
.info-contact li a {
  flex-grow: 1;
  text-decoration: underline;
}
.info-contact li a:hover {
  color: #B0849D !important;
}
.info-contact li .actbox {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  margin-left: -32px;
  position: relative;
  transform: translateX(-50%);
  left: calc(50% + 16px);
}
.info-contact li .actbox a img {
  filter: brightness(100%);
  transition: 0.3s;
}
.info-contact li .actbox a:hover img {
  filter: brightness(110%);
}

.traffic-box .traffic-list {
  margin-top: 48px;
}
.traffic-box .traffic-list li {
  margin-bottom: 42px;
}
.traffic-box .traffic-list li .list-item {
  display: flex;
  box-sizing: border-box;
  padding-left: 64px;
  position: relative;
}
.traffic-box .traffic-list li .list-item .iconbox {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  position: absolute;
  left: -12px;
  top: -16px;
}
.traffic-box .traffic-list li .list-item .iconbox img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
  object-fit: fill;
}
.traffic-box .traffic-list li .list-item .contentbox {
  flex-grow: 1;
}
.traffic-box .traffic-list li .list-item .contentbox p {
  margin-top: 4px;
  margin-bottom: 0;
}
.traffic-box ol li {
  font-weight: 300;
  margin-bottom: 32px;
}
.traffic-box ol li .sub-li {
  margin-top: 16px;
}
.traffic-box ol li .sub-li .info {
  margin-bottom: 16px;
}
.traffic-box ol li .sub-li .info span {
  font-size: 14px;
}
.traffic-box ol li .col-2 {
  display: flex;
  gap: 0px;
  justify-content: center;
  margin: 16px;
}
.traffic-box ol li .col-2 .item {
  width: 50%;
  max-width: 240px;
  flex-grow: 0;
  text-align: center;
}
.traffic-box ol li .col-2 .item img {
  display: block;
  width: 100%;
}
.traffic-box ol li .col-2 .item span {
  color: #000;
}

.sec-map {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.sec-map .card-item {
  width: calc((100% - 32px) / 3);
  box-sizing: border-box;
  padding: 16px 8px;
  background: #fff;
}
.sec-map .card-item .card-title {
  text-align: center;
  padding-bottom: 16px;
}
.sec-map .card-item .card-cover {
  width: 100%;
}
.sec-map .card-item .card-cover img {
  display: block;
  width: 100%;
}
.sec-map .card-item .g-map {
  width: 100%;
  aspect-ratio: 1/1.5;
}
.sec-map .card-item .g-map iframe {
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .sec-map .card-item {
    width: calc((100% - 16px) / 2);
  }
  .sec-map .card-item.g-map-box {
    width: 100%;
  }
  .sec-map .card-item.g-map-box .g-map {
    aspect-ratio: 2/1;
  }
}
@media (max-width: 520px) {
  .sec-map .card-item {
    width: 100%;
  }
  .sec-map .card-item.g-map-box .g-map {
    aspect-ratio: 1/1;
  }
}

.envpic-slide {
  position: relative;
}
.envpic-slide.small-swiper {
  padding: 0 24px;
}
.envpic-slide .swiper-wrapper {
  padding-bottom: 32px;
}
.envpic-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 412/275;
  -o-object-fit: cover;
  object-fit: cover;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.envpic-slide span {
  display: block;
  padding: 16px;
  text-align: center;
  font-weight: 500;
}
.envpic-slide .swiper-button-next {
  right: 0;
  margin-top: -76px !important;
}
.envpic-slide .swiper-button-prev {
  left: 0;
  margin-top: -76px !important;
}

.confpic-slide {
  position: relative;
}
.confpic-slide.small-swiper {
  padding: 0 24px 64px 24px;
}
.confpic-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 412/275;
  -o-object-fit: cover;
  object-fit: cover;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.confpic-slide .textbox {
  display: block;
  width: 70%;
  height: 74px;
  max-width: 320px;
  padding: 16px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: -32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.confpic-slide .textbox span {
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.confpic-slide .swiper-button-next {
  right: 0;
  margin-top: -60px !important;
}
.confpic-slide .swiper-button-prev {
  left: 0;
  margin-top: -60px !important;
}

.award-slide .swiper-wrapper {
  height: 300px;
}
.award-slide .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.square-slide {
  position: relative;
  margin-bottom: 32px;
}
.square-slide.small-swiper {
  padding: 0 24px;
}
.square-slide .swiper-wrapper {
  padding-bottom: 32px;
}
.square-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 300/260;
  -o-object-fit: cover;
  object-fit: cover;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.square-slide span {
  display: block;
  padding: 16px;
  text-align: center;
  font-weight: 500;
}
.square-slide .swiper-button-next {
  right: 0;
  margin-top: -76px !important;
}
.square-slide .swiper-button-prev {
  left: 0;
  margin-top: -76px !important;
}

.section-search {
  margin-top: 88px;
}

.search-brief {
  color: #B0849D;
  margin-bottom: 48px;
  text-align: center;
}
.search-brief .search-num {
  font-weight: bold;
  padding: 0 4px;
}

.result-plus-txt {
  position: relative;
  margin-top: 24px;
}
.result-plus-txt:before {
  content: "";
  display: block;
  width: calc((85% - 150px) / 2);
  height: 1px;
  background: #B0849D;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}
.result-plus-txt:after {
  content: "";
  display: block;
  width: calc((85% - 150px) / 2);
  height: 1px;
  background: #B0849D;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}

.article {
  position: relative;
  z-index: 2;
}
.article--header {
  padding-top: 66px;
  margin-bottom: 24px;
}
.article--header .article--title {
  margin-bottom: 24px;
}
.article--header .article--tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 24px;
}
.article--header .article-cover img {
  width: 100%;
}
@media (max-width: 768px) {
  .article--header .article--tags {
    justify-content: center;
    gap: 4px;
  }
}
.article--body--switch {
  overflow: auto;
  margin-bottom: 24px;
}
.article--body--switch .container {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  justify-content: center;
}
.article--footer {
  margin-top: 48px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb--item {
  display: inline-block;
  transition: 0.3s;
  color: #848484;
}
.breadcrumb--item:hover, .breadcrumb--item.current {
  color: #B0849D;
}
.breadcrumb .seperate {
  display: block;
  padding: 0 6px;
  color: #848484;
}

.tableOfcontents {
  padding: 12px 24px;
  background: #fff;
  margin-bottom: 24px;
}
.tableOfcontents--title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.tableOfcontents--title span {
  color: #6E6B91;
  font-weight: 600;
}
.tableOfcontents--title .btn-expend {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  transition: 0.3s;
}
.tableOfcontents--title .btn-expend svg {
  width: 16px;
}
.tableOfcontents--title:hover .btn-expend {
  background: #fafafa;
}
.tableOfcontents--list {
  overflow: hidden;
  padding-left: 24px;
  list-style-type: disc;
}
.tableOfcontents--list li {
  border-bottom: dashed 1px #c9c9c9;
}
.tableOfcontents--list li a {
  padding: 12px 0 12px 0;
  display: block;
  font-weight: 300;
  color: #848484;
  transition: 0.3s;
}
.tableOfcontents--list li a:hover {
  color: #B0849D;
}
.tableOfcontents--list li:last-child {
  border-bottom: none;
}

.article-section {
  padding: 30px 0;
}
.article-section--title {
  padding-top: 56px;
  width: 90%;
  text-align: center;
  margin: 0 auto 38px auto;
}
.article-section--title span {
  position: relative;
  display: inline-block;
  padding: 0 32px;
  color: #6E6B91;
  text-align: center;
}
.article-section--title span:before {
  content: "";
  display: block;
  background: #6E6B91;
  width: 5px;
  height: 20px;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}
.article-section--title span:after {
  content: "";
  display: block;
  background: #6E6B91;
  width: 5px;
  height: 20px;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}
.article-section.model-init p {
  padding: 0;
  width: 100%;
}
.article-section .section--col {
  margin: 0 auto 0 auto;
}
.article-section .section--col.col-2 {
  display: flex;
  align-items: center;
}
.article-section .section--col.col-2 p {
  width: 50%;
  box-sizing: border-box;
}
.article-section .section--col.col-2 figure {
  width: 50%;
  margin-bottom: 0;
}
.article-section .section--col.col-2 figure img {
  width: 100%;
  height: auto;
}
.article-section .section--col.col-2 .img-colbox {
  width: 50%;
  box-sizing: border-box;
  padding: 0 16px;
}
.article-section .section--col.col-2 .img-colbox figure {
  width: 100%;
}
.article-section .section--col.col-2 .img-colbox p {
  width: 100%;
}
@media (max-width: 768px) {
  .article-section .section--col.col-2 {
    flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .article-section .section--col.col-2 p {
    width: 100%;
  }
  .article-section .section--col.col-2 figure {
    width: 100%;
  }
  .article-section .section--col.col-2 .img-colbox {
    width: 100%;
  }
}
.article-section .section--col.col-6-4 {
  display: flex;
  align-items: center;
}
.article-section .section--col.col-6-4 p {
  width: 40%;
  box-sizing: border-box;
  padding: 0 0 0 5%;
}
.article-section .section--col.col-6-4 figure {
  width: 60%;
  margin-bottom: 0;
}
.article-section .section--col.col-6-4 figure img {
  width: 100%;
  height: auto;
}
.article-section .section--col.col-6-4 .img-colbox {
  width: 60%;
  box-sizing: border-box;
  padding: 0 16px;
}
.article-section .section--col.col-6-4 .img-colbox figure {
  width: 100%;
}
.article-section .section--col.col-6-4 .img-colbox p {
  width: 100%;
}
@media (max-width: 768px) {
  .article-section .section--col.col-6-4 {
    flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .article-section .section--col.col-6-4 p {
    width: 100%;
  }
  .article-section .section--col.col-6-4 figure {
    width: 100%;
  }
  .article-section .section--col.col-6-4 .img-colbox {
    width: 100%;
  }
}
.article-section .section--col.col-notice {
  width: 100%;
  padding: 16px 24px;
  box-sizing: border-box;
  background: #fff;
  border: solid 1px #fafafa;
  margin-top: 32px;
}
.article-section .section--col.col-notice .subtitle {
  display: block;
  padding: 4px 6px;
  color: #B0849D;
  margin-bottom: 8px;
  text-align: center;
}
.article-section .section--col.col-notice p.notice {
  line-height: 150%;
  width: 100%;
  padding: 0;
  color: #848484;
}
.article-section--slide {
  padding-bottom: 0px;
}
.article-section--table {
  width: 100%;
  overflow-x: auto;
}
.article-section--table .tablebox {
  width: 100%;
}
.article-section--table .tablebox th, .article-section--table .tablebox td {
  text-align: center;
  padding: 8px;
}
.article-section--socialPost {
  display: flex;
  justify-content: center;
}
.article-section figure {
  margin: 0 0 16px 0;
}
.article-section figure img {
  width: 100%;
}
.article-section p {
  box-sizing: border-box;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 16px;
  line-height: 130%;
  padding: 0 5%;
  line-height: 200%;
  color: #848484;
  font-weight: 300;
}
.article-section p .p-subtitle {
  color: #6E6B91;
  font-weight: 500;
  display: block;
  margin: 24px 0 16px 0;
}
.article-section p.bottom-text {
  width: 100%;
  padding: 0;
}
.article-section p.p-full {
  padding: 0;
  width: 100%;
}
@media (max-width: 768px) {
  .article-section {
    padding: 0 0 16px 0;
  }
  .article-section p {
    width: 100%;
    padding: 0;
  }
  .article-section.p-img .col-2 figure {
    order: -1;
  }
}

.article-addon {
  width: 90vw;
  height: fit-content;
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  padding: 16px;
  z-index: 1000;
}
.article-addon.article-addon-full {
  width: 100vw;
}

.more-articles {
  display: flex;
  gap: 10%;
}
.more-articles--container {
  width: 45%;
}
.more-articles--container .title-article-section {
  letter-spacing: 6px;
  position: relative;
}
.more-articles--container .title-article-section:before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  background: url("/asset/frontSite/images/icons/icon-star-outline.svg") center center no-repeat;
  background-size: contain;
  position: absolute;
  left: -32px;
  top: -24px;
}

.article--footer--statement, .footer--statement {
  position: relative;
  margin-top: 116px;
}
.article--footer--statement--announce, .footer--statement--announce {
  position: relative;
  z-index: 1;
  margin-bottom: 96px;
}
.article--footer--statement--announce .container, .footer--statement--announce .container {
  display: flex;
  gap: 40px;
}
.article--footer--statement--announce .container .announce--list, .footer--statement--announce .container .announce--list {
  padding: 24px 32px;
  border: solid 1px #E9EAEF;
  background: #fff;
  width: calc((100% - 40px) / 2);
}
.article--footer--statement--announce .container .announce--list .subtitle, .footer--statement--announce .container .announce--list .subtitle {
  color: #B0849D;
  font-weight: 500;
  text-align: center;
  margin-bottom: 24px;
}
.article--footer--statement--announce .container .announce--list ul, .footer--statement--announce .container .announce--list ul {
  margin-left: 0;
  list-style-type: none;
}
.article--footer--statement--announce .container .announce--list ul li, .footer--statement--announce .container .announce--list ul li {
  padding-bottom: 12px;
  padding-left: 22px;
  margin-bottom: 10px;
  background-image: linear-gradient(to right, #CACACA 50%, transparent 50%);
  background-size: 9px 1px; /* 虛線間距和粗細 */
  background-repeat: repeat-x; /* 只在水平軸重複 */
  background-position: bottom left; /* 將背景放置於底部 */
  position: relative;
}
.article--footer--statement--announce .container .announce--list ul li:last-child, .footer--statement--announce .container .announce--list ul li:last-child {
  border: none;
}
.article--footer--statement--announce .container .announce--list ul li p, .footer--statement--announce .container .announce--list ul li p {
  line-height: 170%;
}
.article--footer--statement--announce .container .announce--list ul li::marker, .footer--statement--announce .container .announce--list ul li::marker {
  margin-top: 8px;
}
.article--footer--statement--announce .container .announce--list ul li:last-child, .footer--statement--announce .container .announce--list ul li:last-child {
  background-image: none;
}
.article--footer--statement--announce .container .announce--list ul.sideEffect li:before, .footer--statement--announce .container .announce--list ul.sideEffect li:before {
  display: block;
  position: absolute;
  left: 0px;
  top: 1px;
  content:url("/asset/frontSite/images/icons/list-side.svg");
}
.article--footer--statement--announce .container .announce--list ul.prohibit li:before, .footer--statement--announce .container .announce--list ul.prohibit li:before {
  display: block;
  position: absolute;
  left: 0px;
  top: 1px;
  content: url("/asset/frontSite/images/icons/list-stop.svg");
}
.article--footer--statement--announce .disclaimer, .footer--statement--announce .disclaimer {
  line-height: 170%;
  width: 90%;
  max-width: 620px;
  margin: 0 auto 24px auto;
  padding-top: 24px;
  border-top: solid 1px #E9EAEF;
  text-align: center;
}
@media (max-width: 768px) {
  .article--footer--statement--announce, .footer--statement--announce {
    margin-bottom: 64px;
  }
  .article--footer--statement--announce .container, .footer--statement--announce .container {
    flex-wrap: wrap;
    gap: 24px;
  }
  .article--footer--statement--announce .container .announce--list, .footer--statement--announce .container .announce--list {
    width: 100%;
  }
}
.article--footer--statement:before, .footer--statement:before {
  content: "";
  display: block;
  background: url("/asset/frontSite/images/bg-statement.png") top center no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 80%;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 0;
  z-index: 0;
}

.page-section.mt-small .footer--statement {
  margin-top: 56px;
}

.video {
  width: 100%;
  aspect-ratio: 16/9;
  margin-bottom: 16px;
}
.video .video-box {
  width: 100%;
  height: 100%;
}
.video .video-box iframe {
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=screen.css.map */