article{ padding:0; }
article, article *{ box-sizing:border-box; }
.btnArea{ display:none;; }
.sb_con{ width:100%; margin:0 auto; }

#sb01{ padding:150px 40px; }
#sb01 > .sb_con{ max-width:1400px; }
.sb01_pw{ display:flex; flex-flow:row wrap; margin:0 -10px; gap:20px 0; }
.sb01_pt{ width:25%; display:flex; padding:0 10px; transform:translate(0, 50px); opacity:0; }
.sb01_pt.act{ transform:translate(0, 0); opacity:1; }
.sb01_pt:nth-child(4n+1){ transition:1s transform 0s, 1s opacity 0s; }
.sb01_pt:nth-child(4n+2){ transition:1s transform 0.2s, 1s opacity 0.2s; }
.sb01_pt:nth-child(4n+3){ transition:1s transform 0.4s, 1s opacity 0.4s; }
.sb01_pt:nth-child(4n){ transition:1s transform 0.6s, 1s opacity 0.6s; }
.sb01_pb{ width:100%; padding:10px 10px 30px; background-color:#fafafa; border-radius:10px; }
.sb01_pi{ border:1px solid #ddd; overflow:hidden; margin-bottom:20px; border-radius:5px; }
.sb01_pi > img{ display:block; width:100%; }
.sb01_px{ word-break:keep-all; padding:0 5px; }
.sb01_px > h4{ font-size:16px; font-weight:400; color:#201e1f; letter-spacing:-0.025em; margin-bottom:5px; }
.sb01_px > h3{ font-size:18px; font-weight:600; color:#201e1f; letter-spacing:-0.025em; margin-bottom:20px; }
.sb01_px > a{ position:relative; z-index:1; display:inline-block; padding:10px 15px; text-align:center; font-size:16px; font-weight:300; color:#1f1f1f; transition:0.4s color; }
.sb01_px > a:after{ content:''; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:1px; background-color:#1f1f1f; transition:0.4s height; }
.sb01_px > a:hover{ color:#fff; }
.sb01_px > a:hover:after{ height:100%; }
.sb01_px > a > span{ position:relative; z-index:2; }
.sb01_px.en > h4{ font-size:16px; }
.sb01_px.en > h3{ font-size:16px; }

@media(max-width:1200px){
    .sb01_pt{ width:33.33333333%; }
    .sb01_pt:nth-child(4n+1), .sb01_pt:nth-child(4n+2), .sb01_pt:nth-child(4n+3), .sb01_pt:nth-child(4n){ transition:unset; }
    .sb01_pt:nth-child(3n+1){ transition:1s transform 0s, 1s opacity 0s; }
    .sb01_pt:nth-child(3n+2){ transition:1s transform 0.2s, 1s opacity 0.2s; }
    .sb01_pt:nth-child(3n){ transition:1s transform 0.4s, 1s opacity 0.4s; }
}
@media(max-width:991px){
    #sb01{ padding:150px 15px; }
}
@media(max-width:850px){
    .sb01_pt{ width:50%; }
    .sb01_pt:nth-child(3n), .sb01_pt:nth-child(3n+1), .sb01_pt:nth-child(3n+2){ transition:unset; }
    .sb01_pt:nth-child(2n+1){ transition:1s transform 0s, 1s opacity 0s; }
    .sb01_pt:nth-child(2n){ transition:1s transform 0.2s, 1s opacity 0.2s; }
}
@media(max-width:500px){
    .sb01_pt{ width:100%; }   
    .sb01_pt:nth-child(2n), .sb01_pt:nth-child(2n+1){ transition:unset; }
    .sb01_pt:nth-child(n){ transition:1s transform 0s, 1s opacity 0s; }   
}