@charset "utf-8";

#inc02{position:relative;margin-left: 200px;border-left: 1px solid #e1e1e1;}
#inc02 .inner{width:100%;/* max-width:1520px; */}
#inc02 .tit_ko{position: relative;padding: 130px 0 80px 80px;padding-left:80px;}
#inc02 .tit_ko:after{position:absolute;content:'';left:0;bottom:0;width:100%;height:1px;background:#e1e1e1}
#inc02 .tit_ko h2{padding-bottom:16px;font-size:40px;color:#111}
#inc02 .inner .list_box ul{display:flex}
#inc02 .inner .list_box ul li{display:block;width:calc(100% / 4);font-size:16px;color:#666;text-align:center;transition:all 0.2s}
#inc02 .inner .list_box ul li a{display: block;padding: 100px 40px;color:#666}
#inc02 .inner .list_box ul li:hover{background:var(--primary);color:#fff}
#inc02 .inner .list_box ul li:hover p{color:#fff}
#inc02 .inner .list_box ul li:hover .icon{background:rgba(255,255,255,0.2)}
#inc02 .inner .list_box ul li:hover a{color:#fff}
#inc02 .inner .list_box ul li:hover{color:rgba(255,255,255,0.7)}
#inc02 .inner .list_box ul li .icon{display:block;margin:0 auto 40px;width:80px;height: 80px;line-height:80px;background:#f5f5f5;border-radius: 3px;}
#inc02 .inner .list_box ul li:nth-child(1) .icon{background-image:url('./img/icon01.png')}
#inc02 .inner .list_box ul li:nth-child(2) .icon{background-image:url('./img/icon02.png')}
#inc02 .inner .list_box ul li:nth-child(3) .icon{background-image:url('./img/icon03.png')}
#inc02 .inner .list_box ul li:nth-child(4) .icon{background-image:url('./img/icon04.png')}
#inc02 .inner .list_box ul li:hover:nth-child(1) .icon{background-image:url('./img/icon01_on.png')}
#inc02 .inner .list_box ul li:hover:nth-child(2) .icon{background-image:url('./img/icon02_on.png')}
#inc02 .inner .list_box ul li:hover:nth-child(3) .icon{background-image:url('./img/icon03_on.png')}
#inc02 .inner .list_box ul li:hover:nth-child(4) .icon{background-image:url('./img/icon04_on.png')}
#inc02 .inner .list_box ul li p{padding-bottom: 20px;font-size:22px;font-weight:700;color:#222}
#inc02 .inner .list_box ul li .more{display:block;padding: 50px 0 5px 0;opacity:0;font-size: 15px;}
#inc02 .inner .list_box ul li:hover .more{opacity:1}
#inc02 .inner .list_box ul li .more{display:block;overflow:hidden;position:relative;color:#fff;width:100px;margin: 0 auto;font-weight: 600}
#inc02 .inner .list_box ul li .more:before, #inc02 .inner .list_box ul li .more:after {content: '';display: block;position: absolute;bottom: 0;width: 100%;height:2px;-webkit-transition: width .3s;transition: width .3s;-webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000)}
#inc02 .inner .list_box ul li .more:before {width:100%;right:0;background: #fff;-webkit-transition-delay: .2s;transition-delay: .2s}
#inc02 .inner .list_box ul li .more:after {width:0;left:0;background: #fff;-webkit-transition-delay: 0s;transition-delay: 0s}
#inc02 .inner .list_box ul li .more:hover:before{width:0;transition-delay: 0s}
#inc02 .inner .list_box ul li .more:hover:after{width:100%;-webkit-transition-delay: .2s;transition-delay: .2s}

/* 반응형 [s] */
@media (hover:hover){
}
@media (max-width:1400px){
#inc02 .tit_ko h2{font-size:35px}
#inc02 .inner .list_box ul li br{display:none}
}
@media (max-width:1200px){
#inc02{margin-left:0}
#inc02 .inner .list_box ul li a{padding:50px 20px}
#inc02 .tit_ko{padding:70px 0 70px 70px}
}
@media (max-width:1024px){
#inc02 .inner .list_box ul li{font-size:15px}
#inc02 .inner .list_box ul li p{font-size:20px}
}
@media (max-width:768px){
#inc02 .inner .list_box ul {display:grid;grid-template-columns:repeat(2, 1fr)}
#inc02 .inner .list_box ul li{width:100%}
#inc02 .tit_ko{padding:30px 15px 30px 15px;text-align:center;word-break:keep-all}
#inc02 .tit_ko h2{padding-bottom:0;font-size:30px}
#inc02 .inner .list_box ul li .more{padding:20px 0 5px 0}
#inc02 .inner .list_box ul li a{padding:30px 20px;word-break: keep-all;}
#inc02 .inner .list_box ul li .icon{width:60px;height:60px;line-height:60px;background-size:cover}
#inc02 .inner .list_box ul li:hover:nth-child(1) .icon{background-size:cover}
#inc02 .inner .list_box ul li:hover:nth-child(4) .icon{background-size:cover}
#inc02 .inner .list_box ul li:hover:nth-child(3) .icon{background-size:cover}
#inc02 .inner .list_box ul li p{font-size:18px}
#inc02 .inner .list_box ul li:hover:nth-child(2) .icon{background-size:cover}
}
@media (max-width:480px){
#inc02 .tit_ko h2{font-size:22px}
#inc02 .inner .list_box ul li{font-size:14px}
#inc02 .inner .list_box ul li .icon{margin: 0 auto 20px}
}
@media (max-width:380px){
#inc02 .tit_ko{padding:30px 10px 30px 10px}
#inc02 .inner .list_box ul{grid-template-columns:repeat(1, 1fr)}
#inc02 .inner .list_box ul li a{border-bottom:1px dashed #e1e1e1}
}
/* 반응형 [e] */