@charset "utf-8";

/* visual 스타일 */
.sec-visual .text-area {
  color: var(--color-fff);
}

.sec-visual .text-area h3 {
  font-size: max(28px, 2.916667vw);
  font-family: "JourneyItself-Regular";
}

.sec-visual .text-area p {
  font-size: max(16px, 1.145833vw);
  line-height: max(20px, 1.666667vw);
}

.sec-visual video {
  object-fit: cover;
  vertical-align: top;
}

.sec-visual .video-player {
  background: url("../image/icon_button_stop.svg") no-repeat center / 24px 24px;
}

.sec-visual .video-player.active {
  background-image: url("../image/icon_button_play.svg");
}

@media (max-width: 1023px) {
  .sec-visual .text-area h3 {
    font-size: 40px;
    margin-bottom: 16px;
  }
  
  .sec-visual .text-area p {
    line-height: 1.7;
  }
}

@media (max-width: 767px) {
  .sec-visual .text-area h3 {
    font-size: 30px;
  }
  
  .sec-visual .text-area p {
    line-height: 1.3;
  }
}

/* highlight 스타일 */
.sec-highlight {
  overflow: hidden;
}

.sec-highlight .contents-area {
  border-radius: 12px;
  background-color: #e5e9f1;
}

.sec-highlight .text-area em {
  color: #000;
  font-size: 1.3021vw;
  font-style: normal;
}

.sec-highlight .text-area strong {
  color: #5e2bb8;
  font-size: 3.7500vw;
}

.sec-highlight .text-area span {
  font-size: 1.0417vw;
}

.sec-highlight .brand-2023 .img-wrap {
  perspective: 52.0833vw;
  background-color: #fff;
  /* transform-style: preserve-3d; */
}

.sec-highlight .brand-2023 img {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  /* transform-style: preserve-3d; */
}

.sec-highlight .stats-area .year-area {
  perspective: 52.0833vw;
  transition: transform 1.2s;
  transform-style: preserve-3d;
}

.sec-highlight .stats-area .data-year {
  background-color: #08d1d9;
}

.sec-highlight .stats-area .data-year {
  transform: rotateX(-180deg);
  transform-style: preserve-3d;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  transition-timing-function: linear;
  backface-visibility: hidden;
}

.sec-highlight .stats-area .data-year.active {
  transform: rotateX(0);
  transform-origin: center top;
}

.sec-highlight .stats-area .data-year::after {
  background-color: #fff;
  opacity: 0.3;
}

.sec-highlight .stats-area .data-year em {
  color: #106c80;
}

.sec-highlight .stats-area .data-year strong {
  color: #fff;
}

.sec-highlight .stats-area .animation {
  perspective: 52.0833vw;
  background-color: #fff;
}

.sec-highlight .stats-area .animation .data-user {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.sec-highlight .metrics-area .animation {
  perspective: 52.0833vw;
  background-color: #fff;
}

.sec-highlight .metrics-area .animation .data-user {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.sec-highlight .metrics-area .data-growth {
  background: url("../image/highlight_graph.png") no-repeat right 0 / 17.7083vw auto #e5e9f1;
}

.sec-highlight .metrics-area .animation .data-growth {
  transform: rotateX(-180deg);
  backface-visibility: hidden;
}

.sec-highlight .user-member {
  perspective: 52.0833vw;
  background-color: #fff;
}

.sec-highlight .user-member .card-reverse {
  transform: rotateX(-180deg);
  backface-visibility: hidden;
}

.sec-highlight .user-member .bg {
  background: url("../image/highlight_card.jpg") no-repeat 32px / 7.0833vw auto #e5e9f1;
}

.sec-highlight .growth {
  perspective: 52.0833vw;
  background-color: #fff;
}

.sec-highlight .growth .bg {
  background: url("../image/highlight_since.png") no-repeat center / 23.3333vw auto #D7D8DF;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.sec-highlight .esg {
  perspective: 52.0833vw;
  background-color: #fff;
}

.sec-highlight .esg .bg {
  background: url("../image/highlight_esg.png") no-repeat center / 23.3333vw auto #e5e9f1;
}

.sec-highlight .esg .bg {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  transition-timing-function: linear;
}

.sec-highlight .esg .bg.active {
  transform: rotateY(0);
}

.sec-highlight .operate .data-year {
  background-color: #6940C3;
}

.sec-highlight .operate {
  perspective: 52.0833vw;
  transition: transform 1.2s;
  transform-style: preserve-3d;
}

.sec-highlight .operate .data-year {
  transform: rotateX(-180deg);
  transform-style: preserve-3d;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  transition-timing-function: linear;
  backface-visibility: hidden;
}

.sec-highlight .operate .data-year.active {
  transform: rotateX(0);
  transform-origin: center top;
}

.sec-highlight .operate .data-year::after {
  background-color: #fff;
  opacity: 0.3;
}

.sec-highlight .operate .data-year em,
.sec-highlight .operate .data-year strong {
  color: #fff;
}

.sec-highlight .ccm .img-wrap {
  perspective: 52.0833vw;
  background-color: #fff;
}

.sec-highlight .ccm img {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  transition-timing-function: linear;
}

.sec-highlight .ccm img.active {
  transform: rotate(0);
}

.sec-highlight .bar-area {
  background-color: #C1C7CD;
  border-radius: 999px;
}

.sec-highlight .bar-element {
  background-color: #878D96;
  border-radius: 52.0313vw;
}

.sec-highlight .bar-inner b {
  color: #697077;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1023px) {
  .sec-highlight .text-area em {
    font-size: 20px;
  }

  .sec-highlight .text-area strong {
    font-size: 46px;
  }

  .sec-highlight .text-area span {
    font-size: 18px;
  }

  .sec-highlight .metrics-area .data-growth {
    background-size: 262px auto;
  }

  .sec-highlight .user-member .bg {
    background-size: 110px auto;
  }

  .sec-highlight .growth .bg {
    background-size: calc(100% - 40px);
  }

  .sec-highlight .esg .bg {
    background-size: calc(100% - 40px);
  }
}

@media (max-width: 767px) {
  .sec-highlight .text-area em {
    font-size: 18px;
  }

  .sec-highlight .text-area strong {
    font-size: 36px;
  }

  .sec-highlight .text-area span {
    font-size: 16px;
  }

  .sec-highlight .bar-inner b {
    font-size: 14px;
  }
}

/* business 스타일 */
.sec-business .item .animation {
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.sec-business .item:hover .animation {
  transform: rotateY(180deg);
}

.sec-business .item-obverse,
.sec-business .item-verso {
  backface-visibility: hidden;
}

.sec-business .item-obverse strong {
  color: #fff;
  font-size: max(20px, 1.875vw);
  font-family: "JourneyItself-Regular";
  font-weight: 500;
}

.sec-business .item-obverse img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.sec-business .item-verso {
  border-radius: 14px;
  transform: rotateY(180deg) translateZ(0.1px);
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: calc(max(1.98px, 0.1953125vw) * -1) calc(max(1.98px, 0.1953125vw) * -1) max(79.2px, 7.8125vw) 0 rgba(207, 200, 219, 0.7);
}

.sec-business .item-verso p {
  font-size: max(14px, 1.146vw);
  line-height: 1.5;
  font-family: "Pretendard-Regular";
}

.sec-business .item-verso dfn {
  color: #5e2bb8;
  font-size: max(20px, 1.875vw);
  font-weight: 500;
  font-family: "JourneyItself-Regular";
  font-style: normal;
}

@media screen and (max-width: 1023px) {
  .sec-business .item:hover .animation {
    transform: rotateY(0deg);
  }

  .sec-business .item-obverse,
  .sec-business .item-verso {
    backface-visibility: visible;
  }

  .sec-business .item-obverse {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
  }

  .sec-business .item-verso {
    transform: none;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
  }

  .sec-business .item-verso p {
    color: #343A3F;
    font-size: 15px;
  }

  .sec-business .item-verso .link-more {
    font-size: 16px;
  }
}

@media screen and (max-width: 782px) {
  .sec-business .title-area h2 {
    font-size: 18px;
  }

  .sec-business .title-area p {
    font-size: 30px;
  }

  .sec-business .inner {
    overflow: hidden;
  }
}

/* global 스타일 */
.sec-global .text-wrap .link-more::after {
  background-size: 8px 8px;
}

.sec-global .count-item {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0.625vw;
  box-shadow: max(3.96px, 0.390625vw) max(7.92px, 0.78125vw) max(9.24px, 0.9114583333vw) 0px rgba(0, 0, 0, 0.06);
}

.sec-global .count-item .count-text {
  color: #697077;
  font-size: max(9.24px, 0.9114583333vw);
}

.sec-global .count-area .count {
  color: #5e2bb8;
  font-size: max(26.4px, 2.6041666667vw);
  font-weight: 700;
}

.sec-global .global-coordinate img {
  vertical-align: top;
}

@media screen and (max-width: 1023px) {
  .sec-global .title-area h3 {
    font-size: 20px;
  }

  .sec-global .title-area p {
    font-size: 38px;
  }

  .sec-global .count-item {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: max(3.96px, 0.390625vw) max(7.92px, 0.78125vw) max(9.24px, 0.9114583333vw) 0px rgba(0, 0, 0, 0.06);
  }

  .sec-global .count-item .count {
    color: #5e2bb8;
    font-size: 36px;
    font-weight: 700;
  }

  .sec-global .count-item .count-area {
    font-size: 36px;
  }

  .sec-global .count-item .count-text {
    color: #697077;
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .sec-global .title-area h2 {
    font-size: 18px;
  }

  .sec-global .title-area p {
    font-size: 28px;
  }

  .sec-global .count-item {
    background-color: rgba(255, 255, 255, 0.7);
  }

  .sec-global .count-item .count {
    font-size: 28px;
  }

  .sec-global .count-item .count-text {
    font-size: 14px;
  }
}

/* esg 스타일 */
.sec-esg .title-area h3,
.sec-esg .title-area p,
.sec-esg .title-area .link-more {
  color: var(--color-fff);
}

.sec-esg .desc-area p,
.sec-esg .swiper-control-text button {
  font-family: "Pretendard-Regular";
  font-weight: normal;
}

.sec-esg .title-area p {
  font-size: max(29.04px, 2.8645833333vw);
}

.sec-esg .desc-area p {

  font-size: max(11.88px, 1.171875vw);
}

.sec-esg .item img {
  object-fit: cover;
  vertical-align: top;
}

@media screen and (max-width: 1023px) {

}

/* people 스타일 */
.sec-people {
  background-color: #f2f4f8;
}

.sec-people .people-contents .people {
  overflow: hidden;
}

.sec-people .people-contents .people,
.sec-people .people-contents .area {
  border-radius: 0.625vw;
}

.sec-people .people-contents .interview,
.sec-people .people-contents .bgc {
  border: 1px solid transparent;
  transition: border 0.5s ease;
}

.sec-people .people-contents .interview:hover,
.sec-people .people-contents .bgc:hover {
  border: 1px solid #5e2bb8;
}

.sec-people .text-area em {
  font-size: max(8.58px, 0.8463541667vw);
  font-weight: 700;
  font-style: normal;
  border-radius: 999px;
  background-color: #fff;
}

.sec-people .people .link-more.black::after,
.sec-people .area .link-more.black::after,
.sec-people .area .link-more.white::after {
  background-size: 0.416667vw;
}

.sec-people .people {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec-people .people .link-more {
  padding: max(15.84px, 1.5625vw) max(21.12px, 2.0833333333vw) max(18.48px, 1.8229166667vw);
  color: #fff;
  background-color: rgba(81, 81, 81, 0.25);
  backdrop-filter: blur(max(7.92px, 0.78125vw));
}

.sec-people .people em {
  color: #5e2bb8;
}

.sec-people .people dl {
  font-size: max(9.24px, 0.9114583333vw);
}

.sec-people .people dt {
  border-right: 1px solid #fff;
}

.sec-people .people .desc {
  font-size: max(18.48px, 1.8229166667vw);
  font-weight: 700;
  font-family: "Pretendard-Bold";
}

.sec-people .interview {
  background-color: #08d1d9;
}

.sec-people .interview .text-area p {
  color: #fff;
  font-size: max(15.84px, 1.5625vw);
}

.sec-people .bgc {
  background-color: #fff;
}

.sec-people .area dt {
  color: #5e2bb8;
  font-size: max(15.84px, 1.5625vw);
  font-family: "JourneyItself-Regular";
}

.sec-people .area dd {
  color: #121619;
  font-size: max(10.56px, 1.0416666667vw);
}

@media screen and (max-width: 1023px) {
  .sec-people .text-area em  {  
    color: #fff;
    font-size: 14px;
    background-color: #5e2bb8;
  }

  .sec-people .people-contents .people,
  .sec-people .people-contents .area {
    border-radius: 12px;
  }

  .sec-people .people .link-more {
    backdrop-filter: initial;
    background-color: #c9cbce;
  }

  .sec-people .people dl {
    font-size: 16px;
  }

  .sec-people .people .desc {
    font-size: 26px;
  }

  .sec-people .area dt {
    font-size: 22px;
  }

  .sec-people .area dd {
    font-size: 16px;
  }

  .sec-people .people .link-more.black::after,
  .sec-people .area .link-more.black::after,
  .sec-people .area .link-more.white::after {
    background-size: auto;
  }

  .sec-people .interview .text-area em {
    color: #08d1d9;
    background-color: #fff;
  }
  
  .sec-people .interview .text-area p {
    font-size: 22px;
    line-height: 1.3;
  }
}

/* news 스타일 */
.sec-news .list img {
  vertical-align: top;
  border-radius: 12px;
}

.sec-news .item-text em {
  font-size: 0.833333vw;
  font-style: normal;
}

.sec-news .item-text em.company {
  color: #5e2bb8;
}

.sec-news .item-text em.job {
  color: #08d1d9;
}

.sec-news .item-text em.brand {
  color: #5e2bb8;
}

.sec-news .item-text p {
  font-size: 1.354167vw;
  font-family: "Pretendard-Bold";
}

.sec-news .item-text span {
  color: #878d96;
  font-size: 0.833333vw;
}

@media screen and (max-width: 1023px) {
  .sec-news .list img {
    border-radius: 1.173021vw;
  }

  .sec-news .item-text em {
    font-size: 14px;
  }

  .sec-news .item-text p {
    font-size: 20px;
  }

  .sec-news .item-text span {
    font-size: 14px;
  }
}