@charset "utf-8";

#inc03{position:relative;padding:200px 0 130px;margin-top:-200px;background:url(./img/bg.jpg) }
#inc03 .rt_txt{opacity:.2;position:absolute;top:45%;left:5%;z-index:1;font-size:16px;color:#fff;writing-mode:vertical-rl;font-family:var(--e-font)}
#inc03 .inner{display:flex;padding-left:calc((100% - 1420px) / 2);margin:200px 0 0}

#inc03 .tit_area{width:42%;padding-top:100px;font-size:18px;font-weight:500;color:rgba(255, 255, 255, .4)}
#inc03 .tit_area .stit{font-size:18px;color:#fff;font-family:var(--e-font)}
#inc03 .tit_area .tit{margin:10px 0 45px;font-size:46px;color:#fff;font-family:var(--e-font)}
#inc03 .tit_area .tit span{color:var(--primary)}

#inc03 .pager_wrap{position:relative;width:max-content;margin-top:110px}
#inc03 .pager{font-size:0}
#inc03 .pager span{font-size:18px;color:#fff;font-family:var(--e-font)}
#inc03 .pager span:before{content:"0"}
#inc03 .pager span+span{margin-left:200px}
#inc03 .timeline{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:70%}
#inc03 .timeline span{display:none;position:relative;width:100%;height:3px;border-radius:0;background:rgba(255,255,255,.2);opacity:1}
#inc03 .timeline span.on{display:block}
#inc03 .timeline span:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}
#inc03 .timeline span.on:before{background:#fff;animation:progressbar 3.5s linear}
@keyframes progressbar{0%{width:0}to{width:100%}}

#inc03 .inc03_slide{width:60%;padding-top:120px}
#inc03 ul li{overflow:hidden;position:relative;transition:margin .4s}
#inc03 ul li.swiper-slide-active{margin-top:-120px}
#inc03 ul li a{display:block;height:100%}
#inc03 ul li .thum{width:100%;height:100%;object-fit:cover;transition:all .25s}
#inc03 ul li .mask{opacity:.8;position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background:rgb(1,1,1);background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,1) 100%);transition:all .25s}
#inc03 ul li .txt{position:absolute;z-index:2;display:flex;justify-content:flex-end;flex-flow:column;width:100%;height:100%;padding:0 50px 100px 50px;font-weight:400;color:rgba(255, 255, 255, .6)}
#inc03 ul li .txt p{margin-bottom:30px;font-size:26px;font-weight:600;line-height:1.35;color:#fff}
#inc03 ul li span{overflow:hidden;display:flex;position:absolute;right:0;bottom:0;z-index:3;width:75px;height:75px;background:var(--primary)}
#inc03 ul li span img{position:relative;width:26px;margin:auto}

@media (hover:hover){
#inc03 ul li:hover .mask{opacity:.9}
#inc03 ul li:hover .thum{transform:scale(1.1)}
}

/* 반응형 [s] */
@media (max-width:1380px){
#inc03 .rt_txt{left:1%}
#inc03 .inner{margin:200px auto 0;width:90%}
#inc03 .tit_area{width:40%;font-size:17px}
#inc03 .tit_area .tit{margin:10px 0 35px;font-size:52px}
#inc03 .inc03_slide{width:60%}
#inc03 ul li .txt{padding:0 30px 80px 30px}
#inc03 ul li .txt p{margin-bottom:20px;font-size:24px}
#inc03 ul li span{width:70px;height:70px}
#inc03 ul li span img{width:24px}
}
@media (max-width:1280px){
#inc03 .tit_area{width:45%}
#inc03 .inc03_slide{width:55%}
#inc03 ul li .txt{padding:0 25px 70px 25px}
#inc03 ul li .txt p{margin-bottom:18px;font-size:22px}
#inc03 ul li span{width:60px;height:60px}
#inc03 ul li span img{width:21px}
}
@media (max-width:1024px){
#inc03{margin-top:0px;padding:130px 0}
#inc03 .rt_txt{display:none}
#inc03 .inner{flex-direction:column;margin:auto;width:95%}
#inc03 .tit_area{position:relative;padding-top:0px;width:100%;font-size:16px}
#inc03 .tit_area .stit{font-size:16px}
#inc03 .tit_area .tit{margin:5px 0 20px;font-size:38px}
#inc03 .pager_wrap{position:absolute;right:0px;bottom:0px;margin:0px}
#inc03 .timeline{width:60%}
#inc03 .pager_wrap{width:195px}
#inc03 .pager{display:flex;justify-content:space-between;width:100%}
#inc03 .pager span+span{margin:0px}
#inc03 .inc03_slide{margin-top:90px;padding-top:70px;width:100%}
#inc03 ul li.swiper-slide-active{margin-top:-60px}
#inc03 ul li .txt{padding:0 20px 70px 20px}
#inc03 ul li .txt p{margin-bottom:12px;font-size:18px}
#inc03 ul li span{width:55px;height:55px}
#inc03 ul li span img{width:20px}
#inc03 ul li .thum{height:390px}
}
@media (max-width:768px){
#inc03{padding:100px 0}
#inc03 .tit_area{font-size:15px}
#inc03 .tit_area .stit{font-size:15px}
#inc03 .tit_area .tit{margin:3px 0 14px;font-size:34px}
#inc03 .pager_wrap{width:165px}
#inc03 .pager span{font-size:16px}
#inc03 .inc03_slide{margin-top:70px}
#inc03 ul li .txt p{margin-bottom:10px;font-size:16px}
#inc03 ul li span{width:50px;height:50px}
#inc03 ul li span img{width:18px}
#inc03 ul li .thum{height:360px}
}
@media (max-width:580px){
#inc03{padding:80px 0}
#inc03 .tit_area{padding-bottom:95px;text-align:center}
#inc03 .pager_wrap{right:50%;transform:translateX(50%)}
#inc03 .tit_area .tit{font-size:32px}
}
@media (max-width:480px){
#inc03{padding:70px 0}
#inc03 .tit_area{font-size:14px}
#inc03 .tit_area .stit{font-size:14px}
#inc03 .tit_area .tit{margin:3px 0 12px;font-size:26px}
#inc03 .pager span{font-size:15px}
#inc03 .inc03_slide{padding-top:0px;margin:65px 0 30px}
#inc03 ul li.swiper-slide-active{margin-top:0px}
#inc03 ul li .txt{padding:0 20px 55px 20px}
#inc03 ul li .thum{height:330px}
#inc03 ul li span{width:48px;height:48px}
}
@media (max-width:380px){
#inc03{padding:60px 0}
#inc03 .tit_area .tit{margin:2px 0 8px;font-size:23px}
#inc03 .tit_area{font-size:13px}
#inc03 .pager_wrap{width:155px}
#inc03 .pager span{font-size:14px}
#inc03 .inc03_slide{margin:50px 0 30px}
#inc03 ul li .txt{padding:0 15px 50px 15px}
#inc03 ul li .txt p{margin-bottom:8px;font-size:15px}
#inc03 ul li span{width:46px;height:46px}
#inc03 ul li .thum{height:305px}
}
/* 반응형 [e] */