@charset "UTF-8"; 

:root{
  /* === color === */
  --BG: #F7F7F7;
  --WH: #fff;

  /* gray */
  --Gray300: #F0F0F0;
  --Gray400: #DCDCDC;
  --Gray500: #C8C8C8;
  --Gray600: #B4B4B4;
  --Gray800: #787878;
  --Gray900: #646464;
  --Gray1000: #505050;
  --Gray1100: #3C3C3C;
  --Gray1200: #282828;
  --Gray1300: #141414;

  /* Blue */
  --Blue100: #F5F7F9;
  --Blue200: #F5FAFF;
  --Blue300: #EBF4FF;
  --Blue400: #DBEDFF;
  --Blue500: #8FBFFF;
  --Blue700: #0A64FA;
  --Blue800: #0452CF;

  /* Green */
  --Green300: #C5F9CA;
  --Green400: #ACF4BA;

  /* === font === */
  /* --dis-01: 3.75rem;
  --dis-02: 3.125rem;
  --dis-03: 2.5rem;
  --hd-02: 1.75rem;
  --hd-03: 1.625rem;
  --hd-04: 1.5rem;
  --hd-05: 1.25rem;
  --sub-hd-01: 1.125rem;
  --body-01: 0.875rem; */
  --dis-01: 3.125vw;
  --dis-02: 2.604vw;
  --dis-03: 2.083vw;
  --hd-01: 1.85vw;
  --hd-02: 1.458vw;
  --hd-03: 1.354vw;
  --hd-04: 1.25vw;
  --hd-05: 1.042vw;
  --sub-hd-01: 0.938vw;
  --body-01: 0.729vw;

  /* font width */
  --font-b: 700;
  --font-sb: 600;
  --font-m: 500;
  --font-r: 400;

  /* padding */
  --inner-padding: 150px 0;
  --btn-padding: 8px 16px;
  --card-padding: 24px;
}

/* ********* common css ********* */
html {
  font-size: 100%;
}
* {
  box-sizing: border-box;
  text-wrap: pretty;
}
body {
  width: 100%;
  height: 100vh;
  font-family: "Pretendard Variable" !important;
  font-size: 16  !important;
  font-weight: var(--font-r) !important;
  line-height: 1.5 !important;
  color: var(--Gray1300);
  background-color: var(--WH);
}
section {
  background-color: var(--WH);
}
section .inner {
  /* width: 1440px; */
  width: 72.5000vw;
  margin: auto;
  box-sizing: border-box;
}
header, footer {
  width: 100%;
  height: 125px;
  background-color: var(--Gray600);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
footer {
  height: 227px;
}

/* logo */
img {
  width: 100%;
  display: block;
}
/* button */
button {
  font-family: "Pretendard Variable";
  color: var(--WH);
  font-size: var(--sub-hd-01);
  padding: var(--btn-padding);
  border-radius: 40px;
  font-weight: var(--font-m);
  background: var(--Gray1200);
  cursor: pointer;
  border: none;
  border: 1px solid var(--Gray1300);
  transition: 0.25s;
  margin-left: 10px;
  text-wrap: nowrap;
}
button:hover {
  background: var(--Gray1300);
}
button.btnline {
  color: var(--Gray1300);
  padding: var(--btn-padding);
  border: 1px solid var(--Gray1300);
  background: var(--WH);
  border-radius: 40px;
}
button.btnline:hover {
  color: var(--Gray1300);
  background: var(--Gray400); 
}
button.btn {
  color: var(--WH);
  border: 1px solid var(--Gray1300);
  background: #388EFF;
}
button.btn:hover {
  color: var(--WH);
  background: var(--Blue700);
}
button.btnbl {
  color: var(--Blue800);
  background: var(--Blue400);
  font-size: 0.9722vw;
  font-weight: 600;
  border: none;
}
button.btnbl:hover {
  color: var(--WH);
  background: var(--Blue800);
  border: none;
}
button.btnwh {
  color: var(--Blue800);
  background: var(--WH);
  border: none;
  font-size: 0.9722vw;
  font-weight: 600;
}
button.btnwh:hover {
  color: var(--WH);
  background: var(--Blue800);
  border: none;
}

/* badge */
.badge {
  font-family: "Pretendard Variable";
  padding: 2px 20px;
  border-radius: 8px;
  text-transform: capitalize;
  background: var(--Blue400);
  color: var(--Blue700);
  font-size: var(--dis-01);
  font-weight: var(--font-sb);
}

/* card */
.card-list .card {
  cursor: pointer;
  transition: 0.25s;
}
.card-list .card:hover {
  box-shadow: 0 0 20px #3c3c3c23;
}

/* section .inner */
section .inner {
  padding: var(--inner-padding)
}
section .inner h2 {
  font-size: var(--dis-03);
  margin-bottom: 100px;
}
section .inner h2 b {
  font-weight: var(--font-b);
}

/* ********* section.intro ********* */
section.intro {
  width: 100%;
  /* height: 100%; */
  height: 923px;
  position: relative;
  background: url(/images/intoro.png) no-repeat;
  background-size: cover;
  background-position: right 20% bottom;
  /* background-color: #001435; */
}
section.intro .photo {
  width: 852px;
  position: absolute;
  right: 5%;
  bottom: 9%;
}
section.intro .inner {
  font-size: var(--dis-01);
  font-weight: 700;
  padding-top: 200px;
  padding-bottom: 440px;
  color: var(--Blue400);
}
section.intro .inner .badge {
  font-size: 1.1111vw;
  padding: var(--2px, 2px) var(--8px, 8px);
  border-radius: var(--4px, 4px);
  margin-left: 10px;
  background-color: var(--Blue700);
  color: var(--WH);
}

/* ********* section.banner ********* */
section.banner .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  /* padding: 100px; */
}
section.banner .title  {
  flex: 1;
}
section.banner .title h2 {
  font-size: var(--dis-01);
  font-weight: var(--font-b);
  color: var(--Blue700);
  margin-bottom: 0;
  line-height: 1.3;
  width: 100%;
}
section.banner .title b {
  font-size: var(--dis-03);
  color: var(--Gray1300);
}
section.banner .desc {
  color: var(--Gray1100);
  font-size: var(--hd-03);
  font-weight: 500;
  flex: 2;
}

/* section.ani-banner */
section.ani-banner {
  background-color: rgba(255, 0, 0, 0.329);
}

/* ********* section.paper ********* */
section.paper {
  background-color: var(--WH);
}
section.paper .items { 
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2vw;
}
section.paper .item {
  width: calc(100%/4);
  border-radius: var(--24px, 24px);
  border: var(--2px, 2px) solid var(--Gray500);
  background: rgba(255, 255, 255, 0.50);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--card-padding);
  gap: 24px;
  min-height: 20vw;
  flex-wrap: nowrap;
  align-self: stretch;
}
section.paper .item .icon {
  width: 95px;
  height: 110px;
}
section.paper .item .item-title {
  color: var(--Blue800);
  font-size: var(--hd-05);
  font-weight: var(--font-b);
}
section.paper .item .item-desc {
  color: var(--Gray1100);
  font-size: var(--hd-06);
  /* min-height: 150px; */
  min-height: 5.4167vw;
}
section.paper .comment {
  text-align: center;
  margin-top: 80px;
}
section.paper .comment h2 {
  margin: 0;
}

/* ********* section.table ********* */
section.table {
  text-align: center;
  position: relative;
  background-color: var(--Blue100);
}
section.table .icon {
  width: 66px;
  height: 65px;
  margin: auto;
}
section.table p {
  font-size: var(--hd-04);
  font-weight: var(--font-m);
  padding: 40px;
}
section.table .table-box {
  width: 50vw;
  margin: auto;
}


/* ********* section.movie ********* */
section.video {
  background-color: var(--Blue300);
  text-align: center;
}
section.video .inner {
  padding: 100px 0;
}
section.video:nth-child(even) {
  background-color: var(--wh);
}
section.video .title {
  font-weight: var(--font-sb);
}
section.video .title h2 {
  font-size: var(--dis-01);
}
section.video h3 {
  text-align: left;
}
section.video h3 span {
  display: block;
  font-size: var(--hd-02);
}
section.video  h2 {
  /* background-color: rgba(255, 0, 0, 0.329); */
}
section.video .card .btn-box {
  text-align: right;
}
/* video-box */
section.video .video-box {
  width: 100%;
  /* height: 40vw; */
  /* background-color: rgba(255, 0, 0, 0.329); */
}
section.video .card .video-box,
section.video .video-box > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* content-box */
section.video .content-box {
  padding-top: 100px;
}
section.video .content-box .items {
  display: flex;
  gap: 45px;
}
section.video .content-box .items .item {
  flex: 1;
}

/* card */
section.video .card {
  background-color: var(--Gray1200);
  color: var(--WH);
  border-radius: 24px;
  padding: 3vw 2vw;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--hd-04);
}
section.video .card h3 {
  color: var(--Blue400);
  font-size: var(--dis-03);
  font-weight: var(--font-sb);
}
section.video .card .desc {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: end;
  height: 110px;
  text-align: left;
}
section.video .card .desc .tit {
  padding-left: 0;
}
section.video .card .desc ul {
  text-align: left;
  list-style: disc;
  padding-left: 25px;
}

/* list */
section.video .list {
  font-size: var(--sub-hd-01);
  padding: 50px 0px 50px 60px;
  display: flex;
  flex-direction: column;
  gap: 3vw;
}
section.video .list .tit {
  font-size: var(--hd-04);
  color: var(--Blue800);
  font-weight: var(--font-b);
  text-align: left;
  position: relative;
  margin-bottom: 20px;
}
section.video .list .tit::before {
  content: attr(data-num);
  position: absolute;
  width: 50px;
  height: 50px;
  color: var(--Gray500);
  left: -40px;
  top: 3%;
  font-size: var(--hd-05);
}
section.video .list.btn .tit {
  display: flex;
  justify-content: space-between;
}
section.video .list ul {
  list-style-type: disc;
  text-align: left;
  padding-left: 0px;
}
section.video .list ul li {
  color: var(--Gray1000);
}

/* content */
section.video .content .item {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
section.video .content .item:nth-child(even) {
  padding: 155px 0;
}
/* section.video .content .item:last-child {
  padding: 0;
} */

section.video .content .item:nth-child(even) .photo  {
  order: 1;
}
section.video .content .item:nth-child(even) .desc  {
  order: 0;
  padding: 0 20px 20px 20px;
}
section.video .content .item .photo {
  position: relative;
}
section.video .content .item .photo > div {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
  border-radius: var(--24px, 24px);
  width: 100%;
  min-width: 13.8889vw;
  max-width: 48.9583vw;
  height: 22vw;
  overflow: hidden;
}
section.video .content .item .photo::after {
  position: absolute;
  content: '';
  bottom: -6%;
  right: 5%;
}
section.video .content .item:nth-child(1) .photo::after {
  background: url(/images/structurer_icon.png);
  background-size: cover;
  width: 98px;
  height: 122px;
}
section.video .content .item:nth-child(2) .photo::after {
  background: url(/images/ts_expert_icon.png);
  background-size: cover;
  width: 94px;
  height: 123px;
}
section.video .content .item:nth-child(3) .photo::after {
  background: url(/images/compareX_icon.png);
  background-size: cover;
  width: 150px;
  height: 101px;
  left: 5%;
}
section.video .content .item:nth-child(4) .photo::after {
  background: url(/images/generator_icon.png);
  background-size: cover;
  width: 111px;
  height: 120px;
}
section.video .content .item .desc {
  border-bottom: 1px solid var(--Gray400);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-left: 30px;
  width: 570px;
}
section.video .content .item .desc h3 {
  font-size: var(--dis-03);
  font-weight: var(--font-sb);
  color: var(--Blue800)
}
section.video .content .item .desc h4 {
  font-size: var(--hd-04);
  font-weight: var(--font-sb);
}
section.video .content .item .desc ul {
  list-style: disc;
  padding: 2vw 1.3vw;
  font-size: var(--hd-05);
  color: var(--Gray1000)
}

/* ********* section.card-list ********* */
section.card-list.business h2 {
  text-align: center;
}
section.card-list .card-box {
  display: flex;
  justify-content: start;
  gap: 44px;
  flex-wrap: wrap;
}
section.card-list .card {
  width: calc((100%/3) - 32px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--Gray400);
  min-width: 163px;
  max-width: 438px;
}
section.card-list .card .photo {
  width: 100%;
  height: 310px;
  background-color: var(--WH);
}
section.card-list .card .photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.card-list.business .card .tit {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
section.card-list .card .tit {
  padding: 24px 16px;
  background-color: var(--BG);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--Gray400);
}
section.card-list .card .tit h3 {
  font-size: var(--hd-04);
  font-weight: var(--font-sb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
section.card-list .card .tit span {
  color: var(--Gray1000);
}
section.card-list.event {
  background-color: var(--Blue100);
}

section.logo-list {
  overflow: hidden;
  width: 100%;
  padding-bottom: 100px;
}
section.logo-list .logo-box {
  display: flex;
  gap: 50px;
  width: max-content;
  animation: scroll 20s linear infinite;
}
section.logo-list .logo-img {
  width: 8vw;
}
@keyframes scroll {
  0% {
    transform: translateX(0%); /* 처음에는 오른쪽 끝에 위치 */
  }
  100% {
    transform: translateX(calc(-100% / 2)); /* 마지막에는 왼쪽 끝에 위치 */
  }
}

.news, section.card-list.business {
  position: relative;
}
.news::before,
section.card-list.business::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat url(/images/new_bg_bl.svg);
  top: 0;
  left: 0;
  z-index: -1;
}
.news::after,
section.card-list.business::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat url(/images/new_bg_gr.svg);
  background-position: right bottom;
  bottom: 0;
  right: 0;
  z-index: -1;
}
section.event .inner h2 {
  margin-bottom: 30px;
}
section.event .tab-box {
  margin-bottom: 30px;

}
section.event .tab-box a {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  color: var(--Gray600);
  text-decoration: none;
  margin-right: 60px;
}
section.event .tab-box a.active {
  color: var(--Gray1200);
}
/* short-banner */
section.short-banner {
  background-color: var(--Blue200);
  position: relative;
  z-index: 1;
}
section.short-banner::before {
  position: absolute;
  content: '';
  background-image: url(/images/w.png);
  background-repeat: no-repeat;
  background-position: top 65% right;
  background-size: cover;
  width: 809px;
  height: 100%;
  opacity: 0.07;
  top: 50%;
  right: -18%;
  transform: translate(-50%, -50%);
}
section.short-banner .inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  z-index: 2;
  position: relative;
}
section.short-banner .text {
  display: flex;
  align-items: end;
  font-size: var(--dis-03);
  font-weight: var(--font-sb);
  gap: 10px;
}
section.short-banner .logo {
  width: 338px;
  height: 126px;
}