.wapfHueC2PageTitle {
  background: linear-gradient(245deg, rgba(21, 203, 255, 0.40) 2.14%, rgba(255, 252, 107, 0.40) 82.71%);
  display: flex;
  justify-content: center;
  line-height: normal;
  color: #0F1C50;
  font-weight: 600;
  height: 400px;
  align-items: center;
}

.wapfHueC2PageTitleTexts {
  width: 600px;
  z-index: 1;
}

.wapfHueC2PageTitleImgs {
  width: 500px;
  position: relative;
}

#wapfHueC2DesctopScreen {
  position: absolute;
  width: 400px;
  right: 0;
  bottom: -130px;
}

#wapfHueC2Laptop {
  position: absolute;
  width: 250px;
}

.wapfHueC2PageTitle .wapfSubTitleSmall {
  font-size: 24px;
}

.wapfHueC2PageTitle .wapfSubTitle {
  font-size: 36px;
}

.wapfHueC2PageTitle .wapfPageTitle {
  display: flex;
  font-size: 76px;
}

.wapfPageTitle img {
  width: 84px;
  margin-left: -9px;
}

.wapfPageTitle div {
  line-height: 1;
  padding-bottom: 7px;
}

.wapfHueC2PageTitle .wapfSupplement {
  font-size: 20px;
}

.wapfTitleWrapper {
  padding-top: 40px;
  text-align: center;
}

.wapfTitle {
  font-size: 36px;
}

.wapfYellow {
  color: #f4b142;
}

.wapfGreen {
  color: #00b19d;
}

.wapfBgPaleGreen {
  background-color: #EEFFFD;
}

.wapfTitleWrapper.wapfBgPaleGreen {
  margin-top: 40px;
}

.wapfCommonWrapper.wapfBgPaleGreen {
  padding-bottom: 40px;
}

.wapfCallout {
  font-size: 24px;
  position: relative;
  background-color: #00b19d;
  color: #fff;
  padding: 8px 32px;
  display: inline-block;
  border-radius: 16px;
  margin-top: 40px;
}

.wapfCallout:before {
  transform: rotate(45deg);
  content:
    "";
  width: 16px;
  height: 16px;
  background-color: #00b19d;
  position: absolute;
  bottom: -7px;
  right: 60px;
}

.wapfCommonWrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  padding: 40px 16px 0 16px;
  gap: 40px;
}

.wapfIssues {
  display: flex;
  flex-wrap: wrap;
  width: 664px;
  gap: 24px;
}

.wapfIssue {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 320px;
  font-weight: 600;
  line-height: normal;
}

.wapfIssue>img {
  width: 90px;
  opacity: 0.5;
  padding-bottom: 8px;
}

.wapfSolutions,
.wapfDefaultFunctions {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  gap: 16px;
}

.wapfSolution,
.wapfDefaultFunction {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wapfSolution div,
.wapfDefaultFunction div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 840px;
}

.wapfDefaultFunction div {
  max-width: 720px;
}

.wapfSolution img,
.wapfDefaultFunction img {
  max-height: 200px;
  object-fit: contain;
}

.wapfSolutionImgWrapper {
  width: 200px;
}

.wapfDefaultFunction div:has(img) {
  max-width: 120px;
}

.wapfCard {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 20px 24px;
}

.wapfCardTitle {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}

.wapfCard p {
  line-height: normal;
  color: #7f7f7f;
}

.wapfAccent {
  color: #316EA9;
}

.wapfConcepts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 800px;
}

.wapfConcept {
  display: flex;
  flex-direction: column;
  width: 240px;
  height: 240px;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  font-weight: 600;
  line-height: normal;
}

.wapfConcept img {
  width: 90px;
}

.wapfAccent.wapfPj {
  color: #317ABD;
}

.wapfAccent.wapfPr {
  color: #2E7D32;
}

.wapfAccent.wapfFbt {
  color: #FF5722;
}

.wapfContact .btn.-navy a {
  display: block;
  text-align: center;
  width: 240px;
}

#wapfModuleMap {
  padding-bottom: 24px;
  width: 100%;
  max-width: 900px;
}

/*contact*/
.wapfContact {
  display: flex;
  gap: 24px;
}

@media (max-width: 1280px) {

  /*key visual*/
  .wapfHueC2PageTitleTexts {
    width: 600px;
    z-index: 1;
    padding-left: 16px;
  }

  .wapfHueC2PageTitleImgs {
    width: 500px;
    position: relative;
    margin-right: 16px;
  }

  #wapfHueC2DesctopScreen {
    position: absolute;
    width: 340px;
    bottom: -110px;
  }

  #wapfHueC2Laptop {
    position: absolute;
    width: 200px;
    top: 10px;
    left: -60px;
  }

  .wapfHueC2PageTitle .wapfSubTitleSmall {
    font-size: 18px;
  }

  .wapfHueC2PageTitle .wapfSubTitle {
    font-size: 23px;
  }

  /* .wapfHueC2PageTitle .wapfPageTitle {
    display: flex;
    font-size: 76px;
  }

  .wapfPageTitle img {
    width: 84px;
    margin-left: -9px;
  }

  .wapfPageTitle div {
    line-height: 1;
    padding-bottom: 7px;
  } */

  .wapfHueC2PageTitle .wapfSupplement {
    font-size: 16px;
  }

  /*common*/
  .wapfTitle {
    font-size: 28px;
  }

  .wapfCard {
    padding: 12px 12px 16px 12px;
  }

  .wapfCard p {
    font-size: 14px;
  }

  .wapfCardTitle {
    font-size: 21px;
  }

  /*issues*/
  .wapfIssue>img {
    width: 64px;
  }

  /*callout*/
  .wapfCallout {
    font-size: 21px;
  }

  /*solutions*/
  .wapfSolution {
    flex-wrap: nowrap;
  }

  .wapfSolution img {
    visibility: hidden;
  }

  .wapfSolutionImgWrapper {
    width: 120px;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .wapfSolution:nth-child(1) .wapfSolutionImgWrapper {
    background-image: url('../image/wapf-hue-connect-construction.png');
    background-position: -43px;
  }

  .wapfSolution:nth-child(2) .wapfSolutionImgWrapper {
    background-image: url('../image/wapf-hue-connect-start.png');
    background-position: -69px;
  }

  .wapfSolution:nth-child(3) .wapfSolutionImgWrapper {
    background-image: url('../image/wapf-hue-connect-orderer.png');
    background-position: -21px;
  }

  .wapfSolution:nth-child(4) .wapfSolutionImgWrapper {
    background-image: url('../image/wapf-hue-connect-reminder.png');
  }

  /*default functions*/
  .wapfDefaultFunction div:has(img) {
    position: absolute;
  }

  .wapfDefaultFunction img {
    max-width: 48px;
  }

  .wapfDefaultFunction .wapfCardTitle {
    padding-left: 60px;
    margin-top: 6px;
  }

}

@media (max-width: 730px) {
  .wapfHueC2PageTitle {
    flex-direction: column;
    height: auto;
    margin-top: 16px;
  }

  .wapfHueC2PageTitle .wapfSubTitle {
    font-size: 21px;
  }

  #wapfHueC2DesctopScreen {
    bottom: 14px;
    height: 230px;
    object-fit: contain;
    right: 53px;
  }

  .wapfHueC2PageTitleTexts {
    width: 100%;
    padding-left: 8px;
    padding-top: 16px;
  }

  .wapfSubTitle {
    font-size: 20px;
  }

  .wapfSubTitleSmall {
    font-size: 16px;
  }

  .wapfHueC2PageTitleImgs {
    width: 100%;
    height: 240px;
  }

  img#wapfHueC2Laptop {
    top: 96px;
    left: 200px;
  }

  /*common*/
  .wapfTitle {
    font-size: 18px;
  }

  .wapfCommonWrapper {
    padding: 24px 8px 0 8px;

  }

  .wapfCard {
    flex-direction: column;
    padding: 8px 8px 12px 8px;
  }

  .wapfCard p {
    font-size: 14px;
  }

  .wapfCardTitle {
    font-size: 16px;
  }

  /*issues*/
  .wapfIssues {
    flex-direction: column;
    align-items: center;
    width: auto;
    font-size: 14px;
  }

  .wapfIssue>img {
    width: 64px;
    padding-bottom: 2px;
  }

  /*callout*/
  .wapfCallout {
    font-size: 16px;
  }

  /*solutions*/
  .wapfSolution {
    flex-direction: column;
    align-items: center;
  }

  .wapfSolution img {
    visibility: visible;
  }

  .wapfSolutions .wapfSolution.wapfCard .wapfSolutionImgWrapper {
    /*to win calc*/
    width: 200px;
    background-image: none;
  }

  /*default functions*/
  .wapfDefaultFunction div:has(img) {
    position: absolute;
  }

  .wapfDefaultFunction img {
    max-width: 40px;
  }

  .wapfDefaultFunction .wapfCardTitle {
    padding-left: 48px;
    margin-top: 6px;
  }

  /*contact*/
  .wapfContact {
    gap: 12px;
  }

  .wapfContact .btn.-navy a {
    width: 175px;
    font-size: 14px;
  }

}