@charset "utf-8";
/* CSS Document */

/*-------------------------폰트--------------------------*/
@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/*-------------------------폰트 끝--------------------------*/

.main_contents > .mv {position: absolute; top: 50%; right: 10%; text-align: center; color: #fff; font-family: 'SUIT-Regular'; z-index: 1;}
.main_contents > .mv > p:first-child {font-size:30px; line-height: 40px; font-weight: bold;}
.main_contents > .mv > p:first-child > span {color: #ffa415;}
.main_contents > .mv > p:nth-child(2) {font-size:20px; line-height: 35px; font-weight: normal;}

.main_contents > .mb {position: absolute; top: 39%; right: 6.5%; }

/* 초기 상태 숨기기 */
.main_contents > .mv > p {
  opacity: 0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
}

/* 첫 번째 p 등장 */
.main_contents > .mv > p:first-child {
  animation: fadeSlideIn 1s ease-out 0.3s forwards;
}

/* 두 번째 p 등장 (첫 번째보다 나중에) */
.main_contents > .mv > p:nth-child(2) {
  animation: fadeSlideIn 1s ease-out 1.2s forwards;
}

/* mb 이미지 처음엔 숨기고, 나중에 나타남 + 회전 */
.main_contents > .mb {
  opacity: 0;
  animation: fadeIn 1s ease-out 2.5s forwards;
}

.main_contents > .mb > img {
  transition: all 0.3s ease-in-out;
  animation: rotateInfinite 20s linear infinite;
}

/* 공통 애니메이션 정의 */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes rotateInfinite {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*
@media screen and (max-width:890px){
.main_contents > .mm1 {display: none;}
.main_contents > .mm2 {display: inline-block;}
.main_contents > .mv {width: calc(100%); height: auto; padding: 20px 0 30px 0; float: none; margin:0px auto;}
.main_contents > .mm2 > .t1 {height: auto;}
.main_contents > .mm2 > .t2 {padding-top:30px; height: auto;}
.main_contents > .mb {width: calc(100%); float: none; margin:0px auto; height: auto;}
}
*/