@charset "utf-8";

#inc01{--radius:13px;padding-bottom: 145px;}
#inc01 .inner{display: flex;flex-direction: column;gap: 22px;margin-top: -210px !important;}
#inc01 .area-linkbox{display: flex;gap: 14px;padding: 32px 42px;border-radius:var(--radius);background-color:rgba(240,240,240,.5)}
#inc01 .area-linkbox > ul{display: grid;grid-template-columns: repeat(2, 1fr);gap: 22px 18px;}
#inc01 .area-linkbox > ul > li{max-width:365px;width: 100%;aspect-ratio: 1;border-radius: var(--radius);overflow:hidden;background-color: #fff;}
#inc01 .area-linkbox ul li.contact{display: flex;flex-direction: column;align-items: center;justify-content: space-between;gap: 7px;padding: 55px 20px 0;background: linear-gradient(to left,var(--point) 0%, var(--primary) 100%);background: linear-gradient(to left,var(--point) 0%, var(--primary) 100%);}
#inc01 .area-linkbox ul li.contact .text-box{display: flex;flex-direction: column;align-items: center;text-align: center;}
#inc01 .area-linkbox ul li.contact .tit{margin-bottom: 17px;padding: 5px 12px;font-size: 13px;font-weight: 800;color: var(--point);background-color: #fff;border-radius: 100px;}
#inc01 .area-linkbox ul li.contact .tel{padding-bottom: 17px;font-size: 30px;font-weight: 700;line-height: 1;color: #fff;}
#inc01 .area-linkbox ul li.contact dl{display: flex;align-items: center;gap: 7px;font-size: 17px;color: rgba(255,255,255,0.7);line-height: 1.3;}
#inc01 .area-linkbox ul li.contact dt{font-weight: 900;}
#inc01 .area-linkbox ul li.contact dd{}
#inc01 .area-linkbox ul li.contact img{max-width:228px;width: 100%;}

#inc01 .area-linkbox ul li .link{display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 100%;padding: 34px 35px 36px;}
#inc01 .area-linkbox ul li .link .top-box{display: flex;align-items: center;justify-content: space-between;}
#inc01 .area-linkbox ul li .link .top-box .num{font-size: 30px;font-weight: 700;color:#ddd;transition: color 0.2s;}
#inc01 .area-linkbox ul li .link .top-box .ic-arrow{display: flex;align-items: center;justify-content: center;width: 48px;aspect-ratio: 1;border-radius: 100px;background-color: #f5f5f5;transition: background-color 0.2s;}
#inc01 .area-linkbox ul li .link .top-box .ic-arrow svg{flex-shrink: 0;stroke: rgba(0,0,0,0.5);width: 16px;height: 16px;stroke-width: 2.5px;transition: all 0.2s;}
#inc01 .area-linkbox ul li .link h2{font-size: 27px;font-weight: 700;color: #000;white-space: pre-line;word-break: keep-all;}
#inc01 .area-linkbox ul li .link .simbol-box{display: flex;align-items: center;padding-bottom: 27px;}
#inc01 .area-linkbox ul li .link .simbol-box li{position: relative;display: flex;align-items: center;}
#inc01 .area-linkbox ul li .link .simbol-box li:first-child::after{content:'';width: 1px;height: 44px;margin: 0 11px;background-color: rgba(0,0,0,0.1);}
#inc01 .area-linkbox ul li .link .simbol-box li img{max-width:81px;width: 100%;}
#inc01 .area-linkbox ul li.img-box{width: 100%;height: 100%;overflow:hidden}
#inc01 .area-linkbox ul li.img-box img{width: 100%;height: 100%;object-fit: cover;transition:transform 0.4s}
#inc01 .area-linkbox ul li.img-box .link-map:hover img{transform: scale(1.07);}

#inc01 .area-linkbox ul li .link:hover .top-box .num{color:#000}
#inc01 .area-linkbox ul li .link:hover .top-box .ic-arrow{background-color: var(--primary);}
#inc01 .area-linkbox ul li .link:hover .top-box .ic-arrow svg{stroke:#fff;transform: rotate(-45deg);}
/* #inc01 .area-linkbox ul li.img-box:hover img{} */


/* 게시판 박스 */
#inc01 .area-board{display: grid;grid-template-columns: repeat(2,1fr);gap: 18px;}
#inc01 .area-board .board-item{padding: 45px 42px;border: 1px solid #f2f2f2;border-radius: var(--radius);}
#inc01 .area-board .board-item .tit{display: flex;align-items: center;justify-content: space-between;padding-bottom: 42px;}
#inc01 .area-board .board-item .tit h2{font-size: 25px;font-weight: 700;color: #000;}
#inc01 .area-board .board-item .tit .link-more{display: flex;align-items: center;justify-content: center;max-width: 80px;width: 100%;height: 29px;border-radius: 50px;background-color: #f5f5f5;font-size: 14px;font-weight: 700;color: #aaa;transition:all 0.2s}
#inc01 .area-board .board-item .tit .link-more span{display: flex;align-items: center;justify-content: center;gap: 4px;transform: translateX(3px);}
#inc01 .area-board .board-item .tit .link-more svg{flex-shrink: 0;width: 16px;height: 16px;}
#inc01 .area-board .board-item ul{display: flex;flex-direction: column;gap: 18px;}
#inc01 .area-board .board-item ul li{}
#inc01 .area-board .board-item ul li a{}
#inc01 .area-board .board-item ul li a .text-box{display: flex;align-items: center;justify-content: space-between;gap: 10px;}
#inc01 .area-board .board-item ul li a .text-box h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;position: relative;font-size: 17px;font-weight: 500;color: #000;padding-left: 20px;transition:color 0.2s}
#inc01 .area-board .board-item ul li a .text-box h3::before{position: absolute;content:'';top: 7px;left: 0;width: 4px;aspect-ratio: 1;border-radius:30px;background-color: #000;}
#inc01 .area-board .board-item ul li a .text-box .date{flex-shrink:0;font-size: 14px;font-weight: 500;color: #aaa;}

#inc01 .area-board .workshop-box{border-color:var(--primary);box-shadow:0 0 10px rgba(0,200,255,0.25);}
#inc01 .area-board .workshop-box .tit h2{color: var(--primary);}
#inc01 .area-board .workshop-box .status{flex-shrink:0;display: flex;align-items: center;justify-content: center;width: 77px;height: 26px;font-size: 14px;font-weight: 700;border-radius:5px}
#inc01 .area-board .workshop-box .status.ready{color: var(--primary);background-color:rgba(0,200,255,0.1);}
#inc01 .area-board .workshop-box .status.ing{color:#fff;background-color:var(--primary);}
#inc01 .area-board .workshop-box .status.done{color: #fff;background-color:#555}

#inc01 .area-board .board-item .tit .link-more:hover{background-color: #111;color:#fff}
#inc01 .area-board .board-item ul li a:hover .text-box h3{color:#555}

/* 반응형 [s] */
@media (max-width:1700px){
    #inc01{padding: 0 20px 145px;}
    #inc01 .area-linkbox ul li .link h2{font-size: 25px;}
    #inc01 .area-linkbox ul li.contact img{max-width:195px}
    #inc01 .area-linkbox ul li.contact .tel{font-size: 28px;}
    #inc01 .area-linkbox ul li.contact dl{font-size: 16px;}
}
@media (max-width:1600px){
    #inc01 .inner{margin-top: -140px !important;}
    #inc01 .area-linkbox{padding: 32px;}
    #inc01 .area-linkbox ul li .link .simbol-box{padding-bottom: 20px;}
    #inc01 .area-linkbox ul li .link .simbol-box li img{max-width:70px}
    #inc01 .area-linkbox ul li .link .simbol-box li:first-child::after{height: 36px;}

}
@media (max-width:1500px){
    #inc01{padding: 0 20px 100px;}
    #inc01 .area-linkbox ul li .link{padding: 26px 30px 36px;}
    #inc01 .area-linkbox ul li .link .simbol-box li img{max-width:60px}
    #inc01 .area-linkbox ul li .link .simbol-box li:first-child::after{height: 25px;}

    #inc01 .area-board .board-item .tit{padding-bottom: 32px;}
    #inc01 .area-board .board-item .tit h2{font-size: 22px;}
    #inc01 .area-board .board-item ul li a .text-box h3{font-size: 16px;}
}
@media (max-width:1400px){
    #inc01 .area-linkbox ul li .link{padding: 22px 25px 30px;}
    #inc01 .area-linkbox ul li .link h2{font-size: 22px;}
    #inc01 .area-linkbox ul li .link .simbol-box{padding-bottom: 14px;}
    #inc01 .area-linkbox ul li .link .simbol-box li img{max-width:50px}
    #inc01 .area-linkbox ul li .link .top-box .num{font-size: 26px;}
    #inc01 .area-linkbox ul li .link .top-box .ic-arrow{width: 44px;}
    #inc01 .area-linkbox ul li.contact .tit{margin-bottom: 12px;font-size: 11px;}
    #inc01 .area-linkbox ul li.contact .tel{padding-bottom: 12px;font-size: 24px;}
    #inc01 .area-linkbox ul li.contact dl{font-size: 15px;}
    #inc01 .area-linkbox ul li.contact img{max-width:160px}

    #inc01 .area-board .board-item{padding: 40px;}
    #inc01 .area-board .board-item .tit{padding-bottom: 26px;}
    #inc01 .area-board .board-item .tit h2{font-size: 20px;}
    #inc01 .area-board .board-item ul li a .text-box h3{font-size: 15px;}
    #inc01 .area-board .workshop-box .status{font-size: 13px;}
    #inc01 .area-board .board-item ul li a .text-box .date{font-size: 13px;}
    #inc01 .area-board .board-item .tit .link-more{max-width:76px;font-size: 13px;}
}
@media (max-width:1200px){
    #inc01 .area-linkbox{padding: 20px;}
    #inc01 .area-linkbox, #inc01 .area-linkbox > ul{gap: 14px;}
    #inc01 .area-linkbox ul li .link{padding: 15px 20px 22px;}
    #inc01 .area-linkbox ul li .link h2{font-size: 20px;}
    #inc01 .area-linkbox ul li .link .top-box .num{font-size: 24px;}
    #inc01 .area-linkbox ul li .link .top-box .ic-arrow{width: 40px;}
    #inc01 .area-linkbox ul li.contact img{max-width:110px}
}
@media (max-width:1120px){
    #inc01{--radius:10px}
    #inc01 .area-linkbox{flex-direction: column;}
    #inc01 .area-linkbox > ul > li{max-width:none;aspect-ratio: unset;height: 230px !important;}
    #inc01 .area-linkbox ul li .link h2{font-size: 22px;}
    #inc01 .area-linkbox ul li.about, #inc01 .area-linkbox ul li.workshop{order:2}
    #inc01 .area-linkbox ul li.learning, #inc01 .area-linkbox ul li.ibec{order:3}
    #inc01 .area-linkbox ul:first-child li.img-box, #inc01 .area-linkbox ul li.map-box{order:4}
    #inc01 .area-linkbox ul li.contact{padding: 40px 20px 0;}
    #inc01 .area-linkbox ul li.contact img{max-width:100px}

    #inc01 .area-board{grid-template-columns: repeat(1,1fr);}
    #inc01 .area-board .board-item{padding: 35px;}
    #inc01 .area-board .workshop-box{order:-1}
    #inc01 .area-board .board-item .tit h2{font-size: 18px;}
    #inc01 .area-board .board-item ul{gap: 12px;}
}
@media (max-width:768px){
    #inc01 .area-linkbox ul li.contact{padding: 28px 20px 0;}
    #inc01 .area-linkbox ul li.contact .tit{padding: 4px 12px;margin-bottom: 10px;}
    #inc01 .area-linkbox ul li.contact .tel{padding-bottom: 10px;font-size: 20px;}
    #inc01 .area-linkbox ul li.contact dl{font-size: 13px;}
    #inc01 .area-linkbox > ul > li{height: 170px !important;}
    #inc01 .area-linkbox ul li.contact img{max-width:90px}
    #inc01 .area-linkbox ul li .link h2{font-size: 18px;}
    #inc01 .area-linkbox ul li .link .simbol-box{padding-bottom: 10px;}
    #inc01 .area-linkbox ul li .link .simbol-box li img{max-width:38px}
    #inc01 .area-linkbox ul li .link .top-box .ic-arrow{width: 36px;}
    #inc01 .area-linkbox ul li .link .top-box .ic-arrow svg{width: 14px;height: 14px;}
    #inc01 .area-linkbox ul li .link .top-box .num{font-size: 22px;}

    #inc01 .area-board .board-item{padding: 30px;}
    #inc01 .area-board .board-item .tit h2{font-size: 17px;}
}
@media (max-width:600px){
    #inc01 .area-linkbox > ul{grid-template-columns: repeat(1,1fr);}
    #inc01 .area-linkbox ul:first-child li.img-box, #inc01 .area-linkbox ul li.map-box{order:3}
    #inc01 .area-linkbox ul li.learning, #inc01 .area-linkbox ul li.ibec{order:4}
    #inc01 .area-linkbox ul li .link h2{white-space:normal}

    #inc01 .area-board .board-item .tit{padding-bottom: 16px;}
    #inc01 .area-board .board-item ul li a .text-box h3{font-size: 14px;}

}
@media (max-width:480px){
    #inc01{padding: 0 20px 40px;}
    #inc01 .area-linkbox ul li.contact .tel{padding-bottom: 8px;font-size: 18px;}
    #inc01 .area-linkbox ul li.contact img{max-width:108px}
    #inc01 .area-linkbox ul li .link .simbol-box li img{max-width:50px}

    #inc01 .area-board .workshop-box .status{width: 70px;}
    #inc01 .area-board .board-item{padding: 25px;}
    #inc01 .area-board .board-item ul li a .text-box h3{padding-left: 14px;}
    #inc01 .area-board .board-item ul li a .text-box .date, #inc01 .area-board .workshop-box .status{font-size: 12px;}
    #inc01 .area-board .board-item .tit h2{font-size: 16px;}
    #inc01 .area-board .board-item .tit .link-more{max-width:70px;font-size: 13px;}
    #inc01 .area-board .board-item .tit .link-more span{font-size: 12px;}
}
@media(max-width:390px){
    #inc01 .area-board .board-item ul li a .text-box .date{display: none;}
}
/* 반응형 [e] */