@charset "UTF-8";
/* CSS Document */
#genistein {
	position:relative;
	width: 100%;
}
#genistein .cont01,#genistein .cont02{
  position: relative;
}

#genistein .cont01 .cont01_01{
	position: absolute;
	top:12%;
	left:0;
	right: 0;
	margin: auto;
	width: 150%;
	transition: .6s;
	z-index: 1;
}
#genistein .cont01 .cont01_01.trigger{
	transform: scale(0);
	opacity: 0;
}
#genistein .cont01 .cont01_01.trigger.move{
	transform: scale(1);
	opacity: 1;
}
#genistein .cont01 .cont01_02{
	position: absolute;
	top: 22%;
    right: 0%;
	left: 0;
	margin: auto;
	width: 78%;
	transition: .6s;
	animation-timing-function:ease-in-out;
	z-index: 2;
}
#genistein .cont01 .cont01_02.trigger{
  opacity: 0;
  transform: translateY(12%);
}
#genistein .cont01 .cont01_02.trigger.move{
  opacity: 1;
  transform: translateY(0%);
}
#genistein .cont01 .cont01_03{
	position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    transition: 1s .4s;
    animation-timing-function: ease-in-out;
    z-index: 2;
}
#genistein .cont01 .cont01_03.trigger{
  transform: translateY(10%);
	opacity: 0;
}
#genistein .cont01 .cont01_03.trigger.move{
  transform: translateY(0%);
	opacity: 1;
}
#genistein .cont02 .cont02_01{
	position: absolute;
    left: 0%;
	right: 0;
   bottom: 7%;
    margin: auto;
    width: 82%;
    transition: .6s;
    animation-timing-function: ease-in-out;
    z-index: 2;
}
#genistein .cont02 .cont02_01.trigger{
	clip-path: inset(0% 100% 0% 0%);
    opacity: 0;
}
#genistein .cont02 .cont02_01.trigger.move{
	clip-path: inset(0%);
    opacity: 1;
}