@charset "utf-8";

#inc03{position:relative;padding:170px 20px 150px;background-color:#111}
#inc03::before{z-index:1;position:absolute;content:'SAMPLE ROBOTICS';top:42%;left:50%;transform:translate(-50%, -50%);width:100%;text-align:center;text-transform:uppercase;font-family:var(--e-font);font-size:150px;font-weight:700;background-clip:text;color:transparent;-webkit-text-stroke:1px var(--primary)}
#inc03::after{z-index:0;position:absolute;content:'';top:52%;left:50%;transform:translate(-50%, -50%);max-width:1230px;width:100%;height:1230px;background-image:url(./img/inc03_bg.png);background-repeat:no-repeat;background-size:contain;background-position:center;pointer-events:none}
#inc03 .inner{z-index:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
#inc03 .group-title{padding-bottom:175px}
#inc03 .group-title h3{color:#fff}
#inc03 .tab-menu{display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer}
#inc03 .tab-item{display:flex;align-items:center;justify-content:center;height:50px;padding:0 28px;font-size:17px;font-weight:700;color:var(--primary);border-radius:100px;background-color:rgba(255,92,0,0.1)}
#inc03 .tab-item.on{background-color:var(--primary);color:#fff}

#inc03 .tab-cont{position:relative;display:none;z-index:1;width:100%}
#inc03 .tab-cont ul{gap:54px}
#inc03 .tab-cont ul li{flex:1;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;border-radius:15px;overflow:hidden}
#inc03 .tab-cont ul li a{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;width:100%;height:100%;text-align:left}
#inc03 .tab-cont .img_cont{width:100%;height:285px;overflow:hidden}
#inc03 .tab-cont .img_cont img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
#inc03 .tab-cont ul li a:hover .img_cont img{transform:scale(1.1)}
#inc03 .tab-cont .txt{display:flex;flex-direction:column;padding:40px}
#inc03 .tab-cont .txt .cate{padding-bottom:20px;font-size:15px;font-weight:700;color:var(--primary)}
#inc03 .tab-cont .txt h4{padding-bottom:12px;font-size:22px;font-weight:700;line-height:1.45;color:#111}
#inc03 .tab-cont .txt p.desc{font-size:16px;line-height:1.6;color:#777}
#inc03 .tab-cont.view{display:flex}

/* 반응형 [s] */
@media (max-width:1600px){
#inc03{padding:35px 20px 150px}
#inc03::after{top:55%;height:100%}
#inc03::before{top:30%;font-size:130px}
#inc03 .group-title{padding-bottom:110px}
#inc03 .tab-cont ul{gap:30px}
}
@media (max-width:1400px){
#inc03::after{top:52%}
#inc03::before{top:30%;font-size:110px}
#inc03 .group-title{padding-bottom:90px}
#inc03 .tab-item{height:40px;padding:0 22px;font-size:16px}
#inc03 .tab-cont ul{gap:20px}
#inc03 .tab-cont .txt{padding:30px}
#inc03 .tab-cont .txt .cate{padding-bottom:6px}
#inc03 .tab-cont .txt h4{padding-bottom:6px;font-size:18px}
#inc03 .tab-cont .txt p.desc{font-size:15px}
#inc03 .tab-cont .img_cont{height:250px}
}
@media (max-width:1200px){
#inc03::before{font-size:90px}
#inc03 .group-title{padding-bottom:72px}
#inc03 .tab-item{height:36px;font-size:15px}
#inc03 .tab-cont ul{gap:14px}
#inc03 .tab-cont .txt{padding:24px}
#inc03 .tab-cont .txt .cate{padding-bottom:6px}
#inc03 .tab-cont .txt h4{padding-bottom:4px;font-size:17px}
#inc03 .tab-cont .img_cont{height:215px}
}
@media (max-width:1024px){
#inc03{padding:100px 20px 150px}
#inc03::before{top:34%;font-size:72px}
#inc03 .group-title{padding-bottom:65px}
#inc03 .tab-cont .swiper-container{width:100%}
#inc03 .tab-cont ul{gap:0}
#inc03 .tab-cont ul li{flex:unset;flex-shrink:0;width:100%;border-radius:10px}
#inc03 .tab-cont .img_cont{height:200px}
#inc03 .tab-cont .txt h4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#inc03 .tab-cont .txt p.desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
@media (max-width:768px){
#inc03{padding:40px 20px 80px}
#inc03::before{top:32%;font-size:48px}
#inc03 .group-title{padding-bottom:60px}
#inc03 .tab-cont ul li{border-radius:5px}
#inc03 .tab-cont .txt{padding:20px}
#inc03 .tab-cont .txt .cate{font-size:14px}
#inc03 .tab-cont .txt h4{-webkit-line-clamp:1;font-size:16px;word-break:normal}
#inc03 .tab-cont .txt p.desc{font-size:14px;word-break:break-all}
}
@media (max-width:600px){
#inc03{padding:40px 0 80px}
#inc03::before{display:none}
#inc03::after{top:50%}
#inc03 .group-title{padding:0 20px 40px}
#inc03 .tab-item{padding:0 20px;font-size:14px}
#inc03 .tab-cont .img_cont{height:240px}
}
/* 반응형 [e] */