@charset "utf-8";

#inc02{padding:100px 0}
#inc02 *{word-break:keep-all}
#inc02 .tit{padding:0 20px}
/* swiper */
#inc02 .lawyer.swiper-container{height:clamp(400px, 30vw,585px)}
#inc02 ul{align-items:flex-end}
#inc02 .lawyer .item a{overflow:hidden;position:relative;display:flex;align-items:flex-end;height:100%;border-radius:13px}
#inc02 .img_wrap{display:flex;justify-content:center;align-items:flex-end;width:100%;height:100%}
#inc02 .img{width:75%;transition:all .3s}
#inc02 .lawyer .item.on .img{width:100%;height:100%}
#inc02 .lawyer .item.on .cont_tit{opacity:1}
#inc02 .lawyer .item.on a:after{opacity:1;width:100%}
#inc02 .img img{overflow:hidden;width:100%;height:100%;object-fit:cover;border-radius:13px}
#inc02 .cont_tit{position:absolute;bottom:0;left:0;z-index:10;width:100%;padding:0 30px 50px;text-align:center;opacity:0;transition:all .3s}
#inc02 .lawyer .item a:after{opacity:0;position:absolute;content:'';bottom:0;left:0;width:75%;height:100%;background:linear-gradient(180deg, rgba(255,255,255,0), #0d1f44);transition:all .35s}
#inc02 .cont_tit .type{font-size:18px;font-weight:700;color:rgba(255,255,255,.5)}
#inc02 .cont_tit h3{font-size:30px;font-weight:700;color:#fff}
#inc02 .cont_tit ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px;color:rgba(255,255,255,.5)}
#inc02 .cont_tit ul li{line-height:1.3}
#inc02 .roll{position:absolute;top:0;white-space:nowrap;font-size:80px;font-weight:700;color:rgba(0,0,0,.05);text-transform:uppercase;font-family:var(--e-font);animation:scroll-left 22s linear infinite}
#inc02 .roll span{margin:0 15px}
@keyframes scroll-left{0% {transform:translateX(0%)}100% {transform:translateX(-1970px)}}

#inc02 .empty{display:block;width:100%;text-align:center}

/* 컨트롤 */
#inc02 .pager_box{max-width:453px;width:100%;margin:0 auto}
#inc02 .controls{position:relative;display:flex;align-items:center;width:max-content;gap:25px;margin:30px auto}
#inc02 .controls div{display:flex;align-items:center}
#inc02 .controls .pager{display:flex;align-items:center;justify-content:space-between;width:220px;font-size:0}
#inc02 .controls .pager span{position:relative;font-size:14px;font-weight:600;color:var(--primary)}
#inc02 .controls .pager span+span{color:#aaa}
#inc02 .controls p{display:flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:50px;color:#aaa;cursor:pointer;background:#fff;transition:all .3s}
#inc02 .controls p:hover{color:#111}
#inc02 .main_timeline{position:absolute;width:88px;height:auto;top:9px;left:35px;margin-right:12px}
#inc02 .main_timeline span{display:none;position:relative;width:100%;height:2px;border-radius:0;background:#aaa;opacity:1}
#inc02 .main_timeline span.on{display:block}
#inc02 .main_timeline span:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}
#inc02 .main_timeline span.on:before{background:#fff;animation:progressbar 4s linear}
@keyframes progressbar{0%{width:0}to{width:100%}}

/* progress-bar */
.swiper-progress-bar{width:160px;height:1px;position:absolute;left:50%;top:50%;z-index:9999;transform:translateX(-50%)}
.swiper-progress-bar .slide_progress-bar{overflow:hidden;position:absolute;height:3px;border-radius:50px;background:#aaa;width:160px;clear:both;opacity:0;left:0;right:0}
.swiper-progress-bar .slide_progress-bar:after{position:absolute;top:0;left:0;background:var(--primary);height:100%;width:0;content:""}
.swiper-progress-bar.active .slide_progress-bar{opacity:1}
.swiper-progress-bar.animate .slide_progress-bar:after{width:120%;transition:width 3.8s linear;transition-delay:unset}

#inc02 .pager_box ul{display:grid;grid-template-columns:repeat(2,1fr);text-align:center;gap:10px}
#inc02 .pager_box ul a{display:inline-block;width:100%;padding:15px 0;border-radius:5px;font-size:16px;font-weight:700;color:#fff;background:#9ca3af;transition:all .3s}
#inc02 .pager_box ul a:hover{background:var(--primary)}
#inc02 .bg{width:100%;height:580px;margin-top:-400px;background:url('./img/bg.jpg');background-size:cover;background-position:right center}

@media (max-width:1500px){
#inc02 .cont_tit h3{font-size:clamp(22px,1.6vw,24px)}
#inc02 .cont_tit .type{font-size:14px}
#inc02 .cont_tit{padding:0 24px 30px;text-align:left}
#inc02 .cont_tit ul{grid-template-columns:repeat(1,1fr);gap:6px;margin-top:10px;font-size:14px}
#inc02 .lawyer.swiper-container{height:clamp(400px, 33.33vw, 500px)}
#inc02 .lawyer .item a:after{background:linear-gradient(180deg, rgba(255,255,255,0) 12%, #0d1f44 100%)}
}
@media (max-width:1024px){
#inc02{padding:0 0 100px}
#inc02 .lawyer.swiper-container{height:clamp(400px, 48.83vw, 500px)}
#inc02 .bg{height:500px}
}
@media (max-width:768px){
#inc02{padding:0px 0 80px}
#inc02 .tit{padding:0 15px}
#inc02 .lawyer.swiper-container{height:clamp(400px, 62.5vw, 480px)}
#inc02 .controls p{width:46px;height:46px}
#inc02 .controls p span{font-size:22px}
#inc02 .controls .pager{width:190px}
.swiper-progress-bar, .swiper-progress-bar .slide_progress-bar{width:130px}
#inc02 .pager_box{padding:0 15px}
#inc02 .pager_box ul a{font-size:15px;padding:12px 0}
#inc02 .bg{height:480px}
}
@media (max-width:568px){
#inc02 .lawyer.swiper-container{margin:0 15px;height:510px}
#inc02 .img{width:100%;height:100%}
#inc02 .img img{object-position:top}
#inc02 .controls p{width:40px;height:40px}
#inc02 .controls p span{font-size:20px}
#inc02 .roll{display:none}
}
@media (max-width:390px){
#inc02 .pager_box ul a{padding:10px 0;font-size:14px}
#inc02 .controls .pager, .swiper-progress-bar, .swiper-progress-bar .slide_progress-bar{display:none}
}