#wrap:before {
  display: none
}


#wrap .c-breadcrumb {
  background-color: transparent
}

#wrap .c-breadcrumb ul {
  background-color: white
}

@media (min-width: 781px) {
  #wrap .c-breadcrumb {
    margin-bottom: 0
  }
}

#product,
#capabilities {
  position: relative;
  top: -20px
}

.main-visual {
  background-color: #f8f8f8 !important;
  background-image: none !important;
  position: relative;
  height: 397px;
  padding-top: 0!important;
  padding-bottom: 0!important;
  margin-top: -50px;

}

@media (max-width: 780px) {
  .main-visual {
    height: 680px
  }
}
@media (max-width: 590px) {
  .main-visual {
    height: 580px
  }
}
@media (max-width: 400px) {
  .main-visual {
    height: 480px
  }
}

.main-visual .mv-img {
  margin: 0 auto;
  position: absolute;
  left: 0
}

@media (min-width: 781px) {
  .main-visual .mv-img {
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 100%;
    max-width: none
  }
  .main-visual-inner{
    position: relative;
    margin: 0 auto;
    height: 100%;
    max-width: 1280px;
  }
}

@media (min-width: 781px) {
  .main-visual {
    overflow: hidden
  }
}

@media (min-width: 781px) {
  .main-visual .mv-img,
  .main-visual .mv-img img {
    display: block
  }
}

@media (max-width: 780px) {
  .main-visual .mv-img {
    bottom: 0%;
    width: 93.8461%
  }
}
@media (min-width: 780px) {
  .hue-mv-txt{
    max-width: 770px;
    margin: 0 auto;
    height: 100%;
    position: relative;
    width: calc(100% - 60px);
  }
}

.main-visual .hue-mv-txt .mv-ttl {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.2;
  margin: 0 auto;
  position: absolute;
  right: 0;
  font-size: 40px
}
@media (min-width: 781px) {
  .main-visual .hue-mv-txt .mv-ttl {
    top: 50%;
    transform: translateY(-50%)
  }
}


@media (max-width: 780px) {
  .main-visual .hue-mv-txt .mv-ttl {
    font-size: 28px;
    top: 58px;
    left: 24px
  }
}

.main-visual .hue-mv-txt .mv-ttl img {
  margin-bottom: 0.917vw;
  width: 137px;
}

@media (max-width: 780px) {
  .main-visual .hue-mv-txt .mv-ttl img {
    margin-bottom: 15px;
    width: 118px
  }
}

.hue .c-lst-anchor {
  background-color: white
}

@media (min-width: 781px) {
  .hue .c-lst-anchor {
    padding: 65px 40px 80px
  }
}

@media (max-width: 780px) {
  .hue .c-lst-anchor {
    padding-top: 50px;
    padding-bottom: 50px
  }
}

.sec-intro {
  background-color: #f8f8f8;
  padding: 74px 0 120px
}

@media (max-width: 780px) {
  .sec-intro {
    padding: 60px 0 94px
  }
}

.sec-intro .ttl {
  color: #902AF3;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.6;
  margin-bottom: 11px
}

@media (max-width: 780px) {
  .sec-intro .ttl {
    line-height: 1.4;
    font-size: 24px;
    margin-bottom: 12px
  }
}

.sec-intro .txt {
  font-size: 18px;
  letter-spacing: .04em;
  font-weight: bold;
  line-height: 1.8;
  padding-bottom: 60px
}

@media (max-width: 780px) {
  .sec-intro .txt {
    font-size: 14px;
    padding-bottom: 80px
  }
}

.sec-intro .diagram-wrap {
  background: linear-gradient(135deg, #902AF3 0%, #0762DC 50%, #1FD1C2 100%);
  padding: 40px 0
}

@media (max-width: 780px) {
  .sec-intro .diagram-wrap {
    padding: 40px 20px;
    background: linear-gradient(0deg, #902AF3 0%, #0762DC 50%, #1FD1C2 100%)
  }
}

.sec-intro .diagram-wrap .item-list {
  display: flex;
  gap: 20px
}

@media (max-width: 780px) {
  .sec-intro .diagram-wrap .item-list {
    border-radius: 10px;
    background-color: white;
    gap: 0;
    flex-direction: column
  }
}

.sec-intro .diagram-wrap .item {
  background-color: white;
  border-radius: 10px;
  padding: 29px 40px;
  width: calc((100% - 40px)/3);
  text-align: center
}

@media only screen and (max-width: 1110px) {
  .sec-intro .diagram-wrap .item {
    padding: 29px 20px
  }
}

@media (max-width: 780px) {
  .sec-intro .diagram-wrap .item {
    background-color: transparent;
    padding: 45px 0px 50px;
    position: relative;
    width: 100%
  }
  .sec-intro .diagram-wrap .item:before {
    background-color: #B3B3B4;
    content: '';
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%
  }
  .sec-intro .diagram-wrap .item:nth-child(2) {
    padding-bottom: 45px
  }
  .sec-intro .diagram-wrap .item:nth-child(3) {
    padding-bottom: 80px
  }
  .sec-intro .diagram-wrap .item:nth-child(3):before {
    display: none
  }
  .sec-intro .diagram-wrap .item:nth-child(3) img {
    margin-top: 20px
  }
}

.sec-intro .diagram-wrap .item p {
  color: #902AF3;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.6;
  text-align: left
}

@media only screen and (max-width: 1110px) {
  .sec-intro .diagram-wrap .item p {
    font-size: 2.5vw
  }
}

@media (max-width: 780px) {
  .sec-intro .diagram-wrap .item p {
    padding-left: 10px;
    font-size: 20px
  }
}

.sec-intro .diagram-wrap .item img {
  margin: 20px auto 0;
  height: 200px
}

@media only screen and (max-width: 1020px) {
  .sec-intro .diagram-wrap .item img {
    height: auto
  }
}

@media (max-width: 780px) {
  .sec-intro .diagram-wrap .item img {
    height: auto;
    margin: 25px auto 0;
    width: calc(100% - 100px);
  }
}
@media (max-width: 480px) {
  .sec-intro .diagram-wrap .item img {
    height: 200px;
    
    width:auto;
  }
  .sec-intro .diagram-wrap .item:nth-child(1) {
    padding-bottom: 40px;
    img{
      height: auto;
      margin: 21px auto 0;
      width: 51.026vw;
    }
  }
  .sec-intro .diagram-wrap .item:nth-child(2) img{
    height: auto;
    width: 61.538vw;
  }
  .sec-intro .diagram-wrap .item:nth-child(3) {
    img{
      height: auto;
      width: 50.231vw;
    }
  }
}

.sec-capabilities {
  padding-top: 60px;
  position: relative
}

.sec-capabilities .inner {
  margin: 0 auto;
  max-width: 1050px;
  width: calc(100% - 48px)
}

.sec-capabilities .sec-ttl {
  color: black;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -20px
}

@media (max-width: 780px) {
  .sec-capabilities .sec-ttl {
    top: -15px;
    font-size: 24px
  }
}

.sec-capabilities .intro-box {
  display: flex;
  align-items: center;
  justify-content: space-between
}

@media (max-width: 780px) {
  .sec-capabilities .intro-box {
    display: block
  }
}

.sec-capabilities .intro-box .left {
  width: 55.9047%
}

@media (max-width: 780px) {
  .sec-capabilities .intro-box .left {
    width: 100%
  }
}

.sec-capabilities .intro-box .left .ttl {
  color: #902AF3;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.6;
  margin-bottom: 20px
}

@media (max-width: 780px) {
  .sec-capabilities .intro-box .left .ttl {
    line-height: 1.5;
    font-size: 24px;
    margin-bottom: 10px
  }
}

.sec-capabilities .intro-box .left p {
  font-size: 16px;
  letter-spacing: .04em;
  line-height: 1.8
}

@media (max-width: 780px) {
  .sec-capabilities .intro-box .left p {
    font-size: 14px
  }
}

.sec-capabilities .intro-box .right {
  width: 41.4285%
}

@media (max-width: 780px) {
  .sec-capabilities .intro-box .right {
    margin: 30px auto 0;
    width: 95%
  }
}

.sec-capabilities .capabilities-list {
  padding-top: 84px;
  padding-bottom: 84px
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list {
    padding-top: 104px;
    padding-bottom: 50px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row {
    display: block;
    margin-bottom: 60px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row:last-child {
  margin-bottom: 0
}

.sec-capabilities .capabilities-list .capabilities-list-row .row-ttl {
  padding-left: 100px;
  position: relative;
  width: 33%
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .row-ttl {
    padding-left: 56px;
    width: 100%
  }
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .row-ttl br {
    display: none
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .row-ttl .ja {
  color: black;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.2;
  margin-bottom: 14px;
  display: inline-block
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .row-ttl .ja {
    font-size: 28px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .row-ttl .en {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.4
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .row-ttl .en {
    font-size: 16px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .row-ttl img {
  position: absolute;
  left: 0;
  top: -18px
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .row-ttl img {
    top: -22px;
    left: -15px;
    width: 76px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .content-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3px;
  gap: 40px 20px;
  width: 66%
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list {
    flex-direction: column;
    margin-top: 23px;
    gap: 20px;
    width: 100%
  }
}

  @media (max-width: 780px) {
    body.hue .function-card .header-ext-link::after{
        margin-top: 1.5px!important;
    }
  }


.sec-capabilities .capabilities-list .capabilities-list-row .content-list .item {
  cursor: pointer;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 6px 20px rgba(89, 89, 87, 0.25);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 16px 20px 20px;
  position: relative;
  width: calc(50% - 10px);
  cursor: pointer
}

@media only screen and (min-width: 781px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item:hover {
    box-shadow: rgba(89, 89, 87, 0.05) 0 2px 2px, rgba(89, 89, 87, 0.05) 0 4px 4px, rgba(89, 89, 87, 0.05) 0 8px 8px, rgba(89, 89, 87, 0.05) 0 16px 16px, rgba(89, 89, 87, 0.06) 0 20px 20px, rgba(89, 89, 87, 0.06) 0 20px 20px
  }
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item:hover .item-ttl{
    color: #902AF3
  }
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item:hover .plus {
    content: url("../../../hue/img/ai/plus_neg.svg");
    filter: none
  }
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item {
    padding: 10px 12px 52px;
    width: 100%
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .content-list .item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: 14px;
  height: 40px;
  background: linear-gradient(225deg, #00d3bc 0%, #0762dc 52%, #902af3 100%);
  border-radius: 0 0 11px 11px
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item:before {
    left: 12px;
    width: 12px;
    height: 29px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .content-list .item .item-ttl {
  color: black;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.4;
  padding-left: 20px;
  transition: .5s;

}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item .item-ttl {
    font-size: 18px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .content-list .item p {
  font-size: 16px;
  letter-spacing: .038em;
  line-height: 1.8;
  margin-top: 16px
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item p {
    font-size: 14px
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .content-list .item .img {
  margin-bottom: 32px;
  margin-top: 21px
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item .img {
    margin: 18px auto 0;
    width: calc(100% - 62px);
  }
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item .img img{
    width: 100%
  }
}

.sec-capabilities .capabilities-list .capabilities-list-row .content-list .item .plus {
  margin: 0 auto;
  position: absolute;
  right: 20px;
  bottom: 20px;
  transition: all 0.3s
}

@media (max-width: 780px) {
  .sec-capabilities .capabilities-list .capabilities-list-row .content-list .item .plus {
    right: 10px
  }
}

.sec-agent {
  padding: 0 0 120px
}

@media (max-width: 780px) {
  .sec-agent {
    padding: 0 0 80px
  }
}

.sec-agent .box {
  border: 2px solid transparent;
  padding: 40px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(78deg, #8a2be2 0%, #0762DC 17%, #076ADA 87%, #19C7B5 100%) border-box
}



@media (max-width: 780px) {
  .sec-agent .box {
    padding: 20px 20px 13px
  }
}

.sec-agent .sec-ttl {
  color: black;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.2;
  margin-bottom: 32px
}

@media (max-width: 780px) {
  .sec-agent .sec-ttl {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

.sec-agent .flex-box {
  display: flex
}

@media (max-width: 780px) {
  .sec-agent .flex-box {
    display: block
  }
}

.sec-agent .flex-box .item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}

@media (max-width: 780px) {
  .sec-agent .flex-box .item {
    position: relative
  }
}

@media (min-width: 781px) {
  .sec-agent .flex-box .item:first-child {
    border-right: 1px solid #595957;
    padding-right: 38px;
    width: 52%
  }
}

@media (max-width: 780px) {
  .sec-agent .flex-box .item:first-child {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 18px
  }
}

.sec-agent .flex-box .item:first-child img {
  margin-top: 16px
}

@media (min-width: 781px) {
  .sec-agent .flex-box .item:last-child {
    padding-left: 38px;
    width: 50%
  }
}

@media (max-width: 780px) {
  .sec-agent .flex-box .item:last-child {
    padding-top: 32px
  }
}

.sec-agent .flex-box .item:last-child img {
  margin-top: 26px
}

@media (max-width: 780px) {
  .sec-agent .flex-box .item:last-child img {
    margin-top: 46px
  }
}

.sec-agent .flex-box .item .ttl {
  color: black;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.4;
  margin-bottom: 0;
  width: 100%
}

@media (max-width: 780px) {
  .sec-agent .flex-box .item .ttl {
    position: relative;
    top: 5px;
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 0;
    margin-left: 67px;
    width: calc(100% - 62px)
  }
}

.sec-agent .flex-box .item p {
  font-size: 16px;
  letter-spacing: .04em;
  line-height: 1.8;
  width: calc(100% - 87px);
  margin-top: 18px
}

@media (max-width: 780px) {
  .sec-agent .flex-box .item p {
    margin-top: 22px;
    font-size: 14px;
    width: 100%
  }
}

@media (max-width: 780px) {
  .sec-agent .flex-box .item img {
    position: absolute;
    left: 0;
    top: -15px;
    width: 45px
  }
}

.sec-impact {
  background-color: #f8f8f8;
  padding-top: 120px;
  padding-bottom: 140px
}

@media (max-width: 780px) {
  .sec-impact {
    padding-top: 80px;
    padding-bottom: 170px
  }
}

.sec-impact .ttl {
  color: #902AF3;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.4;
  margin-bottom: 25px
}

@media (max-width: 780px) {
  .sec-impact .ttl {
    letter-spacing: .03em;
    font-size: 24px;
    margin-bottom: 17px;
    line-height: 1.4
  }
}

.sec-impact p {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.8
}

@media (max-width: 780px) {
  .sec-impact p {
    font-size: 14px
  }
}

.sec-impact p .margin {
  display: inline-block;
  margin-bottom: 28px
}
@media (max-width: 780px) {
  .sec-impact p .margin {
    margin-bottom: 0;
  }
}
.sec-impact .img-wrap {
  width: 100%;
  padding-left: 0;
  overflow: visible
}

@media (max-width: 780px) {
  .sec-impact .img-wrap {

    padding-left: 20px;
    padding-right: 20px;
    overflow: auto;
  }
    .sec-impact .img-wrap img {
      width: 100%;
  }
}
@media (max-width: 538px) {
  .sec-impact .img-wrap {
    padding-right: 0px;
  
  }
}

.sec-impact img {
  margin-top: 60px;
  width: 100%;
  height: auto;
  max-width: 1200px
}

@media (max-width: 780px) {
  .sec-impact img {
    margin-top: 30px;
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 538px) {
  .sec-impact img {
    margin-top: 30px;
    max-width: none;
    width: 520px!important
  }
}

.sec-product {
  padding: 110px 0 120px;
  position: relative
}

@media (max-width: 780px) {
  .sec-product {
    padding: 60px 0 80px
  }
}

.sec-product .inner .ttl {
  color: black;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -20px
}

@media (max-width: 780px) {
  .sec-product .inner .ttl {
    font-size: 24px
  }
}

.sec-product .inner .list {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 996px;
  width: calc(100% - 48px)
}

@media (max-width: 780px) {
  .sec-product .inner .list {
    gap: 14px;
    align-items: stretch
  }
}

.gray-bg {
  background-color: #f8f8f8
}

.sec-related-document {
  padding-top: 120px;
  padding-bottom: 40px
}

.c-download-lst .item:hover{
  .item__ttl{
    color: #902AF3;
  }
  .c-btn01 a:after, .c-btn01 .c-btn01-link:after{
    background-image: linear-gradient(128deg, #902AF3 50%, transparent 50%);
  }
  
}

@media (max-width: 780px) {
  .sec-related-document {
    padding-top: 80px;
    padding-bottom: 60px
  }
}

@media (max-width: 780px) {
  .sec-related-document .c-download-lst .item__label strong {
    padding: 3px 10px 3px 24px
  }
}

.sec-related-document .inner_1200 .tit-sec {
  color: black;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.2;
  margin-bottom: 43px
}

@media (max-width: 780px) {
  .sec-related-document .inner_1200 .tit-sec {
    font-size: 24px;
    margin-bottom: 20px
  }
}

@media (min-width: 781px) {
  .sec-related-document .inner_1200 .c-download-lst {
    gap: 24px
  }
}

.hue .function-card {
  background: #fff;
  border-radius: 10px;
  padding: 15px 10px 15px 15px;
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  position: relative;
  border: 1px solid #f2f2f2;
  min-height: 120px;
  width: calc((100% - 60px)/4)
}

.c-link a,
.c-link .c-link-hover {
  color: #902AF3
}

.hue .c-link.link-purple .c-link-hover.noChangeColor,
.hue .c-link.link-purple .c-link-hover.noChangeColor span {
  color: #902AF3
}

.hue .c-link.link-purple .c-link-hover.noChangeColor span:before,
.hue .c-link.link-purple .c-link-hover.noChangeColor span:after {
  border-color: #902AF3
}

.hue .function-card:hover {
  opacity: 1
}

.hue .function-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: 14px;
  height: 40px;
  background: linear-gradient(180deg, #902AF3 0%, #5F1AA4 100%);
  border-radius: 0 0 11px 11px
}

.hue .function-card.header-ext-link .card-sub::after {
    content: "";
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjUuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMyAxMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTMgMTE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTEuMSw0LjloMTAuM3YxLjJIMS4xYy0wLjQsMC0wLjYtMC4zLTAuNi0wLjZDMC41LDUuMiwwLjgsNC45LDEuMSw0LjlMMS4xLDQuOXoiLz4KPHBhdGggZD0iTTEyLjMsNmwtNC41LDQuMmMtMC4zLDAuMy0wLjcsMC4zLTEsMGMtMC4zLTAuMy0wLjMtMC43LDAtMWw0LTMuOGwtNC0zLjhjLTAuMy0wLjMtMC4zLTAuNywwLTFjMC4zLTAuMywwLjctMC4zLDEsMEwxMi4zLDUKCUMxMi42LDUuMywxMi42LDUuNywxMi4zLDZMMTIuMyw2eiIvPgo8L3N2Zz4K);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjUuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMyAxMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTMgMTE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTEuMSw0LjloMTAuM3YxLjJIMS4xYy0wLjQsMC0wLjYtMC4zLTAuNi0wLjZDMC41LDUuMiwwLjgsNC45LDEuMSw0LjlMMS4xLDQuOXoiLz4KPHBhdGggZD0iTTEyLjMsNmwtNC41LDQuMmMtMC4zLDAuMy0wLjcsMC4zLTEsMGMtMC4zLTAuMy0wLjMtMC43LDAtMWw0LTMuOGwtNC0zLjhjLTAuMy0wLjMtMC4zLTAuNywwLTFjMC4zLTAuMywwLjctMC4zLDEsMEwxMi4zLDUKCUMxMi42LDUuMywxMi42LDUuNywxMi4zLDZMMTIuMyw2eiIvPgo8L3N2Zz4K);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #595757;
    width: 13px;
    height: 11px;
    transform: rotate(-45deg);
    position: absolute;
    margin-left: 5px;
    margin-top: 3px;
}

#ai .function-card::before {
  background: linear-gradient(180deg, #C141EC 0%, #65217C 100%)
}

#business .function-card::before,
#data .function-card::before {
  background: linear-gradient(180deg, #6361E2 0%, #3D3B94 100%)
}

#cloud .function-card::before {
  background: linear-gradient(180deg, #606060 0%, #404040 100%)
}

.hue .function-card h3 {
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  line-height: 1.6;
  padding-left: 26px;
  line-break: strict
}

.hue .function-card:hover h3 {
  color: #902AF3;
  transition: all 0.3s ease
}

.hue .function-card p {
  font-size: 1.2rem;
  color: #555;
  font-weight: 400;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: break-word;
  margin-top: auto
}

.hue .sec-function-image-band {
  width: 100%;
  height: 260px;
  position: relative;
  z-index: 5;
  overflow: hidden
}

@media (max-width: 900px) {
  .hue .function-category-right {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
  }
  .hue .function-category-inner {
    flex-direction: column;
    gap: 30px
  }
  .hue .function-category-inner.is-joined .function-category-row {
    flex-direction: column;
    gap: 20px
  }
  .hue .function-category-left {
    flex: none;
    width: 100%
  }
}

@media (max-width: 768px) {
  .hue .function-category-right {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
  }
  .hue .function-card {
    padding: 12px;
    border-radius: 8px;
    min-height: 105px;
    height: 105px;
    min-width: auto;
    width: calc((100% - 15px)/2)
  }
  .hue .function-card::before {
    left: 12px;
    width: 12px;
    height: 29px;
    border-radius: 0 0 10px 10px
  }
  .hue .function-card h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-left: 20px;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 768px) and (max-width: 375px) {
  .hue .function-card h3 {
    font-size: 12px
  }
}

@media (max-width: 768px) {
  .hue .function-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    padding-left: 0;
    margin-top: auto
  }
}

@media (max-width: 768px) and (max-width: 780px) {
  .hue .function-card p {
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 0 12px
  }
}

@media only screen and (max-width: 768px) and (max-width: 780px) and (max-width: 375px) {
  .hue .function-card p {
    font-size: 10px;
    line-height: 1.5
  }
}

@media (max-width: 768px) {
  .hue .sec-function-image-band {
    width: 100%;
    height: auto
  }
  .hue .sec-function-image-band img {
    width: 100%
  }
}

#cases {
  padding-top: 0
}

@media (max-width: 780px) {
  .sec-pickup .c-link {
    margin-bottom: 30px
  }
}

@media (min-width: 781px) {
  .hue .sec-pickup {
    padding-bottom: 210px
  }
}

.gray-bg {
  background-color: #f8f8f8;
  padding-bottom: 180px
}

@media (max-width: 780px) {
  .gray-bg {
    padding-bottom: 0px
  }
}

.img-intro {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

.sec-cmn-intro {
  margin: 0
}

@media (max-width: 780px) {
  .sec-cmn-intro {
    margin-top: 10px
  }
}

.modal {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 999
}

.modal .modal-inner {
  background-color: white;
  border-radius: 10px;
  max-width: 996px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 83.375vh;
  width: calc(100% - 48px);
  overflow-y: auto;
  padding: 60px 106px;

}

@media (max-width: 780px) {
  .modal .modal-inner {
    height: auto;
    padding: 50px 20px 20px
  }
}

.modal .modal-close {
  margin: 0 auto;
  position: absolute;
  right: 40px;
  top: 40px;
  cursor: pointer
}

@media (max-width: 780px) {
  .modal .modal-close {
    right: 20px;
    top: 20px
  }
}

.modal .modal-ttl {
  color: black;
  font-weight: bold;
  font-size: 32px;
  letter-spacing: .04em;
  line-height: 1.2;
  margin-bottom: 20px
}

@media (max-width: 780px) {
  .modal .modal-ttl {
    font-size: 18px;
    margin-bottom: 13px
  }
}

.modal .modal-txt {
  font-size: 16px;
  letter-spacing: .04em;
  line-height: 1.8;
  margin-bottom: 40px
}

@media (max-width: 780px) {
  .modal .modal-txt {
    font-size: 13px;
    margin-bottom: 20px
  }
}

.modal .modal-img {
  width: 100%
}

/*# sourceMappingURL=maps/hue_ai.min.css.map */

.sec-capabilities .sec-ttl{
        top: -25px;
}
@media (max-width: 780px) {
  .sec-capabilities .sec-ttl {
    top: -20px;
  }
}


.c-lst-useful .ttl
 {
    padding: 0 19px;
    margin-top: 10px;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.5em;
    letter-spacing: .04em;
    font-weight: bold;
    color: #000;
    line-height: 28px;
    transition: 0.5s;
}
@media (max-width: 780px) {
    .c-lst-useful .ttl {
        font-size: 18px;
        font-size: 1.8rem;
    }
}

@media only screen and (min-width: 781px) {
    .c-lst-useful .item:hover .ttl {
        color: #8b46ff;
    }
}