.body-wrapper {
    position: relative;
    height: 815px;
}

.body-wrapper .mypage-div {
    position: absolute;
    width: 670px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.body-wrapper .mypage-div a {
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 2px;
    box-shadow: 2.1px 2.1px 6px 0 rgba(97, 97, 97, 0.15);
    border: solid 1px #eeeeee;
    background-color: #ffffff;
}

.body-wrapper .mypage-div a:active {
    outline: 1px solid #00aeef;
}

.body-wrapper .mypage-div a:first-child,
.body-wrapper .mypage-div a:nth-child(2) {
    margin: 0 35px 35px 0;
}

.body-wrapper .mypage-div a:nth-child(3) {
    margin-bottom: 35px;
}

.body-wrapper .mypage-div a:nth-child(4),
.body-wrapper .mypage-div a:nth-child(5){
    margin-right: 35px;
}

.body-wrapper .mypage-div a img {
    position: absolute;
    top: 25px;
    left: 25px;
}

.body-wrapper .mypage-div a:first-child img,
.body-wrapper .mypage-div a:nth-child(3) img,
.body-wrapper .mypage-div a:nth-child(4) img,
.body-wrapper .mypage-div a:nth-child(7) img,
.body-wrapper .mypage-div a:nth-child(8) img {
    width: 35px;
    height: 35px;
}

.body-wrapper .mypage-div a:nth-child(2) img {
    width: 40px;
    height: 30px;
}

.body-wrapper .mypage-div a:nth-child(5) img {
    width: 36px;
    height: 30px;
}

.body-wrapper .mypage-div a:nth-child(6) img {
    width: 26px;
    height: 30px;
}

.body-wrapper .mypage-div a hr {
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 2px;
    top: 130px;
    left: 25px;
}

.body-wrapper .mypage-div a span:not(.small) {
    position: absolute;
    top: 150px;
    left: 25px;
    font-size: 21px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #0c101b;
}

.body-wrapper .mypage-div a span.small {
    position: absolute;
    top: 159px;
    left: 106px;
    font-size: 13px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #0c101b;
}

.body-wrapper .mypage-div a:hover {
    outline: 1px solid #00aeef;
}

@media (max-width: 1024px) {
    .body-wrapper {
        position: relative;
        height: 78.333vw;
    }
    
    .body-wrapper .mypage-div {
    
        width: 65.4297vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .body-wrapper .mypage-div a {
        
        
        width: 19.5313vw;
        height: 19.5313vw;
        border-radius: 0.1953vw;
        box-shadow: 0.2051vw 0.2051vw 0.5859vw 0 rgba(97, 97, 97, 0.15);
        border: solid 0.0977vw #eeeeee;
        
    }
    
    .body-wrapper .mypage-div a:active {
        outline: 0.0977vw solid #00aeef;
    }
    
    .body-wrapper .mypage-div a:first-child,
    .body-wrapper .mypage-div a:nth-child(2) {
        margin: 0 3.4180vw 3.4180vw 0;
    }
    
    .body-wrapper .mypage-div a:nth-child(3) {
        margin-bottom: 3.4180vw;
    }
    
    .body-wrapper .mypage-div a:nth-child(4),
    .body-wrapper .mypage-div a:nth-child(5){
        margin-right: 3.4180vw;
    }
    
    .body-wrapper .mypage-div a img {
        position: absolute;
        top: 2.315vw;
        left: 2.315vw;
    }

    .body-wrapper .mypage-div a:first-child img,
    .body-wrapper .mypage-div a:nth-child(3) img,
    .body-wrapper .mypage-div a:nth-child(4) img,
    .body-wrapper .mypage-div a:nth-child(7) img,
    .body-wrapper .mypage-div a:nth-child(8) img {
        width: 3.241vw;
        height: 3.241vw;
    }

    .body-wrapper .mypage-div a:nth-child(2) img {
        width: 3.704vw;
        height: 2.778vw;
    }

    .body-wrapper .mypage-div a:nth-child(5) img {
        width: 3.333vw;
        height: 2.778vw;
    }

    .body-wrapper .mypage-div a:nth-child(6) img {
        width: 2.407vw;
        height: 2.778vw;
    }
    
    .body-wrapper .mypage-div a hr {
        display: inline-block;
        position: absolute;
        width: 1.389vw;
        height: 0.185vw;
        top: 12.037vw;
        left: 2.315vw;
    }
    
    .body-wrapper .mypage-div a span:not(.small) {
        position: absolute;
        top: 13.889vw;
        left: 1.892vw;
            font-size: 1.944vw;
        font-weight: 300;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: normal;
        text-align: left;
        color: #0c101b;
    }
    
    .body-wrapper .mypage-div a span.small {
        position: absolute;
        top: 14.722vw;
        left: 9.415vw;
            font-size: 1.204vw;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: normal;
        text-align: left;
        color: #0c101b;
    }
}

@media (max-width:768px) {
    .body-wrapper {
        height: 817px;
        margin-top: 45px;
    }

    .body-wrapper .mypage-div {
        width: 628px;
        height: auto;
    }

    .body-wrapper .mypage-div a {
        width: 305px;
        height: 184px;
    }

    .body-wrapper .mypage-div a:first-child,
    .body-wrapper .mypage-div a:nth-child(3),
    .body-wrapper .mypage-div a:nth-child(5) {
        margin: 0 18px 18px 0;
    }
    
    .body-wrapper .mypage-div a:nth-child(2),
    .body-wrapper .mypage-div a:nth-child(4),
    .body-wrapper .mypage-div a:nth-child(6) {
        margin: 0 0 18px 0;
    }
    
    .body-wrapper .mypage-div a:nth-child(7) {
        margin: 0;
    }

    .body-wrapper .mypage-div a img {
        top: 25px;
        left: 25px;
    }

    .body-wrapper .mypage-div a:first-child img,
    .body-wrapper .mypage-div a:nth-child(7) img {
        width: 40px;
        height: 40px;
    }

    .body-wrapper .mypage-div a:nth-child(2) img {
        width: 41px;
        height: 29px;
    }

    .body-wrapper .mypage-div a:nth-child(3) img,
    .body-wrapper .mypage-div a:nth-child(4) img {
        width: 38px;
        height: 38px;
    }

    .body-wrapper .mypage-div a:nth-child(5) img {
        width: 36px;
        height: 31px;
    }

    .body-wrapper .mypage-div a:nth-child(6) img,
    .body-wrapper .mypage-div a:last-child img {
        width: 36px;
        height: 36px;
    }

    .body-wrapper .mypage-div a hr {
        width: 15px;
        height: 2px;
        top: 107px;
        left: 30px;
    }

    .body-wrapper .mypage-div a span:not(.small) {
        position: absolute;
        left: 25px;
        top: 127px;
            font-style: normal;
        font-weight: 300;
        font-size: 28px;
        color: #222222;
    }

    .body-wrapper .mypage-div a span.small {
        position: absolute;
        top: 137px;
        left: 135px;
            font-style: normal;
        font-weight: 500;
        font-size: 18px;
        color: #222222;
    }
}

@media (max-width:767px) {
    .body-wrapper {
        height: 106.5189vw;
        margin-top: 5.8670vw;
    }

    .body-wrapper .mypage-div {
        width: 81.8774vw;
        height: auto;
    }

    .body-wrapper .mypage-div a {
        width: 39.614vw;
        height: 23.958vw;
    }

    .body-wrapper .mypage-div a:first-child,
    .body-wrapper .mypage-div a:nth-child(3),
    .body-wrapper .mypage-div a:nth-child(5) {
        margin: 0 2.344vw 2.344vw 0;
    }
    
    .body-wrapper .mypage-div a:nth-child(2),
    .body-wrapper .mypage-div a:nth-child(4),
    .body-wrapper .mypage-div a:nth-child(6) {
        margin: 0 0 2.344vw 0;
    }
    
    .body-wrapper .mypage-div a:nth-child(7) {
        margin: 0;
    }

    .body-wrapper .mypage-div a img {
        top: 3.255vw;
        left: 3.255vw;
    }

    .body-wrapper .mypage-div a:first-child img,
    .body-wrapper .mypage-div a:nth-child(7) img {
        width: 5.208vw;
        height: 5.208vw;
    }

    .body-wrapper .mypage-div a:nth-child(2) img {
        width: 5.339vw;
        height: 3.776vw;
    }

    .body-wrapper .mypage-div a:nth-child(3) img,
    .body-wrapper .mypage-div a:nth-child(4) img {
        width: 4.948vw;
        height: 4.948vw;
    }

    .body-wrapper .mypage-div a:nth-child(5) img {
        width: 4.688vw;
        height: 4.036vw;
    }

    .body-wrapper .mypage-div a:nth-child(6) img,
    .body-wrapper .mypage-div a:last-child img {
        width: 4.688vw;
        height: 4.688vw;
    }

    .body-wrapper .mypage-div a hr {
        width: 1.953vw;
        height: 0.260vw;
        top: 13.932vw;
        left: 3.906vw;
    }

    .body-wrapper .mypage-div a span:not(.small) {
        position: absolute;
        left: 3.255vw;
        top: 16.536vw;
            font-style: normal;
        font-weight: 300;
        font-size: 3.646vw;
        color: #222222;
    }

    .body-wrapper .mypage-div a span.small {
        position: absolute;
        top: 17.839vw;
        left: 17.578vw;
            font-style: normal;
        font-weight: 500;
        font-size: 2.344vw;
        color: #222222;
    }
}

@media (max-width:400px) {
    .body-wrapper .mypage-div a hr {
        top: 13vw;
    }
}