@import url(../../style_popup.css);



/*========================================================*/
/*------- modules 頁面樣式 --------*/
/*========================================================*/


.pageContent{
    position: relative;
    overflow: unset;
}




.right_contentBg{
    display: flex;
    flex-direction: column;
    gap: clamp(1.452rem, 2.34vw, 2.813rem);
}




/* 在螢幕寬度大於990時，套用這裡的特定樣式 */
@media screen and (min-width: 990.1px) {

   /* .pageContent{
        position: relative;
        overflow: unset;
        max-width: calc(100% - (1rem * 2));
        margin-left: auto;
        margin-right: auto;
    }
    .pageContent::before{
        content: "";
        position: absolute;
        width: 100%;
        max-width: calc(100% - (1rem * 2));
        box-shadow: rgba(50, 50, 93, 0.05) 0px -79px 95px -20px, rgba(0, 0, 0, 0.1) 0px -40px 57px -30px;
        border-top-left-radius: clamp(0.521rem, 2.6vw, 3.125rem);
        border-top-right-radius: clamp(0.521rem, 2.6vw, 3.125rem);
        top: calc(clamp(1.354rem, 6.77vw, 8.125rem) * -1);
        height: clamp(1.354rem, 6.77vw, 8.125rem);
        left: 50%;
        transform: translateX(-50%);
    } */

}




  body {
    /* font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    background: #eef1f6;
    color: #1c1c20;
    -webkit-font-smoothing: antialiased;
    padding: clamp(20px, 4vw, 64px); */
  }
  .right_contentBg {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.452rem, 2.34vw, 2.813rem);
  }

  /* ===== 區塊標題 ===== */
  .mod_section_title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.625rem;
    margin-bottom: clamp(1.5rem, 2.6vw, 2.5rem);
  }
  .mod_section_title_wrap span:empty { display: none; }
  .mod_section_title_wrap .bw_section_title {
    margin: 0;
    padding: 0 0 0.6rem;
    position: relative;
    font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.06em;
    color: var(--mod_accent, #e30613);
  }
  .mod_section_title_wrap .bw_section_title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 3px;
    border-radius: 3px;
    background-color: var(--mod_accent, #e30613);
  }
  .mod_section_title_wrap .description {
    margin: 0;
    font-size: clamp(0.95rem, 0.7rem + 0.5vw, 1.125rem);
    font-weight: 500;
    line-height: 1.6;
    color: #6f6f78;
  }

  /* ===== 區塊容器 ===== */
  .mod_Bg {
    background: #ffffff;
    border-radius: clamp(0.903rem, 1.46vw, 1.75rem);
    padding: clamp(1.613rem, 2.6vw, 3.125rem);
    padding: clamp(.9375rem, 2.6vw, 3.125rem);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }

  .mod_Bg:nth-of-type(2n+1) {
    --mod_accent: #ef5a24; --mod_accent_soft: #fdede5;
  }
  .mod_Bg:nth-of-type(2) {
    --mod_accent: #5fb12c; --mod_accent_soft: #eef7e7;
  }

  /* .mod_basicBg   { --mod_accent: #ef5a24; --mod_accent_soft: #fdede5; }
  .mod_exhibitBg { --mod_accent: #5fb12c; --mod_accent_soft: #eef7e7; } */




  .mod_area {
    margin: 0; padding: 0; list-style-type: none;
    display: flex; flex-wrap: wrap;
    justify-content: center; align-content: stretch;
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  .mod_list {
    position: relative;
    margin: 0; padding: 0; list-style-type: none;
    display: flex; flex-direction: column;
    flex: 0 1 calc((100% / 4) - (3 * clamp(1rem, 2vw, 1.5rem) / 4));
    background-color: #fff;
    border: 1px solid #ececef;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: .28s cubic-bezier(.22,.61,.36,1);
    border-radius: 0.875rem;
  }
  .mod_card {
    text-decoration: none !important;
    display: flex; width: 100%; cursor: pointer;
  }
  .mod_list:hover {
    border-color: var(--mod_accent, #e30613);
    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.10);
    transform: translateY(-0.25rem);
  }
  .mod_content {
    position: relative;
    display: flex; flex-direction: row; align-items: center;
    gap: clamp(0.75rem, 1.4vw, 1.15rem);
    padding: clamp(1.5rem, 2.2vw, 1.85rem) clamp(1.1rem, 1.6vw, 1.45rem);
    padding-top: clamp(2rem, 2.8vw, 2.55rem);
    width: 100%; height: 100%; box-sizing: border-box;
  }
  .mod_num {
    position: absolute;
    top: clamp(0.7rem, 1vw, 0.95rem);
    left: clamp(0.85rem, 1.3vw, 1.15rem);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.7rem; height: 1.7rem; padding: 0 0.4rem;
    border-radius: 0.45rem;
    background-color: var(--mod_accent, #e30613);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem; font-weight: 800; font-style: italic;
    line-height: 1; letter-spacing: 0.02em;
  }
  .mod_icon {
    flex: 0 0 auto;
    width: clamp(3.1rem, 4.4vw, 3.85rem);
    height: clamp(3.1rem, 4.4vw, 3.85rem);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background-color: var(--mod_accent_soft, #f4f4f6);
    color: var(--mod_accent, #e30613);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
  }
  .mod_icon i { line-height: 1; }
  .mod_textwrap { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
  .mod_name {
    text-align: left; padding: 0; margin: 0;
    font-weight: 800;
    font-size: clamp(1rem, 0.8rem + 0.4vw, 1.2rem);
    line-height: 1.4; color: #1c1c20;
  }
  .mod_text {
    margin: 0; font-weight: 500;
    font-size: clamp(0.82rem, 0.65rem + 0.4vw, 0.95rem);
    line-height: 1.55; color: #6f6f78; text-align: left;
  }
@media (max-width: 990px) {
  .mod_area {
    gap: 0.75rem;
  }

  .mod_list {
    flex: 0 1 calc(50% - 0.375rem);
  }

  .mod_content {
    gap: 0.75rem;
    padding: 1.25rem 0.95rem;
    padding-top: 1.85rem;
  }

  .mod_num {
      top: 0;
      left: 0;
      border-radius: 0;
      border-top-left-radius: 0.875rem;
      border-bottom-right-radius: .3125rem;
  }

}

@media (max-width: 480px) {
  .mod_area {
    gap: 0.625rem;
  }

  .mod_list {
    /* flex: 0 1 calc(50% - 0.3125rem); */
            flex: unset;
        width: 100%;
  }

  .mod_content {
    gap: 0.625rem;
  }

  .mod_icon {
    width: 2.85rem;
    height: 2.85rem;
    font-size: 1.25rem;
  }


}















  

/* ------------------------------------------------------------ */
/* 為什麼選擇 Doweb？                                  */
/* ------------------------------------------------------------ */

.case_whyBg {
    /* margin-top: clamp(1.613rem, 2.6vw, 3.125rem); */
    overflow: hidden;
    border-radius: clamp(1.25rem, 0.6rem + 1.4vw, 2.5rem);
}


    .case_whyBg picture{
        display: block;
        width: 100%;
    }

	.case_whyBg .case_why_link{
		display: block;
		width: 100%;
	}
		.case_whyBg .case_why_link img{
			width: 100%;
			height: auto;
		}