@charset "UTF-8";
* {
  --brand-color1: #E72410;
  --brand-color2: #393332;
  --brand-color3: #00A490;
  --text-primary: #000000;
  --text-secondary: #7A7F84;
  --gray-1:#2E2E2E;
  --gray-2:#898989;
  --gray-3:#B3B3B3;
  --gray-4:#DADADA;
}

* {
  --banner-bg-img: url('../images/banner/banner-About Fuddo.jpg');
}
@media (max-width: 768px) {
  * {
    --banner-bg-img: url('../images/banner/phone-banner-About Fuddo.jpg');
  }
}

Nav .nav-btns-wrapper li:nth-child(1) a,
Nav .nav-btns-wrapper li:nth-child(1) span.role-a {
  font-weight: 700;
  color: var(--brand-color1);
}

p.default {
  font-weight: 400;
  font-size: clamp(16px, 0.94vw, 18px);
  line-height: clamp(24px, 1.56vw, 30px);
  color: #393332;
}

.sec-title-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(18px, 1.25vw, 24px);
}
.sec-title-wrapper .sec-title {
  color: var(--brand-color1);
  font-weight: 700;
  font-size: clamp(20px, 1.25vw, 24px);
}
@media (max-width: 768px) {
  .sec-title-wrapper .sec-title {
    line-height: 30px;
  }
}
.sec-title-wrapper .orange-line {
  display: inline-block;
  width: 60px;
  height: 4px;
  background-color: var(--brand-color1);
}

.content.brand-story {
  width: 100%;
  --grid-gap: clamp(24px, 3.13vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  --img-ratio: 3 / 2;
  --special-img-width: clamp(180px, 15.1vw, 290px);
  --special-img-offsetX: -66.55%;
  --special-img-offsetY: 9.65%;
  --mid-border-width: 40px;
  --fuddo-deco-pic-width: clamp(160px, 13.65vw, 262px);
}
@media (max-width: 768px) {
  .content.brand-story .pc {
    display: none;
  }
}
.content.brand-story .mobile {
  display: none;
}
@media (max-width: 768px) {
  .content.brand-story .mobile {
    display: block;
  }
}
@media (max-width: 768px) {
  .content.brand-story {
    --img-ratio: 3.2 / 2.13;
  }
}
@media (max-width: 480px) {
  .content.brand-story {
    --special-img-width: clamp(120px, 15.1vw, 290px);
  }
}
.content.brand-story .top {
  width: 100%;
  display: flex;
  gap: var(--grid-gap);
}
@media (max-width: 768px) {
  .content.brand-story .top {
    flex-direction: column;
  }
}
.content.brand-story .top .left,
.content.brand-story .top .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--grid-gap);
}
.content.brand-story .top .left .custom-pr {
  padding-right: calc(var(--special-img-width) * 0.6655);
}
.content.brand-story .top .right .pic-2 {
  position: relative;
  width: 100%;
}
@media (max-width: 768px) {
  .content.brand-story .top .right .pic-2 {
    --special-img-offsetX: -18.3% !important;
    --special-img-offsetY: 18.3% !important;
    padding: 0 0 calc(0.183 * var(--special-img-width)) calc(0.183 * var(--special-img-width));
  }
}
.content.brand-story .top .right .pic-2 .deco-pic {
  position: absolute;
  z-index: 2;
  width: var(--special-img-width);
  left: 0;
  bottom: 0;
  transform: translate(var(--special-img-offsetX), var(--special-img-offsetY));
}
@media (max-width: 768px) {
  .content.brand-story .top .right .pic-2 .deco-pic {
    transform: none;
  }
}
.content.brand-story .top .right .custom-mt {
  margin-top: calc(var(--special-img-width) * 0.0965);
}
.content.brand-story .mid {
  margin-top: calc(var(--grid-gap) / 3 * 2);
  padding-top: var(--grid-gap);
  background-color: #F5F5F5;
  position: relative;
}
.content.brand-story .mid .deco-red-line {
  display: inline-block;
  position: absolute;
  bottom: calc(100% - 17px);
  left: calc((100% - var(--grid-gap)) / 2);
  width: 3px;
  height: clamp(156px, 11.46vw, 220px);
  background-color: var(--brand-color1);
  z-index: 2;
}
@media (max-width: 990px) {
  .content.brand-story .mid .deco-red-line {
    width: 2px;
  }
}
@media (max-width: 768px) {
  .content.brand-story .mid .deco-red-line {
    display: none;
  }
}
@media (max-width: 768px) {
  .content.brand-story .mid {
    margin-top: calc(var(--grid-gap) * 1.2 + var(--fuddo-deco-pic-width) / 16 * 6);
  }
}
.content.brand-story .mid .deco-pic {
  width: var(--fuddo-deco-pic-width);
  position: absolute;
  left: 0;
  bottom: calc(100% - 3px);
}
.content.brand-story .mid::before {
  content: "";
  position: absolute;
  width: 50vw;
  height: 100%;
  right: 100%;
  top: 0;
  bottom: 0;
  background-color: #F5F5F5;
}
.content.brand-story .mid::after {
  content: "";
  position: absolute;
  width: 50vw;
  height: 100%;
  left: 100%;
  top: 0;
  bottom: 0;
  background-color: #F5F5F5;
}
.content.brand-story .mid .blue-bg-title {
  border-radius: 72px 0 72px 0;
  background-color: #D9F2EF;
  border: 20px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.35vw, 26px);
  margin-top: var(--grid-gap);
  padding-top: var(--mid-border-width);
  padding-bottom: 30px;
  position: relative;
}
@media (max-width: 768px) {
  .content.brand-story .mid .blue-bg-title {
    padding-bottom: 40;
  }
}
.content.brand-story .mid .blue-bg-title::before {
  content: "";
  position: absolute;
  width: 50vw;
  height: calc(45% + var(--mid-border-width));
  right: 100%;
  bottom: calc(0px - var(--mid-border-width));
  background-color: white;
  z-index: 2;
}
.content.brand-story .mid .blue-bg-title::after {
  content: "";
  position: absolute;
  width: 50vw;
  height: calc(45% + var(--mid-border-width));
  left: 100%;
  bottom: calc(0px - var(--mid-border-width));
  background-color: white;
  z-index: 2;
}
.content.brand-story .mid .blue-bg-title .cover-bg.white {
  width: 100%;
  height: 20px;
  position: absolute;
  display: inline-block;
  background-color: white;
  top: 100%;
  left: 0;
  right: 0;
}
.content.brand-story .mid .blue-bg-title h3 {
  color: #393332;
  font-weight: 700;
  --text-size: clamp(28px, 2.08vw, 40px);
  font-size: var(--text-size);
  letter-spacing: calc(var(--text-size) * 0.03);
}
@media (max-width: 768px) {
  .content.brand-story .mid .blue-bg-title h3 {
    letter-spacing: 0;
  }
}
.content.brand-story .mid .blue-bg-title .orange-line {
  display: inline-block;
  width: 60px;
  height: 4px;
  background-color: var(--brand-color1);
}
.content.brand-story .bottom {
  margin-top: clamp(24px, 1.875vw, 36px);
  width: 100%;
  background-color: white;
  display: flex;
  gap: var(--grid-gap);
  --offset-padding: 20px;
  position: relative;
}
@media (max-width: 768px) {
  .content.brand-story .bottom {
    margin-top: 0;
    flex-direction: column;
    align-items: center;
  }
}
.content.brand-story .bottom .bottom-left,
.content.brand-story .bottom .bottom-right {
  flex: 1;
}
@media (max-width: 768px) {
  .content.brand-story .bottom .bottom-left,
  .content.brand-story .bottom .bottom-right {
    padding-left: var(--offset-padding);
    padding-right: var(--offset-padding);
  }
}
.content.brand-story .bottom .bottom-left {
  padding-left: var(--offset-padding);
}
.content.brand-story .bottom .bottom-left ul.square {
  margin-top: 16px;
  list-style: none;
  --li-color: #393332;
  --squire-color: #00A490;
}
.content.brand-story .bottom .bottom-left ul.square li {
  position: relative;
  padding-left: clamp(24px, 1.67vw, 32px);
  font-size: clamp(16px, 0.937vw, 18px);
  font-weight: 700;
  line-height: 30px;
  /* 保留空間放自訂符號 */
  color: var(--li-color);
  text-align: start;
}
@media (max-width: 768px) {
  .content.brand-story .bottom .bottom-left ul.square li {
    line-height: clamp(24px, 1.58vw, 30px);
  }
}
.content.brand-story .bottom .bottom-left ul.square li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--squire-color);
  font-size: clamp(14px, 0.83vw, 16px);
}
.content.brand-story .bottom .bottom-right .default-img-box.pic-3 {
  --img-ratio: 6.06 / 4.48;
}
@media (max-width: 768px) {
  .content.brand-story .bottom .bottom-right .default-img-box.pic-3 {
    --img-ratio: 3.20 / 2.37;
  }
}

.content.smart-reminder-tag-app {
  display: flex;
  justify-content: flex-start;
  gap: clamp(40px, 5.21vw, 100px);
}
@media (max-width: 1200px) {
  .content.smart-reminder-tag-app {
    gap: 0px;
  }
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app {
    flex-direction: column-reverse;
    align-items: center;
    gap: clamp(40px, 5.21vw, 100px);
  }
}
.content.smart-reminder-tag-app .left {
  flex: 1;
}
.content.smart-reminder-tag-app .right {
  width: 21.5vw;
  max-width: 406px;
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .right {
    width: 100%;
    max-width: 290px;
    margin-top: 20px;
  }
}
.content.smart-reminder-tag-app .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content.smart-reminder-tag-app .left p.default {
  margin-bottom: clamp(40px, 2.92vw, 56px);
}
.content.smart-reminder-tag-app .left .links-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  --box-gap: clamp(16px, 2.08vw, 40px);
  flex-wrap: wrap;
  gap: var(--box-gap);
}
@media (max-width: 990px) {
  .content.smart-reminder-tag-app .left .links-wrapper {
    --box-gap: clamp(24px, 2.08vw, 40px);
  }
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper {
    flex-direction: column;
    align-items: center;
    --box-gap: 40px;
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .sub-title {
  font-weight: 700;
  font-size: clamp(16px, 1.25vw, 24px);
  color: var(--brand-color1);
  display: flex;
  gap: 4px;
  margin-bottom: clamp(16px, 2.08vw, 40px);
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .sub-title {
    flex-wrap: wrap;
    font-size: clamp(20px, 1.25vw, 24px);
    margin-bottom: clamp(24px, 2.08vw, 40px);
  }
}
@media (max-width: 480px) {
  .content.smart-reminder-tag-app .left .links-wrapper .sub-title {
    flex-direction: column;
    align-items: center;
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .sub-title.offset {
  transform: translateX(-6%);
}
@media (max-width: 990px) {
  .content.smart-reminder-tag-app .left .links-wrapper .sub-title.offset {
    transform: none;
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .sub-title span.gray {
  color: #898989;
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 24px);
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .sub-title span.gray {
    font-size: clamp(20px, 1.25vw, 24px);
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .qrcode {
  width: 8.91vw;
  max-width: 171px;
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .qrcode {
    width: 100%;
    max-width: 171px;
  }
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .download-app {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .download-app .content {
  width: 100%;
  display: flex;
  gap: clamp(16px, 2.08vw, 40px);
  align-items: flex-start;
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .download-app .content {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .download-app .content .links {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.25vw, 24px);
  justify-content: space-between;
  align-items: stretch;
  padding-top: 4px;
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .download-app .content .links {
    padding-top: 0px;
    gap: clamp(24px, 1.25vw, 24px);
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .download-app .content .links a {
  display: inline-block;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 23/6.9;
}
.content.smart-reminder-tag-app .left .links-wrapper .download-app .content .links a img {
  width: 12vw;
  max-width: 230px;
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .download-app .content .links a img {
    width: 100%;
    max-width: 238px;
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .video-qrCode {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media (max-width: 990px) {
  .content.smart-reminder-tag-app .left .links-wrapper .video-qrCode {
    align-items: center;
  }
}
.content.smart-reminder-tag-app .left .links-wrapper .gray-separate {
  display: inline-block;
  background-color: #DADADA;
  width: 2px;
}
@media (max-width: 820px) {
  .content.smart-reminder-tag-app .left .links-wrapper .gray-separate {
    width: 100%;
    max-width: 238px;
    height: 2px;
  }
}
.content.smart-reminder-tag-app .right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(1000px);
}
.content.smart-reminder-tag-app .right img {
  width: 60%;
  z-index: 2;
  transform: translateZ(20px);
}
.content.smart-reminder-tag-app .right .blue-bg.circle {
  position: absolute;
  width: 100%;
  display: inline-block;
  min-height: 0;
  min-width: 0;
  border-radius: 9999px;
  aspect-ratio: 1/1;
  background-image: linear-gradient(to top, #80D0C7, #D9F2EF);
}
.content.smart-reminder-tag-app .right:hover img,
.content.smart-reminder-tag-app .right:hover .blue-bg.circle {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.content.pressure-sore-prevention-mattress .sec-title-wrapper {
  margin-bottom: clamp(16px, 1.25vw, 24px);
}
.content.pressure-sore-prevention-mattress .default-img-box {
  --img-ratio: 6.06 / 4.04;
}
@media (max-width: 1536px) {
  .content.pressure-sore-prevention-mattress .default-img-box.pc {
    display: none;
  }
}
.content.pressure-sore-prevention-mattress .default-img-box.mobile {
  display: none;
}
@media (max-width: 1536px) {
  .content.pressure-sore-prevention-mattress .default-img-box.mobile {
    display: inline-block;
  }
}
@media (max-width: 768px) {
  .content.pressure-sore-prevention-mattress .default-img-box {
    --img-ratio: 3.20 / 2.13;
  }
}
.content.pressure-sore-prevention-mattress .top {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  margin-bottom: clamp(24px, 1.67vw, 32px);
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top {
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(32px, 2.92vw, 56px);
  }
}
.content.pressure-sore-prevention-mattress .top .desc {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: clamp(39px, 3.2vw, 999px);
  background-color: #D9F2EF;
  border-radius: 72px 0 72px 0;
  padding: 18px clamp(12px, 2.08vw, 40px) 24px;
  padding-right: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .desc {
    padding: 20px clamp(24px, 2.08vw, 40px) 24px;
    position: static;
    border-radius: 72px 0 0 0;
    gap: 4px;
  }
}
.content.pressure-sore-prevention-mattress .top .desc .grange-text {
  color: var(--brand-color1);
  font-weight: 900;
  font-size: clamp(20px, 2.08vw, 40px);
  font-style: italic;
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .desc .grange-text {
    font-size: clamp(24px, 2.08vw, 40px);
  }
}
.content.pressure-sore-prevention-mattress .top .desc span.gray {
  color: #787878;
  font-size: clamp(16px, 1.67vw, 32px);
  color: #787878;
  font-weight: 900;
  font-style: italic;
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .desc span.gray {
    font-size: clamp(20px, 1.67vw, 32px);
  }
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .desc span.gray.pc {
    display: none;
  }
}
.content.pressure-sore-prevention-mattress .top .desc span.gray.mobile {
  display: none;
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .desc span.gray.mobile {
    display: inline-block;
  }
}
.content.pressure-sore-prevention-mattress .top .img-wrapper {
  z-index: 2;
  width: 55%;
  transform: translateX(4%);
}
.content.pressure-sore-prevention-mattress .top .img-wrapper img {
  width: 100%;
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .img-wrapper img.pc {
    display: none;
  }
}
.content.pressure-sore-prevention-mattress .top .img-wrapper img.mobile {
  display: none;
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .img-wrapper img.mobile {
    display: inline-block;
  }
}
@media (max-width: 820px) {
  .content.pressure-sore-prevention-mattress .top .img-wrapper {
    transform: none;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .content.pressure-sore-prevention-mattress .top .img-wrapper img {
    z-index: 2;
    position: relative;
    width: 80%;
  }
  .content.pressure-sore-prevention-mattress .top .img-wrapper::after {
    content: "";
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #D9F2EF;
    border-radius: 0 0 72px 0;
    z-index: 1;
  }
}
.content.pressure-sore-prevention-mattress .mid,
.content.pressure-sore-prevention-mattress .bottom {
  width: 100%;
  gap: clamp(24px, 2.92vw, 56px);
  display: flex;
  align-items: flex-start;
}
.content.pressure-sore-prevention-mattress .mid .default-img-box,
.content.pressure-sore-prevention-mattress .mid .text,
.content.pressure-sore-prevention-mattress .bottom .default-img-box,
.content.pressure-sore-prevention-mattress .bottom .text {
  flex: 1;
}
@media (max-width: 1536px) {
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper {
    display: flex;
    gap: clamp(24px, 2.92vw, 56px);
    align-items: stretch;
  }
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper .default-img-box,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper .default-img-box {
    width: clamp(240px, 20.83vw, 400px);
    flex: none;
  }
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper p.default,
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper ul.square,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper p.default,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper ul.square {
    flex: 1;
  }
}
@media (max-width: 820px) and (max-width: 1536px) {
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper {
    flex-direction: column-reverse;
  }
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper .default-img-box,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper .default-img-box {
    width: 100%;
  }
}
@media (max-width: 1536px) {
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper.type2,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper.type2 {
    flex-direction: column;
  }
  .content.pressure-sore-prevention-mattress .mid .flex-wrapper.type2 .default-img-box,
  .content.pressure-sore-prevention-mattress .bottom .flex-wrapper.type2 .default-img-box {
    width: 100%;
  }
}
@media (max-width: 1536px) {
  .content.pressure-sore-prevention-mattress .mid .text,
  .content.pressure-sore-prevention-mattress .bottom .text {
    flex: 1.5;
  }
}
.content.pressure-sore-prevention-mattress .bottom {
  margin-top: clamp(24px, 4.17vw, 80px);
}
.content.pressure-sore-prevention-mattress .bottom ul.square {
  margin-top: 16px;
  list-style: none;
  --li-color: #393332;
  --squire-color: var(--brand-color1);
}
.content.pressure-sore-prevention-mattress .bottom ul.square li {
  position: relative;
  padding-left: clamp(24px, 1.67vw, 32px);
  font-size: clamp(16px, 0.937vw, 18px);
  font-weight: 400;
  line-height: 30px;
  /* 保留空間放自訂符號 */
  color: var(--li-color);
  text-align: start;
}
@media (max-width: 768px) {
  .content.pressure-sore-prevention-mattress .bottom ul.square li {
    line-height: clamp(24px, 1.58vw, 30px);
  }
}
.content.pressure-sore-prevention-mattress .bottom ul.square li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--squire-color);
  font-size: clamp(14px, 0.83vw, 16px);
}/*# sourceMappingURL=about.css.map */