@charset "utf-8";

#inc02{position:relative;margin-top:200px;background:var(--bg-color) url("./img/inc02_bg.png") no-repeat left bottom/100%;overflow:hidden}
#inc02 .inner{display:flex;padding:235px 0 135px 138px;box-sizing:border-box}
#inc02 .txt_wrap{margin:75px 0 90px}
#inc02 .txt_wrap .txt{margin-bottom:35px;line-height:1.5;color:var(--dark);font-weight:500;font-size:16px}
#inc02 .txt_wrap .txt:last-child{margin-bottom:0}
#inc02 .right{position:absolute;top:0;right:117px;display:flex}
#inc02 .right .r_list{display:flex;flex-direction:column;animation-timing-function:linear;animation-iteration-count:infinite}
#inc02 .right .r_list:nth-child(1){margin-right:30px}
#inc02 .right .r_list > li{position:relative;margin-bottom:30px;height:351px;border-radius:10px;overflow:hidden}
#inc02 .right .r_txt_box{opacity:0;position:absolute;z-index:1;bottom:0;left:0;width:100%;padding:0 35px 35px 35px;transition:all .5s;box-sizing:border-box}

#inc02 .right .r_txt_box .name{display:block;margin-bottom:15px;color:#fff;font-size:22px;font-family:var(--deco-font)}
#inc02 .right .r_txt_box .txt{line-height:1.3;color:rgba(255,255,255,0.5);font-weight:500;font-size:15px}
#inc02 .r_list > li:after{opacity:0;content:"";position:absolute;top:0;left:0;pointer-events:none;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.9) 80%);transition:all .5s}
#inc02 .r_list > li:hover:after{opacity:1}
#inc02 .r_list > li:hover .r_txt_box{opacity:1}

/* 왼쪽 */
#inc02 .r_l_list{animation:scrollUp 60s linear infinite}
#inc02 .r_l_list:hover{animation-play-state:paused}
/* 오른쪽*/
#inc02 .r_r_list{animation:scrollDown 60s linear infinite}
#inc02 .r_r_list:hover{animation-play-state:paused}

/* 반응형 [s] */
@media (max-width:1860px){
#inc02 .inner{padding:235px 0 135px 50px}
#inc02 .right{right:50px}
#inc02 .right .r_list > li{max-width:240px;height:300px}
#inc02 .right .r_list > li img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:1600px){
#inc02 .txt_wrap{margin:40px 0 70px}
#inc02 .txt_wrap .txt{margin-bottom:25px}
#inc02 .right .r_list > li{max-width:220px;height:240px;margin-bottom:20px}
#inc02 .right .r_list:nth-child(1){margin-right:20px}
#inc02 .right .r_txt_box{padding:0 25px 25px 25px}
#inc02 .right .r_txt_box .name{font-size:18px}
#inc02 .right .r_txt_box .txt{font-size:13px}
}
@media (max-width:1400px){
#inc02{margin-top:0}
#inc02 .inner{flex-direction:column;padding:100px 0}
#inc02 .txt_wrap{margin:30px 0 40px}
#inc02 .txt_wrap .txt{margin-bottom:15px}
#inc02 .all_btn_wrap{display:flex;justify-content:center}
#inc02 .inner .left{display:flex;flex-direction:column;align-items:center;padding:0 50px;margin-bottom:40px;text-align:center}
#inc02 .right{position:static;flex-direction:column;gap:18px}
#inc02 .r_l_list{animation:scrollLeft 15s linear infinite}
#inc02 .r_r_list{animation:scrollRight 15s linear infinite}
#inc02 .right .r_list{flex-direction:row;gap:18px}
#inc02 .right .r_list:nth-child(1){margin-right:0}
#inc02 .right .r_list > li{flex:0 0 190px;max-width:none;height:240px;margin-bottom:0}
}
@media (max-width:1024px){
#inc02 .inner .left{padding:0 15px}
#inc02 .txt_wrap{margin:24px 0 30px}
#inc02 .txt_wrap .txt{font-size:15px}
}
@media (max-width:768px){
#inc02 .inner{padding:60px 0}
#inc02 .txt_wrap{font-size:15px}
#inc02 .right .r_list > li{flex:0 0 170px;height:210px}
#inc02 .r_l_list{animation:scrollLeftMo 12s linear infinite}
#inc02 .r_r_list{animation:scrollRightMo 14s linear infinite}
}
@media (max-width:480px){
#inc02 .txt_wrap .txt br{display:none}
#inc02 .inner .left{margin-bottom:30px}
}
/* 반응형 [e] */

/* 이미지 slide 애니메이션 */
@keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-33.333%)}}
@keyframes scrollDown{0%{transform:translateY(-33.333%)}100%{transform:translateY(0)}}
@keyframes scrollLeft{0%{transform:translateX(-1571px)}100%{transform:translateX(-323px)}}
@keyframes scrollRight{0%{transform:translateX(0)}100%{transform:translateX(-1248px)}}
@keyframes scrollLeftMo{0%{transform:translateX(-1696px)}100%{transform:translateX(-568px)}}
@keyframes scrollRightMo{0%{transform:translateX(0)}100%{transform:translateX(-1128px)}}