@charset "utf-8";

#inc03{padding-top:240px;background:url('./img/bg.jpg') top left no-repeat}
#inc03 .tit_area{margin-bottom:90px;font-size:18px;text-align:center}
#inc03 .tit_area p{margin-bottom:40px;font-size:52px ;font-weight:200;color:#222;line-height:1.25}
#inc03 .tit_area p span{display:block;font-weight:700}
#inc03 .tit_area div{white-space:pre-line}
#inc03 ul{display:flex;padding:0 5%}
#inc03 ul li{display:flex;justify-content:center;align-items:center;overflow:hidden;width:25%}
#inc03 ul li a{overflow:hidden;position:relative;display:block;width:100%;height:100%;transition:all .3s}
#inc03 ul li a:before{display:block;content:"";position:absolute;bottom:0;left:0;width:100%;height:50%;background:rgb(0,0,0);background:linear-gradient(0deg, rgba(0,0,0,0.8547794117647058) 0%, rgba(0,0,0,0.7511379551820728) 27%, rgba(0,0,0,0) 100%);transition:all .3s}
#inc03 ul li .txt{position:absolute;bottom:60px;left:75px;z-index:1;transition:all .3s}
#inc03 ul li .txt span{font-size:16px;font-weight:600;color:rgba(255,255,255,.4);font-family:'jost'}
#inc03 ul li .txt p{margin-top:5px;font-size:28px;font-weight:600;color:#fff}
#inc03 ul li img{position:relative;left:50%;top:50%;z-index:-1;transform:translate(-50%,-50%);min-width:100%;transition:all .3s}

@media(hover:hover){
#inc03 ul li:hover a{width:87%;height:90%}
#inc03 ul li:hover img{transform:scale(1.05) translate(-50%,-50%)}
#inc03 ul li:hover .txt{opacity:0}
#inc03 ul li:hover a:before{opacity:0}  
}
@media(max-width:1540px){
#inc03 ul{padding:0 30px} 
#inc03 ul li .txt{bottom:50px;left:40px}
}
@media(max-width:1024px){
#inc03{padding-top:140px;background-size:120%}
#inc03 .tit_area{margin-bottom:50px;font-size:16px}
#inc03 .tit_area p{margin-bottom:25px;font-size:42px}    
#inc03 ul{flex-wrap:wrap}
#inc03 ul li{width:50%}
#inc03 ul li img{min-width:auto;width:100%}
#inc03 ul li .txt p{font-size:24px}
}
@media(max-width:768px){
#inc03{padding-top:100px}
#inc03 .tit_area{padding:0 30px;margin-bottom:35px;font-size:15px}
#inc03 .tit_area p{font-size:32px;word-break:keep-all}
#inc03 .tit_area p span{display:inline;word-break:keep-all}
#inc03 .tit_area div{white-space:normal;word-break:keep-all}
#inc03 ul{padding:0 20px}
#inc03 ul li .txt{left:30px;bottom:35px}
#inc03 ul li .txt span{font-size:14px}
#inc03 ul li .txt p{font-size:22px}
}
@media(max-width:480px){
#inc03{padding-top:80px}    
#inc03 .tit_area{padding:0 20px}
#inc03 .tit_area p{font-size:28px}
#inc03 ul li .txt{left:20px;bottom:25px}
#inc03 ul li .txt span{font-size:13px}
#inc03 ul li .txt p{font-size:20px}
}
@media(max-width:380px){
#inc03 ul li .txt{left:15px;bottom:25px}
#inc03 ul li .txt span{font-size:11px}
#inc03 ul li .txt p{font-size:18px}
    
}