:root {
  --txtBase: #212029;
  --txtGray: #6c6971;
  --gray: #ccc;
  --lightGray: #f2f2f2;
  --purple: #b06bbe;
  --lightPurple: #f8eafa;
  --red: #e28477;
  --lightRed: #fdefed;
  --blue: #4c86c5;
  --lightBlue: #e7f4fa;
  --gold: #9d7900;
  --lightGold: #fcfcdd;
  --green: #5db15b;
  --lightGreen: #edfded;
  --orange: #e5821c;
  --lightOrange: #fcf5e7;
  --productBorderLightPurple: #eccef0;
  --productBgLightPurple: #fefaff;
  --productBlue: #4580C2;
  --productGray: #484848;
  --productLightGray: #fcfcfc;
  --productBorderGray: #d7d7d7;
}

#business .txt {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.45px;
  line-height: 30px;
}
@media screen and (max-width: 768px) {
  #business .txt {
    font-size: 12px;
    letter-spacing: 0.29px;
    line-height: 26px;
  }
}
#business .--large.txt {
  font-size: 32px;
}
@media screen and (max-width: 768px) {
  #business .--large.txt {
    font-size: 26px;
  }
}
#business .--medium.txt {
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  #business .--medium.txt {
    font-size: 15px;
  }
}
#business .--small.txt {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
}
@media screen and (max-width: 768px) {
  #business .--small.txt {
    font-size: 12px;
  }
}
#business .--light.txt {
  font-weight: 300;
}
#business .--bold.txt {
  font-weight: 700;
}
#business .--indent.txt {
  text-indent: -1em;
  padding-left: 1em;
}
#business .--strech.txt {
  flex: 1;
}
#business .--fitHeight.txt {
  height: fit-content;
}
#business .--fitWidth.txt {
  width: fit-content;
}
#business .--txtCenter.txt {
  text-align: center;
}
#business .--txtBase.txt {
  color: #212029;
}
#business .--txtGray.txt {
  color: #6c6971;
}
#business .--gray.txt {
  color: #ccc;
}
#business .--lightGray.txt {
  color: #f2f2f2;
}
#business .--purple.txt {
  color: #b06bbe;
}
#business .--lightPurple.txt {
  color: #f8eafa;
}
#business .--red.txt {
  color: #e28477;
}
#business .--lightRed.txt {
  color: #fdefed;
}
#business .--blue.txt {
  color: #4c86c5;
}
#business .--lightBlue.txt {
  color: #e7f4fa;
}
#business .--gold.txt {
  color: #9d7900;
}
#business .--lightGold.txt {
  color: #fcfcdd;
}
#business .--green.txt {
  color: #5db15b;
}
#business .--lightGreen.txt {
  color: #edfded;
}
#business .--orange.txt {
  color: #e5821c;
}
#business .--lightOrange.txt {
  color: #fcf5e7;
}
#business .--productBorderLightPurple.txt {
  color: #eccef0;
}
#business .--productBgLightPurple.txt {
  color: #fefaff;
}
#business .--productBlue.txt {
  color: #4580C2;
}
#business .--productGray.txt {
  color: #484848;
}
#business .--productLightGray.txt {
  color: #fcfcfc;
}
#business .--productBorderGray.txt {
  color: #d7d7d7;
}

.pageHeader {
  padding-bottom: 66px;
  border-bottom: 1px solid #6c6971;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .pageHeader {
    padding-bottom: 47px;
    margin-bottom: 73px;
  }
}

.pageTitleArea {
  text-align: center;
  margin-bottom: 140px;
}
@media screen and (max-width: 768px) {
  .pageTitleArea {
    text-align: start;
    margin-bottom: 67px;
  }
}
.pageTitleArea .pageTitle {
  color: var(--purple);
  font-size: 32px;
  letter-spacing: 1.66px;
  line-height: 47px;
  margin-bottom: 38px;
}
@media screen and (max-width: 768px) {
  .pageTitleArea .pageTitle {
    font-size: 24px;
    letter-spacing: 1.25px;
    line-height: 34px;
    margin-bottom: 25px;
  }
}
.pageTitleArea .pageSubTitle {
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.45px;
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .pageTitleArea .pageSubTitle {
    font-size: 12px;
    letter-spacing: 0.29px;
    line-height: 26px;
  }
}

#business {
  padding-bottom: 118px;
}
#business .sec:not(:last-child) {
  margin-bottom: 130px;
}
#business .secTitle {
  color: var(--purple);
  font-size: 32px;
  letter-spacing: 1.5px;
  line-height: 43px;
  margin-bottom: 30px;
  padding-left: 27px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #business .secTitle {
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 1.13px;
    margin-bottom: 35px;
    padding-left: 21px;
  }
}
#business .secTitle::before {
  background: #fff;
  border: 4px solid var(--purple);
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 15px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 15px;
}
@media screen and (max-width: 768px) {
  #business .secTitle::before {
    border: 3px solid var(--purple);
    height: 13px;
    margin: 9px 0 0 0;
    width: 13px;
  }
}
#business .businessWrap {
  display: flex;
  gap: 33px;
}
#business .businessWrap > div {
  display: block;
  width: calc(33.33% - 16.5px);
}
#business .businessLink {
  display: block;
  margin-bottom: 15px;
}
#business .businessLinkImgWrap {
  position: relative;
  clip-path: inset(0 0 round 12px 12px 12px 12px);
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
#business .businessLinkImgWrap:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  border-radius: 12px;
  border: 1px solid #eccef0;
}
#business .businessLinkImgWrap > .businessLinkImg {
  height: 220px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.3s;
}
#business .businessLinkIcoWrap {
  background-color: var(--purple);
  border-radius: 999px;
  bottom: 16px;
  position: absolute;
  height: 40px;
  right: 16px;
  width: 40px;
}
#business .businessLinkIcoWrap .businessLinkIco {
  width: 100%;
  height: auto;
  padding: 14px;
}
#business .businessLinkIcoWrap .businessLinkIco.--linkout {
  padding: 8px 8px 14px 14px;
}
#business .businessLink:hover .businessLinkImgWrap > .businessLinkImg {
  transform: scale(1.1);
}
#business .businessLinkCategory {
  border-radius: 0 12px 0 0;
  border-top: 1px solid #eccef0;
  border-right: 1px solid #eccef0;
  background: #f8eafa;
  position: absolute;
  bottom: -1px;
  left: -1px;
  padding: 4px 14px;
  color: #b06bbe;
  font-size: 14px;
  letter-spacing: 0.76px;
  line-height: 20px;
}
#business .businessLinkTitle {
  font-size: 20px;
  letter-spacing: 0.96px;
  line-height: 29px;
  margin-bottom: 16px;
  font-weight: 400;
}
#business .businessLinkText {
  color: #6c6971;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.7px;
  line-height: 26px;
}
#business .businessLinkButton {
  margin-top: 8px;
}
#business .businessLinkButton .reademoreLink {
  color: #b06bbe;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.45px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: solid 1px #b06bbe;
}
#business .businessLinkButton .reademoreLink::after {
  content: "";
  width: clamp(40px, 4vw, 50px);
  height: 10px;
  display: inline-block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53.9 10'><path fill='%23B06BBE' d='M44.4,0l9.5,8.2H0V5.8h44.4L44.4,0z'/></svg>") no-repeat center/contain;
}
#business .tagArea {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#business .tagArea > a {
  display: inline-block;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 3px 7px;
  color: #b06bbe;
  font-size: 13px;
  letter-spacing: 0.78px;
  line-height: 19px;
}
#business .tagArea > a:hover {
  background: #f8eafa;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #business .businessWrap {
    flex-direction: column;
    gap: 40px;
  }
  #business .businessWrap > div {
    width: 100%;
  }
  #business .businessLinkImgWrap {
    margin-bottom: 16px;
  }
  #business .businessLinkTitle {
    /* letter-spacing: 0.86px; */
  }
}