@charset "utf-8";

#inc02{overflow:hidden;background-color:#111;color:#fff}
#inc02 .group-title{text-align:center}
#inc02 .sc-product .group-title h3{padding-bottom:130px !important}

/* Product */
#inc02 .group-cont{display:flex;border:solid #292929;border-width:1px 0 1px 0}
#inc02 .group-cont > *{flex:1;height:954px}
#inc02 .group-cont .link-product{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:190px 0 135px;text-align:center}
#inc02 .group-cont .link-product:first-child{border-right:1px solid #292929}
#inc02 .group-cont .link-product .thumb-box{display:flex;max-width:510px;height:354px}
#inc02 .group-cont .link-product .thumb-img{width:100%;height:100%;object-fit:cover}
#inc02 .group-cont .link-product .txt-box{position:absolute;bottom:135px;z-index:1;display:flex;flex-direction:column;align-items:center}
#inc02 .group-cont .link-product .en-title{padding-bottom:20px;font-family:var(--e-font);font-size:16px;color:var(--primary);font-weight:700;text-transform:uppercase}
#inc02 .group-cont .link-product h4{padding-bottom:26px;font-size:45px;font-weight:700;line-height:100%;color:#fff}
#inc02 .group-cont .link-product .comment{font-size:20px;font-weight:600;line-height:1.3;color:#fff}
#inc02 .group-cont .link-product .info{display:flex;flex-direction:column;align-items:center;height:0;overflow:hidden;transition:height 0.2s}
#inc02 .group-cont .link-product .desc{padding:35px 0 40px;font-size:16px;line-height:1.6;color:var(--gray-font);white-space:pre-line}
#inc02 .group-cont .link-product .btn--l{width:214px;height:60px;border:2px solid var(--primary);color:var(--primary);font-size:17px;font-weight:700;transition:background-color 0.2s, color 0.2s}

#inc02 .group-cont .link-product .bg{position:absolute;inset:0%;opacity:0;visibility:hidden;transition:all 0.3s}
#inc02 .group-cont .link-product .bg::before{position:absolute;content:"";inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.6)}
#inc02 .group-cont .link-product .bg img{width:100%;height:100%;object-fit:cover;object-position:left} 
#inc02 .group-cont .link-product:last-child .bg img{object-position:center}

@media (hover:hover){
#inc02 .group-cont .link-product:hover .desc{display:block}
#inc02 .group-cont .link-product:hover .btn--l{display:flex}
#inc02 .group-cont .link-product:hover .info{height:auto}
#inc02 .group-cont .link-product:hover .txt-box{bottom:50%;transform:translateY(50%)}
#inc02 .group-cont .link-product:hover .bg{opacity:1;visibility:visible}
#inc02 .group-cont .link-product .btn--l:hover{background-color:var(--primary);color:#fff} 
}

/* 라인업 (swiper) */
#inc02 .sc-series{padding:280px 0 238px;background-image:url(./img/inc02_series_bg.png);background-repeat:no-repeat;background-position:center top 70px;background-size:cover}
#inc02 .sc-series .cont-wrap{display:flex;align-items:center;margin-left:max(20px, calc((100% - var(--main-size)) / 2))}
#inc02 .sc-series .group-title{width:580px;text-align:left}
#inc02 .sc-series .group-title h3{font-size:40px}
#inc02 .sc-series .group-title .swiper-control{display:flex;align-items:center;gap:45px;padding-bottom:70px}
#inc02 .sc-series .group-title .swiper-control button{all:unset;cursor:pointer}
#inc02 .sc-series .group-title .swiper-pager{width:auto;font-family:var(--e-font);font-size:17px;font-weight:700}

#inc02 .sc-series .swiper-container{flex:1;width:100%}
#inc02 .sc-series .swiper-slide{position:relative;width:397px;height:538px;border-radius:10px;overflow:hidden}
#inc02 .sc-series .swiper-slide a{position:relative;display:flex;width:100%;height:100%;overflow:hidden}
#inc02 .sc-series .swiper-slide .img_cont{width:100%;height:100%}
#inc02 .sc-series .swiper-slide .img_cont img{width:100%;height:100%;object-fit:cover;object-position:center}
#inc02 .sc-series .swiper-slide .txt{position:absolute;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;width:100%;height:100%;padding:40px 35px;color:#fff;transform:translateY(100%);background:linear-gradient(to top, rgba(255, 92, 0, 0.85) 10%,  rgba(255,92,0,0) 65%);transition:transform 0.4s}
#inc02 .sc-series .swiper-slide h4{font-size:25px;font-weight:700;line-height:1.16}
#inc02 .sc-series .swiper-slide p.desc{font-size:16px;line-height:1.6;font-weight:500;white-space:pre-line}

@media(hover:hover) and (pointer:fine){
#inc02 .sc-series .swiper-slide:hover .txt{transform:translateY(0)}
}

/* 반응형 [s] */
@media (max-width:1700px){
#inc02 .sc-series .swiper-slide p.desc{white-space:normal}
}
@media (max-width:1600px){
#inc02 .sc-product .group-title h3{padding-bottom:100px !important}
#inc02 .group-cont > *{height:740px}
#inc02 .group-cont .link-product{padding:100px 0}
#inc02 .group-cont .link-product .thumb-box{height:300px}
#inc02 .group-cont .link-product .txt-box{bottom:100px}
#inc02 .group-cont .link-product .en-title{padding-bottom:16px;font-size:16px}
#inc02 .group-cont .link-product h4{padding-bottom:22px;font-size:40px}
#inc02 .group-cont .link-product .desc{padding:30px 0 35px}
#inc02 .group-cont .link-product .btn--l{font-size:16px}
#inc02 .sc-series{padding:200px 0}
#inc02 .sc-series .group-title{width:440px}
#inc02 .sc-series .group-title h3{font-size:36px}
#inc02 .sc-series .group-title .swiper-control{gap:35px;padding-bottom:50px}
#inc02 .sc-series .swiper-slide{height:495px}
#inc02 .sc-series .swiper-slide .txt{gap:10px}
#inc02 .sc-series .swiper-slide h4{font-size:22px}
}
@media (max-width:1400px){
#inc02 .group-cont > *{height:670px}
#inc02 .group-cont .link-product .thumb-box{height:280px}
#inc02 .group-cont .link-product .en-title{padding-bottom:12px;font-size:16px}
#inc02 .group-cont .link-product h4{padding-bottom:18px;font-size:32px}
#inc02 .group-cont .link-product .comment{font-size:18px}
#inc02 .group-cont .link-product .desc{padding:22px 0 26px}
#inc02 .group-cont .link-product .btn--l{height:56px}
#inc02 .sc-series{padding:120px 0}
#inc02 .sc-series .group-title h3{font-size:32px}
#inc02 .sc-series .group-title{display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:40px}
#inc02 .sc-series .group-title h3{white-space:normal;text-align:center}
#inc02 .sc-series .group-title .swiper-control{display:none}
#inc02 .sc-series .swiper-slide{height:420px}
#inc02 .sc-series .swiper-slide .txt{gap:6px;padding:30px 25px}
#inc02 .sc-series .swiper-slide h4{font-size:20px}
#inc02 .sc-series .swiper-slide p.desc{font-size:15px}
#inc02 .sc-series .cont-wrap{flex-direction:column;margin-left:0}
}

@media (max-width:1200px){
#inc02 .sc-product .group-title h3{padding-bottom:80px !important}
#inc02 .group-cont > *{height:610px}
#inc02 .group-cont .link-product .thumb-box{height:240px}
#inc02 .group-cont .link-product .en-title{padding-bottom:10px;font-size:14px}
#inc02 .group-cont .link-product h4{padding-bottom:18px;font-size:28px}
#inc02 .group-cont .link-product .comment{font-size:17px}
#inc02 .group-cont .link-product .desc{padding:16px 0 20px}
#inc02 .group-cont .link-product .btn--l{width:200px;height:52px;font-size:15px}
#inc02 .sc-series{padding:100px 0}
#inc02 .sc-series .swiper-slide{height:410px}
}
@media (max-width:1024px){
#inc02 .group-cont > *{height:560px}
#inc02 .group-cont .link-product{padding:80px 0}
#inc02 .group-cont .link-product .thumb-box{height:200px}
#inc02 .group-cont .link-product .txt-box{bottom:80px;padding:0 20px}
#inc02 .group-cont .link-product h4{padding-bottom:15px}
#inc02 .group-cont .link-product .comment{font-size:16px;white-space:pre-line}
#inc02 .group-cont .link-product .desc{padding:12px 0 16px;font-size:15px;white-space:normal}
#inc02 .group-cont .link-product .btn--l{width:170px;height:48px;font-size:14px}
#inc02 .sc-series{padding:80px 0}
#inc02 .sc-series .group-title{padding-bottom:30px}
#inc02 .sc-series .group-title h3{font-size:28px}
#inc02 .sc-series .swiper-slide{height:350px}
#inc02 .sc-series .swiper-slide h4{font-size:18px}
#inc02 .sc-series .swiper-slide p.desc{line-height:1.5}
#inc02 .sc-series .swiper-slide-active .txt{transform:translateY(0)}
}
@media (max-width:768px){
#inc02 .sc-product .group-title h3{padding-bottom:60px !important}
#inc02 .group-cont{flex-direction:column}
#inc02 .group-cont > *{flex:none;height:auto}
#inc02 .group-cont .link-product{gap:34px;padding:60px 0}
#inc02 .group-cont .link-product:first-child{border-right:none;border-bottom:1px solid #292929}
#inc02 .group-cont .link-product .thumb-box{height:180px}
#inc02 .group-cont .link-product .txt-box{bottom:60px}
#inc02 .group-cont .link-product h4{font-size:26px}
#inc02 .group-cont .link-product .comment{font-size:15px}
#inc02 .group-cont .link-product .desc{font-size:14px;white-space:pre-line}
#inc02 .group-cont .link-product .thumb-img{object-fit:contain}
#inc02 .group-cont .link-product .txt-box{position:static;transform:none}
#inc02 .group-cont .link-product:hover .txt-box{transform:none}
#inc02 .group-cont .link-product .info{height:auto}
#inc02 .group-cont .link-product:hover .bg{display:none}
#inc02 .group-cont .link-product:hover .btn--l{background-color:var(--primary);color:#fff}
#inc02 .sc-series{padding:60px 0}
#inc02 .sc-series .group-title h3{font-size:26px}
}
@media (max-width:480px){
#inc02 .sc-product .group-title h3{padding-bottom:40px !important}
#inc02 .group-cont .link-product .thumb-box{height:160px}
#inc02 .group-cont .link-product .en-title{padding-bottom:8px}
#inc02 .group-cont .link-product h4{padding-bottom:10px;font-size:22px}
#inc02 .group-cont .link-product .desc{white-space:normal}
#inc02 .group-cont .link-product .btn--l{width:164px;height:45px}
#inc02 .sc-series .group-title{padding-bottom:25px}
#inc02 .sc-series .group-title h3{font-size:22px}
#inc02 .sc-series .swiper-slide .txt{gap:4px}
#inc02 .sc-series .swiper-slide h4{font-size:17px}
#inc02 .sc-series .swiper-slide p.desc{font-size:14px}
}
/* 반응형 [e] */