@charset "utf-8";

/*--------------------- background motion ---------------------*/
/* .background_motion {position: fixed;transition: all 3000ms ease;z-index: 1;} */


/* 메인페이지 모션 */
#s2 .background_motion {animation:ani360 40s ease; animation-iteration-count: infinite;}
.s2_motion01 { position: absolute; top: -530px; left: -100px;}
.s2_motion02 { position: absolute; bottom: -300px; right: -280px; }

#s3 .background_motion { animation:ani360 40s ease; animation-iteration-count: infinite;}
.s3_motion01 { position: absolute; top: -245px; left: -300px;}
.s3_motion02 { position: absolute; bottom: -240px; right: -130px; }

#s4 .background_motion { animation:ani360 40s ease; animation-iteration-count: infinite;}
.s4_motion01 { position: absolute; top: -80px; right: -320px;}


@keyframes ani360{
  to{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }
}
/* @keyframes ani120{
  to{
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -o-transform:rotate(45deg);
    }
} */

/* 서브페이지 모션 */
.background_motion_sub {
  position: fixed;
  transition: all 3000ms ease;
  z-index: 2;
  margin-top:-1000px;
}

.background_motion_sub.sub_motion01 {
  left: 0;
  top: 702px;
}
.background_motion_sub.sub_motion02 {
  right: -15px;
  top: 578px;
}


/* 난임트레이닝 스크롤에 따른 컨텐츠 등장 */
/* scroll motion */
.scroll-motion {position: relative;top: 50px;opacity: 0;}
/* onScroll */
/* .onScroll{position:relative;}
.inUp{
    opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
    -moz-transition:all 700ms ease-out;
    -webkit-transition:all 700ms ease-out;
    -o-transition:all 700ms ease-out;
    transition:all 700ms ease-out;
    -moz-transform:translate3d(0px, 100px, 0px);
    -webkit-transform:translate3d(0px, 100px, 0px);
    -o-transform:translate(0px, 100px);
    -ms-transform:translate(0px, 100px);
    transform:translate3d(0px, 100, 0px);
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
}
.inLeft{
    opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
    -moz-transition:all 700ms linear;
    -webkit-transition:all 700ms linear;
    -o-transition:all 700ms linear;
    transition:all 700ms linear;
    -moz-transform:translate3d(-100px, 0px, 0px);
    -webkit-transform:translate3d(-100px, 0px, 0px);
    -o-transform:translate(-100px, 0px);
    -ms-transform:translate(-100px, 0px);
    transform:translate3d(-100px, 0px, 0px);
}
.inRight{
    opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
    -moz-transition:all 700ms linear;
    -webkit-transition:all 700ms linear;
    -o-transition:all 700ms linear;
    transition:all 700ms linear;
    -moz-transform:translate3d(25%,0,0);
    -webkit-transform:translate3d(25%,0,0);
    -o-transform:translate(25%, 0px);
    -ms-transform:translate(25%, 0px);
    transform:translate3d(25%,0,0);
}
.onScroll.active{
    opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);
    -moz-transform:translate3d(0px, 0px, 0px);
    -webkit-transform:translate3d(0px, 0px, 0px);
    -o-transform:translate(0px, 0px);
    -ms-transform:translate(0px, 0px);
    transform:translate3d(0px, 0px, 0px);
}


@-webkit-keyframes s2_anim1 {
    to {
        -webkit-transform: rotate(360deg);
    }
  }

  @-moz-keyframes s2_anim1 {
    to {
        -moz-transform: rotate(360deg);
    }
  }

  @-ms-keyframes s2_anim1 {
    to {
        -ms-transform: rotate(360deg);
    }
  }

  @-o-keyframes s2_anim1 {
    to {
        -o-transform: rotate(360deg);
    }
  }


  @-webkit-keyframes s2_anim2 {
    to {
        -webkit-transform: rotate(-360deg);
    }
  }

  @-moz-keyframes s2_anim1 {
    to {
        -moz-transform: rotate(-360deg);
    }
  }

  @-ms-keyframes s2_anim1 {
    to {
        -ms-transform: rotate(-360deg);
    }
  }

  @-o-keyframes s2_anim1 {
    to {
        -o-transform: rotate(-360deg);
    }
  } */



@media (max-width:750px) {
  .background_motion,
  .background_motion_sub {display: none !important;}
}