@charset "utf-8";

#inc02{padding:100px 0}
#inc02 *{word-break:keep-all}
#inc02 ul{align-items:flex-end}
#inc02 .lawyer .item a{overflow:hidden;position:relative;display:block;height:100%;border-radius:13px}
#inc02 .img_wrap{display:flex;justify-content:center;align-items:flex-end;height:60vh}
#inc02 .img{width:75%;transition:all .3s}
#inc02 .lawyer .item.on .img{width: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%;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)}
#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 .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{width:453px;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}