.kvADiverseBg {
  background-image: url(../imgs/healthy_kvADiverse_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}


/* kv */
#kv {
  position: relative;
}

#kv .bg {
  width: 100%;
  object-fit: cover;
  min-height: 740px;
}

#kvText .box {
  padding: 80px 0;
  max-width: 1130px;
}

#kvText .text1 {
  font-weight: 900;
  font-size: 40px;
  line-height: 150%;
  letter-spacing: 2px;
  color: #000000;
  margin-bottom: 16px;
}

#kvText .text2 {
  font-weight: 900;
  font-size: 46px;
  line-height: 150%;
  letter-spacing: 2px;
  color: #000000;
  text-align: right;
}

#kvText .text2 span {
  font-size: 60px;
}

#kvStep .box {
  padding: 0 0 80px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

#kvStep .box img {
  width: 100%;
  max-width: 280px;
}

@media (max-width:1300px) {
  #kv .bg {
    min-height: 400px;
  }
}

@media (max-width:768px) {
  #kv .bg {
    object-position: calc(100% + 190px) center;
  }
}

@media (max-width:768px) {
  #kvText .text1 {
    font-size: 26px;
  }

  #kvText .text2 {
    font-size: 26px;
  }

  #kvText .text2 span {
    font-size: 30px;
  }
}

@media (max-width:480px) {

  #kvText .text1,
  #kvText .text2 {
    text-align: center;
  }

  #kvText .text2 span {
    display: block;
  }
}

/* kolTeam */

#kolTeam {
  background-color: #fff;
}

#kolTeam .box {
  max-width: 1130px;
}

#kolTeam .title {
  font-weight: 900;
  font-size: 46px;
  line-height: 150%;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 62px;
}

#kolTeam .des {
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  color: #000000;
  text-align: center;
  margin-bottom: 82px;
}

#kolTeam .cards img {
  width: 100%;
}

@media (max-width:768px) {
  #kolTeam .cards {
    display: flex;
    justify-content: center;
  }

  #kolTeam .cards img {
    max-width: 325px;
  }
}

/* kolAnalyze */
#kolAnalyze {
  background-color: #BF8B91;
}

#kolAnalyze .box {
  max-width: 1130px;
}

#kolAnalyze .title {
  font-weight: 900;
  font-size: 36px;
  line-height: 150%;
  letter-spacing: 2px;
  color: #FFFFFF;
  margin-bottom: 137px;
  text-align: center;
}

#kolAnalyze .cards {
  display: flex;
  flex-direction: column;
  gap: 105px;
}


#kolAnalyze .card {
  display: flex;
  flex-wrap: wrap;
}

#kolAnalyze .card:nth-child(even) {
  flex-direction: row-reverse;
}

#kolAnalyze .card:nth-child(even) .card_r {
  padding-left: unset;
  padding-right: 137px;
}

#kolAnalyze .card .card_l {
  width: 100%;
  max-width: 647px;
  display: flex;
  align-items: center;
}

#kolAnalyze .card .card_l img {
  width: 100%;
}

#kolAnalyze .card .card_r {
  padding-left: 137px;
  width: calc(100% - 647px);
}

#kolAnalyze .card .card_r .num {
  font-size: 60px;
  color: #703137;
}

#kolAnalyze .card .card_r .title {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 20px;
  text-align: left;
}

#kolAnalyze .card .card_r .des {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: #FFFFFF;
}

@media (max-width:1439px) {
  #kolAnalyze .card .card_l {
    max-width: 45%;
  }

  #kolAnalyze .card .card_r {
    width: 55%;
  }
}

@media (max-width:768px) {
  #kolAnalyze .card {
    flex-direction: column;
    align-items: center;
  }

  #kolAnalyze .card .card_l {
    max-width: 500px;
  }

  #kolAnalyze .card:nth-child(even) {
    flex-direction: column;
  }

  #kolAnalyze .card:nth-child(even) .card_r {
    padding: unset;
  }

  #kolAnalyze .card .card_r {
    width: 100%;
    padding: unset;
    max-width: 500px;
  }
}

@media (max-width:480px) {
  #kolAnalyze .title {
    font-size: 30px;
  }

  #kolAnalyze .card .card_r .title {
    font-size: 26px;
  }

  #kolAnalyze .card .card_r .des {
    font-size: 20px;
  }
}

/* target */
#target {}

#target .box {
  max-width: 1130px;
}

#target .title {
  font-weight: 900;
  font-size: 46px;
  line-height: 150%;
  letter-spacing: 2px;
  color: #000000;
  text-align: center;
  margin-bottom: 90px;
}

#target .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

#target .cards .card {
  width: 100%;
  max-width: 260px;
  /* padding-bottom: 67px; */
  position: relative;
}

#target .cards .card .cardImg {
  width: 100%;
}

#target .cards .card .cardBtn {
  width: 134px;
  height: 134px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
  z-index: 1;
  pointer-events: auto;
  filter: brightness(1);
  transition: .5s;
  cursor: pointer;
}

#target .cards .card .cardBtn:hover {
  filter: brightness(1.2);
}

/* 彈出卡片 */
#targetCard {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 22;
  background-color: #0004;
}

#targetCard .card {
  width: 100%;
  max-width: 1126px;
  padding: 10px;
  max-height: 100%;
}

#targetCard .card .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 77px;
  padding: 16px 32px;
  color: #fff;
  font-weight: 700;
  font-size: 30px;
  width: 100%;
  border-radius: 16px 16px 0 0;
  border: 7px solid #fff;
  border-bottom: unset;
  background-image: linear-gradient(to right, #D6A2A9, #A97076);
}

#targetCard .content {
  padding: 20px;
  background-color: #fff;
  max-height: calc(100vh - 77px - 20px);
  height: 100%;
}

#targetCard .scroll_box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

/* 表格外框 */
.table_content {
  display: table;
  width: 100%;
  border-collapse: collapse;
  /* 消除邊框間距 */
  background-color: #fff;
  /* 表格背景色 */
  border: none;
}

/* 表頭區域 */
.table_h {
  display: table-header-group;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  letter-spacing: 1px;
  color: #7B7B7B;
}

/* 表格內容區域 */
.table_b {
  display: table-row-group;
  font-weight: 500;
  font-size: 26px;
  line-height: 150%;
  color: #000000;
}

/* 單列行 */
.table_r {
  display: table-row;
  border-radius: 16px;
}

/* 單個欄位 */
.table_d {
  display: table-cell;
  padding: 12px;
  /* 水平置中 */
  text-align: center;
  /* 垂直置中 */
  vertical-align: middle;
}

/* 調整特定欄位寬度 */
.table_num {
  /* 編號列寬度 */
  width: 5%;
}

.table_num div {
  width: 35px;
  height: 35px;
  background-color: #bf8b91;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table_name {
  /* 名稱列寬度 */
  width: 25%;
  /* 名稱左對齊 */
  text-align: left;
}

/* 所屬領域 */
.table_area {
  width: 20%;
}

/* 粉絲數 */
.table_fans {
  width: 20%;
}

/* 受眾 */
.table_target {
  width: 30%;
  text-align: center;
}

/* img 列的設定 */
.table_h .table_d img {
  width: 32px;
  height: 32px;
  display: block;
}

.table_b .table_d img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  /* 圓形圖片 */
  display: block;
}

/* 嵌套行的處理 */
.table_d>.table_r {
  display: flex;
  justify-content: start;
  /* 水平置中圖片 */
  gap: 16px;
  /* 圖片間距 */
  align-items: center;
}

.table_fans>.table_r {
  justify-content: space-around;
}

/* 奇偶行交替背景色 */
.table_b .list:nth-child(even) {
  background-color: #f5f5f5;
  /* 偶數行背景色 */
}

.table_b .list:nth-child(odd) {
  background-color: #ffffff;
  /* 奇數行背景色 */
}

/* 滑鼠懸停效果 */
.table_r:hover {
  /* background-color: #e0e0e0; */
  /* 滑鼠懸停行背景色 */
}

/* 第二層的 行不要有 padding */
.table_r .table_r .table_d {
  padding: 0;
}

.table_m {
  display: none;
}

@media (max-width:1023px) {

  #targetCard .content {
    border-radius: 0 0 16px 16px;
  }

  .table_content {
    display: none;
  }

  #targetCard .card {
    max-width: 600px;
  }

  #targetCard .content {
    height: calc(100vh - 77px - 20px);
  }

  .table_m {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .table_m .list_m {
    width: 100%;
    padding: 10px 20px;
    border-radius: 16px;
  }

  .table_m .list_m:nth-child(even) {
    background-color: #F6F6F6;
  }

  .table_m .mb_box {
    margin-bottom: 20px;
  }

  .table_m .list_m .list_top {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .table_m .list_m .list_top .list_num div {
    width: 35px;
    height: 35px;
    background-color: #bf8b91;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .table_m .list_m .list_top .head {
    display: block;
    width: 68px;
    height: 68px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }

  .table_m .list_m .list_text {
    font-weight: 500;
    font-size: 26px;
    line-height: 150%;
    color: #000000;
  }

  .table_m .list_m .list_label {
    font-size: 20px;
    line-height: 150%;
    color: #7B7B7B;
  }

  .table_m .list_m .list_fans_num {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .table_m .list_m .list_fans_num .icon {
    width: 32px;
    height: 32px;
    display: block;
  }


}

#servers {
  background-image: url(../imgs/kol_servers_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}

#servers .box {
  max-width: 1130px;
}

#servers .bg_l,
#servers .bg_r {
  position: absolute;
  width: 100%;
}

#servers .bg_l {
  bottom: 0;
  left: 0;
  max-width: 757px;
}

#servers .bg_r {
  top: 0;
  right: 0;
  max-width: 536px;
}

#servers .box {
  z-index: 1;
}

#servers .title {
  font-weight: 900;
  font-size: 46px;
  line-height: 150%;
  letter-spacing: 1px;
  color: #000000;
  text-align: center;
  margin-bottom: 120px;
}

#servers .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 44px;
  column-gap: 94px;
}

#servers .cards .card {
  width: 100%;
  max-width: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#servers .cards .card .content {
  width: 100%;
}

#servers .cards .card .btn {
  width: 130px;
  filter: brightness(1);
  transition: .5s;
  pointer-events: auto;
}

#servers .cards .card .btn:hover {
  filter: brightness(1.5);

}

/* sample */
#sample {
  background-color: #c7c7c7;
}

#sample .box {
  max-width: 1130px;
}


#sample .title {
  font-weight: 900;
  font-size: 46px;
  line-height: 150%;
  letter-spacing: 1px;
  text-align: center;
  color: #000000;
  margin-bottom: 36px;
}

#sample .cards {
  padding: 0 70px 0px;
  position: relative;
}

#sample .cards .mySwiper {
  padding-bottom: 69px;
}

#sample .cards .swiper_prev,
#sample .cards .swiper_next {
  position: absolute;
  width: 45px;
  height: 45px;
  pointer-events: auto;
  transform: translateY(-50%);
  top: 50%;

}

#sample .cards .swiper_prev {
  left: 20px;
}

#sample .cards .swiper_next {
  left: unset;
  right: 20px;
  transform: translateY(-50%) rotate(180deg);
}

#sample .swiper-slide {
  width: 328px;
}

#sample .card {
  width: 100%;
  max-width: 328px;
  padding: 10px 16px;
  background-color: #fff;
}

#sample .card .head {
  width: 100%;
  aspect-ratio: 296 / 248;
  /* 正方形比例 */
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
}

#sample .card .names {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

#sample .card .name_l {
  display: flex;
  align-items: center;
  gap: 24px;
}

#sample .card .name_l .icon {
  width: 21px;
}

#sample .card .name_l .icon img {
  width: 100%;
  display: block;
}

#sample .card .name_l .card_t {
  font-size: 16px;
  line-height: 150%;
  color: #000000;
}

#sample .card .names .time {
  font-size: 16px;
  line-height: 150%;
  color: #C7C7C7;
}

#sample .card .des {
  font-size: 12px;
  line-height: 150%;
  color: #000000;
  margin-bottom: 12px;
}

#sample .icons {
  display: flex;
  gap: 28px;
}

#sample .icons .icon {
  display: flex;
  align-items: center;
}

#sample .icons .icon .icon_img {
  width: 24px;
}

#sample .icons .icon .icon_img img {
  width: 100%;
  display: block;
}

#sample .icons .icon .num {
  font-size: 14px;
  line-height: 150%;
  color: #000000;
}

.swiper-pagination-bullet-active {
  background-color: #D62121;
}

@media (max-width:510px) {
  #sample .cards {
    padding: 0 30px;
  }

  #sample .cards .swiper_prev,
  #sample .cards .swiper_next {
    width: 25px;
    height: 25px;
  }

  #sample .swiper-slide {
    width: 100%;
  }

  #sample .cards .swiper_prev {
    left: 0px;
  }

  #sample .cards .swiper_next {
    right: 0px;
  }
}

/* card2 */
/* 第二種類型，全放圖 */

#sample .swiper-wrapper {
  align-items: center;
}

#sample .swiper-slide {
  width: 440px;
}

#sample .cards .card2 {
  width: 100%;
  background-color: #fff;
}


#sample .cards .card2 img {
  width: 100%;
}

@media (max-width:768px) {
  #sample .swiper-slide {
    width: 280px;
  }
}

/* project */
#project {
  background-image: url(../imgs/kol_project_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#project .box {
  max-width: 1130px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

#project .left {
  width: 100%;
  max-width: 800px;
}

#project .left .text {
  font-weight: 500;
  font-size: 32px;
  line-height: 150%;
  color: #FFFFFF;
}

#project .left .title {
  font-weight: 900;
  font-size: 46px;
  line-height: 150%;
  letter-spacing: 2px;
  color: #FFFFFF;
}

#project .left .remark {
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  color: #FFFFFF;
}

#project .right {
  width: 180px;
}

#project .right img {
  width: 100%;
  pointer-events: auto;
  cursor: pointer;
}

@media (max-width:1101px) {

  #project .box {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
}

@media (max-width:480px) {
  .title {
    font-size: 26px !important;
  }
}