._commerce._index .s1 {padding-top: 130px; padding-bottom: 140px;}
._commerce._index .s1 .tit {text-align: center;}
._commerce._index .s1 .tit h2 {font-size: 50px; letter-spacing: -0.02em; font-family: 'CreatoDisplay'; font-weight: bold; color: #000; padding-bottom: calc(35/50*1em);}
._commerce._index .s1 .tit p {font-size: 18px; letter-spacing: -0.02em; color: #808080; word-break: keep-all; line-height: 1.4; padding-bottom: calc(90/18*1em);}
._commerce._index .s1 .tit p b {color: #000;}
._commerce._index .s1 .boxWrap {display: flex; justify-content: center; align-items: center;}
._commerce._index .s1 .boxWrap .box {width: 165px; position: relative; border-radius: 40px; overflow: hidden;}
._commerce._index .s1 .boxWrap .box:not(:first-child) {border: 1px solid #bfbfbf;}
._commerce._index .s1 .boxWrap .box+.box {margin-left: 65px;}
._commerce._index .s1 .boxWrap .box::before {content: ''; display: block; padding-top: 100%;}
._commerce._index .s1 .boxWrap .box img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}

._commerce._index .s2 {padding-top: 160px; padding-bottom: 100px; background: #f5f5f7;}
._commerce._index .s2 .flx {display: flex; justify-content: space-between; align-items: flex-start;}
._commerce._index .s2 .flx .lbx .word .title {padding-bottom: calc(90/50*1em);}
._commerce._index .s2 .flx .lbx > p {font-size: 18px; letter-spacing: -0.02em; color: #202020; word-break: keep-all; line-height: 1.7;}
._commerce._index .s2 .flx .rbx dl {width: 540px;}
._commerce._index .s2 .flx .rbx dl+dl {margin-top: 70px;}
._commerce._index .s2 .flx .rbx dl dt {width: 100%; border-radius: 40px; overflow: hidden; margin-bottom: 50px;}
._commerce._index .s2 .flx .rbx dl dt img {width: 100%;}
._commerce._index .s2 .flx .rbx dl dd b {display: flex; font-size: 22px; letter-spacing: -0.02em; color: #000; font-weight: bold; padding-top: calc(22/22*1em); padding-bottom: calc(25/22*1em); position: relative;}
._commerce._index .s2 .flx .rbx dl dd b::before {content: ''; display: block; position: absolute; left: 0; bottom: 100%; width: 24px; height: 1px; background: #000;}
._commerce._index .s2 .flx .rbx dl dd p {font-size: 18px; letter-spacing: -0.02em; color: #242424; word-break: keep-all; line-height: 1.7;}

._commerce._index .s3 {height: 100vh; padding-top: 250px; padding-bottom: 50px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;}
._commerce._index .s3 .blockWrap {padding: 0 240px; box-sizing: border-box;}
._commerce._index .s3 .blockWrap .swiper {overflow: visible;}
._commerce._index .s3 .blockWrap .flxbox {display: flex;}
._commerce._index .s3 .blockWrap .flxbox .block {width: 460px; height: 332px; padding: 45px 50px; background: #f5f5f7; box-sizing: border-box; border-radius: 40px; box-shadow: 5px 5px 10px #00000022;}
._commerce._index .s3 .blockWrap .flxbox .block+.block {margin-left: 35px;}
._commerce._index .s3 .blockWrap .flxbox .block .icon {width: 30px; height: 30px;}
._commerce._index .s3 .blockWrap .flxbox .block b {padding-top: calc(55/22*1em); padding-bottom: calc(30/22*1em); font-size: 22px; letter-spacing: -0.02em; color: #000; font-weight: bold; display: block; }
._commerce._index .s3 .blockWrap .flxbox .block p {word-break: keep-all; line-height: 1.7; font-size: 18px; letter-spacing: -0.02em; color: #131313;}

._commerce._index .s4 {margin-top: 170px;}
.bannerSec::after {background: #fff;}

@media screen and (max-width: 1280px) {
    ._commerce._index .s1 {padding-top: 100px;}

    ._commerce._index .s2 {padding-top: 130px;}
    ._commerce._index .word .title._50px {font-size: 38px;}
    ._commerce._index .s2 .flx .lbx > p {padding-right: calc(70/18*1em);}
    ._commerce._index .s2 .flx .lbx > p br {display: none;}
    ._commerce._index .s2 .flx .rbx dl {width: 480px;}
    ._commerce._index .s2 .flx .rbx dl dd p br {display: none;}

    ._commerce._index .s3 {padding-top: 100px;}
    /* ._commerce._index .s3 .blockWrap {padding-top: 100px;} */
    ._commerce._index .s3 .blockWrap .swiper {height: 100%;}
    ._commerce._index .s3 .blockWrap .swiper .flxbox {height: 100%; align-items: center;}
    ._commerce._index .s3 .blockWrap .flxbox .block {padding: 45px; height: 300px;}
}

@media screen and (max-width: 1024px) {
    ._commerce._index .s1 {padding-top: 80px; padding-bottom: 100px;}
    ._commerce._index .s1 .boxWrap .box {width: 140px;}
    ._commerce._index .s1 .boxWrap .box+.box {margin-left: 40px;}
    
    ._commerce._index .s2 {padding-top: 100px;}
    ._commerce._index .word .title._50px {font-size: 26px;}
    ._commerce._index .s2 .flx .lbx > p {font-size: 16px;}
    ._commerce._index .s2 .flx .rbx dl {width: 400px;}
    ._commerce._index .s2 .flx .rbx dl dt {margin-bottom: 30px;}
    ._commerce._index .s2 .flx .rbx dl dd b {font-size: 20px;}
    ._commerce._index .s2 .flx .rbx dl dd p {font-size: 16px;}

    ._commerce._index .s3 {padding-top: 8%; padding-bottom: 3%;}
    ._commerce._index .s3 .blockWrap {padding-top: 0px;}
    ._commerce._index .s3 .blockWrap .flxbox .block {padding: 40px; height: 280px;}
    ._commerce._index .s3 .blockWrap .flxbox .block b {font-size: 20px;}
    ._commerce._index .s3 .blockWrap .flxbox .block p {font-size: 16px;}
}

@media screen and (max-width: 820px) {
    ._commerce._index .s1 {padding-bottom: 80px;}
    ._commerce._index .s1 .tit h2 {font-size: 40px;}
    ._commerce._index .s1 .tit p {font-size: 16px;}
    ._commerce._index .s1 .boxWrap .box {width: 100px; border-radius: 20px;}
    ._commerce._index .s1 .boxWrap .box+.box {margin-left: 10px;}

    ._commerce._index .s2 {padding-top: 80px; padding-bottom: 80px;}
    ._commerce._index .word .title._50px {font-size: 24px; }
    ._commerce._index .s2 .flx {flex-direction: column;}
    ._commerce._index .s2 .flx .lbx .word .title {padding-bottom: 20px;}
    ._commerce._index .s2 .flx .lbx > p {padding-right: 0; padding-bottom: calc(60/16*1em);}
    ._commerce._index .s2 .flx .rbx {width: 100%;}
    ._commerce._index .s2 .flx .rbx dl {width: 100%; display: flex; align-items: flex-start;}
    ._commerce._index .s2 .flx .rbx dl+dl {margin-top: 20px;}
    ._commerce._index .s2 .flx .rbx dl dt {width: 55%; border-radius: 30px;}
    ._commerce._index .s2 .flx .rbx dl dd {width: 45%; padding-left: 20px;}
    ._commerce._index .s2 .flx .rbx dl dd b {font-size: 18px;}
    ._commerce._index .s2 .flx .rbx dl dd p {font-size: 14px;}

    ._commerce._index .s3 {height: auto;}
    ._commerce._index .s3 .blockWrap {height: auto; padding: 40px 3%; padding-bottom: 80px;}
    ._commerce._index .s3 .blockWrap .flxbox .block {width: 400px; height: 225px; padding: 35px;}
    ._commerce._index .s3 .blockWrap .flxbox .block b {font-size: 18px; padding-top: 20px; padding-bottom: 15px;}
    ._commerce._index .s3 .blockWrap .flxbox .block p {font-size: 14px;}
    
    ._commerce._index .s4 {margin-top: 80px;}
}

@media screen and (min-width: 501px) and (max-width: 820px) {
    ._commerce._index .s3 .blockWrap .flxbox .block .icon svg * { transition: .6s;}
    ._commerce._index .s3 .blockWrap .flxbox .block b {transition: .6s;}
    ._commerce._index .s3 .blockWrap .flxbox .block p {transition: .6s;}
    /* ._commerce._index .s3 .blockWrap .flxbox .block:not(.swiper-slide-active) .icon svg * {opacity: 0;}
    ._commerce._index .s3 .blockWrap .flxbox .block:not(.swiper-slide-active) b {opacity: 0; transform: translateY(40px);}
    ._commerce._index .s3 .blockWrap .flxbox .block:not(.swiper-slide-active) p {opacity: 0; transform: translateY(40px);} */
}

@media screen and (max-width: 500px) {
    ._commerce._index .s1 {padding-top: 50px; padding-bottom: 50px;}
    ._commerce._index .s1 .tit h2 {font-size: 30px;}
    ._commerce._index .s1 .tit p {font-size: 14px;}
    ._commerce._index .s1 .boxWrap {flex-wrap: wrap; width: 70%; margin: 0 auto;}
    ._commerce._index .s1 .boxWrap .box {width: calc(100% / 2 - 10px); margin-bottom: 10px; box-sizing: border-box;}
    ._commerce._index .s1 .boxWrap .box:nth-child(2n-1) {margin-left: 0;}

    ._commerce._index .s2 {padding-top: 50px; padding-bottom: 50px;}
    ._commerce._index .word .title._50px {font-size: 22px;}
    ._commerce._index .s2 .flx .lbx > p {font-size: 14px;}
    ._commerce._index .s2 .flx .rbx dl {flex-direction: column;}
    ._commerce._index .s2 .flx .rbx dl > * {width: 100% !important;}
    ._commerce._index .s2 .flx .rbx dl dd {padding-left: 0;}

    ._commerce._index .s3 .blockWrap {padding: 40px 0; padding-bottom: 60px;}
    ._commerce._index .s3 .blockWrap .swiper .flxbox {height: auto; flex-direction: column;}
    ._commerce._index .s3 .blockWrap .flxbox .block {width: 95%; height: auto;}
    ._commerce._index .s3 .blockWrap .flxbox .block+.block {margin-left: 0px; margin-top: 15px;}
    ._commerce._index .s3 .blockWrap .flxbox .block b {font-size: 16px; padding-top: 30px;}
    
    ._commerce._index .s4 {margin-top: 50px;}
}