@charset "utf-8";

#inc04{position:relative;padding:115px 0}
#inc04::after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:1}
#inc04 .all_tit_wrap04{position:relative;z-index:2}
#inc04 .all_tit_wrap04 .s_tit{color:#fff}
#inc04 .all_tit_wrap04 .b_tit{color:#fff}
#inc04 .all_tit_wrap04 .txt{color:#fff}
#inc04 .preview_list{position:relative;display:flex;margin:0 auto;color:#fff;z-index:2}
#inc04 .preview_list > li{overflow:hidden;width:50%;border-radius:10px;background:transparent;border:1px solid transparent;box-sizing:border-box;transition:all .5s}
#inc04 .preview_list > li > a{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#fff;text-align:center}
#inc04 .preview_list > li .icon{margin-bottom:35px}
#inc04 .preview_list > li > a .txt b{display:block;margin-bottom:15px;font-size:25px}
#inc04 .preview_list > li > a .txt p{font-size:17px;line-height:1.5}
#inc04 .hov_bg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
#inc04 .hov_bg img{position:absolute;top:0;left:0;width:100%;max-width:100%;height:100%;object-fit:cover;-webkit-transform:scale(1);transform:scale(1);-webkit-animation:bg 10s infinite linear;animation:bg 10s infinite linear}
@-webkit-keyframes bg{from 0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)} 100%{transform:scale(1)}}
@keyframes bg{from 0%{transform:scale(1)}50%{transform:scale(1.1)} 100%{transform:scale(1)}}

/* 반응형 [s] */
@media (hover:hover){
#inc04 .preview_list > li:hover{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.2)}
}
@media (max-width:1200px){
#inc04{padding:100px 20px}
}
@media (max-width:1024px){
#inc04 .preview_list > li .icon{margin-bottom:25px}
#inc04 .preview_list > li > a{padding:40px 0}
#inc04 .preview_list > li > a .txt b{margin-bottom:10px;font-size:22px}
#inc04 .preview_list > li > a .txt p{font-size:16px}
}
@media (max-width:768px){
#inc04{padding:80px 20px}
#inc04 .preview_list > li .icon > img{height:60px}
#inc04 .preview_list > li > a .txt b{font-size:20px}
}
@media (max-width:580px){
#inc04 .preview_list{flex-direction:column}
#inc04 .preview_list > li{width:100%}
}
@media (max-width:480px){
#inc04{padding:60px 20px}
#inc04 .preview_list > li .icon{margin-bottom:20px}
#inc04 .preview_list > li .icon > img{height:50px}
#inc04 .preview_list > li > a{padding:30px 0}
#inc04 .preview_list > li > a .txt b{font-size:18px}
#inc04 .preview_list > li > a .txt p{font-size:15px}
}
@media (max-width:390px){
#inc04 .preview_list > li .icon{display:none}
#inc04 .preview_list > li > a .txt b{position:relative;display:inline-block}
#inc04 .preview_list > li > a .txt b:after{content:"";display:block;position:absolute;top:0;left:0}
#inc04 .preview_list > li:nth-child(1) > a .txt b{padding-left:45px}
#inc04 .preview_list > li:nth-child(2) > a .txt b{padding-left:35px}
#inc04 .preview_list > li:nth-child(1) > a .txt b:after{width:36px;height:30px;background:url("./img/inc04_icon01.png") no-repeat center/auto 30px}
#inc04 .preview_list > li:nth-child(2) > a .txt b:after{width:25px;height:30px;background:url("./img/inc04_icon02.png") no-repeat center/auto 30px}
}
/* 반응형 [e] */