@charset "utf-8";
/* CSS Document */

/* #mdg-page{
  background-image: url("/wp-content/uploads/mdg/assets/images/body-back.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
@media only screen and (max-width: 768px) {
  #mdg-page{
    background-position: calc(50% + 40px) top;
    background-attachment: scroll;
  }
} */


/* ===== Fast View ===== */
#mdg-page .fv {
  padding: 0;
  background-image: url("/wp-content/uploads/mdg/assets/images/fv-back.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  height: 952px;
}
@media only screen and (max-width: 768px) {
  #mdg-page .fv{
    /* 在“居中”的基础上，向右偏移 40px */
    background-position: calc(50% + -80px) top;
    background-attachment: scroll;
  }
}
#mdg-page .fv__container{
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;   
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}
#mdg-page .fv__container.is-shown {opacity: 1;transform: translateY(0);}
#mdg-page .fv__front{position: relative;z-index: 999;}
#mdg-page .fv__title{width: 100%;max-width: 566px;}
#mdg-page .fv__back-item{
  position: absolute;
  max-width: 375px;
  pointer-events: none;
  z-index: 0;
}
#mdg-page .fv__back-item-01{top: -200px;left: -216px;}
#mdg-page .fv__back-item-02{bottom: -80px;right: -216px;}
@media only screen and (max-width: 768px) {
  /* #mdg-page .fv__back-item{max-width: clamp(160.00px, calc(50.0000vw + 0.00px), 384.00px);} */
  #mdg-page .fv__back-item-01{top: -144px;left: -144px;}
  #mdg-page .fv__back-item-02{bottom: -40px;right: -144px;}
}
@media only screen and (max-width: 576px) {
  /* #mdg-page .fv {background-image: url("/wp-content/uploads/mdg/assets/images/fv-back_sp.webp");}
  #mdg-page .fv__container{padding: 0;}
  #mdg-page .fv__photo{aspect-ratio: 375 / 500;} */
  #mdg-page .fv {height: 90vh;}
  #mdg-page .fv__container{justify-content: flex-end;padding-bottom: 20%;}
  #mdg-page .fv__back-item{display: none;}
} 

/* ===== banner ===== */
#mdg-page .banner__container{
  position: relative;
  padding: 40px 16px;
  background-image: url("/wp-content/uploads/mdg/assets/images/fv-back.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center calc(50% + -10px);
}
/* 渐变叠加层 */
#mdg-page .banner__container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
  pointer-events: none;
}
#mdg-page .banner__title,
#mdg-page .banner__cta{position: relative;z-index: 999;}

/* ===== CTA ===== */
#mdg-page .fv__cta{padding: 80px 16px 0;color:#fff;}
#mdg-page .fv__cta-note{padding: 0 16px;margin-bottom: 16px;}
#mdg-page .banner__cta{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  flex: 0 0 100%;  /* 基础=100%，不拉不缩 */
}
#mdg-page .cta-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  box-shadow:16px 32px 64px rgba(0,0,0,.5);
  color:#fff;
  text-align:center;
  transition: all 0.3s ease;
  cursor: pointer;
}
#mdg-page .cta-btn:hover{
  filter:brightness(1.05);
  transform: scale(1.05);
  color: #fff;
}
/* #mdg-page .cta-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  border-radius:4px;
} */
#mdg-page .fv__cta-btn{padding: 16px;background-color: #c70a16;}
#mdg-page .approach__cta-btn{padding:16px;background-color:#000;}
#mdg-page .member-card__cta-btn{padding:8px 12px;background-color:#c70a16;}
#mdg-page .banner__cta-btn{width: 100%;}
#mdg-page .cta-btn__text{flex: 1 1 auto;/* 文本自然占满 */display: block;/* 让宽度与换行更可控 */}
/* 图标 */
#mdg-page .cta-btn__icon{
  flex:0 0 auto; 
  color:inherit;
  display: flex;
  align-items: center;
  justify-content: center; 
}
#mdg-page .cta-btn__icon-svg{
  width:24px; height:24px;
  display:inline-block;
  vertical-align:-.125em;
  fill:currentColor;
}
@media only screen and (min-width: 577px) {
  #mdg-page .fv__cta-btn{max-width: 288px;}
}
@media only screen and (max-width: 576px) {
  #mdg-page .fv__cta{display: flex;align-items: center;flex-direction: column;text-align: center;padding: 40px 0 0;}
  #mdg-page .fv__cta-btn{width: 100%;}
} 

#mdg-page .container__title{
  text-align: center;
  color: #fff;
  padding: 40px 0;
  display: grid;
  gap: 24px;
}
#mdg-page .container__title > h2{
  padding: 0 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 2;
}
@media only screen and (min-width: 577px) {
  #mdg-page .container__title > figure > picture{max-width: 576px;margin: 0 auto;}
}

/* ===== About Project ===== */
#mdg-page .approach{
  margin-top: 40px;
  background-image:url("/wp-content/uploads/mdg/assets/images/approach-back.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
}
/* 容器 */
#mdg-page .approach__container{
  display:flex;
  align-items:center;          /* 让内部行在红条中垂直居中 */
  justify-content:space-between;
  gap:40px;
}
/* 左列：列表面板 */
#mdg-page .approach__panel{
  flex:1;
  display:grid;
  gap:24px;
  /* display:flex;
  flex-direction:column;
  justify-content:space-between; */
}
#mdg-page .approach__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#fff;
  padding-left:8px;
}
#mdg-page .approach__icon{ flex:0 0 auto; color:#fff; }
#mdg-page .approach__icon-svg{
  width:24px; height:24px;
  display:inline-block;
  vertical-align:-.125em;
  fill:currentColor;
}
#mdg-page .approach__body{ display:grid; gap:4px; }
#mdg-page .approach__divider{
  margin:0;
  border:0;
  height:1px;
  background:rgba(255,255,255,.2);
}
/* 右列：媒体块 */
#mdg-page .approach__media{
  overflow:visible;            /* 允许蓝块上方露出 */
  inline-size:60.48%;
  aspect-ratio: 1.07; /* 约等于 600:560 */
  transform:translateY(-40px); /* 向上越界的距离 */
  position:relative;
  z-index:1;                   /* 压在红条之上 */
  flex-shrink:0;
  display:grid;
  place-items:center;
  box-shadow:16px 32px 64px rgba(0,0,0,.5);
  /* background-repeat:no-repeat;
  background-size:cover;
  background-position:center top; */
}
/* #mdg-page .approach__media--primary{background-image:url("/wp-content/uploads/mdg/assets/images/approach__content-media-01.webp");}
#mdg-page .approach__media--secondary{background-image:url("/wp-content/uploads/mdg/assets/images/approach__content-media-02.webp");} */

/* 反转版（原来用 -02 序号控制的顺序，改为修饰符控制） */
#mdg-page .approach--reverse .approach__panel{ order:2; }
#mdg-page .approach--reverse .approach__media{ order:1; }

/* SP */
@media only screen and (max-width:768px){
  #mdg-page .approach__container{flex-direction:column;gap:0;}
  #mdg-page .approach__content{ inline-size:100%; }
  #mdg-page .approach__panel{order:2;padding-bottom:40px;text-align:center;}
  #mdg-page .approach__item{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:8px;
  }
  #mdg-page .approach__media{ order:1; }
}

/* ===== Your Benefits ===== */
/* ===== Block: overlap ===== */
#mdg-page .overlap{display:flex;align-items:center;justify-content:center;color: #fff;}
#mdg-page .overlap__container{display: grid;gap: 40px;}
/* 元素通用 */
#mdg-page .overlap__panel{inline-size:auto;}
#mdg-page .overlap__panel--content{
  padding: 16px;
  flex:0 0 50%;
  background:#000;                 /* 你原来的黑色块 */
  position:relative; z-index:2;    /* 在上层 */
  box-shadow:0 3px 0 rgba(230,6,20,1);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#mdg-page .overlap__panel--visual{
  flex:0 0 60.48%;
  aspect-ratio: 1.43; /* 约等于 260:182 */
  margin-left:-10.48%;              /* 负外边距实现叠压 */
  position:relative; z-index:1;    /* 在下层 */
  overflow:hidden;
}

/* 反向布局（不改 DOM 结构） */
#mdg-page .overlap--reverse .overlap__panel--content{ order:2; }
#mdg-page .overlap--reverse .overlap__panel--visual{order:1;margin-left:0;margin-right:-10.48%;}

/* 内部语义元素（可按需扩展样式） */
/* #mdg-page .overlap__head{} */
#mdg-page .overlap__title{
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 12px;
}
#mdg-page .overlap__subtitle{font-size: 20px;}
#mdg-page .overlap__list{display: grid;gap: 8px;margin-top:24px;padding:0;}
#mdg-page .overlap__feature{display:flex;align-items: center;gap:8px;}
#mdg-page .overlap__icon{inline-size:16px;block-size:16px;}
/* #mdg-page .overlap__text{ margin:0; } */

/* ===== Mobile：纵向，不重叠 ===== */
@media only screen and (max-width:768px){
  #mdg-page .overlap{ flex-direction:column; gap:0; }
  #mdg-page .overlap__panel{ inline-size:100%; }
  #mdg-page .overlap__panel--visual{ margin:0; flex: 1;}
  #mdg-page .overlap--reverse .overlap__panel--visual{ margin:0; }
  #mdg-page .overlap .overlap__panel--content{order:2;}
  #mdg-page .overlap .overlap__panel--visual{order:1;}
}

/* ========== term-card component ========== */
#mdg-page .term-card {
  position: relative;
  padding: 16px;
  color: #fff;
  aspect-ratio: 4 / 4.5;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
/* 渐变叠加层 */
#mdg-page .term-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  background: linear-gradient(rgba(114,0,6,0), rgba(114,0,6,1));
  pointer-events: none;
}
/* 内容元素 */
#mdg-page .term-card__title,
#mdg-page .term-card__list {position: relative;z-index: 1;}
/* 标题样式 */
#mdg-page .term-card__title {font-size: 20px;font-weight: 600;margin-bottom: 12px;}
/* 列表与项目 */
#mdg-page .term-card__list {padding-left: 16px;display: grid;gap: 4px;list-style: disc;}
#mdg-page .term-card__item {font-size: 15px;line-height: 1.6;}

/* ===== member-card ===== */
#mdg-page .member-card{
  color:#fff;
  box-shadow:0 3px 0 rgba(230,6,20,1);
  display:flex;
  flex-direction:column;
  background:#000;            /* 原来在 member-card-box 上的背景 */
  transition: all 0.3s ease;
}
#mdg-page .member-card:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.1);/* border-color: #007bff; */}
/* 媒体区域（图片容器） */
#mdg-page .member-card__media{aspect-ratio:4 / 3;object-fit: cover;}
/* 内容盒 */
#mdg-page .member-card__body{padding:16px;display:grid;gap:8px;}
/* 标题与描述（根据需要可分开类名） */
#mdg-page .member-card__title{margin:0;font-weight:600;line-height:1.5;font-size: 20px;}
#mdg-page .member-card__title > span{font-size: 14px;}
.title-tight {letter-spacing:-1.5px;display:inline-block;}
#mdg-page .member-card__desc{margin:0;font-size: 14px;min-height: 48px;}
/* .card__description {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 16px;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
} */

/* Modal样式 */
#mdg-page .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 24px;
}
#mdg-page .modal--active {display: flex;align-items: center;justify-content: center;opacity: 1;}
#mdg-page .modal__content {
    background: #1a1a1a;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    /* border-radius: 8px; */
    position: relative;
    display: flex;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
#mdg-page .modal--active .modal__content {transform: scale(1);}
#mdg-page .modal__close {
    position: absolute;
    right: 20px;
    top: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    line-height: 1;
}
#mdg-page .modal__close:hover {background: rgba(255, 255, 255, 0.2);transform: rotate(90deg);}
/* 左侧图片区 */
#mdg-page .modal__media {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    padding: 40px 20px 40px 40px;
    gap: 16px;
}
#mdg-page .modal__main-image {flex: 1;overflow: hidden;/* border-radius: 4px; */background: #000;}
#mdg-page .modal__main-image img {width: 100%;height: 100%;object-fit: cover;}
#mdg-page .modal__thumbnails {display: flex;gap: 12px;height: 100px;}

#mdg-page .modal__thumbnail {
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    object-fit: cover;
    border: 2px solid transparent;
}
#mdg-page .modal__thumbnail:hover {opacity: 0.8;}
#mdg-page .modal__thumbnail.active {opacity: 1;border-color: #fff;}
/* 右侧文字区 */
#mdg-page .modal__info {
    flex: 0 0 50%;
    padding: 60px 40px 40px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    color: #fff;
}
#mdg-page .modal__description {font-size: 14px;line-height: 1.8;color: #ccc;margin-bottom: 24px;}
#mdg-page .modal__title-box{display: flex;align-items: center;gap: 16px;margin-bottom: 20px;}
#mdg-page .modal__divider {width: 2px;height: 100%;background: #c70a16;/* margin-bottom: 20px; */}
#mdg-page .modal__title {font-size: 18px;font-weight: bold;line-height: 1.6;color: #fff;}
#mdg-page .modal__note {font-size: 12px;line-height: 1.6;color: #999;/* margin-top: auto; *//* padding-top: 20px; */}

/* 响应式 */
@media only screen and (max-width: 768px) {
  #mdg-page .modal {padding: 12px;}
  #mdg-page .modal__content {flex-direction: column;max-height: 95vh;overflow-y: auto;}
  #mdg-page .modal__media {flex: none;padding: 30px 20px 20px 20px;}/* #mdg-page .modal__main-image {height: 250px;} */
  #mdg-page .modal__thumbnails {height: 80px;}
  #mdg-page .modal__info {flex: none;padding: 20px;}
  #mdg-page .modal__close {width: 36px;height: 36px;font-size: 24px;right: 16px;top: 16px;}
  #mdg-page .modal__divider {display: none;}
}

@media only screen and (max-width: 576px) {
  #mdg-page .modal__media {padding: 20px 16px 16px 16px;}/* #mdg-page .modal__main-image {height: 200px;} */
  #mdg-page .modal__thumbnails {height: 60px;gap: 8px;}
  #mdg-page .modal__info {padding: 16px;}
  #mdg-page .modal__title {font-size: 16px;}
  #mdg-page .modal__description {font-size: 14px;}
}


#mdg-page .graph__content{
  display: grid;
  gap: 16px;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  padding: 16px;
}
#mdg-page .graph__media{display: flex;align-items: center;justify-content: center;}
#mdg-page .graph__media--double{gap: 16px;}
#mdg-page .graph__note{color: #fff !important;font-size: 10px !important;}
#mdg-page .graph__note > a{text-decoration: revert;color: #006eff;}
@media only screen and (min-width: 769px) {
  #mdg-page .graph__content{min-height: 324px;}
}
@media only screen and (max-width: 768px) {
  #mdg-page .graph__media{flex-direction: column;}
  #mdg-page .graph__figure{width: 100%;max-width: 384px;}
}


#mdg-page .tab-navigation {position: relative;display: flex;gap: 8px;}
#mdg-page .navigation-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  /* gap: 0; */
  flex: 1;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  color: white;
  border: 1px solid #ddd;
  transition: all 0.2s ease;
}
/* #mdg-page .navigation-button:last-child {} */
#mdg-page .navigation-button.is-on {background: #770200;border: none;}
#mdg-page .navigation-icon {display: inline-block;margin: 8px 0 12px;}
#mdg-page .navigation-text{min-height: 44px;/* vertical-align: middle; */}
#mdg-page .content-panels {position: relative;height: auto;overflow: hidden;}
#mdg-page .content-panel {
  padding: 16px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.3s ease;
  /* display: flex;
  align-items: center;
  justify-content: center; */
  /* background: white; */
}
#mdg-page .content-panel.is-visible {opacity: 1;transform: translateX(0);position: relative;}
@media only screen and (max-width: 576px) {
  #mdg-page .tab-navigation {flex-wrap: wrap;}
  #mdg-page .navigation-button {flex: 0 0 calc(50% - 4px); /* 每行两个，gap为8px，因此减4px */}
}