@charset "utf-8";

.management {background-image: url("../../../assets/images/sub/management-bg.png"); background-repeat: no-repeat; background-size: 100% 80%; background-position: bottom; position: relative;}

.management .sub-wrap:first-child {padding-top: 140px; align-items: center;}
.management .sub-wrap:last-child {padding: 300px 0 160px;}
.management .sub-wrap .sub-r img {max-width: 600px;}
.management .sub-wrap.reverse .sub-l {display: flex; flex-direction: column; align-items: end; justify-content: space-between; padding-bottom: 60px;}
.management .sub-wrap.reverse .sub-r {position: relative;}
.management .sub-wrap.reverse .sub-r::before {content: ''; background-image: url("../../../assets/images/sub/hand.png"); background-repeat: no-repeat; width: 100%; height: 100%; max-width: 452px; max-height: 308px; display: inline-block; position: absolute; bottom: -24px; left: -174px; z-index: 1;}
.management .sub-wrap.reverse .sub-r img {max-width: 600px;}
.management .sub-wrap .sub-l .sub-tit-bg {max-width: 340px;}

@media (max-width: 1280px) {
    .management {background-image: url("../../../assets/images/sub/management-bg-mo.png"); background-size: 100% 96%;}
    .management .sub-wrap:first-child {padding-top: 80px;}
    .management .sub-wrap:first-child .sub-r {padding-top: 60px;}
    .management .sub-wrap:last-child {padding: 230px 0 220px;}
    .management .sub-wrap .sub-l .sub-tit-bg {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1;}
    .management .sub-wrap:first-child .sub-l .sub-tit-bg, .management .sub-wrap:last-child .sub-l .sub-tit-bg {display: none;}
    .management .sub-wrap.reverse .sub-l {align-items: center; padding-bottom: 50px;}
    .management .sub-wrap.reverse .sub-r::before {left: 50px;}
    .management .sub-wrap .sub-r {position: relative;}
    .management .sub-wrap .sub-r::before {content: ''; background-image: url("../../../assets/images/sub/body.png"); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; max-width: 360px; max-height: 230px; position: absolute; bottom: -16%; left: 57%; transform: translateX(-50%); z-index: 1;}
    .management .sub-wrap:last-child .sub-r::after {content: ''; background-image: url("../../../assets/images/sub/syndrome.png"); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; max-width: 340px; max-height: 180px; position: absolute; bottom: -24%; left: 50%; transform: translateX(-50%);}
}

@media (max-width: 768px) {
    .management {background-size: 100% 92%;}
    .management .sub-wrap:first-child {padding-top: 75px;}
    .management .sub-wrap:first-child .sub-r {padding-top: 40px; margin: 0 -20px;}
    .management .sub-wrap:last-child {padding: 200px 0 160px;}
    .management .sub-wrap.reverse .sub-l {padding-bottom: 40px;}
    .management .sub-wrap.reverse .sub-r::before {max-width: 248px; max-height: 170px; background-size: contain; bottom: 2%; left: 45%;}
    .management .sub-wrap .sub-r::before {max-width: 250px; max-height: 140px; bottom: -60px;}
    .management .sub-wrap:last-child .sub-r::after {max-width: 220px; max-height: 120px; bottom: -90px;}
}

@media (max-width: 350px) {
    .management .sub-wrap.reverse .sub-r::before {max-width: 208px; max-height: 130px;}
}