@charset "utf-8";

#inc02 .bsn{display:flex;height:100vh}
#inc02 .bsn>li{width:33.33%;text-align:center;transition:all .3s}
#inc02 .bsn>li a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;transition:all .3s}
#inc02 .bsn>li+li{border-left:1px solid rgba(255,255,255,.2)}
#inc02 .bsn h3{font-size:30px;line-height:1.2;color:rgba(255,255,255,.5);text-transform:uppercase}
#inc02 .bsn .ex{display:none;gap:10px;margin-top:30px;font-weight:700}
#inc02 .bsn .ex li{display:inline-block;padding:3px 15px;border:2px solid var(--primary);border-radius:50px}

#inc02 .hov_bg{overflow:hidden;position:absolute;z-index:-1;top:0;left:0;width:100%;height:100vh;background:#111}
#inc02 .hov_bg img{width:100%;height:100vh}

/* 반응형 [s] */
@media (hover:hover){
#inc02 .bsn>li:hover{width:50%;background:rgba(0,0,0,.7)}
#inc02 .bsn>li:hover a{color:var(--primary)}
#inc02 .bsn>li:hover h3{color:var(--primary)}
#inc02 .bsn>li:hover .ex{display:flex;flex-wrap:wrap}
}
@media (max-width:1380px){
#inc02 .bsn .ex{flex-direction:column;gap:15px}
}
@media (max-width:1024px){
#inc02 .bsn{height:800px}
#inc02 .bsn>li{height:100%}
#inc02 .bsn h3{font-size:28px}
#inc02 .hov_bg{height:800px}
}
@media (max-width:768px){
#inc02 .bsn{flex-direction:column;height:auto}
#inc02 .bsn h3{margin:0 auto;width:95%;font-size:25px;color:var(--primary)}
#inc02 .bsn>li+li{border-left:none}
#inc02 .bsn>li{width:100% !important;height:400px;background-repeat:no-repeat !important;background-position:center !important;background-size:cover !important}
#inc02 .bsn>li:nth-child(1){background-image:linear-gradient(rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.3)), url(./img/bg01.jpg)}
#inc02 .bsn>li:nth-child(2){background-image:linear-gradient(rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.3)), url(./img/bg02.jpg)}
#inc02 .bsn>li:nth-child(3){background-image:linear-gradient(rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.3)), url(./img/bg03.jpg)}
#inc02 .bsn .ex{display:flex;flex-direction:row}
#inc02 .bsn .ex li{color:var(--primary)}
#inc02 .hov_bg{display:none}
}
@media (max-width:480px){
#inc02 .bsn h3{font-size:21px}
#inc02 .bsn>li{height:300px}
#inc02 .bsn .ex{flex-direction:column;margin-top:20px}
}
@media (max-width:380px){
#inc02 .bsn>li{height:270px}
#inc02 .bsn h3{font-size:19px}
#inc02 .bsn .ex{gap:10px;margin-top:15px}
}
/* 반응형 [e] */