@charset "utf-8";


#inc04{padding-top:140px}
#inc04 .group-tit{padding-bottom:95px}

#inc04 .area-board{display:flex;justify-content:space-between;padding-bottom:170px}
#inc04 .area-board .bd-box{max-width:630px;width:100%}
#inc04 .area-board .bd-box .head{display:flex;align-items:center;justify-content:space-between;padding:0 18px 14px;border-bottom:1px solid #111}
#inc04 .area-board .bd-box .head h3{font-size:22px;font-weight:700;color:#222}
#inc04 .area-board .bd-box .head .link--more{display:flex;align-items:center;justify-content:center}
#inc04 .area-board .bd-box .head .link--more svg{stroke-width:1px;width:26px;height:26px;transition:transform 0.2s}
#inc04 .area-board .bd-box .article-list li{border-bottom:1px solid #e1e1e1}
#inc04 .area-board .bd-box .article-list li a{display:flex;align-items:flex-start;gap:12px;padding:35px 18px 50px;transition:background-color 0.2s}
#inc04 .area-board .bd-box .article-list li a .cate{display:flex;align-items:center;justify-content:center;max-width:52px;width:100%;height:26px;border:1px solid #e1e1e1;border-radius:100px;font-size:15px;font-weight:600;color:#999;transition:all 0.2s}
#inc04 .area-board .bd-box .article-list li a .cont{flex:1;width:100%}
#inc04 .area-board .bd-box .article-list li a .cont div{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px}
#inc04 .area-board .bd-box .article-list li a .cont div h4{flex:1;font-size:18px;font-weight:500;color:#222;transition:color 0.2s}
#inc04 .area-board .bd-box .article-list li a .cont div .date{font-family:"Poppins", sans-serif;font-size:15px;color:#999;transition:color 0.2s}
#inc04 .area-board .bd-box .article-list li a .cont p{font-size:16px;color:#888;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;transition:color 0.2s}

@media (hover:hover){
#inc04 .area-board .bd-box .article-list li a:hover .cate{color:#fff;border-color:var(--primary);background-color:var(--primary)}
#inc04 .area-board .bd-box .head .link--more:hover svg{transform:rotate(90deg)}
}
    
#inc04 .area-link{position:relative;background:linear-gradient(135deg,#1e82c8 0%, #2197ce 41%,#32aebd 52%,#42bdbe 100%)}
#inc04 .area-link .col-2{display:grid;grid-template-columns:repeat(2,1fr)}
#inc04 .area-link a{display:flex;align-items:center;justify-content:space-between;padding:85px 80px 80px 0}
#inc04 .area-link a .text-box{display:flex;flex-direction:column;gap:5px}
#inc04 .area-link a .text-box span{font-size:36px;font-weight:700;line-height:1.6;color:#fff}
#inc04 .area-link a .text-box ul{display:flex;gap:15px}
#inc04 .area-link a .text-box .desc{font-family:var(--e-font);font-size:16px;color:#fff}
#inc04 .area-link a .material-symbols-outlined{font-size:40px;color:#fff}

/* 반응형 [s] */
@media (max-width:1600px){
#inc04{padding-top:120px}
#inc04 .area-board{padding-bottom:130px}
#inc04 .group-tit{padding-bottom:70px}
#inc04 .area-link a .text-box span{font-size:32px}
#inc04 .area-link a:last-child{padding-right:0}
}
@media (max-width:1400px){
#inc04{padding-top:100px}
#inc04 .group-tit{padding:0 20px 70px;text-align:center}
#inc04 .area-board{gap:40px;padding:0 20px 115px}
#inc04 .area-board .bd-box .head h3{font-size:20px}
#inc04 .area-board .bd-box .article-list li a{padding:35px 18px 40px}
#inc04 .area-board .bd-box .article-list li a .cont div h4{font-size:17px}
#inc04 .area-board .bd-box .article-list li a .cont div .date{font-size:14px}
#inc04 .area-link{padding:0 20px}
}
@media (max-width:1200px){
#inc04{padding-top:80px}
#inc04 .group-tit{padding-bottom:55px}
#inc04 .area-board{padding:0 20px 100px}
#inc04 .area-board .bd-box .head h3{font-size:18px}
#inc04 .area-board .bd-box .article-list li a .cont div h4{font-size:16px}
#inc04 .area-board .bd-box .article-list li a .cate{font-size:14px}
#inc04 .area-board .bd-box .article-list li a .cont p{font-size:15px}
#inc04 .area-link a .text-box{gap:2px}
#inc04 .area-link a .text-box span{font-size:28px}
}
@media (max-width:1024px){
#inc04{padding-top:60px}
#inc04 .group-tit{padding-bottom:40px}
#inc04 .area-board{gap:20px;padding:0 20px 80px}
#inc04 .area-board .bd-box .article-list li a{flex-direction:column;padding:28px 18px 30px}
#inc04 .area-board .bd-box .article-list li a .cont div{padding-bottom:10px}
#inc04 .area-board .bd-box .article-list li a .cont div .date{display:none}
#inc04 .area-link a{flex-direction:column;gap:18px;padding:64px 0;text-align:center}
#inc04 .area-link a .text-box span{font-size:25px}
#inc04 .area-link a .material-symbols-outlined{font-size:36px}
}
@media(max-width:768px){
#inc04 .group-tit{padding-bottom:30px}
#inc04 .area-board{flex-direction:column;gap:34px}
#inc04 .area-board .bd-box{max-width:none}
#inc04 .area-board .bd-box .article-list li a{flex-direction:row;padding:24px 18px 26px}
#inc04 .area-link{padding:34px 20px;background:linear-gradient(to bottom,#1e82c8 0%, #2197ce 35%,#42bdbe 100%)}
#inc04 .area-link .col-2{grid-template-columns:repeat(1,1fr);gap:34px}
#inc04 .area-link a{flex-direction:row;gap:14px;padding:0;text-align:left}
#inc04 .area-link a .text-box span{font-size:22px}
#inc04 .area-link a .text-box .desc{font-size:15px}
#inc04 .area-link a .material-symbols-outlined{font-size:33px}



}
@media (max-width:480px){
#inc04 .area-board{gap:26px}
#inc04 .area-board .bd-box .head{padding:0 10px 12px}
#inc04 .area-board .bd-box .head h3{font-size:16px}
#inc04 .area-board .bd-box .head .link--more svg{width:22px;height:22px}
#inc04 .area-board .bd-box .article-list li a{flex-direction:column;padding:18px 10px 20px}
#inc04 .area-board .bd-box .article-list li a .cont div{padding-bottom:6px}
#inc04 .area-board .bd-box .article-list li a .cont div h4{font-size:15px}
#inc04 .area-board .bd-box .article-list li a .cont p{font-size:14px}
#inc04 .area-board .bd-box .article-list li a .cate{font-size:13px}
#inc04 .area-link a .text-box span{font-size:20px}
#inc04 .area-link a .text-box .desc{font-size:14px}
#inc04 .area-link a .material-symbols-outlined{font-size:33px}
}
@media (max-width:390px){
#inc04 .area-link a{flex-direction:column}
#inc04 .area-link a .text-box{text-align:center}
}
/* 반응형 [e] */