@charset "utf-8";
#inc01{display:flex;position:relative;margin:200px auto 0;width:92%}

/* Title */
#inc01 .tit{position:absolute}
#inc01 .tit h2{font-size:68px;font-weight:700;font-family:var(--e-font);line-height:75px;color:#fff}
#inc01 .tit h2 span{color:var(--primary)}
#inc01 .tit p{margin:60px 0 60px 150px;font-size:18px}
#inc01 .tit .more_btn{position:relative;display:flex;justify-content:center;align-items:center;padding-right:14px;width:155px;height:48px;margin-left:150px;border:1px solid rgb(255,255,255,.2);border-radius:24px;background: #fff;font-size:13px;font-weight:700;color: #111;transition:all .3s} 
#inc01 .tit .more_btn:after{position:absolute;top:50%;left:calc(100% - 25px);transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background-color: #111;content:"";transition:all .3s}

/* Content */
#inc01 .cont{display:grid;grid-template-areas:". a b .""c d . e";gap:25px;margin:80px 0 0 auto}
#inc01 .cont li{display:flex;flex-flow:column;width:320px;height:320px;padding: 40px 27px 50px 27px;border-radius:20px;font-size:16px;color:#fff;background:#0f0f0f}
#inc01 .cont li span{overflow:hidden;display:block;position:relative;text-align:end;font-size:50px;font-weight:200;color:#fff;line-height:1}
#inc01 .cont li span i{display:block;font-style:normal}
#inc01 .cont li h3{margin:auto 0 20px 0;font-size:19px;font-weight:600;font-family:var(--e-font);color:#fff}
#inc01 .cont li:nth-child(even){border:1px solid rgb(255,255,255,0.1);background:none}
#inc01 .cont li:nth-child(even) span:after{background:#000}
#inc01 .cont .item01{grid-area:a}
#inc01 .cont .item02{grid-area:b}
#inc01 .cont .item03{grid-area:c}
#inc01 .cont .item04{grid-area:d}
#inc01 .cont .item05{grid-area:e;justify-content:center;text-align:center;background:var(--primary)}
#inc01 .cont .item05 span{margin: 15px 0 10px;text-align:center;font-size:45px}
#inc01 .cont .item05 p{margin:0}

/* 반응형 [s] */
@media (hover:hover){
#inc01 .tit .more_btn:hover{padding:0 0 0 14px;border-color:var(--primary);color:#fff;background:var(--primary);}
#inc01 .tit .more_btn:hover:before{background:#fff}
#inc01 .tit .more_btn:hover:after{left:20px;background: #fff;}
}
@media (max-width:1680px){
#inc01 .tit h2{font-size:62px}
#inc01 .tit p{margin:50px 0 50px 130px;font-size:17px}
#inc01 .tit .more_btn{margin-left:130px;width:150px}
#inc01 .cont{gap:20px}
#inc01 .cont li{width:285px;height:285px}
}
@media (max-width:1480px){
#inc01 .tit h2{font-size:56px}
#inc01 .tit p{margin:40px 0 40px 120px;font-size:16px}
#inc01 .tit .more_btn{margin-left:120px}
#inc01 .cont{gap:15px}
#inc01 .cont li{padding:32px 32px 42px 32px;width:260px;height:260px;font-size:15px}
#inc01 .cont li h3{margin:auto 0 15px;font-size:17px}
}
@media (max-width:1380px){
#inc01{flex-direction:column}
#inc01 .tit{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;position:static}
#inc01 .tit h2{width:100%;font-size:52px}
#inc01 .tit p{margin:0px}
#inc01 .tit .more_btn{margin-left:0px}
#inc01 .cont{grid-template-areas:'a b b .' 'c d . e' ;grid-template-columns:repeat(4, 1fr);margin:60px 0 0}
#inc01 .cont li{padding:30px 25px 40px;width:auto;height:280px}
#inc01 .cont li h3{font-size:18px}
#inc01 .cont .item05 span{font-size:42px}
}
@media (max-width:1024px){
#inc01{margin:130px auto 0;width:95%}
#inc01 .tit{gap:15px}
#inc01 .tit h2{font-size:42px;line-height:1.5}
#inc01 .cont{grid-template-areas:'a b b b' 'c c c d' 'e e e e' ;grid-template-columns:1.5fr 1fr 1fr 1.5fr}
#inc01 .cont li{padding:25px 20px;height:250px}
#inc01 .cont li span{font-size:46px}
#inc01 .cont li:not(.item05) span:after{height:18px}
#inc01 .cont li h3{margin:auto 0 12px;font-size:16px}
#inc01 .cont .item05 span{margin:15px 0 20px;font-size:40px}
}
@media (max-width:768px){
#inc01{margin:110px auto 0}
#inc01 .tit h2{font-size:38px}
#inc01 .tit p{font-size:15px}
#inc01 .tit .more_btn{width:138px;height:45px}
#inc01 .cont{grid-template-areas:'a b' 'c d' 'e e';grid-template-columns:repeat(2, 1fr)}
#inc01 .cont li{height:200px;font-size:14px}
#inc01 .cont li h3{font-size:15px}
#inc01 .cont li span{font-size:42px}
#inc01 .cont li:not(.item05) span:after{height:16px}
#inc01 .cont .item05 span{margin:12px 0 15px;font-size:38px}
}
@media (max-width:480px){
#inc01{margin:50px auto 0}
#inc01 .tit{flex-direction:column;gap:0px;text-align:center}
#inc01 .tit h2{font-size:30px}
#inc01 .tit p{margin:12px 0 24px;font-size:14px}
#inc01 .tit .more_btn{width:130px;height:42px;font-size:12px}
#inc01 .tit .more_btn:after{left:calc(100% - 20px)}
#inc01 .cont{margin:50px 0 0}
#inc01 .cont li{padding:20px 15px;height:185px;font-size:13px}
#inc01 .cont li span{font-size:38px}
#inc01 .cont li:not(.item05) span:after{height:15px}
#inc01 .cont li h3{margin:auto 0 8px}
#inc01 .cont .item05 span{margin:8px 0 12px;font-size:34px}
}
@media (max-width:380px){
#inc01{margin:70px auto 0}
#inc01 .tit h2{font-size:26px}
#inc01 .tit p{margin:10px 0 20px;font-size:13px;}
#inc01 .tit .more_btn{width:126px;height:40px}
#inc01 .cont li h3{font-size:14px}
#inc01 .cont li{height:170px;font-size:12px}
#inc01 .cont li span{font-size:32px}
#inc01 .cont li:not(.item05) span:after{height:13px}
#inc01 .cont .item05 span{margin:6px 0 10px;font-size:32px}
}