@charset "utf-8";
#inc01{overflow:hidden;width:100%}
#inc01 .inc01_wrap{position:relative;width:90%;margin:200px auto 0; z-index:1}
#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:100px;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% / 4);height:1px;background-color:#999}
#inc01 .cont_wrap ul:before{content:"";opacity:0;position:absolute;top:50%;right:25%;transform:translateY(-50%);width:calc(100% / 4);height:1px;background-color:#999}
#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;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;width:350px;height:350px;border-radius:50%;background-color:#000}
#inc01 .cont_wrap ul li:first-child{z-index:1;right:-100px}
#inc01 .cont_wrap ul li:nth-child(2){z-index:2;right:-50px}
#inc01 .cont_wrap ul li:nth-child(3){z-index:4}
#inc01 .cont_wrap ul li:last-child{z-index:4;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 h3 img {border-radius:10px}
#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:355px;height:350px}
#inc01 .cont_wrap ul li svg path {stroke-width:1.2;fill:none;stroke-dasharray:610px;stroke-dashoffset:610px;stroke:#999999}
#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}
#inc01 .cont_wrap ul li:nth-child(4) svg path{animation-delay:1.25s}

@keyframes stroke_ani {0% {stroke-dashoffset:610px}100% {stroke-dashoffset:0}}
@keyframes stroke_ani_reverse {0% { stroke-dashoffset:0px}100% {stroke-dashoffset:610px}}
@keyframes bar_left_ani{0%{left:-40%} 100%{left:-10%}}
@keyframes bar_right_ani{0%{right:25%;opacity:0} 100%{right:-10%;opacity:1}}
@keyframes item_bar_odd{0%{left:-200%} 100%{left:-100%}}
@keyframes item_bar_even{0%{right:-200%} 100%{right:-100%}}
@keyframes item_bar_mo{0%{bottom:0px} 100%{bottom:-30px}}

/* 반응형 [s] */
@media (hover:hover){
#inc01 .inc01_wrap .tit a:hover{color:#fff;background-color:#000}
}
@media (max-width:1480px){
#inc01 .cont_wrap ul li{width:400px;height:400px}
#inc01 .cont_wrap ul li svg{width:405px;height:400px}
}
@media (max-width:1380px){
#inc01 .inc01_wrap{width:95%}
#inc01 .cont_wrap ul li{width:350px;height:350px}
#inc01 .cont_wrap ul li svg{width:355px;height:350px}
#inc01 .cont_wrap ul li h3{font-size:25px}
#inc01 .cont_wrap ul li p{margin-top:30px;font-size:18px}
}
@media (max-width:1180px){
#inc01 .cont_wrap ul li{width:310px;height:310px}
#inc01 .cont_wrap ul li svg{width:315px;height:310px}
}
@media (max-width:1024px){
#inc01 .inc01_wrap{margin:120px auto 0}
#inc01 .cont_wrap{margin-top:150px}
#inc01 .cont_wrap ul li{width:270px;height:270px}
#inc01 .cont_wrap ul li:first-child{right:-30px}
#inc01 .cont_wrap ul li:last-child{left:-30px}
#inc01 .cont_wrap ul li svg{width:275px;height:270px}
#inc01 .cont_wrap ul li h3{font-size:21px}
#inc01 .cont_wrap ul li p{margin-top:20px;font-size:16px}
}
@media (max-width:850px){
#inc01 .cont_wrap ul li{width:245px;height:245px}
#inc01 .cont_wrap ul li:first-child{right:-20px}
#inc01 .cont_wrap ul li:last-child{left:-20px}
#inc01 .cont_wrap ul li svg{width:250px;height:245px}
}
@media (max-width:768px){
#inc01 .inc01_wrap{margin:100px auto 0}
#inc01 .cont_wrap{margin-top:100px}
#inc01 .cont_wrap ul{flex-direction:column;align-items:center;gap:30px}
#inc01 .cont_wrap ul:after{display:none}
#inc01 .cont_wrap ul:before{display:none}
#inc01 .cont_wrap ul li{width:285px;height:285px}
#inc01 .cont_wrap ul li svg{width:287px;height:285px;background-color:#000;}
#inc01 .cont_wrap ul li:nth-child(1){right:0px}
#inc01 .cont_wrap.on ul li:nth-child(1):after{content:"";position:absolute;top:50%;left:-200%;transform:translateY(-50%);width:100%;height:1.5px;background-color:#ffffff;animation:item_bar_odd  0.4s ease-in forwards}
#inc01 .cont_wrap.on ul li:nth-child(1):before{content:"";position:absolute;z-index:-1;bottom:0px;left:50%;transform:translateX(-50%);width:1.5px;height:30px;background-color:#ffffff;animation:item_bar_mo  0.4s ease-in forwards;animation-delay:1.2s}
#inc01 .cont_wrap ul li:nth-child(1) svg path{animation-delay:0.4s}
#inc01 .cont_wrap.on ul li:nth-child(2):after{content:"";position:absolute;top:50%;right:-200%;transform:translateY(-50%);width:100%;height:1.5px;background-color:#ffffff;animation:item_bar_even  0.4s ease-in forwards;animation-delay:0.8s}
#inc01 .cont_wrap.on ul li:nth-child(2):before{content:"";position:absolute;z-index:-1;bottom:0px;left:50%;transform:translateX(-50%);width:1.5px;height:30px;background-color:#ffffff;animation:item_bar_mo  0.4s ease-in forwards;animation-delay:1.8s}
#inc01 .cont_wrap ul li:nth-child(2) svg{transform:translate(-50%, -50%) scaleX(-1)}
#inc01 .cont_wrap ul li:nth-child(2) svg path{animation-delay:1.2s}
#inc01 .cont_wrap ul li:nth-child(3){left:0px}
#inc01 .cont_wrap.on ul li:nth-child(3):after{content:"";position:absolute;top:50%;left:-200%;transform:translateY(-50%);width:100%;height:1.5px;background-color:#ffffff;animation:item_bar_odd  0.4s ease-in forwards;animation-delay:1.6s}
#inc01 .cont_wrap ul li:nth-child(3) svg path{animation-delay:2s}
#inc01 .cont_wrap ul li h3{z-index:3;font-size:23px}
#inc01 .cont_wrap ul li p{z-index:3;margin-top:25px;font-size:17px}
}
@media (max-width:480px){
#inc01 .inc01_wrap{margin:80px auto 0}
#inc01 .cont_wrap{margin-top:80px}
#inc01 .cont_wrap ul{align-items:center;gap:30px}
#inc01 .cont_wrap ul li{width:250px;height:250px}
#inc01 .cont_wrap ul li svg{width:252px;height:250px}
#inc01 .cont_wrap ul li h3{font-size:21px}
#inc01 .cont_wrap ul li p{margin-top:20px;font-size:16px}
}
@media (max-width:380px){
#inc01 .inc01_wrap{margin:70px auto 0}
#inc01 .cont_wrap{margin-top:70px}
#inc01 .cont_wrap ul li{width:225px;height:225px}
#inc01 .cont_wrap ul li svg{width:227px;height:225px}
#inc01 .cont_wrap ul li h3{font-size:19px}
#inc01 .cont_wrap ul li p{margin-top:15px;font-size:15px}
}
/* 반응형 [e] */