@charset "utf-8";
#inc01{overflow:hidden;width:100%}
#inc01 .inc01_wrap{position:relative;width:90%;margin:200px auto 0}
#inc01 .inc01_wrap .tit{display:flex;flex-direction:column;align-items:center}
#inc01 .inc01_wrap .tit a{border:2px solid #fff;color:#000;background-color:#fff;transition:all .3s}
#inc01 .cont_wrap{margin-top:200px;width:100%}
#inc01 .cont_wrap ul{position:relative;display:flex;justify-content:center;align-items:center;width:100%}
#inc01 .cont_wrap ul:after{content:"";position:absolute;top:50%;left:-40%;transform:translateY(-50%);width:calc(100% / 3);height:2px;background-color:#fff}
#inc01 .cont_wrap ul:before{content:"";opacity:0;position:absolute;top:50%;right:25%;transform:translateY(-50%);width:calc(100% / 3);height:2px;background-color:#fff}
#inc01 .cont_wrap.on ul:after{animation:bar_left_ani 0.9s ease-in forwards}
#inc01 .cont_wrap.on ul:before{animation:bar_right_ani 0.9s ease-in forwards;animation-delay:1.2s}
#inc01 .cont_wrap ul li{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:450px;height:450px;border-radius:50%;background-color:#000}
#inc01 .cont_wrap ul li:first-child{z-index:1;right:-50px}
#inc01 .cont_wrap ul li:nth-child(2){z-index:2}
#inc01 .cont_wrap ul li:last-child{z-index:3;left:-50px}
#inc01 .cont_wrap ul li h3{font-size:30px;font-weight:700;font-family:var(--e-font);text-align:center;color:#fff}
#inc01 .cont_wrap ul li p{margin-top:40px;font-size:20px;font-weight:700;text-align:center;color:rgb(255, 255, 255, 0.6)}
#inc01 .cont_wrap ul li svg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:455px;height:450px}
#inc01 .cont_wrap ul li svg path {stroke-width:1.2;fill:none;stroke-dasharray:610px;stroke-dashoffset:610px;stroke:#fff}
#inc01 .cont_wrap.on ul li svg path {animation:stroke_ani 0.9s ease-in forwards}
#inc01 .cont_wrap ul li:nth-child(1) svg path{animation-delay:0.5s}
#inc01 .cont_wrap ul li:nth-child(2) svg path{animation-delay:0.75s}
#inc01 .cont_wrap ul li:nth-child(3) svg path{animation-delay:1s}

@keyframes stroke_ani {0% {stroke-dashoffset:610px}100% {stroke-dashoffset:0}}
@keyframes bar_left_ani{0%{left:-40%} 100%{left:-10%}}
@keyframes bar_right_ani{0%{right:25%;opacity:0;} 100%{right:-10%;opacity:1}}

@media (hover:hover){
#inc01 .inc01_wrap .tit a:hover{color:#fff;background-color:#000}
}