@charset "UTF-8";

/*** main ********************************/
/* hero-video */
.hero-video-area {position: relative;width: 100%;max-width: 100rem;}
.hero-video-area .hero-video {width: 100%;height: auto;display: block;background: #FFF;box-shadow: 0 16px 48px 0 rgba(148, 148, 148, 0.25);padding: 2rem;}
.hero-video-area .play-btn {position: absolute;inset: 0; /* top:0; right:0; bottom:0; left:0 */border: none;background: transparent;cursor: pointer;z-index: 2;display: flex;align-items: center;justify-content: center;}
.hero-video-area .play-icon {width: 8rem;height: 8rem;border-radius: 50%;background: rgba(0, 0, 0, 0.6);position: relative;transition: 0.2s;}
.hero-video-area .play-btn:hover .play-icon {transform: scale(1.1);}
.hero-video-area .play-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-left: 2.2rem solid #fff;
  border-top: 1.4rem solid transparent;
  border-bottom: 1.4rem solid transparent;
}
.hero-video-area.playing .play-btn {display: none;}

/* main-visual */
.main-visual {position: relative;overflow: hidden;}
.main-visual::before {content: '';display: block;position: absolute;width: 74.1rem;height: 67.1rem;border-radius: 74.1rem;background: radial-gradient(51.27% 51.27% at 47.82% 45.26%, rgba(179, 72, 250, 0.16) 36.06%, rgba(97, 65, 248, 0.00) 89.42%);
  left: 50%;top: -37.2rem;transform: translateX(calc(-50% - 6.25rem));}
.main-visual::after {content: '';display: block;position: absolute;width: 86.5rem;height: 75.8rem;border-radius: 86.5rem;background: radial-gradient(51.27% 51.27% at 47.82% 45.26%, rgba(67, 99, 255, 0.16) 29.81%, rgba(97, 65, 248, 0.00) 91.83%);
  left: 50%;top: -48rem;transform: translateX(calc(-50% + 15.75rem));}
.main-visual .inner {padding: 5.3rem 0 5.9rem;}
.main-visual .visual-logo {position: relative;padding-top: 21.4rem;}
.main-visual .visual-logo .app-icon {position: absolute;top: -4.5rem;left: 51%;transform: translateX(-50%);animation: bounceAni 2.6s ease-in-out infinite;}
@keyframes bounceAni {
  0% {transform: translateX(-50%) translateY(0);}
  50% {transform: translateX(-50%) translateY(3rem);}
  95% {transform: translateX(-50%) translateY(0);}
  100% {transform: translateX(-50%) translateY(0);}
}
.main-visual .visual-logo .logo-ani {position: relative;width: 69.4rem;height: 14.8rem;background: url(../images/XpilotAI_ai_bg.png) no-repeat center / contain;margin: auto;z-index: -1;}
.main-visual .visual-logo .logo-ani::after {content: '';display: block;position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../images/XpilotAI_gray.png) no-repeat right top / auto;background-color: #FFF;animation: logoAni 1s linear forwards;}
@keyframes logoAni {
  0% {width: 100%;}
  100% {width: 0%;}
}
.main-visual .title-area {padding: 4.2rem 0 0;}
.main-visual .title-area .title {color: var(--navy, #02176A);text-align: center;font-size: 4.8rem;font-weight: 700;}
.main-visual .title-area .text {color: var(--navy, #02176A);text-align: center;font-size: 2rem;font-weight: 400;line-height: 180%;margin-top: 1.9rem;}
.main-visual .title-area .text b {font-weight: 700;}
.main-visual .btn-area {position: relative;display: flex;justify-content: center;align-items: center;column-gap: 1.6rem;padding-bottom: 18.5rem;margin-top: 4.5rem;}
.main-visual .btn-area::before {content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);
    display: block;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--navy, #02176A);}
.main-visual .btn-area::after {content: '';position: absolute;bottom: 0.5rem;left: 50%;transform: translateX(-50%);
    display: block;width: 0.1rem;height: 18rem;  background: linear-gradient(to top,#02176A 26%,rgba(255, 255, 255, 0) 86%);}
.main-visual .btn-area .btn {width: 20rem;padding: 2rem;text-align: center;font-size: 1.8rem;font-weight: 700;line-height: 100%;border-radius: 10rem;}


/* main-cont1 */
.main-cont1 .sec-title {color: var(--navy, #02176A);text-align: center;font-size: 5.6rem;font-weight: 350;line-height: 100%;padding-bottom: 4.5rem;}
.main-cont1 .sec-title b {font-weight: 900;}

/* sticky-tabs */
.sticky-tabs {width: 79.2rem;}
.sticky-tabs ul {max-width: 79.4rem;height: 7.2rem;column-gap: 1.2rem;padding: 1.1rem;}
.sticky-tabs ul li {flex-shrink: 0;}
.sticky-tabs ul li a {width: 24.8rem;}
.sticky-tabs ul li a > span {font-size: 1.7rem;}

.scroll-contents {padding-bottom: 12.5rem;}
.ai-agent-con {display: flex;column-gap: 2rem;max-width: 120rem;padding-top: 8.8rem;margin: 0 auto;}
.ai-agent-con h4.title {color: var(--ai_purple, #7748F4);font-size: 4.2rem;font-weight: 400;margin-bottom: 5.6rem;}
.ai-agent-con h4.title b {color: var(--navy_txt, #333F54);font-weight: 900;}
.desc-list li {position: relative;color: var(--navy_txt, #333F54);font-size: 1.7rem;font-weight: 500;line-height: 4rem;word-break: keep-all;padding-left: 1.3rem;}
.desc-list li::before {content: '';position: absolute;left: 0;top: 1.7rem;display: block;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem; background-color: var(--ai_purple, #7748F4);}
.desc-list li b {color: var(--ai_purple, #7748F4);font-weight: 500;}

#aiAgent01 .text-area {padding-top: 13.8rem;}
#aiAgent01 .img-area {flex-shrink: 0;display: inline-flex;justify-content: center;align-items: center;max-width: 100%;width: 64rem;height: auto;border-radius: 1.6rem;background: var(--gray_6, #F7F7F7);}
#aiAgent02 .text-area {order: 1;padding-top: 10.8rem;}
#aiAgent02 .img-area {order: 0;}
#aiAgent03 {flex-direction: column;}

.employee-area {display: flex;column-gap: 0.8rem;justify-content: center;overflow: auto;}
.employee-area .item a {transition: 0.2s;position: relative;display: block;width: 23.3rem;height: 35.2rem;border-radius: 1.6rem;background: var(--hover_gray, #F9F9F9);border: 1px solid transparent;}
.employee-area .item a .text {color: var(--navy_txt, #333F54);font-size: 1.5rem;font-weight: 500;padding: 0 1.6rem 0 3rem;}
.employee-area .item a .icon {transition: 0.2s;position: absolute;right: 4rem;bottom: 3rem;}
.employee-area .item .title {display: flex;justify-content: space-between;align-items: center;padding: 5.2rem 3rem 2rem;}
.employee-area .item .title h5 {transition: 0.2s;color: var(--navy, #02176A);font-size: 2.2rem;font-weight: 700;}

.arrow path {stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;fill: none;}
.arrow .head, .arrow .shaft {stroke: var(--navy, #02176A);}
.arrow .shaft {stroke-dasharray: 35;stroke-dashoffset: 15;transition: stroke-dashoffset 0.3s ease;}

/* hover */
.employee-area .item a:hover {border: 1px solid #DBD5EA;background: var(--bg_purple, #F8F7FD);}
.employee-area .item a:hover .title h5 {color: var(--ai_purple, #7748F4);}
.employee-area .item a:hover .icon {bottom: 3.8rem;}
.employee-area .item a:hover .arrow .head, .employee-area .item a:hover .arrow .shaft {stroke: var(--ai_purple, #7748F4);}
.employee-area .item a:hover .arrow .shaft {stroke-dashoffset: 0;}


/* main-cont2 */
.main-cont2 {position: relative;margin: 0 auto;width: 100%;}
.main-cont2::before {content: '';display: block;position: absolute;width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);object-fit: cover;opacity: 0;clip-path: inset(0 10% 0 10%);transition: 0.5s;z-index: -1;background: linear-gradient(180deg, #F0F4FF 41.72%, #FFF 100%);}
.main-cont2.play::before {clip-path: inset(0 0 0 0);opacity: 1;}

.main-cont2 .inner {max-width: 120rem;padding: 10.6rem 0 16.3rem;margin: 0 auto;}
.main-cont2 .heading {margin-bottom: 5.6rem;}
.main-cont2 .heading .title {color: var(--navy, #02176A);text-align: center;font-size: 4.2rem;font-weight: 350;line-height: 100%;}
.main-cont2 .heading .title b {font-weight: 900;}
.main-cont2 .benefit-area {display: flex;column-gap: 3.2rem;justify-content: center;align-items: center;overflow: auto;}
.main-cont2 .benefit-area .item {flex-shrink: 0;display: flex;flex-direction: column;align-items: flex-start;width: 37.8rem;height: 34.4rem;border-radius: 1.6rem;border: 1px solid #E0E5EE;background: var(--white, #FFF);box-shadow: 0 2px 6px 0 rgba(212, 212, 212, 0.30);padding: 4rem;}
.main-cont2 .benefit-area .item .title {font-size: 2.8rem;font-weight: 700;}
.main-cont2 .benefit-area .item .text {color: var(--navy_txt, #333F54);font-size: 1.6rem;font-weight: 400;line-height: 160%;margin-top: 2.4rem;}
.main-cont2 .benefit-area .item .icon {width: 11.2rem;height: 11.2rem;border-radius: 1.6rem;margin-top: auto;margin-left: auto;}
.main-cont2 .benefit-area .item:nth-child(1) .title {color: var(--green, #09976E);}
.main-cont2 .benefit-area .item:nth-child(1) .icon {background: #F2FFF3;}
.main-cont2 .benefit-area .item:nth-child(2) .title {color: #DF3A4A;}
.main-cont2 .benefit-area .item:nth-child(2) .icon {background: #FFF6F9;}
.main-cont2 .benefit-area .item:nth-child(3) .title {color: var(--blue, #0056B9);}
.main-cont2 .benefit-area .item:nth-child(3) .icon {background: var(--bg_blue, #F0F7FF);}

/* main-cont3 */
.main-cont3 {position: relative;height: 52rem;}
.main-cont3::before {content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(180deg, #1D348F -1.15%, #02176A 61.73%);z-index: -2;opacity: 0;transition: 0.5s;}
.main-cont3.play::before {opacity: 1;}
.main-cont3::after {content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../images/XpilotAI_navy.png) no-repeat center bottom 3.4rem / auto;z-index: -1;transform: translateY(3rem);opacity: 0;transition: 0.5s;transition-delay: 0.5s;}
.main-cont3.play::after {opacity: 1;transform: translateY(0);}

.main-cont3 .inner {max-width: 120rem;height: 100%;padding: 6.2rem 0 10rem; margin: 0 auto;}
.bubble-area {display: flex;flex-direction: column;}
.bubble {display: flex;align-items: flex-end;column-gap: 2rem;}
.bubble .icon {flex-shrink: 0;}
.bubble .text {position: relative;display: inline-block;border-radius: 1.5rem;background: var(--white, #FFF);padding: 2.3rem 3.2rem;}
.bubble .text .tail {position: absolute;color: var(--white, #FFF);}
.bubble .text p {color: var(--navy, #02176A);font-size: 1.8rem;font-weight: 500;line-height: 100%;}
.bubble.first {align-self: flex-start;}
.bubble.first .tail {top: 0;left: -1rem;}
.bubble.second {align-self: flex-end;}
.bubble.second .tail {top: 0;right: -1rem;}
.bubble.third {align-self: center;}
.bubble.third .tail {top: 0;left: -1rem;}

/* main-cont1 */
.aos-animate.employee-area .item {animation: spreadAni 0.5s ease-out forwards;}
/* main-cont2 */
.aos-animate.benefit-area .item {animation: spreadAni 0.5s ease-out 0.5s forwards;}

@media screen and (max-width: 1024px) {
  /* main-visual */
  .main-visual .inner {padding: 0 2rem 0;}
  .main-visual::before {width: 25.9rem;height: 23.5rem;top: -10rem;transform: translateX(calc(-50% - 1.2rem));}
  .main-visual::after {width: 30.3rem;height: 26.5rem;top: -13.8rem;transform: translateX(calc(-50% + 5.7rem));}
  .main-visual .visual-logo {padding-top: 14.8rem;}
  .main-visual .visual-logo .app-icon {width: 20rem;height: 20rem;top: 1.5rem;left: 53%;}
  @keyframes bounceAni {
    0% {transform: translateX(-50%) translateY(0);}
    50% {transform: translateX(-50%) translateY(1rem);}
    95% {transform: translateX(-50%) translateY(0);}
    100% {transform: translateX(-50%) translateY(0);}
  } 
  .main-visual .visual-logo .logo-ani {max-width: 34.6rem;width: 100%;height: 7.4rem;}
  .main-visual .visual-logo .logo-ani::after {background-size: 34.6rem 7.4rem;}
  .main-visual .title-area {padding-top: 2.5rem;}
  .main-visual .title-area .title {font-size: 2.4rem;}
  .main-visual .title-area .text {font-size: 1.6rem;line-height: 160%;margin-top: 1.5rem;}
  .main-visual .title-area .text b {display: block;}
  .main-visual .btn-area {margin-top: 4rem;padding-bottom: 13.7rem;}
  .main-visual .btn-area::after {height: 10rem;bottom: 3.5rem;}
  .main-visual .btn-area::before {bottom: 3.5rem;}
  .main-visual .btn-area .btn {width: 16rem;padding: 1.6rem;font-size: 1.6rem;border-width: 1px;}

  /* main-cont1 */
  .main-cont1 .inner {padding: 0 2rem 7.2rem;}
  .main-cont1 .sec-title {font-size: 3rem;padding-bottom: 3.6rem;}
  .main-cont1 .scroll-contents {display: flex;flex-direction: row;overflow-x: auto;border-radius: 1.6rem;border: 1px solid var(--gray_5, #E7E7E7);background: var(--white, #FFF);padding: 0;
    overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;}
  .main-cont1 .scroll-contents::-webkit-scrollbar {display: none;}
  .main-cont1 .ai-agent-con {flex-direction: column;justify-content: space-between;gap: 2rem;width: 100%;flex-shrink: 0;padding: 4.8rem 2.4rem;scroll-snap-align: start;}
  .main-cont1 .indicator {padding-top: 2.2rem;}
  .main-cont1 .ai-agent-con h4.title {font-size: 2.6rem;margin-bottom: 2.4rem;}
  .main-cont1 .desc-list li {font-size: 1.4rem;line-height: 26px;}
  .main-cont1 .desc-list li::before {top: 1.3rem;}
  #aiAgent02 .text-area,
  #aiAgent01 .text-area {padding: 0;}
  #aiAgent01 .img-area {width: 100%;}
  #aiAgent02 .img-area {display: flex;justify-content: center;order: 2;}
  .employee-area {justify-content: flex-start;padding-top: 2.4rem;gap: 2rem;}
  .employee-area .item a {width: 25.6rem;height: 35.2rem;}
  .employee-area .item a .text {font-size: 1.4rem;padding: 0 3.2rem;}
  .employee-area .item .title {padding: 4.3rem 3.2rem 2.4rem;}
  .employee-area .item .title h5 {font-size: 2rem;}
  .employee-area .item .title .arrow {height: 2rem;}
  .employee-area .item a .icon {right: 3.2rem;bottom: 3.2rem;}

  /* main-cont2 */
  .main-cont2 .inner {padding: 6.4rem 0 8.3rem;}
  .main-cont2 .heading {margin-bottom: 3.6rem;}
  .main-cont2 .heading .title {font-size: 3rem;}
  .main-cont2 .benefit-area {justify-content: flex-start;gap: 2.4rem;padding: 0 2rem;}
  .main-cont2 .benefit-area .item {width: 32rem;height: 32rem;}
  .main-cont2 .benefit-area .item .title {font-size: 2.6rem;}
  .main-cont2 .benefit-area .item .text {font-size: 1.4rem;margin-top: 1.6rem;}

  /* main-cont3 */
  .main-cont3 {height: auto;}
  .main-cont3::after {background: url(../images/XpilotAI_navy_mo.png) no-repeat center bottom 1.3rem / contain;}
  .main-cont3 .inner {padding: 3.2rem 2rem 6.4rem;}
  .main-cont3 .bubble .icon {transform: scale(0.75);}
  .main-cont3 .bubble .text {padding: 1.4rem 2rem;}
  .main-cont3 .bubble .text p {font-size: 1.5rem;line-height: 160%;}
}