@charset "UTF-8";
/* CSS Document */
#easy {
	position:relative;
	width: 100%;
}
#easy .cont01,#easy .cont02,#easy .cont03,#easy .cont04,#easy .cont05{
  position: relative;
}
#easy .cont01 .text li {
    position: absolute;
}
#easy .cont01 .text li:nth-child(1){
    top: 10%;
    right: 10%;
    z-index: 1;
    width: 6.5%;
    transition: 0.6s 0.2s;
}
#easy .cont01 .text li:nth-child(2){
    top: 10%;
    right: 19%;
    z-index: 1;
    width: 6.5%;
    transition: 0.6s 0.6s;
}
#easy .cont01.trigger .text li{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#easy .cont01.trigger.move .text li{
	clip-path: inset(0%);
    opacity: 1;
}

#easy .cont02 .text li {
    position: absolute;
}
#easy .cont02 .text li:nth-child(1){
    top: 10%;
    right: 8%;
    z-index: 4;
    width: 11%;
    transition: 0.6s 0.2s;
}
#easy .cont02 .text li:nth-child(2){
    top: 15%;
    left: 8%;
    z-index: 3;
    width: 11%;
    transition: 0.8s 0.6s;
}
#easy .cont02.trigger .text li{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#easy .cont02.trigger.move .text li{
	clip-path: inset(0%);
    opacity: 1;
}

#easy .cont02 .cont02_01{
	position: absolute;
    bottom: 5%;
    right: 5%;
    width: 45%;
    transition: .9s;
    animation-timing-function: ease-in-out;
    z-index: 2;
}
#easy .cont02 .cont02_01.trigger{
  transform: translateX(8%);
	opacity: 0;
}
#easy .cont02 .cont02_01.trigger.move{
  	transform: translateX(0%);
	opacity: 1;
}

#easy .cont02 .cont02_02{
	position: absolute;
    bottom: 8%;
    left:20%;
    width: 45%;
    transition: .9s;
    animation-timing-function: ease-in-out;
    z-index: 3;
}