@charset "utf-8";
#inc02{position:relative;padding:200px 0;width:100%;background-color:#f2f2f2}
#inc02 .inc02_wrap{display:flex;justify-content:space-between;align-items:flex-start;position:relative;margin:auto;width:80%}
#inc02 .tit{position:sticky;top:30px}
#inc02 .tit .section_h2{margin-top:15px}
#inc02 .tit p{margin-top:30px;font-size:15px;font-weight:400}
#inc02 .tit a{display:flex;justify-content:center;align-items:center;margin-top:60px;width:180px;height:60px;font-size:16px;font-weight:700;border:2px solid var(--primary);border-radius:30px;color:var(--primary);transition:all .3s}
#inc02 .cont_wrap{display:grid;gap:30px;grid-template-columns:repeat(2, 1fr)}
#inc02 .cont_wrap li{position:relative}
#inc02 .cont_wrap li:nth-child(odd){position:relative;top:60px}
#inc02 .cont_wrap li a{display:flex;flex-direction:column;padding: 40px;width:460px;height:460px;border-radius:15px;background-color:#fff}
#inc02 .cont_wrap li a .top_cont_wrap{display:flex;justify-content:space-between;align-items:center}
#inc02 .cont_wrap li a .cate{font-size:15px;font-weight:700;color:rgb(0, 0, 0, 0.2);transition:all .3s}
#inc02 .cont_wrap li a .icon{width:80px;height:80px;border-radius:10px;background-color:var(--primary);background-repeat:no-repeat;background-position:center;background-size:50%}
#inc02 .cont_wrap li a h3{margin-top:50px}
#inc02 .cont_wrap li a p{margin-top:15px;font-size: 18px;font-weight: 600;word-break:keep-all;color:#777}
#inc02 .cont_wrap li a span {position:relative;margin:auto 0 0 15px;width:7px;height:7px;border-radius:5px;background-color:#b2b2b2}
#inc02 .cont_wrap li a span::before, #inc02  .cont_wrap li a span::after {content:"";display:inline-block;position:absolute;top:0}
#inc02 .cont_wrap li a span::before {left:-15px;width:7px;height:7px;border-radius:5px;background-color:#b2b2b2}
#inc02 .cont_wrap li a span::after {left:15px;width:7px;height:7px;border-radius:5px;background-color:#b2b2b2}
#inc02 .cont_wrap li:nth-child(1) a .icon{background-image:url(./img/icon01.png)}
#inc02 .cont_wrap li:nth-child(2) a .icon{background-image:url(./img/icon02.png)}
#inc02 .cont_wrap li:nth-child(3) a .icon{background-image:url(./img/icon03.png)}
#inc02 .cont_wrap li:nth-child(4) a .icon{background-image:url(./img/icon04.png)}
#inc02 .cont_wrap li:nth-child(5) a .icon{background-image:url(./img/icon05.png)}
#inc02 .cont_wrap li:nth-child(6) a .icon{background-image:url(./img/icon06.png)}
@keyframes dot-elastic {0% {transform6scale(1, 1)}25% {transform:scale(1, 1)}50%6{transform:scale(1, 1.5)}75% {transform:scale(1, 1)}100% {transform:scale(1, 1)}}
@keyframes dot-elastic-before {0% {transform:scale(1, 1)} 25% {transform:scale(1, 1.5)} 50% {transform:scale(1, 0.67)} 75% {transform:scale(1, 1)} 100% {transform:scale(1, 1)}}
@keyframes dot-elastic-after {0% {transform:scale(1, 1)}25% {transform:scale(1, 1)}50% {transform:scale(1, 0.67)}75% {transform:scale(1, 1.5)}100% {transform:scale(1, 1)}}


/* 반응형 [s] */
@media (hover:hover){
#inc02 .tit a:hover{color:#fff;background-color:var(--primary)}
#inc02 .cont_wrap li a:hover .cate{color:var(--primary)}
#inc02 .cont_wrap li a:hover span{animation:dot-elastic 1s linear infinite;background-color:var(--primary)}
#inc02 .cont_wrap li a:hover span:after{animation:dot-elastic-after 1s linear infinite;background-color:var(--primary)}
#inc02 .cont_wrap li a:hover span:before{animation:dot-elastic-before 1s linear infinite;background-color:var(--primary)}
}
@media(max-width:1980px){
#inc02  .cont_wrap li a{width:420px;height:420px}
}
@media(max-width:1600px){
#inc02 .inc02_wrap{width:85%}
}
@media (max-width:1580px){
#inc02 .cont_wrap li a{padding:40px;width:390px;height:390px}
#inc02 .cont_wrap li a .icon{width:75px;height:75px}
}
@media (max-width:1380px){
#inc02 .inc02_wrap{width:90%}
#inc02 .tit a{width:165px;height:56px;border-radius:28px}
#inc02 .cont_wrap{gap:20px;width:60%}
#inc02 .cont_wrap li a{padding:34px;width:100%;height:340px}
#inc02 .cont_wrap li a .icon{width:65px;height:65px}
#inc02 .cont_wrap li a h3{font-size:18px}
#inc02 .cont_wrap li a .cate{font-size:14px}
}
@media (max-width:1024px){
#inc02{padding:120px 0}
#inc02 .tit{position:relative;top:0px;width:100%}
#inc02 .tit a{position:absolute;bottom:0px;right:0px;width:155px;height:55px;line-height:55px;font-size:15px;border-radius:27px;margin-top:0px}
#inc02 .inc02_wrap{width:95%;flex-direction:column}
#inc02 .cont_wrap{margin-top:70px;width:100%}
#inc02 .cont_wrap li:nth-child(odd){top:0px}
#inc02 .cont_wrap li a{padding:30px;height:290px}
#inc02 .cont_wrap li a .icon{width:60px;height:60px}
#inc02 .cont_wrap li a p{margin-top:12px;font-size:15px}
#inc02 .cont_wrap li a h3{margin-top:30px;font-size:19px}
}
@media (max-width:768px){
#inc02{padding:100px 0}
#inc02 .tit{display:flex;flex-direction:column;align-items:center;text-align:center}
#inc02 .tit p{margin-top:20px;white-space:pre-line}
#inc02 .tit a{position:static;margin-top:30px;width:150px;height:52px;line-height:52px;border-radius:26px}
#inc02 .cont_wrap{margin-top:60px;gap:15px}
#inc02 .cont_wrap li a{padding:25px;height:270px}
#inc02 .cont_wrap li a .icon{width:55px;height:55px}
#inc02 .cont_wrap li a h3{margin-top:25px;font-size:17px}
#inc02 .cont_wrap li a p{margin-top:8px}
}
@media (max-width:480px){
#inc02{padding:80px 0}
#inc02 .tit .section_h2{margin-top:12px}
#inc02 .tit p{margin-top:15px;font-size:14px}
#inc02 .tit a{width:142px;height:50px;line-height:50px;border-radius:25px;font-size:14px}
#inc02 .cont_wrap{gap:10px}
#inc02 .cont_wrap li a{padding:15px;height:250px}
#inc02 .cont_wrap li a .icon{width:45px;height:45px}
#inc02 .cont_wrap li a .cate{font-size:13px}
#inc02 .cont_wrap li a h3{margin-top:22px;font-size:16px}
#inc02 .cont_wrap li a p{font-size:13px}
#inc02 .cont_wrap li a span{width:6px;height:6px}
#inc02 .cont_wrap li a span::after{width:6px;height:6px}
#inc02 .cont_wrap li a span::before{width:6px;height:6px}
}
@media (max-width:380px){
#inc02{padding:70px 0}
#inc02 .tit p{font-size:13px}
#inc02 .tit a{width:130px;height:48px;line-height:48px;border-radius:24px;font-size:13px}
#inc02 .cont_wrap{grid-template-columns:repeat(1, 1fr);margin-top:50px}
#inc02 .cont_wrap li a{height:auto}
#inc02 .cont_wrap li a h3{margin-top:20px}
#inc02 .cont_wrap li a .icon{width:50px;height:50px}
#inc02 .cont_wrap li a p{font-size:14px}
#inc02 .cont_wrap li a span{margin-top:55px}
}
/* 반응형 [e] */