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

.sb01_pw{ position:relative; z-index:1; display:flex; flex-flow:row wrap; justify-content:space-between; margin:0 -25px; }
.sb01_pt{ max-width:200px; width:20%; display:flex; padding:0 25px; }
.sb01_pb{ max-width:150px; width:100%; margin:0 auto; }
.sb01_ic{ margin:0 auto 20px; }
.sb01_ic img{ display:block; width:100%; height:auto; }
.sb01_pt .sb01_ic svg *{ transition:0s stroke-dashoffset; }
.sb01_pt.act .sb01_ic svg *{ stroke-dashoffset:0 !important; transition:1s stroke-dashoffset; }
.sb01_pb > h4{ font-size:16px; font-weight:400; color:#201e1f; text-align:center; word-break:keep-all; transform:translate(0, 30px); opacity:0; transition:1s transform, 0.7s opacity; }
.sb01_pt.act .sb01_pb > h4{ transform:translate(0, 0); opacity:1; }
.sb01_arr{ position:relative; z-index:1; width:30px; height:50px; align-self:center; transform:translate(0, -50%); margin:0 -15px; }
.sb01_arr:before{ content:''; position:absolute; z-index:1; width:8px; height:25px; top:0; right:0; background-color:#c7b87b; transform:skewX(41deg); transform-origin:right bottom; }
.sb01_arr:after{ content:''; position:absolute; z-index:1; width:8px; height:25px; bottom:0; right:0; background-color:#9d9471; transform:skewX(-41deg); transform-origin:right top; }

@media(max-width:991px){
    #sb01{ padding:150px 15px; }
}
@media(max-width:750px){
    .sb01_pw{ justify-content:space-evenly; gap:50px 0; }
    .sb01_pt{ width:33.33333333%; }
    .sb01_pb{ max-width:120px; }
    
    .sb01_arr{ width:20px; height:40px; transform:translate(0, -50%); margin:0 -10px; }
    .sb01_arr:before{ width:6px; height:20px; transform:skewX(35deg); }
    .sb01_arr:after{ width:6px; height:20px; transform:skewX(-35deg); }
    .sb01_arr.arr_03{ display:none; }
}
@media(max-width:700px){
    .sb01_tt{ margin:0 auto 60px; }
    .sb01_tt > h3{ font-size:32px; }
}
@media(max-width:500px){
    .sb01_pt{ width:50%; }
    .sb01_arr.arr_02{ display:none; }
    .sb01_arr.arr_03{ display:block; }
    .sb01_arr.arr_04{ display:none; }
}


#sb02{ background-color:#181818; background-image:url(./img/02-00.jpg); background-size:cover; background-repeat:no-repeat; }
#sb02 > .sb_con{ padding:150px 40px; background-color:rgba(0,0,0,.4); background-image:url(./img/02-01.png); background-repeat:repeat; }
.sb02_fr{ max-width:1000px; width:100%; margin:0 auto; }
.sb02_tt{ max-width:500px; width:100%; margin:0 auto 100px; text-align:center; word-break:keep-all; }
.sb02_tt.en{ max-width:750px; }
.sb02_tt > h2{ font-family:'nm'; font-size:40px; font-weight:600; color:#fff; margin-bottom:10px; letter-spacing:-0.025em; line-height:1.3em; }
.sb02_tt > h2 > b{ font-weight:600; color:#c7b87b; }
.sb02_tt > h2 > strong{ font-weight:400; background-color:#c7b87b; padding:0 6px; }
.sb02_tt > p{ font-size:16px; font-weight:400; color:#fff; letter-spacing:-0.025em; line-height:1.5em; }

.sb02_pw{ display:flex; flex-flow:row wrap; margin:0 -15px; }
.sb02_pt{ width:50%; display:flex; padding:0 15px; }
.sb02_pb{ position:relative; z-index:1; width:100%; border:1px solid #ddd; background-color:#fafafa; border-radius:6px; opacity:0; transition:1s transform, 1s opacity; }
.sb02_pt.lf .sb02_pb{ transform:perspective(900px) rotateY(90deg); }
.sb02_pt.rt .sb02_pb{ transform:perspective(900px) rotateY(-90deg); }
.sb02_pt.act .sb02_pb{ opacity:1; transform:perspective(900px) rotateY(0deg); }
.sb02_pb > h3{ position:absolute; z-index:1; top:0; left:20px; right:20px; transform:translate(0, -50%); background-color:#c7b87b; border-radius:6px; padding:10px; font-size:20px; font-weight:600; color:#fff; text-align:center; }
.sb02_px{ padding:60px 30px 40px; text-align:center; word-break:keep-all; }
.sb02_px > li{ font-size:16px; font-weight:400; color:#201e1f; }
.sb02_px > li:not(:last-child){ margin-bottom:10px; }
.sb02_px > li > span{ color:#c7b87b; }

@media(max-width:991px){
    #sb02 > .sb_con{ padding:150px 15px; }
    .sb02_pw{ margin:0 -7.5px; }
    .sb02_pt{ padding:0 7.5px; }
}
@media(max-width:700px){
    .sb02_tt{ margin:0 auto 80px; }
    .sb02_tt > h2{ font-size:32px; }
    .sb02_pw{ gap:50px 0; }
    .sb02_pt{ width:100%; }
}


#sb03{ background-color:#fafafa; padding:150px 40px; }
#sb03 > .sb_con{ max-width:1400px; }
.sb03_pw{ display:flex; flex-flow:row wrap; }
.sb03_pt.lf{ display:flex; width:30%; }
.sb03_pt.rt{ width:70%; padding-left:60px; }

.sb03_tt{ width:100%; display:flex; align-items:center; }
.sb03_tb{ text-align:right; word-break:keep-all; }
.sb03_tb > h2{ font-family:'nm'; font-size:60px; font-weight:600; color:#181818; line-height:1em; margin-bottom:20px; letter-spacing:-0.025em; }
.sb03_tb > p{ font-size:16px; font-weight:300; color:#181818; line-height:1.5em; letter-spacing:-0.025em; }

.sb03_cw{ display:flex; flex-flow:row wrap; gap:30px; max-width:1000px; width:100%; margin:0 auto; }
.sb03_cd{ position:relative; z-index:1; display:flex; width:calc(50% - 15px); overflow:hidden; }
.sb03_cg{ position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sb03_cg.cg01{ background-image:url(./img/03-01.jpg); }
.sb03_cg.cg02{ background-image:url(./img/03-02.jpg); }
.sb03_cg.cg03{ background-image:url(./img/03-03.jpg); }
.sb03_cg.cg04{ background-image:url(./img/03-04.jpg); }
.sb03_cb{ width:100%; position:relative; z-index:1; display:flex; gap:20px; align-items:center; padding:60px 20px 60px 30px; background-color:rgba(0,0,0,.5); }
.sb03_ic{ width:80px; }
.sb03_ic svg *{ transition:0s stroke-dashoffset; }
.sb03_cd.act .sb03_ic svg *{ stroke-dashoffset:0 !important; transition:1s stroke-dashoffset; }
.sb03_px{ word-break:keep-all; transform:translate(50px, 0); opacity:0; transition:1s transform, 1s opacity; }
.sb03_cd.act .sb03_px{ transform:translate(0, 0); opacity:1; }
.sb03_px > h4{ font-size:16px; font-weight:300; color:#fff; line-height:1.5em; letter-spacing:-0.025em; margin-bottom:10px }
.sb03_px > h3{ font-family:'nm'; font-size:28px; font-weight:600; color:#fff; letter-spacing:-0.025em; }

@media(max-width:1200px){
    .sb03_cb{ flex-direction:column; padding:60px 20px; }
    .sb03_px{ transform:translate(0, 50px); text-align:center; }
    .sb03_px > h3{ font-size:24px; }
}
@media(max-width:991px){
    #sb03{ padding:150px 15px; }
    .sb03_pt.lf{ width:100%; }
    .sb03_pt.rt{ width:100%; padding-left:0; padding-top:60px; }
    .sb03_tb > h2{ font-size:45px; }
    .sb03_tb{ max-width:650px; width:100%; margin:0 0 0 auto; }
}
@media(max-width:700px){
    .sb03_tb > ㅔ{ font-size:14px; }
}
@media(max-width:450px){
    .sb03_cw{ gap:15px; }
    .sb03_cd{ width:100%; }
}