@charset "utf-8";

/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.acms{
  position: absolute;
  width: 571px;
  height:571px;
  top: 4%;
  left: 55%;
  margin-left:0px;
  z-index: 99;
  text-align: left;
}

.front-page-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center
}

.front-page-hero .btn {
    margin-top: 52px
}

.front-page-hero .adv-animation {
    position: relative;
    aspect-ratio: 634/577;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 430px;
    max-width: 740px;
    flex: 2
}

.front-page-hero .adv-animation .circle-1,.front-page-hero .adv-animation .circle-2 {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600
}

.front-page-hero .adv-animation .absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transform-origin: center
}

.front-page-hero .adv-animation .from-center {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center
}

.front-page-hero .adv-animation .ratings {
    aspect-ratio: 1/1;
    min-width: 140px;
    background-color: rgba(3,40,77,0.8);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 24px 50px rgba(3,40,77,0.1);
    align-content: center;
    justify-content: center;
    align-items: center;
}

.front-page-hero .adv-animation .circles {
    min-width: 200px
}

.front-page-hero .adv-animation .animation-content {
    position: absolute;
    width: 100%;
    height: 100%
}

.front-page-hero .adv-animation .animation-content .card {
    opacity: 0;
    min-width: 100px;
    max-width: 100px;
    aspect-ratio: 196/165;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    display: flex;
    transform-origin: center;
    overflow: hidden;
/*
    border: 2px solid rgb(229, 135, 29, 0.9);
    box-shadow: inset 0 0 7px rgb(229, 135, 29, 0.9);
*/    
}

.front-page-hero .adv-animation .animation-content .card .wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    transition: transform 0.3s ease;
}

.front-page-hero .adv-animation .animation-content .card span {
    font-size: 15px;
    color: #03284D;
    font-weight: 700;
    padding-top: 10px;
    display: block
}



.front-page-hero .adv-animation .animation-content .card.toolkits {
    left: 0;
    top: 10px;
}

  .front-page-hero .adv-animation .animation-content .card.toolkits .from-bottom {
    background-image: url(/images/card_tool.png)
}

.front-page-hero .adv-animation .animation-content .card.webinars {
    right: 0;
    top: 60px;
}

.front-page-hero .adv-animation .animation-content .card.webinars .from-right {
  background-image: url(/images/card_certi.png)

}

.front-page-hero .adv-animation .animation-content .card.project-steps {
    left: 0;
    bottom: 105px
}

.front-page-hero .adv-animation .animation-content .card.project-steps .from-bottom {
  background-image: url(/images/card_doc.png)
}

.front-page-hero .adv-animation .animation-content .card.resources {
  right: 0;
  bottom: 40px
}

.front-page-hero .adv-animation .animation-content .card.resources .from-right {
  background-image: url(/images/card_audit.png)
}

.front-page-hero .adv-animation .animation-content .card .from-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 20px;
    margin-bottom: 20px;
    width: calc(100% - 40px);
    transform: translateY(1000px);
    aspect-ratio: 16/10;
    background-repeat: no-repeat;
    background-size: 100% ;
}

.front-page-hero .adv-animation .animation-content .card .from-right {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 20px;
    margin-bottom: 20px;
    width: calc(100% - 40px);
    transform: translateX(1000px);
    aspect-ratio: 16/10;
    background-repeat: no-repeat;
    background-size: 100% ;
}

.front-page-hero .adv-animation.on-screen .circles {
    transform-origin: center;

    animation: stroke-w 3s ease-out forwards
}

.front-page-hero .adv-animation.on-screen .reviews-wrap {
    opacity: 1
}

.front-page-hero .adv-animation.on-screen .circle-1,.front-page-hero .adv-animation.on-screen .circle-2 {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    -webkit-animation: stroke 3s ease-out forwards;
    animation: stroke 3s ease-out forwards
}

.front-page-hero .adv-animation.is-loaded .animation-content .card {
    opacity: 1;
    min-width: 196px;
    max-width: 196px;
    clip-path: inset(50%); /* 시작 시 작은 사각형으로 숨김 */
    animation: open-rectangle 1.5s ease-out forwards; /* 애니메이션 적용 */

    background-color: rgba(255,255,255,0.8);

}

.front-page-hero .adv-animation.is-loaded .animation-content .card .heading {
    animation: headin 2s ease-in forwards;
    }

.front-page-hero .adv-animation.is-loaded .animation-content .card .from-bottom {
    transform: translateY(0);
    transition: 3s ease-out;
    animation: open-imgY 2.5s ease-out forwards;
    margin: 2px;
    padding: 0px;
    width: 98%;
}

.front-page-hero .adv-animation.is-loaded .animation-content .card .from-right {
  transform: translateX(0);
  transition: 3s ease-out;
  animation: open-imgX 2.5s ease-out forwards;
  margin: 2px;
  padding: 0px;
  width: 98%;
}

.front-page-hero .adv-animation.is-loaded .animation-content .card.webinars,
.front-page-hero .adv-animation .animation-content .card.webinars .from-right {
    animation-delay:  0.5s
}

.front-page-hero .adv-animation.is-loaded .animation-content .card.project-steps,
.front-page-hero .adv-animation .animation-content .card.project-steps .from-bottom {
    animation-delay: 1.0s
}

.front-page-hero .adv-animation.is-loaded .animation-content .card.resources,
.front-page-hero .adv-animation .animation-content .card.resources .from-right {
    animation-delay: 1.5s
}

.front-page-hero .adv-animation.is-loaded .animation-content .card.toolkits .heading {
    animation-delay: 0s
}

.front-page-hero .adv-animation.is-loaded .animation-content .card.webinars .heading {
    animation-delay: 0.5s
}

.front-page-hero .adv-animation.is-loaded .animation-content .card.project-steps .heading {
    animation-delay: 1s
}

.front-page-hero .adv-animation.is-loaded .animation-content .card .heading {
    animation-delay: 1.5s
}

.front-page-hero.front-page-hero {
    flex-wrap: nowrap
}

.front-page-hero.front-page-hero .adv-animation {
    max-width: unset;
    min-width: unset;
    width: auto
}

.front-page-hero .adv-animation .ratings .rating {
    animation: blinkC 3s infinite ease;
    color: #fff; /* 기본 글자색은 검정 */
}

.front-page-hero .adv-animation .ratings .ratingD {
    animation: blinkD 3s infinite ease;
    color: #e5871d; /* 기본 글자색은 검정 */
}

/* 1초 동안 색이 변하는 효과 */
@keyframes blinkC {
  50% { color: #e5871d; } /* 50% 지점에서 글자색을 노란색으로 */
}
@keyframes blinkD {
  50% { color: #fff; } /* 50% 지점에서 글자색을 노란색으로 */
}

@keyframes open-imgY {
  0% {
    transform: translateY(1000px); /* 끝날 때 전체 화면으로 확장 */
    opacity: 0;         /* 시작 시 투명 */
  }
  100% {
    transform: translateY(0); /* 끝날 때 전체 화면으로 확장 */
    opacity: 1;         /* 끝날 때 완전히 보임 */
  }
}

@keyframes open-imgX {
  0% {
    transform: translateX(1000px); /* 끝날 때 전체 화면으로 확장 */
    opacity: 0;         /* 시작 시 투명 */
  }
  100% {
    transform: translateX(0); /* 끝날 때 전체 화면으로 확장 */
    opacity: 1;         /* 끝날 때 완전히 보임 */
  }
}

@keyframes open-rectangle {
  to {
    clip-path: inset(0%); /* 끝날 때 전체 화면으로 확장 */
  }
}

@keyframes headin {
  from{
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes stroke {
    to {
        stroke-dashoffset: 0;
        stroke-dasharray: 1500
    }
}

@keyframes stroke {

    to {
        stroke-dashoffset: 0;
        stroke-dasharray: 1500
    }
}

@-webkit-keyframes stroke-w {
    to {
        transform: scale(2) rotate(720deg);
    }
}

@media (min-width: 2000px) {

      .acms{

        top: 5% ;
      }

      .front-page-hero .animation-content .card.toolkits {
          transform:scale(1.1) translate(-20%,-20%)
      }

      .front-page-hero .animation-content .card.webinars {
          transform: scale(1.1) translate(20%,-20%)
      }

      .front-page-hero .animation-content .card.project-steps {
          transform: scale(1.1) translate(-20%,20%)
      }

      .front-page-hero .animation-content .card.resources {
          transform: scale(1.1) translate(20%,20%)
      }

      .front-page-hero .ratings {
          transform: scale(1.1)
      }

}

@media (min-width: 1199.99px) {

    .front-page-hero .adv-animation {
        max-width: unset
    }
}

@media (min-width: 1399.99px) {

    .front-page-hero .adv-animation {
        max-width: unset
    }
}

@media (max-width: 991.9px) {
    .front-page-hero .btn {
        margin-top:36px
    }
}

@media (max-width: 780px) {
    .front-page-hero .adv-animation {
        display:none
    }
}

@media (min-width: 992px) and (max-width:1199.89px) {

  .acms{
    width: 420px;
    top: 5% ;
  }
  .front-page-hero .adv-animation .animation-content .card.project-steps {
      bottom: 85px;
  }

  .front-page-hero .adv-animation .animation-content .card.resources {
      bottom: 30px
  }

    .front-page-hero .adv-animation {
        max-width: unset
    }
}

@media (min-width: 1200px) and (max-width:1259.9px){

  .acms{
    width: 480px;
  }
  .front-page-hero .adv-animation .animation-content .card.project-steps {
      bottom: 105px;
  }

  .front-page-hero .adv-animation .animation-content .card.resources {
      bottom: 50px
  }

}

@media (min-width: 992px) and (max-width:1259.9px) {


    .front-page-hero .animation-content .card.toolkits {
        transform:scale(.8) translate(-20%,-20%)
    }

    .front-page-hero .animation-content .card.webinars {
        transform: scale(.8) translate(20%,-20%)
    }

    .front-page-hero .animation-content .card.project-steps {
        transform: scale(.8) translate(-20%,20%)
    }

    .front-page-hero .animation-content .card.resources {
        transform: scale(.8) translate(20%,20%)
    }

    .front-page-hero .ratings {
        transform: scale(.8)
    }
}

@media (min-width: 780px) and (max-width:991.9px) {

  .acms{
    top: 4%;
    width: 335px;
  }
  .front-page-hero .adv-animation .animation-content .card.project-steps {
      bottom: 80px;
  }

  .front-page-hero .adv-animation .animation-content .card.resources {
      bottom: 30px
  }

    .front-page-hero {
        gap:30px
    }

    .front-page-hero .animation-content .card.toolkits {
        transform: scale(.7) translate(-20%,-20%);
        top: 0!important
    }

    .front-page-hero .animation-content .card.webinars {
        transform: scale(.7) translate(20%,-20%);
        top: 30px!important
    }

    .front-page-hero .animation-content .card.project-steps {
        transform: scale(.7) translate(-20%,20%);
        bottom: 40px!important
    }

    .front-page-hero .animation-content .card.resources {
        transform: scale(.7) translate(20%,20%);
        bottom: 0!important
    }

    .front-page-hero .ratings {
        transform: scale(.8)
    }
}


canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}


svg {
    pointer-events: none;
}