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{ position:relative; z-index:1; max-width:900px; width:100%; margin:0 auto 80px; display:flex; justify-content:space-between; gap:50px; overflow:hidden; transform:translate(0, 50px); opacity:0; transition:1s transform, 1s opacity; }
.sb01_pw.act{ transform:translate(0, 0); opacity:1; }
.sb01_pw:before{ content:''; position:absolute; z-index:1; top:50%; left:50%; width:152px; border:6px dashed #c7b87b; margin:-6px -76px; animation:0.75s rolling linear infinite; }
.sb01_pb{ position:relative; z-index:1; border:6px solid #c7b87b; border-radius:100%; overflow:hidden; background-color:#181818; }
.sb01_pb img{ display:block; width:100%; height:auto; opacity:0.8; }
.sb01_pb p{ position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%, -50%); font-family:'cg','nm'; font-size:60px; font-weight:400; color:#fff; letter-spacing:-0.025em; line-height:1em; text-transform:uppercase; }

.sb01_txt{ max-width:900px; width:100%; margin:0 auto; text-align:center; word-break:keep-all; }
.sb01_txt > h3{ font-family:'nm'; font-size:40px; font-weight:600; color:#201e1f; margin-bottom:20px; letter-spacing:-0.025em; line-height:1.3em; transform:translate(0, 50px); opacity:0; transition:1s transform, 1s opacity; }
.sb01_txt.act > h3{ transform:translate(0, 0); opacity:1; }
.sb01_txt > h3 > strong{ font-weight:600; color:#c7b87b; }
.sb01_txt > p{ font-size:16px; font-weight:300; color:#201e1f; line-height:1.5em; transform:translate(0, 50px); opacity:0; transition:1s transform 0.3s, 1s opacity 0.3s; }
.sb01_txt.act > p{ transform:translate(0, 0); opacity:1; }
.sb01_txt > p > b{ font-weight:400; color:#c7b87b; }
.sb01_txt > p > strong{ font-weight:400; background-color:#c7b87b; padding:0 3px; }

@keyframes rolling {
    0%{ transform:translate(0, 0); }
    100%{ transform:translate(39px, 0); }
}
@media(max-width:991px){
    #sb01{ padding:150px 15px; }
    .sb01_pb p{ font-size:45px; }
}
@media(max-width:700px){
    .sb01_pw{ margin:0 auto 40px; }
    .sb01_txt > h3{ font-size:30px; }
}
@media(max-width:600px){
    .sb01_pw{ gap:30px; }
    .sb01_pb p{ font-size:30px; }
}


#sb02{ padding:0 40px 150px; }
#sb02 > .sb_con{ max-width:1400px; }

.sb02_tt{ max-width:580px; width:100%; margin:0 auto 80px; text-align:center; word-break:keep-all; }
.sb02_tt.en{ max-width:690px; }
.sb02_tt > h3{ font-family:'nm'; font-size:32px; font-weight:600; color:#201e1f; margin-bottom:20px; letter-spacing:-0.025em; line-height:1.3em; }
.sb02_tt > h3 > b{ font-weight:600; color:#c7b87b; }
.sb02_tt > h3 > strong{ font-weight:400; background-color:#c7b87b; padding:0 6px; }

.sb02_pw{ position:relative; z-index:1; display:flex; flex-flow:row wrap; justify-content:space-between; margin:0 -20px 60px; }
.sb02_pt{ max-width:290px; width:25%; display:flex; padding:0 20px; }
.sb02_pb{ width:100%; transform:translate(0, 50px); opacity:0; transition:1s transform, 1s opacity; }
.sb02_pt.act .sb02_pb{ transform:translate(0, 0); opacity:1; }
.sb02_ic{ margin:0 auto 20px; }
.sb02_ic img{ display:block; width:100%; height:auto; }
.sb02_pb > h4{ font-size:16px; font-weight:400; color:#201e1f; text-align:center; word-break:keep-all; }
.sb02_arr{ width:30px; height:24px; border-left:30px solid #c7b87b; border-top:12px solid transparent; border-bottom:12px solid transparent; align-self:center; transform:translate(0, -100%); margin:0 -15px; }
.sb02_de{ padding:13px 40px; font-size:16px; font-weight:400; color:#201e1f; text-align:center; border:1px solid #ddd; border-radius:4px; background-color:#fafafa; word-break:keep-all; }

@media(max-width:991px){
    #sb02{ padding:0 15px 150px; }
}
@media(max-width:700px){
    .sb02_tt{ margin:0 auto 40px; }
    .sb02_tt > h3{ font-size:24px; }
    .sb02_pw{ gap:80px 0; }
    .sb02_pt{ width:50%; }
    .sb02_pt:nth-child(5){ order:2; }

    .sb02_arr{ width:24px; height:16px; border-left:24px solid #c7b87b; border-top:8px solid transparent; border-bottom:8px solid transparent; margin:0 -12px; }
    .sb02_arr:nth-child(4){ position:absolute; z-index:1; top:50%; right:25%; transform:rotateZ(90deg) translate(-12px, 0px); }
    .sb02_arr:nth-child(6){ order:1; transform:rotateY(180deg); }
    
    .sb02_de{ padding:13px 30px; font-size:14px; }
}