@charset "utf-8";

.benefit {padding: 0 0 100px; background-image: url("../../../assets/images/sub/benefit-bg.png"); background-repeat: no-repeat; background-size: 100% 100%; position: relative;}

.benefit .sub-wrap:first-child {padding-top: 100px;}
.benefit .sub-wrap:first-child .sub-l {padding-top: 100px;}
.benefit .sub-wrap:first-child .sub-r {margin-right: -30px; max-width: 860px;}

.benefit .sub-wrap.reverse {padding-top: 100px;}
.benefit .sub-wrap.reverse .sub-r {position: relative; margin-right: 40px;}
.benefit .sub-wrap.reverse .sub-r::before {content: ''; background: url("../../../assets/images/sub/shop-bg2.png"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; max-width: 400px; max-height: 340px; position: absolute; bottom: -40px; left: -220px; z-index: 1;}


.sub-wrap.reverse {align-items: center;}

@media (max-width: 1280px) {
    .benefit {padding: 0 0 80px; background-size: cover;}
    .benefit .sub-wrap:first-child {padding: 0;}
    .benefit .sub-wrap:first-child .sub-l {padding-top: 80px;}
    .benefit .sub-wrap:first-child .sub-r {margin: 0 auto; padding-top: 40px;}
    .benefit .sub-wrap.reverse {padding-top: 80px;}
    .benefit .sub-wrap.reverse .sub-r {padding-top: 60px; margin: 0;}
    .benefit .sub-wrap.reverse .sub-r::before {max-width: 340px; max-height: 300px; left: -120px;}
    .benefit .sub-wrap .sub-r img {padding-left: 60px;}
}

@media (max-width: 768px) {
    .benefit .sub-wrap:first-child .sub-l {padding-top: 75px;}
    .benefit .sub-wrap:first-child .sub-r {padding-top: 30px; margin: 0 -60px 0 -120px;}
    .benefit .sub-wrap.reverse .sub-r {padding-top: 50px; margin-right: -20px;}
    .benefit .sub-wrap.reverse .sub-r::before {content: unset;}
    .benefit .sub-wrap .sub-r img {padding: 0;}
}